{"version":3,"sources":["webpack:///./src/components/TheBirraBehind/Steps/Step1.js","webpack:///./src/components/TheBirraBehind/StepForm.js","webpack:///./src/images/TheBirraBehind/arrow-down.svg","webpack:///./src/components/TheBirraBehind/hooks/useDevice.js","webpack:///./src/utils/functions.js","webpack:///./src/images/BackToLive/backIcon.png","webpack:///./src/scss/components/TheBirraBehind/_StepForm.module.scss"],"names":["SignupSchema","Yup","shape","fullname","min","max","required","email","province","birthDate","test","value","dateParts","split","length","day","Number","month","year","currentYear","Date","getFullYear","isNaN","instagram","preference","CheckboxInput","_ref","name","isChecked","setIsChecked","React","createElement","type","className","styles","termsRadio","id","checked","onChange","toggleCheck","htmlFor","Step1","_ref2","setValues","propValues","setStep","selectedEvent","selectedProvince","location","dateFieldClicked","setDateFieldClicked","useState","Formik","initialValues","validationSchema","onSubmit","values","newValues","data","state","dateofbirth","genre","event","node","eventId","pdv","address","url","href","td","Cookies","get","alert","window","dataLayer","push","event_category","event_action","event_label","interaction","component_name","fetch","method","body","JSON","stringify","credentials","headers","then","response","ok","navigate","NAME","userUid","text","console","error","catch","_ref3","errors","touched","setFieldValue","Form","formContainer","fieldContainer","Field","placeholder","inputStyle","errorBorder","onBlur","as","hidden","provincias","map","option","key","label","e","onlyNums","target","replace","formattedDate","formatDOB","onClick","fieldContainer4","titleText4","src","selectArrow","alt","inputStyle2","btnContainerSend","termsContainer","termsText","link","rel","btnSend","StepForm","onBack","page","setPage","isMobile","isSafari","useDeviceDetect","step","Fragment","stepFormContainer","formWrap","firstColumn","backBtn","btnWrapper","BackIcon","style","objectFit","width","secondColumn","module","exports","setMobile","setSafari","useEffect","userAgent","navigator","mobile","Boolean","match","isSafariBrowser","formatDate","string","reduce","acum","item","i","join","validateEmail","String","toLowerCase","cleanValue","slice","transformToSingleWord","inputString"],"mappings":"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","file":"3405f8ec431ee7234803b052a4789812f6fcab40-4bb364002651a46789f6.js","sourcesContent":["import React, { useState } from \"react\"\nimport { Formik, Form, Field, ErrorMessage } from \"formik\"\nimport provincias from \"./provincias.json\"\nimport styles from \"./../../../scss/components/TheBirraBehind/_StepForm.module.scss\"\nimport * as Yup from \"yup\"\nimport { formatDOB } from \"../../../utils/functions\"\nimport Cookies from \"js-cookie\"\nimport { navigate } from \"gatsby\"\nimport selectArrow from \"./../../../images/TheBirraBehind/arrow-down.svg\"\n\nconst SignupSchema = Yup.object().shape({\n  fullname: Yup.string()\n    .min(2, \"Demasiado corto\")\n    .max(50, \"Muy largo\")\n    .required(\"Este campo es obligatorio\"),\n  email: Yup.string()\n    .email(\"Email inválido\")\n    .required(\"Este campo es obligatorio\"),\n  province: Yup.string().required(\"Este campo es obligatorio\"),\n  birthDate: Yup.string()\n    .required(\"Este campo es obligatorio\")\n    .test(\"valid-date\", \"Fecha inválida\", (value) => {\n      if (!value) return false\n      const dateParts = value.split(\"/\")\n      if (dateParts.length !== 3) return false\n      const day = Number(dateParts[0])\n      const month = Number(dateParts[1])\n      const year = Number(dateParts[2])\n      const currentYear = new Date().getFullYear()\n      if (isNaN(day) || isNaN(month) || isNaN(year)) return false\n      if (day < 1 || day > 31) return false\n      if (month < 1 || month > 12) return false\n      if (year >= currentYear) return false\n      return true\n    }),\n  instagram: Yup.string()\n    .min(2, \"Demasiado corto\")\n    .max(50, \"Muy largo\")\n    .required(\"Este campo es obligatorio\"),\n  preference: Yup.string().required(\"Este campo es obligatorio\"),\n})\n\nconst CheckboxInput = ({ name, isChecked, setIsChecked }) => {\n  const toggleCheck = () => {\n    setIsChecked(!isChecked)\n  }\n  return (\n    <div>\n      <input\n        type=\"checkbox\"\n        className={styles.termsRadio}\n        name={name}\n        id={name}\n        checked={isChecked}\n        onChange={toggleCheck}\n      />\n      <label htmlFor={name}></label>\n    </div>\n  )\n}\n\nexport default function Step1({\n  setValues,\n  propValues,\n  setStep,\n  selectedEvent,\n  selectedProvince,\n  location,\n}) {\n  const [dateFieldClicked, setDateFieldClicked] = useState(false)\n  const [isChecked, setIsChecked] = useState(false)\n\n  return (\n    <Formik\n      initialValues={{\n        fullname: \"\",\n        email: \"\",\n        province: \"\",\n        birthDate: \"\",\n        instagram: \"\",\n        preference: \"\",\n      }}\n      validationSchema={SignupSchema}\n      onSubmit={(values) => {\n        const newValues = { ...propValues, ...values }\n        setValues(newValues)\n\n        const data = {\n          name: newValues.fullname,\n          email: newValues.email,\n          state: newValues.province,\n          dateofbirth: newValues.birthDate,\n          instagram: newValues.instagram,\n          genre: \"\",\n          preference: newValues.preference,\n          event: selectedEvent.node ? selectedEvent.node.name : selectedEvent.name,\n          eventId: selectedEvent.node ? selectedEvent.node.id : selectedEvent.id,\n          pdv: selectedEvent.node ? selectedEvent.node.address : selectedEvent.address,\n          url: location.href.split(\"?\")[0],\n        }\n        const td = Cookies.get(\"_td\")\n\n        if (!isChecked) {\n          alert(\"Debes aceptar los términos y condiciones para continuar\")\n          window.dataLayer.push({\n            event: \"GAEvent\",\n            event_category: \"Form\",\n            event_action: \"Error\",\n            event_label: \"Falta aceptar términos y condiciones\",\n            interaction: true,\n            component_name: \"boton_enviar\",\n          })\n          return\n        }\n\n        fetch(\n          \"https://wabudweiser-prd.azurewebsites.net/thebirrabehindmusic\",\n          {\n            method: \"POST\",\n            body: JSON.stringify(data),\n            credentials: \"include\",\n            headers: {\n              \"Content-Type\": \"application/json\",\n            },\n          }\n        )\n          .then((response) => {\n            if (response.ok) {\n              navigate(\"/lamusicaentusmanos/success\")\n              window.dataLayer.push({\n                event: \"GAEvent\",\n                event_category: \"Form\",\n                event_action: \"Success\",\n                event_label: selectedProvince.NAME || \"\",\n                interaction: true,\n                component_name: newValues.event,\n                userUid: `${td}`,\n              })\n            } else {\n              response.text().then((text) => {\n                console.error(\"Error guardando los datos.\\n\", text)\n              })\n            }\n          })\n          .catch((error) => {\n            console.error(\"Error al enviar los datos\", error)\n          })\n      }}\n    >\n      {({ errors, touched, values, setFieldValue }) => (\n        <Form className={styles.formContainer}>\n          <div className={styles.fieldContainer}>\n            <Field\n              name=\"fullname\"\n              placeholder=\"Nombre y apellido\"\n              className={`${styles.inputStyle} ${\n                errors.fullname && touched.fullname ? styles.errorBorder : \"\"\n              }`}\n              onBlur={() => {\n                window.dataLayer.push({\n                  event: \"GAEvent\",\n                  event_category: \"Form Bud Music\",\n                  event_action: \"Paso 1\",\n                  event_label: \"Nombre y Apellido\",\n                  interaction: true,\n                  component_name: \"boton_siguiente\",\n                })\n                setStep(\"1\")\n              }}\n            />\n            {/* <ErrorMessage\n              name=\"fullname\"\n              component=\"div\"\n              className={styles.errorText}\n            /> */}\n\n            <Field\n              name=\"email\"\n              type=\"email\"\n              placeholder=\"Email\"\n              className={`${styles.inputStyle} ${\n                errors.email && touched.email ? styles.errorBorder : \"\"\n              }`}\n              onBlur={() => {\n                window.dataLayer.push({\n                  event: \"GAEvent\",\n                  event_category: \"Form Bud Music\",\n                  event_action: \"Paso 2\",\n                  event_label: \"Email\",\n                  interaction: true,\n                  component_name: \"boton_siguiente\",\n                })\n                setStep(\"2\")\n              }}\n            />\n            {/* <ErrorMessage\n              name=\"email\"\n              component=\"div\"\n              className={styles.errorText}\n            /> */}\n\n            <Field\n              name=\"province\"\n              as=\"select\"\n              className={`${styles.inputStyle} ${\n                errors.province && touched.province ? styles.errorBorder : \"\"\n              }`}\n              onBlur={() => {\n                window.dataLayer.push({\n                  event: \"GAEvent\",\n                  event_category: \"Form Bud Music\",\n                  event_action: \"Paso 3\",\n                  event_label: \"Provincia\",\n                  interaction: true,\n                  component_name: \"boton_siguiente\",\n                })\n                setStep(\"3\")\n              }}\n            >\n              <option hidden>Seleccione provincia</option>\n              {provincias.map((option) => (\n                <option key={option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </Field>\n            {/* <ErrorMessage\n              name=\"province\"\n              component=\"div\"\n              className={styles.errorText}\n            /> */}\n\n            <Field\n              name=\"birthDate\"\n              type=\"text\"\n              placeholder={\n                dateFieldClicked ? \"DD/MM/AAAA\" : \"Fecha de nacimiento\"\n              }\n              className={`${styles.inputStyle} ${\n                errors.birthDate && touched.birthDate ? styles.errorBorder : \"\"\n              }`}\n              onChange={(e) => {\n                const onlyNums = e.target.value.replace(/[^0-9]/g, \"\")\n                const formattedDate = formatDOB(onlyNums)\n                setFieldValue(\"birthDate\", formattedDate)\n              }}\n              onClick={() => setDateFieldClicked(true)}\n              onBlur={() => {\n                window.dataLayer.push({\n                  event: \"GAEvent\",\n                  event_category: \"Form Bud Music\",\n                  event_action: \"Paso 4\",\n                  event_label: \"Fecha de nacimiento\",\n                  interaction: true,\n                  component_name: \"boton_siguiente\",\n                })\n                setStep(\"4\")\n              }}\n            />\n            {/* <ErrorMessage\n              name=\"birthDate\"\n              component=\"div\"\n              className={styles.errorText}\n            /> */}\n\n            <Field\n              name=\"instagram\"\n              placeholder=\"Instagram\"\n              className={`${styles.inputStyle} ${\n                errors.instagram && touched.instagram ? styles.errorBorder : \"\"\n              }`}\n              onBlur={() => {\n                window.dataLayer.push({\n                  event: \"GAEvent\",\n                  event_category: \"Form Bud Music\",\n                  event_action: \"Paso 5\",\n                  event_label: \"Instagram\",\n                  interaction: true,\n                  component_name: \"boton_siguiente\",\n                })\n                setStep(\"5\")\n              }}\n            />\n            {/* <ErrorMessage\n              name=\"instagram\"\n              component=\"div\"\n              className={styles.errorText}\n            /> */}\n\n            <div className={styles.fieldContainer4}>\n              <h1 className={styles.titleText4}>\n                ¿En qué ocasiones acostumbrás a consumir cerveza?\n              </h1>\n              <img src={selectArrow} className={styles.selectArrow} alt=\"\" />\n              <Field\n                name=\"preference\"\n                as=\"select\"\n                className={`${styles.inputStyle2} ${\n                  errors.preference && touched.preference\n                    ? styles.errorBorder\n                    : \"\"\n                }`}\n                onBlur={() => {\n                  window.dataLayer.push({\n                    event: \"GAEvent\",\n                    event_category: \"Form Bud Music\",\n                    event_action: \"Paso 6\",\n                    event_label: \"Ocasión de consumo\",\n                    interaction: true,\n                    component_name: \"boton_siguiente\",\n                  })\n                  setStep(\"6\")\n                }}\n              >\n                <option hidden>Seleccione una ocasión de consumo</option>\n                <option value=\"Cocinando / Almorzando o cenando solo o acompañado\">\n                  Cocinando / Almorzando o cenando solo o acompañado\n                </option>\n                <option value=\"Con amigos / compañeros socializando en casa o en un bar\">\n                  Con amigos / compañeros socializando en casa o en un bar\n                </option>\n                <option value=\"Cuando me quiero relajar, viendo TV, en la plaza, usando RRSS o tomando sol\">\n                  Cuando me quiero relajar, viendo TV, en la plaza, usando RRSS\n                  o tomando sol\n                </option>\n                <option value=\"En una fiesta, preboliche, etc\">\n                  En una fiesta, preboliche, etc\n                </option>\n                <option value=\"No tomo cerveza\">No tomo cerveza</option>\n                <option value=\"Traslándome a algún lugar, mientras trabajo o hago mandados\">\n                  Traslándome a algún lugar, mientras trabajo o hago mandados\n                </option>\n              </Field>\n              {/* <ErrorMessage\n                name=\"preference\"\n                component=\"div\"\n                className={styles.errorText}\n              /> */}\n            </div>\n          </div>\n\n          <div className={styles.btnContainerSend}>\n            <div className={styles.termsContainer}>\n              <CheckboxInput\n                name=\"terms\"\n                isChecked={isChecked}\n                setIsChecked={setIsChecked}\n              />\n              <h4 className={styles.termsText}>\n                He leído y acepto&nbsp;\n                <a\n                  className={styles.link}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  href=\"/Bases y Condiciones  Promoción la Música en tus manos.pdf\"\n                >\n                  Bases y Condiciones\n                </a>\n                ,&nbsp;\n                <a\n                  className={styles.link}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  href=\"/PoliticadePrivacidad.pdf\"\n                >\n                  Políticas de Privacidad\n                </a>\n                ,&nbsp;\n                <a\n                  className={styles.link}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  href=\"/Terminos-Condiciones.pdf\"\n                >\n                  Términos y condiciones\n                </a>\n                &nbsp;y activaciones de marketing.\n              </h4>\n            </div>\n            <button className={styles.btnSend} type=\"submit\">\n              Enviar\n            </button>\n          </div>\n        </Form>\n      )}\n    </Formik>\n  )\n}\n\n// import React, { useEffect, useState } from \"react\"\n// import { Formik, Form, Field } from \"formik\"\n// import localidades from \"./proviciasylocalidades.json\"\n// import provincias from \"./provincias.json\"\n// import styles from \"./../../../scss/components/TheBirraBehind/_StepForm.module.scss\"\n// import * as Yup from \"yup\"\n// import { formatDOB } from \"../../../utils/functions\"\n// import Cookies from \"js-cookie\"\n// import { useHistory } from \"react-router\"\n// import selectArrow from \"./../../../images/TheBirraBehind/arrow-down.svg\"\n// import { navigate } from \"gatsby\"\n// const SignupSchema = Yup.object().shape({\n//   fullname: Yup.string()\n//     .min(2, \"Demasiado Corto!\")\n//     .max(50, \"Muy largo!\")\n//     .required(\"Este campo es obligatorio\"),\n//   email: Yup.string()\n//     .email(\"Mail invalido\")\n//     .required(\"Este campo es obligatorio\"),\n//   province: Yup.string().required(\"Este campo es obligatorio\"),\n//   birthDate: Yup.string().required(\"Este campo es obligatorio\"),\n\n//   instagram: Yup.string()\n//     .min(2, \"Demasiado Corto!\")\n//     .max(50, \"Muy largo!\")\n//     .required(\"Este campo es obligatorio\"),\n// })\n\n// export default function Step1({\n//   setPage,\n//   setValues,\n//   propValues,\n//   isSafari,\n//   isMobile,\n//   setStep,\n//   selectedEvent,\n//   selectedProvince,\n//   location\n// }) {\n//   let showBtn\n//   const [cities, setCities] = useState([])\n//   const [error, setError] = useState(\"\")\n//   const [dateFieldClicked, setDateFieldClicked] = useState(false)\n//   const [birthDateError, setBirthDateError] = useState(\"\")\n//   const [errorDate, setErrorDate] = useState(\"\")\n//   const [preferenceError, setPreferenceError] = useState(\"\")\n//   const [isChecked, setIsChecked] = useState(false)\n//   let history = useHistory()\n\n\n//   const CheckboxInput = ({ name, label, isChecked, setIsChecked, isMobile }) => {\n//     const toggleCheck = e => {\n//       setIsChecked(() => !isChecked)\n//     }\n//     return (\n//         <div>\n//           <input\n//               type=\"checkbox\"\n//               className={styles.termsRadio}\n//               name={name}\n//               id={name}\n//               checked={isChecked}\n//               onChange={toggleCheck}\n//           />\n//           <label htmlFor={name}>{/* <span>{label}</span> */}</label>\n//         </div>\n//     )\n//   }\n\n//   return (\n//     <Formik\n//       initialValues={{\n//         fullname: \"\",\n//         email: \"\",\n//         province: \"\",\n//         birthDate: \"\",\n//         instagram: \"\",\n//         preference: \"\",\n//       }}\n//       validationSchema={SignupSchema}\n//       onSubmit={values => {\n//         // same shape as initial values\n//         console.log(values)\n//         let newValues = { ...propValues, ...values }\n\n//         const date = new Date()\n//         const year = date.getFullYear()\n\n//         if (newValues.birthDate.length < 10)\n//           return setErrorDate(\"Fecha inválida.\")\n//         if (Number(newValues.birthDate.split(\"/\")[0]) > 31)\n//           return setErrorDate(\"Fecha inválida.\")\n//         if (Number(newValues.birthDate.split(\"/\")[1]) > 12)\n//           return setErrorDate(\"Fecha inválida.\")\n//         if (Number(newValues.birthDate.split(\"/\")[2]) >= year)\n//           return setErrorDate(\"Fecha inválida.\")\n//         setErrorDate(\"\")\n//         setValues(newValues)\n\n//         console.log(\"submit\",selectedEvent)\n//         newValues = {\n//           ...propValues,\n//           ...values,\n//           event: selectedEvent.name,\n//           eventId: selectedEvent.id,\n//           pdv: selectedEvent.address,\n//         }\n//         console.log(\"newValues\", newValues)\n\n//         const td = Cookies.get(\"_td\")\n\n//         if(!newValues.preference){\n//             setPreferenceError(\"Este campo es obligatorio\");\n//             console.log(\"error preference\")\n//             return\n//         }\n\n//         const url = location.href.split(\"?\")[0]\n\n//         let data = {\n//           name: newValues.fullname,\n//           email: newValues.email,\n//           state: newValues.province,\n//           dateofbirth: newValues.birthDate,\n//           instagram: newValues.instagram,\n//           genre: \"\",\n//           preference: newValues.preference,\n//           event: newValues.event,\n//           eventId: newValues.eventId,\n//           pdv: newValues.pdv,\n//           url\n//         }\n\n//         console.log(\"dataaa\", data)\n\n//         isChecked\n//             ? fetch(\n//                 \"https://wabudweiser-prd.azurewebsites.net/thebirrabehindmusic\",\n//                 {\n//                   // ? fetch(\"http://localhost:8080/thebirrabehindmusic\", {\n//                   method: \"POST\",\n//                   body: JSON.stringify(data),\n//                   credentials: \"include\",\n//                   headers: {\n//                     \"Content-Type\": \"application/json\",\n//                   },\n//                 }\n//             ).then(response => {\n//               console.log('debug_response',response)\n//               if (response.ok) {\n//                 navigate(\"/lamusicaentusmanos/success\")\n//                 window.dataLayer.push({\n//                   event: \"GAEvent\",\n//                   event_category: \"Form\",\n//                   event_action: \"Success\",\n//                   event_label: selectedProvince.NAME ? selectedProvince.NAME : \"\",\n//                   interaction: true,\n//                   component_name: newValues.event,\n//                   userUid: `${td}`,\n//                 })\n//               } else {\n//                 response.text().then(text => {\n//                   console.error(\"Error guardando los datos. \\n\", text)\n//                 })\n//               }\n//             }).catch(error=>console.log('debug_error',error))\n//             : alert(\"Debes aceptar los terminos y condiciones para continuar\") &&\n//             window.dataLayer.push({\n//               event: \"GAEvent\",\n//               event_category: \"Form\",\n//               event_action: \"Error\",\n//               event_label: \"Falta aceptar terminos y condiciones\",\n//               interaction: true,\n//               component_name: \"boton_enviar\",\n//             })\n\n//       }}\n//     >\n//       {({ errors, touched, values, setFieldValue }) => {\n//         const localidadesArr = Object.entries(localidades)\n\n//         // const validErrors =\n//         //   errors.fullname ||\n//         //   errors.email ||\n//         //   errors.province ||\n//         //   errors.birthDate ||\n//         //   errors.instagram\n\n//         // if (validErrors) return setError(\"Debe completar todos los campos.\")\n\n//         console.log(\"ERRORS\", errors)\n//         console.log(\"VALUES\", values)\n\n//         if (values.province) {\n//           const filter = localidadesArr.filter(([key, value]) => {\n//             return key === values.province\n//           })\n//           const justStrings = Object.fromEntries(filter)\n//           setCities(justStrings[values.province])\n//         }\n\n//         return (\n//           <Form className={styles.formContainer}>\n//             <div className={styles.fieldContainer}>\n//               <Field\n//                 style={{\n//                   border:\n//                     errors.fullname && touched.fullname\n//                       ? \"3px solid #dd1a32\"\n//                       : \"\",\n//                 }}\n//                 className={styles.inputStyle}\n//                 name=\"fullname\"\n//                 placeholder=\"Nombre y apellido\"\n//                 onBlur={() => {\n//                   window.dataLayer.push({\n//                     event: \"GAEvent\",\n//                     event_category: \"Form Bud Music\",\n//                     event_action: \"Paso 1\",\n//                     event_label: `Nombre y Apellido`,\n//                     interaction: true,\n//                     component_name: \"boton_siguiente\",\n//                   })\n//                   setStep(\"1\")\n//                 }}\n//               />\n//               {/* {errors.fullname && touched.fullname ? (\n//                 <div style={{ color: \"#dd1a32\" }}>{errors.fullname}</div>\n//               ) : null} */}\n//               <Field\n//                 style={{\n//                   border:\n//                     errors.email && touched.email ? \"3px solid #dd1a32\" : \"\",\n//                 }}\n//                 className={styles.inputStyle}\n//                 name=\"email\"\n//                 type=\"email\"\n//                 placeholder=\"Mail\"\n//                 onBlur={() => {\n//                   window.dataLayer.push({\n//                     event: \"GAEvent\",\n//                     event_category: \"Form Bud Music\",\n//                     event_action: \"Paso 2\",\n//                     event_label: `Email`,\n//                     interaction: true,\n//                     component_name: \"boton_siguiente\",\n//                   })\n//                   setStep(\"2\")\n//                 }}\n//               />\n//               {/* {errors.email && touched.email ? (\n//                 <div style={{ color: \"#dd1a32\" }}>{errors.email}</div>\n//               ) : null} */}\n\n//               <Field\n//                 style={{\n//                   border:\n//                     errors.province && touched.province\n//                       ? \"3px solid #dd1a32\"\n//                       : \"\",\n//                 }}\n//                 className={styles.inputStyle}\n//                 name=\"province\"\n//                 placeholder=\"Provincia\"\n//                 component=\"select\"\n//                 id=\"province\"\n//                 onBlur={() => {\n//                   window.dataLayer.push({\n//                     event: \"GAEvent\",\n//                     event_category: \"Form Bud Music\",\n//                     event_action: \"Paso 3\",\n//                     event_label: `Provincia`,\n//                     interaction: true,\n//                     component_name: \"boton_siguiente\",\n//                   })\n//                   setStep(\"3\")\n//                 }}\n//               >\n//                 <option selected hidden>\n//                   Seleccione provincia\n//                 </option>\n//                 {provincias.map(option => {\n//                   return (\n//                     <option key={option.value} value={option.value}>\n//                       {option.label}\n//                     </option>\n//                   )\n//                 })}\n//               </Field>\n//               {/* {errors.province && touched.province ? (\n//                 <div style={{ color: \"#dd1a32\" }}>{errors.province}</div>\n//               ) : null} */}\n\n//               <Field\n//                 style={{\n//                   border:\n//                     (errors.birthDate || birthDateError) && touched.birthDate\n//                       ? \"3px solid #dd1a32\"\n//                       : \"\",\n//                 }}\n//                 className={styles.inputStyle}\n//                 type=\"text\"\n//                 name=\"birthDate\"\n//                 onChange={e => {\n//                   setBirthDateError(\"\")\n//                   const onlyNums = e.target.value.replace(/[^0-9]/g, \"\")\n//                   const formatedBirthDate = formatDOB(onlyNums)\n//                   setFieldValue(\"birthDate\", formatedBirthDate)\n//                 }}\n//                 placeholder={\n//                   dateFieldClicked ? \"DD/MM/AAAA\" : \"Fecha de nacimiento\"\n//                 }\n//                 onClick={() => setDateFieldClicked(true)}\n//                 onBlur={() => {\n//                   window.dataLayer.push({\n//                     event: \"GAEvent\",\n//                     event_category: \"Form Bud Music\",\n//                     event_action: \"Paso 4\",\n//                     event_label: `Fecha de nacimiento`,\n//                     interaction: true,\n//                     component_name: \"boton_siguiente\",\n//                   })\n//                   setStep(\"4\")\n//                 }}\n//               />\n//               {/* {(errors.birthDate || birthDateError) && touched.birthDate ? (\n//                 <div style={{ color: \"#dd1a32\" }}>\n//                   {errors.birthDate || birthDateError}\n//                 </div>\n//               ) : null} */}\n\n//               <Field\n//                 style={{\n//                   border:\n//                     errors.instagram && touched.instagram\n//                       ? \"3px solid #dd1a32\"\n//                       : \"\",\n//                 }}\n//                 className={styles.inputStyle}\n//                 name=\"instagram\"\n//                 placeholder=\"Instagram\"\n//                 onBlur={() => {\n//                   window.dataLayer.push({\n//                     event: \"GAEvent\",\n//                     event_category: \"Form Bud Music\",\n//                     event_action: \"Paso54\",\n//                     event_label: `Instagram`,\n//                     interaction: true,\n//                     component_name: \"boton_siguiente\",\n//                   })\n//                   setStep(\"5\")\n//                 }}\n//               />\n//               <div className={styles.fieldContainer4}>\n//                 <h1 className={styles.titleText4}>\n//                     ¿EN QUÉ OCASIONES ACOSTUMBRÁS A CONSUMIR CERVEZA?\n//                 </h1>\n//                   <img src={selectArrow} className={styles.selectArrow} />\n//                 <Field\n//                     className={styles.inputStyle2}\n//                     name=\"preference\"\n//                     component=\"select\"\n//                     onBlur={() => {\n//                       window.dataLayer.push({\n//                         event: \"GAEvent\",\n//                         event_category: \"Form Bud Music\",\n//                         event_action: \"Paso 6\",\n//                         event_label: `Pregunta ocasión de consumo`,\n//                         interaction: true,\n//                         component_name: \"boton_siguiente\",\n//                       })\n//                       setStep(\"6\")\n//                     }}\n//                 >\n\n//                   <option hidden>\n//                     Seleccione una ocasión de consumo\n//                   </option>\n//                   <option value=\"Cocinando / Almorzando o cenando solo o acompañado\">Cocinando / Almorzando o cenando solo o acompañado</option>\n//                   <option value=\"Con amigos / compañeros socializando en casa o en un bar\">Con amigos / compañeros socializando en casa o en un bar</option>\n//                   <option value=\"Cuando me quiero relajar, viendo TV, en la plaza, usando RRSS o tomando sol\">Cuando me quiero relajar, viendo TV, en la plaza, usando RRSS o tomando sol</option>\n//                   <option value=\"En una fiesta, preboliche, etc\">En una fiesta, preboliche, etc</option>\n//                   <option value=\"No tomo cerveza\">No tomo cerveza</option>\n//                   <option value=\"Traslándome a algún lugar, mientras trabajo o hago mandados\">Traslándome a algún lugar, mientras trabajo o hago mandados</option>\n//                 </Field>\n//                 {preferenceError && !values.preference ? (\n//                     <div style={{ color: \"#dd1a32\", textAlign: \"left\" }}>\n//                       {preferenceError}\n//                     </div>\n//                 ) : null}\n//                 {/* {errors.favouriteBand && touched.favouriteBand ? (\n//               <div style={{ color: \"#dd1a32\" }}>{errors.favouriteBand}</div>\n//             ) : null} */}\n//               </div>\n//               {/* {errors.instagram && touched.instagram ? (\n//                 <div style={{ color: \"#dd1a32\" }}>{errors.instagram}</div>\n//               ) : null} */}\n//               {errorDate && (\n//                 <div\n//                   style={{\n//                     color: \"#dd1a32\",\n//                     display: \"flex\",\n//                     alignItems: \"center\",\n//                     justifyContent:\"center\"\n//                   }}\n//                 >\n//                   {errorDate}\n//                 </div>\n//               )}\n//             </div>\n//             <div\n//                 className={\n//                    styles.btnContainerSend\n//                 }\n//             >\n//               <div className={styles.termsContainer}>\n//                 <CheckboxInput\n//                     name=\"remember-me\"\n//                     label=\"Remember Me\"\n//                     isChecked={isChecked}\n//                     setIsChecked={setIsChecked}\n//                 />\n//                 <h4 className={styles.termsText}>\n//                   He leído y acepto&nbsp;\n//                   <a\n//                       className={styles.link}\n//                       target=\"_blank\"\n//                       href=\"/Bases y Condiciones  Promoción la Música en tus manos.pdf\"\n//                   >\n//                     Bases y Condiciones\n//                   </a>\n//                   ,&nbsp;\n//                   <a\n//                       className={styles.link}\n//                       target=\"_blank\"\n//                       href=\"/PoliticadePrivacidad.pdf\"\n//                   >\n//                     Políticas de Privacidad\n//                   </a>\n//                   ,&nbsp;\n//                   <a\n//                       className={styles.link}\n//                       target=\"_blank\"\n//                       href=\"/Terminos-Condiciones.pdf\"\n//                   >\n//                     Términos y condiciones\n//                   </a>\n//                   &nbsp;y activaciones de marketing.\n//                 </h4>\n//               </div>\n//               {/* TERMS END */}\n//               <button className={styles.btnSend} type=\"submit\">\n//                 Enviar\n//               </button>\n//             </div>\n//           </Form>\n//         )\n//       }}\n//     </Formik>\n//   )\n// }","import React, { useState, useEffect } from \"react\"\nimport styles from \"./../../scss/components/TheBirraBehind/_StepForm.module.scss\"\nimport { Formik, Form, Field } from \"formik\"\nimport BackIcon from \"./../../images/BackToLive/backIcon.png\"\n\nimport Step1 from \"./Steps/Step1\"\nimport Step2 from \"./Steps/Step2\"\nimport Step3 from \"./Steps/Step3\"\nimport Step4 from \"./Steps/Step4\"\nimport useDeviceDetect from \"./hooks/useDevice\"\n\nexport default function StepForm({ selectedProvince, selectedEvent, setStep, onBack, location }) {\n    const [page, setPage] = useState(1)\n    const [values, setValues] = useState({})\n    const { isMobile, isSafari } = useDeviceDetect()\n    let step = <Step1\n        setValues={setValues}\n        setPage={setPage}\n        propValues={values}\n        isMobile={isMobile}\n        isSafari={isSafari}\n        setStep={setStep}\n        selectedEvent={selectedEvent}\n        selectedProvince={selectedProvince}\n        location={location}\n    />\n\n    return (\n        <>\n            <div className={styles.stepFormContainer}>\n                <div className={styles.formWrap}>\n                    <div className={styles.firstColumn}>\n                        <div className={styles.backBtn} onClick={onBack}>\n                            <a\n                                className={styles.btnWrapper}\n                            >\n                                <img src={BackIcon} style={{ objectFit: \"contain\" }} />\n                                <h3>Volver</h3>\n                            </a>\n                        </div>\n                        {page !== 1 ? (\n                            <div className={styles.backBtn}>\n                                <a\n                                    className={styles.btnWrapper}\n                                    onClick={() => setPage(page - 1)}\n                                >\n                                    <img\n                                        src={BackIcon}\n                                        style={\n                                            isMobile\n                                                ? { width: \"12px\", objectFit: \"contain\" }\n                                                : { objectFit: \"contain\" }\n                                        }\n                                    />\n                                    <h3>Volver</h3>\n                                </a>\n                            </div>\n                        ) : null}\n                    </div>\n                    <div className={styles.secondColumn}>{step}</div>\n                </div>\n            </div>\n            {/*  */}\n        </>\n    )\n}\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiIGQ9Ik0xMTIgMTg0bDE0NCAxNDQgMTQ0LTE0NCIvPjwvc3ZnPgo=\"","import React from \"react\"\n\nexport default function useDeviceDetect() {\n  const [isMobile, setMobile] = React.useState(false)\n  const [isSafari, setSafari] = React.useState(false)\n\n  React.useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      // Use navigator only when available\n      const userAgent = navigator.userAgent || \"\"\n      const mobile = Boolean(\n        userAgent.match(\n          /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i\n        )\n      )\n      setMobile(mobile)\n\n      // Check if it's Safari\n      const isSafariBrowser = /^((?!chrome|android).)*safari/i.test(userAgent)\n      setSafari(isSafariBrowser)\n    }\n  }, [])\n  return { isMobile, isSafari }\n}\n","export const getDifferenceDays = dateMatch => {\n  const miliseconds = 24 * 60 * 60 * 1000\n  const today = new Date()\n  const match = new Date(dateMatch)\n  const milisecondsDifference = Math.abs(match.getTime() - today.getTime())\n  const daysDifference = Math.round(milisecondsDifference / miliseconds)\n\n  return daysDifference\n}\n\nexport const formatDate = string => {\n  if (string.length < 9) {\n    const fragment = string.split(\"\") || []\n    const formated = fragment.reduce((acum, item, i) => {\n      if ((i === 2 || i === 4) && item !== \"/\") acum.push(\"/\")\n      acum.push(item)\n      return acum\n    }, [])\n    return formated.join(\"\")\n  }\n  return \"\"\n}\n\nexport const formatDate2 = string => {\n  if (string.length < 11) {\n    const fragment = string.split(\"\") || []\n    const formated = fragment.reduce((acum, item, i) => {\n      if ((i === 2 || i === 5) && item !== \"/\") acum.push(\"/\")\n      acum.push(item)\n      return acum\n    }, [])\n    return formated.join(\"\")\n  }\n  return \"\"\n}\n\nexport const validateEmail = data => {\n  const re = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/\n  // return re.test(String(data.email).toLowerCase())\n  const email = data.email\n  return re.test(String(email).toLowerCase())\n}\n\n\nexport const formatDOB = (value)=>{\n  const cleanValue = value.replace(/\\D/g, \"\"); // Remove non-digit characters\n  let formattedDate = \"\";\n\n  if (cleanValue.length <= 2) {\n    formattedDate = cleanValue;\n  } else if (cleanValue.length <= 4) {\n    formattedDate = `${cleanValue.slice(0, 2)}/${cleanValue.slice(2)}`;\n  } else {\n    formattedDate = `${cleanValue.slice(0, 2)}/${cleanValue.slice(2, 4)}/${cleanValue.slice(4, 8)}`;\n  }\n\n  return formattedDate;\n}\n\nexport const transformToSingleWord = (inputString) => {\n  // Convert the string to lowercase and remove spaces\n  return inputString.toLowerCase().replace(/ /g, '').replace(/á/g, 'a').replace(/é/g, 'e').replace(/í/g, 'i').replace(/ó/g, 'o').replace(/ú/g, 'u').replace(/ñ/g, 'n').replace(/[^a-zA-Z0-9-]/g, '');\n}\n","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgBvZShDsJAEERnGxJcFQ6HQuGoQhWF4ztROFRdFQ4UP4BDgQJTZsMR2mupub1O8rK5ir7s9rpAT6qqmpANWSAwoz4Jy5aMHWdYiyiZs6yc4E4KBEb+SNbueCN7EXnCUkRJxrJ0xys5WEgaIk9yoSB4XC2RLyFH2OWlUxFKVJAhbopEjRgg39HVuzqx1RLGqV+Guky/U2l14xoiJ4vyD7VETjZjyfHbCip7IDDS9dDbcyaypNMuomPbEX15is/eixd2lpKcTBGYNzGLWUhH1R1oAAAAAElFTkSuQmCC\"","// extracted by mini-css-extract-plugin\nmodule.exports = {\"stepFormContainer\":\"_StepForm-module--stepFormContainer--2i0Fg\",\"formWrap\":\"_StepForm-module--formWrap--2kyNG\",\"fadeInRightBig\":\"_StepForm-module--fadeInRightBig--2Utpy\",\"firstColumn\":\"_StepForm-module--firstColumn--3gxTv\",\"pageTextOne\":\"_StepForm-module--pageTextOne--1leLx\",\"pageTextTwo\":\"_StepForm-module--pageTextTwo--133yu\",\"backBtn\":\"_StepForm-module--backBtn--1crnH\",\"btnWrapper\":\"_StepForm-module--btnWrapper--1H6T5\",\"secondColumn\":\"_StepForm-module--secondColumn--CfXt9\",\"formContainer\":\"_StepForm-module--formContainer--39a6c\",\"fadeInRight\":\"_StepForm-module--fadeInRight--2owl6\",\"inputStyle\":\"_StepForm-module--inputStyle--3AxfX\",\"formContainer2\":\"_StepForm-module--formContainer2--21bNo\",\"fieldContainer\":\"_StepForm-module--fieldContainer--3uVX3\",\"fieldContainer2\":\"_StepForm-module--fieldContainer2--Db9AY\",\"fieldContainer4\":\"_StepForm-module--fieldContainer4--HBOQU\",\"selectArrow\":\"_StepForm-module--selectArrow--3SYwX\",\"titleText\":\"_StepForm-module--titleText--1hrqR\",\"titleText3\":\"_StepForm-module--titleText3--2lLfY\",\"titleText4\":\"_StepForm-module--titleText4--14Gp1\",\"inputStyle2\":\"_StepForm-module--inputStyle2--1gQTZ\",\"inputStyle3\":\"_StepForm-module--inputStyle3--n4Cl7\",\"inputStyle4\":\"_StepForm-module--inputStyle4--pH2DG\",\"inputStyle3Safari\":\"_StepForm-module--inputStyle3Safari--jjjLW\",\"btnContainer\":\"_StepForm-module--btnContainer--1N73l\",\"btnContainerSafari\":\"_StepForm-module--btnContainerSafari--2n4Fe\",\"btnSubmit\":\"_StepForm-module--btnSubmit--2joVa\",\"btnContainerSend\":\"_StepForm-module--btnContainerSend--15DDW\",\"fadeInUp\":\"_StepForm-module--fadeInUp--2l8o4\",\"btnContainerSendSafari\":\"_StepForm-module--btnContainerSendSafari--1MGur\",\"btnSend\":\"_StepForm-module--btnSend--v8UIK\",\"termsContainer\":\"_StepForm-module--termsContainer--2nJc1\",\"termsText\":\"_StepForm-module--termsText--3gGg4\",\"link\":\"_StepForm-module--link--1OZHG\",\"termsRadio\":\"_StepForm-module--termsRadio--3FO2u\",\"changeSizeAnim\":\"_StepForm-module--changeSizeAnim--1migN\",\"selectCheckboxAnim\":\"_StepForm-module--selectCheckboxAnim--jB1m2\",\"inputStyle3SafariMobile\":\"_StepForm-module--inputStyle3SafariMobile--2TpNM\",\"errorText\":\"_StepForm-module--errorText--38oFg\",\"errorBorder\":\"_StepForm-module--errorBorder--F4vRr\",\"fade\":\"_StepForm-module--fade--2Mebp\"};"],"sourceRoot":""}