\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default compose(withRouter, withEditMode)(EmbededMarketoForm);\r\n ","export function loadMktoForm(formId, munchkinId, rootUrl) {\r\n if (munchkinId) {\r\n (function () {\r\n function insMktoForm() {\r\n MktoForms2.loadForm(`//${rootUrl}`, munchkinId, formId, function (form) {\r\n form.onSuccess(function (values, followUpUrl) {\r\n _satellite.track('formComplete'); // trigger form complete analytics event \r\n return true;\r\n });\r\n const formEl = form.getFormElem()[0];\r\n formEl.addEventListener(\"focus\", logFirstFocus, true); // form start listener \r\n function logFirstFocus(e) {\r\n formEl.removeEventListener(\"focus\", logFirstFocus, true);\r\n _satellite.track('formStart'); // trigger form start analytics event \r\n };\r\n form.onValidate(function(){ // validate phone number format (4-10 numbers) and throw error if fail \r\n const validPhone = /^[0-9]{4,12}$/;\r\n let vals = form.vals();\r\n const phoneValidation = (field) => {\r\n const phoneInput = document.getElementById(field).value;\r\n let cleanInput = phoneInput.indexOf('_') < 0 ? phoneInput : phoneInput.slice(0, phoneInput.indexOf('_'))\r\n form.setValues({[field]: cleanInput});\r\n vals = form.vals();\r\n if(!validPhone.test(vals[field])){\r\n form.submittable(false);\r\n let formElem = form.getFormElem().find(`#${field}`);\r\n let phoneNumberInput = document.getElementById(field);\r\n form.showErrorMessage('Must be only numbers, between 4-12 digits', formElem);\r\n phoneNumberInput.classList.remove('mktoValid');\r\n phoneNumberInput.classList.add('mktoInvalid');\r\n phoneNumberInput.scrollIntoView({block: \"center\"});\r\n } else {\r\n form.submittable(true);\r\n }\r\n }\r\n if (!!vals.phoneNumberMKTO) {\r\n phoneValidation('phoneNumberMKTO');\r\n } \r\n if (!!vals.mobileNumberMKTO) {\r\n phoneValidation('mobileNumberMKTO');\r\n }\r\n });\r\n });\r\n MktoForms2.whenReady(function (form) {\r\n let vals = form.vals();\r\n digitalData.form.formName = vals.cpa_leadtype; // record form name from marketo hidden field to datalayer \r\n const maskCharExtensions = { // enable 'b' as optional number input mask, used in phone number fields \r\n b: \"[0-9]?\" \r\n }\r\n function checkMaskDefinitions(timeout) { // promise function to wait/check for MktoForms2.$.mask.definitions \r\n var start = Date.now();\r\n return new Promise(waitForMaskDefinitions);\r\n function waitForMaskDefinitions(resolve, reject) {\r\n if (typeof MktoForms2.$.mask == 'object')\r\n resolve(MktoForms2.$.mask.definitions);\r\n else if (timeout && (Date.now() - start) >= timeout)\r\n reject(new Error(\"Marketo Forms Mask Definitions Timeout\"));\r\n else \r\n setTimeout(waitForMaskDefinitions.bind(this, resolve, reject), 30);\r\n }\r\n }\r\n checkMaskDefinitions(1000).then(function(){ // run promise with 1 sec timeout \r\n Object.keys(maskCharExtensions)\r\n .forEach(function(char) {\r\n MktoForms2.$.mask.definitions[char] = this[char];\r\n }, maskCharExtensions);\r\n });\r\n // function to cascade application of field rules \r\n function manageCascadingRequired(mktoForm, sourceFieldName, rules) {\r\n const formEl = mktoForm.getFormElem()[0],\r\n selectEl = formEl.querySelector(\"[name='\" + sourceFieldName + \"']\");\r\n function cascade() {\r\n const currentSourceValue = mktoForm.getValues()[sourceFieldName], \r\n currentCascadeables = rules[currentSourceValue];\r\n if(!currentCascadeables) return;\r\n Object.keys(currentCascadeables).forEach(function (targetFieldName) { \r\n const fieldEl = formEl.querySelector(\"[name='\" + targetFieldName + \"']\");\r\n if(!fieldEl) return; \r\n const wrapperEl = fieldEl.parentElement,\r\n descriptorEl = wrapperEl.parentElement,\r\n descriptorJq = MktoForms2.$(descriptorEl),\r\n isRequired = currentCascadeables[targetFieldName];\r\n wrapperEl.classList[isRequired ? \"add\" : \"remove\"](\"mktoRequiredField\");\r\n descriptorJq.data(\"mktoFieldDescriptor\").required = isRequired;\r\n });\r\n }\r\n cascade(); // initial \r\n selectEl.addEventListener(\"change\", cascade); // ongoing \r\n }\r\n // add required attribute to number fields per value of mobile selection field \r\n if (!!vals.mobileorPhoneNumberMKTO) {\r\n let requiredBySelection = {\r\n \"\" : {\r\n mobileNumberCountryCodeMKTO : false,\r\n mobileNumberMKTO: false,\r\n phoneNumberCountryCodeMKTO: false,\r\n phoneNumberMKTO: false \r\n },\r\n \"Phone\" : {\r\n mobileNumberCountryCodeMKTO : false,\r\n mobileNumberMKTO: false,\r\n phoneNumberCountryCodeMKTO: true,\r\n phoneNumberMKTO: true \r\n },\r\n \"Mobile\" : {\r\n mobileNumberCountryCodeMKTO : true,\r\n mobileNumberMKTO: true,\r\n phoneNumberCountryCodeMKTO: false,\r\n phoneNumberMKTO: false \r\n }\r\n }\r\n manageCascadingRequired(form, \"mobileorPhoneNumberMKTO\", requiredBySelection); \r\n }\r\n })\r\n }\r\n // remove if insMktoForm function called from index.tsx \r\n if (typeof MktoForms2 == 'object') { \r\n insMktoForm();\r\n } else {\r\n console.log('MktoForms2 object does not exist');\r\n }\r\n })();\r\n } \r\n}","import { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\n\r\nimport {\r\n Grid,\r\n Link,\r\n} from '_utils/components';\r\n\r\nimport {\r\n button,\r\n hideOnPrint,\r\n link,\r\n linkWithoutVisited,\r\n mq,\r\n svg,\r\n textBody2\r\n} from '_utils/styles';\r\nimport { spacing } from '_utils/props';\r\n\r\nexport const Header = styled.div`\r\n border-bottom: ${({ theme }) => theme.featureSection?.header?.border};\r\n color: ${({ theme }) => theme.featureSection.color};\r\n ${({ theme }) => spacing({ theme, pb: 3, mb: { xs: 3, md: 4, lg: 6 } })}\r\n\r\n h1,\r\n h2,\r\n h3,\r\n h4,\r\n h5 {\r\n color: ${({ theme }) => theme.featureSection.headingColor ? theme.featureSection.headingColor : null};\r\n margin-bottom: 0;\r\n }\r\n`;\r\n\r\nexport const ListItem = styled(Grid.Item)`\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 100%;\r\n ${({ theme }) => spacing({ theme, pb: 6 })}\r\n padding-top: 0;\r\n\r\n @media print {\r\n display: inline-block !important;\r\n flex-direction: none;\r\n margin: 0;\r\n max-width: 25%;\r\n\r\n a {\r\n width: 100%;\r\n }\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n background: ${({ theme }) => theme.featureSection.background};\r\n\r\n // override global spacing rules as required\r\n &.removeBottomPadding {\r\n margin-bottom: 12px !important;\r\n }\r\n`;\r\n\r\nexport const List = styled(Grid.Row)`\r\n padding: 0;\r\n\r\n /* beat specificity of grid breakpoints */\r\n && {\r\n margin-top: 0;\r\n }\r\n\r\n @media print {\r\n width: 100%;\r\n }\r\n\r\n .noTopBorder {\r\n border-top: 0;\r\n }\r\n`;\r\n\r\nexport const FooterLinkContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 3 })}\r\n`;\r\n\r\nexport const FooterLink = styled(NavLink)`\r\n ${link};\r\n`;\r\n\r\nexport const FooterLinkLabel = styled(Text)`\r\n ${textBody2}\r\n`;\r\n\r\nexport const ArrowWrapper = styled.span`\r\n ${svg(14, 14)}\r\n margin-left: 6px;\r\n margin-right: 2px;\r\n width: 14px;\r\n\r\n path {\r\n fill: ${({ theme }) => theme.featureSection.action};\r\n }\r\n`;\r\n\r\nexport const LinkButton = styled(Link)`\r\n a {\r\n ${linkWithoutVisited}\r\n ${button('slim', 'tertiary')}\r\n width: 100%;\r\n\r\n svg {\r\n top: 2px;\r\n }\r\n\r\n ${mq('md')} {\r\n width: auto;\r\n }\r\n }\r\n`;\r\n\r\nexport const LinkWrapper = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4, mb: 7 })};\r\n\r\n ${mq.lessThan('md')} {\r\n border-top: 1px solid ${({ theme }) => theme.colors.ui.divider};\r\n ${({ theme }) => spacing({ theme, pt: { xs: 6 }, mt: { xs: 0 } })};\r\n }\r\n\r\n &.hideOnMobile {\r\n display: none;\r\n }\r\n\r\n ${mq('md')} {\r\n &.hideOnMobile {\r\n display: block;\r\n }\r\n\r\n &.showOnMobile {\r\n display: none;\r\n }\r\n\r\n ${({ theme }) => spacing({ theme, my: 0 })};\r\n }\r\n\r\n ${hideOnPrint}\r\n`;\r\n","import { SitecoreFieldValidator } from '_utils/validationChecks/definitions';\r\n\r\nexport const isValidheadingCTAConfiguration = (\r\n datasource,\r\n) => {\r\n if (!datasource) {\r\n return false;\r\n }\r\n\r\n const { heading, link } = datasource;\r\n\r\n if (!heading?.jss?.value && link?.jss?.value?.href) {\r\n return false;\r\n }\r\n\r\n return true;\r\n};\r\n\r\nexport const featureSectionFieldValidators: SitecoreFieldValidator[] = [\r\n {\r\n field: 'rendering.fields.data.datasource.items',\r\n errorMessage: 'At least one article must be provided',\r\n minLength: 1\r\n },\r\n {\r\n field: 'rendering.fields.data.datasource.items',\r\n errorMessage: 'Some articles do not have valid links',\r\n allowRenderOnError: true,\r\n validators: [\r\n (field) => field?.url\r\n ]\r\n },\r\n {\r\n field: 'rendering.fields.data.datasource.items',\r\n errorMessage: 'Some articles do not have valid titles',\r\n allowRenderOnError: true,\r\n validators: [\r\n (field) => field?.title\r\n ]\r\n },\r\n {\r\n field: 'rendering.fields.data.datasource',\r\n errorMessage: 'Please add a heading when using a CTA',\r\n validators: [\r\n (field) => isValidheadingCTAConfiguration(field),\r\n ],\r\n }\r\n];\r\n","import classNames from 'classnames';\r\nimport { compose } from 'ramda';\r\nimport React from 'react';\r\n\r\nimport {\r\n CoveoNoIndexWrapper,\r\n withDataSourceValidation,\r\n withEditMode,\r\n} from '_containers/BaseComponent';\r\n\r\nimport ContentCard from '_utils/components/ContentCard';\r\nimport HeadingWithDescription from '_utils/components/HeadingWithDescription';\r\n\r\nimport { normalizeJssFields } from '_utils/helpers/jss';\r\nimport { useBreakpoint } from '_utils/hooks/useBreakpoint';\r\n\r\nimport {\r\n Container,\r\n Header,\r\n LinkButton,\r\n LinkWrapper,\r\n List,\r\n ListItem,\r\n} from './StyledFeatureSection';\r\n\r\nimport {\r\n FeatureSectionProps,\r\n LayoutType,\r\n} from './definitions';\r\nimport { featureSectionFieldValidators } from './validation';\r\n\r\nconst CTA = (props) => {\r\n const { link, className } = props;\r\n return (\r\n - \r\n {validItems.map((item, index) => (\r\n
- \r\n {/* display Ad to side for tablet/desktop breakpoints */}\r\n {advertisment && !['sm', 'xs'].includes(bp) &&\r\n
/sitecore/content/CPA/Corporate/Dictionary/Forms/API Error Heading)\r\n \r\n {residentialAddressLabel} \r\n \r\n \r\n {mailingAddressLabel} \r\n \r\n \r\n\r\n {!values.isSameAddress &&
\r\n ) : (\r\n \r\n {contactProfile?.contact?.comms?.emailAddress}\r\n \r\n\r\n
\r\n /sitecore/content/CPA/Corporate/Dictionary/Forms/API Error Heading)\r\n \r\n
\r\n )}\r\n\r\n hello worl
*/}\r\n