{"version":3,"sources":["webpack:///./Scripts/UniGraphics/Components/FileUpload.js","webpack:///./Scripts/UniGraphics/Components/OrderArticleForm.js"],"names":["props","dispatch","useDispatch","onDrop","useCallback","acceptedFiles","formData","FormData","fileNames","i","length","push","name","append","setFileNames","upload","email","removeFileName","getRootProps","getInputProps","useDropzone","accept","maxSize","files","map","file","index","key","path","uploading","Fragment","href","onClick","event","deleteFile","preventDefault","remove","translate","splice","spinnerClassNames","errorClassNames","error","inputProps","disabled","className","orderArticleFormSchema","object","shape","string","required","phonenumber","articleNumber","fileUpload","useSelector","state","payload","isSubmitting","result","errors","orderArticleForm","orderArticleFormDetails","onSubmit","submit","onSubmitError","submitError","submitDone","onChange","propName","value","setOrderArticleFormDetails","orderArticle","submitRequest","validate","then","catch","addressPath","message","htmlFor","id","type","autoComplete","target","data-error-for"],"mappings":"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","file":"395.513894eed6123f7bfd6d.js","sourcesContent":["import React, { Fragment, useMemo, useCallback } from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { upload, deleteFile } from '../Actions/FileUpload.action';\r\nimport { setFileNames } from '../Actions/OrderArticleForm.action';\r\nimport { useDispatch } from 'react-redux';\r\nimport { translate } from '../Services/translation';\r\n\r\nconst FileUpload = (props) => {\r\n    const dispatch = useDispatch();\r\n\r\n    const onDrop = useCallback(acceptedFiles => {\r\n        let formData = new FormData();\r\n        let fileNames = [];\r\n        for (let i = 0; i < acceptedFiles.length; i++) {\r\n            fileNames.push(acceptedFiles[i].name);\r\n            formData.append('files', acceptedFiles[i]);\r\n        }\r\n        dispatch(setFileNames(fileNames));\r\n        dispatch(upload(formData, props.email));\r\n    }, [props]);\r\n\r\n    const removeFileName = useCallback(acceptedFiles => {\r\n        let fileNames = [];\r\n        for (let i = 0; i < acceptedFiles.length; i++) {\r\n            fileNames.push(acceptedFiles[i].name);\r\n        }\r\n        dispatch(setFileNames(fileNames));\r\n    }, [props]);\r\n\r\n    const {\r\n        getRootProps,\r\n        getInputProps,\r\n        acceptedFiles\r\n    } = useDropzone({\r\n        onDrop,\r\n        accept: '.pdf, .jpg, .png, .webp',\r\n        maxSize: 35000000\r\n    });\r\n\r\n    const files = acceptedFiles.map((file, index) => (\r\n        <li key={file.path}>\r\n            {file.path}\r\n            {!props.uploading &&\r\n                <Fragment>&nbsp;- <a href=\"#\" onClick={(event) => {\r\n                    dispatch(deleteFile(file.path, props.email));\r\n                    event.preventDefault();\r\n                    remove(index);\r\n                    removeFileName(acceptedFiles);\r\n                }}>\r\n                    {translate('code.shared.delete')}\r\n                </a>\r\n                </Fragment>\r\n            }\r\n\r\n        </li>\r\n    ));\r\n\r\n    const remove = index => {\r\n        acceptedFiles.splice(index, 1);\r\n    };\r\n\r\n    const spinnerClassNames = `file-upload__spinner${!props.uploading ? '--hidden' : ''} spinner`;\r\n    const errorClassNames = `file-upload__error${(props.error && !props.uploading) ? '--visible' : ''}`;\r\n    const inputProps = getInputProps();\r\n    inputProps.disabled = acceptedFiles.length > 0 && !props.error || !props.email || props.email === \"\";\r\n\r\n    return (<div className=\"small-12 medium-12 columns\">\r\n        <div className=\"file-upload\">\r\n            <div {...getRootProps()} className=\"file-upload__container\">\r\n                <input {...inputProps} />\r\n                {acceptedFiles.length == 0 &&\r\n                    <p>{translate('code.order.article.form.draganddropfiles')}</p>\r\n                }\r\n                {acceptedFiles.length > 0 &&\r\n                    <Fragment>\r\n                        {!props.uploading &&\r\n                            <h4 className=\"file-upload__header\">{translate('code.order.article.form.files')}</h4>\r\n                        }\r\n                        <div className={spinnerClassNames}></div>\r\n                        <span className={errorClassNames}>{translate('code.order.article.form.fileuploaderrors')}</span>\r\n                        {!props.error &&\r\n                            <ul>{files}</ul>\r\n                        }\r\n                    </Fragment>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n    );\r\n}\r\n\r\nexport default FileUpload","import React, { useCallback, Fragment } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { translate } from '../Services/translation';\r\nimport { string, object } from 'yup';\r\nimport FileUpload from './FileUpload';\r\n\r\nimport {\r\n    submit,\r\n    submitError,\r\n    submitRequest,\r\n    submitDone,\r\n    setOrderArticleFormDetails\r\n} from '../Actions/OrderArticleForm.action';\r\n\r\nconst orderArticleFormSchema = object().shape({\r\n    email: string()\r\n        .required(translate(`validation.required`))\r\n        .email(translate(`validation.email`)),\r\n    phonenumber: string().required(translate(`validation.required`))\r\n});\r\n\r\nconst OrderArticleForm = ({ articleNumber }) => {\r\n    const dispatch = useDispatch();\r\n    const fileUpload = useSelector((state) => state.fileUpload);\r\n    const { payload, isSubmitting, result = {}, errors = {} } = useSelector((state) => state.orderArticleForm);\r\n    fileUpload.email = payload.orderArticleFormDetails.email;\r\n\r\n    const onSubmit = useCallback(() => dispatch(submit()), [dispatch]);\r\n    const onSubmitError = useCallback(\r\n        (error) => {\r\n            dispatch(submitError(error));\r\n            dispatch(submitDone(null));\r\n        },\r\n        [dispatch]\r\n    );\r\n\r\n    const onChange = useCallback(\r\n        (propName, value) => {\r\n            dispatch(setOrderArticleFormDetails(propName, value));\r\n            dispatch(setOrderArticleFormDetails(\"articleNumber\", articleNumber));\r\n        },\r\n        [dispatch, articleNumber]\r\n    );\r\n\r\n    const orderArticle = useCallback(() => {\r\n        const onError = (error, addressPath = 'orderArticleFormDetails') => {\r\n            error.path = `${addressPath}-${error.path}`;\r\n            onSubmitError(error);\r\n        };\r\n        dispatch(submitRequest());\r\n\r\n        orderArticleFormSchema\r\n            .validate({\r\n                ...payload.orderArticleFormDetails\r\n            })\r\n            .then(() => {\r\n                onSubmit();\r\n            })\r\n            .catch(onError);\r\n    },\r\n        [payload, onSubmit, onSubmitError, dispatch]);\r\n\r\n    return (\r\n        <Fragment>\r\n            {result && result.message && result.message !== \"\" ? (\r\n                <div><p>{result.message}</p></div>\r\n            ) : (<div className=\"row\">\r\n                <div className=\"small-12 columns\">\r\n                    <div className=\"row-inner\">\r\n                        <div className=\"small-6 columns\">\r\n                            <div className=\"input-wrapper\">\r\n                                <label className=\"form__label\" htmlFor=\"orderArticleFormDetails-email\"><span>{translate('checkout.customerinfo.email')}</span></label>\r\n                                <input className=\"form__input\"\r\n                                    id=\"orderArticleFormDetails-email\"\r\n                                    name=\"orderArticleFormDetails-email\"\r\n                                    type=\"email\"\r\n                                    autoComplete=\"email\"\r\n                                    value={(payload[\"orderArticleFormDetails\"] || {})[\"email\"] || ''}\r\n                                    onChange={(event) => onChange(\"email\", event.target.value)}></input>\r\n                                {errors['orderArticleFormDetails-email'] &&\r\n                                    (\r\n                                        <span className=\"form__validator--error form__validator--top-narrow\"\r\n                                            data-error-for={'orderArticleFormDetails-email'}>\r\n                                            {errors['orderArticleFormDetails-email'][0]}\r\n                                        </span>\r\n                                    )}\r\n                            </div>\r\n                        </div>\r\n                        <div className=\"small-6 columns\">\r\n                            <div className=\"input-wrapper\">\r\n                                <label className=\"form__label\" htmlFor=\"orderArticleFormDetails-phonenumber\"><span>{translate('checkout.customerinfo.phonenumber')}</span></label>\r\n                                <input className=\"form__input\"\r\n                                    id=\"orderArticleFormDetails-phonenumber\"\r\n                                    name=\"orderArticleFormDetails-phonenumber\"\r\n                                    type=\"tel\"\r\n                                    autoComplete=\"tel\"\r\n                                    value={(payload[\"orderArticleFormDetails\"] || {})[\"phonenumber\"] || ''}\r\n                                    onChange={(event) => onChange(\"phonenumber\", event.target.value)}></input>\r\n                                {errors['orderArticleFormDetails-phonenumber'] &&\r\n                                    (\r\n                                        <span className=\"form__validator--error form__validator--top-narrow\"\r\n                                            data-error-for={'orderArticleFormDetails-phonenumber'}>\r\n                                            {errors['orderArticleFormDetails-phonenumber'][0]}\r\n                                        </span>\r\n                                    )}\r\n                            </div>\r\n                        </div>\r\n                        <div className=\"small-12 columns\">\r\n                            <div className=\"input-wrapper\">\r\n                                <label className=\"form__label\" htmlFor=\"orderArticleFormDetails-message\"><span>{translate('checkout.order.message')}</span></label>\r\n                                <textarea className=\"form__input form__textarea\"\r\n                                    id=\"orderArticleFormDetails-message\"\r\n                                    name=\"orderArticleFormDetails-message\"\r\n                                    type=\"textarea\"\r\n                                    autoComplete=\"off\"\r\n                                    value={(payload[\"orderArticleFormDetails\"] || {})[\"message\"] || ''}\r\n                                    onChange={(event) => onChange(\"message\", event.target.value)}></textarea>\r\n                                {errors['orderArticleFormDetails-message'] &&\r\n                                    (\r\n                                        <span className=\"form__validator--error form__validator--top-narrow\"\r\n                                            data-error-for={'orderArticleFormDetails-message'}>\r\n                                            {errors['orderArticleFormDetails-message'][0]}\r\n                                        </span>\r\n                                    )}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <FileUpload {...fileUpload} />\r\n\r\n                {errors['general'] && (\r\n                    <span className=\"form__validator--error form__validator--top-narrow\"\r\n                        data-error-for={'general'}>\r\n                        {errors['general'][0]}\r\n                    </span>\r\n                )}\r\n\r\n                <div className=\"small-12 columns\">\r\n                    <button\r\n                        type=\"submit\"\r\n                        className=\"order-article-form__submit-button btn btn--yellow btn--rounded btn--medium\"\r\n                        disabled={isSubmitting || fileUpload.uploading}\r\n                        onClick={orderArticle}\r\n                    >\r\n                        {translate('code.order.article.form.confirm')}\r\n                    </button>\r\n                </div>\r\n            </div>)}\r\n        </Fragment>\r\n    );\r\n}\r\n\r\nexport default OrderArticleForm"],"sourceRoot":""}