{"version":3,"sources":["webpack:///./Scripts/Components/QuotationButtonContainer.js"],"names":["QuotationForm","props","termsTranslation","translate","termsLinkTranslation","onSubmit","e","onMailSubmit","setVisible","className","onClick","itemProp","fields","map","field","InputField","id","toLowerCase","value","onChange","required","tagType","type","name","checked","terms","event","onChecked","target","includes","replace","href","link","rel","key","htmlFor","ActionStatusMessage","isLoading","isSuccessful","haveResponded","dispatch","useDispatch","visible","useState","articleNumber","setArticleNumber","productId","articleName","setArticleName","productName","customerName","setCustomerName","customerEmail","setCustomerEmail","customerPhone","setCustomerPhone","customerCompanyName","setCustomerCompanyName","customerAddress","setCustomerAddress","customerDeliveryAddress","setCustomerDeliveryAddress","customerMessage","setCustomerMessage","acceptedTerms","setTerms","mailSelector","useSelector","state","mailProduct","ariaHideApp","preventScroll","isOpen","onRequestClose","style","content","width","height","top","left","transform","overlay","background","zIndex","shouldCloseOnOverlayClick","preventDefault","data","sendProductQuotation","response","mailResponse","quotationTerms"],"mappings":"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","file":"451.fc60c50f146588689ec6.js","sourcesContent":["import React, { useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { sendProductQuotation, } from '../Actions/ProductInfo.action';\r\nimport { translate } from '../Services/translation';\r\nimport Modal from 'react-modal';\r\n\r\nconst QuotationButtonContainer = (props) => {\r\n\r\n    const dispatch = useDispatch();\r\n\r\n    const [visible, setVisible] = useState(false);\r\n\r\n    const [articleNumber, setArticleNumber] = useState(props.productId ?? '');\r\n    const [articleName, setArticleName] = useState(props.productName ?? '');\r\n    const [customerName, setCustomerName] = useState('');\r\n    const [customerEmail, setCustomerEmail] = useState('');\r\n    const [customerPhone, setCustomerPhone] = useState('');\r\n    const [customerCompanyName, setCustomerCompanyName] = useState('');\r\n    const [customerAddress, setCustomerAddress] = useState('');\r\n    const [customerDeliveryAddress, setCustomerDeliveryAddress] = useState('');\r\n    const [customerMessage, setCustomerMessage] = useState('');\r\n    const [acceptedTerms, setTerms] = useState(false);\r\n\r\n    const mailSelector = useSelector((state) => state.mailProduct);\r\n\r\n    const handleSubmitEmail = (event) => {\r\n        event.preventDefault();\r\n\r\n        const data = {\r\n            articleNumber,\r\n            articleName,\r\n            customerName,\r\n            customerEmail,\r\n            customerPhone,\r\n            customerCompanyName,\r\n            customerAddress,\r\n            customerDeliveryAddress,\r\n            customerMessage,\r\n            acceptedTerms\r\n        };\r\n\r\n        dispatch(sendProductQuotation(data));\r\n    };\r\n\r\n    const customStyles = {\r\n        content: {\r\n            width: \"fit-content\",\r\n            height: \"80%\",\r\n            top: \"50%\",\r\n            left: \"50%\",\r\n            transform: \"translate(-50%, -50%)\"\r\n        },\r\n        overlay: {\r\n            background: 'rgba(0, 0, 0, 0.8)',\r\n            zIndex: 2003,\r\n\r\n        },\r\n    };\r\n\r\n    const fields = [\r\n        {\r\n            id: \"articleNumber\",\r\n            value: articleNumber,\r\n            onChange: setArticleNumber,\r\n            required: false\r\n        },\r\n        {\r\n            id: \"articleName\",\r\n            value: articleName,\r\n            onChange: setArticleName,\r\n            required: true\r\n        },\r\n        {\r\n            id: \"customerName\",\r\n            value: customerName,\r\n            onChange: setCustomerName,\r\n            required: true\r\n        },\r\n        {\r\n            id: \"customerEmail\",\r\n            value: customerEmail,\r\n            onChange: setCustomerEmail,\r\n            required: true,\r\n            type: \"email\"\r\n        },\r\n        {\r\n            id: \"customerPhone\",\r\n            value: customerPhone,\r\n            onChange: setCustomerPhone,\r\n            required: true\r\n        },\r\n        {\r\n            id: \"customerCompanyName\",\r\n            value: customerCompanyName,\r\n            onChange: setCustomerCompanyName,\r\n            required: false\r\n        },\r\n        {\r\n            id: \"customerAddress\",\r\n            value: customerAddress,\r\n            onChange: setCustomerAddress,\r\n            required: false\r\n        },\r\n        {\r\n            id: \"customerDeliveryAddress\",\r\n            value: customerDeliveryAddress,\r\n            onChange: setCustomerDeliveryAddress,\r\n            required: false\r\n        },\r\n        {\r\n            id: \"customerMessage\",\r\n            value: customerMessage,\r\n            onChange: setCustomerMessage,\r\n            required: false,\r\n            tagType: \"textarea\"\r\n        }\r\n    ]\r\n\r\n    return (\r\n        <div>\r\n            <button\r\n                onClick={() => {\r\n                    setVisible(true);\r\n                }\r\n                }\r\n                className={\r\n                    `${\"buy-button product-quotation__buy-btn\"} ${!mailSelector.isLoading\r\n                        && !mailSelector.isSuccessful\r\n                        && mailSelector.haveResponded\r\n                        ? \" error\"\r\n                        : \"\"}`\r\n                }\r\n            >\r\n\r\n                {ActionStatusMessage(\r\n                    mailSelector.isLoading,\r\n                    mailSelector.isSuccessful,\r\n                    mailSelector.haveResponded)}\r\n\r\n            </button>\r\n\r\n            <Modal\r\n                ariaHideApp={false}\r\n                preventScroll={true}\r\n                isOpen={visible}\r\n                onRequestClose={() => setVisible(false)}\r\n                style={customStyles}\r\n                shouldCloseOnOverlayClick={false}\r\n            >\r\n                <QuotationForm\r\n                    onMailSubmit={handleSubmitEmail}\r\n                    response={props.mailResponse}\r\n                    setVisible={() => setVisible(false)}\r\n                    fields={fields}\r\n                    terms={{\r\n                        value: acceptedTerms,\r\n                        onChecked: setTerms,\r\n                        link: props.quotationTerms\r\n                    }}\r\n                />\r\n            </Modal>\r\n        </div>\r\n    );\r\n};\r\n\r\nconst QuotationForm = (props) => {\r\n\r\n    const termsTranslation = translate(\"product.quotation.termstext\");\r\n    const termsLinkTranslation = translate(\"product.quotation.termslinktext\");\r\n\r\n    return (\r\n        <form\r\n            onSubmit={(e) => {\r\n                props.onMailSubmit(e);\r\n                props.setVisible(false);\r\n            }}\r\n            className=\"product-quotation__forms-container\"\r\n        >\r\n            <button\r\n                onClick={() => props.setVisible(false)}\r\n                className=\"product-quotation__close-btn\"\r\n            >\r\n                &times;\r\n            </button>\r\n\r\n            <h1 className=\"product-quotation__name\" itemProp=\"name\">{translate(\"product.quotation.title\")}</h1>\r\n\r\n            {props.fields.map(field => InputField(field.id.toLowerCase(), field.value, field.onChange, field.required, field.tagType, field.type))}\r\n\r\n            <div className=\"product-quotation__forms-container__form-control\">\r\n                <div className=\"product-quotation__terms-container\">\r\n                    <input\r\n                        className=\"product-quotation__terms-container__checkbox\"\r\n                        id=\"quotationTerms\"\r\n                        name=\"quotationTerms\"\r\n                        type=\"checkbox\"\r\n                        checked={props.terms.value}\r\n                        onChange={(event) => props.terms.onChecked(event.target.checked)}\r\n                        required={true}\r\n                    />\r\n                    <label className=\"product-quotation__terms-container__label\">\r\n                        {termsTranslation.includes(\"{0}\")\r\n                            ? termsTranslation.replace(\"{0}\", termsLinkTranslation)\r\n                            : <span>{termsTranslation} <a href={props.terms.link} target=\"_blank\" rel=\"noreferrer noopener\" className=\"link-with-underline\">{termsLinkTranslation}</a></span>\r\n                        }\r\n                    </label>\r\n                </div>\r\n            </div>\r\n\r\n            <div>\r\n                <button className=\"product-quotation__button confirm\" type=\"submit\">\r\n                    {translate('product.actions.submit-button-text')}\r\n                </button>\r\n            </div>\r\n        </form>\r\n    );\r\n};\r\n\r\nconst InputField = (id, value, onChange, required = false, tagType = \"input\", type = \"text\") => {\r\n    return (\r\n        <div key={id} className=\"product-quotation__forms-container__form-control\">\r\n            <label className=\"form__labdotnet rel\" htmlFor={id}>\r\n                {translate(`product.quotation.${id}`)}\r\n            </label>\r\n            {tagType === \"input\" && <input\r\n                className=\"form__input\"\r\n                id={id}\r\n                name={id}\r\n                type={type}\r\n                value={value}\r\n                onChange={(event) => onChange(event.target.value)}\r\n                required={required}\r\n            />}\r\n            {tagType === \"textarea\" && <textarea\r\n                className=\"form__input\"\r\n                id={id}\r\n                name={id}\r\n                value={value}\r\n                onChange={(event) => onChange(event.target.value)}\r\n                required={required}\r\n            />}\r\n        </div>\r\n    );\r\n}\r\n\r\nconst ActionStatusMessage = (isLoading, isSuccessful, haveResponded) => {\r\n    if (isLoading) {\r\n        return translate('product.actions.quotation.loading-message')\r\n    } else if (!isLoading && isSuccessful && haveResponded) {\r\n        return translate('product.actions.quotation.success-message');\r\n    } else if (!isLoading && !isSuccessful && haveResponded) {\r\n        return translate('product.actions.quotation.failed-message');\r\n    }\r\n    return translate('product.actions.quotation.button');\r\n};\r\n\r\nexport default QuotationButtonContainer;\r\n"],"sourceRoot":""}