\n {navData.map((menuItem) => {\n return menuItem.children ? (\n // Menu items that expand/collapse\n \n ) : (\n // Menu items that do not expand/collapse\n
\n\n \n );\n};\n\nexport default PageFooter;\n","import React, { useContext, useReducer, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst FormContext = React.createContext();\n\n// use this hook to access form state and dispatch funcs from child components\nconst useFormContext = () => useContext(FormContext);\n\n// FormProvider passes form state handlers to child components\nfunction FormProvider({ children, initialState, onSubmit, onChange, onFieldChange, formErrors }) {\n\n const formStateReducer = (state, action) => {\n if (action.type === \"file\") {\n const file = action.files[0];\n let newstate = null;\n if(!file){\n newstate = { ...state, [action.name]: \"\" };\n } else {\n newstate = { ...state, [action.name]: file };\n }\n return newstate\n } else if (action.type === \"checkbox\") {\n if (action.checked) {\n return {\n ...state,\n [action.name]: [...state[action.name], action.value],\n }\n } else {\n return {\n ...state,\n [action.name]: state[action.name].filter((v) => v !== action.value),\n }\n }\n }\n return { ...state, [action.name]: action.value }\n }\n\n const [formState, dispatch] = useReducer(formStateReducer, initialState);\n\n // default onchange function for all form inputs\n const setFormState = (e) => {\n\n // console.log('FORMSTATECHANGE', e);\n \n const delta = {\n files: e.target.files,\n name: e.target.name,\n type: e.target.type,\n value: e.target.value,\n checked: e.target.checked,\n };\n onFieldChange && onFieldChange(delta);\n dispatch(delta);\n }\n\n // if the formstate changes, notify the parent form explicitly,\n // children will know through the normal provider situation\n useEffect(() => {\n onChange && onChange(formState);\n }, [formState, onChange])\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onSubmit(formState);\n };\n\n return (\n \n \n \n );\n}\n\nFormProvider.propTypes = {\n children: PropTypes.node,\n initialState: PropTypes.object,\n onSubmit: PropTypes.func,\n onChange: PropTypes.func,\n onFieldChange: PropTypes.func,\n formErrors: PropTypes.object,\n};\n\nexport { FormProvider as default, useFormContext };\n","import axios from \"axios\";\n\nclass FormApi {\n constructor() {\n\n this.api = axios.create({\n baseURL: '//',\n headers: {\n Authorization: \"FIX ME\",\n },\n });\n }\n\n async submit(formData) {\n const realFormData = new FormData();\n for (const key of Object.keys(formData)) {\n if (Array.isArray(formData[key])) {\n for (let datum of formData[key]) {\n realFormData.append(`${key}[]`, datum)\n }\n } else {\n realFormData.append(key, formData[key])\n }\n }\n return this.api.post(\"formProxy\", realFormData);\n }\n}\n\nexport default FormApi;\n","import React, { useRef, useEffect, useState, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport FormProvider from \"@/core/providers/FormProvider\";\nimport { useCaptcha } from \"@/core/providers/CaptchaProvider\";\nimport {ButtonPill} from \"@/base\";\nimport FormApi from \"@apis/FormApi\";\n\nconst USE_CAPTCHA = !!process.env.RECAPTCHA_KEY;\n\nfunction Form({ name, children, onSubmit, onChange, onSuccess, customSubmit }) {\n\n // create initial state object from child fields\n const childrenToState = (children) => {\n return React.Children.map(children, (child) => {\n return child.props\n ? React.Children.count(child.props.children)\n ? // recurse if there are more children\n childrenToState(child.props.children)\n : // checkboxes default to empty array, everything else is empty string\n { [child.props.name]: child.props.type === \"checkbox\" ? [] : \"\" }\n : // skip this child if there are no props\n {};\n }).reduce((acc, cur) => ({ ...acc, ...cur }));\n };\n\n // `processor` is used by Atom Form Handler to identify the form for validation\n const initialState = { ...childrenToState(children), processor: name };\n\n // place for the form values, since we need to hold them briefly while captcha validates.\n const [formValues, setFormValues] = useState({});\n const [formErrors, setFormErrors] = useState({});\n const [captchaCode, setCaptchaCode] = useState(false);\n\n // Remember to reload the recaptcha code when the form loads.\n const myInvisibleCaptcha = useRef();\n\n // get captcha details.\n const { siteKey, isLoaded: captchaIsLoaded } = useCaptcha();\n\n const onValidateCaptcha = async (code) => {\n await setCaptchaCode(code);\n };\n\n const resetCaptcha = async () => {\n await setCaptchaCode(\"\")\n }\n\n const preSubmitCheck = async (fv) => {\n await setFormErrors({}); //clear errors\n\n // set the completed form values internally,\n // this is to support the fact that you cannot pass state data properly through google's recaptcha API\n // instead, we keep track of the \"complete\" form here, and an onComplete in grecaptcha calls\n // the next step, which picks it up for use.\n await setFormValues(fv);\n\n if (USE_CAPTCHA) {\n await captchaIsLoaded;\n if (captchaCode.length > 0) {\n // If we already have a code, then we can assume we already passed captcha.\n // forged codes wont pass server validation.\n await postToForm({ ...fv, _captcha: captchaCode });\n } else {\n // if we dont have a code, execute the captcha, which validates the submission.\n // the captcha has on-complete code to call the other half of the process.\n try {\n window.grecaptcha.execute();\n } catch (e) {\n console.log(\"Issue rendering captcha\", e);\n }\n }\n\n } else {\n await postToForm(fv);\n }\n };\n\n const postToForm = useCallback(async (data) => {\n try {\n const result = await onSubmit(data);\n onSuccess && onSuccess(result);\n\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n 'event': 'generate_lead',\n 'form': `${name}`\n });\n\n if(name === 'lac_request_quote'){\n window.dataLayer.push({\n 'event': 'pinterest_generate_lead'\n });\n }\n\n // Same as below, this next line is potentially an anti-pattern, the idea here is to scroll to the top\n // of the page if any form submitted successfully. I believe this is always desired. (if not lets find out when)\n // Fixes \"thank you\" states for forms not actually being considered new pages, and so not\n // scrolling to top naturally.\n document.body.scrollIntoView({behavior: \"instant\"}) // instant here as users will associate it with a \"new page\"\n } catch (xhr) {\n // okay, we failed to post to the form, lets try to get some errors out.\n try {\n await setFormErrors(xhr.response.data.errors || {}); // pass errors straight through\n // This is potentially an anti-pattern, but the objective is to scroll\n // to the parent of the first activate FieldError below the form. I cannot find a good way to handle this\n // with refs considering the nature of how these forms are put together. I am probably missing a technique for this.\n // but so far this works great?\n document.querySelector(\"[data-field-error-name]\").parentNode.scrollIntoView({ behavior: \"smooth\" })\n } catch (e) {\n await setFormErrors({});\n }\n }\n }, [onSubmit,onSuccess,setFormErrors, name])\n\n // Run Once\n useEffect(() => {\n (async () => {\n if (USE_CAPTCHA) {\n await captchaIsLoaded;\n try {\n window.grecaptcha.render(myInvisibleCaptcha.current, {\n callback: onValidateCaptcha,\n \"expired-callback\": resetCaptcha\n });\n } catch (e) {\n console.log(\"Issue rendering captcha\", e);\n }\n }\n })()\n }, [captchaIsLoaded]);\n\n useEffect(() => {\n (async () => {\n if (!captchaCode || captchaCode.length === 0) return;\n postToForm({ ...formValues, _captcha: captchaCode });\n })()\n }, [captchaCode,postToForm,formValues]);\n\n const handleChange = useCallback(formData => {\n onChange && onChange(formData);\n }, [onChange])\n\n const handleFieldChange = (delta) => {\n // whenever a field changes, remove the error message it may have.\n setFormErrors({ ...formErrors, [delta.name]: null });\n }\n\n return (\n \n {children}\n \n\n {!customSubmit && (\n
\n );\n}\n\nFieldError.propTypes = {\n name: PropTypes.string,\n css: PropTypes.array,\n};\n\nexport default FieldError;\n","import { useTheme, css } from \"@emotion/react\";\nimport React, {useEffect, useState, useRef} from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useFormContext } from \"@/core/providers/FormProvider\";\nimport FieldError from \"@/base/FieldError\";\nimport { em, emu } from \"@util/convertUnits\";\nimport SVG from \"react-inlinesvg\";\n\nfunction FormInput({\n type,\n label,\n required,\n name,\n value,\n placeholder,\n children,\n builtinError,\n boxed,\n multiple,\n}) {\n\n const theme = useTheme();\n\n const { formState, setFormState } = useFormContext();\n\n const Select = (props) => ;\n const Component = (() => {\n if (type === \"select\") return Select;\n if (type === \"textarea\") return TextArea;\n if (type === \"file\") return FileInput;\n return Input;\n })()\n\n // HTML with types \"checkbox\" and \"radio\" are edge cases\n // We implement Checkboxes using an array in order to handle multiple selection\n // Both Radio buttons and Checkboxes need a `value` prop defined\n // else they will get a value of \"on\" or \"checked\" by default\n const checked =\n (type === \"radio\" && formState[name] === value) ||\n (type === \"checkbox\" && formState[name].includes(value));\n\n // radio buttons and checkboxes use `checked` and `value` props\n // all other inputs use the value from formState directly\n const realValue =\n type === \"checkbox\" || type === \"radio\" ? value : formState[name];\n\n const containerCss = css(`\n position: relative;\n justify-content: space-between;\n width: 100%;\n margin-right: auto;\n margin-bottom: 1.8rem;\n margin-left: auto;\n font-family: ${theme.header.fontFamily};\n\n &.is-checkbox, &.is-radio {\n column-gap: 1.2rem;\n display: flex;\n margin-bottom: 1.2rem;\n }\n\n &.is-text {}\n &.is-email {}\n &.is-select {}\n `);\n\n const boxedContainerCss = (checked) => {\n return css(`\n border: 1px solid #979797;\n padding: 1.4rem;\n align-items: center;\n background: ${checked ? '#F4F4F4' : '#fff'};\n span{\n top: auto !important;\n }\n label{\n margin-bottom: 0;\n }\n `)\n }\n\n const labelCss = css(`\n display: block;\n color: #000000;\n cursor: pointer;\n\n .is-checkbox &, .is-radio & {\n flex-grow: 1;\n order: 1;\n }\n `);\n\n const inputCss = css`\n flex-shrink: 1;\n display: block;\n width: 100%;\n padding: 1.2rem 1.6rem;\n margin-bottom: ${em(8, 16)};\n font-size: ${em(16)};\n line-height: ${emu(22, 16)};\n color: #272525; // rgba(0,0,0,0.4);\n background-color: #f4f4f4;\n border: none;\n border-radius: 0.1rem;\n\n .is-checkbox &, .is-radio & {\n position: relative;\n top: 0.4rem;\n z-index: 1;\n flex-grow: 0;\n width: 1.865rem;\n height: 1.7rem;\n\n opacity: 0;\n border: none;\n \n + span {\n position: absolute;\n top: 0.4rem;\n z-index: 0;\n display: block;\n width: 1.7rem;\n height: 1.7rem;\n background-color: #f4f4f4;\n }\n\n &:checked + span {\n background-color: #448da4;\n background-image: url(/images/common-icons/icon-input-check.svg);\n background-position: 50% 50%;\n background-repeat: no-repeat;\n }\n \n }\n \n .is-radio & {\n + span {\n border-radius: 1.7rem;\n }\n }\n\n textarea& {\n min-height: 17.3rem;\n }\n\n select& {\n appearance: none;\n\n + span {\n position: absolute;\n right: 1.2rem;\n top: 5rem;\n width: 0.8em;\n height: 0.5em;\n background-color: #999999;\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n pointer-events: none;\n }\n }\n\n `;\n\n const renderElems = () => {\n const words = ;\n\n const component = \n\n const span = ;\n\n let err = null;\n if (builtinError) err = \n\n return {words}{component}{span}{err}\n\n }\n\n return (\n
\n {renderElems()}\n
\n );\n}\n\nconst Input = (props) => ;\nconst FileInput = (props) => {\n \n const [destroyKey, destroy] = useState(1);\n const [showClose, updateShowClose] = useState(false);\n const [domSafeProps, updateDomSafeProps] = useState({});\n const fileRef = useRef();\n\n useEffect(()=>{\n // Strip \"value\" from props for the file input because we're spreading \n // this to a dom element and value is a File object for files,\n // which causes a huge error to try and assign as an attribute.\n // our current linter doesnt like using destructuring to do this so we can\n // implement a way more complex deep-copy if we want but GC should handle this fine.\n // eslint-disable-next-line no-unused-vars\n const {value, ...rest} = props \n updateDomSafeProps(rest)\n }, [props])\n\n useEffect(()=>{\n if(showClose !== !!props.value){\n updateShowClose(!showClose);\n }\n }, [props.value,showClose])\n\n useEffect(() => {\n if(props.onChange) props.onChange({ target: fileRef.current });\n // TODO: react-hooks/exhaustive-deps dictates that \"props.onChange\" (or a destructured reference) \n // should be in this dependency array, but if you do that right now, it causes a render loop, because \n // somewhere up the chain the props.onChange method itself changes, causing it to just loop forever.\n // for now, ignoring this.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [destroyKey])\n \n const closeIcon = {\n position: 'absolute',\n background: 'transparent',\n border: 'none',\n top: '50%',\n transform: 'translateY(-10%)',\n right: '10px',\n svg: {\n scale: '0.5'\n }\n }\n\n const reset = () => {\n destroy(destroyKey+1);\n }\n\n return (\n \n \n {showClose && }\n \n )\n};\nconst TextArea = (props) => ;\n\nFormInput.defaultProps = {\n type: \"text\",\n label: \"\",\n name: \"input\",\n value: \"\",\n required: false,\n placeholder: \"\",\n builtinError: false,\n boxed: false\n};\n\nFormInput.propTypes = {\n type: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.string,\n required: PropTypes.bool,\n children: PropTypes.node,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n builtinError: PropTypes.bool,\n boxed: PropTypes.bool,\n multiple: PropTypes.object,\n};\n\nFileInput.propTypes = {\n value: PropTypes.any,\n onChange: PropTypes.func\n};\n\nexport default FormInput;\n","import { Link } from \"react-router-dom\";\nimport Text from \"@/base/Text\";\nimport Header from \"@/base/Header\";\nimport Form from \"@/base/Form\";\nimport FormInput from \"@/base/FormInput\";\nimport FieldError from \"@/base/FieldError\";\nimport {US_STATES} from \"@util/constants.js\";\nimport {useState} from \"react\";\nimport {css} from \"@emotion/react\";\nimport { rem } from \"@util/convertUnits\";\n\nconst RequestServiceForm = () => {\n\n const [, setFormData] = useState({})\n const [formIsComplete, setFormIsComplete] = useState(false);\n\n\n const commentCss = css(`\n textarea {\n height:10em;\n } \n `);\n\n const containerCss = css(`\n width: 100%;\n max-width: ${rem(800)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const formCss = css(`\n width: 100%;\n max-width: ${rem(520)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const smWrap = css(`\n max-width: 39.8rem;\n margin-left: auto;\n margin-right: auto;\n `);\n\n if (formIsComplete) {\n return (\n
\n Thank You\n \n We would like to take this opportunity to thank you for your business. \n Our goal is to provide a service experience that exceeds your expectations.\n \n \n Your service inquiry has been received and the details of your request are being reviewed. \n You will be contacted by a LaCantina Doors Customer Service Representative by the end of the next business day.\n \n For immediate assistance please feel free to contact the LaCantina Doors’ Customer Service department directly using the csr@lacantinadoors.com or call (888) 221-0141.\n \n Sincerely, \n \n LaCantina Doors\n \n
\n );\n }\n\n return (\n <>\n
\n \n LaCantina Doors has comprehensive technical, installation adjustment,\n and troubleshooting resources readily available: See our{\" \"}\n Installation resources and{\" \"}\n Technical Documents. We\n encourage customers to refer to these resources prior to contacting us\n or your LaCantina Doors Dealer. Services outside of LaCantina\n Doors' warranty will be subject to a service fee.\n \n \n Most issues encountered can be resolved quickly. And most dealers and\n distributors of LaCantina Products have factory-trained Certified\n Installers and service technicians who can provide onsite suport.\n LaCantina also has factory-trained Independent Certified Installers\n and technicians in various areas to support your service needs.\n \n \n For those issues that cannot be resolved easily and require additional\n assistance, please complete the Customer Service Request Form and fax\n to the dealer where you purchased your LaCantina product or submit to\n LaCantina Doors.\n \n
\n \n LaCantina™ Doors will only share your information with select\n Preferred Dealers for the purpose of responding to your request.\n \n \n Your privacy is important to us. Please review the LaCantina™ Doors{\" \"}\n Privacy Policy\n \n
\n Thank you for your interest in LaCantina Doors.\n Your request for a quote has been submitted and you will be contacted by a LaCantina Doors Inside Sales Representative or an Authorized LaCantina Doors Dealer Representative within the next 2 business days.\n If you have additional questions, please contact us at sales@lacantinadoors.com or call us at 888-221-0141.\n \n Sincerely, \n \n LaCantina Doors\n \n
\n );\n }\n\n return (\n <>\n
\n \n Complete the steps below, and a LaCantina Doors representative will\n assist you.\n \n
\n
\n \n
\n \n );\n};\n\nexport default RequestQuoteForm;\n","import {useState} from \"react\";\nimport {css} from \"@emotion/react\";\n\nimport { Link } from \"react-router-dom\";\nimport Text from \"@/base/Text\";\nimport Header from \"@/base/Header\";\nimport Form from \"@/base/Form\";\nimport FormInput from \"@/base/FormInput\";\nimport FieldError from \"@/base/FieldError\";\nimport { rem } from \"@util/convertUnits\";\n\nconst ContactUsForm = () => {\n\n const roles = [\n {\n label: \"Homeowner\",\n value: \"homeowner\",\n },\n {\n label: \"Builder/Contractor\",\n value: \"builder_contractor\",\n },\n {\n label: \"Architect/Designer\",\n value: \"architect_designer\",\n },\n {\n label: \"Dealer\",\n value: \"dealer\",\n },\n {\n label: \"Other\",\n value: \"other\",\n },\n ];\n\n const [, setFormData] = useState({})\n const [formIsComplete, setFormIsComplete] = useState(false);\n\n const stepText = css(`\n text-align:center;\n margin-top:3em;\n `);\n\n const containerCss = css(`\n width: 100%;\n max-width: ${rem(800)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const formCss = css(`\n width: 100%;\n max-width: ${rem(520)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const smWrap = css(`\n max-width: 39.8rem;\n margin-left: auto;\n margin-right: auto;\n `);\n\n\n if (formIsComplete) {\n return (\n
\n Request received. Thank you.\n We will be in touch within two business days to assist you.\n Also note: we’ve sent you an email to confirm the information you’ve provide.\n \n Continue exploring LaCantina Doors\n
\n );\n }\n\n return (\n <>\n
\n \n Complete the steps below, and a LaCantina Doors representative will\n assist you.\n \n
\n Thank You\n We have received your submission.\n
\n );\n }\n\n return (\n \n );\n};\n\nexport default BecomeDealerForm;\n","import { css } from \"@emotion/react\";\nimport { rem } from \"@util/convertUnits\";\nimport Header from \"@/base/Header\";\nimport Kicker from \"@/base/Kicker\";\nimport Text from \"@/base/Text\";\nimport GenericPageBanner from \"@/core/common/GenericPageBanner\";\n\nimport BecomeDealerForm from \"./components/BecomeDealerForm\";\nimport FormPrivacyPolicy from './components/FormPrivacyPolicy';\nimport HelmetBuilder from \"@/base/HelmetBuilder\";\n\nconst BecomeDealerFormPage = () => {\n\n const containerCss = css(`\n width: 100%;\n max-width: ${rem(800)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const formCss = css(`\n width: 100%;\n max-width: ${rem(520)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const buildMeta = () => {\n\n let data = {\n title: `Request a Quote | LaCantina Doors`,\n description: `Request a Quote`,\n keywords: 'BiFold Doors, Accordion, Folding Glass, Multi Slide, Swing Doors & Windows!',\n }\n\n return \n }\n\n return (\n
\n {buildMeta()}\n \n Professionals\n Become a Dealer\n \n\n
\n
\n \n The demand for LaCantina Doors is growing rapidly and we are\n interested in expanding our dealer base. LaCantina Doors is looking\n for experienced window and door sales organizations to represent our\n product.\n \n \n If you are interested in becoming a LaCantina Doors Dealer or would\n like additional information, please fill out the following form.\n \n
\n\n
\n \n \n
\n\n
\n
\n );\n};\n\nexport default BecomeDealerFormPage;\n","import RequestServiceFormPage from \"./RequestServiceFormPage\";\nimport RequestQuoteFormPage from \"./RequestQuoteFormPage\";\nimport ContactUsFormPage from \"./ContactUsFormPage\";\nimport BecomeDealerFormPage from \"./BecomeDealerFormPage\";\n\n// routes to form pages\nexport default [\n { path: \"/request-quote\", component: RequestQuoteFormPage },\n { path: \"/request-service\", component: RequestServiceFormPage },\n { path: \"/contact-us\", component: ContactUsFormPage },\n { path: \"/become-dealer\", component: BecomeDealerFormPage },\n];\n","\nimport Header from \"@/base/Header\";\nimport Kicker from \"@/base/Kicker\";\nimport GenericPageBanner from \"@/core/common/GenericPageBanner\";\nimport FormPrivacyPolicy from './components/FormPrivacyPolicy';\nimport { css } from \"@emotion/react\";\nimport { rem } from \"@util/convertUnits\";\nimport { useEffect } from \"react\";\nimport RequestQuoteForm from \"./components/RequestQuoteForm\";\nimport HelmetBuilder from \"@/base/HelmetBuilder\";\n\nconst RequestQuoteFormPage = () => {\n\n\n const formCss = css(`\n width: 100%;\n max-width: ${rem(520)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n // const frameStyle = css(`\n // margin: 0 auto;\n // display: block;\n // `)\n\n const buildMeta = () => {\n\n let data = {\n title: `Request a Quote | LaCantina Doors`,\n description: `Request a Quote`,\n keywords: 'BiFold Doors, Accordion, Folding Glass, Multi Slide, Swing Doors & Windows!',\n }\n\n return \n }\n\n useEffect(() => {\n const script = document.createElement(\"script\");\n script.src = `https://jeldwen.tfaforms.net/js/iframe_resize_helper.js`;\n document.body.appendChild(script);\n return () => {\n script.parentNode.removeChild(script);\n }\n }, [])\n\n return (\n
\n {buildMeta()}\n \n LaCantina Doors\n Request a Quote\n \n\n
\n \n {/* */}\n
\n \n
\n
\n
\n );\n};\nexport default RequestQuoteFormPage;\n","\nimport { css } from \"@emotion/react\";\nimport { rem } from \"@util/convertUnits\";\nimport Header from \"@/base/Header\";\nimport Kicker from \"@/base/Kicker\";\nimport GenericPageBanner from \"@/core/common/GenericPageBanner\";\nimport RequestServiceForm from \"./components/RequestServiceForm\";\nimport FormPrivacyPolicy from './components/FormPrivacyPolicy';\nimport HelmetBuilder from \"@/base/HelmetBuilder\";\n\nconst RequestServiceFormPage = () => {\n\n const formCss = css(`\n width: 100%;\n max-width: ${rem(520)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n const buildMeta = () => {\n\n let data = {\n title: `Request Service | LaCantina Doors`,\n description: `Request Service`,\n keywords: 'BiFold Doors, Accordion, Folding Glass, Multi Slide, Swing Doors & Windows!',\n }\n\n return \n }\n\n return (\n
\n {buildMeta()}\n \n Support\n Customer Service Request\n \n\n
\n \n
\n \n
\n\n
\n
\n );\n};\nexport default RequestServiceFormPage;\n","import Header from \"@/base/Header\";\nimport Kicker from \"@/base/Kicker\";\nimport ContactUsForm from \"./components/ContactUsForm\";\nimport GenericPageBanner from \"@/core/common/GenericPageBanner\";\nimport FormPrivacyPolicy from './components/FormPrivacyPolicy';\nimport {css} from \"@emotion/react\";\nimport { rem } from \"@util/convertUnits\";\n\n\nconst ContactUsFormPage = () => {\n\n const formCss = css(`\n width: 100%;\n max-width: ${rem(520)};\n margin-left: auto;\n margin-right: auto;\n `);\n\n return (\n
\n \n About\n Send a Question or Comment\n \n\n
\n\n \n
\n \n
\n\n
\n
\n );\n};\nexport default ContactUsFormPage;\n","import React, { Suspense, lazy } from 'react';\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Switch, Route, Redirect, useLocation } from \"react-router-dom\";\n\nimport PageHeader from \"./PageHeader\";\nimport PageBody from \"./PageBody\";\nimport PageFooter from \"./PageFooter\";\nimport EntityFetcher from \"@/core/EntityFetcher\";\nimport { ProductContext } from \"@/core/providers/ProductContext\";\n\nconst ProductsPage = lazy(() => import(\"./products/ProductsPage\"));\nconst DocumentCenterPage = lazy(() => import(\"./documents/DocumentCenterPage\"));\nconst ImageGalleryPage = lazy(() => import(\"./gallery/ImageGalleryPage\"));\nconst VideoGalleryPage = lazy(() => import(\"./gallery/VideoGalleryPage\"));\nconst VideoGalleryDetailPage = lazy(() => import(\"./gallery/VideoGalleryDetailPage\"));\nconst BlogDetailPage = lazy(() => import(\"./blog/BlogDetailPage\"));\nconst SearchPage = lazy(() => import(\"./search/SearchPage\"));\nconst PDFViewer = lazy(() => import(\"./pdfViewer/PdfViewer\"));\nconst FormassemblyDemoPage = lazy(() => import(\"./forms/FormassemblyDemoPage\"));\n\nimport formRoutes from \"./forms\";\nimport { BreadcrumbContext } from \"@/core/providers/BreadcrumbContext\";\n\nconst routes = [\n { path: \"/\", component: EntityFetcher },\n { path: \"/404\", component: EntityFetcher },\n { path: \"/products/folding-doors\", component: EntityFetcher },\n { path: \"/products/sliding-doors\", component: EntityFetcher },\n { path: \"/products/swing-doors\", component: EntityFetcher },\n { path: \"/products/screens\", component: EntityFetcher },\n { path: \"/products/:slug+\", component: ProductsPage },\n { path: \"/support/technical-documents\", component: DocumentCenterPage },\n { path: \"/image-gallery/category/:category\", component: ImageGalleryPage },\n { path: \"/image-gallery\", component: ImageGalleryPage },\n { path: \"/video-gallery/category/:category\", component: VideoGalleryPage },\n { path: \"/video-gallery\", component: VideoGalleryPage },\n { path: \"/video-gallery/:slug\", component: VideoGalleryDetailPage },\n { path: \"/blog/*\", component: BlogDetailPage },\n { path: \"/learn/featured-projects/*\", component: BlogDetailPage },\n { path: \"/news/*\", component: BlogDetailPage },\n { path: \"/search\", component: SearchPage },\n { path: \"/search/content/:type?/:term?\", component: SearchPage },\n { path: \"/search/:term?\", component: SearchPage },\n { path: \"/pdfViewer\", component: PDFViewer },\n { path: \"/formassembly-demo\", component: FormassemblyDemoPage },\n].concat(formRoutes);\n\n\nconst previewRoutes = [\n { path: \"/preview/products/folding-doors\", component: EntityFetcher },\n { path: \"/preview/products/sliding-doors\", component: EntityFetcher },\n { path: \"/preview/products/swing-doors\", component: EntityFetcher },\n { path: \"/preview/products/screens\", component: EntityFetcher },\n { path: \"/preview/products/:slug*\", component: ProductsPage },\n { path: \"/preview/news/*\", component: BlogDetailPage },\n { path: \"/preview/blog/*\", component: BlogDetailPage },\n { path: \"/preview/learn/featured-projects/*\", component: BlogDetailPage },\n { path: \"/preview/*\", component: EntityFetcher },\n]\n\nexport default function PageLayout() {\n let location = useLocation();\n const previousLocation = useRef();\n const [showHeaderFooter, setShowHeaderFooter] = useState(true);\n\n // This is the \"app-wide\" variable that hold the value for the last product page visited. \n // Normally it only comes up on product pages themselves, but this is up here\n // and uses a context so that any part of the site is able to read and react to there being\n // a product \"loaded\".\n const [product, setProduct] = useState(null);\n const [breadcrumbs, setBreadcrumbs] = useState(null);\n\n\n const onRouteChange = useCallback(() => {\n\n // push analytics page change event\n if (location.pathname !== '/support/technical-documents' && !location.pathname.includes('/search/')) {\n\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'virtualPageview', // name of the event. In this case, it always must be virtualPageview\n page_url: location.pathname, // the URI of the page, including query strings and fragment identifiers\n page_title: document.title, // friendly name of the page\n }); \n\n }\n\n // scroll back to top o f page\n window.scrollTo(0, 0);\n\n // check if pdfview to exclude header/footer\n const excludedRoutes = [\"/pdfViewer\"]; // Add other routes where you want to exclude the header and footer\n setShowHeaderFooter(!excludedRoutes.includes(location.pathname));\n\n }, [location]);\n\n useEffect(() => {\n // look for actual page changes, not query changes (i.e. doc center)\n if (location.pathname !== previousLocation.current) {\n onRouteChange();\n }\n previousLocation.current = location.pathname;\n }, [location, onRouteChange]);\n\n return (\n <>\n \n \n \n {showHeaderFooter && }\n \n\n }>\n\n \n\n {previewRoutes.map((r) => {\n const Component = r.component;\n return (\n \n \n \n );\n })}\n\n\n {routes.map((r) => {\n const Component = r.component;\n return (\n \n \n \n );\n })}\n\n \n \n \n\n \n \n \n\n \n \n \n \n\n \n\n \n {showHeaderFooter && }\n \n \n \n\n\n \n );\n}\n","import AppContainer from \"./AppContainer\";\nimport PageLayout from \"./pages\";\n\n// - post-bootstrap \"entry view\" component\nconst AppMain = () => (\n \n \n \n);\n\nexport default AppMain;\n","import { StrictMode, useEffect } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport AOS from \"aos\";\n\nimport { CacheWrapper, EmotionCacheProvider } from './components/core/providers/EmotionCacheManager';\n\nimport AppMain from \"./components/AppMain\";\n\nconst App = () => {\n\n useEffect(() => {\n AOS.init({\n delay: 200, // values from 0 to 3000, with step 50ms\n duration: 1000,\n once: true,\n disable: navigator.userAgent.toLowerCase().indexOf('prerender') !== -1\n });\n window.AOS = AOS;\n }, []);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport default App;\n\n// only bootstrap on browser\n(() => {\n process.env.NODE_ENV !== \"test\" && //eslint-disable-line no-undef\n ReactDOM.render(, document.getElementById(\"app\"));\n})();\n","import PropTypes from \"prop-types\";\nimport React, {useEffect, useState, useCallback,useRef} from 'react';\n\nconst getWindowData = () => {\n let w = window,\n d = document,\n e = d.documentElement,\n g = d.getElementsByTagName('body')[0];\n\n let width = w.innerWidth || e.clientWidth || g.clientWidth;\n let height = w.innerHeight || e.clientHeight || g.clientHeight;\n\n let windowData = {\n width: width,\n height: height,\n orientation: width > height ? 'landscape' : 'portrait',\n };\n\n return windowData;\n}\n\nconst cmsImageFolders = [2560,1920,1440,1024,575,320,120];\n\nconst CmsImageLoader = (props) => {\n\n const [windowSize, setWindowSize] = useState();\n const [inView, setInView] = useState(false);\n const [imageSrc, setImageSrc] = useState();\n const resizeEvt = useRef();\n const imageEl = useRef();\n const stylesOverride = props.stylesOverride;\n const alt = props.alt;\n\n /** Establish a function to watch for a window resize **/\n\n const resizeCheck = useCallback(()=>{\n\n clearTimeout(resizeEvt.current);\n resizeEvt.current = setTimeout(() => {\n\n let updatedData = getWindowData();\n if (!windowSize || updatedData.width !== windowSize.width || updatedData.height !== windowSize.height) {\n\n /** updating a state variable will trigger the parent container ref recalculation **/\n setWindowSize(updatedData)\n }\n\n }, 500);\n\n },[setWindowSize,windowSize]);\n\n /** Add your event listeners to run your resize function **/\n\n useEffect(()=>{\n\n window.addEventListener('resize', resizeCheck);\n window.addEventListener('orientationchange', resizeCheck);\n\n resizeCheck();\n\n return ()=>{\n window.removeEventListener('resize', resizeCheck);\n window.removeEventListener('orientationchange', resizeCheck);\n }\n\n },[resizeCheck]);\n\n /** Calculate our parent container dimensions **/\n\n const calculateParent = (el) => {\n\n if(el){\n\n /** set our inview detector element, empty div is fine **/\n imageEl.current = el;\n\n // /** initialize our intersection observer - Nice to have **/\n // initObserver()\n\n /** get the parent dimensions that will hold the image **/\n let parentDims = el.parentNode.getBoundingClientRect();\n\n /** background cover images need a little space outside of their box **/\n let variance = parentDims.height > parentDims.width ? 1.5 : 1;\n let width = parentDims.width * variance;\n if(props.size) width = width * props.size; // flex row items parent may be full window\n\n /** find the last folder larger than the parent width **/\n let newSize = '2560';\n cmsImageFolders.map((size)=>{\n if(width < size) newSize = size;\n })\n\n /** update source url **/\n let isOriginal = props.url.includes('/original/',0);\n let isExtraLarge = props.url.includes('/2560/',0)\n let swap = isOriginal ? '/original/' : (isExtraLarge ? '/2560/' : '');\n let newSource = props.url.replace(swap,`/${newSize}/`);\n\n if(newSource !== imageSrc){\n setImageSrc(newSource)\n }\n\n }\n\n }\n\n // /** first attempt at intersection observer, needed to detect PRIOR to intersection since we are using AOS to\n // * animate some image in, so the images need to be rendered before entering view or there is a jump\n // * in the animation\n // */\n //\n // const initObserver = () => {\n //\n // let observer = new IntersectionObserver((entry)=>{\n // if(entry[0].isIntersecting){\n // setInView(true);\n // observer.unobserve(imageEl.current);\n // }\n // }, { root: null });\n //\n // observer.observe(imageEl.current);\n //\n // }\n\n /** calculate if element in viewport, this may need to be fine tuned in the strange case that a user refreshes\n * from the bottom of the page and scrolls up. The dom elements won't render until you get close to the viewport,\n * but that means a jump of content as image spaces render and push content down **/\n\n const isElementInViewport = useCallback(() => {\n\n let rect = imageEl.current.getBoundingClientRect();\n let windowHeight = (window.innerHeight || document.documentElement.clientHeight);\n\n let margin = 100; // may look into adding value of data-aos-offset if used\n\n let hasEntered = (\n rect.top > 0 && rect.top < (windowHeight+margin) ||\n rect.bottom > -margin\n );\n\n if(!inView && hasEntered) {\n setInView(true);\n window.removeEventListener('scroll', isElementInViewport);\n }\n\n }, [setInView, inView]);\n\n /** Add your event listeners to detect if element is in view **/\n\n useEffect(()=>{\n\n window.addEventListener('scroll', isElementInViewport);\n\n isElementInViewport();\n\n return ()=>{\n window.removeEventListener('scroll', isElementInViewport);\n }\n\n },[isElementInViewport]);\n\n const getAttributes = () => {\n\n let attrs = {...props}\n\n /** remove flags **/\n delete attrs.url;\n delete attrs.background;\n delete attrs.alt; // prop set directly on img tag or linting errors\n delete attrs.stylesOverride;\n delete attrs.dimensions;\n\n\n return attrs;\n\n }\n\n const calcDimensions = (e) => {\n if(props.dimensions){\n props.dimensions(e.target.width,e.target.height)\n }\n }\n\n\n /** If we have a proper image source and in viewport, load our image **/\n\n const renderImage = () => {\n\n let attrs = {\n ref:(el)=>calculateParent(el),\n ...getAttributes()\n };\n\n if(props.loading){\n attrs.loading = props.loading;\n }\n\n if(!(inView && imageSrc)){\n return \n } else {\n return props.background ?\n :\n \n }\n\n }\n\n return renderImage()\n\n\n};\n\nCmsImageLoader.propTypes = {\n url: PropTypes.string.isRequired,\n alt: PropTypes.string,\n size: PropTypes.number,\n background: PropTypes.bool,\n dimensions: PropTypes.func,\n loading: PropTypes.string,\n};\n\nexport default CmsImageLoader\n","import { useTheme } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport useBreakpoints from \"../../util/breakpoints\";\n\nconst Header = ({ color, tag, tagStyle, align, style, children, css }) => {\n const theme = useTheme();\n\n let tagStyleSet = tagStyle;\n if (tagStyleSet === \"\") { tagStyleSet = tag; }\n\n const breakCss = useBreakpoints()({\n fontSize: theme.typography[tagStyleSet].sizes,\n margin: theme.typography[tagStyleSet].margin\n });\n\n const rootCss = {\n fontFamily: theme.typography[tagStyleSet].fontFamily,\n fontWeight: theme.typography[tagStyleSet].fontWeight,\n letterSpacing: theme.typography[tagStyleSet].letterSpacing,\n color: theme.colors.text[color][theme.variant],\n textAlign: align,\n };\n\n const Tag = tag;\n return {children};\n};\n\nHeader.defaultProps = {\n tag: \"h2\",\n tagStyle: \"\",\n color: \"based\",\n align: \"left\",\n style: [],\n};\n\nHeader.propTypes = {\n tag: PropTypes.oneOf([\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"\"]),\n tagStyle: PropTypes.oneOf([\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"\"]),\n color: PropTypes.oneOf([\n \"brand\",\n \"primary\",\n \"base\",\n \"based\",\n \"secondary\",\n \"success\",\n \"error\",\n \"warning\",\n \"info\",\n ]),\n align: PropTypes.string,\n children: PropTypes.node,\n css: PropTypes.array,\n\n style: PropTypes.oneOfType([\n PropTypes.array,\n PropTypes.object\n ])\n};\n\nexport default Header;\n","import { useEffect, useState } from 'react';\nimport PropTypes from \"prop-types\";\nimport { Helmet } from 'react-helmet-async';\nimport { getCanonicalUrl } from \"@/helpers/canonicalBuilder\";\nimport { useSchema } from \"@/core/providers/SchemaContext\";\n\nconst HelmetBuilder = ({ data, preview }) => {\n\n const title = data.metaTitle || data.title;\n const description = data.metaDescription || data.description || 'High quality, innovative bifold, accordion, multi slide, swing and sliding doors and windows from LaCantina create an indoor/outdoor experience offering unmatched performance & value with energy efficiency';\n const keywords = data.metaKeywords || data.keyword || 'BiFold Doors, Accordion, Folding Glass, Multi Slide, Swing Doors & Windows!';\n const canonical = getCanonicalUrl(data.canonicalUrl);\n \n // Meta noIndex value from the CMS (defaults to false if not set)\n const noIndex = data.metaNoIndex || false;\n \n const [ogImage, setOgImage] = useState(\"https://www.lacantinadoors.com/images/common-icons/LaCantina_Logo.svg\");\n\n useEffect(() => {\n\n setTimeout(() => {\n let pageMain = document.getElementsByClassName('main');\n if(pageMain[0]) {\n let firstImage = pageMain[0].querySelector('img');\n if(firstImage) setOgImage(firstImage.src);\n }\n \n }, 1000); // wait for paint... because we also had to wait for data to load...\n \n }, [data]); // waiting for data or else we get the page loader as our image...\n\n const { compiledSchemaFunc, fullSchema } = useSchema();\n\n useEffect(() => {\n\n const fetchData = async () => {\n try {\n await compiledSchemaFunc(data, title, description, canonical);\n } catch (error) {\n console.error(\"Failed to fetch data:\", error);\n // Optionally handle error, for example, by setting an error state\n }\n };\n \n fetchData();\n\n }, [data, title, description, canonical, compiledSchemaFunc ]);\n\n return (\n \n {title}\n \n \n \n \n {/* Conditionally render the robots meta tag based on noIndex or preview */}\n {(noIndex || preview) && (\n \n )}\n \n \n\n {/*-- SOCIAL SHARE CARDS --*/}\n \n \n \n \n \n {/*-- Linked In (optional) --*/}\n \n {/*-- Additional Twitter Card meta tags (optional) --*/}\n \n \n \n \n {/*-- Pinterest (optional) --*/}\n {/* */}\n\n \n )\n\n}\n\nHelmetBuilder.propTypes = {\n data: PropTypes.object,\n preview: PropTypes.bool,\n};\n\nexport default HelmetBuilder;","export const getCanonicalUrl = (cmsCanonical) => {\n\n // Get the current URL\n var currentUrl = window.location.href;\n\n // Ensure the current URL contains 'www', if it doesn't, add it. Client wants to ensure www is part of the canonical URL\n if (currentUrl.indexOf('www.') === -1) {\n currentUrl = currentUrl.replace(/^(https?:\\/\\/)/, '$1www.');\n }\n\n // If cmsCanonical is empty or undefined, return the full path of the current URL\n if (!cmsCanonical) {\n return currentUrl;\n }\n\n // Parse the current URL\n var currentUrlObj = new URL(currentUrl);\n\n // Parse the cmsCanonical\n var cmsCanonicalObj = new URL(cmsCanonical, currentUrl);\n\n // Check if cmsCanonical is a relative path\n if (!cmsCanonicalObj.hostname) {\n // If it's a relative path, combine it with the current URL's origin\n return currentUrlObj.origin + cmsCanonical;\n }\n\n // If cmsCanonical has a valid hostname (domain), ensure it contains 'www' and use it as the canonical URL\n // this will look strange on non production environments but they want to ensure the www is there\n // ie. https://www.lacantina.jeld-wen.local/products/sliding-doors -- there is no www.lacantina.jeld-wen.local\n // it is just mirroring my local url\n var userInputHostname = cmsCanonicalObj.hostname;\n if (userInputHostname.indexOf('www.') === -1) {\n userInputHostname = 'www.' + userInputHostname;\n }\n\n return cmsCanonicalObj.protocol + '//' + userInputHostname + cmsCanonicalObj.pathname;\n}\n","import PropTypes from \"prop-types\";\nimport { useTheme } from \"@emotion/react\";\nimport useBreakpoints from \"@util/breakpoints\";\n\nconst Kicker = ({ children, color, styles, stylesOverride }) => {\n const theme = useTheme();\n\n const breakCss = useBreakpoints()({\n color: theme.colors.text[color][theme.variant],\n ...theme.typography.kicker,\n });\n\n return
\n \n {tileContent.description}\n ![{'LOADING...'}/](\"/images/tail-spin.gif\")
;\n\nexport default LoadingSpinner;\n","import PropTypes from \"prop-types\";\nimport {useTheme} from \"@emotion/react\";\nimport useBreakpoints from \"@util/breakpoints\";\nimport CmsImageLoader from \"../../base/CmsImageLoader\";\n\nconst GenericPageBanner = ({image, children, noGap, localImage}) => {\n const theme = useTheme();\n\n const bannerCss = useBreakpoints([theme.breakpoint.ns])({\n position: \"relative\",\n width: '100%',\n minHeight: \"45rem\",\n paddingTop: [\"0\", \"36%\"], // (3:4), (450px height at 1500px width)\n });\n \n const bannerImg = useBreakpoints([theme.breakpoint.ns])({\n position: [\"relative\", \"absolute\"],\n left: \"0\",\n top: \"0\",\n width: \"100%\",\n height: \"100%\",\n minHeight: \"45rem\",\n objectFit: \"cover\",\n backgroundColor: theme.colors.background.secondary[theme.variant],\n \n \"img\": {\n width: \"100%\",\n height: \"100%\",\n minHeight: \"45rem\",\n objectFit: \"cover\",\n },\n\n \"span\": {\n position: \"absolute\",\n left: \"0\",\n top: \"0\",\n display: [\"none\", \"block\"],\n width: \"100%\",\n height: \"100%\",\n backgroundImage: \"linear-gradient(to top, rgba(255,255,255,0) 0, rgba(255,255,255,0.7) 0%, rgba(255,255,255, 1%) 33%)\",\n }\n });\n \n const bannerCard = useBreakpoints([theme.breakpoint.ns])({\n position: [\"relative\", \"absolute\"],\n bottom: [\"initial\", \"3rem\"],\n left: [\"initial\", \"0\"],\n width: \"100%\",\n \n \"> div\": { // kicker\n textTransform: \"uppercase\",\n },\n \n \"h1\": { // header\n marginBottom: \"0\",\n textTransform: [\"initial\", \"uppercase\"],\n }\n });\n\n return (\n