{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACQA,MAAM,gCAAU,CAAA,GAAA,cAAK,EAAE,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4Cd,EAAE,CAAA,GAAA,aAAK,EAAE,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiChC,EAAE,CAAA,GAAA,YAAI,EAAE,EAAE,CAAC,CAAA,GAAA,UAAE,CAAC,CAAC;;;;EAIf,CAAC,EAAE;;EAEH,EAAE,CAAA,GAAA,YAAI,EAAE,EAAE,CAAC,CAAA,GAAA,UAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCf,CAAC,EAAE;;EAEH,EAAE,CAAA,GAAA,YAAI,EAAE,EAAE,CAAC,CAAA,GAAA,UAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCf,CAAC,EAAE;AACL,CAAC;AACD,MAAM,4CAAsB;IAC1B;QAAE,OAAO;QAAa,OAAO;IAAE;IAC/B;QAAE,OAAO;QAAW,OAAO;IAAE;IAC7B;QAAE,OAAO;QAAqB,OAAO;IAAE;CACxC;AACD,MAAM,4CAAoD;IACxD,WAAW;IACX,SAAS;IACT,qBAAqB;AACvB;AACA,MAAM,yCAAmB,cAAW;IAClC,WAAW,gBAAa,GAAG,CAAC,GAAG,oBAAoB,GAAG,CAAC,KAAK,sBAAsB,QAAQ,CAAC;IAC3F,UAAU,gBAAa,GAAG,CAAC,GAAG,oBAAoB,GAAG,CAAC,KAAK,sBAAsB,QAAQ,CAAC;IAC1F,cAAc,gBAAa,KAAK,CAAC,yBAAyB,QAAQ,CAAC;IACnE,eAAe,gBAAa,GAAG,CAAC,GAAG,oBAAoB,GAAG,CAAC,KAAK,sBAAsB,QAAQ,CAAC;IAC/F,SAAS,gBAAa,GAAG,CAAC,GAAG,oBAAoB,GAAG,CAAC,KAAK,sBAAsB,QAAQ,CAAC;IACzF,cAAc,gBAAa,QAAQ,CAAC;IACpC,SAAS,gBAAa,QAAQ,CAAC;AACjC;AAEA,MAAM,4BAAM;IACV,MAAM,CAAC,iBAAiB,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE;IACrD,MAAM,UAAE,MAAM,gBAAE,YAAY,cAAE,UAAU,UAAE,MAAM,WAAE,OAAO,WAAE,OAAO,gBAAE,YAAY,gBAAE,YAAY,EAAE,GAAG,CAAA,GAAA,gBAAQ,EAAE;0BAC3G;QACA,eAAe;YACb,WAAW;YACX,UAAU;YACV,cAAc;YACd,eAAe;YACf,SAAS;YACT,cAAc;YACd,SAAS;QACX;QACA,UAAU,OAAO;YACf,MAAM,oBAAoB,yCAAmB,CAAC,OAAO,YAAY,CAAC;YAClE,MAAM,eAAe;gBAAE,GAAG,MAAM;gBAAE,cAAc;YAAkB;YAElE,iBAAiB;YACjB,IAAI;gBACF,MAAM,WAAW,MAAM,MAAM,CAAC,qBAAqB,CAAC,EAAE;oBACpD,QAAQ;oBACR,SAAS;wBACP,gBAAgB;oBAClB;oBACA,MAAM,KAAK,SAAS,CAAC;gBACvB;gBAEA,IAAI,CAAC,SAAS,EAAE,EAAE;oBAChB,QAAQ,KAAK,CAAC,0BAA0B,SAAS,MAAM,EAAE,SAAS,UAAU;oBAC5E,MAAM,eAAe,MAAM,SAAS,IAAI;oBACxC,QAAQ,KAAK,CAAC,kBAAkB;oBAChC;gBACF;YACF,EAAE,OAAO,OAAO;gBACd,QAAQ,KAAK,CAAC,gDAAgD;YAChE;QACF;IACF;IAEA,qBACE,gBAAC;kBACC,cAAA,gBAAC;YAAI,WAAU;sBACZ,CAAC,gCACA,iBAAC;gBAAK,UAAU;;kCACd,iBAAC;wBAAI,WAAU;;0CACb,gBAAC;0CAAG;;0CACJ,gBAAC;gCAAI,WAAU;;;;kCAGjB,iBAAC;wBAAI,WAAU;;0CACb,gBAAC,CAAA,GAAA,gBAAQ;gCACP,aAAY;gCACZ,IAAG;gCACH,OAAO,OAAO,SAAS;gCACvB,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,SAAS,IAAI,CAAC,CAAC,OAAO,SAAS;;0CAEhD,gBAAC,CAAA,GAAA,gBAAQ;gCACP,aAAY;gCACZ,IAAG;gCACH,OAAO,OAAO,QAAQ;gCACtB,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,QAAQ,IAAI,CAAC,CAAC,OAAO,QAAQ;;0CAE9C,gBAAC,CAAA,GAAA,gBAAQ;gCACP,aAAY;gCACZ,IAAG;gCACH,MAAK;gCACL,OAAO,OAAO,YAAY;gCAC1B,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,YAAY,IAAI,CAAC,CAAC,OAAO,YAAY;;0CAEtD,gBAAC,CAAA,GAAA,gBAAQ;gCACP,aAAY;gCACZ,IAAG;gCACH,OAAO,OAAO,aAAa;gCAC3B,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,aAAa,IAAI,CAAC,CAAC,OAAO,aAAa;gCACtD,MAAK;gCACL,YAAY,CAAC;oCACX,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,GAAG,GACzB,MAAM,cAAc;gCAExB;;0CAEF,gBAAC,CAAA,GAAA,gBAAQ;gCACP,aAAY;gCACZ,IAAG;gCACH,OAAO,OAAO,OAAO;gCACrB,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO;;0CAE5C,gBAAC;gCAAK,IAAG;gCAAe,WAAU;0CAAkB;;0CAGpD,iBAAC,CAAA,GAAA,aAAK;gCACJ,IAAG;gCACH,mBAAgB;gCAChB,OAAO,OAAO,YAAY;gCAC1B,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,YAAY,IAAI,CAAC,CAAC,OAAO,YAAY;;kDAEpD,gBAAC;wCAAO,eAAa;wCAAM,OAAM;wCAAG,QAAQ;wCAAC,QAAQ;kDAAC;;oCAGrD,0CAAoB,GAAG,CAAC,CAAC,6BACxB,gBAAC;4CAAgC,OAAO,aAAa,KAAK;sDACvD,aAAa,KAAK;2CADR,aAAa,KAAK;;;0CAKnC,gBAAC,CAAA,GAAA,eAAO;gCACN,aAAY;gCACZ,MAAM;gCACN,IAAG;gCACH,OAAO,OAAO,OAAO;gCACrB,UAAU;gCACV,QAAQ;gCACR,OAAO,QAAQ,OAAO,IAAI,CAAC,CAAC,OAAO,OAAO;;;;kCAI9C,gBAAC;wBAAO,WAAU;wBAAiB,MAAK;wBAAS,UAAU,CAAC,WAAW;kCAAc;;;+BAKvF,iBAAC;gBAAI,WAAU;;kCACb,iBAAC;wBAAI,WAAU;;0CACb,gBAAC;0CAAG;;0CACJ,gBAAC;gCAAI,WAAU;;;;kCAEjB,gBAAC;kCAAE;;kCACH,gBAAC;kCAAE;;;;;;AAMf;IAEA,2CAAe;;;AD3Uf,MAAM,6BAAO,CAAA,GAAA,6CAAO,EAAE,UAAU,CAAC,SAAS,cAAc,CAAC;AACzD,2BAAK,MAAM,eAAC,gBAAC,CAAA,GAAA,wCAAE","sources":["src/tsx/modules/ContactUs/index.tsx","src/tsx/modules/ContactUs/App.tsx"],"sourcesContent":["import ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('jsx-contact-us') as HTMLElement);\nroot.render(<App />);\n","import { useFormik } from 'formik';\nimport styled, { css } from 'styled-components';\nimport { Select, TextFiled, TextArea } from 'tsx/comps/form';\nimport { media, colors } from 'tsx/theme';\nimport * as Yup from 'yup';\nimport { useState } from 'react';\nimport { apiUrl } from 'tsx/util';\n\nconst Section = styled.section`\n  .header-small {\n    display: none;\n    margin-bottom: 20px;\n  }\n  .sendUsSuccess {\n    .header-large {\n      margin-bottom: 45px;\n      h2 {\n        margin-bottom: 25px;\n      }\n    }\n    p {\n      margin-bottom: 20px;\n    }\n  }\n\n  .grid {\n    display: grid;\n\n    &__img {\n      border-radius: 25px;\n      overflow: hidden;\n      position: relative;\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      &__contents {\n        padding: 27px 30px;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n\n        &__title {\n          max-width: 250px;\n        }\n        &__mobile {\n          color: ${colors.primary};\n          margin-top: 10px;\n        }\n        &__ratings-badge {\n          margin-top: auto;\n          max-height: 220px;\n          max-width: 220px;\n        }\n      }\n    }\n\n    form {\n      .decor-divider {\n        margin: 20px 0;\n      }\n\n      .input-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-gap: 18px;\n        margin: 30px 0 50px 0;\n        > *:last-child {\n          grid-column: span 2;\n        }\n      }\n\n      button {\n        min-width: 230px;\n        max-width: 230px;\n      }\n    }\n  }\n\n  ${media.lg(css`\n    .grid {\n      grid-gap: 20px;\n    }\n  `)};\n\n  ${media.md(css`\n    .grid {\n      grid-gap: 30px;\n\n      &__img {\n        &__contents {\n          padding: 18px 18px;\n          &__ratings-badge {\n            max-height: 140px;\n            max-width: 140px;\n          }\n        }\n      }\n      form {\n        .input-grid {\n          grid-gap: 10px;\n          margin: 20px 0 20px 0;\n          > *:last-child {\n            height: auto;\n          }\n          input,\n          select,\n          textarea {\n            font-size: 12px;\n          }\n        }\n        button {\n          min-width: 160px;\n          max-width: 160px;\n        }\n      }\n    }\n  `)};\n\n  ${media.sm(css`\n    .header-small {\n      display: block;\n    }\n    .sendUsSuccess {\n      .header-large {\n        display: none;\n        h2 {\n          margin-bottom: 25px;\n        }\n      }\n      p {\n        margin-bottom: 20px;\n      }\n    }\n    .decor-divider {\n      margin: 10px 0;\n    }\n    .grid {\n      grid-template-columns: 1fr;\n      grid-gap: 10px;\n\n      &__img {\n        max-height: 300px;\n        border-radius: 18px;\n      }\n      form {\n        .header-large {\n          display: none;\n        }\n        .input-grid {\n          grid-gap: 10px;\n          margin: 0px 0 20px 0;\n          grid-template-columns: 1fr;\n          > *:last-child {\n            grid-column: auto;\n          }\n        }\n      }\n    }\n  `)};\n`;\nconst enquireAboutOptions = [\n  { label: 'Mortgages', value: 0 },\n  { label: 'Savings', value: 1 },\n  { label: 'General Enquiries', value: 2 },\n];\nconst enquireAboutToValue: Record<string | any, number> = {\n  Mortgages: 0,\n  Savings: 1,\n  'General Enquiries': 2,\n};\nconst validationSchema = Yup.object({\n  firstName: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  lastName: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  emailAddress: Yup.string().email('Invalid email address').required('Required'),\n  contactNumber: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  subject: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  enquireAbout: Yup.string().required('Required'),\n  message: Yup.string().required('Required'),\n});\n\nconst App = () => {\n  const [isFormSubmitted, setFormSubmitted] = useState(false);\n  const { values, handleChange, handleBlur, errors, touched, isValid, handleSubmit, isSubmitting } = useFormik({\n    validationSchema,\n    initialValues: {\n      firstName: '',\n      lastName: '',\n      emailAddress: '',\n      contactNumber: '',\n      subject: '',\n      enquireAbout: '',\n      message: '',\n    },\n    onSubmit: async (values) => {\n      const enquireAboutValue = enquireAboutToValue[values.enquireAbout];\n      const valuesToSend = { ...values, enquireAbout: enquireAboutValue };\n\n      setFormSubmitted(true);\n      try {\n        const response = await fetch(`/api/forms/contact-us`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify(valuesToSend),\n        });\n\n        if (!response.ok) {\n          console.error('Failed to submit form:', response.status, response.statusText);\n          const responseData = await response.json();\n          console.error('Response data:', responseData);\n          return;\n        }\n      } catch (error) {\n        console.error('An error occurred while submitting the form:', error);\n      }\n    },\n  });\n\n  return (\n    <Section>\n      <div className=\"grid\">\n        {!isFormSubmitted ? (\n          <form onSubmit={handleSubmit}>\n            <div className=\"header-large\">\n              <h2>Send Us a Message</h2>\n              <div className=\"decor-divider\" />\n            </div>\n\n            <div className=\"input-grid\">\n              <TextFiled\n                placeholder=\"First Name\"\n                id=\"firstName\"\n                value={values.firstName}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.firstName && !!errors.firstName}\n              />\n              <TextFiled\n                placeholder=\"Last Name\"\n                id=\"lastName\"\n                value={values.lastName}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.lastName && !!errors.lastName}\n              />\n              <TextFiled\n                placeholder=\"Email\"\n                id=\"emailAddress\"\n                type=\"email\"\n                value={values.emailAddress}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.emailAddress && !!errors.emailAddress}\n              />\n              <TextFiled\n                placeholder=\"Contact Number\"\n                id=\"contactNumber\"\n                value={values.contactNumber}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.contactNumber && !!errors.contactNumber}\n                type=\"number\"\n                onKeyPress={(event) => {\n                  if (!/[0-9]/.test(event.key)) {\n                    event.preventDefault();\n                  }\n                }}\n              />\n              <TextFiled\n                placeholder=\"Subject\"\n                id=\"subject\"\n                value={values.subject}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.subject && !!errors.subject}\n              />\n              <span id=\"enquireAbout\" className=\"visually-hidden\">\n                Select Enquire About\n              </span>\n              <Select\n                id=\"enquireAbout\"\n                aria-labelledby=\"enquireAbout\"\n                value={values.enquireAbout}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.enquireAbout && !!errors.enquireAbout}\n              >\n                <option aria-hidden={true} value=\"\" disabled selected>\n                  Enquire About\n                </option>\n                {enquireAboutOptions.map((enquireAbout) => (\n                  <option key={enquireAbout.value} value={enquireAbout.label}>\n                    {enquireAbout.label}\n                  </option>\n                ))}\n              </Select>\n              <TextArea\n                placeholder=\"Message\"\n                rows={5}\n                id=\"message\"\n                value={values.message}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.message && !!errors.message}\n              />\n            </div>\n\n            <button className=\"btn btn--large\" type=\"submit\" disabled={!isValid || isSubmitting}>\n              Submit\n            </button>\n          </form>\n        ) : (\n          <div className=\"sendUsSuccess\">\n            <div className=\"header-large\">\n              <h2>We've got your enquiry</h2>\n              <div className=\"decor-divider\" />\n            </div>\n            <p>Thank you for contacting us </p>\n            <p>A member of our team will be in touch soon.</p>\n          </div>\n        )}\n      </div>\n    </Section>\n  );\n};\n\nexport default App;\n"],"names":[],"version":3,"file":"contact-us.68670fd2.js.map"}