{"version":3,"sources":["webpack:///./Scripts/Containers/Newsletter.container.js"],"names":["close","redirect","a","get","document","body","classList","remove","window","location","href","props","payload","isPopup","RodalNewsletter","NewsletterContent","useState","visible","setVisible","delayDone","setDelayDone","delayInSeconds","useEffect","add","customStyles","width","height","onClose","preventScroll","title","preamble","text","genderText","buttonText","linkToPage","thankYouTitle","thankYouPreamble","imageUrl","email","gender","registrationPoint","values","setValues","handleValueChange","key","value","error","setError","registrationConfirmation","setRegistrationConfirmation","subscribe","put","translate","className","src","dangerouslySetInnerHTML","__html","onClick","name","type","placeholder","defaultValue","onChange","event","target","checked"],"mappings":"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","file":"31.5acffba262f183891e26.js","sourcesContent":["import React, { useState, useEffect, Fragment } from 'react';\nimport { get, put } from '../Services/http';\nimport { translate } from '../Services/translation';\nimport Rodal from 'rodal';\nimport 'rodal/lib/rodal.css';\n\nconst GENDER_MALE = 'male';\nconst GENDER_FEMALE = 'female';\n\nconst close = async redirect => {\n    await get('/api/newsletter/close');\n    document.body.classList.remove('no-scroll');\n\n    if (redirect) window.location.href = redirect;\n};\n\nexport default props =>\n    props.payload.isPopup ? (\n        <RodalNewsletter {...props} />\n    ) : (\n        <NewsletterContent {...props} />\n    );\n\nconst RodalNewsletter = props => {\n    const [visible, setVisible] = useState(false);\n    const [delayDone, setDelayDone] = useState(false);\n    const {\n        payload: { delayInSeconds },\n    } = props;\n    useEffect(() => {\n        if (!visible && !delayDone)\n            setTimeout(() => {\n                setDelayDone(true);\n                setVisible(true);\n                document.body.classList.add('no-scroll');\n            }, delayInSeconds * 1000);\n    });\n    return (\n        <Rodal\n            visible={visible && delayDone}\n            customStyles={{ width: 'auto', height: 'auto' }}\n            onClose={() => {\n                close();\n                setVisible(false);\n            }}\n            preventScroll={true}\n        >\n            <NewsletterContent {...props} />\n        </Rodal>\n    );\n};\n\nconst NewsletterContent = ({\n    payload: {\n        title,\n        preamble,\n        text,\n        genderText,\n        buttonText,\n        linkToPage,\n        thankYouTitle,\n        thankYouPreamble,\n        imageUrl,\n        isPopup,\n    },\n}) => {\n    const [values, setValues] = useState({\n        email: '',\n        gender: GENDER_FEMALE,\n        registrationPoint: 'PopupRegistrationPoint',\n    });\n    const handleValueChange = (key, value) =>\n        setValues({ ...values, [key]: value });\n    const [error, setError] = useState(null);\n    const [registrationConfirmation, setRegistrationConfirmation] =\n        useState(false);\n    const subscribe = async () => {\n        try {\n            setError(null);\n            await put('/api/newsletter/subscribe', values);\n            setRegistrationConfirmation(true);\n        } catch (error) {\n            setError(translate('newsletter.generalerror'));\n        }\n    };\n\n    return (\n        <div\n            className={\n                isPopup && imageUrl\n                    ? 'newsletter-block popup'\n                    : 'newsletter-block'\n            }\n        >\n            <div className=\"image-popup\">\n                {isPopup && <img src={imageUrl} />}\n            </div>\n            {!registrationConfirmation && (\n                <div className=\"newsletter-content\">\n                    <div className=\"row medium text-center\">\n                        <div className=\"columns\">\n                            <p className=\"small-title text-center\">\n                                {preamble}\n                            </p>\n                            <h3 className=\"title\">{title}</h3>\n                            <div\n                                className=\"text\"\n                                dangerouslySetInnerHTML={{ __html: text }}\n                            ></div>\n                        </div>\n                    </div>\n                    <div className=\"newsletter-form row narrow\">\n                        {!!linkToPage ? (\n                            <button onClick={() => close(linkToPage)}>\n                                {buttonText}\n                            </button>\n                        ) : (\n                            <Fragment>\n                                <div className=\"email-holder columns\">\n                                    <div className=\"email-input\">\n                                        <input\n                                            name=\"male\"\n                                            type=\"text\"\n                                            className=\"newsletter-email\"\n                                            placeholder={translate(\n                                                'newsletter.email.placeholder',\n                                            )}\n                                            defaultValue={''}\n                                            onChange={event =>\n                                                handleValueChange(\n                                                    'email',\n                                                    event.target.value,\n                                                )\n                                            }\n                                        />\n                                    </div>\n                                    <div className=\"validation-error\">\n                                        {error && (\n                                            <p className=\"checkout__validator--error\">\n                                                {error}\n                                            </p>\n                                        )}\n                                    </div>\n                                </div>\n                                <div className=\"gender-wrapper columns\">\n                                    <div className=\"text\">{genderText}</div>\n                                    <div className=\"checkbox-wrapper\">\n                                        <div className=\"newsletter-checkbox\">\n                                            <label\n                                                className={`checkout-info__checkbox-label ${\n                                                    values.gender ===\n                                                        GENDER_FEMALE &&\n                                                    'checked'\n                                                } `}\n                                            >\n                                                <input\n                                                    type=\"checkbox\"\n                                                    name=\"female\"\n                                                    className=\"checkout-info__checkbox-input\"\n                                                    checked={\n                                                        values.gender ===\n                                                        GENDER_FEMALE\n                                                    }\n                                                    onChange={event => {\n                                                        if (\n                                                            event.target.checked\n                                                        )\n                                                            handleValueChange(\n                                                                'gender',\n                                                                GENDER_FEMALE,\n                                                            );\n                                                    }}\n                                                />\n                                                {translate('gender.female')}\n                                            </label>\n                                        </div>\n                                        <div className=\"newsletter-checkbox\">\n                                            <label\n                                                className={`checkout-info__checkbox-label ${\n                                                    values.gender ===\n                                                        GENDER_MALE && 'checked'\n                                                } `}\n                                            >\n                                                <input\n                                                    type=\"checkbox\"\n                                                    name=\"male\"\n                                                    className=\"checkout-info__checkbox-input\"\n                                                    checked={\n                                                        values.gender ===\n                                                        GENDER_MALE\n                                                    }\n                                                    onChange={event => {\n                                                        if (\n                                                            event.target.checked\n                                                        )\n                                                            handleValueChange(\n                                                                'gender',\n                                                                GENDER_MALE,\n                                                            );\n                                                    }}\n                                                />\n                                                {translate('gender.male')}\n                                            </label>\n                                        </div>\n                                    </div>\n                                </div>\n                                <button onClick={subscribe}>\n                                    {buttonText}\n                                </button>\n                            </Fragment>\n                        )}\n                    </div>\n                </div>\n            )}\n            {registrationConfirmation && (\n                <div className=\"newsletter-content\">\n                    <div className=\"newsletter-form row narrow\">\n                        <div className=\"row medium\">\n                            <div className=\"columns\">\n                                <div>\n                                    <h3 className=\"text-center\">\n                                        {thankYouTitle}\n                                    </h3>\n                                    <p className=\"small-title text-center narrow\">\n                                        {thankYouPreamble}\n                                    </p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"sourceRoot":""}