{"mappings":"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","sources":["src/tsx/modules/SchemeTransferForm/index.tsx","src/tsx/modules/SchemeTransferForm/App.tsx"],"sourcesContent":["import ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('jsx-scheme-transfer-form') as HTMLElement);\nroot.render(<App />);\n","import { useFormik } from 'formik';\nimport { useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { TextFiled, CheckBox, DatePicker } from 'tsx/comps/form';\nimport { media, colors } from 'tsx/theme';\nimport * as Yup from 'yup';\nimport { get } from 'lodash';\n\nconst Section = styled.section`\n  form {\n    margin-top: 37px;\n    background-color: ${colors.lp1};\n    padding: 70px 160px;\n    h2 {\n      font-size: 26px;\n    }\n    h3 {\n      font-size: 20px;\n    }\n\n    .label {\n      display: block;\n      color: ${colors.primary};\n      font-weight: 600;\n      margin-bottom: 8px;\n    }\n    .radio-flex {\n      display: flex;\n      gap: 12px;\n      grid-gap: 12px;\n      align-items: center;\n      margin-bottom: 18px;\n    }\n    .check-flex {\n      display: flex;\n      gap: 20px;\n      grid-gap: 20px;\n      align-items: center;\n      margin-bottom: 18px;\n    }\n\n    .separator {\n      opacity: 0.2;\n      background: #632573;\n      height: 1px;\n    }\n\n    .spc-18 {\n      height: 18px;\n    }\n    .spc-30 {\n      height: 30px;\n    }\n\n    .input-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 18px;\n      &-inner {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        input,\n        select,\n        .react-datepicker-wrapper {\n          width: 100%;\n        }\n      }\n      .input-endorment {\n        color: #fff;\n        background-color: #632573;\n        border-top-right-radius: 50px;\n        border-bottom-right-radius: 50px;\n        justify-content: center;\n        align-items: center;\n        width: 45px;\n        height: 100%;\n        padding-right: 3px;\n        font-weight: 500;\n        display: flex;\n        position: absolute;\n        right: 0;\n        top: 0;\n      }\n      &-full {\n        width: 100%;\n        textarea {\n          width: 100%;\n        }\n      }\n    }\n    .spc18 {\n      height: 18px;\n    }\n  }\n  .response {\n    margin-top: 37px;\n    background-color: ${colors.lp1};\n    padding: 70px 160px;\n    &-card {\n      background: ${colors.colorWhite};\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      border-radius: 25px;\n      p {\n        max-width: 60%;\n        line-height: 25px;\n        text-align: center;\n      }\n    }\n  }\n\n  ${media.md(css`\n    form {\n      margin-top: 37px;\n      background-color: ${colors.lp1};\n      padding: 50px 20px;\n      h2 {\n        font-size: 20px;\n      }\n      h3 {\n        font-size: 18px;\n      }\n    }\n    .response {\n      padding: 50px 20px;\n      &-card {\n        p {\n          max-width: 80%;\n          line-height: 25px;\n          text-align: center;\n        }\n      }\n    }\n  `)};\n  ${media.sm(css`\n    form {\n      .input-grid {\n        grid-template-columns: 1fr;\n      }\n      h2 {\n        font-size: 18px;\n      }\n      h3 {\n        font-size: 12px;\n      }\n    }\n    .response {\n      &-card {\n        border-radius: 0px;\n        p {\n          max-width: 100%;\n          margin: 0px 30px;\n          line-height: 19px;\n        }\n      }\n    }\n  `)};\n`;\n\nconst validationSchema = Yup.object({\n  surname: Yup.string().max(255, 'Max 255 characters').required('Required'),\n  accountNumber: Yup.string().max(255, 'Max 255 characters').required('Required'),\n  illustrationNumber: Yup.string().max(255, 'Max 255 characters').required('Required'),\n  dob: Yup.string().max(255, 'Max 255 characters').required('Required'),\n  postCode: Yup.string().max(255, 'Max 255 characters').required('Required'),\n  email: Yup.string().email('Invalid email address').required('Required'),\n  hasConsentOfAllAccountHolders: Yup.boolean().oneOf([true], 'Required'),\n  isSchemeTransferOfferAccepted: Yup.boolean().oneOf([true], 'Required'),\n  blankField: Yup.string().max(0, 'Invalid field'),\n});\n\nconst App = () => {\n  const [isFormSubmitted, setIsFormSubmitted] = useState(false);\n  const [childContent, setChildContent] = useState('');\n  const [err, setErr] = useState('');\n\n  const {\n    values,\n    handleChange,\n    handleBlur,\n    errors,\n    touched,\n    isValid,\n    handleSubmit,\n    isSubmitting,\n    setFieldValue,\n    resetForm,\n  } = useFormik({\n    validationSchema,\n    initialValues: {\n      surname: '',\n      accountNumber: '',\n      illustrationNumber: '',\n      dob: '',\n      postCode: '',\n      email: '',\n      hasConsentOfAllAccountHolders: false,\n      isSchemeTransferOfferAccepted: false,\n      blankField: '' as string | undefined,\n    },\n    onSubmit: async (values) => {\n      setErr('');\n      try {\n        const bodyPayload = {\n          surname: values.surname,\n          accountNumber: values.accountNumber,\n          illustrationNumber: values.illustrationNumber,\n          dateOfBirth: values.dob,\n          postCode: values.postCode,\n          emailAddress: values.email,\n        };\n\n        const response = await fetch(`/api/forms/scheme-transfer`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify(bodyPayload),\n        });\n\n        if (!response.ok) {\n          setErr('Failed to submit form');\n          console.error('Failed to submit form:', response.status, response.statusText);\n          const responseData = await response.json();\n          console.error('Response data:', responseData);\n        }\n\n        setIsFormSubmitted(true);\n      } catch (error: any) {\n        console.error('An error occurred while submitting the form:', error.message);\n        setErr('Failed to submit form');\n      }\n\n      return;\n    },\n  });\n\n  useEffect(() => {\n    const element = document.getElementById('jsx-scheme-transfer-form-content');\n    if (element) {\n      setChildContent(element.innerHTML);\n    }\n  }, []);\n\n  return (\n    <>\n      <Section>\n        {!isFormSubmitted ? (\n          <form onSubmit={handleSubmit}>\n            <div dangerouslySetInnerHTML={{ __html: childContent }} />\n\n            <div className=\"spacer-responsive-10\" />\n            <div className=\"spc-18\" />\n            <div className=\"input-grid\">\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">Surname *</span>\n                <TextFiled\n                  placeholder=\"\"\n                  id=\"surname\"\n                  value={values.surname}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.surname && !!errors.surname}\n                />\n              </div>\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">Account number *</span>\n                <TextFiled\n                  placeholder=\"\"\n                  id=\"accountNumber\"\n                  value={values.accountNumber}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.accountNumber && !!errors.accountNumber}\n                />\n              </div>\n            </div>\n            <div className=\"spc-18\" />\n            <div className=\"input-grid\">\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">Illustration number *</span>\n                <TextFiled\n                  placeholder=\"\"\n                  id=\"illustrationNumber\"\n                  value={values.illustrationNumber}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.illustrationNumber && !!errors.illustrationNumber}\n                />\n              </div>\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">Date of birth *</span>\n                <DatePicker\n                  dateFormat=\"dd/MM/yyyy\"\n                  placeholderText=\"DD/MM/YYYY\"\n                  id=\"dob\"\n                  selected={values.dob ? new Date(values.dob) : null}\n                  onChange={(date) => setFieldValue('dob', date?.toISOString())}\n                  onBlur={handleBlur}\n                  showPopperArrow={false}\n                  showYearDropdown\n                  dropdownMode=\"select\"\n                  // @ts-ignore\n                  error={Boolean(get(touched, 'dob') && get(errors, 'dob'))}\n                  style={{ width: '100%', flex: 1 }}\n                />\n              </div>\n            </div>\n            <div className=\"spc-18\" />\n            <div className=\"input-grid\">\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">Postcode for the property against which mortgage is secured *</span>\n                <TextFiled\n                  placeholder=\"\"\n                  id=\"postCode\"\n                  value={values.postCode}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.postCode && !!errors.postCode}\n                />\n              </div>\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">Email *</span>\n                <TextFiled\n                  placeholder=\"\"\n                  id=\"email\"\n                  type=\"email\"\n                  value={values.email}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.email && !!errors.email}\n                />\n              </div>\n            </div>\n            <div className=\"spc-18\" />\n            <span className=\"label\">Accept Scheme Transfer Offer</span>\n            <div className=\"spacer-responsive-10\" />\n            <div className=\"spacer-responsive-10\" />\n            <div className=\"spacer-responsive-10\" />\n            <div className=\"check-flex\">\n              <CheckBox\n                checked={values.hasConsentOfAllAccountHolders}\n                onSelect={(val) => setFieldValue('hasConsentOfAllAccountHolders', val)}\n              />\n              <span>\n                If you are accepting on behalf of all account holders, please click here to confirm that you have the\n                consent of all parties to the mortgage to do this\n              </span>\n            </div>\n            <div className=\"check-flex\">\n              <CheckBox\n                checked={values.isSchemeTransferOfferAccepted}\n                onSelect={(val) => setFieldValue('isSchemeTransferOfferAccepted', val)}\n              />\n              <span>I confirm acceptance of the Scheme Transfer Offer</span>\n            </div>\n            <div className=\"spc-18\" />\n            <div className=\"input-grid\">\n              <div className=\"input-grid-inner\">\n                <span className=\"label\">If you are human, leave this field blank.</span>\n                <TextFiled\n                  placeholder=\"\"\n                  id=\"blankField\"\n                  value={values.blankField}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.blankField && !!errors.blankField}\n                />\n              </div>\n            </div>\n\n            {err && (\n              <>\n                <div className=\"spacer-responsive-30\" />\n                <span style={{ color: 'red' }}>{err}</span>\n              </>\n            )}\n            <div className=\"spacer-responsive-30\" />\n            <button className=\"btn\" type=\"submit\" disabled={!isValid || isSubmitting}>\n              Submit\n            </button>\n          </form>\n        ) : (\n          <div className=\"response\">\n            <div className=\"response-card\">\n              <h4>Submitted</h4>\n              <div className=\"spacer-responsive-30\" />\n              <p>Thank you for contacting us.  A member of our team will be in touch soon.</p>\n              <div className=\"spacer-responsive-30\" />\n              <button\n                className=\"btn\"\n                onClick={() => {\n                  setIsFormSubmitted(false);\n                  resetForm();\n                }}\n              >\n                OK\n              </button>\n              <div className=\"spacer-responsive-30\" />\n              <div className=\"spacer-responsive-30\" />\n            </div>\n          </div>\n        )}\n      </Section>\n    </>\n  );\n};\n\nexport default App;\n"],"names":[],"version":3,"file":"scheme-transfer-form.f0f1ca47.js.map"}