{"version":3,"file":"473.9fee8207be4afcc3734d.js","mappings":"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","sources":["webpack://cmhr-witness-blanket-rails/./app/webpack/client/components/pages/ContactUs/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n\nimport React, { Suspense, lazy, useState, FormEvent } from 'react';\nimport axios from 'axios';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport { selectIsMobile, selectIsTablet } from '../../../store/ui/uiSlice';\nimport useScrollLocation from '../../utils/useScrollLocation';\nimport useSkipLinks from '../../utils/useSkipLinks';\n\nimport DividerMobile from '../../../../images/divider_small_mobile.svg';\nimport DividerTablet from '../../../../images/divider_small_tablet.svg';\nimport DividerDesktop from '../../../../images/divider_small_desktop.svg';\n\nconst Connect = lazy(() => import('../../shared/Connect'));\n\nconst MAX_COMMENT_CHARACTERS = 500;\n\nexport default function ContactUs() {\n  const { t } = useTranslation();\n  const isMobile = useSelector(selectIsMobile);\n  const isTablet = useSelector(selectIsTablet);\n  const [nameEntered, setNameEntered] = useState(false);\n  const [emailEntered, setEmailEntered] = useState(false);\n  const [validationErrors, setValidationErrors] = useState({ email: '' });\n  const [commentCharCount, setCommentCharCount] = useState(0);\n\n  const [formData, setFormData] = useState({ name: '', email: '', comment: '' });\n  const [formSubmitted, setFormSubmitted] = useState(false);\n  const [formCompleted, setFormCompleted] = useState(false);\n  const [error, setError] = useState(null);\n\n  useScrollLocation();\n  useSkipLinks();\n\n  const dividerImage = () => {\n    if (isMobile) {\n      return DividerMobile;\n    }\n    if (isTablet) {\n      return DividerTablet;\n    }\n    return DividerDesktop;\n  };\n\n  const validateEmail = (value: string) => {\n    const input = document.createElement('input');\n\n    input.type = 'email';\n    input.required = true;\n    input.value = value;\n\n    return typeof input.checkValidity === 'function' ? input.checkValidity() : /\\S+@\\S+\\.\\S+/.test(value);\n  };\n\n  const emailValidClassName = () => {\n    if (formSubmitted) {\n      return '';\n    }\n    if (validationErrors.email !== '') {\n      return 'invalid';\n    }\n    if (emailEntered) {\n      return 'input-entered';\n    }\n    return '';\n  };\n\n  const submitForm = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    if (!emailEntered) {\n      setValidationErrors((prevState) => ({\n        ...prevState,\n        email: 'required',\n      }));\n      (document.getElementById('contactEmail') as HTMLElement).focus();\n\n      return;\n    }\n    if (!validateEmail(formData.email)) {\n      setValidationErrors((prevState) => ({\n        ...prevState,\n        email: 'invalid',\n      }));\n      (document.getElementById('contactEmail') as HTMLElement).focus();\n\n      return;\n    }\n\n    setFormSubmitted(true);\n\n    const csrfToken = document.querySelector('[name=csrf-token]')?.getAttribute('content') || '';\n    axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;\n\n    axios\n      .post('/api/v1/contact', formData)\n      .then(() => {\n        setFormCompleted(true);\n        (document.querySelectorAll('.confirmation-message')[0] as HTMLElement).focus();\n      })\n      .catch((err) => {\n        setFormSubmitted(false);\n        setError(err);\n      });\n  };\n\n  return (\n    /* eslint-disable react/no-danger */\n    <>\n      <div className=\"form-section wide-container\">\n        <h1 id=\"main-content\" className=\"skipLinkTarget\" tabIndex={-1} data-skip-link={t('stories.skip_to_main')}>\n          {t('contact_us.title')}\n        </h1>\n        <img src={dividerImage()} className=\"divider\" alt=\"\" />\n        <form onSubmit={submitForm} noValidate>\n          <div className={`form-group ${nameEntered && !formSubmitted && 'input-entered'}`}>\n            <label htmlFor=\"contactName\">\n              {t('contact_us.name')}\n              <input\n                type=\"text\"\n                className=\"form-control\"\n                id=\"contactName\"\n                aria-describedby=\"name-description\"\n                placeholder={t('contact_us.name')}\n                disabled={formSubmitted}\n                onChange={(e) => {\n                  setNameEntered(e.target.value.length > 0);\n                  setFormData((prevState) => ({\n                    ...prevState,\n                    name: e.target.value,\n                  }));\n                }}\n              />\n              <p id=\"name-description\" hidden>\n                {t('contact_us.name_aria')}\n              </p>\n            </label>\n            <small className=\"form-text\">{t('contact_us.optional_msg')}</small>\n          </div>\n          <div className={`form-group ${emailValidClassName()}`}>\n            <label htmlFor=\"contactEmail\">\n              {t('contact_us.email')}\n              <input\n                type=\"email\"\n                className=\"form-control\"\n                id=\"contactEmail\"\n                aria-describedby=\"email-description\"\n                placeholder={t('contact_us.email')}\n                disabled={formSubmitted}\n                onChange={(e) => {\n                  setValidationErrors({ email: '' });\n                  setEmailEntered(e.target.value.length > 0);\n                  setFormData((prevState) => ({\n                    ...prevState,\n                    email: e.target.value,\n                  }));\n                }}\n              />\n              <p id=\"email-description\" hidden>\n                {t('contact_us.email_aria')}\n              </p>\n            </label>\n            <small className=\"form-text\">\n              {validationErrors.email === '' && t('contact_us.required')}\n              {validationErrors.email === 'required' && t('shared_form_feedback.email_required')}\n              {validationErrors.email === 'invalid' && t('shared_form_feedback.email_invalid')}\n            </small>\n          </div>\n          <div className={`form-group ${commentCharCount > 0 && !formSubmitted ? 'input-entered' : ''}`}>\n            <label htmlFor=\"contactComment\">\n              {t('contact_us.comment')}\n              <textarea\n                className=\"form-control\"\n                id=\"contactComment\"\n                aria-describedby=\"comment-instructions\"\n                placeholder={t('contact_us.comment_placeholder')}\n                maxLength={MAX_COMMENT_CHARACTERS}\n                disabled={formSubmitted}\n                onChange={(e) => {\n                  setCommentCharCount(e.target.value.length);\n                  setFormData((prevState) => ({\n                    ...prevState,\n                    comment: e.target.value,\n                  }));\n                }}\n              />\n            </label>\n            <small id=\"comment-instructions\" className=\"form-text\" aria-live=\"polite\" aria-atomic=\"true\">\n              {t('contact_us.characters_left', { count: MAX_COMMENT_CHARACTERS - commentCharCount })}\n            </small>\n          </div>\n          {formCompleted ? (\n            <div className=\"confirmation-message\" tabIndex={-1}>\n              {t('contact_us.confirmation_message')}\n            </div>\n          ) : (\n            <>\n              <button\n                type=\"submit\"\n                className=\"btn btn-submit\"\n                disabled={formSubmitted}\n                aria-describedby=\"submit-description\"\n              >\n                {t('contact_us.submit')}\n              </button>\n              <p id=\"submit-description\" hidden>\n                {t('contact_us.submit_aria')}\n              </p>\n            </>\n          )}\n        </form>\n      </div>\n\n      <Suspense fallback={null}>\n        <Connect />\n      </Suspense>\n    </>\n  );\n}\n"],"names":["Connect","lazy","ContactUs","t","useTranslation","isMobile","useSelector","selectIsMobile","isTablet","selectIsTablet","useState","nameEntered","setNameEntered","emailEntered","setEmailEntered","email","validationErrors","setValidationErrors","commentCharCount","setCommentCharCount","name","comment","formData","setFormData","formSubmitted","setFormSubmitted","formCompleted","setFormCompleted","setError","useScrollLocation","useSkipLinks","className","id","tabIndex","src","DividerMobile","DividerTablet","DividerDesktop","alt","onSubmit","e","value","input","preventDefault","prevState","document","getElementById","focus","createElement","type","required","checkValidity","test","csrfToken","querySelector","getAttribute","axios","then","querySelectorAll","catch","err","noValidate","htmlFor","placeholder","disabled","onChange","target","length","hidden","maxLength","count","Suspense","fallback"],"sourceRoot":""}