{"mappings":"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","sources":["src/tsx/modules/DonationForm/index.tsx","src/tsx/modules/DonationForm/App.tsx"],"sourcesContent":["import ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('jsx-high-five-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';\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    .text-sm {\n      margin-bottom: 10px;\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      }\n\n      button {\n        min-width: 230px;\n        max-width: 230px;\n      }\n    }\n  }\n  .input-grid-inner {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\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        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        }\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  charityName: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  contactFirstName: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  contactLastName: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  contactEmailAddress: Yup.string().email('Invalid email address').required('Required'),\n  contactPhoneNumber: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  address: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  overview: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  donationUse: Yup.string().min(2, 'Min 2 characters').max(255, 'Max 255 characters').required('Required'),\n  donationBenefit: 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      charityName: '',\n      contactFirstName: '',\n      contactLastName: '',\n      contactEmailAddress: '',\n      contactPhoneNumber: '',\n      address: '',\n      overview: '',\n      donationUse: '',\n      donationBenefit: '',\n    },\n    onSubmit: async (values) => {\n      setFormSubmitted(true);\n      values.contactPhoneNumber = values.contactPhoneNumber.toString();\n      // console.log(updatedValues);\n      try {\n        const response = await fetch(`/api/forms/apply-for-donations`, {\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>Apply for donations</h2>\n              <div className=\"decor-divider\" />\n              <p className=\"text-sm\">\n                If your charity or group shares our commitments to the local community and you would like to apply for a\n                donation, please complete the form below.\n              </p>\n            </div>\n\n            <div className=\"input-grid\">\n              <TextFiled\n                placeholder=\"Name of Charity or Group\"\n                id=\"charityName\"\n                value={values.charityName}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.charityName && !!errors.charityName}\n              />\n              <div className=\"input-grid-inner\">\n                <TextFiled\n                  placeholder=\"First Name\"\n                  id=\"contactFirstName\"\n                  value={values.contactFirstName}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.contactFirstName && !!errors.contactFirstName}\n                />\n                <TextFiled\n                  placeholder=\"Last Name\"\n                  id=\"contactLastName\"\n                  value={values.contactLastName}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  error={touched.contactLastName && !!errors.contactLastName}\n                />\n              </div>\n              <TextFiled\n                placeholder=\"Contact Email\"\n                id=\"contactEmailAddress\"\n                type=\"contactEmailAddress\"\n                value={values.contactEmailAddress}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.contactEmailAddress && !!errors.contactEmailAddress}\n              />\n              <TextFiled\n                placeholder=\"Contact Phone\"\n                id=\"contactPhoneNumber\"\n                value={values.contactPhoneNumber}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.contactPhoneNumber && !!errors.contactPhoneNumber}\n                type=\"number\"\n                onKeyPress={(event) => {\n                  if (!/[0-9]/.test(event.key)) {\n                    event.preventDefault();\n                  }\n                }}\n              />\n              <TextArea\n                placeholder=\"Address (including postcode)\"\n                rows={5}\n                id=\"address\"\n                value={values.address}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.address && !!errors.address}\n              />\n              <TextArea\n                placeholder=\"Overview of your Charity/Group\"\n                rows={5}\n                id=\"overview\"\n                value={values.overview}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.overview && !!errors.overview}\n              />\n              <TextArea\n                placeholder=\"What would the donation be used for?\"\n                rows={5}\n                id=\"donationUse\"\n                value={values.donationUse}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.donationUse && !!errors.donationUse}\n              />\n              <TextArea\n                placeholder=\"Who would benefit from the donation?\"\n                rows={5}\n                id=\"donationBenefit\"\n                value={values.donationBenefit}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                error={touched.donationBenefit && !!errors.donationBenefit}\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 application</h2>\n              <div className=\"decor-divider\" />\n            </div>\n            <p>Thank you for applying for a Chorley High Five Donation. </p>\n            <p>\n              Your application has been sent to our Charity Committee for consideration.  Our committee meet four times\n              a year, so you will receive a response after the next meeting has taken place.\n            </p>\n          </div>\n        )}\n      </div>\n    </Section>\n  );\n};\n\nexport default App;\n"],"names":[],"version":3,"file":"high-five.f6059ee0.js.map"}