\n {error}\n
\n )}\n \n )\n }\n)\n\nSelect.propTypes = {\n children: PropTypes.node,\n label: PropTypes.string,\n id: PropTypes.string,\n name: PropTypes.string,\n disabled: PropTypes.bool,\n multiple: PropTypes.bool,\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n}\n\nSelect.Option = Option\n\nexport { Select }\nexport default Select\n","// extracted by mini-css-extract-plugin\nexport var InnerWrapper = \"Select-module--InnerWrapper--10Q5a\";\nexport var Select = \"Select-module--Select--1KipI\";\nexport var focused = \"Select-module--focused--1dR8W\";\nexport var error = \"Select-module--error--1iAic\";\nexport var Input = \"Select-module--Input--25ggC\";\nexport var disabled = \"Select-module--disabled--2wJfA\";\nexport var Label = \"Select-module--Label--19ot-\";\nexport var Caret = \"Select-module--Caret--1vOnB\";\nexport var ErrorText = \"Select-module--ErrorText--3dAU2\";","// extracted by mini-css-extract-plugin\nexport var Content = \"contact-form-module--Content--2WUrv\";\nexport var LeftBlock = \"contact-form-module--LeftBlock--1dXdi\";\nexport var RightBlock = \"contact-form-module--RightBlock--2_Ke_\";\nexport var Eyebrow = \"contact-form-module--Eyebrow--FDAl8\";\nexport var Heading = \"contact-form-module--Heading--1DeN5\";\nexport var Card = \"contact-form-module--Card--1Pbun\";\nexport var Fieldset = \"contact-form-module--Fieldset--Pzimh\";\nexport var withMargin = \"contact-form-module--withMargin--1Eg8o\";\nexport var Legend = \"contact-form-module--Legend--emRSb\";\nexport var Submit = \"contact-form-module--Submit--3B7Xr\";\nexport var ShortMessage = \"contact-form-module--ShortMessage--1e2bE\";\nexport var TimesIcon = \"contact-form-module--TimesIcon--1lRYG\";\nexport var CheckIcon = \"contact-form-module--CheckIcon--KSSMl\";\nexport var Notice = \"contact-form-module--Notice--2j8hJ\";","/* eslint-disable camelcase */\n\nimport { Fragment, useCallback, useState, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport axios from 'axios'\nimport qs from 'qs'\nimport { Trans, useTranslation } from 'react-i18next'\nimport { useForm } from 'react-hook-form/dist/index.ie11'\nimport { Helmet } from 'react-helmet'\nimport InputMask from 'react-input-mask'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faTimes, faCheck } from '@fortawesome/pro-regular-svg-icons'\nimport find from 'lodash/find'\nimport formatError from '../utilities/formatError'\nimport { Layout } from '../components/layouts/layout'\nimport { Container, Row, Col } from '../components/grid'\nimport { PageMeta } from '../components/page-meta'\nimport { Alert } from '../components/alert'\nimport { Stack } from '../components/stack'\nimport { Button } from '../components/button'\nimport { TextField } from '../components/textfield'\nimport { Select } from '../components/select'\nimport { Eyebrow } from '../components/typography/Eyebrow'\nimport { Caption } from '../components/typography/Caption'\nimport { Link } from '../components/typography/Link'\nimport { Heading } from '../components/typography/Heading'\nimport { StaticTemplate } from '../templates/staticTemplate'\nimport * as styles from './contact-form.module.scss'\n\nconst EMAIL_REGEX =\n /^[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~](\\.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\\.?[a-zA-Z0-9])*\\.[a-zA-Z](-?[a-zA-Z0-9])+$/\nconst PHONE_REGEX = /^((\\(\\d{3}\\) ?)|(\\d{3}-))?\\d{3}-\\d{4}$/\n\nconst ContactForm = ({ location, pageContext }) => {\n const [t] = useTranslation()\n const [businessBankingSpecialists, setBusinessBankingSpecialists] = useState([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ])\n const [advisors, setAdvisors] = useState([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ])\n const [loanOfficers, setLoanOfficers] = useState([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ])\n const [selectEmployerGroup, setSelectEmployerGroup] = useState([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ])\n\n async function getOfficersList() {\n const officersList = await axios.get(`${process.env.CONTACT_FORM_API_URL}/contacts`)\n setBusinessBankingSpecialists([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ...officersList.data.businessBankers,\n ])\n setAdvisors([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ...officersList.data.financialAdvisors,\n ])\n setLoanOfficers([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ...officersList.data.loanOfficers,\n ])\n setSelectEmployerGroup([\n { id: 1, fullname: t('ContactForm.noPreference', { defaultValue: 'No Preference' }) },\n ...officersList.data.selectEmployerGroup,\n ])\n }\n\n useEffect(() => {\n getOfficersList()\n }, [])\n\n const categories = [\n {\n id: 1,\n name: t('ContactForm.categories.businessBanking', { defaultValue: 'Business banking' }),\n },\n {\n id: 2,\n name: t('ContactForm.categories.businessLending', { defaultValue: 'Business lending' }),\n },\n { id: 3, name: t('ContactForm.categories.careers', { defaultValue: 'Careers' }) },\n {\n id: 13,\n name: t('ContactForm.categories.cd', { defaultValue: 'Certificates of Deposit (CDs)' }),\n },\n {\n id: 15,\n name: t('ContactForm.categories.commercial', { defaultValue: 'Commercial Lending' }),\n },\n {\n id: 16,\n name: t('ContactForm.categories.construction', { defaultValue: 'Construction Lending' }),\n },\n {\n id: 6,\n name: t('ContactForm.categories.ecuFoundation', { defaultValue: 'Local Change Foundation' }),\n },\n { id: 4, name: t('ContactForm.categories.energyLoans', { defaultValue: 'Energy loans' }) },\n {\n id: 5,\n name: t('ContactForm.categories.financialPlanning', { defaultValue: 'Financial planning' }),\n },\n { id: 7, name: t('ContactForm.categories.homeEquity', { defaultValue: 'Home equity' }) },\n { id: 12, name: t('ContactForm.categories.insurance', { defaultValue: 'Insurance' }) },\n { id: 8, name: t('ContactForm.categories.mortgages', { defaultValue: 'Mortgages' }) },\n {\n id: 17,\n name: t('ContactForm.categories.seg', { defaultValue: 'Select Employer Group' }),\n },\n {\n id: 18,\n name: t('ContactForm.categories.trust', { defaultValue: 'Trust and Estate Accounts' }),\n },\n {\n id: 9,\n name: t('ContactForm.categories.otherInquiries', { defaultValue: 'Other inquiries' }),\n },\n { id: 10, name: t('ContactForm.categories.otherLoans', { defaultValue: 'Other loans' }) },\n ]\n\n const validationSchema = {\n firstName: {\n required: t('ContactForm.validationMessages.firstNameRequired', {\n defaultValue: 'First name is required',\n }),\n maxLength: 50,\n },\n lastName: {\n required: t('ContactForm.validationMessages.lastNameRequired', {\n defaultValue: 'Last name is required',\n }),\n maxLength: 50,\n },\n email: {\n required: t('ContactForm.validationMessages.emailRequired', {\n defaultValue: 'Email is required',\n }),\n maxLength: 100,\n validate: value =>\n EMAIL_REGEX.test(value) ||\n t('ContactForm.validationMessages.emailValid', {\n defaultValue: 'A valid email address is required',\n }),\n },\n phoneNumber: {\n required: t('ContactForm.validationMessages.phoneNumberRequired', {\n defaultValue: 'Phone number is required',\n }),\n validate: value =>\n PHONE_REGEX.test(value) ||\n t('ContactForm.validationMessages.phoneNumberValid', {\n defaultValue:\n 'Please enter your full phone number, including area code in the following format XXX-XXX-XXXX',\n }),\n },\n categoryId: {\n required: t('ContactForm.validationMessages.categoryRequired', {\n defaultValue: 'Category is required',\n }),\n },\n message: { required: true },\n businessLocation: { required: true },\n }\n\n const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true })\n const { register, reset, errors, watch, handleSubmit } = useForm({\n mode: 'onBlur',\n defaultValues: {\n categoryId: queryParams.categoryId,\n professionalId: queryParams.professionalId,\n businessId: queryParams.businessId,\n advisorId: queryParams.advisorId,\n segId: queryParams.segId,\n },\n })\n\n const categoryId = watch('categoryId')\n const selectedCategory = categoryId ? find(categories, { id: Number(categoryId) }) : null\n const hasSelectedMortgages = selectedCategory && selectedCategory.id === 8\n const hasSelectedBusinessBanking = selectedCategory && selectedCategory.id === 1\n const hasSelectedBusinessLending = selectedCategory && selectedCategory.id === 2\n const hasSelectedFinancialPlanning = selectedCategory && selectedCategory.id === 5\n const hasSelectedSeg = selectedCategory && selectedCategory.id === 17\n const [alert, showAlert] = useState(null)\n const dismissAlert = useCallback(() => showAlert(null), [])\n\n const [inProgress, setInProgress] = useState(false)\n const handleSubmitValid = async formData => {\n setInProgress(true)\n showAlert(false)\n\n try {\n const payload = {\n form_id: Number(formData.categoryId),\n first_name: formData.firstName,\n last_name: formData.lastName,\n email: formData.email,\n phone_number: formData.phoneNumber,\n message: formData.message,\n }\n if (formData.professionalId) {\n payload.professional_id = Number(formData.professionalId)\n }\n\n if (formData.businessId) {\n payload.business_specialist_id = Number(formData.businessId)\n }\n\n if (formData.businessLocation) {\n payload.business_location = formData.businessLocation\n }\n if (formData.advisorId) {\n payload.advisor_id = Number(formData.advisorId)\n }\n if (formData.SegId) {\n payload.seg_user_id = Number(formData.SegId)\n }\n const response = await axios.post(`${process.env.CONTACT_FORM_API_URL}/submit`, payload)\n\n if (response.status !== 200 || Boolean(response.data.error)) {\n throw new Error(`Unexpected status code: ${response.status} ${response.statusText}`)\n }\n\n reset()\n\n setInProgress(false)\n showAlert({\n type: 'success',\n title: t('ContactForm.successAlertTitle', { defaultValue: 'Thanks for reaching out!' }),\n message: t('ContactForm.successAlertMessage', {\n defaultValue: 'We’ve received your message and will be in touch with you shortly.',\n }),\n })\n } catch (error) {\n setInProgress(false)\n showAlert({\n type: 'error',\n title: t('ContactForm.errorAlertTitle', { defaultValue: 'Error' }),\n message: t('ContactForm.errorAlertMessage', {\n defaultValue:\n 'Uh oh, looks like we’re having some internal server trouble. Please come back later and try again. For immediate help call us at 800-429-7626',\n }),\n })\n }\n\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n })\n }\n\n return (\n\n
\n
\n Need to talk sooner? Just give us a call at{' '}\n (800) 429-7626.\n