{"version":3,"sources":["webpack:///./src/pages/customer-defence-form.tsx"],"names":["request","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","url","_temp","_ref2","_ref2$method","method","headers","body","res","result","wrap","_context","prev","next","Object","assign","fetch","JSON","stringify","undefined","sent","json","ok","Error","statusText","abrupt","stop","_x","_x2","apply","arguments","Page","t","useI18next","captchaRef","useRef","_useState","useState","isSubmitted","setSubmitted","useEffect","current","setTimeout","iframe","captcha","getElementsByTagName","tabIndex","handleSubmit","_ref4","_callee2","values","_ref3","setSubmitting","setErrors","_context2","t0","details","message","_x3","_x4","validationSchema","yup","shape","name","required","documentNumber","address","email","phone","React","createElement","Article","style","minHeight","SEO","title","Trans","parent","fontSize","Formik","initialValues","recaptchaToken","onSubmit","_ref5","isSubmitting","setFieldValue","e","preventDefault","execute","Field","as","placeholder","type","rows","ReCAPTCHA","ref","sitekey","tabindex","size","onErrored","onExpired","onChange","_captchaRef$current","reset","Button","variant","block","loading","marginTop","rel","href","query","id","source","toString","this"],"mappings":"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","file":"component---src-pages-customer-defence-form-tsx-fb4ed9d8462cb1189496.js","sourcesContent":["// i18next-extract-mark-ns-start customer-defence-form\n\nimport {Article} from 'components/Article';\nimport {Button} from 'components/Button';\nimport {Field} from 'components/Field';\nimport {SEO} from 'components/SEO';\nimport {Formik, FormikHelpers} from 'formik';\nimport {graphql} from 'gatsby';\nimport {Trans, useI18next} from 'gatsby-plugin-react-i18next';\nimport React, {useEffect, useRef, useState} from 'react';\nimport ReCAPTCHA from 'react-google-recaptcha';\nimport * as yup from 'yup';\n\ntype FormValues = {\n  name: string;\n  documentNumber: string;\n  address: string;\n  email: string;\n  phone: string;\n  details: string;\n  recaptchaToken: string;\n};\n\ntype RequestParams = {\n  method?: string;\n  headers?: any;\n  body?: any;\n};\nconst request = async (url: string, {method = 'GET', headers, body}: RequestParams = {}) => {\n  if (method === 'POST') headers = {'Content-Type': 'application/json', ...headers};\n  const res = await fetch(url, {\n    method,\n    headers,\n    body: body ? JSON.stringify(body) : undefined\n  });\n  const result = await res.json();\n  if (!res.ok) throw result || new Error(res.statusText);\n  return result;\n};\n\nconst Page: React.FC = () => {\n  const {t} = useI18next();\n  const captchaRef = useRef<ReCAPTCHA | null>(null);\n  const [isSubmitted, setSubmitted] = useState(false);\n\n  useEffect(() => {\n    if (!captchaRef.current) return;\n    setTimeout(() => {\n      // @ts-ignore\n      const container: HTMLDivElement = captchaRef.current.captcha;\n      const iframe = container.getElementsByTagName('iframe')[0];\n      if (!iframe) return;\n      iframe.tabIndex = -1;\n    }, 500);\n  }, []);\n\n  const handleSubmit = async (\n    values: FormValues,\n    {setSubmitting, setErrors}: FormikHelpers<FormValues>\n  ) => {\n    try {\n      await request('https://api.monei.com/report-client-defence', {\n        method: 'POST',\n        body: values\n      });\n      setSubmitting(false);\n      setSubmitted(true);\n    } catch (error) {\n      setSubmitting(false);\n      setErrors({details: error.message});\n    }\n  };\n\n  const validationSchema = yup.object().shape({\n    name: yup.string().required(t('please provide your name')),\n    documentNumber: yup.string().required(t('please provide your ID/Passport #')),\n    address: yup.string().required(t('please provide your address')),\n    email: yup.string().required(t('please provide your email')),\n    phone: yup.string().required(t('please provide your phone number')),\n    details: yup.string().required(t('please provide details of complaint'))\n  });\n\n  return (\n    <Article style={{minHeight: 1000}}>\n      <SEO title={t('Customer Defense Form')} />\n      <Trans parent=\"h1\" style={{fontSize: 30}}>\n        Customer Defense Form\n      </Trans>\n      {isSubmitted ? (\n        <Trans parent=\"p\">Your complaint has been recorded. Thank you!</Trans>\n      ) : (\n        <Formik\n          initialValues={{\n            name: '',\n            documentNumber: '',\n            address: '',\n            email: '',\n            phone: '',\n            details: '',\n            recaptchaToken: ''\n          }}\n          validationSchema={validationSchema}\n          onSubmit={handleSubmit}>\n          {({isSubmitting, setSubmitting, handleSubmit, setFieldValue}) => {\n            return (\n              <form\n                onSubmit={(e) => {\n                  e.preventDefault();\n                  if (!captchaRef.current) return;\n                  captchaRef.current.execute();\n                }}>\n                <Field as=\"input\" name=\"name\" placeholder={t('Name')} />\n                <Field as=\"input\" name=\"documentNumber\" placeholder={t('ID/Passport #')} />\n                <Field as=\"input\" name=\"address\" placeholder={t('Address')} />\n                <Field as=\"input\" type=\"email\" name=\"email\" placeholder={t('Email')} />\n                <Field as=\"input\" type=\"tel\" name=\"phone\" placeholder={t('Phone number')} />\n                <Field\n                  as=\"textarea\"\n                  name=\"details\"\n                  rows=\"5\"\n                  placeholder={t('Detail your complaint as much as possible')}\n                />\n                <ReCAPTCHA\n                  ref={captchaRef}\n                  sitekey={'6LejBMYUAAAAAIqU0f3BtAMzBqy70HIIbUuKjqvT'}\n                  tabindex={-1}\n                  size=\"invisible\"\n                  onErrored={() => {\n                    setSubmitting(false);\n                  }}\n                  onExpired={() => {\n                    setSubmitting(false);\n                  }}\n                  onChange={(captcha) => {\n                    setFieldValue('recaptchaToken', captcha);\n                    handleSubmit();\n                    captchaRef?.current?.reset();\n                  }}\n                />\n                <Button type=\"submit\" variant=\"light\" block loading={isSubmitting}>\n                  <Trans>Submit complaint</Trans>\n                </Button>\n                <Trans parent=\"p\" style={{fontSize: 12, marginTop: 10}}>\n                  MONEI DIGITAL PAYMENTS SL is the controller of your personal data for the purpose\n                  of managing your request. You may exercise your rights of access, rectification,\n                  deletion, opposition, limitation and portability by post to Calle Palestina, 1,\n                  Entreplanta, 29007, Málaga, Spain or by email to{' '}\n                  <a rel=\"noopener noreferrer\" href=\"mailto:support@monei.com\">\n                    support@monei.com\n                  </a>\n                  , proving your identity. You can obtain more information about the processing of\n                  your personal data in the{' '}\n                  <a rel=\"noopener noreferrer\" href=\"/privacy-policy\">\n                    Privacy Policy on the website\n                  </a>\n                </Trans>\n              </form>\n            );\n          }}\n        </Formik>\n      )}\n    </Article>\n  );\n};\n\nexport default Page;\n\nexport const query = graphql`\n  query ($language: String!) {\n    locales: allLocale(\n      filter: {ns: {in: [\"common\", \"customer-defence-form\"]}, language: {eq: $language}}\n    ) {\n      edges {\n        node {\n          ns\n          data\n          language\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}