{"version":3,"file":"222.25b29b34b08dfc908a78.js","mappings":"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","sources":["webpack://cmhr-witness-blanket-rails/./app/webpack/client/components/pages/TeacherGuide/index.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/control-has-associated-label, jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events */\nimport React, { useState, FormEvent, lazy } from 'react';\nimport axios from 'axios';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\nimport { useInView } from 'react-intersection-observer';\nimport { selectIsMobile, selectIsTablet, selectScreenWidth } 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.svg';\n\nimport mainMosaic from '../../../../images/teacher_guide/main_mosaic.jpg';\nimport img11 from '../../../../images/homepage/img12.png';\nimport img12 from '../../../../images/homepage/img13.png';\nimport img21 from '../../../../images/homepage/img21.png';\nimport img22 from '../../../../images/homepage/img22.png';\nimport img23 from '../../../../images/homepage/img23.png';\nimport img31 from '../../../../images/homepage/img31.png';\nimport img32 from '../../../../images/homepage/img32.png';\nimport img41 from '../../../../images/homepage/img41.png';\nimport img42 from '../../../../images/homepage/img14.png';\nimport img51 from '../../../../images/homepage/img11.png';\nimport leftDarkBkg from '../../../../images/teacher_guide/left_dark_diamond_bkg.png';\nimport leftLightBkg from '../../../../images/teacher_guide/left_light_diamond_bkg.png';\nimport rightDarkBkg from '../../../../images/teacher_guide/right_dark_diamond_bkg.png';\nimport rightLightBkg from '../../../../images/teacher_guide/right_light_diamond_bkg.png';\n\nconst SponsorGraphic = lazy(() => import('../../shared/SponsorGraphic'));\n\nconst MAX_COMMENT_CHARACTERS = 500;\n\nexport default function TeacherGuide() {\n const { t } = useTranslation();\n const isMobile = useSelector(selectIsMobile);\n const isTablet = useSelector(selectIsTablet);\n const screenWidth = useSelector(selectScreenWidth);\n const columnMinLimit = 576;\n const [rightTopBkgRef, rightTopBkgInView] = useInView({\n triggerOnce: true,\n rootMargin: '100px 0px',\n });\n const [rightBottomBkgRef, rightBottomBkgInView] = useInView({\n triggerOnce: true,\n rootMargin: '100px 0px',\n });\n const [leftTopBkgRef, leftTopBkgInView] = useInView({\n triggerOnce: true,\n rootMargin: '-300px 0px',\n });\n const [leftBottomBkgRef, leftBottomBkgInView] = useInView({\n triggerOnce: true,\n rootMargin: '-300px 0px',\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 // Support scrolling to hash\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n\n const el = e.target as HTMLAnchorElement;\n if (el.tagName === 'A') {\n const id = el.getAttribute('href')?.split('#')[1] || '';\n if (id && id !== undefined) {\n const element = document.getElementById(id);\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' });\n }\n }\n }\n };\n\n interface ValidationType {\n [key: string]: string;\n }\n\n const [nameEntered, setNameEntered] = useState(false);\n const [emailEntered, setEmailEntered] = useState(false);\n const [schoolEntered, setSchoolEntered] = useState(false);\n const [locationEntered, setLocationEntered] = useState(false);\n const [validationErrors, setValidationErrors] = useState<ValidationType>({\n name: '',\n email: '',\n school: '',\n location: '',\n });\n const [commentCharCount, setCommentCharCount] = useState(0);\n\n const [formData, setFormData] = useState({ name: '', email: '', school: '', location: '', comment: '' });\n const [formSubmitted, setFormSubmitted] = useState(false);\n const [formCompleted, setFormCompleted] = useState(false);\n const [error, setError] = useState(null);\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 fieldValidClassName = (field: string, isEntered: boolean) => {\n if (formSubmitted) {\n return '';\n }\n if (validationErrors[field] !== '') {\n return 'invalid';\n }\n if (isEntered) {\n return 'input-entered';\n }\n return '';\n };\n\n const submitForm = (e: FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n\n const errors: ValidationType = {};\n\n if (!nameEntered) {\n errors.name = 'required';\n }\n if (!emailEntered) {\n errors.email = 'required';\n } else if (!validateEmail(formData.email)) {\n errors.email = 'invalid';\n }\n if (!schoolEntered) {\n errors.school = 'required';\n }\n if (!locationEntered) {\n errors.location = 'required';\n }\n\n if (Object.keys(errors).length !== 0) {\n setValidationErrors((prevState) => ({\n ...prevState,\n ...errors,\n }));\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_teacher', formData)\n .then(() => {\n setFormCompleted(true);\n })\n .catch((err) => {\n setFormSubmitted(false);\n setError(err);\n });\n };\n\n const openLink = (link: string) => {\n const a = document.createElement('a');\n a.href = link;\n a.download = link.substr(link.lastIndexOf('/') + 1);\n a.target = '_blank';\n a.click();\n };\n\n return (\n /* eslint-disable react/no-danger */\n <>\n <div className=\"intro-section\">\n <div className=\"wide-container\">\n <div className=\"intro-inner-section\">\n <div className=\"mosaic-container\">\n {(isMobile || isTablet) && (\n <>\n <div className=\"mosaic-row row-1\">\n <img className=\"img11\" src={img21} alt=\"\" />\n <img className=\"img12\" src={img22} alt=\"\" />\n <img className=\"img13\" src={img23} alt=\"\" />\n </div>\n <div className=\"mosaic-row row-2\">\n <img className=\"img21\" src={img31} alt=\"\" />\n <img className=\"img22\" src={img32} alt=\"\" />\n </div>\n <div className=\"mosaic-row row-3\">\n <img className=\"img31\" src={img41} alt=\"\" />\n </div>\n </>\n )}\n {!isMobile && !isTablet && (\n <>\n <div className=\"mosaic-row row-1\">\n <img className=\"img11\" src={img11} alt=\"\" />\n <img className=\"img12\" src={img12} alt=\"\" />\n </div>\n <div className=\"mosaic-row row-2\">\n <img className=\"img21\" src={img21} alt=\"\" />\n <img className=\"img22\" src={img22} alt=\"\" />\n <img className=\"img23\" src={img23} alt=\"\" />\n </div>\n <div className=\"mosaic-row row-3\">\n <img className=\"img31\" src={img31} alt=\"\" />\n <img className=\"img32\" src={img32} alt=\"\" />\n </div>\n <div className=\"mosaic-row row-4\">\n <img className=\"img41\" src={img41} alt=\"\" />\n <img className=\"img42\" src={img42} alt=\"\" />\n </div>\n <div className=\"mosaic-row row-5\">\n <img className=\"img51\" src={img51} alt=\"\" />\n </div>\n </>\n )}\n </div>\n\n <div className=\"intro-title-container\">\n <h1 id=\"main-content\" className=\"skipLinkTarget\" tabIndex={-1} data-skip-link={t('stories.skip_to_main')}>\n {t('teacher_guide.intro_title')}\n </h1>\n </div>\n {isTablet && <div className=\"mosaic-cutout\" />}\n <div dangerouslySetInnerHTML={{ __html: t('teacher_guide.intro_text') }} />\n </div>\n </div>\n </div>\n\n <div className=\"approach-section\">\n <div className=\"image-container\">\n <img className=\"main_mosaic\" src={mainMosaic} alt=\"\" />\n </div>\n <div className=\"wide-container content-container\">\n <div className=\"text-container\" dangerouslySetInnerHTML={{ __html: t('teacher_guide.approach_text') }} />\n\n <button type=\"button\" className=\"cta\" onClick={() => openLink(t('teacher_guide.approach_link'))}>\n {t('teacher_guide.approach_main_cta')}\n </button>\n\n <div\n className=\"note-container\"\n onClick={(e) => onClick(e)}\n role=\"button\"\n dangerouslySetInnerHTML={{ __html: t('teacher_guide.approach_workshop') }}\n />\n </div>\n </div>\n\n <div className=\"lesson-section lesson-first\">\n <div className=\"wide-container\" id=\"lesson_1\">\n <div className=\"divider-container wide-container\">\n <img src={dividerImage()} alt=\"\" />\n </div>\n <div className=\"content-container\">\n <h2>{t('teacher_guide.lesson1_title')}</h2>\n\n <div className=\"text-container\" dangerouslySetInnerHTML={{ __html: t('teacher_guide.lesson1_text') }} />\n\n <button type=\"button\" className=\"cta\" onClick={() => openLink(t('teacher_guide.lesson1_link'))}>\n {t('teacher_guide.lesson1_main_cta')}\n </button>\n <button\n type=\"button\"\n className=\"cta-secondary\"\n onClick={() => openLink(t('teacher_guide.lesson1_sec_link'))}\n >\n {t('teacher_guide.lesson1_secondary_cta')}\n </button>\n </div>\n </div>\n <img\n className={`left-top-bkg light ${leftTopBkgInView ? 'in-view' : ''}`}\n src={leftLightBkg}\n alt=\"\"\n ref={leftTopBkgRef}\n />\n <img className={`left-top-bkg dark ${leftTopBkgInView ? 'in-view' : ''}`} src={leftDarkBkg} alt=\"\" />\n </div>\n\n <div className=\"lesson-section lesson-second\">\n <div className=\"wide-container\" id=\"lesson_2\">\n <div className=\"divider-container wide-container\">\n <img src={dividerImage()} alt=\"\" />\n </div>\n <div className=\"content-container\">\n <h2>{t('teacher_guide.lesson2_title')}</h2>\n\n <div className=\"text-container\" dangerouslySetInnerHTML={{ __html: t('teacher_guide.lesson2_text') }} />\n\n <button type=\"button\" className=\"cta\" onClick={() => openLink(t('teacher_guide.lesson2_link'))}>\n {t('teacher_guide.lesson2_main_cta')}\n </button>\n <button\n type=\"button\"\n className=\"cta-secondary\"\n onClick={() => openLink(t('teacher_guide.lesson2_sec_link'))}\n >\n {t('teacher_guide.lesson2_secondary_cta')}\n </button>\n <button\n type=\"button\"\n className=\"cta-secondary\"\n onClick={() => openLink(t('teacher_guide.lesson2_third_link'))}\n >\n {t('teacher_guide.lesson2_tertiary_cta')}\n </button>\n </div>\n </div>\n <img\n className={`right-top-bkg light ${rightTopBkgInView ? 'in-view' : ''}`}\n src={rightLightBkg}\n alt=\"\"\n ref={rightTopBkgRef}\n />\n <img className={`right-top-bkg dark ${rightTopBkgInView ? 'in-view' : ''}`} src={rightDarkBkg} alt=\"\" />\n </div>\n\n <div className=\"lesson-section lesson-third\">\n <div className=\"wide-container\" id=\"lesson_3\">\n <div className=\"divider-container wide-container\">\n <img src={dividerImage()} alt=\"\" />\n </div>\n <div className=\"content-container\">\n <h2>{t('teacher_guide.lesson3_title')}</h2>\n\n <div className=\"text-container\" dangerouslySetInnerHTML={{ __html: t('teacher_guide.lesson3_text') }} />\n\n <button type=\"button\" className=\"cta\" onClick={() => openLink(t('teacher_guide.lesson3_link'))}>\n {t('teacher_guide.lesson3_main_cta')}\n </button>\n </div>\n </div>\n <img\n className={`right-bottom-bkg light ${rightBottomBkgInView ? 'in-view' : ''}`}\n src={rightLightBkg}\n alt=\"\"\n ref={rightBottomBkgRef}\n />\n <img className={`right-bottom-bkg dark ${rightBottomBkgInView ? 'in-view' : ''}`} src={rightDarkBkg} alt=\"\" />\n </div>\n\n <div className=\"lesson-section lesson-last\">\n <div className=\"wide-container\" id=\"lesson_4\">\n <div className=\"divider-container wide-container\">\n <img src={dividerImage()} alt=\"\" />\n </div>\n <div className=\"content-container\">\n <h2>{t('teacher_guide.lesson4_title')}</h2>\n\n <div className=\"text-container\" dangerouslySetInnerHTML={{ __html: t('teacher_guide.lesson4_text') }} />\n\n <button type=\"button\" className=\"cta\" onClick={() => openLink(t('teacher_guide.lesson4_link'))}>\n {t('teacher_guide.lesson4_main_cta')}\n </button>\n </div>\n <div className=\"divider-container divider-container--last wide-container\">\n <img src={dividerImage()} alt=\"\" />\n </div>\n </div>\n <img\n className={`left-bottom-bkg light ${leftBottomBkgInView ? 'in-view' : ''}`}\n src={leftLightBkg}\n alt=\"\"\n ref={leftBottomBkgRef}\n />\n <img className={`left-bottom-bkg dark ${leftBottomBkgInView ? 'in-view' : ''}`} src={leftDarkBkg} alt=\"\" />\n </div>\n <div className=\"bottom-section\">\n <div className=\"workshop-container\" id=\"workshop\">\n <div className=\"workshop-inner-container wide-container\">\n <h2>{t('teacher_guide.workshop_title')}</h2>\n <div className=\"text-container\" dangerouslySetInnerHTML={{ __html: t('teacher_guide.workshop_copy') }} />\n </div>\n <SponsorGraphic\n foundationText={t('teacher_guide.sponsor_main')}\n specificStyleClassName=\"teacher-guide-sponsor-section\"\n />\n </div>\n <div className=\"contact-container\" id=\"contact\">\n <div className=\"wide-container contact-inner-container\">\n <h2>{t('teacher_guide.contact_title')}</h2>\n\n <form onSubmit={submitForm} noValidate>\n <div className=\"row\">\n <div\n className={`form-group ${screenWidth > columnMinLimit ? 'col-6' : 'col-12'} ${fieldValidClassName(\n 'name',\n nameEntered\n )}`}\n >\n <label htmlFor=\"contactName\">\n {t('teacher_guide.contact_name')}\n <input\n type=\"text\"\n className=\"form-control\"\n id=\"contactName\"\n aria-describedby=\"name-description\"\n placeholder={t('teacher_guide.contact_name')}\n disabled={formSubmitted}\n onChange={(e) => {\n setValidationErrors((prevState) => ({\n ...prevState,\n name: '',\n }));\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\">\n {validationErrors.name === '' ? t('contact_us.required') : t('shared_form_feedback.name_required')}\n </small>\n </div>\n <div\n className={`form-group ${screenWidth > columnMinLimit ? 'col-6' : 'col-12'} ${fieldValidClassName(\n 'email',\n emailEntered\n )}`}\n >\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((prevState) => ({\n ...prevState,\n email: '',\n }));\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>\n <div className=\"row\">\n <div\n className={`form-group ${screenWidth > columnMinLimit ? 'col-6' : 'col-12'} ${fieldValidClassName(\n 'school',\n schoolEntered\n )}`}\n >\n <label htmlFor=\"contactSchool\">\n {t('teacher_guide.contact_school')}\n <input\n type=\"text\"\n className=\"form-control\"\n id=\"contactSchool\"\n aria-describedby=\"schoool-description\"\n placeholder={t('teacher_guide.contact_school')}\n disabled={formSubmitted}\n onChange={(e) => {\n setValidationErrors((prevState) => ({\n ...prevState,\n school: '',\n }));\n setSchoolEntered(e.target.value.length > 0);\n setFormData((prevState) => ({\n ...prevState,\n school: e.target.value,\n }));\n }}\n />\n <p id=\"school-description\" hidden>\n {t('teacher_guide.contact_school_aria')}\n </p>\n </label>\n <small className=\"form-text\">\n {validationErrors.school === ''\n ? t('contact_us.required')\n : t('shared_form_feedback.school_required')}\n </small>\n </div>\n <div\n className={`form-group ${screenWidth > columnMinLimit ? 'col-6' : 'col-12'} ${fieldValidClassName(\n 'location',\n locationEntered\n )}`}\n >\n <label htmlFor=\"contactLocation\">\n {t('teacher_guide.contact_location')}\n <input\n type=\"text\"\n className=\"form-control\"\n id=\"contactLocation\"\n aria-describedby=\"location-description\"\n placeholder={t('teacher_guide.contact_location')}\n disabled={formSubmitted}\n onChange={(e) => {\n setValidationErrors((prevState) => ({\n ...prevState,\n location: '',\n }));\n setLocationEntered(e.target.value.length > 0);\n setFormData((prevState) => ({\n ...prevState,\n location: e.target.value,\n }));\n }}\n />\n <p id=\"location-description\" hidden>\n {t('teacher_guide.contact_location_aria')}\n </p>\n </label>\n <small className=\"form-text\">\n {validationErrors.location === ''\n ? t('contact_us.required')\n : t('shared_form_feedback.location_required')}\n </small>\n </div>\n </div>\n <div className={`form-group ${commentCharCount > 0 && !formSubmitted ? 'input-entered' : ''}`}>\n <label htmlFor=\"contactComment\">\n {t('teacher_guide.contact_comment')}\n <textarea\n className=\"form-control\"\n id=\"contactComment\"\n aria-describedby=\"comment-description\"\n placeholder={t('teacher_guide.contact_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 <p id=\"comment-description\" hidden>\n {t('contact_us.comment_aria')}\n </p>\n <small className=\"form-text form-word-count\">\n {t('contact_us.characters_left', { count: MAX_COMMENT_CHARACTERS - commentCharCount })}\n </small>\n </div>\n {formCompleted ? (\n <>\n <div className=\"confirmation-message\">{t('contact_us.confirmation_message')}</div>\n <div>{error}</div>\n </>\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 </div>\n </div>\n </>\n );\n}\n"],"names":["SponsorGraphic","lazy","TeacherGuide","t","useTranslation","isMobile","useSelector","selectIsMobile","isTablet","selectIsTablet","screenWidth","selectScreenWidth","columnMinLimit","useInView","triggerOnce","rootMargin","rightTopBkgRef","rightTopBkgInView","rightBottomBkgRef","rightBottomBkgInView","leftTopBkgRef","leftTopBkgInView","leftBottomBkgRef","leftBottomBkgInView","useScrollLocation","useSkipLinks","dividerImage","DividerMobile","DividerTablet","DividerDesktop","useState","nameEntered","setNameEntered","emailEntered","setEmailEntered","schoolEntered","setSchoolEntered","locationEntered","setLocationEntered","name","email","school","location","validationErrors","setValidationErrors","commentCharCount","setCommentCharCount","comment","formData","setFormData","formSubmitted","setFormSubmitted","formCompleted","setFormCompleted","error","setError","fieldValidClassName","field","isEntered","openLink","link","a","document","createElement","href","download","substr","lastIndexOf","target","click","className","src","img21","alt","img22","img23","img31","img32","img41","img11","img12","img42","img51","id","tabIndex","dangerouslySetInnerHTML","__html","mainMosaic","type","onClick","e","preventDefault","el","tagName","getAttribute","split","undefined","element","getElementById","scrollIntoView","behavior","role","leftLightBkg","ref","leftDarkBkg","rightLightBkg","rightDarkBkg","foundationText","specificStyleClassName","onSubmit","value","input","errors","required","checkValidity","test","Object","keys","length","csrfToken","querySelector","axios","then","catch","err","prevState","noValidate","htmlFor","placeholder","disabled","onChange","hidden","maxLength","count"],"sourceRoot":""}