{"version":3,"file":"component---src-pages-actie-js-38e9ab3fa443d084ebf0.js","mappings":"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","sources":["webpack://antero-website/./src/pages/actie.js","webpack://antero-website/./src/pages/components/Game.js","webpack://antero-website/./src/pages/components/PriceCheck.js","webpack://antero-website/./src/pages/components/Prices.js"],"sourcesContent":["import React from 'react';\nimport Footer from \"./components/Footer\";\nimport Header from \"./components/Header\";\nimport Game from \"./components/Game\";\nimport Prices from \"./components/Prices\";\nimport {graphql} from \"gatsby\";\nimport {Helmet} from \"react-helmet\";\n\n\nconst WinAction = ({data}) => {\n    return (\n        <div>\n            <Helmet>\n                <meta charSet=\"utf-8\" />\n                <title>Fashion Antero | Wedstrijd</title>\n            </Helmet>\n\n            <Header/>\n            <Game />\n\n            <Prices prices={data.cms.prices}/>\n            <Footer/>\n        </div>\n    );\n};\n\nexport const query = graphql`\nquery {\n  cms {\n    prices {\n      description\n      id\n      additionalRules\n      imageUrl\n    }\n  }\n}\n`\n\nexport default WinAction;\n","import React, {useState} from 'react'\nimport PriceCheck from \"./PriceCheck\";\nimport PriceConfirmation from \"./PriceConfirmation\";\n\nexport default function Game() {\n    const [data, setData] = useState(undefined);\n\n    if (data !== undefined) {\n        return (\n            <PriceConfirmation data={data}/>\n        )\n    }\n\n    return (\n        <PriceCheck onCompleted={(code, price, claimId) => setData({\n            price: price,\n            code: code,\n            claimId: claimId\n        })}/>\n    )\n}\n\n","import React, {useState} from 'react'\n\nconst CHECK_CODE_MUTATION = `\n    mutation PriceCheck($data: PriceCheckInputType!) {\n        priceCheck(data: $data) {          \n          ok   \n           price {      \n              type {\n                description\n              }\n           } \n           claimId\n           resultMessage\n        }\n    }`;\n\nconst PriceCheck = ({onCompleted}) => {\n    const [code, setCode] = useState(\"\")\n    const [loading, setLoading] = useState(false)\n    const [error, setError] = useState(undefined)\n    const [validationError, setValidationError] = useState(undefined)\n\n    const validation = (code) => {\n        let error = undefined\n\n        if (code.trim(' ') === \"\") {\n            setValidationError('Ongeldige wedstrijdcode')\n        }\n\n        return error === undefined ? true : false\n    }\n\n    const handleCheckCode = (code) => {\n        setError(undefined)\n        if (validation(code)) {\n            setLoading(true);\n            setError(undefined);\n\n            fetch('/graphql', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application/json'\n                },\n                body: JSON.stringify({\n                    query: CHECK_CODE_MUTATION,\n                    variables: {\n                        data: {\n                            code: code,\n                        }\n                    }\n                })\n            })\n                .then((result) => result.json())\n                .then((result) => {\n                    if (result.data.priceCheck.ok) {\n                        onCompleted(code, result.data.priceCheck.price, result.data.priceCheck.claimId);\n                    } else if (!result.data.priceCheck.ok) {\n                        const messageCode = result.data.priceCheck.resultMessage;\n                        if (messageCode === \"INVALID_CODE\") {\n                            setError(\"Ongeldige wedstrijdcode\")\n                        } else if (messageCode === \"ALREADY_USED\") {\n                            setError(\"Wedstrijdcode reeds gebruikt\")\n                        } else {\n                            setError('Er ging iets fout, probeer later opnieuw');\n                        }\n                    } else {\n                        setError('Er ging iets fout, probeer later opnieuw');\n                    }\n                    setLoading(false);\n                })\n                .catch((error) => {\n                    setError('ERROR');\n                    setLoading(false);\n                });\n        }\n    };\n\n    return (\n        <div className=\"bg-primary\">\n            <div className=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n                <h2 className=\"text-3xl font-extrabold text-white sm:text-4xl\">\n                    <span className=\"block\">WIN WIN WIN!</span>\n                    <span className=\"block\"></span>\n                </h2>\n                <p className=\"mt-4 text-lg leading-6 text-indigo-200\">\n                    Voer hieronder uw unieke code in en bekijk onmiddellijk welke korting u heeft gewonnen.\n                </p>\n\n                <div className=\"mt-4\">\n                    <div className=\"flex flex-col\">\n                        <div className=\"mb-2\">\n                            <label htmlFor=\"email-address\" className=\"sr-only\"> Code </label>\n                            <input\n                                id=\"code\"\n                                name=\"code\"\n                                type=\"text\"\n                                required\n                                className=\"w-full border-white px-5 py-3 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white rounded-md\"\n                                placeholder=\"Code\"\n                                value={code}\n                                onChange={(e) => setCode(e.target.value)}\n                            />\n                        </div>\n\n                        {validationError &&\n                        <div className=\"bg-red-500 text-white p-2 mb-4\">{validationError}</div>}\n\n                        {error &&\n                        <div className=\"bg-red-500 text-white p-2 mb-4\">{error}</div>}\n\n                        <button onClick={() => handleCheckCode(code)}\n                                className=\"mt-3 w-full flex items-center justify-center py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white sm:mt-0 sm:flex-shrink-0\"\n                        >\n                            Valideer\n                        </button>\n                    </div>\n\n                    <p className=\"mt-3 text-sm text-indigo-100\">\n                        Wij geven om de bescherming van uw gegevens. Lees ons{' '}\n                        <a href=\"/privacy.pdf\" target=\"_blank\" className=\"text-white font-medium underline\">\n                            privacybeleid.\n                        </a>\n                    </p>\n                    <p className=\"mt-3 text-sm text-indigo-100\">\n                        Door deel te nemen aan de actie gaat u akkoord met de <a className=\"text-white font-medium underline\" href=\"/actievoorwaarden.pdf\" target=\"_blank\">voorwaarden</a>\n                    </p>\n\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default PriceCheck;\n","import React from 'react'\nimport {map} from 'lodash';\n\nexport default function Prices({prices}) {\n    return (\n        <div className=\"bg-white\">\n            <div className=\"max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8\">\n                <h2 className=\"text-3xl font-extrabold text-gray-900 text-center\">Spetterende kortingen!</h2>\n                <div className=\"mt-12\">\n                    <dl className=\"space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3\">\n                        {map(prices, (price) => (\n                            <div className=\"flex\" key={price.id}>\n                                <div className='mr-4'><img src={price.imageUrl}  style={{width: 100}}/></div>\n\n                                <div className=\"justify-center align-middle\">\n                                    <dt className=\"text-lg leading-6 font-medium text-gray-900\">{price.description}</dt>\n                                    <dd className=\"mt-2 text-base text-gray-500\">{price.additionalRules}</dd>\n                                </div>\n                            </div>\n                        ))}\n                    </dl>\n                </div>\n            </div>\n        </div>\n    )\n}\n"],"names":["data","charSet","prices","cms","Game","useState","undefined","setData","onCompleted","code","price","claimId","setCode","setLoading","error","setError","validationError","setValidationError","handleCheckCode","trim","validation","fetch","method","headers","body","JSON","stringify","query","variables","then","result","json","priceCheck","ok","messageCode","resultMessage","catch","className","htmlFor","id","name","type","required","placeholder","value","onChange","e","target","onClick","href","Prices","key","src","imageUrl","style","width","description","additionalRules"],"sourceRoot":""}