{"mappings":"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","sources":["src/tsx/modules/EnquiryForm/index.tsx","src/tsx/modules/EnquiryForm/App.tsx"],"sourcesContent":["import ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('jsx-enquiry-form') 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';\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        label {\n          display: none;\n        }\n        input {\n          width: 100%;\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\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        }\n      }\n    }\n  `)};\n`;\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  postcode: 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});\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      postcode: '',\n      emailAddress: '',\n      contactNumber: '',\n    },\n    onSubmit: async (values) => {\n      setFormSubmitted(true);\n\n      console.log(values);\n      try {\n        const response = await fetch(`/api/forms/will-writing-enquiry`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify(values),\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>Enquiry form</h2>\n              <div className=\"decor-divider\" />\n            </div>\n\n            <div className=\"input-grid\">\n              <div>\n                <label htmlFor=\"firstName\">First Name</label>\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              </div>\n              <div>\n                <label htmlFor=\"lastName\">Last Name</label>\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              </div>\n              <div>\n                <label htmlFor=\"postcode\">Post code</label>\n                <TextFiled\n                  placeholder=\"Postcode\"\n                  id=\"postcode\"\n                  value={values.postcode}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.postcode && !!errors.postcode}\n                />\n              </div>\n              <div>\n                <label htmlFor=\"emailAddress\">Email Address</label>\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              </div>\n              <div>\n                <label htmlFor=\"contactNumber\">Contact Number</label>\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              </div>\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 submitting your enquiry. </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":"will-writing.bdcdbc8f.js.map"}