LOADING ...
;\r\n}\r\n\r\nBuildHelper.propTypes = {\r\n buildId: PropTypes.string.isRequired\r\n}\r\n\r\nexport default BuildHelper","import ReactHtmlParser from 'react-html-parser';\r\nimport { getLang, getProvince } from '../utils';\r\n\r\nexport default class NavHelper {\r\n\tgetDealerId() {\r\n\t\t//summaryCalculator.getDealerVars() ? summaryCalculator.getDealerVars().dealerId : null;\r\n\t\tif (window.bnp_retailer_mode && sessionStorage.getItem('bnp_dealerVars')) {\r\n\t\t\tconst dealerVars = JSON.parse(sessionStorage.getItem('bnp_dealerVars'));\r\n\t\t\treturn dealerVars.dealerId;\r\n\t\t}\r\n\r\n\t\treturn null;\r\n\t}\r\n\tgetUrlSlug(returnDef) {\r\n\t\tlet summaryCalculator = window.summaryCalculator;\r\n\r\n\t\tconst year = returnDef ? '' : summaryCalculator.selectedVehicle.year;\r\n\t\tconst carline = returnDef ? '' : summaryCalculator.selectedVehicle.carline;\r\n\t\tconst trim = returnDef ? '' : summaryCalculator.selectedVehicle.trim ?? summaryCalculator.AvailableTrim.trims[0].trim_type.url_slug;\r\n\t\tconst dealerId = this.getDealerId();\r\n\t\tlet model = '';\r\n\t\tlet packageCode = '';\r\n\t\t\r\n\t\tmodel = summaryCalculator.selectedVehicle.model === null ? '' : summaryCalculator.selectedVehicle.model;\r\n\t\t//model = model === '' ? summaryCalculator.AvailableTrim.trims[0].financial.based_on.model_code : '';\r\n\r\n\t\tpackageCode = summaryCalculator.selectedVehicle.packageCode === null ? '' : summaryCalculator.selectedVehicle.packageCode;\r\n\t\t//packageCode = packageCode === '' ? summaryCalculator.selectedVehicle.packageCode : '';\r\n\r\n\t\t//return `/${year}/${carline}?prov_code=${province}&lang_code=${lang}`; // trim\r\n\t\treturn `/${year}/${carline}/${trim}?prov_code=${getProvince()}&lang_code=${getLang()}${dealerId ? `&DealerID=${dealerId}` : ''}`; // engine and drivetrain\r\n\t\treturn `/${year}/${carline}/${trim}/${model}/${packageCode}?prov_code=${getProvince()}&lang_code=${getLang()}`; // package\r\n\t}\r\n\tgetNavContent( t, returnDef){\r\n\t\tlet summaryCalculator = window.summaryCalculator;\r\n\r\n\t\tconst currentStep = returnDef ? '' : summaryCalculator.CurrentStep;\r\n\t\tconst year = returnDef ? '' : summaryCalculator.selectedVehicle.year;\r\n\t\tconst carline = returnDef ? '' : summaryCalculator.selectedVehicle.carline;\r\n\t\tconst trim = returnDef ? '' : summaryCalculator.selectedVehicle.trim ?? summaryCalculator.AvailableTrim.trims[0].trim_type.url_slug;\r\n\r\n\t\tlet model = '';\r\n\t\tlet packageCode = '';\r\n\t\t\r\n\t\tmodel = summaryCalculator.selectedVehicle.model === null ? '' : summaryCalculator.selectedVehicle.model;\r\n\t\t//model = model === '' ? summaryCalculator.AvailableTrim.trims[0].financial.based_on.model_code : '';\r\n\r\n\t\tpackageCode = summaryCalculator.selectedVehicle.packageCode === null ? '' : summaryCalculator.selectedVehicle.packageCode;\r\n\t\t//packageCode = packageCode === '' ? summaryCalculator.selectedVehicle.packageCode : '';\r\n\r\n\t\tconst province = getProvince();\r\n\t\tconst lang = getLang();\r\n\t\tconst dealerId = this.getDealerId();\r\n\t\t\r\n\t\tconst navTranslation = [\r\n\t\t\t\"general:nav_trim\",\r\n\t\t\t\"general:nav_options\",\r\n\t \"general:nav_colour\",\r\n\t\t\t\"general:nav_wheels\",\r\n\t\t\t\"general:nav_connectivity\",\r\n\t\t\t\"general:nav_accessories\",\r\n\t\t\t\"general:nav_protection\",\r\n\t \"general:nav_payments\",\r\n\t \"general:nav_summary\",\r\n\t \"general:nav_start_over\",\r\n\t \"general:nav_start_over_mobile\"\r\n\t ];\r\n\t\tconst tabs = {\r\n\t\t\t'tabList': [\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[0])),\r\n\t\t\t\t\t\"active\": currentStep === 1,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}?prov_code=${province}&lang_code=${lang}${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[1])),\r\n\t\t\t\t\t\"active\": currentStep === 2,\r\n\t\t\t\t\t\"uri\": this.getUrlSlug(returnDef)\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[2])),\r\n\t\t\t\t\t\"active\": currentStep === 3,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/colours?prov_code=${province}&lang_code=${lang}${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[3])),\r\n\t\t\t\t\t\"active\": currentStep === 4,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/wheels?prov_code=${province}&lang_code=${lang}${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t\t},\r\n/*\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[4])),\r\n\t\t\t\t\t\"active\": currentStep === 5,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/connectivity?prov_code=${province}&lang_code=${lang}`\r\n\t\t\t\t},*/\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[5])),\r\n\t\t\t\t\t\"active\": currentStep === 6,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/accessories?prov_code=${province}&lang_code=${lang}${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t\t},\r\n/*\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[6])),\r\n\t\t\t\t\t\"active\": currentStep === 7,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/protections?prov_code=${province}&lang_code=${lang}`\r\n\t\t\t\t},*/\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[7])),\r\n\t\t\t\t\t\"active\": currentStep === 8,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/payments?prov_code=${province}&lang_code=${lang}${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"text\": ReactHtmlParser(t(navTranslation[8])),\r\n\t\t\t\t\t\"active\": currentStep === 9,\r\n\t\t\t\t\t\"uri\": `/${year}/${carline}/${trim}/${model}/${packageCode}/summary?prov_code=${province}&lang_code=${lang}${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t\t},\r\n\t\t\t],\r\n\r\n\t\t\t\"selectVehiclesLinkLink\": {\r\n\t\t\t\t\"textDesktop\": t(navTranslation[9]),\r\n\t\t\t\t\"textMobile\": t(navTranslation[9]),\r\n\t\t\t\t\"uri\": `/${dealerId ? `&DealerID=${dealerId}` : ''}`\r\n\t\t\t}\r\n\r\n\t\t}\r\n\t\treturn tabs;\r\n\t}\r\n}","\r\n// Open a modal.\r\nexport const openModal = (targetId, content) => {\r\n const modal = document.getElementById(targetId);\r\n if (modal) {\r\n modal.setAttribute('aria-hidden', 'false');\r\n // Focus the first element within the modal.\r\n const focusable_selectors = 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), *[tabindex]';\r\n modal.querySelector(focusable_selectors).focus();\r\n // Make the body unscrollable.\r\n document.body.classList.add('disabled');\r\n }\r\n}\r\n\r\n// Scroll to element using gsap (loaded in Core)\r\nexport const scrollTo = (options) => {\r\n if (window.gsap) {\r\n window.gsap.to(window, {\r\n duration: .5,\r\n scrollTo: options\r\n });\r\n } else {\r\n console.error('gsap is not found in scrollTo()');\r\n }\r\n}\r\n\r\n// Convert text to title case.\r\nexport const titleCase = (str) => {\r\n if (!str) return;\r\n return str.toLowerCase().split(' ').map(function(word) {\r\n return (word.charAt(0).toUpperCase() + word.slice(1));\r\n }).join(' ');\r\n}\r\n","import React from 'react';\r\n\r\nexport const Svg = ({ size, colour, svg_list, svg_classname, ...props }) => {\r\n const svgColour = colour != undefined ? `mz-svg--${colour}` : null;\r\n \r\n return (\r\n \r\n );\r\n};","/* global mzFunc, mzMenu, mzTabs */\r\n\r\nimport React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport PropTypes from 'prop-types';\r\nimport { useNavigate, useParams, useSearchParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport NavHelper from '../../../Helpers/navhelper';\r\nimport { openModal, scrollTo } from '../../../Helpers/helpers';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport { updateLanguageLink } from '../../../utils';\r\n\r\nexport const Nav = ({ summaryCalculator = window.summaryCalculator, nav, ...props }) => {\r\n const { t, i18n } = useTranslation(['general', 'summary']);\r\n\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n \r\n const gtmHelper = new GTMHelper();\r\n \r\n const navHelper = new NavHelper();\r\n const [step, setStep] = React.useState(summaryCalculator.CurrentStep)\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const [tabs, setTabs] = React.useState(nav != null ? nav.tabList : navHelper.getNavContent(t, true).tabList);\r\n const [activeTab, setActiveTab] = React.useState(tabs ?.filter(tab => tab.active === true)[0]);\r\n const [isMobile, setIsMobile] = React.useState(window.innerWidth < 1024);\r\n const navRef = React.useRef(null);\r\n const navigate = useNavigate();\r\n const [searchParams, setSearchParams] = useSearchParams();\r\n\r\n React.useEffect(() => {\r\n try {\r\n // When Nav is re-mounted, run sticky submenu init function in Core\r\n // unless it's already processed by Core/menu.js .\r\n const isStickySubmenuProcessed = navRef.current.classList.contains('js-processed');\r\n if (!isStickySubmenuProcessed) {\r\n if (window.mzMenu && window.mzMenu.triggerStickySubmenu !== undefined) {\r\n window.mzMenu.triggerStickySubmenu();\r\n }\r\n }\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n if(typeof mzFunc === 'object' && typeof mzTabs === 'object'){\r\n mzFunc.waitForEl('.mzBuildandPrice nav .mz-tabs').then(function(components){\r\n mzTabs.init(components);\r\n setTimeout(()=>{\r\n const subNav = document.querySelector('.App-container nav .mz-tabs-menu')\r\n if(subNav)\r\n mzTabs.adjustActiveTabPosition(subNav, subNav.querySelector('.active'));\r\n },500)\r\n });\r\n }\r\n reloadTabs();\r\n }, [nav])\r\n\r\n function reloadTabs() {\r\n //console.log('load data', nav)\r\n //if(summaryCalculator._allDataIsLoaded) setNav(navHelper.getNavContent(t)); // nav from parameter\r\n setTabs(nav != null ? nav.tabList : navHelper.getNavContent(t, true).tabList);\r\n setStep(summaryCalculator.CurrentStep);\r\n }\r\n\r\n\r\n React.useEffect(() => {\r\n reloadTabs();\r\n }, [summaryCalculator._allDataIsLoaded])\r\n\r\n React.useEffect(() => {\r\n reloadTabs();\r\n if(typeof mzMenu === 'object' && window.scrollY === 0){\r\n mzMenu.alertAni?.play();\r\n mzMenu.permAlertAni?.play();\r\n mzMenu.menuAni?.play();\r\n }\r\n //updateLanguageLink();\r\n }, [summaryCalculator.CurrentStep])\r\n\r\n function showNav() {\r\n //const selectVehiclesLinkLink = tabs;\r\n updateLanguageLink();\r\n \r\n const handleTabClick = (tabIndex) => {\r\n tabs.map(function (tab, index) {\r\n if (index === tabIndex) {\r\n tab.active = true;\r\n\r\n\r\n } else {\r\n tab.active = false;\r\n }\r\n return tab;\r\n });\r\n\r\n setTabs(tabs);\r\n setActiveTab(tabs.filter(tab => tab.active === true)[0]);\r\n if (isMobile) {\r\n if (isOpen) {\r\n setIsOpen(false);\r\n document.querySelector('body').classList.remove('disabled');\r\n } else {\r\n setIsOpen(true);\r\n document.querySelector('body').classList.add('disabled');\r\n }\r\n }\r\n\r\n if (tabs[tabIndex])\r\n navigate(tabs[tabIndex].uri);\r\n else // Gracefully recover to home /\r\n navigate('/');\r\n \r\n //HandleTabClick(tabs[tabIndex].uri)\r\n }\r\n const HandleClose = () => {\r\n setIsOpen(false);\r\n document.querySelector('body').classList.remove('disabled');\r\n }\r\n const handleResize = () => {\r\n setIsMobile(window.innerWidth < 1024);\r\n setIsOpen(false);\r\n document.querySelector('body').classList.remove('disabled');\r\n }\r\n\r\n window.addEventListener('resize', handleResize)\r\n\r\n const getCurrentActiveTabIndex = (tabs, activeTab) => {\r\n if (!tabs && !tabs.length > 0) return 0;\r\n return tabs.indexOf(activeTab) + 1;\r\n }\r\n\r\n function HandleSelectAVehicleClick(e) {\r\n e.preventDefault();\r\n document.querySelector('body').classList.remove('disabled');\r\n navigate(nav.selectVehiclesLinkLink.uri);\r\n }\r\n\r\n const handleOcaClick = (e) => {\r\n e.preventDefault();\r\n setIsOpen(false);\r\n document.querySelector('body').classList.remove('disabled');\r\n \r\n if (window.location.href.indexOf('/payments') > 0) {\r\n setSearchParams({'oca':''});\r\n setTimeout(() => {\r\n setSearchParams({'oca':'1'});\r\n }, 10);\r\n }else{\r\n navigate(nav.tabList[6].uri + '&oca=1');\r\n }\r\n const price = summaryCalculator._showFinancePrice ? summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebatesTaxed : summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFeesWithRebatesTaxed;\r\n gtmHelper.setGTM({'action':`OCA - Mobile Nav`,'year': year,'model': carline, 'trim': summaryCalculator.selectedVehicle.trim ?? summaryCalculator.AvailableTrim.trims[0].trim_type.url_slug, 'price' : Math.round(price)}, true, false);\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n\r\n }\r\n return (<>{showNav()})\r\n};\r\n\r\n// Nav.propTypes = {\r\n// HandleTabClick: PropTypes.func,\r\n// }\r\n\r\n// Nav.defaultProps = {\r\n// HandleTabClick: (uri) => {\r\n// },\r\n// };","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const Modal = ({modalContent, isOpen, modalId, handleClose, ...props }) => {\r\n const [isModalOpen, setIsModalOpen] = React.useState(isOpen);\r\n return (\r\n \r\n \r\n {!isMobile &&\r\n <>\r\n HandleClose()}>\r\n {t(\"close\")}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n }\r\n\r\n {isMobile &&\r\n <>\r\n
\r\n \r\n
\r\n \r\n {tabs.map((tab, index) => {\r\n return ( handleTabClick(index)}>\r\n {tab.text}\r\n )\r\n })}\r\n
\r\n \r\n
\r\n
- \r\n
- HandleSelectAVehicleClick(e)}>{nav ?.selectVehiclesLinkLink ?.textMobile}\r\n \r\n {tabs.map((tab, index) => {\r\n return (
- handleTabClick(index)}>\r\n {tab.text}\r\n {tab.active ?
- handleOcaClick(e)} title={t('summary:btn_apply_for_financing')}>\r\n \r\n\r\n : null}\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nModal.propTypes = {\r\n HandleTabClick: PropTypes.func,\r\n}\r\n\r\nModal.defaultProps = {\r\n handleClose: () => {\r\n },\r\n};","import React from 'react';\r\nimport { Svg } from '../Svg/Svg';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const Button = ({ primary, backgroundColor, label, disabled, icon, iconBefore, iconAfter, svg_className, colour, rotation, size, svg_list, ...props }) => {\r\n const mode = primary ? 'mz-btn--primary' : 'mz-btn--secondary';\r\n const disabling = disabled ? true : false;\r\n const before = iconBefore ? true : false;\r\n const after = iconAfter ? true : false;\r\n const displayIcon = icon ? true : false;\r\n // const iconBtn = icon ? true : false;\r\n //mz-link-icon-positon--right\r\n \r\n const btnBackground = backgroundColor != undefined ? `mz-btn--${backgroundColor}` : null ;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n { ReactHtmlParser (modalContent) }\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nTabsMenu.propTypes = {\r\n menus: PropTypes.array.isRequired,\r\n className: PropTypes.string,\r\n}","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser'; \r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport { getBaseUrl } from '../../../utils';\r\n\r\nexport const Modal_50_50 = ({title, copy, image, imageMobile, imageAlt, isOpen, modalId, setIsModalOpen, ...props }) => {\r\n const [modalImage, setModalImage] = React.useState(window.innerWidth < 768?imageMobile:image);\r\n const imagePath = getBaseUrl() + process.env.REACT_APP_BASIC_CONTENT_PATH;\r\n const handleResize = () =>{\r\n if(window.innerWidth < 768){\r\n setModalImage(imageMobile);\r\n } else {\r\n setModalImage(image);\r\n }\r\n }\r\n window.addEventListener('resize', handleResize);\r\n \r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n menuItems.map((menu) => (\r\n \r\n {menu.label}\r\n \r\n ))\r\n }\r\n
\r\n \r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default Modal_50_50;","import ReactHtmlParser from 'react-html-parser';\r\nimport { getLang } from '../utils';\r\n\r\nexport default class TooltipHelper {\r\n getTooltip(tooltip, incentives, vehicle, rate) {\r\n const language = getLang();\r\n\r\n const tooltips = {\r\n\t\t\t\"purchase_price\":{\r\n\t\t \"en\":`Price shown includes delivery charges (charge includes freight and pre-delivery inspection), dealer administration fee, levies, fees, and all applicable charges (excluding HST and/or GST/PST). Payments shown do not include applicable taxes. To see the vehicle’s total price or payments with sales tax, please click “include taxes in price option” in the payment breakdown or summary page. Charges may vary by Dealer. Please contact your local retailer for more information.`,\r\n\t\t \"fr\":`Le prix indiqué comprend les frais de livraison (pour le transport et l’inspection avant livraison), les frais de gestion du détaillant, les redevances, les droits et tous les frais applicables (à l’exception de la TVH et/ou de la TPS/TVP). Les versements indiqués ne comprennent pas les taxes applicables. Pour voir le prix total du véhicule ou les versements incluant la taxe de vente, veuillez cliquer sur l’option « Inclure les taxes dans le prix » sur la page des détails du prix ou du récapitulatif. Les frais peuvent varier selon le détaillant. Veuillez contacter votre détaillant pour plus d’informations.`\r\n\t\t },\r\n\t\t \"downpayment\":{\r\n\t\t \"en\":\"Lease down payment (with trade-in) may not reduce Capitalized Cost lower than $3,000 over Residual Value. Minimum balance to finance is $7,500.\",\r\n\t\t \"fr\":\"Pour une location (avec échange), l'acompte ne peut réduire le coût en capital plus bas que 3 000 $ au-dessus de la valeur résiduelle. Le solde minimum à financer est de 7 500 $.\"\r\n\t\t },\r\n\t\t\t\"detailedprice_mazdaprice\":{\r\n\t\t\t \"en\":\"This is the price of your vehicle. It includes any chosen options, plus any accessories you have selected. It excludes fees, levies, credits, down payment and taxes. This price is for informational purposes only and is not an offer. Certain changes (including specifications, prices and availability) may not be reflected. Price will include general freight (cost to move vehicle from factory to dealership) and PDI (Pre-Delivery Inspection - this includes inspection, washes and any top-ups of fluids). Your Mazda retailer may sell for less and is the best source for complete and current information.\",\r\n\t\t\t \"fr\":\"Il s'agit du prix de votre véhicule incluant les options choisies ainsi que les accessoires que vous avez sélectionnés. Il exclut les frais, les prélèvements, les crédits, l'acompte et les taxes. Ce prix est fourni à titre d'information seulement et ne constitue pas une offre. Certains changements (incluant les spécifications, les prix et la disponibilité) peuvent ne pas être reflétés. Le prix comprend les coûts de transport du véhicule de l'usine au détaillant et l'inspection prélivraison (incluant l'inspection finale, les lavages et les remplissages de liquides). Votre détaillant Mazda peut vendre à un prix inférieur et constitue la meilleure source d'information complète et à jour.\"\r\n\t\t },\r\n\t\t \"detailedprice_feesandlevies\":{\r\n\t\t\t\t\"en\":\"These are some of the fees and levies charged by Mazda and other regulators associated with your vehicle purchase. Your local retailer may charge additional fees, insurance, licence, sales taxes and, if applicable, lien registration as well as other fees and are not included.\",\r\n\t\t\t\t\"fr\":\"Il s'agit de certains des frais et prélèvements facturés par Mazda et d'autre organismes de réglementation associés à l'achat de votre véhicule. Votre détaillant pourrait exiger des frais supplémentaires. L'assurance, l'immatriculation, les taxes de vente et, le cas échéant, l'enregistrement de privilège ainsi que d'autres frais ne sont pas inclus.\"\t\t\t \r\n\t\t\t},\r\n\t\t\t\"detailedprice_taxes\":{\r\n\t\t\t \"en\":`Applicable sales tax included in the payment breakdown or summary are based on your location selection. Applicable taxes may vary. Please contact your local retailer for more information.`,\r\n\t\t\t \"fr\":`Les taxes de vente applicables incluses dans les détails du prix ou le récapitulatif varient selon l’emplacement sélectionné. Les taxes applicables peuvent varier. Veuillez contacter votre détaillant pour plus d’informations.`\r\n\t\t\t},\r\n\t\t\t\"detailedprice_credit\":{\r\n\t\t\t \"en\":\"Amounts in this section contribute to reducing the purchase price of your vehicle. Additionally, when you trade in a vehicle, you will receive a tax benefit as the amount you receive for your trade-in is used to reduce the purchase price before sales tax is applied.\",\r\n\t\t\t \"fr\":\"Les montants indiqués dans cette section contribuent à réduire le prix d'achat de votre véhicule. De plus, lorsque vous échangez un véhicule, vous bénéficiez d'un avantage fiscal, dans la mesure où le montant que vous recevez en échange de votre véhicule est utilisé pour réduire le prix d'achat avant l'application de la taxe de vente.\"\r\n\t\t\t},\r\n\t\t\t\"detailedprice_downpayment\":{\r\n\t\t\t \"en\":\"A down payment is the money you can choose to pay up front that will reduce the amount of money borrowed on a lease or finance purchase. The larger the down payment, the lower your individual payments will be.\",\r\n\t\t\t \"fr\":\"Un acompte est une somme d'argent que vous pouvez choisir de payer à l'avance et qui réduira le montant de l'argent emprunté pour une location ou un achat financé. Plus le montant de l'acompte est élevé, plus vos paiements individuels seront bas.\"\r\n\t\t },\r\n\t\t \"ev_rebate_federal\":{\r\n\t\t\t \"en\": `Federal Rebate: Incentives for Zero-Emission Vehicles Program (iZEV): Get up to ${incentives} towards the purchase of new ${vehicle}.`,\r\n\t\t\t \"fr\": `Rabais du gouvernement fédéral : Incitatif pour le programme des véhicules zéro émissions (IVZE) : Obtenez jusqu'à ${incentives} pour l'achat d'un nouveau ${vehicle}.`\r\n\t\t },\r\n\t\t\t\"ev_rebates_BC\":{\r\n\t\t\t\t\"en\": `Provincial Rebate: CleanBC Go Electric Vehicle Rebate Program: Get up to ${incentives} towards the purchase of a new ${vehicle}, and up to $350 to install a level 2 home charging station in a single-family home. \r\n
\r\n \r\n
\r\n \r\n {\r\n document.querySelector('html').classList.remove('inactive');\r\n setIsModalOpen(false)\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{ ReactHtmlParser (copy) }
\r\n Provincial Rebate:BC Hydro EV Charger Rebate Program: Up to $350 towards the purchase and installation of a level 2 home charging station.`,\r\n\t\t\t\t\"fr\": `Rabais du gouvernement provincial : Programme de rabais CleanBC Go Electric: Obtenez jusqu'à ${incentives} pour l'achat d'un nouveau ${vehicle}, et jusqu’à 350 $ pour installer une borne de recharge résidentielle de niveau 2 dans une maison unifamiliale.
Rabais du gouvernement provincial : BC Hydro EV Charger Rebate Program : Jusqu'à 350 $ pour l'achat et l'installation d'une borne de recharge à domicile de niveau 2.`\r\n\t\t \t},\r\n\t\t \t\"ev_rebates_NB\":{\r\n\t\t\t\t\"en\": `Provincial Rebate: Plug-In NB Rebate Program: Get up to ${incentives} towards the purchase of a new ${vehicle}.
Residents who receive a vehicle rebate through the Plug-In NB Rebate Program are eligible to claim 50% of the cost to purchase and install one new level 2 EV charger, up to a maximum of $750.`,\r\n\t\t \t\t\"fr\": `Rabais provincial : Programme NBranché : Obtenez jusqu’à
Les résidents qui bénéficient d’un rabais dans le cadre du programme NBranché peuvent également réclamer 50 % du coût d’achat et d’installation d’une borne de recharge à domicile de niveau 2 neuve, jusqu’à un maximum de
Roulez Vert Program: Get up to ${incentives} towards the purchase of a new ${vehicle} and up to $600 to install a home charging station.
Home Charging Station Rebate: Up to $600 towards the purchase and installation of a level 2 home charging station.
`,\r\n\t\t\t\t\"fr\": `Programme Roulez vert: Obtenez jusqu'à ${incentives} pour l'achat d'un nouveau ${vehicle} et jusqu’à 600 $ pour installer une borne de recharge résidentielle.
Remboursement pour une borne à domicile : Jusqu'à 600 $ pour l'achat et l'installation d'une borne de recharge à domicile de niveau.
`\r\n\t\t\t},\r\n\t\t\t\"ev_rebates_MB\":{\r\n\t\t\t\t\"en\": `Manitoba Electric Vehicle Rebate Program: Get up to $4,000 towards the purchase of a new ${vehicle}
`,\r\n\t\t\t\t\"fr\": `Programme de remboursement à l’achat ou à la location d’un véhicule électrique du Manitoba: Obtenez jusqu’à 4 000 $ de rabais à l’achat d’un ${vehicle} neuf.
`\r\n\t\t\t},\r\n\t\t\t\"ev_rebates_YT\":{\r\n\t\t\t\t\"en\": `Provincial Rebate: Get up to ${incentives} towards the purchase of a new ${vehicle}.`,\r\n\t\t \t\t\"fr\": `Rabais provincial : Obtenez jusqu’à ${incentives} de rabais à l’achat d’un ${vehicle} neuf.`\r\n\t\t\t},\r\n\t\t \"incentives\":{\r\n\t\t\t \"en\": `Payments shown include a $${incentives} Current Incentive. Contact your local Mazda retailer for details.`,\r\n\t\t\t \"fr\": `Les paiements indiqués incluent l\\'offre incitatives actuelle de ${incentives} $. Communiquez avec votre détaillant Mazda pour les détails.`\r\n\t\t },\r\n\t\t \"mazda_cash_incentive\": {\r\n\t\t\t\"en\": `Mazda Retail Cash is applicable to cash purchase deals only and: (i) cannot be combined with lease or finance offers; (ii) will be deducted from the negotiated vehicle price before taxes; (iii) has no cash surrender or other value; and (iv) cannot be applied to past transactions. Conditions apply.`,\r\n\t\t\t\"fr\": `L’incitatif au comptant de Mazda s’applique uniquement aux transactions d’achat au comptant et : (i) ne peut être combiné à des offres à la location ou au financement; (ii) sera déduit du prix négocié du véhicule avant taxes; (iii) n’a aucune valeur de rachat en espèces ni autre valeur; et (iv) ne peut être appliqué aux transactions passées. Des conditions s’appliquent.`\r\n\t\t },\r\n\t\t \"ownerloyaltyprogram\":{\r\n\t\t\t\t\"en\": `Current Mazda owners may be eligible to receive up to a ${rate}% rate discount off finance rates, up to a ${rate}% rate discount off lease rates, or up to a ${incentives} cash discount. The most advantageous Mazda Owner Loyalty Program discount (as determined by Mazda) will be automatically applied below. Please contact your local Mazda retailer for more details.`,\r\n\t\t\t\t\"fr\": `Les propriétaires actuels d’un véhicule Mazda peuvent bénéficier d’une réduction du taux de financement à l’achat allant jusqu’à ${rate} %, d’une réduction du taux à la location allant jusqu’à ${rate} % ou d’un rabais au comptant allant jusqu’à ${incentives}. La réduction la plus avantageuse du Programme de fidélité du propriétaire Mazda (telle que déterminée par Mazda) sera automatiquement appliquée ci-dessous. Contactez votre détaillant Mazda pour plus de détails.`\r\n\t\t },\r\n\t\t \"graduate\":{\r\n\t\t \"en\":`Recent graduates from an eligible university or college are eligible to receive a discount on the purchase of a new, unused or certified pre-owned vehicle. View eligible schools.`,\r\n\t\t \"fr\":`Les nouveaux diplômés de certains collèges ou universités accrédités sont admissibles à recevoir un rabais à l'achat d'un véhicule neuf ou non encore utilisé, ou d'un véhicule d'occasion certifié. Voir les écoles accréditées.`\r\n\t\t },\r\n\t\t \"military\":{\r\n\t\t \"en\":`Active military personnel, veterans, reservists may be eligible to receive a discount on a new Mazda vehicle. Contact your local Mazda retailer for full details.`,\r\n\t\t \"fr\":`Le personnel militaire en activité, les anciens combattants et les réservistes, pourraient être admissibles à un rabais sur un véhicule Mazda neuf. Communiquez avec votre détaillant Mazda pour plus de détails.`\r\n\t\t },\r\n\t\t \"first_time_owner\":{\r\n\t\t \"en\":`$750 Upgrade to Mazda incentive (“Incentive”) is available on new and previously unregistered 2024 CX-5 models that are purchased or financed/leased (on approved credit) from an authorized Mazda dealer in Canada. Certain conditions apply. See Mazda.ca or your local Mazda dealer for details.10`,\r\n\t\t \"fr\":`L’incitatif de 750 $ pour passer à Mazda (« incitatif ») est offert sur les modèles CX-5 2024 neufs et non immatriculés précédemment achetés ou financés/loués (sur approbation du crédit) auprès d’un détaillant Mazda autorisé au Canada. Certaines conditions s’appliquent. Détails sur Mazda.ca ou auprès de votre détaillant Mazda.10` \r\n\t\t },\r\n\t\t\t\"promo_apr\":{\r\n\t\t\t\t\"en\": `The rate selected is a special promotional rate. Alternatively, you can take advantage of cash purchase incentives that cannot be combined with the special promotional rate and your Informational APR would be as outlined above.`,\r\n\t\t\t\t\"fr\": `Le taux sélectionné est un taux promotionnel spécial. Si vous profitez plutôt des offres à l’achat au comptant qui ne peuvent être combinées avec le taux promotionnel spécial, votre TAP informatif serait celui indiqué ci-dessus.`\r\n\t\t\t}\r\n\r\n\r\n }\r\n\r\n\t\tif(tooltips[tooltip] !== undefined){\r\n \treturn ReactHtmlParser(tooltips[tooltip][language]);\r\n\t\t}else{\r\n\t\t\treturn tooltip + ' no tooltip found.';\r\n\t\t}\r\n }\r\n}","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { useRef, useEffect, useState } from 'react';\r\n\r\nimport TooltipHelper from '../../../Helpers/tooltipHelper';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nexport const Tooltip = ({ TooltipName, TooltipText, incentives, vehicle, rate, TooltipClasses, ...props }) => {\r\n\tconst [toggle, setToggle] = useState(false);\r\n\tconst [tooltipHeight, setTooltipHeight] = useState(null)\r\n\tconst [isTop, setTop] = useState(null);\r\n\tconst [isAnimating, setIsAnimating] = useState(false)\r\n\tconst [didInit, setInit] = useState(false);\r\n\tconst toolRef = useRef();\r\n\tconst tooltipHelper = new TooltipHelper();\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n\tconst tooltipText = TooltipName ? tooltipHelper.getTooltip(TooltipName, incentives, vehicle, rate) : TooltipText;\r\n\t\r\n\tuseEffect(() =>{\r\n\t\tconst tooltip = toolRef.current;\r\n\t\tif(typeof window.gsap === 'object' && !didInit && !tooltipHeight && tooltip && toggle){\r\n\t\t\tconst initHeight=tooltip.querySelector('.mz-tooltip__text').offsetHeight;\r\n\t\t\tsetTooltipHeight(initHeight)\r\n\t\t\tsetInit(true);\r\n\t\t\ttoggleCollapse(tooltip, 0.3, initHeight);\r\n }else if(didInit){\r\n toggleCollapse(tooltip, 0.3);\r\n }\r\n\t}, [toggle]);\r\n\r\n\tfunction toggleCollapse(tooltip, time, initHeight=tooltipHeight){\r\n\t\tif(!isAnimating){\r\n\t\t\tconst tooltipCont = tooltip.querySelector('.mz-tooltip__text');\r\n\t\t\tconst tooltipWidth = 300;\r\n\t\t\ttooltipCont.style.left='';\r\n\t\t\ttooltipCont.style.top='';\r\n\t\t\tconst tooltipLeft = tooltipCont.getBoundingClientRect().left;\r\n\t\t\tconst tooltipBottom = tooltipCont.getBoundingClientRect().bottom;\r\n\t\t\tconst tooltipRight = tooltipLeft + tooltipWidth;\r\n\r\n\t\t\tconst pricingHeight = document.querySelector('.mz-pricing') !== null ? document.querySelector('.mz-pricing').offsetHeight : 0;\r\n\r\n\t\t\tif(toggle){\r\n\t\t\t\tif(tooltipBottom + initHeight > (window.innerHeight - pricingHeight)){\r\n\t\t\t\t\ttooltip.classList.add('reverse');\r\n\t\t\t\t\twindow.gsap.set(tooltipCont,{top:-10, transformOrigin:'bottom center'})\r\n\t\t\t\t\twindow.gsap.fromTo(tooltipCont, time,{autoAlpha:0, height:0},{autoAlpha:1, height:initHeight, onUpdate: function(){\r\n\t\t\t\t\t\t\tif(parseInt(tooltipCont.style.top, 10) <= -(initHeight - 20)){\r\n\t\t\t\t\t\t\t\ttooltipCont.style.top = -(initHeight - 10)+ 'px'\r\n\t\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\t\ttooltipCont.style.top = -(tooltipCont.offsetHeight + 10)+ 'px';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})\r\n\t\t\t\t\tsetTop(true);\r\n\t\t\t\t}else{\r\n\t\t\t\t\ttooltip.classList.remove('reverse');\r\n\t\t\t\t\twindow.gsap.set(tooltipCont,{top:'6px', transformOrigin:'top center'})\r\n\t\t\t\t\twindow.gsap.fromTo(tooltipCont, time,{autoAlpha:0, height:0},{autoAlpha:1,height:initHeight})\r\n\t\t\t\t\tsetTop(false);\r\n\t\t\t\t}\r\n\t\t\t}else{\r\n\t\t\t\tsetIsAnimating(true)\r\n\t\t\t\tif(isTop){\r\n\t\t\t\t\t\twindow.gsap.to(tooltipCont, time,{autoAlpha:0, height:0, onComplete:enableAni, transformOrigin:'bottom center', onUpdate: function(){\r\n\t\t\t\t\t\t\tif(parseInt(tooltipCont.style.top, 10) >= -10){\r\n\t\t\t\t\t\t\t\ttooltipCont.style.top = '-10px'\r\n\t\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\t\ttooltipCont.style.top = -(tooltipCont.offsetHeight + (tooltip.parentElement.offsetHeight *2)) + 'px';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})\r\n\t\t\t\t}else{\r\n\t\t\t\t\twindow.gsap.to(tooltipCont, time,{autoAlpha:0, height:0, onComplete:enableAni, transformOrigin:'top center'})\r\n\t\t\t\t}\r\n\t\t\t\tfunction enableAni(){\r\n\t\t\t\t\tsetIsAnimating(false);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif(tooltipRight > window.innerWidth){\r\n\t\t\t\ttooltipCont.style.left='auto';\r\n\t\t\t\ttooltipCont.style.right= '-20px';\r\n\t\t\t}else if(tooltipLeft < 0){\r\n\t\t\t\ttooltipCont.style.left='-20px';\r\n\t\t\t\ttooltipCont.style.right= 'auto';\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tconst toolClick = (e)=>{\r\n\t\tif(!isAnimating){\r\n\t\t\tsetToggle(!toggle);\r\n\t\t}\r\n\t}\r\n\r\n\t\r\n\r\n\treturn (\r\n\t\ttooltipText !== undefined &&\r\n\t\t\t {\r\n\t\t\t\ttoolClick(e);\r\n\t\t\t\tgtmHelper.setGTM({'action':'Tooltip', 'Tooltip': TooltipName}, true, false);\r\n\t\t\t}}\r\n\t\t\tonMouseEnter={(e)=>{\r\n\t\t\t\tif(window.matchMedia(\"(min-width: 1025px)\").matches){\r\n\t\t\t\t\tif(!isAnimating){\r\n\t\t\t\t\t\tsetToggle(true);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tgtmHelper.setGTM({'action':'Tooltip', 'Tooltip': TooltipName}, true, false);\r\n\t\t\t\t}\r\n\t\t\t}}\r\n\t\t\tonMouseLeave={(e) =>{\r\n\t\t\t\tif(window.matchMedia(\"(min-width: 1025px)\").matches){\r\n\t\t\t\t\tif(!isAnimating){\r\n\t\t\t\t\t\tsetToggle(false);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}}>\r\n\t\t\t\t{TooltipClasses &&\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\t{!TooltipClasses &&\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t);\r\n};\r\n\r\nTooltip.propTypes = {\r\n\tTooltipText: PropTypes.string,\r\n\tTooltipClasses: PropTypes.string,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Modal_50_50 from '../../3_Organisms/Modal/Modal_50_50';\r\nimport { getLang, formatPrice, getBaseUrl, getFinanceWeekly, getLeaseBiWeeklyFromOptions, pushToGTMDataLayer } from '../../../utils';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { titleCase } from '../../../Helpers/helpers';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nexport const AccessoryCard = ({ Accessory, Selected, HandleSelectedAccessory, HandleLearnMore, isPopular, showFinancePrice, ...props }) => {\r\n\tconst [modalOpen, setModalOpen] = React.useState(false);\r\n const { t, i18n } = useTranslation(['accessories', 'general']);\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n //const [selected] = React.useState(Selected);\r\n const financial = JSON.parse(sessionStorage.getItem(Constants.FinancialObj));\r\n const financeTermIndex = parseInt(sessionStorage.getItem(Constants.FinanceTermIndex));\r\n const leaseTermIndex = parseInt(sessionStorage.getItem(Constants.LeaseTermIndex));\r\n const financeTerm = parseInt(sessionStorage.getItem(Constants.FinanceTerm));\r\n const leaseTerm = parseInt(sessionStorage.getItem(Constants.LeaseTerm));\r\n\r\n function setSelectedAccessory() {\r\n HandleSelectedAccessory(Accessory.index)\r\n }\r\n\r\n const imagePath = getBaseUrl() + process.env.REACT_APP_BASIC_CONTENT_PATH;\r\n\r\n function HandleLearnMore() {\r\n setModalOpen(!modalOpen);\r\n document.querySelector('html').classList.add('inactive');\r\n\t\tgtmHelper.setGTM({'action':'Open Modal','modal': 'Accessory Learn More'}, true, false);\r\n }\r\n\r\n function closeModal() {\r\n setModalOpen(false);\r\n }\r\n\r\n function getTooltipText(Accessory) {\r\n const lang = getLang();\r\n const totalCost = formatPrice(Accessory.price, true);\r\n const priceIncludesText = lang == 'en' ? 'Includes' : 'Contient';\r\n const installationText = lang === 'en' ? 'Installation cost' : 'Coûts d\\'installation';\r\n const totalPriceText = lang === 'en' ? 'Total price' : 'Prix totaux';\r\n \r\n let text = `${priceIncludesText}:`;\r\n text += `\r\n\t\t\t\t\t\t{tooltipText}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t setToggle(!toggle)} className=\"mz-tooltip__close\">\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t${Accessory.name}: ${formatPrice(Accessory.base_msrp, true)}`;\r\n text += Accessory.install_cost ? `
${installationText}: ${formatPrice(Accessory.install_cost, true)}` : '';\r\n text += `
${totalPriceText}:${totalCost}`;\r\n return text;\r\n }\r\n\r\n function accessoryTotalCost(){\r\n return Accessory.price + Accessory.install_cost ? Accessory.price + Accessory.install_cost : 0;\r\n }\r\n\r\n return (\r\n <>\r\n {Accessory ? <>\r\n
\r\n
\r\n \r\n\t\t\t\t{Accessory.popular === true && !isPopular ? 
HandleLearnMore()} />\r\n \r\n
\r\n {t(\"popular\")}
: null}\r\n\r\n
\r\n\t\t\t\t{titleCase(Accessory.name)}
\r\n\r\n
\r\n {Accessory.price!==0?`+ ${formatPrice(Accessory.price)}`:''} {Accessory.price_week !== null ? {Accessory.price!==0?\r\n `(${showFinancePrice?\r\n `${getFinanceWeekly(Accessory.price, financial.calculatedFinance.financeValues[financeTermIndex].aprRate, financial.calculatedFinance.financeValues[financeTermIndex].term)}${t(\"general:week\")}`:\r\n `${getLeaseBiWeeklyFromOptions(Accessory.price, financial.calculatedLease.leaseValues[leaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[leaseTermIndex].term)}${t(\"general:bi_week\")}`})`:''}1
\r\n {\r\n\t\t\t\t\t setToggle(!toggle)\r\n\t\t\t\t\t gtmHelper.setGTM({'action':'Collapse', 'type': 'Legal', 'value': toggle}, true , false);\r\n\t\t\t\t }}\r\n className=\"mz-collapse__button\"\r\n >\r\n
\r\n )\r\n}\r\n\r\nCollapseLegal.propTypes = {\r\n ColCarText1: PropTypes.string,\r\n ColBoxText: PropTypes.string,\r\n}\r\n\r\nCollapseLegal.defaultProps = {\r\n ColCarText1: 'Legal',\r\n ColBoxText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\r\n}\r\n\r\nexport default CollapseLegal;","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useNavigate, useParams, useSearchParams } from 'react-router-dom';\r\n\r\nimport { formatPrice, getLang, convertNum, getProvince } from '../../../utils'\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\nimport { openModal, scrollTo } from '../../../Helpers/helpers';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\n\r\nexport const Pricing = ({ builtLabel, builtPrice, loanLabel, loanPrice, buttonLabel, leaseLabel, financeLabel, HandleNextClick, setLegalModalOpen, HandleShowFinanceClick, saveLabel, summaryCalculator = window.summaryCalculator, setPreorderModalOpen, ...props }) => {\r\n //const summaryCalculator = window.summaryCalculator;\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n\r\n const lang= getLang();\r\n const navigate = useNavigate();\r\n const navHelper = new NavHelper();\r\n\r\n const [financialInfo, setFinancialInfo] = React.useState(summaryCalculator.FinancialInfo);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n const [currentMileage] = React.useState(summaryCalculator.AnnualMileage);\r\n const includeFees = sessionStorage.getItem(Constants.IncludeFees) === 'true';\r\n const includeRebates = sessionStorage.getItem(Constants.IncludeRebates) === 'true';\r\n const includeTaxes = sessionStorage.getItem(Constants.IncludeTaxes) === 'true';\r\n const app = document.querySelector('.App');\r\n const { t, i18n } = useTranslation(['general']);\r\n const resizeObserver = new ResizeObserver(() => {\r\n calculatePriceBarPosition();\r\n })\r\n const mazdaFooter = document.querySelector('.mz-footer');\r\n const mazdaPricing = document.querySelector('.mz-pricing');\r\n const scrollElement = document.querySelector('.scroll-content');\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const [ocaOpen, setOcaModalOpen] = React.useState(false);\r\n const [financeType, setFinanceType] = React.useState(false);\r\n \r\n const [searchParams, setSearchParams] = useSearchParams();\r\n\r\n const [update, setForceUpdate] = useState('');\r\n\r\n window.removeEventListener('scroll', calculatePriceBarPosition);\r\n window.removeEventListener('resize', calculatePriceBarPosition);\r\n\r\n if (resizeObserver && app)\r\n resizeObserver.unobserve(app);\r\n\r\n if (mazdaFooter && mazdaPricing) {\r\n window.addEventListener('scroll', calculatePriceBarPosition, false);\r\n window.addEventListener('resize', calculatePriceBarPosition, false);\r\n resizeObserver.observe(app);\r\n }\r\n\r\n function calculatePriceBarPosition(e) {\r\n if (!scrollElement) {\r\n if (!isFooterOnViewport()) {\r\n mazdaPricing.style.bottom = \"0px\";\r\n } else {\r\n mazdaPricing.style.bottom = `${howMuchFooterIsVisible()}px`;\r\n }\r\n } else {\r\n if (isFooterOnViewport()) {\r\n mazdaPricing.style.bottom = `${mazdaFooter.offsetHeight}px`;\r\n } else {\r\n mazdaPricing.style.bottom = `${scrollElement.clientHeight - window.innerHeight - parseFloat(window.getComputedStyle(scrollElement).transform.split(\", \")[5].replace(')', '')) * -1}px`;\r\n }\r\n }\r\n\r\n }\r\n\r\n\r\n function handleTogglePrice(e) {\r\n e.preventDefault();\r\n //const auxshowFinancePrice = !showFinancePrice\r\n summaryCalculator.ShowFinancePrice = !showFinancePrice;\r\n setShowFinancePrice(summaryCalculator.ShowFinancePrice);\r\n\r\n\r\n if(HandleShowFinanceClick)\r\n HandleShowFinanceClick(summaryCalculator.ShowFinancePrice);\r\n\r\n\t\tconst toggleType = summaryCalculator.ShowFinancePrice === false ? 'lease':'finance'\r\n\t\tgtmHelper.setGTM({'action':'Switch Financing','finance type': toggleType}, true, false);\r\n }\r\n\r\n function isFooterOnViewport() {\r\n const { top, bottom } = mazdaFooter.getBoundingClientRect()\r\n const vHeight = (window.innerHeight || document.documentElement.clientHeight);\r\n\r\n return (\r\n (top > 0 || bottom > 0) &&\r\n top < vHeight\r\n );\r\n }\r\n\r\n function howMuchFooterIsVisible() {\r\n var distance = 0;\r\n let elem = document.querySelector('.mz-footer');\r\n const vHeight = window.innerHeight;\r\n const scrollPosition = window.pageYOffset | document.body.scrollTop;\r\n do {\r\n distance += elem.offsetTop;\r\n elem = elem.offsetParent;\r\n } while (elem);\r\n\r\n if (scrollPosition > (distance - vHeight)) {\r\n return scrollPosition - (distance - vHeight);\r\n } else {\r\n return 0;\r\n }\r\n }\r\n\r\n function handlePreOrderClick() {\r\n document.querySelector('body').classList.add('disabled');\r\n setPreorderModalOpen(true);\r\n \r\n }\r\n\r\n function handleContactDealerLinkClick(e) {\r\n e.preventDefault();\r\n console.log(lang)\r\n gtmHelper.setGTM({'action':'Open Modal','modal': 'Contact Dealer'}, true, false);\r\n const targetModal = document.getElementById('mz-react-send-build-to-dealer-modal');\r\n if (targetModal && summaryCalculator) {\r\n if (summaryCalculator.SelectedColourExteriorIndex !== 'null' && summaryCalculator.Colours !== null) {\r\n const heading = targetModal.querySelector('.mz-send-build-to-dealer__vehicle-name');\r\n if (heading) {\r\n heading.textContent = lang === 'en' ? summaryCalculator._selectedModelYear.year.title + ' ' + ReactHtmlParser(summaryCalculator._selectedModelYear.carline.title) : ReactHtmlParser(summaryCalculator._selectedModelYear.carline.title) + ' ' + summaryCalculator._selectedModelYear.year.title;\r\n }\r\n }\r\n openModal('mz-react-send-build-to-dealer-modal');\r\n }\r\n }\r\n\r\n const handleOcaClick = (e) => {\r\n e.preventDefault();\r\n document.querySelector('body').classList.remove('disabled');\r\n if (window.location.href.indexOf('/payments') > 0) {\r\n setSearchParams({'oca':''});\r\n setTimeout(() => {\r\n setSearchParams({'oca':'1'});\r\n }, 10);\r\n }else{\r\n navigate(navHelper.getNavContent(t).tabList[5].uri + '&oca=1');\r\n }\r\n const price = summaryCalculator._showFinancePrice ? summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebatesTaxed : summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFeesWithRebatesTaxed;\r\n gtmHelper.setGTM({'action':`OCA - Footer`,'year': year, 'model': carline, 'trim': summaryCalculator.selectedVehicle.trim ?? summaryCalculator.AvailableTrim.trims[0].trim_type.url_slug, 'price' : Math.round(price)}, true, false);\r\n }\r\n\r\n const getLoanRate = () => {\r\n if(summaryCalculator.getResponsesHasError())\r\n return '-'; \r\n\r\n const loanElement = summaryCalculator.FinancialInfo.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex];\r\n if (Number.parseFloat(loanElement.aprRate) !== Number.parseFloat(loanElement.aprRateDiscounted))\r\n return convertNum(loanElement.aprRateDiscounted,2) + '%';\r\n else\r\n return convertNum(loanElement.aprRate,2) + '%';\r\n }\r\n\r\n const getLeaseRate = () => {\r\n if(summaryCalculator.getResponsesHasError())\r\n return '-';\r\n\r\n const leaseElement = summaryCalculator.FinancialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex];\r\n if (Number.parseFloat(leaseElement.leaseRate) !== Number.parseFloat(leaseElement.leaseRateDiscounted))\r\n return convertNum(leaseElement.leaseRateDiscounted,2) + '%';\r\n else\r\n return convertNum(leaseElement.leaseRate,2) + '%';\r\n }\r\n\r\n const getLoanWeekly = () => {\r\n if(summaryCalculator.getResponsesHasError())\r\n return '-';\r\n\r\n const loanElement = financialInfo.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex];\r\n const weeklyPayment = loanElement[summaryCalculator.IncludeTaxes ? 'weeklyWithTaxes' : 'weekly'];\r\n\r\n if( weeklyPayment === 0 || weeklyPayment === '0')\r\n return '-';\r\n\r\n return formatPrice(weeklyPayment);\r\n }\r\n\r\n const getLeaseWeekly = () => {\r\n if(summaryCalculator.getResponsesHasError())\r\n return '-';\r\n \r\n const leaseElement = financialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex]\r\n const weeklyPayment = leaseElement[summaryCalculator.IncludeTaxes ? 'biWeeklyWithTaxes' : 'biWeekly'];\r\n\r\n if( weeklyPayment === 0 || weeklyPayment === '0')\r\n return '-';\r\n\r\n return formatPrice(weeklyPayment);\r\n\r\n } \r\n\r\n function getQCEVDisclaimerSection(){\r\n if(summaryCalculator.IncludeRebates && getProvince() === 'QC' && summaryCalculator.FinancialInfo?.ev_rebates?.length){\r\n return (\r\n <> \r\n \r\n
\r\n \r\n {ColCarText1}
\r\n \r\n{ ReactHtmlParser (ColBoxText) }
\r\n \r\n {ReactHtmlParser(t(\"general:QCEVDisclaimer\"))}\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n }\r\n function handleQCEVD_LinkClick(e){\r\n if(e.target.id === 'QCEVD_link'){\r\n e.preventDefault();\r\n const contactRoute = `/${year}/${carline}/${summaryCalculator.SelectedTrim.trim_type.url_slug}/${summaryCalculator.SelectedModel.model_code}/${summaryCalculator.SelectedModel.option_code}/summary?contactDealer`;\r\n navigate(contactRoute);\r\n }\r\n }\r\n\r\n function hasBreak(){\r\n if(lang === 'fr')\r\n return ()\r\n }\r\n\r\n function getCashPrice(){\r\n let financePricing = null;\r\n let cashPricing = null;\r\n if(includeFees){\r\n if(includeTaxes){\r\n if(includeRebates){\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebatesTaxed : financialInfo.calculatedLease.balanceToLeaseWithFeesWithRebatesTaxed;\r\n cashPricing = financialInfo.calculatedCash.subtotalWithFeesWithRebatesTaxed;\r\n }else{\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceWithFeesTaxed : financialInfo.calculatedLease.balanceToLeaseWithFees;\r\n cashPricing = financialInfo.calculatedCash.subtotalWithFeesTaxed;\r\n }\r\n }else{\r\n if(includeRebates){\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebates : financialInfo.calculatedLease.balanceToLeaseWithFeesWithRebates;\r\n cashPricing = financialInfo.calculatedCash.subtotalWithFeesWithRebatesAndEvRebates;\r\n }else{\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceWithFees : financialInfo.calculatedLease.balanceToLeaseWithFees\r\n cashPricing = financialInfo.calculatedCash.subtotalWithFees;\r\n }\r\n }\r\n }else{\r\n if(includeTaxes){\r\n if(includeRebates){\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceWithRebatesTaxed : financialInfo.calculatedLease.balanceToLeaseWithRebates;\r\n cashPricing = financialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebatesTaxed;\r\n }else{\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceTaxed : financialInfo.calculatedLease.balanceToLease;\r\n cashPricing = financialInfo.calculatedCash.subtotalTaxed;\r\n }\r\n }else{\r\n if(includeRebates){\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinanceWithRebates : financialInfo.calculatedLease.balanceToLeaseWithRebates;\r\n cashPricing = financialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebates;\r\n }else{\r\n financePricing = showFinancePrice ? financialInfo.calculatedFinance.balanceToFinance : financialInfo.calculatedLease.balanceToLease;\r\n cashPricing = financialInfo.calculatedCash.subtotal;\r\n }\r\n }\r\n }\r\n\r\n //for get local price form to grab\r\n summaryCalculator.CurrentCalculatedCash = formatPrice(cashPricing, true);\r\n\r\n return ({formatPrice(financePricing)});\r\n }\r\n React.useEffect(() => {\r\n (async () => {\r\n if(summaryCalculator._selectedModel !== null) {\r\n document.addEventListener('click',handleQCEVD_LinkClick);\r\n \r\n setFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n \r\n setForceUpdate(Math.random());\r\n }\r\n })();\r\n }, [\r\n summaryCalculator.FinancialInfo?.calculatedFinance, \r\n summaryCalculator.FinancialInfo?.calculatedLease,\r\n summaryCalculator._tradeInValue, \r\n summaryCalculator._downPaymentValue,\r\n summaryCalculator.LoyaltyChecked, \r\n summaryCalculator.GraduateChecked, \r\n summaryCalculator.MilitaryChecked,\r\n summaryCalculator.FirstTimeOwnerChecked,\r\n ]);\r\n\r\n useEffect(() => {\r\n console.log('refreshing pricebar section');\r\n }, [update]);\r\n \r\n if(!financialInfo)\r\n return (<>);\r\n else\r\n return (\r\n <>\r\n
\r\n {\r\n HandleNextClick();\r\n }}\r\n />\r\n
\r\n {builtLabel}\r\n {getCashPrice()}\r\n
\r\n \r\n {showFinancePrice ? t(\"general:finance\") : t(\"general:lease\")}: {showFinancePrice ? summaryCalculator.FinanceTerm : summaryCalculator.LeaseTerm}{t(\"general:pricing_bar_label\")} {showFinancePrice ? getLoanRate() : getLeaseRate()}\r\n\r\n {showFinancePrice ? getLoanWeekly()+t(\"general:weekly\") : getLeaseWeekly()+t(\"general:bi_weekly\")}\r\n
\r\n {window.allow_oca ? \r\n \r\n \r\n {showFinancePrice ? leaseLabel : financeLabel}\r\n
:\r\n \r\n }\r\n \r\n
\r\n \r\n {summaryCalculator.isSelectionPreOrder() ?\r\n {ReactHtmlParser(t(\"general:pre_order\"))}\r\n :\r\n {ReactHtmlParser(t(\"general:get_local_price\"))}}\r\n
\r\n {ReactHtmlParser(t('general:price_as_built_m'))}\r\n \r\n {getCashPrice()}\r\n \r\n
\r\n \r\n {summaryCalculator.isSelectionPreOrder() ?\r\n {ReactHtmlParser(t(\"general:pre_order\"))}\r\n :\r\n {ReactHtmlParser(t(\"general:get_local_price\"))}\r\n }\r\n
\r\n \r\n {showFinancePrice ? t(\"general:finance\") : t(\"general:lease\")}: {hasBreak()} {showFinancePrice ? summaryCalculator.FinanceTerm : summaryCalculator.LeaseTerm}{t(\"general:pricing_bar_label\")} {showFinancePrice ? getLoanRate() : getLeaseRate()}\r\n\r\n {showFinancePrice ? getLoanWeekly()+t(\"general:weekly\") : getLeaseWeekly()+t(\"general:bi_weekly\")}\r\n\r\n
\r\n \r\n \r\n {window.allow_oca ? \r\n <>\r\n handleOcaClick(e)} >{ReactHtmlParser(t('general:ocaPriceBar'))} \r\n
\r\n \r\n : \"\" }\r\n {showFinancePrice ? leaseLabel : financeLabel}
\r\n \r\n \r\n : \"\" }\r\n {showFinancePrice ? leaseLabel : financeLabel}
\r\n
\r\n );\r\n};\r\n\r\nPreOrderModal.propTypes = {\r\n HandleTabClick: PropTypes.func,\r\n}\r\n\r\nPreOrderModal.defaultProps = {\r\n handleClose: () => {\r\n },\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useRef } from 'react';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\n\r\nexport const Alert = ({Id, Desc, ...props }) => {\r\n const [textDisplayed, setTextDisplayed] = React.useState(null);\r\n const [tooltipCont, setTooltipCont] = React.useState(null);\r\n const alertRef = useRef();\r\n\r\n let summaryCalculator = window.summaryCalculator\r\n\r\n const getTextDisplay = () => {\r\n if(Desc)\r\n return Desc;\r\n\r\n switch(summaryCalculator._currentStep) {\r\n case 1:\r\n if(summaryCalculator?._selectedModelYear?.incentives_banner)\r\n return summaryCalculator?._selectedModelYear?.incentives_banner;\r\n default: \r\n if(summaryCalculator?._selectedTrim?.incentives_banner)\r\n return summaryCalculator?._selectedTrim?.incentives_banner;\r\n\r\n if(summaryCalculator?._selectedModelYear?.incentives_banner)\r\n return summaryCalculator?._selectedModelYear?.incentives_banner;\r\n }\r\n\r\n }\r\n \r\n React.useEffect(() => {\r\n //console.log('ALERT BAR DISPLAY TEXT CHANGED');\r\n\r\n let tempHtml = getTextDisplay();\r\n tempHtml = tempHtml?.includes('\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {isOpen &&\r\n <> \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('general:pre_order')}
\r\n\r\n \r\n \r\n \r\n \r\n {sessionStorage.getItem('preorder') &&\r\n <>\r\n \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n \r\n }\r\n \r\n {!tooltipCont && ReactHtmlParser(textDisplayed)}\r\n {tooltipCont && \r\n
\r\n );\r\n};\r\n\r\nexport default Alert;\r\n\r\nAlert.propTypes = {\r\n Id: PropTypes.string,\r\n Desc: PropTypes.string,\r\n}\r\n\r\nAlert.defaultProps = {\r\n Id: 'AlertID',\r\n Desc: '',\r\n};","import React from \"react\";\r\nimport PropTypes from 'prop-types';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { setTabsNextAndPrevButtons, goToTop, setCursorWaiting, hideCmsHiddenBlock, getLoading} from '../../../utils'\r\n\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { TabsMenu } from \"../../2_Molecules/Tabs/TabsMenu\";\r\nimport AccessoryCard from '../../2_Molecules/AccessoryCard/AccessoryCard'\r\nimport CollapseLegal from '../../2_Molecules/Collapse/CollapseLegal';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\n\r\nexport const AccessoriesList = ({ HandleSelectedAccessory, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const [nav, setNav] = React.useState(null);\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const navigate = useNavigate();\r\n const leftArrowRef = React.useRef();\r\n const rightArrowRef = React.useRef();\r\n const tabsContainerRef = React.useRef();\r\n const tabsRef = React.useRef();\r\n const [visibleLeftArrow, setVisibleLeftArrow] = React.useState(false);\r\n const [visibleRightArrow, setVisibleRightArrow] = React.useState(false);\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalAccessories));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const { t, i18n } = useTranslation(['accessories', 'general']);\r\n const [accessories, setAccessories] = React.useState(null);\r\n const [categories, setCategories] = React.useState(null);\r\n const [selectedAccessories, setSelectedAccessories] = React.useState(summaryCalculator.SelectedAccessories);\r\n const [selectedCategory, setSelectedCategory] = React.useState(summaryCalculator.SelectedCategory);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst navHelper = new NavHelper();\r\n\r\n hideCmsHiddenBlock();\r\n \r\n function handleArrowLeftClick(e) {\r\n e.preventDefault();\r\n tabsRef.current.scroll(tabsRef.current.scrollLeft - 50, 0);\r\n setTabsNextAndPrevButtons();\r\n }\r\n\r\n function handleArrowRightClick(e) {\r\n e.preventDefault();\r\n tabsRef.current.scroll(tabsRef.current.scrollLeft + 50, 0);\r\n setTabsNextAndPrevButtons();\r\n }\r\n\r\n function setTabsNextAndPrevButtons() {\r\n if (tabsRef?.current?.offsetWidth < tabsRef?.current?.scrollWidth) {\r\n if (tabsRef.current.scrollLeft === 0 && !((tabsRef.current.scrollWidth - tabsRef.current.clientWidth) == tabsRef.current.scrollLeft)) {\r\n setVisibleRightArrow(true);\r\n setVisibleLeftArrow(false);\r\n } else if ((tabsRef.current.scrollWidth - tabsRef.current.clientWidth) == tabsRef.current.scrollLeft) {\r\n setVisibleRightArrow(false);\r\n setVisibleLeftArrow(true);\r\n } else {\r\n setVisibleRightArrow(true);\r\n setVisibleLeftArrow(true);\r\n }\r\n } else {\r\n setVisibleRightArrow(false);\r\n setVisibleLeftArrow(false);\r\n }\r\n return;\r\n }\r\n\r\n function handleArrowLeftClick(e) {\r\n e.preventDefault();\r\n tabsRef.current.scroll(tabsRef.current.scrollLeft - 50, 0);\r\n setTabsNextAndPrevButtons();\r\n }\r\n\r\n function handleArrowRightClick(e) {\r\n e.preventDefault();\r\n tabsRef.current.scroll(tabsRef.current.scrollLeft + 50, 0);\r\n setTabsNextAndPrevButtons();\r\n }\r\n\r\n\t//sort popular to first item\r\n\tfunction isPopular(a, b){\r\n\t\tconst bandA = a.toUpperCase();\r\n\t\tconst bandB = b.toUpperCase();\r\n\r\n\t\tlet comparison = 0;\r\n\t\tif (bandA === 'POPULAR') {\r\n\t\t\tcomparison = -1;\r\n\t\t} else if(bandA > bandB){\r\n\t\t\tcomparison = 1;\r\n\t\t} else if(bandA < bandB){\r\n\t\t\tcomparison = -1;\r\n\t\t}\r\n\t\treturn comparison;\r\n }\r\n\r\n summaryCalculator.CurrentStep = 6;\r\n\r\n React.useEffect(async () => {\r\n if (!summaryCalculator.isDataLoaded()) {\r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, packageCode);\r\n\r\n setNav(null);\r\n } else if (summaryCalculator.Categories === null) {\r\n summaryCalculator.Categories = Object.keys(summaryCalculator.Accessories.data).sort(isPopular);\r\n\r\n setCategories(summaryCalculator.Categories);\r\n } else if (summaryCalculator.SelectedCategory === null) {\r\n summaryCalculator.SelectedCategory = \"Popular\";\r\n\r\n setSelectedCategory(summaryCalculator.SelectedCategory);\r\n } else if (nav === null) {\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender); \r\n //setNav(navHelper.getNavContent(year, carline, trim, model, packageCode, summaryCalculator.CurrentStep, t));\r\n\r\n if (tabsRef.current) {\r\n tabsRef.current.removeEventListener('scroll', setTabsNextAndPrevButtons);\r\n tabsRef.current.addEventListener('scroll', setTabsNextAndPrevButtons, true);\r\n window.removeEventListener('resize', setTabsNextAndPrevButtons);\r\n window.addEventListener('resize', setTabsNextAndPrevButtons);\r\n\r\n setTabsNextAndPrevButtons();\r\n } \r\n }\r\n\r\n // Force first redraw\r\n if (accessories === null)\r\n {\r\n setAccessories(summaryCalculator.Accessories);\r\n }\r\n\r\n }, [summaryCalculator, selectedAccessories, selectedCategory, accessories, categories]);\r\n\r\n async function handleSelectedAccessory(index) {\r\n setCursorWaiting(true);\r\n\r\n if (summaryCalculator.SelectedAccessories.findIndex(obj => obj.index === index) === -1) {\r\n const accessory = summaryCalculator.Accessories.rawData[index][1];\r\n\r\n let selectedAccessories = summaryCalculator.SelectedAccessories;\r\n selectedAccessories.push(accessory);\r\n\r\n await summaryCalculator.setSelectedAccessories(selectedAccessories);\r\n } else {\r\n await summaryCalculator.setSelectedAccessories(summaryCalculator.SelectedAccessories.filter((value) => value.index != index));\r\n }\r\n\r\n // Force update, this is a hack!\r\n setSelectedAccessories( Math.random() ); //setSelectedAccessories(summaryCalculator.SelectedAccessories);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n function nextStep() {\r\n goToTop();\r\n //navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/protections${decodeURI(window.location.search)}`);\r\n navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/payments${decodeURI(window.location.search)}`);\r\n }\r\n\r\n function handleShowFinanceClick(value) {\r\n setShowFinancePrice(value);\r\n }\r\n\r\n function hasAlertBar() {\r\n return summaryCalculator?._selectedModelYear?.incentives_banner;\r\n }\r\n\r\n return (\r\n <>\r\n {getLoading(false, t)}\r\n \r\n \r\n {ReactHtmlParser(textDisplayed)}\r\n {insertTooltip()}\r\n
\r\n }\r\n\r\n
\r\n\r\n \r\n {summaryCalculator.Accessories && summaryCalculator.Accessories.title ?
: null}\r\n {\r\n (summaryCalculator.Categories && summaryCalculator.SelectedCategory) && (\r\n ({\r\n id: key,\r\n isactive: category === summaryCalculator.SelectedCategory ? 'true': '',\r\n label: category,\r\n onClick: async () => {\r\n await summaryCalculator.setSelectedCategory(summaryCalculator.Categories[key]);\r\n setSelectedCategory(summaryCalculator.Categories[key]);\r\n\r\n gtmHelper.setGTM({'action':'Tab Click', 'accessory tab': summaryCalculator.Categories[key]}, true , false);\r\n }\r\n }))}\r\n />\r\n )\r\n \r\n }\r\n
\r\n {ReactHtmlParser(summaryCalculator.VehicleTitle)} {t(\"accessories:title\")}
: null}\r\n {summaryCalculator.Accessories && summaryCalculator.Accessories.data && Object.keys(summaryCalculator.Accessories.data).length !== 0 ? <>{ReactHtmlParser(t(\"accessories:titleLegal\"))}
\r\n {summaryCalculator.Accessories && summaryCalculator.Accessories.data ?.All && summaryCalculator.SelectedCategory ?\r\n summaryCalculator.Accessories.data[summaryCalculator.SelectedCategory].map((accessory, key) =>\r\n obj.index === accessory.index) !== -1 : ''} HandleSelectedAccessory={handleSelectedAccessory} key={key} isPopular={summaryCalculator.SelectedCategory === 'Popular' ? true : false} showFinancePrice={showFinancePrice}> )\r\n : null}\r\n
\r\n {summaryCalculator.Accessories && summaryCalculator.Accessories.data && Object.keys(summaryCalculator.Accessories.data).length === 0 ? {t(\"accessories:no_accessorie_found\")}
: null}\r\n\r\n {\r\n document.querySelector('body').classList.add('disabled');\r\n setLegalModalOpen(true)\r\n }}\r\n />\r\n
\r\n \r\n
\r\n )\r\n })\r\n\r\n return (\r\n \r\n \r\n
\r\n {ReactHtmlParser(feature.content)}
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n\r\n
\r\n \r\n
\r\n {ReactHtmlParser(carName)}
\r\n \r\n{carModel} { !isComingSoon && carPrice > 0 ? `- ${t(\"jelly_starting_at\")} ${formatPrice(carPrice)} `:''} { isComingSoon ? '' : 1}
\r\n {displayFeatures}
\r\n \r\n );\r\n};\r\n\r\nJelly.propTypes = {\r\n jellieHaveIcons: PropTypes.bool,\r\n icon1: PropTypes.bool,\r\n icon2: PropTypes.bool,\r\n icon3: PropTypes.bool,\r\n topLabel: PropTypes.string,\r\n carName: PropTypes.string,\r\n carModel: PropTypes.string,\r\n carFeatures: PropTypes.array,\r\n // carPrice: PropTypes.string,\r\n carImg: PropTypes.string,\r\n carImgHover: PropTypes.string,\r\n btnLabel: PropTypes.string,\r\n onClick: PropTypes.func,\r\n}\r\n\r\nJelly.defaultProps = {\r\n jellieHaveIcons: true,\r\n icon1: true,\r\n icon2: true,\r\n icon3: true,\r\n topLabel: '',\r\n carName: '',\r\n carModel: '',\r\n carPrice: '',\r\n carFeatures: [\r\n {\r\n \"content\": \"5\",\r\n \"icon_type\": \"seats\"\r\n },\r\n {\r\n \"content\": \"Available AWD\",\r\n \"icon_type\": \"awd\"\r\n },\r\n {\r\n \"content\": \"Available Turbo Engine\",\r\n \"icon_type\": \"turbo\"\r\n }\r\n ],\r\n carImg: '',\r\n carImgHover: '',\r\n btnLabel: 'BUILD YOURS',\r\n onClick: undefined,\r\n}\r\n\r\nexport default Jelly;","//tabs driven by core js.\r\n/* global mzFunc mzTabs */\r\n\r\nimport React, { useEffect, useState, useRef } from \"react\";\r\nimport PropTypes from 'prop-types';\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n//import NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { Jelly } from '../../2_Molecules/Jelly/Jelly';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { getLang, getProvince, hideCmsHiddenBlock, updateLanguageLink, getLoading, getApiBaseUrl } from '../../../utils';\r\n\r\nexport const VehiclePage = ({summaryCalculator = window.summaryCalculator, ...props }) => {\r\n const [response, setResponse] = useState({ model_years: [], categories: {} });\r\n const [vehicleLegal, setVehicleLegal] = useState([{ copy: '' }]);\r\n \r\n const leftArrowRef = useRef();\r\n const rightArrowRef = useRef();\r\n const tabsRef = useRef();\r\n const tabsContainerRef = useRef();\r\n const [loading, setLoading] = useState(true);\r\n const [visibleTab, setVisibleTab] = useState('2158');\r\n const [visibleLeftArrow, setVisibleLeftArrow] = useState(false);\r\n const [visibleRightArrow, setVisibleRightArrow] = useState(false);\r\n\tconst [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const navigate = useNavigate();\r\n const { t, i18n } = useTranslation(['vehicles', 'general']);\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n\t//const navHelper = new NavHelper();\r\n\r\n summaryCalculator.CurrentStep = 0;\r\n\r\n hideCmsHiddenBlock();\r\n\r\n useEffect(() => {\r\n async function executeTasks() {\r\n // This is needed to have the right vehicle landing page for retailers which are per province\r\n const isRetailerMode = await summaryCalculator.isRetailerMode();\r\n\r\n const requestResponse = await summaryCalculator.loadVehicles();\r\n const requestLegalResponse = await summaryCalculator.loadVehiclesLegal(\"JXTN84\", \"AA00\");\r\n\r\n setResponse(requestResponse);\r\n setVehicleLegal(requestLegalResponse);\r\n\r\n setLoading(false);\r\n summaryCalculator.reset(true);\r\n\r\n\t\t\tif(typeof mzFunc === 'object' && typeof mzTabs === 'object'){\r\n\t\t\t\tmzFunc.waitForEl('.mzBuildandPrice .mz-tabs').then(function(components){mzTabs.init(components);});\r\n\t\t\t}\r\n\r\n // Rewrite the top navigation to not have the hash in the URL\r\n if(window.location.hash) {\r\n const newLocation = window.location.origin + window.location.pathname.replace('/#/', '');\r\n window.history.pushState({}, document.title, newLocation);\r\n }\r\n }\r\n\r\n executeTasks();\r\n\r\n // Used the CMS language change as this page doesn't include the NAV bar\r\n updateLanguageLink();\r\n }, []);\r\n\r\n const Cats = Object.keys(response.categories).map((item, key) => {\r\n return (\r\n \r\n {\r\n if(!item.is_coming_soon){\r\n const urlParams = new URLSearchParams(window.location.search);\r\n urlParams.set('prov_code', getProvince());\r\n urlParams.set('lang_code', getLang());\r\n //summaryCalculator.SelectedModelYear = item;\r\n window.providerCalls = 0;\r\n handleModelClick(`/${item.year.url_slug}/${item.carline.url_slug}/?${decodeURI(urlParams)}`);\r\n gtmHelper.setGTM({'action':'Vehicle Click', 'model': item.carline.url_slug, 'year': item.year.url_slug}, true , false);\r\n }\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tonMouseOver={(e) => handleModelOver(e)}\r\n\t\t\t\t\tonMouseOut={(e) => handleModelOut(e)}\r\n carImg={`${item.visual.static_content_base_path}${item.visual.jelly_path}${item.visual.jelly}`}\r\n carImgHover={`${item.visual.static_content_base_path}${item.visual.jelly_path}${item.visual.jelly_hover}`}\r\n />\r\n
\r\n )\r\n })\r\n\r\n const handleModelClick = navigateUrl => {\r\n window.ocaRetry = 0\r\n window.providerRetry = 0\r\n\r\n // PATCH ADDED FOR Having twice dealerID in URL and causing some session storage switch issue\r\n const currentLocation = window.location;\r\n const currentUrl = currentLocation.origin + currentLocation.pathname + currentLocation.hash;\r\n const urlWithoutQueryParams = currentUrl.split('?')[0];\r\n window.history.replaceState(null, 'React App', urlWithoutQueryParams);\r\n\r\n navigate(navigateUrl)\r\n };\r\n\tconst handleModelOver = (e) => {\r\n\t\tconst jellyContent = e.target.closest('.mz-tabs__content');\r\n\t\tconst jellySibArr = jellyContent.querySelectorAll('.mz-jelly')\r\n\t\t\tjellySibArr.forEach(jellySib =>{\r\n\t\t\t\tif(e.target !== jellySib){\r\n\t\t\t\tif(!jellySib.classList.contains('active') && jellySib.classList.contains('mz-jelly')){\r\n\t\t\t\t\tjellySib.classList.add('fade');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n };\r\n\tconst handleModelOut = (e) => {\r\n\t\tconst jellyContent = e.target.closest('.mz-tabs__content');\r\n\t\tconst jellySibArr = jellyContent.querySelectorAll('.mz-jelly')\r\n\t\t\tjellySibArr.forEach(jellySib =>{\r\n\t\t\t\tif(e.target !== jellySib){\r\n\t\t\t\tif(!jellySib.classList.contains('active') && jellySib.classList.contains('mz-jelly')){\r\n\t\t\t\t\tjellySib.classList.remove('fade');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n\r\n if (loading) {\r\n return (\r\n {t(\"loading\")}
\r\n )\r\n }\r\n\r\n\r\n const HasFinancialProviderError = JSON.parse(sessionStorage.getItem(Constants.HasFinancialProviderError));\r\n\r\n return (\r\n <>\r\n {getLoading(loading, t)}\r\n \r\n
\r\n \r\n )\r\n};\r\n\r\nVehiclePage.propTypes = {\r\n ApiUrl: PropTypes.string,\r\n}\r\n\r\nVehiclePage.defaultProps = {\r\n ApiUrl: `${getApiBaseUrl()}/api/ModelYears?prov_code=${getProvince()}&lang_code=${getLang()}`,\r\n}\r\n","/* global Draggable, mzFunc */\r\n\r\nimport React, { useEffect, useState, useRef } from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport const ThreeSixtyView = ({ imagePath, imageAmount, imageName, isLoading, ...props }) => {\r\n\tconst [summaryCalculator = new SummaryCalculator().reloadStoredData(), setSummaryCalculator] = React.useState();\r\n\tconst [imageList, setImageList] = React.useState(null)\r\n const ts = useRef();\r\n\tconst [trigger, setTrigger] = React.useState(ts.current)\r\n\tconst [imageCount, setImageCount] = React.useState(1);\r\n\tconst [draggableIsReady, setDraggableIsReady] = React.useState(false);\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const getImages = ()=>{\r\n let images ='';\r\n for(let i=1;i<=parseInt(imageAmount);i++){\r\n images+=`\r\n {HasFinancialProviderError ?
\r\n {t(\"general:service_error\")}
: ''}\r\n{t(\"app_title\")}
\r\n{t(\"select_a_model\")}
\r\n\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n \t{Cats}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n
\r\n {Model}\r\n
\r\n \r\n\t {\r\n\t\t\t\t\t\t\tdocument.querySelector('body').classList.add('disabled');\r\n\t\t\t\t\t\t\tsetLegalModalOpen(true);\r\n\t\t\t\t\t\t\tgtmHelper.setGTM({'action':'Open Modal','modal': 'legal'}, true, false);\r\n\t\t\t\t\t\t}}\r\n\t />\r\n\t
\r\n\t\t\t\t\r\n\t\t\t
\r\n )\r\n}\r\n\r\nexport default ThreeSixtyView; ","/*global mzFunc, mzImage360, PhotoSphereViewer */\r\n\r\nimport React from 'react';\r\n\r\nimport { Pannellum } from \"pannellum-react\";\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\n\r\nexport const ThreeSixtyInteriorView = ({ imagePath, ...props }) => {\r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst [panoramaIsReady, setPanoramaIsReady] = React.useState(false);\r\n\r\n\twindow.addEventListener('resize', set360Height);\r\n\r\n\tfunction set360Height(){\r\n\t\tconst container = document.querySelector('.mz-360-container');\r\n\t\tconst subnav = document.querySelector('.mz-sticky-submenu');\r\n\t\tconst pricing = document.querySelector('.mz-pricing');\r\n\t\tconst imageCont = document.querySelector('.mz-360-image-container__interior');\r\n\t\tconst title = document.querySelector('.mz-360-container__tittle');\r\n\t\tconst controls = document.querySelector('.mz-360-container__controls');\r\n\t\tif(imageCont !== null && controls !== undefined && container){\r\n\t\t\tif(window.innerWidth > 1023 && subnav !== undefined && pricing !== undefined && pricing != null){\r\n\t\t\t\tconst alert = mzFunc ? mzFunc.offsetAlert : 0;\r\n\t\t\t\tconst permAlert = mzFunc ? mzFunc.offsetPermAlert : 0;\r\n\t\t\t\tconst menu = mzFunc ? mzFunc.offsetMenu : 0;\r\n\t\t\t\tlet viewHeight = window.innerHeight - ( alert + permAlert + menu + (subnav ? subnav.clientHeight : 0) + (pricing ? pricing.clientHeight : 0));\r\n\t\t\t\t//viewHeight = viewHeight<450? 450 : viewHeight;\r\n\t\t\t\timageCont.style.height= (viewHeight - (title.clientHeight + (controls ? controls.clientHeight : 0))) +'px';\r\n\t\t\t\tcontainer.dataset['height']=imageCont.style.height;\r\n\t\t\t}else{\r\n\t\t\t\t//container.dataset['height']=imageCont.clientHeight + 'px';\r\n\t\t\t\timageCont.style.height=window.innerHeight/3 +'px';\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tfunction enablePanorama(){\r\n\t\tconst interiorEl = document.querySelector('.mz-360-image-container__interior');\r\n\t\tset360Height();\r\n\t\tinteriorEl.innerHTML='';\r\n\t\tconsole.log(document.getElementById('interiorModal'))\r\n\t\tif(!document.getElementById('interiorModal')){\r\n\t\t\tconst fullScreen = document.createElement('div');\r\n\t\t\tfullScreen.classList.add('mz-modal');\r\n\t\t\tfullScreen.id='interiorModal';\r\n\t\t\tfullScreen.setAttribute('aria-hidden', 'true');\r\n\t\t\tdocument.body.appendChild(fullScreen);\r\n\t\t}\r\n\t\tconsole.log(document.getElementById('interiorModal'))\r\n\t\tmzImage360.showPanorama(interiorEl, imagePath);\r\n\t}\r\n\r\n\tReact.useEffect(() => {\r\n\t\tif(!panoramaIsReady){\r\n\t\t\tconst ref = setInterval(() => {\r\n\t\t\t\tif(typeof PhotoSphereViewer == 'object') {\r\n\t\t\t\t\tenablePanorama();\r\n\t\t\t\t\tclearInterval(ref);\r\n\t\t\t\t}\r\n\t\t\t}, 100);\r\n\t\t}\t\t\r\n\t}, [imagePath]);\r\n\r\n\t// \r\n \t\t\t
\r\n \r\n\t\t\t\t\t{!imageList ? ![](\"/globalassets/mazda-canada/build-and-price/360_loadinganimation.gif\")
: ReactHtmlParser(imageList)}\r\n\t\t\t\t
\r\n\t\t\t : ReactHtmlParser(imageList)}\r\n\t\t\t\t\r\n\t\t \r\n\t\t
\r\n\t)\r\n}\r\n\r\nexport default ThreeSixtyInteriorView;","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport ThreeSixtyView from '../../2_Molecules/360View/360View';\r\nimport ThreeSixtyInteriorView from '../../2_Molecules/360InteriorView/360InteriorView';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\n\r\nexport const ThreeSixtyContainer = ({ imagePathInterior, imagePath, imageAmount, imageName, trimName, imageIsLoading, ...props }) => {\r\n const [vehicleTrimName, setTrimName] = React.useState(trimName);\r\n const [active360, setActive360] = React.useState('exterior');\r\n //const [isModalOpen, setIsModalOpen] = React.useState(false);\r\n const [isLoading, setIsLoading] = React.useState(false);\r\n const { t, i18n } = useTranslation(['general']);\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n function toggleView() {\r\n var activeView = active360 === 'interior' ? 'exterior' : 'interior';\r\n setActive360(activeView);\r\n\t\tgtmHelper.setGTM({'action':'Change 360 View', '360 View': activeView}, true , false);\r\n }\r\n\r\n // This will launch only if trimName value has chaged.\r\n React.useEffect(() => {\r\n setTrimName(trimName);\r\n\r\n setIsLoading(imageIsLoading);\r\n }, [trimName, imagePath, imageIsLoading]);\r\n\r\n return (\r\n \r\n
\r\n\r\n )\r\n}\r\n\r\nexport default ThreeSixtyContainer;","import React, { useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport const Collapse = ({ ColCarText1, ColCarText1Button, ColCarText2, ColCarText3, ColCarImg, ColBoxText, Selected, isPopular, isExpanded, setExpandedIndex, LegalContent, index, showCheck, ...props }) => {\r\n const [toggle, setToggle] = React.useState(false);\r\n const { t, i18n } = useTranslation(['trims']);\r\n const collapseRef = useRef(null);\r\n\r\n useEffect(() =>{\r\n if(typeof window.mzAnimator === 'object'){\r\n function setHeight(){\r\n window.mzAnimator.animateHeight(collapseRef.current, 'TrimCollapse' + index, 'init')\r\n // console.log('init',collapseRef.current, index, window.mzAnimator.heightOrigin['TrimCollapse' + index])\r\n if(window.mzAnimator.heightOrigin['TrimCollapse' + index] === 0){\r\n setTimeout(setHeight, 100);\r\n }\r\n }\r\n setHeight()\r\n }\r\n },[]);\r\n \r\n useEffect(() =>{\r\n window.mzAnimator.animateHeight(collapseRef.current, 'TrimCollapse' + index, isExpanded)\r\n //console.log('isExpanded',collapseRef.current, index, window.mzAnimator.heightOrigin['TrimCollapse' + index], isExpanded)\r\n },[isExpanded]);\r\n\r\n return (\r\n {ReactHtmlParser(vehicleTrimName ? vehicleTrimName : '')}
\r\n {active360 === 'interior' ?\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n const $el = e.target;\r\n\r\n console.log($el, 'button.mz-trims-list__select-trim-button')\r\n\r\n if ($el.matches('button.mz-trims-list__select-trim-button')) {\r\n return;\r\n }\r\n\r\n if (isExpanded !== null && setExpandedIndex !== null && index !== null) {\r\n if (isExpanded === true) {\r\n setExpandedIndex(null);\r\n } else {\r\n setExpandedIndex(index);\r\n\t\t\t\t\t\t\tsetTimeout(()=>{\r\n\t\t\t\t\t\t\t\tconst collapseTarget = e.target.closest('.mz-collapse');\r\n\t\t\t\t\t\t\t\tif(collapseTarget){\r\n\t\t\t\t\t\t\t\t\tconst scrollWindow = document.querySelector('.mz-trims-list');\r\n\t\t\t\t\t\t\t\t\tconst topScroll = collapseTarget.offsetTop;\r\n\t\t\t\t\t\t\t\t\tscrollWindow.scroll({\r\n\t\t\t\t\t\t\t\t\t top:topScroll,\r\n\t\t\t\t\t\t\t\t\t behavior: 'smooth'\r\n\t\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t},1000);\r\n }\r\n } else {\r\n setToggle(!toggle);\r\n }\r\n }}\r\n className=\"mz-collapse__button\"\r\n >\r\n {showCheck &&\r\n
\r\n \r\n }\r\n
\r\n 
\r\n
\r\n {ReactHtmlParser(LegalContent)}\r\n\r\n \r\n {isPopular ?
\r\n \r\n {t(\"popular\")}
: null}\r\n{ReactHtmlParser(ColCarText1)}
\r\n{ColCarText2}1{`${ColCarText3}`}
\r\n\r\n {ReactHtmlParser(ColBoxText)}\r\n
\r\n {ReactHtmlParser(ColCarText1Button)}\r\n\r\n {ReactHtmlParser(ColBoxText)}
\r\n \r\n )\r\n}\r\n\r\nCollapse.propTypes = {\r\n ColCarImg: PropTypes.string,\r\n ColCarText1: PropTypes.string,\r\n ColCarText2: PropTypes.string,\r\n ColCarText3: PropTypes.string,\r\n ColBoxText: PropTypes.string,\r\n ColCarText1Button: PropTypes.string,\r\n isExpanded: PropTypes.bool,\r\n setExpandedIndex: PropTypes.func,\r\n index: PropTypes.number\r\n}\r\n\r\nCollapse.defaultProps = {\r\n ColCarImg: 'https://via.placeholder.com/100x60',\r\n ColCarText1: 'CX-5 GX',\r\n ColCarText2: '$XX,XXX',\r\n ColCarText3: '($XXX/wk)',\r\n ColBoxText: 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Proin eget tortor risus.',\r\n ColCarText1Button: null,\r\n isExpanded: null,\r\n setExpandedIndex: null,\r\n index: null\r\n\r\n}\r\n\r\nexport default Collapse;","import React from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { formatPrice, getFinanceWeekly, getLeaseBiWeeklyFromMsrp } from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport Collapse from '../../2_Molecules/Collapse/Collapse';\r\n\r\nexport const TrimList = ({ trims, setSelectedTrim, selectedTrim, setLegalModalOpen, showFinancePrice, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const [trimsData, setTrimsData] = React.useState([]);\r\n let [financeTerm, setFinanceTerm] = React.useState(parseInt(sessionStorage.getItem(Constants.FinanceTerm)));\r\n let [leaseTerm, setLeaseTerm] = React.useState(parseInt(sessionStorage.getItem(Constants.LeaseTerm)));\r\n const [expandedIndex, setExpandedIndex] = React.useState(null);\r\n const listRef = React.useRef();\r\n const { t, i18n } = useTranslation(['trims']);\r\n const handleTrimClick = e => {\r\n const $el = e.target;\r\n if ($el.matches('button.mz-trims-list__select-trim-button')) {\r\n e.stopPropagation();\r\n const index = Number($el.getAttribute('data-index'));\r\n setSelectedTrim(index);\r\n }\r\n };\r\n\r\n const setTermIndex = ()=>{\r\n // Fetch the selected term or select the last one\r\n let foundLeaseTermIndex = summaryCalculator.FinancialInfo.lease.findIndex(x => x.term === leaseTerm);\r\n if(!leaseTerm || foundLeaseTermIndex === -1)\r\n foundLeaseTermIndex = summaryCalculator.FinancialInfo.lease.length - 1;\r\n setLeaseTerm = summaryCalculator.FinancialInfo.lease[foundLeaseTermIndex].term;\r\n\r\n let foundFinanceIndex = summaryCalculator.FinancialInfo.apr.findIndex(x => x.term === financeTerm);\r\n if(!financeTerm || foundFinanceIndex === -1)\r\n foundFinanceIndex = summaryCalculator.FinancialInfo.apr.length - 1;\r\n setFinanceTerm = summaryCalculator.FinancialInfo.apr[foundFinanceIndex].term;\r\n }\r\n\r\n React.useEffect(() =>{\r\n document.addEventListener('click', handleTrimClick);\r\n\r\n if(summaryCalculator.FinancialInfo){\r\n setTermIndex()\r\n }\r\n\r\n setTrimsData(trims);\r\n\r\n if (listRef.current) {\r\n window.removeEventListener('resize', setListMaxHeight);\r\n window.addEventListener('resize', setListMaxHeight);\r\n setListMaxHeight();\r\n }\r\n\r\n return () => {\r\n document.removeEventListener('click', handleTrimClick);\r\n };\r\n },[trims, summaryCalculator.FinancialInfo, summaryCalculator.FinancialInfo?.calculatedCash, summaryCalculator.FinancialInfo?.calculatedFinance, summaryCalculator.FinancialInfo?.calculatedLease]);\r\n\r\n function isJellyPathConform(jelly)\r\n {\r\n if(!jelly)\r\n return false;\r\n\r\n var jellyContents = jelly.split('-');\r\n\r\n // Validate that we have a trim\r\n if(jellyContents && !jellyContents[jellyContents.length - 2])\r\n return false;\r\n else\r\n return true;\r\n }\r\n\r\n function getImage(trim) {\r\n const imagePath = trim.visual.static_content_base_path;\r\n //const key = Object.keys(trim.visual.exteriors)[0];\r\n\r\n if (isJellyPathConform(trim.visual.jelly)) {\r\n // Patch for the value received from the backend that has a space in.\r\n return `${imagePath}${trim.visual.jelly_path}${trim.visual.jelly.replace(/ /g, \"-\")}`;\r\n } else {\r\n // Patch for when the jelly hasn't been set in the api correctly (i.e. missing a trim like this `2022-MAZDA3--TAB.png`;)\r\n return `${imagePath}${trim.visual.jelly_path}${trim.title.replace(/ /g, '-')}-TAB.png`;\r\n }\r\n }\r\n\r\n function getLegalContent(legalArr){\r\n let legalContent = '';\r\n legalArr.map((legal, index) => {\r\n const icon = legal.icon_type === 'disclaimer' ? 'disclaimer' : 'feature_' + legal.icon_type;\r\n legalContent += `\r\n \r\n
`;\r\n })\r\n return legalContent;\r\n }\r\n\r\n function getTrimDataContent(item, index) {\r\n let highlitedfeatureList = '${legal.content}
- ';\r\n item.highlighted_features.forEach(feature => {\r\n let featureItem = '
- ';\r\n featureItem += ``;\r\n featureItem += `
${feature.content}
`;\r\n highlitedfeatureList += featureItem;\r\n });\r\n highlitedfeatureList += '
${item.feature_list_title}
`:'';\r\n let featureList = '- ';\r\n\r\n item.feature_list.forEach(feature => {\r\n let featureItem = '
- ';\r\n featureItem += `
${feature.content}
`;\r\n featureList += featureItem;\r\n });\r\n featureList += '
\r\n \r\n \r\n\t\t\t})}\r\n
\r\n )\r\n}\r\n\r\n\r\nexport default TrimList;","import React, { useState } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom'\r\nimport { data } from 'cheerio/lib/api/attributes';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { get360Data, goToTop, getLoading, setCursorWaiting } from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\nimport ThreeSixtyContainer from '../../3_Organisms/360Container/360Container';\r\nimport TrimList from '../../3_Organisms/TrimList/TrimList'\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\n\r\nexport const TrimsPage = ({summaryCalculator = window.summaryCalculator, ...props }) => {\r\n const { year, carline } = useParams();\r\n\r\n const [images, setImages] = useState({});\r\n const navigate = useNavigate();\r\n const [loading, setLoading] = useState(true);\r\n const [is360Loading, setIs360Loading] = useState(true); \r\n const [firstEmptyDataLoad, setFirstEmptyDataLoad] = useState(false);\r\n const [fromTrimSelection, setFromTrimSelection] = useState(false);\r\n const [dataNeedUpdate, setDataNeedUpdate] = useState(false);\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalTrims));\r\n const [legalModalOpen, setLegalModalOpen] = useState(false);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n const [selectedTrimIndex, setSelectedTrimIndex] = useState(null);\r\n const { t, i18n } = useTranslation(['trims', 'general']);\r\n const [nav, setNav] = React.useState(null);\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n\r\n const navHelper = new NavHelper();\r\n\tconst gtmHelper = new GTMHelper();\r\n \r\n summaryCalculator.CurrentStep = 1;\r\n \r\n function set360images() {\r\n if(!summaryCalculator.Colours)\r\n return;\r\n\r\n if (!Object.keys(images).length) {\r\n summaryCalculator.SetSelectedColorsFromParams();\r\n\r\n if (summaryCalculator.SelectedColourExteriorIndex > -1 && summaryCalculator.Colours) {\r\n const extArray = Object.entries(summaryCalculator.Colours.visual.exteriors);\r\n setImages(get360Data(summaryCalculator.Colours.visual, extArray[summaryCalculator.SelectedColourExteriorIndex][1], summaryCalculator.Colours.visual.interiors[summaryCalculator.SelectedColourInteriorIndex]));\r\n setIs360Loading(false);\r\n } else if (summaryCalculator.AvailableTrim) {\r\n setImages(get360Data(summaryCalculator.AvailableTrim.trims[summaryCalculator.SelectedTrimIndex].visual));\r\n setIs360Loading(false);\r\n }\r\n }\r\n }\r\n\r\n function nextStep() {\r\n\t\tlet url;\r\n if (summaryCalculator.SelectedTrim) {\r\n goToTop();\r\n url=`/${year}/${carline}/${summaryCalculator.SelectedTrimUrlSlug}${decodeURI(window.location.search)}`;\r\n } else {\r\n goToTop();\r\n url=`/${year}/${carline}/${summaryCalculator.DefaultTrimUrlSlug}${decodeURI(window.location.search)}`;\r\n }\r\n\t\tnavigate(url);\r\n\t\tgtmHelper.setGTM({'action':'Next Step'}, true , false);\r\n }\r\n\r\n async function handleSelectTrim(index) {\r\n setImages({});\r\n\r\n setFromTrimSelection(true);\r\n\r\n setSelectedTrimIndex(index);\r\n\r\n setDataNeedUpdate(true);\r\n }\r\n\r\n function hideShownCmsBlock() {\r\n let toHideBlocks = document.querySelectorAll('.mz-footer.visually-shown');\r\n if (toHideBlocks) {\r\n toHideBlocks.forEach(function (e) {\r\n e.classList.remove('visually-shown');\r\n e.classList.add('visually-hidden');\r\n });\r\n }\r\n }\r\n\r\n hideShownCmsBlock();\r\n\r\n goToTop();\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n React.useEffect(() => {\r\n async function executeTasks() {\r\n if (window.bnp_under_maintenance)\r\n return;\r\n \r\n if (!firstEmptyDataLoad) {\r\n setCursorWaiting(true);\r\n\r\n setFirstEmptyDataLoad(true);\r\n\r\n if (!summaryCalculator.isDataLoaded()) {\r\n summaryCalculator.reset(false);\r\n\r\n await summaryCalculator.loadVehicleData(year, carline);\r\n\r\n if (JSON.parse(sessionStorage.getItem(Constants.HasFinancialProviderError)) === true) {\r\n const vehiclePageUri = `/${decodeURI(window.location.search)}`;\r\n navigate(vehiclePageUri)\r\n }\r\n }\r\n else\r\n {\r\n setImages({});\r\n }\r\n\r\n setSelectedTrimIndex(summaryCalculator.SelectedTrimIndex);\r\n\r\n setDataNeedUpdate(true);\r\n\r\n setLoading(false);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n if (!loading) {\r\n if (dataNeedUpdate) {\r\n setDataNeedUpdate(false);\r\n\r\n setLoading(true);\r\n\r\n if (selectedTrimIndex !== summaryCalculator.SelectedTrimIndex) {\r\n setCursorWaiting(true);\r\n\r\n if( fromTrimSelection ) {\r\n summaryCalculator.reset(false);\r\n setFromTrimSelection(false);\r\n }\r\n\r\n await summaryCalculator.setSelectedTrimIndex(selectedTrimIndex);\r\n\r\n\t\t\t\t\t\tgtmHelper.setGTM({'action':'Trim Change'}, false, false);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender);\r\n\r\n if (Object.keys(images).length === 0) {\r\n set360images();\r\n }\r\n\r\n setLoading(false);\r\n }\r\n }\r\n }\r\n\r\n executeTasks();\r\n }, [summaryCalculator, loading, dataNeedUpdate, images, selectedTrimIndex, is360Loading]);\r\n\r\n function handleShowFinanceClick(value) {\r\n summaryCalculator.ShowFinancePrice = value;\r\n setShowFinancePrice(value);\r\n }\r\n\r\n function getContent() {\r\n return (\r\n {t(\"select_a_trim\")}
\r\n {summaryCalculator.displayWarning() ?\r\n \r\n {t(\"warning_change_trim\")}\r\n
: null}\r\n {trimsData.map((trim, index) => {\r\n const trimContent = getTrimDataContent(trim, index);\r\n const thumbnail = getImage(trim);\r\n const button = getTrimButton(trim, index);\r\n const legalContent = getLegalContent(trim.alert_features);\r\n return \r\n {\r\n\t\t\t\t\tdocument.querySelector('body').classList.add('disabled');\r\n\t\t\t\t\tsetLegalModalOpen(true)\r\n\t\t\t\t}}\r\n />\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n <>\r\n {getLoading(loading, t)}\r\n {getContent()}\r\n \r\n )\r\n}\r\n\r\nexport default TrimsPage;","import React from 'react';\r\nimport { useRef, useEffect } from 'react';\r\n\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\n\r\nexport const CollapseList = ({CollapseClasses, ColCarText1, ColBoxText, TooltipName, TooltipText, ColClassPrice, ColPrices, id, ...props }) => {\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n const [toggle, setToggle] = React.useState(false);\r\n const collapseRef = useRef();\r\n const [didInit, setInit] = React.useState(false);\r\n\r\n useEffect(() =>{\r\n const collapse = collapseRef.current; \r\n \r\n if(typeof window.mzAnimator === 'object' && !didInit && toggle){\r\n window.mzAnimator.animateHeight(collapse, 'CollapseList' + id, 'init')\r\n setInit(true);\r\n toggleCollapse(collapse);\r\n }else{\r\n toggleCollapse(collapse);\r\n }\r\n },[toggle, didInit]);\r\n\r\n useEffect(() =>{\r\n // Force a rerender to fix the height since the content has chanegd\r\n setInit(false);\r\n },[ColBoxText]);\r\n\r\n function toggleCollapse(collapse){\r\n if(toggle){\r\n window.mzAnimator.animateHeight(collapse, 'CollapseList' + id, true)\r\n }else if(toggle === false){\r\n window.mzAnimator.animateHeight(collapse, 'CollapseList' + id, false)\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n : null}\r\n\r\n {summaryCalculator.AvailableTrim && summaryCalculator.AvailableTrim?.trims?.length ?\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n\t\t\t\t\tsetToggle(!toggle);\r\n\t\t\t\t\tgtmHelper.setGTM({'action':'Collapse', 'type': 'Cash ' + ColCarText1, 'value': toggle}, true , false);\r\n\t\t\t\t}}\r\n className={CollapseClasses}\r\n >\r\n
\r\n )\r\n}\r\n\r\nCollapseList.propTypes = {\r\n CollapseClasses: PropTypes.string,\r\n ColCarText1: PropTypes.string,\r\n ColBoxText: PropTypes.string,\r\n TooltipName: PropTypes.string,\r\n ColPrices: PropTypes.string,\r\n ColClassPrice: PropTypes.string,\r\n}\r\n\r\nCollapseList.defaultProps = {\r\n CollapseClasses: 'mz-collapse__button',\r\n ColCarText1: 'Term: 60 months @2.95%',\r\n ColPrices: '$XX,XXX',\r\n ColClassPrice: 'mz-collapse__price',\r\n ColBoxText: 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Proin eget tortor risus.',\r\n}\r\n\r\nexport default CollapseList;","import React from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport OcaService from '../../../Services/OcaService';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\n\r\nexport const OcaModal = ({financeType, handleClose, isOpen, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const { t, i18n } = useTranslation(['general']);\r\n\r\n const ocaService = new OcaService();\r\n\r\n \r\n function handleExit(e){\r\n ocaService.sendDataToService(summaryCalculator, financeType);\r\n }\r\n return (\r\n \r\n
\r\n \r\n {ColPrices}\r\n \r\n \r\n {ReactHtmlParser(ColCarText1)}\r\n {TooltipName !=='' && TooltipName !== undefined ?:}\r\n
\r\n { ReactHtmlParser (ColBoxText) }
\r\n \r\n
\r\n )\r\n}\r\n\r\nOcaModal.defaultProps = {\r\n handleClose: () => {\r\n },\r\n};\r\n\r\n","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const ReserveModal = ({modalContent, isOpen, modalId, handleClose, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const { t } = useTranslation(['summary', 'general']);\r\n //const [reserveOpen, setReserveOpen] = React.useState(isOpen);\r\n\r\n React.useEffect(() => {\r\n // Restart React Forms app.\r\n // Skip if this is the first time loading it because App.js takes care of it.\r\n if (window.isReactFormsAppLoaded && typeof window.initReactFormsApp === 'function') {\r\n window.initReactFormsApp();\r\n }\r\n }, [isOpen]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"general:ocaTitle\")}
\r\n \r\n{t(\"general:ocaContent\")}
\r\n \r\n\r\n {\r\n handleClose(false);\r\n document.querySelector('body').classList.remove('disabled');\r\n handleExit(e);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nReserveModal.propTypes = {\r\n HandleTabClick: PropTypes.func,\r\n}\r\n\r\nReserveModal.defaultProps = {\r\n handleClose: () => {\r\n },\r\n};","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\n\r\nimport { formatPrice, getBaseUrl, getMazdaFeesAndLeviesDetailTitle, convertKM, convertNum, getLang, getProvince, getDisplayableProvinceName } from '../../../utils';\r\n\r\nimport { openModal } from '../../../Helpers/helpers';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\nimport { Button } from '../../1_Atoms/Button/Button';\r\nimport { CollapseList } from '../../2_Molecules/Collapse/CollapseList';\r\nimport { OcaModal } from '../../3_Organisms/Modal/OcaModal';\r\nimport { ReserveModal } from '../../3_Organisms/Modal/ReserveModal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\n\r\nexport const Financial = ({\r\n openCollapsable,\r\n setOpenCollapsable,\r\n ...props }) => {\r\n\r\n const gtmHelper = new GTMHelper();\r\n \r\n const { year, carline, trim, model, packageCode } = useParams();\r\n\r\n const { t, i18n } = useTranslation(['summary', 'payments', 'general']);\r\n \r\n const [reserveOpen, setReserveModalOpen] = React.useState(false);\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n\r\n const [ocaOpen, setOcaModalOpen] = React.useState(false);\r\n const [financeType, setFinanceType] = React.useState(false);\r\n const [getLocalOpen, setGetLocalOpen] = React.useState(false);\r\n\r\n let payment = sessionStorage.getItem(Constants.UrlSlugObjectPayments);\r\n let pathToPayment = '';\r\n\r\n if(payment) {\r\n payment = JSON.parse(payment);\r\n pathToPayment = '/'+payment.year+'/'+payment.carline+'/'+payment.trim+'/'+payment.model+'/'+payment.packageCode+'/payments?prov_code='+getProvince();\r\n } else {\r\n pathToPayment = '/'+year+'/'+carline+'/'+trim+'/'+model+'/'+packageCode+'/payments?prov_code='+getProvince();\r\n }\r\n\r\n const navigate = useNavigate();\r\n const [summaryCalculator = new SummaryCalculator().reloadStoredData(), setSummaryCalculator] = React.useState();\r\n const [feesChecked, setFeesChecked] = React.useState(summaryCalculator.IncludeFees);\r\n const [taxesChecked, setTaxesChecked] = React.useState(summaryCalculator.IncludeTaxes);\r\n const [rebatesChecked, setRebatesChecked] = React.useState(summaryCalculator.IncludeRebates);\r\n const [dataDisplayed, setDataDisplayed] = React.useState(false);\r\n const [selectedBox, setSelectedBox] = React.useState(null);\r\n\r\n const [financeTermIndex, setFinanceTermIndex] = React.useState(0);\r\n const [leaseTermIndex, setLeaseTermIndex] = React.useState(0);\r\n\r\n const financeTerm = summaryCalculator.FinanceTerm ? summaryCalculator.FinanceTerm : summaryCalculator.FinancialInfo.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].term;\r\n const leaseTerm = summaryCalculator.LeaseTerm ? summaryCalculator.LeaseTerm: summaryCalculator.FinancialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].term;\r\n const currentIncentives = summaryCalculator.FinancialInfo.incentive_programs.find(element => element.type === \"incentive\");\r\n\r\n const inclusionCheck = async (event) => {\r\n if(event.target.id === 'fees') {\r\n summaryCalculator.IncludeFees = !summaryCalculator.IncludeFees;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setFeesChecked(!feesChecked);\r\n\r\n gtmHelper.setGTM({'action':'Checkbox', 'type': 'Include fees', 'value': feesChecked}, true , false);\r\n }\r\n if(event.target.id === 'taxes') {\r\n summaryCalculator.IncludeTaxes = !summaryCalculator.IncludeTaxes;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setTaxesChecked(!taxesChecked)\r\n\r\n gtmHelper.setGTM({'action':'Checkbox', 'type': 'Include taxes', 'value': taxesChecked}, true , false);\r\n }\r\n if(event.target.id === 'rebates') {\r\n summaryCalculator.IncludeRebates = !summaryCalculator.IncludeRebates;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setRebatesChecked(!rebatesChecked);\r\n \r\n gtmHelper.setGTM({'action':'Checkbox', 'type': 'Include rebate', 'value': rebatesChecked}, true , false);\r\n }\r\n }\r\n\r\n const Obj = JSON.parse(sessionStorage.getItem(Constants.FinancialObj));\r\n\r\n const handleEditFinanceLinkClick = (e) => {\r\n e.preventDefault();\r\n\r\n navigate(pathToPayment);\r\n }\r\n\r\n const handleEditLeaseLinkClick = (e) => {\r\n e.preventDefault();\r\n\r\n navigate(pathToPayment);\r\n }\r\n\r\n function getOptionList() {\r\n let optionList = '';\r\n \r\n const options = summaryCalculator.FinancialInfo ?.calculatedFinance ?.options;\r\n\r\n if(options.exteriorColour.price >0){\r\n optionList += ` \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {isOpen &&\r\n <>\r\n
\r\n {t(\"title_reserve_yours\")}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n ${t('payments:exterior')} ${options.exteriorColour.description}
\r\n ${formatPrice(options.exteriorColour.price, true)}\r\n${t('payments:interior')} ${options.interiorColour.description}
\r\n ${formatPrice(options.interiorColour.price, true)}\r\n${t('payments:package')} ${options.model_option_package.name}
\r\n ${formatPrice(options.model_option_package.financial.msrp, true)}\r\n${t(\"payments:warranties\")} ${selectedWarrantyPackage.name}
\r\n ${formatPrice(warrantyPrice, true)}\r\n${t(\"payments:connected\")} ${selectedConnectedVehiclePackage.title}
\r\n ${formatPrice(connectedPrice, true)}\r\n${t(\"payments:added_protection\")} ${selectedAddedProtectionPackage.name}
\r\n ${formatPrice(selectedAddedProtectionPackagePrice, true)}\r\n${t(\"payments:appearance_protection\")} ${appearanceProtectionPlan.name} ${selectedAppearanceProtectionPlansPackage.name}
\r\n ${formatPrice(selectedAppearanceProtectionPlansPackagePrice, true)}\r\n${options.wheels.title}
\r\n ${formatPrice(options.wheels.price, true)}\r\n${t(\"payments:accessories\")}${t(\"payments:accLegal\")}
${formatPrice(summaryCalculator.FinancialInfo.calculatedCash.accessories.total, true)}- \r\n
${getMazdaFeesAndLeviesDetailTitle(\"Administration Fee\", t)}9
${formatPrice(summaryCalculator.FinancialInfo.adminServiceFees, true)} \r\n ${t(\"payments:msrp\")}
${formatPrice(summaryCalculator.SelectedModel.financial.msrp, true)} \r\n ${getOptionList()}\r\n ${t(\"payments:freight\")}
${formatPrice(summaryCalculator.FinancialInfo.freight, true)} \r\n ${t(\"general:pde\")}
${formatPrice(summaryCalculator.FinancialInfo.pde, true)} \r\n
- \r\n
${`4x ${options.wheels.title}`}
${formatPrice(options.wheels.base_msrp, true)} \r\n ${`4x ${t(\"payments:tpms\")}`}
${formatPrice(options.wheels.tpms, true)} \r\n ${t(\"payments:installation\")}
${formatPrice(options.wheels.install_cost, true)} \r\n
- \r\n
${`${selectedConnectedVehiclePackage.title}`}
${formatPrice(connectedPrice, true)} \r\n
- \";\r\n //console.log(accessories);\r\n accessories.map((accessory, index) => {\r\n list += `
${accessory.name}
${formatPrice(accessory.base_msrp, true)} `\r\n list += `${accessory.name} - Installation
${formatPrice(accessory.install_cost, true)} `\r\n });\r\n list += \"
- \"; \r\n\r\n if(summaryCalculator.SelectedAddedProtectionPackage.name != undefined ){\r\n list += `
${t(\"payments:added_protection\")} ${summaryCalculator.SelectedAddedProtectionPackage.name}
${formatPrice(summaryCalculator.SelectedAddedProtectionPackage.financial.msrp, true)} `\r\n }\r\n if(summaryCalculator.SelectedAppearanceProtectionPlan.name != undefined && summaryCalculator.SelectedAppearanceProtectionPlansIndex !== null) {\r\n\r\n list += `${t(\"payments:appearance_protection\")} ${summaryCalculator.SelectedAppearanceProtectionPlansPackage.name} for ${summaryCalculator.SelectedAppearanceProtectionPlan.name}
${formatPrice(summaryCalculator.SelectedAppearanceProtectionPlansPackage.financial.msrp, true)} `\r\n } \r\n\r\n list += \"
- \r\n ${feesAndLeviesToDisplay.map((fee, index) => `
- \r\n
${getMazdaFeesAndLeviesDetailTitle(fee.title, t)}${fee.sup ? `${fee.sup}` : ''}
${formatPrice(fee.price, true)}\r\n `).join(\"\")}\r\n
- \r\n ${summaryCalculator.FinancialInfo.calculatedCash.evRebates.details.map((rebate, index) => `
- \r\n \t
${rebate.title==='federal'? t('payments:fed_rebate'):t('payments:prov_rebate') + ' ('+getProvince()+')'}
-${formatPrice(rebate.cash, true)}\r\n `).join(\"\")}\r\n
- \r\n ${Obj.calculatedCash.incentives.taxable.details.map((incentive, index) => {\r\n const price = incentive.cash_value ? incentive.cash_value : incentive.value;\r\n return `
- \r\n
${getIncentiveDisplayName(incentive)}
-${formatPrice(price, true)}\r\n `;\r\n }).join(\"\")}\r\n ${Obj.calculatedCash.incentives.nonTaxable.details.map((incentive, index) => {\r\n const price = incentive.cash_value ? incentive.cash_value : incentive.value;\r\n return ` - \r\n
${getIncentiveDisplayName(incentive)}
-${formatPrice(price, true)}\r\n `;\r\n }).join(\"\")}\r\n ${currentIncentives && currentIncentives.value > 0 ? ` - \r\n
${t(\"payments:current_incentives\")}
\r\n ${currentIncentives?'-':''}${formatPrice(currentIncentives.value, true)}\r\n `:''}\r\n ${(summaryCalculator.FinancialInfo.mazdaCashIncentive > 0) ? ` - \r\n
${t(\"payments:mazda_cash_incentive\")}
\r\n ${summaryCalculator.FinancialInfo.mazdaCashIncentive?'-':''}${formatPrice(summaryCalculator.FinancialInfo.mazdaCashIncentive, true)}\r\n `:''}\r\n - \r\n
${t(\"payments:trade_in\")}1
${Obj.tradeInValue>0?'-':''}${formatPrice(Obj.tradeInValue, true)}\r\n \r\n
\r\n {ReactHtmlParser(t(\"general:QCEVDisclaimer\"))}\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n }\r\n function handleContactDealerLinkClick(e){\r\n if(e.target.id === 'QCEVD_link' && document.getElementById('contactDealer')){\r\n e.preventDefault();\r\n console.log(document.getElementById('contactDealer'))\r\n document.getElementById('contactDealer').scrollIntoView();\r\n }\r\n }\r\n\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\t\t\t\t\t{summaryCalculator.FinancialInfo.calculatedCash.evRebates.details.length > 0 && summaryCalculator.FinancialInfo.calculatedCash.evRebates.details[0].cash &&
\r\n \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
}\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t(\"general:finance\")}
\r\n\r\n {!summaryCalculator.getResponsesHasError() ?\r\n <>\r\n {financeTerm} {t(\"payments:months_lowercase\")} {getLoanRate()}\r\n \r\n :\r\n <>\r\n
\r\n {ReactHtmlParser(t(\"general:generalErrorMessage\"))}\r\n
\r\n }\r\n \r\n\r\n {!summaryCalculator.getResponsesHasError() ?\r\n <>\r\n\r\n
\r\n \r\n : null\r\n } \r\n \r\n \r\n
\r\n {t(\"payments:weekly\")}
\r\n {getLoanWeekly()} \r\n\r\n
\r\n {t(\"payments:bi_weekly\")}
\r\n {getLoanBiWeekly()} \r\n\r\n
\r\n {t(\"payments:monthly\")}
\r\n {getLoanMonthly()} \r\n\r\n {t(\"btn_edit_finance_options\")}\r\n
\r\n\r\n {window.allow_oca ? \r\n
\r\n {!summaryCalculator.getResponsesHasError() ?\r\n \r\n {getLoanInformationalApr()} {t(\"text_information_apr\")}
:null}\r\n \r\n
\r\n {t(\"payments:lease\")}
\r\n\r\n {!summaryCalculator.getResponsesHasError() ?\r\n <>\r\n {leaseTerm} {t(\"payments:months_lowercase\")} {getLeaseRate()}
{getAnnualMileageText()}\r\n \r\n :\r\n <>\r\n
\r\n {ReactHtmlParser(t(\"general:generalErrorMessage\"))}\r\n
\r\n }\r\n \r\n {!summaryCalculator.getResponsesHasError() ?\r\n <>\r\n\r\n
\r\n \r\n :\r\n null} \r\n \r\n\r\n \r\n
\r\n {t(\"payments:weekly\")}
\r\n {getLeaseWeekly()} \r\n\r\n
\r\n {t(\"payments:bi_weekly\")}
\r\n {getLeaseBiWeekly()} \r\n\r\n
\r\n {t(\"payments:monthly\")}
\r\n {getLeaseMonthly()} \r\n{t(\"btn_edit_lease_options\")}
\r\n\r\n {window.allow_oca ? \r\n
\r\n {!summaryCalculator.getResponsesHasError() ?\r\n\t\t\t\t\t\r\n {getLeaseInformationalApr()} {t(\"text_information_apr\")}
:null}\r\n \r\n
\r\n {t(\"payments:cash_purchase_price\")}
\r\n{t(\"purchase_price\")}
\r\n {selectedBox === 'feesCheck' && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalWithFees, true)}}\r\n {selectedBox === 'taxesCheck' &&{formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalTaxed, true)}}\r\n {selectedBox === 'rebatesCheck' && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebates, true)}}\r\n {selectedBox === 'feestaxes' && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalWithFeesTaxed, true)}}\r\n {selectedBox === 'feesrebates' && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalWithFeesWithRebatesAndEvRebates, true)}}\r\n {selectedBox === 'taxesrebates' && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebatesTaxed, true)}}\r\n {selectedBox === 'allCheck' && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotalWithFeesWithRebatesTaxed, true)}}\r\n {selectedBox === null && {formatPrice(summaryCalculator.FinancialInfo.calculatedCash.subtotal, true)}}\r\n \r\n\r\n\r\n {/* {financialInfo?.calculatedCash ?
\r\n\t\t\t\t{t(\"payments:taxes\")}
\r\n
\r\n {selectedBox === 'rebatesCheck' || selectedBox === 'taxesrebates' || selectedBox === 'allCheck' || selectedBox === 'feesrebates' && summaryCalculator.FinancialInfo?.ev_rebates?.length ?< CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price evRebates\" ColCarText1={t(\"payments:gov_rebates\")} ColBoxText={getRebatesDetails()} ColClassPrice=\"mz-collapse__price\" ColPrices={`${summaryCalculator.FinancialInfo.calculatedCash.evRebates.total.cash>0?'-':''}${formatPrice(summaryCalculator.FinancialInfo.calculatedCash.evRebates.total.cash, true)}`} isOpen={openCollapsable === 'mzRebates'} setOpenCollapsable={setOpenCollapsable}/>:null}\r\n {t(\"payments:down_payment\")}1
\r\n {formatPrice(Obj.downPaymentValue, true)}\r\n \r\n {summaryCalculator.isSelectionPreOrder() ?\r\n
\r\n \r\n
\r\n )\r\n};\r\n\r\nSpecsItem.propTypes = {\r\n SpecsItemName: PropTypes.string,\r\n SpecsItemModel: PropTypes.string,\r\n SpecsItemEditUrl: PropTypes.string,\r\n}\r\n\r\nSpecsItem.defaultProps = {\r\n SpecsItemName: 'SPECS NAME',\r\n SpecsItemModel: '',\r\n SpecsItemEditUrl: '',\r\n}\r\n\r\nexport default SpecsItem;","import React from 'react';\r\nimport { useParams } from 'react-router-dom';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { getApiBaseUrl, getLang, getProvince } from '../../../utils';\r\n\r\nimport { handleRequest } from '../../../stories/helpers/httpRequest';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\n\r\nimport { SpecsItem } from '../../2_Molecules/SpecsItem/SpecsItem';\r\n\r\nexport const BuildSpecs = ({ componentRef, ...props }) => {\r\n const { t, i18n } = useTranslation(['summary', 'packages', 'general', 'payments']);\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n\r\n const defaultEngineUrl = `${getApiBaseUrl()}/api/EngineModels/${year}/${carline}/${trim}/?prov_code=${getProvince()}&lang_code=${getLang()}`;\r\n const defaultPackageUrl = `${getApiBaseUrl()}/api/Packages/${model}/${packageCode}/?prov_code=${getProvince()}&lang_code=${getLang()}`;\r\n\r\n\r\n const [defaultDrivetrain, setDefaultDrivetrain] = React.useState(null);\r\n const [defaultEngine, setDefaultEngine] = React.useState(null);\r\n const [defaultPackages, setDefaultPackage] = React.useState(null);\r\n\r\n\r\n let { selectedTrim, selectedTrimUrl} = '';\r\n let { selectedModel, selectedModelUrl} = '';\r\n let { selectedPackage, selectedPackageUrl} = '';\r\n let { selectedColoursInt, selectedColoursExt, selectedColoursUrl} = '';\r\n let { selectedWheel, selectedWheelUrl} = '';\r\n let { selectedConnectivity, selectedConnectivityUrl} = '';\r\n let { selectedAddedProtection, selectedAddedProtectionUrl} = '';\r\n let { selectedAppearanceProtectionPlan, selectedAppearanceProtection, selectedAppearanceProtectionUrl} = '';\r\n\r\n let isWide = false;\r\n\r\n async function defaultEngineRequest() {\r\n handleRequest('get', defaultEngineUrl, {}).then(requestResponse => {\r\n const data = requestResponse.data;\r\n const defaultDrivetrain = data.models[0].drivetrain.label;\r\n const defaultEngine = data.models[0].engine.label;\r\n setDefaultDrivetrain(defaultDrivetrain);\r\n setDefaultEngine(defaultEngine);\r\n }).catch(error => {\r\n console.log(error);\r\n });\r\n }\r\n\r\n async function defaultPackagesRequest() {\r\n handleRequest('get', defaultPackageUrl, {}).then(requestResponse => {\r\n const data = requestResponse.data;\r\n setDefaultPackage(data);\r\n }).catch(error => {\r\n console.log(error);\r\n });\r\n }\r\n\r\n if (!defaultEngine) {\r\n defaultEngineRequest();\r\n }\r\n\r\n if (!defaultPackages) {\r\n defaultPackagesRequest();\r\n }\r\n\r\n if (defaultEngine) {\r\n let model = { engine: { label: defaultEngine }, drivetrain: { label: defaultDrivetrain } };\r\n selectedModel = model;\r\n let modelUrl = '/' + year + '/' + carline + '/' + trim;\r\n selectedModelUrl = modelUrl\r\n\r\n }\r\n\r\n if (defaultPackages) {\r\n let packages = { name: defaultPackages.packages[0] ?.name};\r\n selectedPackage = packages;\r\n let packageUrl = '/' + year + '/' + carline + '/' + trim + '/' + model + '/' + packageCode + '/#';\r\n selectedPackageUrl = packageUrl\r\n }\r\n\r\n if (sessionStorage.getItem('selectedTrim')) {\r\n selectedTrim = sessionStorage.getItem('selectedTrim');\r\n selectedTrim = JSON.parse(selectedTrim);\r\n\r\n selectedTrimUrl = sessionStorage.getItem('urlSlugObjectTrims');\r\n selectedTrimUrl = JSON.parse(selectedTrimUrl);\r\n selectedTrimUrl = '/' + selectedTrimUrl.year + '/' + selectedTrimUrl.carline;\r\n }\r\n\r\n if (sessionStorage.getItem('selectedModel')) {\r\n selectedModel = sessionStorage.getItem('selectedModel');\r\n selectedModel = JSON.parse(selectedModel);\r\n\r\n selectedModelUrl = sessionStorage.getItem('urlSlugObjectEngineAndDrivetrain');\r\n selectedModelUrl = JSON.parse(selectedModelUrl);\r\n selectedModelUrl = '/' + selectedModelUrl.year + '/' + selectedModelUrl.carline + '/' + selectedModelUrl.trim;\r\n }\r\n\r\n if (sessionStorage.getItem('selectedPackage')) {\r\n selectedPackage = sessionStorage.getItem('selectedPackage');\r\n selectedPackage = JSON.parse(selectedPackage);\r\n\r\n // Added this in the case of the build id passed in the url\r\n if (sessionStorage.getItem('urlSlugObjectPackage')) {\r\n selectedPackageUrl = sessionStorage.getItem('urlSlugObjectPackage');\r\n selectedPackageUrl = JSON.parse(selectedPackageUrl);\r\n selectedPackageUrl = '/' + selectedPackageUrl.year + '/' + selectedPackageUrl.carline + '/' + selectedPackageUrl.trim + '/' + selectedPackageUrl.model + '/' + (selectedPackageUrl.option ? selectedPackageUrl.option : selectedPackageUrl.packageCode);\r\n } else {\r\n selectedPackageUrl = defaultPackageUrl;\r\n }\r\n }\r\n\r\n if (sessionStorage.getItem('selectedInteriorColour')) {\r\n selectedColoursInt = sessionStorage.getItem('selectedInteriorColour');\r\n selectedColoursExt = sessionStorage.getItem('selectedExteriorColour');\r\n selectedColoursInt = JSON.parse(selectedColoursInt);\r\n selectedColoursExt = JSON.parse(selectedColoursExt);\r\n\r\n selectedColoursUrl = sessionStorage.getItem('urlSlugObjectColour');\r\n selectedColoursUrl = JSON.parse(selectedColoursUrl);\r\n selectedColoursUrl = '/' + selectedColoursUrl.year + '/' + selectedColoursUrl.carline + '/' + selectedColoursUrl.trim + '/' + selectedColoursUrl.model + '/' + selectedColoursUrl.packageCode + '/colours/';\r\n } else if (sessionStorage.getItem('defaultExteriorColour')) {\r\n selectedColoursInt = sessionStorage.getItem('defaultInteriorColour');\r\n selectedColoursExt = sessionStorage.getItem('defaultExteriorColour');\r\n selectedColoursInt = JSON.parse(selectedColoursInt);\r\n selectedColoursExt = JSON.parse(selectedColoursExt);\r\n\r\n selectedColoursUrl = '/' + year + '/' + carline + '/' + trim + '/' + model + '/' + packageCode + '/colours/';\r\n } else {\r\n selectedColoursUrl = '/' + year + '/' + carline + '/' + trim + '/' + model + '/' + packageCode + '/colours/';\r\n }\r\n\r\n if (sessionStorage.getItem('selectedWheel')) {\r\n selectedWheel = sessionStorage.getItem('selectedWheel');\r\n selectedWheel = JSON.parse(selectedWheel);\r\n\r\n selectedWheelUrl = sessionStorage.getItem('urlSlugObjectWheels');\r\n selectedWheelUrl = JSON.parse(selectedWheelUrl);\r\n selectedWheelUrl = '/' + selectedWheelUrl.year + '/' + selectedWheelUrl.carline + '/' + selectedWheelUrl.trim + '/' + selectedWheelUrl.model + '/' + selectedWheelUrl.packageCode + '/wheels';\r\n } else {\r\n selectedWheelUrl = '/' + year + '/' + carline + '/' + trim + '/' + model + '/' + packageCode + '/wheels';\r\n }\r\n\r\n if(sessionStorage.getItem('selectedConnectedVehiclePackage')) {\r\n selectedConnectivity = sessionStorage.getItem('selectedConnectedVehiclePackage');\r\n selectedConnectivity = JSON.parse(selectedConnectivity);\r\n }\r\n selectedConnectivityUrl = '/'+year+'/'+carline+'/'+trim+'/'+model+'/'+packageCode+'/connectivity';\r\n\r\n\r\n if(sessionStorage.getItem('selectedAppearanceProtectionPlansPackage')) {\r\n // TODO : TRANSFORM INTO A FUNCTION SUMMARYCALCULATOR\r\n if(window.summaryCalculator.Packages?.appearance_protection){\r\n Object.entries(window.summaryCalculator.Packages.appearance_protection[0].plans).map(([key, value], planIndex) => {\r\n if(planIndex === Number(window.summaryCalculator.SelectedAppearanceProtectionIndex)) {\r\n selectedAppearanceProtectionPlan = value;\r\n }\r\n });\r\n }\r\n\r\n selectedAppearanceProtection = sessionStorage.getItem('selectedAppearanceProtectionPlansPackage');\r\n selectedAppearanceProtection = JSON.parse(selectedAppearanceProtection);\r\n }\r\n selectedAppearanceProtectionUrl = '/'+year+'/'+carline+'/'+trim+'/'+model+'/'+packageCode+'/protections#ap';\r\n\r\n if(sessionStorage.getItem('selectedAddedProtectionPackage')) {\r\n selectedAddedProtection = sessionStorage.getItem('selectedAddedProtectionPackage');\r\n selectedAddedProtection = JSON.parse(selectedAddedProtection);\r\n }\r\n selectedAddedProtectionUrl = '/'+year+'/'+carline+'/'+trim+'/'+model+'/'+packageCode+'/protections#map';\r\n\r\n function getProtectionDetails() {\r\n let list = \"\r\n { SpecsItemName }\r\n
\r\n\r\n
\r\n { ReactHtmlParser(SpecsItemModelStriped) }
\r\n\";\r\n\r\n if(window.summaryCalculator.SelectedAddedProtectionPackage.name != undefined ){\r\n list += `${t('payments:added_protection')} ${window.summaryCalculator.SelectedAddedProtectionPackage.name}`\r\n }\r\n if(window.summaryCalculator.SelectedAppearanceProtectionPlan.name != undefined && window.summaryCalculator.SelectedAppearanceProtectionPlansIndex !== null) {\r\n if(window.summaryCalculator.SelectedAddedProtectionPackage.name != undefined ){\r\n list += ', '\r\n }\r\n list += `
${t('payments:appearance_protection')} ${window.summaryCalculator.SelectedAppearanceProtectionPlansPackage.name} for ${window.summaryCalculator.SelectedAppearanceProtectionPlan.name}
`\r\n } \r\n list += \"\"\r\n return list;\r\n }\r\n\r\n function getPackageName() {\r\n let packageName = '';\r\n\r\n\r\n const selectedPackageIndex = JSON.parse(sessionStorage.getItem(Constants.SelectedPackageIndex));\r\n if (selectedPackageIndex !== null)\r\n packageName += `${selectedPackage.name}`;\r\n\r\n const selectedWarrantyPackage = JSON.parse(sessionStorage.getItem('selectedWarrantyPackage'));\r\n if (selectedWarrantyPackage != null && selectedWarrantyPackage.name != undefined) {\r\n isWide = true;\r\n if (packageName != '') packageName += ',';\r\n packageName += `${t(\"packages:warranties\")} : ${selectedWarrantyPackage.name}`;\r\n }\r\n const selectedConnectedVehiclePackage = JSON.parse(sessionStorage.getItem('selectedConnectedVehiclePackage'));\r\n if (selectedConnectedVehiclePackage != null && selectedConnectedVehiclePackage.name != undefined) {\r\n isWide = true;\r\n if (packageName != '') packageName += ',
';\r\n packageName += `${t(\"packages:connected\")} : ${selectedConnectedVehiclePackage.name}`;\r\n }\r\n if (packageName === '')\r\n t(\"general:none_selected\");\r\n\r\n return packageName;\r\n }\r\n\r\n React.useEffect(() => {\r\n }, []);\r\n\r\n return (\r\n
\r\n
\r\n )\r\n};\r\n\r\nBuildSpecs.defaultProps = {\r\n componentRef: null,\r\n}","import React from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Button } from '../../1_Atoms/Button/Button';\r\nimport { AccessoryCard } from '../../2_Molecules/AccessoryCard/AccessoryCard';\r\n\r\nexport const Accessories = ({ ...props }) => {\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const navigate = useNavigate();\r\n const { t, i18n } = useTranslation(['accessories', 'general']);\r\n\r\n const gtmHelper = new GTMHelper();\r\n\r\n function handleAddAccessoriesClick(e) {\r\n\t\te.preventDefault();\r\n const url = '/'+year+'/'+carline+'/'+trim+'/'+model+'/'+packageCode+'/accessories';\r\n\r\n navigate(url);\r\n gtmHelper.setGTM({'action':'Add Accessories'}, true, false);\r\n }\r\n\r\n function EditButton(props) {\r\n let accessories = sessionStorage.getItem(Constants.SelectedAccessories);\r\n accessories = JSON.parse(accessories);\r\n\r\n if(accessories && accessories.length > 0) {\r\n return();\r\n }\r\n }\r\n\r\n function AccessoriesList(props) {\r\n let availableAccessories = JSON.parse(sessionStorage.getItem(Constants.Accessories));\r\n\r\n let accessories = sessionStorage.getItem(Constants.SelectedAccessories);\r\n accessories = JSON.parse(accessories);\r\n const List = []\r\n\r\n console.log(accessories)\r\n if(accessories && accessories.length > 0) {\r\n accessories.forEach((accessory) => {\r\n List.push({t(\"your_build_specifications\")}
\r\n\r\n
\r\n )\r\n } else {\r\n return (\r\n {t(\"no_added_accessories\")}
\r\n {t(\"add_accessories\")}\r\n\r\n
\r\n )\r\n }\r\n }\r\n\r\n return (\r\n {t(\"no_accessorie_comingsoon\")}
\r\n\r\n {List}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nexport const CollapseSpecs = ({ColCarText1, ColBoxText, id, ...props }) => {\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const [toggle, setToggle] = useState(true);\r\n const [currID, setID] = useState(id);\r\n const collapseRef = useRef();\r\n\r\n useEffect(() => {\r\n const collapse = collapseRef.current;\r\n if(typeof window.mzAnimator === 'object'){\r\n window.mzAnimator.animateHeight(collapse, 'CollapseListSpecs' + currID, 'init')\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n const collapse = collapseRef.current;\r\n if(toggle){\r\n window.mzAnimator.animateHeight(collapse, 'CollapseListSpecs' + currID, false)\r\n }else{\r\n window.mzAnimator.animateHeight(collapse, 'CollapseListSpecs' + currID, true)\r\n }\r\n gtmHelper.setGTM({'action':'Collapse', 'type': 'Specs', 'value': toggle, 'title': ColCarText1}, true , false);\r\n },[toggle])\r\n\r\n return (\r\n {t(\"accessories:title\")}
\r\n\r\n {\r\n EditButton()\r\n }\r\n\r\n\r\n {setToggle(!toggle)}}\r\n className=\"mz-collapse__button\"\r\n >\r\n
\r\n )\r\n}\r\n\r\nCollapseSpecs.propTypes = {\r\n ColCarText1: PropTypes.string,\r\n ColBoxText: PropTypes.string,\r\n}\r\n\r\nCollapseSpecs.defaultProps = {\r\n ColCarText1: 'Term: 60 months @2.95%',\r\n ColBoxText: 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Proin eget tortor risus.',\r\n}\r\n\r\nexport default CollapseSpecs;","import React from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Button } from '../../1_Atoms/Button/Button';\r\nimport { CollapseSpecs } from '../../2_Molecules/Collapse/CollapseSpecs';\r\n\r\nimport { getLang } from '../../../utils';\r\n\r\nexport const FeaturedSpecs = ({openCollapsable, ...props }) => {\r\n const { t, i18n } = useTranslation(['summary', 'general']);\r\n const navigate = useNavigate();\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [summaryCalculator = new SummaryCalculator().reloadStoredData(), setSummaryCalculator] = React.useState();\r\n\r\n const [showBrochure] = React.useState(summaryCalculator.AvailableTrim.model_year.show_brochure);\r\n const data = JSON.parse(sessionStorage.getItem(Constants.SpecificationData));\r\n const specsPDF = genereatePDFURL(true);\r\n\tconst brochurePDF = genereatePDFURL(false);\r\n\r\n const gtmHelper = new GTMHelper();\r\n\r\n function genereatePDFURL(isSpec){\r\n\t\tconst pdfType=isSpec?'specs':'brochure';\r\n let URL = `/globalassets/mazda-canada/${getLang()}/pdf/brochures/vehicles/${carline}/${year}-mazda-${carline.toLowerCase()}-${pdfType}-${getLang()}.pdf`;\r\n return URL;\r\n }\r\n\r\n function getTableSpecs(data) {\r\n let table = \"\r\n
\r\n \r\n \r\n {ColCarText1}
\r\n{ ReactHtmlParser (ColBoxText) }
\r\n ${title} | `;\r\n } else {\r\n table += `${title} | `;\r\n table += `${content} | `;\r\n }\r\n\r\n table += \"
\r\n
\r\n)\r\n};","import React from 'react';\r\n\r\nimport { getLang, getBaseUrl} from '../../../utils';\r\n\r\nimport { useTranslation } from \"react-i18next\";\r\n// import PropTypes from 'prop-types';\r\n\r\nexport const Packs = ({ ...props }) => {\r\n const { t, i18n } = useTranslation(['summary', 'general']);\r\n //const lang = getLang();\r\n\r\n const shortLang = getLang() === 'en' ? 'e' : 'f';\r\n\r\n return (\r\n <>\r\n {t(\"full_specifications\")}
\r\n\r\n {data ? Object.keys(data).map((innerAttr, index) => {\r\n const key = `specificationsCollapse${index}`;\r\n const tableHtml = getTableSpecs(data[innerAttr]);\r\n return (\r\n\r\n\t\t\t\t { \r\n window.open(specsPDF, \"_blank\")\r\n gtmHelper.setGTM({'action':'Download', 'type': 'Specs PDF', 'value': specsPDF}, true , false);\r\n }}\r\n />\r\n\t\t\t\t{showBrochure && { \r\n window.open(brochurePDF, \"_blank\");\r\n gtmHelper.setGTM({'action':'Download', 'type': 'Brochure PDF', 'value': brochurePDF}, true , false);\r\n }}\r\n />}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n )\r\n};","/* global mzFunc mzMenu mzTabs */\r\n\r\nimport React, { useRef, useState } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { get360Data, getLoading, showCmsHiddenBlock, getCmsAwardsBlockFromCMS, showCmsFooterHiddenBlock, getProvince } from '../../../utils';\r\n\r\nimport { openModal, scrollTo } from '../../../Helpers/helpers';\r\n//import SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport CollapseLegal from '../../2_Molecules/Collapse/CollapseLegal';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { Financial } from '../../3_Organisms/Financial/Financial';\r\nimport { BuildSpecs } from '../../3_Organisms/BuildSpecs/BuildSpecs';\r\nimport ThreeSixtyContainer from '../../3_Organisms/360Container/360Container';\r\nimport { Accessories } from '../../3_Organisms/Accessories/Accessories';\r\nimport { FeaturedSpecs } from '../../3_Organisms/FeaturedSpecs/FeaturedSpecs';\r\nimport { Packs } from '../../3_Organisms/Packs/Packs';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\n\r\nexport const SummaryPage = ({ ...props }) => {\r\n const [loading, setLoading] = useState(true);\r\n const summaryCalculator = window.summaryCalculator;\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [nav, setNav] = React.useState(null);\r\n const navigate = useNavigate();\r\n const { t, i18n } = useTranslation(['summary', 'general']);\r\n const buildSpecsRef = useRef(null);\r\n\r\n const [hasScrolled, setHasScrolled] = React.useState(false);\r\n\r\n const [openCollapsable, setOpenCollapsable] = React.useState(null);\r\n const [openSpecificationCollapsable, setOpenSpecificationCollapsable] = React.useState(null);\r\n\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalSummary));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n\r\n const [dealerID, setDealerID] = useState(null);\r\n const [isRetailerMode, setIsRetailerMode] = useState(window.bnp_retailer_mode === true ? true : false);\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst navHelper = new NavHelper();\r\n\r\n //showCmsHiddenBlock(summaryCalculator.selectedVehicle.carline);\r\n\r\n showCmsFooterHiddenBlock();\r\n\r\n summaryCalculator.CurrentStep = 9;\r\n\r\n React.useEffect(() => {\r\n async function executeTasks() {\r\n if (!summaryCalculator.isDataLoaded()) {\r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, packageCode);\r\n await summaryCalculator.loadFromFinancialProvider();\r\n\r\n if (JSON.parse(sessionStorage.getItem(Constants.HasFinancialProviderError)) === true) {\r\n const vehiclePageUri = `/${decodeURI(window.location.search)}`;\r\n navigate(vehiclePageUri)\r\n }\r\n\r\n setLoading(false);\r\n\r\n setNav(null);\r\n } else {\r\n setLoading(false);\r\n }\r\n\r\n if(!loading) {\r\n if (nav === null) {\r\n //setNav(navHelper.getNavContent(year, carline, trim, model, packageCode,summaryCalculator.CurrentStep, t));\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender); \r\n }\r\n if(summaryCalculator.isDataLoaded() && !hasScrolled) {\r\n // ONCE THE PAGE DATA IS LOADED ANCHOR TO CONTACT A DEALER\r\n if (window.location.href.indexOf('?contactDealer') > 0) {\r\n function isFindDealerForm() {\r\n const formEl = document.getElementById('contactDealer')\r\n if (formEl) {\r\n const reactEl = formEl.querySelector('.FormApp');\r\n if(reactEl){\r\n document.querySelector('#contactDealer').scrollIntoView({\r\n block: 'end',\r\n behavior: 'smooth'\r\n });\r\n }else{\r\n setTimeout(isFindDealerForm, 15);\r\n }\r\n } else {\r\n setTimeout(isFindDealerForm, 15);\r\n }\r\n }\r\n isFindDealerForm();\r\n }\r\n \r\n setHasScrolled(true);\r\n }\r\n }\r\n\r\n\t\t\tif(typeof mzFunc === 'object' && typeof mzTabs === 'object'){\r\n\t\t\t\tmzFunc.waitForEl('.mzBuildandPrice .mz-tabs').then(function(components){mzTabs.init(components);});\r\n mzMenu.init();\r\n\t\t\t}\r\n\r\n // Set the retailer mode (Force this call for the hotlink situation)\r\n const isRetailerMode = await summaryCalculator.isRetailerMode();\r\n setIsRetailerMode(isRetailerMode);\r\n }\r\n executeTasks();\r\n }, [summaryCalculator, loading]);\r\n\r\n let images = {};\r\n\r\n if (summaryCalculator.SelectedColourExteriorIndex !== 'null' && summaryCalculator.Colours !== null) {\r\n const { exteriors, interiors } = summaryCalculator.Colours.visual;\r\n const selectedExterior = Object.entries(exteriors)[summaryCalculator.SelectedColourExteriorIndex][1];\r\n const selectedInterior = summaryCalculator.SelectedColourInteriorIndex !== 'null' ? interiors[summaryCalculator.SelectedColourInteriorIndex] : null;\r\n images = get360Data(summaryCalculator.Colours.visual, selectedExterior, selectedInterior);\r\n }\r\n\r\n React.useEffect(() => {\r\n if (window.bnp_retailer_mode) {\r\n // Set the polling until we have a dealer vars with the information set as we should always have the dealer vars information\r\n const intervalRef = setInterval(()=>{\r\n const dealerVars = window.summaryCalculator.getDealerVars();\r\n \r\n if (dealerVars) {\r\n setDealerID(dealerVars.dealerId);\r\n \r\n clearInterval(intervalRef);\r\n }\r\n }, 200);\r\n } else {\r\n // Restart React Forms app.\r\n // Skip if this is the first time loading it because App.js takes care of it.\r\n if (window.isReactFormsAppLoaded && typeof window.initReactFormsApp === 'function') {\r\n window.initReactFormsApp();\r\n }\r\n }\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n if(dealerID) {\r\n // Restart React Forms app.\r\n // Skip if this is the first time loading it because App.js takes care of it.\r\n if (window.isReactFormsAppLoaded && typeof window.initReactFormsApp === 'function') {\r\n window.initReactFormsApp();\r\n }\r\n }\r\n }, [dealerID, isRetailerMode]);\r\n\r\n const generateStaticVehicleImg = () => {\r\n if (images) {\r\n const { imagePath, imageName } = images;\r\n const { year, carline, trim } = summaryCalculator.selectedVehicle\r\n const src = imagePath && imageName ? `${imagePath}${imageName.replace('{index}', 18)}` : '';\r\n return (\r\n \r\n
\r\n {t(\"wrnty_cta\")}\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ![\"White](\"https://mazda.ca/contentassets/3b14f54f8aa6495999c6e6d1e1477959/c63_unlmited_newvehicle.png\")
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"wrnty_newVeh\")}
\r\n\r\n
\r\n {t(\"wrnty_unlimited\")}
\r\n\r\n
\r\n \r\n
\r\n \r\n ![\"White](\"https://mazda.ca/contentassets/ca3ba1ddd7e84ecc9ee1ba3ea10d11d3/c63_unlmited_roadside.png\")
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"wrnty_roadside\")}
\r\n\r\n
\r\n {t(\"wrnty_mileage\")}
\r\n\r\n
\r\n \r\n
\r\n \r\n ![\"White](\"https://mazda.ca/contentassets/b2c41975a22049409c47e9ab7f278f4d/c63_unlmited_powertrain.png\")
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"wrnty_powertrain\")}
\r\n\r\n
\r\n {t(\"wrnty_unlimited\")}
\r\n\r\n
\r\n \r\n
\r\n \r\n ![\"White](\"https://mazda.ca/contentassets/5ac1baf08c5b43cd9230b7495f35906a/c63_unlmited_antiperforation.png\")
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"wrnty_perforation\")}
\r\n\r\n
\r\n {t(\"wrnty_unlimited\")}
\r\n\r\n \r\n\r\n
\r\n {!window.bnp_retailer_mode &&\r\n {t(\"build_summary\")}
\r\n{t(\"your\")} {ReactHtmlParser(summaryCalculator.VehicleTitle)}
\r\n\r\n\r\n {generateStaticVehicleImg()}\r\n
\r\n\r\n \r\n {\r\n scrollTo({ y: buildSpecsRef.current, offsetY: 100 });\r\n gtmHelper.setGTM({'action':'Sctoll to','scrollto': 'Review Build'}, true, false);\r\n }}\r\n >\r\n {t(\"review_build_specifications\")}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n { !loading ?\r\n
\r\n\r\n \r\n {ReactHtmlParser(getCmsAwardsBlockFromCMS(summaryCalculator.selectedVehicle.year, summaryCalculator.selectedVehicle.carline))}\r\n
\r\n\r\n \r\n \r\n {isRetailerMode ?\r\n <>\r\n
\r\n {t(\"take_the\")} {ReactHtmlParser(summaryCalculator.VehicleTitle)} {t('test_drive')}
\r\n \r\n \r\n \r\n :\r\n <>\r\n{t(\"contact_your_local_retailer\")}
\r\n \r\n }\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n {images?.imagePlaceHolder ? \r\n
\r\n :''}\r\n\r\n \r\n \r\n\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default SummaryPage;","import React from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useRef, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { formatPrice, getFinanceWeekly, getLeaseBiWeeklyFromMsrp } from '../../../utils';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport const EngineCard = ({ Model, Selected, HandleSelectedModel, Index, showFinancePrice, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const [modelData] = React.useState(Model);\r\n\tconst financial = JSON.parse(sessionStorage.getItem(Constants.FinancialObj));\r\n const engineCost = modelData.financial.msrp - summaryCalculator.SelectedTrim.financial.msrp; //financial.msrp;\r\n const { t, i18n } = useTranslation(['options', 'general']);\r\n\tconst [expandedIndex, setExpandedIndex] = React.useState(null);\r\n\tconst collapseRef = useRef(null);\r\n\tconst [toggle, setToggle] = React.useState(false);\r\n\tconst isExpanded = false;\r\n\r\n function setSelectedModel(index) {\r\n HandleSelectedModel(index)\r\n }\r\n\r\n\tuseEffect(() =>{\r\n\t\tif(typeof window.mzAnimator === 'object'){\r\n\t\t\twindow.mzAnimator.animateHeight(collapseRef.current, 'EngineCollapse' + Index, 'init')\r\n\t\t}\r\n \t},[]);\r\n \r\n useEffect(() =>{\r\n\t\twindow.mzAnimator.animateHeight(collapseRef.current, 'EngineCollapse' + Index, toggle)\r\n \t},[toggle]);\r\n\r\n\tfunction handleCollapse(e){\r\n\t\t\tif (isExpanded !== null && expandedIndex !== null && Index !== null) {\r\n\t\t\t\tif (isExpanded === true) {\r\n\t\t\t\t\tsetExpandedIndex(null);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tsetExpandedIndex(Index);\r\n\t\t\t\t\tsetTimeout(()=>{\r\n\t\t\t\t\t\tconst collapseTarget = e.target.closest('.mz-collapse');\r\n\t\t\t\t\t\tif(collapseTarget){\r\n\t\t\t\t\t\t\tconst scrollWindow = document.querySelector('.mz-package-page__package-card-list');\r\n\t\t\t\t\t\t\tconst topScroll = collapseTarget.offsetTop;\r\n\t\t\t\t\t\t\tscrollWindow.scroll({\r\n\t\t\t\t\t\t\t top:topScroll,\r\n\t\t\t\t\t\t\t behavior: 'smooth'\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t},100);\r\n\t\t\t\t}\r\n\t\t\t} else{\r\n\t\t\t\tsetToggle(!toggle);\r\n\t\t\t}\r\n\t}\r\n return (\r\n \r\n
\r\n \r\n {\r\n document.querySelector('body').classList.add('disabled');\r\n setLegalModalOpen(true);\r\n gtmHelper.setGTM({'action':'Open Modal','modal': 'Legal'}, true, false);\r\n }}\r\n />\r\n
\r\n \r\n\r\n {modelData ?\r\n\r\n\t\t\t\t
: null}\r\n \r\n )\r\n}\r\n\r\n\r\nexport default EngineCard;\r\n\r\nEngineCard.propTypes = {\r\n HandleSelectedModel: PropTypes.func,\r\n}\r\n\r\nEngineCard.defaultProps = {\r\n HandleSelectedModel: () => {},\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useRef, useEffect } from 'react';\r\nimport { formatPrice, getFinanceWeekly, getLeaseBiWeeklyFromMsrp, getLeaseBiWeeklyFromOptions } from '../../../utils';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport const PackageCard = ({ Package, PopContent, ButStyle, ButContent, Selected, ButSelectedContent, SelectedIndex, HandleSelectedPackage, HandleRemovePackage, HasCollapse=true, Index, showFinancePrice, isUniversal, displayPriceCalculation = true, displayConnectedServicePriceCalculation = false, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const [packageData, setPackageData] = React.useState(Package);\r\n\tconst [financial, setFinancial] = React.useState(summaryCalculator.FinancialInfo);\r\n const packageCost = packageData.financial.msrp;\r\n const { t, i18n } = useTranslation(['packages', 'general']);\r\n\tconst [expandedIndex, setExpandedIndex] = React.useState(null);\r\n\tconst collapseRef = useRef(null);\r\n\tconst [toggle, setToggle] = React.useState(false);\r\n\tconst isExpanded = false;\r\n\t \r\n\tfunction getConnectivityPackageDesc(){\r\n\t\tlet packageDesc;\r\n\r\n\t\t/*if(packageArr && packageArr.length === 0){\r\n\t\t\tpackageDesc=packageData.description;\r\n\t\t}else{\r\n\t\t\tpackageDesc= packageData.features.map((feature, index) => {return `\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{Selected &&\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{modelData.drivetrain.short_description}
\r\n\t\t\t\t\t\t{engineCost != 0 ? ReactHtmlParser(`
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t}\r\n\t\t
\r\n\t\t\t\t\t\t\t{modelData.drivetrain.short_description}
\r\n\t\t\t\t\t\t\t{modelData.transmission.short_description}
\r\n\t\t\t\t\t\t\t{modelData.engine.short_description}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{engineCost != 0 ? ReactHtmlParser(`${formatPrice(engineCost)} \r\n\t\t\t\t\t\t\t${showFinancePrice?\r\n\t\t\t\t\t\t\t`(${getFinanceWeekly(engineCost, financial.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].rate, financial.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].term)}${t(\"general:week\")})` : \r\n\t\t\t\t\t\t\t!window.hideLeaseInCard ? `(${getLeaseBiWeeklyFromMsrp(engineCost, financial.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].rate, financial.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].term)}${t(\"general:bi_week\")})` : ''\r\n\t\t\t\t\t\t\t}
`) : ''}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t {!modelData.description ?\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t- \r\n\t\t\t\t\t\t\t
- {ReactHtmlParser(modelData.drivetrain.label)} \r\n\t\t\t\t\t\t\t
- {ReactHtmlParser(modelData.transmission.label)} \r\n\t\t
\r\n\t\t {Selected ? : }\r\n\t\t\t\t\t
\r\n - ${packageDesc.join('')}
- ${packageData.subtitle}
- ${packageDesc.join('')}
{t('warrantyDisclaimer')}
);\r\n\t\t}else{\r\n\t\t\tif(packageCost!==null && displayPriceCalculation){\r\n\t\t\t\tspanCont = showFinancePrice?\r\n\t\t\t\t\t\t`(${getFinanceWeekly(packageCost, financial.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].aprRate, financial.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].term)}${t(\"general:week\")})`:\r\n\t\t\t\t\t\t!window.hideLeaseInCard ? `(${getLeaseBiWeeklyFromMsrp(packageCost, financial.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].term)}${t(\"general:bi_week\")})` : ''\r\n\t\t\t}\r\n\t\t\tif(packageCost!==null && displayConnectedServicePriceCalculation) {\r\n\t\t\t\tspanCont = showFinancePrice?\r\n\t\t\t\t\t\t`(${getFinanceWeekly(packageCost, financial.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].aprRate, financial.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].term)}${t(\"general:week\")})`:\r\n\t\t\t\t\t\t`(${getLeaseBiWeeklyFromOptions(packageCost, financial.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].term)}${t(\"general:bi_week\")})`\r\n\r\n\t\t\t}\r\n\t\t\treturn(+ {formatPrice(packageCost)} {spanCont}
);\r\n\t\t}\r\n\t}\r\n\r\n return (\r\n\t\t\r\n \t\r\n\t\t\t\t{Selected && !ButSelectedContent &&\r\n\t\t\t\t\t
}\r\n\t\t\t
\r\n\t\t\t{HasCollapse && \r\n\t\t\t\t}\r\n\t\t\t\t{Package.popular===1 &&
{PopContent}
}\r\n\t\t\t\t{packageData.name}
\r\n\t\t\t\t{!HasCollapse &&{ReactHtmlParser(displayConnectedServicePriceCalculation ? getConnectivityPackageDesc() : getPackageDesc())}
}\r\n\t\t\t\t{showPrice()}\r\n\t\t\t\t{HasCollapse && <>\r\n\t\t\t\t}\r\n\t\t\t
{ReactHtmlParser(getPackageDesc())}
}\r\n\t\t\t\r\n\t\t\t\t{Selected ? \r\n\t\t\t\t\tButSelectedContent ? \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t: \r\n\t\t\t\t\t\t \r\n\t\t\t\t: \r\n\t\t\t\t\tButContent ?\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t:\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t
\r\n\t\t\r\n )\r\n}\r\n\r\n\r\nexport default PackageCard;\r\n\r\nPackageCard.propTypes = {\r\n HandleSelectedPackage: PropTypes.func,\r\n HandleRemovePackage: PropTypes.func,\r\n}\r\n\r\nPackageCard.defaultProps = {\r\n HandleSelectedPackage: () => {},\r\n HandleRemovePackage: () => {},\r\n};","import React, { useState } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom'\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { get360Data, goToTop, getLoading, setCursorWaiting, hideCmsHiddenBlock} from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport EngineCard from '../../2_Molecules/EngineCard/EngineCard';\r\nimport ThreeSixtyContainer from '../../3_Organisms/360Container/360Container';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport PackageCard from '../../2_Molecules/PackageCard/PackageCard';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\n\r\nexport const Options = (...props) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const [loading, setLoading] = useState(true);\r\n const [is360Loading, setIs360Loading] = useState(true); \r\n const [firstEmptyDataLoad, setFirstEmptyDataLoad] = useState(false);\r\n const [dataNeedUpdate, setDataNeedUpdate] = useState(false);\r\n const [selectedModelIndex, setSelectedModelIndex] = useState(summaryCalculator.SelectedModelIndex);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n const { year, carline, trim, model, option } = useParams(); \r\n const listRef = React.useRef();\r\n const [nav, setNav] = React.useState(null);\r\n const navigate = useNavigate();\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalOption));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const [images, setImages] = React.useState({});\r\n const { t, i18n } = useTranslation(['options', 'general']);\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n \r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst navHelper = new NavHelper();\r\n\r\n hideCmsHiddenBlock();\r\n\r\n function set360images() {\r\n if(!summaryCalculator.Colours)\r\n return;\r\n \r\n if (!Object.keys(images).length) {\r\n summaryCalculator.SetSelectedColorsFromParams();\r\n\r\n if (summaryCalculator.SelectedColourExteriorIndex > -1 && summaryCalculator.Colours) {\r\n const extArray = Object.entries(summaryCalculator.Colours.visual.exteriors);\r\n setImages(get360Data(summaryCalculator.Colours.visual, extArray[summaryCalculator.SelectedColourExteriorIndex][1], summaryCalculator.Colours.visual.interiors[summaryCalculator.SelectedColourInteriorIndex]));\r\n setIs360Loading(false);\r\n } else if (summaryCalculator.AvailableTrim) {\r\n setImages(get360Data(summaryCalculator.AvailableTrim.trims[summaryCalculator.SelectedTrimIndex].visual));\r\n setIs360Loading(false);\r\n } else if (summaryCalculator.EngineAndDrivetrain) {\r\n setImages(get360Data(summaryCalculator.SelectedModel.visual));\r\n setIs360Loading(false);\r\n }\r\n }\r\n }\r\n\r\n summaryCalculator.CurrentStep = 2;\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n React.useEffect(() => {\r\n async function executeTasks() {\r\n if (window.bnp_under_maintenance)\r\n return;\r\n\r\n if (!firstEmptyDataLoad) {\r\n setFirstEmptyDataLoad(true);\r\n\r\n if (!summaryCalculator.isDataLoaded()) {\r\n summaryCalculator.reset(false);\r\n\r\n if(model || option) {\r\n console.log('has package ', model, option);\r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, option); \r\n } else {\r\n await summaryCalculator.loadVehicleData(year, carline, trim);\r\n }\r\n\r\n if (JSON.parse(sessionStorage.getItem(Constants.HasFinancialProviderError)) === true) {\r\n const vehiclePageUri = `/${decodeURI(window.location.search)}`;\r\n navigate(vehiclePageUri)\r\n }\r\n }\r\n\r\n setSelectedModelIndex(summaryCalculator.SelectedModelIndex);\r\n\r\n setDataNeedUpdate(true);\r\n\r\n setNav(null);\r\n\r\n setLoading(false);\r\n }\r\n\r\n if (!loading) {\r\n if (dataNeedUpdate) {\r\n setDataNeedUpdate(false);\r\n\r\n setLoading(true);\r\n\r\n if (selectedModelIndex !== summaryCalculator.SelectedModelIndex) {\r\n setCursorWaiting(true);\r\n await summaryCalculator.setSelectedModelIndex(selectedModelIndex);\r\n\r\n await summaryCalculator.updateSingleLineFromFinancialProvider();\r\n\r\n updateAddressBar();\r\n\r\n\t\t\t\t\t\tgtmHelper.setGTM({'action':'Model Change'}, false, false);\r\n\r\n setCursorWaiting(false);\r\n } \r\n else {\r\n if (model && option) {\r\n console.log('has package ', model, option);\r\n \r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, option);\r\n }\r\n }\r\n\r\n\r\n set360images();\r\n\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender);\r\n\r\n setLoading(false);\r\n }\r\n }\r\n\r\n if (listRef.current) {\r\n window.removeEventListener('resize', setListMaxHeight);\r\n window.addEventListener('resize', setListMaxHeight);\r\n setListMaxHeight();\r\n }\r\n }\r\n\r\n executeTasks();\r\n }, [nav, carline, summaryCalculator, loading, dataNeedUpdate, showFinancePrice, is360Loading, selectedModelIndex]);\r\n\r\n function updateAddressBar() {\r\n const lang = document.querySelector('meta[name=\"data-language\"]') ? document.querySelector('meta[name=\"data-language\"]').content === 'en' ? 'en' : 'fr' : 'en';\r\n const province = document.querySelector('meta[name=\"data-region\"]') ? document.querySelector('meta[name=\"data-region\"]').content : 'on'; \r\n const urlPrefix = window.location.hostname === 'localhost' ? '' : lang === 'en' ? '/en/shopping/build-and-price' : '/fr/magasiner/construction-et-prix/';\r\n const url = `${urlPrefix}/#/${year}/${carline}/${trim}/${summaryCalculator.SelectedModel.model_code}/${summaryCalculator.SelectedPackage.option_code}?prov_code=${province}&lang_code=${lang}`;\r\n //history.replaceState('', 'React App', url);\r\n window.history.replaceState(null, 'React App', url);\r\n }\r\n\r\n React.useEffect(() => {\r\n // Redraw the 360 images\r\n set360images();\r\n }, [images]);\r\n\r\n async function handleSelectedPackage(index) {\r\n setCursorWaiting(true);\r\n\r\n await summaryCalculator.setSelectedPackageIndex(index);\r\n\r\n // This is a patch for the MX5 package selection\r\n await summaryCalculator.loadColours(year, carline, trim, summaryCalculator.SelectedModel.model_code, summaryCalculator.SelectedPackage.option_code);\r\n\r\n // Added these two call as wheels and accessories a package dependant\r\n await summaryCalculator.loadWheels(year, carline, trim, summaryCalculator.SelectedModel.model_code, summaryCalculator.SelectedPackage.option_code);\r\n await summaryCalculator.loadAccessories(year, carline, trim, summaryCalculator.SelectedModel.model_code, summaryCalculator.SelectedPackage.option_code);\r\n\r\n await summaryCalculator.updateSingleLineFromFinancialProvider();\r\n\r\n //setSelectedPackageIndex(index);\r\n\t\tgtmHelper.setGTM({'action':'Package Add', 'package': summaryCalculator.SelectedPackage.option_code}, false, false);\r\n\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender);\r\n\r\n updateAddressBar();\r\n\r\n // Refresh the 360 images\r\n setImages({});\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n async function handleRemovePackage(index) {\r\n setCursorWaiting(true);\r\n\r\n\t\tgtmHelper.setGTM({'action':'Package Remove', 'package': summaryCalculator.SelectedPackage.option_code}, true, false);\r\n\r\n await summaryCalculator.setSelectedPackageIndex(null);\r\n\r\n // This is a patch for the MX5 package selection\r\n await summaryCalculator.loadColours(year, carline, trim, summaryCalculator.SelectedModel.model_code, summaryCalculator.SelectedPackage.option_code);\r\n\r\n // Added these two call as wheels and accessories a package dependant\r\n await summaryCalculator.loadWheels(year, carline, trim, summaryCalculator.SelectedModel.model_code, summaryCalculator.SelectedPackage.option_code);\r\n await summaryCalculator.loadAccessories(year, carline, trim, summaryCalculator.SelectedModel.model_code, summaryCalculator.SelectedPackage.option_code);\r\n\r\n await summaryCalculator.updateSingleLineFromFinancialProvider();\r\n\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender);\r\n\r\n updateAddressBar();\r\n\r\n // Refresh the 360 images\r\n setImages({});\r\n\r\n setCursorWaiting(false);\r\n\r\n } \r\n \r\n function handleSelectedModel(index) {\r\n setCursorWaiting(true);\r\n\r\n setImages({});\r\n\r\n setSelectedModelIndex(index);\r\n\r\n setDataNeedUpdate(true);\r\n\r\n updateAddressBar();\r\n\r\n setNav(null);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n function nextStep() {\r\n if (summaryCalculator.SelectedModel) {\r\n goToTop();\r\n navigate(`/${year}/${carline}/${trim}/${summaryCalculator.SelectedModel.model_code}/${summaryCalculator.SelectedModel.option_code}/colours${decodeURI(window.location.search)}`);\r\n } else {\r\n goToTop();\r\n navigate(`/${year}/${carline}/${trim}/${summaryCalculator.EngineAndDrivetrain.models[0].financial.based_on.model_code}/${summaryCalculator.EngineAndDrivetrain.models[0].financial.based_on.option_code}/colours${decodeURI(window.location.search)}`);\r\n }\r\n\t\tgtmHelper.setGTM({'action':'Next Step'}, true , false);\r\n }\r\n\r\n\tfunction setListMaxHeight(){\r\n if (listRef.current)\r\n if (window.innerWidth < 1025) {\r\n listRef.current.style.maxHeight = 'unset';\r\n } else {\r\n const incentivebar = document.querySelector('.mz-alert__item'); // Red alert bar\r\n\t\t\t\tconst submenu=document.querySelector(\".mz-sticky-submenu\");\r\n\t\t\t\tconst pricingBar=\r\n listRef.current.style.height = `${window.innerHeight - (submenu?.offsetTop + document.querySelector(\".mz-sticky-submenu\")?.offsetHeight + document.querySelector(\".mz-pricing\")?.offsetHeight + (incentivebar ? incentivebar.offsetHeight : 0) + 40)}px`;\r\n\t\t\t\tif(!submenu || !pricingBar){\r\n\t\t\t\t\tsetTimeout(setListMaxHeight, 100);\r\n\t\t\t\t}\r\n }\r\n\r\n }\r\n\r\n function handleShowFinanceClick(value) {\r\n setShowFinancePrice(value);\r\n }\r\n\r\n return (\r\n <>\r\n {getLoading(loading, t)}\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Options;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { formatPrice, getBaseUrl, getFinanceWeekly, getLeaseBiWeeklyFromOptions } from '../../../utils';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nexport const ColourCard = ({ Colour, Disabled, Selected, HandleSelectedColour, isExterior, Index, showFinancePrice, ...props }) => {\r\n\r\n const [colourData] = React.useState(Colour);\r\n const [selected] = React.useState(Selected);\r\n const financial = JSON.parse(sessionStorage.getItem(Constants.FinancialObj));\r\n const financeTermIndex = parseInt(sessionStorage.getItem(Constants.FinanceTermIndex));\r\n const leaseTermIndex = parseInt(sessionStorage.getItem(Constants.LeaseTermIndex));\r\n const financeTerm = parseInt(sessionStorage.getItem(Constants.FinanceTerm));\r\n const leaseTerm = parseInt(sessionStorage.getItem(Constants.LeaseTerm));\r\n const { t, i18n } = useTranslation(['colours', 'general']);\r\n\r\n function setSelectedColour(index) {\r\n HandleSelectedColour(index)\r\n }\r\n const imagePath = getBaseUrl() + process.env.REACT_APP_BASIC_CONTENT_PATH;\r\n const apiBasePath = process.env.API_URL_BASE_PATH;\r\n\r\n return (\r\n \r\n )\r\n\r\n}\r\n\r\n\r\nexport default ColourCard;\r\n\r\nColourCard.propTypes = {\r\n HandleSelectedColour: PropTypes.func,\r\n}\r\n\r\nColourCard.defaultProps = {\r\n HandleSelectedColour: () => { },\r\n};","import React, { useState } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { get360Data, goToTop, getLoading, setTabsNextAndPrevButtons, setCursorWaiting, hideCmsHiddenBlock } from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport CollapseLegal from '../../2_Molecules/Collapse/CollapseLegal';\r\nimport ColourCard from '../../2_Molecules/ColourCard/ColourCard';\r\nimport ThreeSixtyContainer from '../../3_Organisms/360Container/360Container';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\n\r\nexport const Colours = ({ ...props }) => {\r\n const [loading, setLoading] = useState(true);\r\n const [is360Loading, setIs360Loading] = useState(true);\r\n const summaryCalculator = window.summaryCalculator;\r\n let defaultInteriorColour = JSON.parse(sessionStorage.getItem(Constants.DefaultInteriorColour));\r\n let defaultExteriorColour = JSON.parse(sessionStorage.getItem(Constants.DefaultExteriorColour));\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [nav, setNav] = React.useState(null);\r\n let extArray = null;\r\n const [images, setImages] = React.useState({});\r\n const navigate = useNavigate();\r\n const listRef = React.useRef();\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalColours));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const { t, i18n } = useTranslation(['colours', 'general']);\r\n const [selectedColourInteriorIndex, setSelectedColourInteriorIndex] = React.useState(null);\r\n const [selectedColourExteriorIndex, setSelectedColourExteriorIndex] = React.useState(null);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n \r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst navHelper = new NavHelper();\r\n\r\n hideCmsHiddenBlock();\r\n\r\n summaryCalculator.CurrentStep = 3;\r\n\r\n React.useEffect(() => {\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender);\r\n \r\n async function executeTasks() {\r\n if (window.bnp_under_maintenance)\r\n return;\r\n\r\n if (!summaryCalculator.isDataLoaded()) {\r\n await summaryCalculator.loadTrims(year, carline);\r\n\r\n const trimIndex = summaryCalculator.AvailableTrim.trims.findIndex(obj => obj.trim_type.url_slug === trim);\r\n await summaryCalculator.setSelectedTrimIndex(trimIndex);\r\n\r\n setLoading(false);\r\n\r\n setNav(null);\r\n } else {\r\n setLoading(false);\r\n }\r\n\r\n if (!loading) {\r\n /*if (nav === null) {\r\n setNav(navHelper.getNavContent(year, carline, trim, model, packageCode, summaryCalculator.CurrentStep, t));\r\n }*/\r\n\r\n summaryCalculator.SetSelectedColorsFromParams();\r\n\r\n if (summaryCalculator.SelectedColourInterior === null) {\r\n if (summaryCalculator.SelectedColourInteriorIndex !== null)\r\n summaryCalculator.SelectedColourInteriorIndex = summaryCalculator.SelectedColourInteriorIndex; // Added this for when the page is beeing ctrl-r\r\n else {\r\n defaultInteriorColour = summaryCalculator.Colours.visual.interiors[0];\r\n summaryCalculator.Colours.visual.interiors.map((Colour, index) => {\r\n if (defaultInteriorColour.id === Colour.id)\r\n summaryCalculator.SelectedColourInteriorIndex = index;\r\n setSelectedColourInteriorIndex(index);\r\n })\r\n }\r\n }\r\n\r\n if (summaryCalculator.SelectedColourExterior === null) {\r\n if (summaryCalculator.SelectedColourExteriorIndex !== null)\r\n summaryCalculator.SelectedColourExteriorIndex = summaryCalculator.SelectedColourExteriorIndex; // Added this for when the page is beeing ctrl-r\r\n else {\r\n defaultExteriorColour = defaultInteriorColour.default_exterior;\r\n Object.entries(summaryCalculator.Colours.visual.exteriors).map((Colour, index) => {\r\n if (defaultExteriorColour.id === Colour[1]['id'])\r\n summaryCalculator.SelectedColourExteriorIndex = index;\r\n setSelectedColourExteriorIndex(index);\r\n })\r\n }\r\n }\r\n\r\n if (summaryCalculator.SelectedColourExteriorIndex > -1 && summaryCalculator.Colours) {\r\n const extArray = Object.entries(summaryCalculator.Colours.visual.exteriors);\r\n setImages(get360Data(summaryCalculator.Colours.visual, extArray[summaryCalculator.SelectedColourExteriorIndex][1], summaryCalculator.Colours.visual.interiors[summaryCalculator.SelectedColourInteriorIndex]));\r\n setIs360Loading(false);\r\n } else if (summaryCalculator.AvailableTrim) {\r\n setImages(get360Data(summaryCalculator.AvailableTrim.trims[summaryCalculator.SelectedTrimIndex].visual));\r\n setIs360Loading(false);\r\n }\r\n \r\n showWarning(); \r\n }\r\n }\r\n\r\n\t\tif (listRef.current) {\r\n\t\t\tsetListMaxHeight();\r\n }\r\n \r\n executeTasks();\r\n }, [summaryCalculator, selectedColourExteriorIndex, selectedColourInteriorIndex, loading, is360Loading]);\r\n\r\n React.useEffect(() => {\r\n //console.log('360 loading');\r\n }, [is360Loading]);\r\n \r\n function getAllowedExteriorsIds(exteriors) {\r\n let allowedExteriors = [];\r\n exteriors.forEach(exterior => {\r\n allowedExteriors.push(exterior.id);\r\n });\r\n return allowedExteriors;\r\n }\r\n\r\n async function handleSelectedColourInterior(index) {\r\n await summaryCalculator.setSelectedColourInteriorIndex(index);\r\n setSelectedColourInteriorIndex(index);\r\n\t\tgtmHelper.setGTM({'action':'Interior Colour Change'}, false, false);\r\n\r\n const allowedExteriors = getAllowedExteriorsIds(summaryCalculator.Colours.visual.interiors[index].allowed_exteriors);\r\n summaryCalculator.AllowedColoursExterior = allowedExteriors\r\n if (!allowedExteriors.includes(Object.entries(summaryCalculator.Colours.visual.exteriors)[summaryCalculator.SelectedColourExteriorIndex][1].id)) {\r\n const defaultExteriorId = summaryCalculator.Colours.visual.interiors[index].default_exterior.id;\r\n Object.entries(summaryCalculator.Colours.visual.exteriors).forEach(async (exterior, index) => {\r\n if (exterior[1].id === defaultExteriorId) {\r\n await summaryCalculator.setSelectedColourExteriorIndex(index);\r\n setSelectedColourExteriorIndex(index);\r\n }\r\n })\r\n }\r\n }\r\n\r\n async function handleSelectedColourExterior(index) {\r\n setCursorWaiting(true);\r\n\r\n setLoading(true);\r\n\r\n await summaryCalculator.setSelectedColourExteriorIndex(index);\r\n setSelectedColourExteriorIndex(index);\r\n\t\tgtmHelper.setGTM({'action':'Exterior Colour Change'}, false, false);\r\n\r\n const images = get360Data(summaryCalculator.Colours.visual, extArray[index][1], summaryCalculator.Colours.visual.interiors[summaryCalculator.SelectedColourInteriorIndex]);\r\n setImages(images);\r\n setCursorWaiting(false);\r\n }\r\n\r\n function nextStep() {\r\n goToTop();\r\n navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/wheels${decodeURI(window.location.search)}`)\r\n\t\tgtmHelper.setGTM({'action':'Next Step'}, true , false);\r\n }\r\n\r\n function showWarning() {\r\n let showWarningMessage = false;\r\n Object.entries(summaryCalculator.Colours.visual.exteriors).map((Colour, index) => {\r\n if (!summaryCalculator.AllowedColoursExterior.includes(Colour[1].id)) {\r\n showWarningMessage = true;\r\n }\r\n });\r\n\t\tshowWarningMessage = true;\r\n return showWarningMessage;\r\n\r\n }\r\n\r\n function setListMaxHeight() {\r\n if (listRef.current){\r\n if (window.innerWidth < 1025) {\r\n listRef.current.style.maxHeight = 'unset';\r\n listRef.current.style.overflow = 'auto';\r\n } else {\r\n const incentivebar = document.querySelector('.mz-alert__item'); // Red alert bar\r\n\r\n listRef.current.style.height = `${window.innerHeight - (document.querySelector(\".mz-sticky-submenu\")?.offsetTop + document.querySelector(\".mz-sticky-submenu\")?.offsetHeight + document.querySelector(\".mz-pricing\")?.offsetHeight + (incentivebar ? incentivebar.offsetHeight : 0) + 50)}px`;\r\n listRef.current.style.overflow = 'auto';\r\n }\r\n\t\t}\r\n\r\n\t}\r\n\r\n function handleShowFinanceClick(value) {\r\n setShowFinancePrice(value);\r\n }\r\n\r\n if (summaryCalculator.Colours && summaryCalculator.Colours.visual) {\r\n extArray = Object.entries(summaryCalculator.Colours.visual.exteriors);\r\n }\r\n\r\n if (summaryCalculator.SelectedColourInterior !== null && summaryCalculator.Colours && summaryCalculator.AllowedColoursExterior.length === 0) {\r\n const allowedExteriors = getAllowedExteriorsIds(summaryCalculator.Colours.visual.interiors[summaryCalculator.SelectedColourInteriorIndex].allowed_exteriors);\r\n summaryCalculator.AllowedColoursExterior = allowedExteriors;\r\n }\r\n\r\n\twindow.addEventListener('resize', setListMaxHeight);\r\n\r\n return (\r\n <>\r\n {getLoading(loading, t)}\r\n \r\n
\r\n : null}\r\n\r\n {summaryCalculator.EngineAndDrivetrain?.models?.length && summaryCalculator.SelectedModel ?\r\n \r\n
\r\n \r\n
\r\n \r\n
: null : null}\r\n {summaryCalculator.Packages ? summaryCalculator.Packages.packages.filter(pack => pack.type === 'model_option_package').length > 0 &&
\r\n {t(\"select_engine_and_drivetrain\")}
\r\n {summaryCalculator.displayWarning() ?\r\n \r\n {t(\"warning_change_selection\")}\r\n
: null}\r\n {summaryCalculator.EngineAndDrivetrain?.models.map((Model, index) => : null : null}\r\n {summaryCalculator.Packages ? summaryCalculator.Packages.packages.filter(pack => pack.type === 'model_option_package').length > 0 &&
{t(\"packages:available_packages\")}
: null}\r\n {summaryCalculator.Packages ? summaryCalculator.Packages.packages.filter(pack => pack.type === 'model_option_package').map((Package, index) =>\r\n {\r\n\t\t\t\t\t\t\t\t\t\tdocument.querySelector('body').classList.add('disabled');\r\n\t\t\t\t\t\t\t\t\t\tsetLegalModalOpen(true)\r\n\t\t\t\t\t\t\t\t\t}}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Colours;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { getLang, formatPrice, getBaseUrl, getFinanceWeekly, getLeaseBiWeeklyFromOptions, getDisplayableProvinceName } from '../../../utils';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\n\r\nexport const WheelCard = ({ Wheel, Disabled, Selected, HandleSelectedWheel, Index, showFinancePrice, ...props }) => {\r\n const [selected] = React.useState(Selected);\r\n const financial = JSON.parse(sessionStorage.getItem(Constants.FinancialObj));\r\n const financeTermIndex = parseInt(sessionStorage.getItem(Constants.FinanceTermIndex));\r\n const leaseTermIndex = parseInt(sessionStorage.getItem(Constants.LeaseTermIndex));\r\n const financeTerm = parseInt(sessionStorage.getItem(Constants.FinanceTerm));\r\n const leaseTerm = parseInt(sessionStorage.getItem(Constants.LeaseTerm));\r\n const { t, i18n } = useTranslation(['wheels', 'general']);\r\n\r\n const imagePath = getBaseUrl() + process.env.REACT_APP_BASIC_CONTENT_PATH;\r\n\r\n function setSelectedWheel() {\r\n if (Selected) {\r\n HandleSelectedWheel(null)\r\n } else {\r\n HandleSelectedWheel(Wheel.index)\r\n }\r\n }\r\n\r\n function getTotalCost(wheel) {\r\n if(!wheel)\r\n return;\r\n\r\n let total = wheel.price;\r\n total += wheel.install_cost ? wheel.install_cost : 0; \r\n total += wheel.tpms ? wheel.tpms : 0;\r\n \r\n return formatPrice(total, true);\r\n }\r\n\r\n function getTooltipText(wheel) {\r\n const lang = getLang();\r\n const languageText = lang === 'en' ? 'This price includes:' : 'Ce prix inclut :';\r\n const basePrice = lang === 'en' ? `4 x ${wheel.title}: ` : `4 x ${wheel.title} : `\r\n const tpmsText = lang === 'en' ? `4 x Tire Pressure Monitoring System sensors` : `4 capteurs pour le système de surveillance de la pression des pneus`;\r\n const installText = lang === 'en' ? `Installation (based on average labour rates in ${getDisplayableProvinceName()})` : `Installation (calculée en fonction des frais de main-d’œuvre moyens chez les détaillants ${getDisplayableProvinceName()})`;\r\n const totalText = lang === 'en' ? `Total price` : `Prix total`;\r\n\r\n const totalCost = wheel.price //getTotalCost(wheel);\r\n\r\n let text = wheel.tpms && wheel.install_cost ? `${languageText}` : ``;\r\n text += wheel.base_msrp ? `\r\n
\r\n : null}\r\n {summaryCalculator.Colours?.visual ?\r\n \r\n {images.imagePathInterior ?\r\n
\r\n \r\n\r\n
\r\n \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n {t(\"select_exterior_colour\")}
\r\n {showWarning() ?\r\n \r\n {t(\"general:warning_change_color_selection\")}\r\n
: null}\r\n \r\n {Object.entries(summaryCalculator.Colours.visual.exteriors).map((Colour, index) =>
\r\n \r\n\t\t\t\t\t\t\t
{t(\"select_interior_colour\")}
\r\n\r\n {summaryCalculator.Colours.visual.interiors.map((Colour, index) =>
\r\n\r\n \r\n {\r\n\t\t\t\t\t\t\t\t\t\tdocument.querySelector('body').classList.add('disabled');\r\n\t\t\t\t\t\t\t\t\t\tsetLegalModalOpen(true)\r\n\t\t\t\t\t\t\t\t\t}}\r\n />\r\n
\r\n ${basePrice}${formatPrice(wheel.base_msrp, true)}` : ''; \r\n text += wheel.tpms ? `
${tpmsText} : ${formatPrice(wheel.tpms, true)}` : '';\r\n text += wheel.install_cost ? `
${installText} : ${formatPrice(wheel.install_cost, true)}` : '';\r\n text += wheel.install_cost ? `
${totalText} : ${formatPrice(totalCost, true)}` : ``;\r\n\r\n return text;\r\n }\r\n\r\n return (\r\n \r\n )\r\n\r\n}\r\n\r\n\r\nexport default WheelCard;\r\n\r\nWheelCard.propTypes = {\r\n HandleSelectedWheel: PropTypes.func,\r\n}\r\n\r\nWheelCard.defaultProps = {\r\n HandleSelectedWheel: () => { },\r\n};","//tabs driven by core js.\r\n/* global mzFunc mzTabs */\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport WheelCard from '../../2_Molecules/WheelCard/WheelCard'\r\n\r\nexport const WheelsList = ({ Wheels, DisabledIndexes, SelectedIndex, HandleSelectedWheel, defaultWheelSize, showFinancePrice,...props }) => {\r\n const hasDefaultWheelSize = (formatedData, defaultSize) => {\r\n const hasKey = Number(defaultSize) in formatedData;\r\n return hasKey;\r\n } \r\n\r\n\tconst { t, i18n } = useTranslation(['wheels']);\r\n const [wheelsData, setWheelsData] = React.useState(parceWheelsData());\r\n const [sizes] = React.useState(Object.keys(wheelsData));\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const initWheelTab = sessionStorage.getItem(Constants.SelectedWheelSize) ? sessionStorage.getItem(Constants.SelectedWheelSize) : defaultWheelSize ? String(defaultWheelSize) : sizes[0];\r\n\r\n const [selectedWheelsSize, setSelectedWheelsSize] = React.useState(initWheelTab);\r\n const [warningMessage, setWarningMessage] = React.useState(getWarningMessage(initWheelTab));\r\n const summaryCalculator = window.summaryCalculator;\r\n function handleSelectedWheel(index) {\r\n HandleSelectedWheel(index);\r\n }\r\n\r\n function getWarningMessage(newSize) {\r\n let newMessage = null;\r\n\r\n if (!defaultWheelSize) return newMessage;\r\n\r\n if (Number(newSize) > Number(defaultWheelSize)) {\r\n i18n.language == \"en\" ? newMessage = `${newSize}″ ${t('wheel_def_pre')} ${t('wheel_def_large')} ${t('wheel_def_suff')}` : newMessage = `${t('wheel_def_pre')} ${newSize}″ ${t('wheel_def_large')} ${t('wheel_def_suff')}`\r\n } else if (Number(newSize) < Number(defaultWheelSize)) {\r\n i18n.language == \"en\" ? newMessage = `${newSize}″ ${t('wheel_def_pre')} ${t('wheel_def_small')} ${t('wheel_def_suff')}` : newMessage = `${t('wheel_def_pre')} ${newSize}″ ${t('wheel_def_small')} ${t('wheel_def_suff')}`\r\n }\r\n\r\n return newMessage;\r\n }\r\n\r\n\r\n function groupBy(xs, key) {\r\n return xs.reduce(function (rv, x) {\r\n (rv[x[key]] = rv[x[key]] || []).push(x);\r\n return rv;\r\n }, {});\r\n };\r\n\r\n function parceWheelsData() {\r\n var data = [];\r\n let formatedData = {};\r\n\r\n for (const index in Wheels) {\r\n data.push(Wheels[index]);\r\n }\r\n \r\n data.forEach((wheel, index) => {\r\n wheel.selected = SelectedIndex!==null?Number(SelectedIndex) === index:null;\r\n wheel.disabled = DisabledIndexes.includes(index);\r\n wheel.index = index;\r\n })\r\n\r\n if (data.length) {\r\n formatedData = groupBy(data, 'size');\r\n }\r\n\r\n const HASDEFAULTWHEELSIZE = hasDefaultWheelSize(formatedData, defaultWheelSize);\r\n // Add default wheel size array\r\n if(defaultWheelSize !== 0 && !HASDEFAULTWHEELSIZE) \r\n formatedData[defaultWheelSize] = [];\r\n\r\n return (formatedData);\r\n }\r\n\r\n const getWheelSizeSuffix = (size) => {\r\n if (!size) return '';\r\n let suffix = '\"';\r\n\r\n if (defaultWheelSize && Number(size) === Number(defaultWheelSize)) {\r\n suffix += t('wheel_size');\r\n }\r\n\r\n return suffix\r\n }\r\n\r\n React.useEffect(() => {\r\n setWheelsData(parceWheelsData());\r\n\r\n\t\tif(typeof mzFunc === 'object' && typeof mzTabs === 'object'){\r\n\t\t\tmzFunc.waitForEl('.mzBuildandPrice .mz-tabs').then(function(components){mzTabs.init(components);});\r\n\t\t}\r\n\r\n }, [Wheels]);\r\n\r\n return (\r\n
\r\n\t\t\t
\r\n )\r\n}\r\n\r\n\r\nexport default WheelsList;\r\n\r\nWheelsList.propTypes = {\r\n HandleSelectedWheel: PropTypes.func,\r\n}\r\n\r\nWheelsList.defaultProps = {\r\n HandleSelectedWheel: () => {},\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nexport const WheelsImageContainer = ({ imageBackgroundCar, imageForegroundWheel, trimName, ...props }) => {\r\n\r\n return (\r\n \r\n\t\t\t\t
\r\n {wheelsData[selectedWheelsSize] && wheelsData[selectedWheelsSize].length > 0 ?\r\n \r\n\t\t\t\t\t
\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n {\r\n\t\t\t sizes.map((size, key) => (\r\n\t\t\t {\r\n\t\t\t setSelectedWheelsSize(sizes[key]);\r\n\r\n\t\t\t sessionStorage.setItem(Constants.SelectedWheelSize, sizes[key]);\r\n\r\n setWarningMessage(getWarningMessage(size));\r\n\r\n\t\t\t\t\t\t\t\t\t\tgtmHelper.setGTM({'action':'Tab Click', 'wheel tab': sizes[key]}, true, false);\r\n\t\t\t }}\r\n\t\t\t key={key}\r\n\t\t\t >\r\n\t\t\t {size}{getWheelSizeSuffix(size)}\r\n\t\t\t \r\n\t\t\t ))\r\n\r\n }\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n
\r\n : \r\n \r\n {ReactHtmlParser(t(\"wheels_disclaimer\"))}\r\n
\r\n {\r\n warningMessage && (\r\n{warningMessage}
\r\n )\r\n }\r\n {wheelsData[selectedWheelsSize].map((wheel, key) =>\r\n\r\n {t(\"wheel_default_msg\")}\r\n
\r\n }\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default WheelsImageContainer;\r\n\r\nWheelsImageContainer.propTypes = {\r\n imageBackgroundCar: PropTypes.string,\r\n imageForegroundWheel: PropTypes.string,\r\n\r\n}\r\n\r\nWheelsImageContainer.defaultProps = {\r\n imageBackgroundCar: '/jellies/mazda-logo-placeholder.png',\r\n imageForegroundWheel: ''\r\n};","import React, { useMemo, useState } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { get360Data, goToTop, setCursorWaiting, hideCmsHiddenBlock, getLoading } from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport WheelsList from '../../3_Organisms/WheelsList/WheelsList';\r\nimport { WheelsImageContainer } from '../../3_Organisms/WheelsImageContainer/WheelsImageContainer';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\n\r\nexport const Wheels = ({ ...props }) => {\r\n const [loading, setLoading] = useState(true);\r\n const summaryCalculator = window.summaryCalculator;\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [nav, setNav] = React.useState(null);\r\n const navigate = useNavigate();\r\n const listRef = React.useRef();\r\n const legalContent = JSON.parse(sessionStorage.getItem('LegalWheels'));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const { t, i18n } = useTranslation(['wheels', 'general']);\r\n const [images, setImages] = useState({});\r\n const [bgImage, setbgImage] = useState(null);\r\n const [fgImage, setfgImage] = useState(null);\r\n const [selectedWheelIndex, setSelectedWheelIndex] = useState(summaryCalculator.SelectedWheelIndex);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n \r\n\tconst gtmHelper = new GTMHelper();\r\n const navHelper = new NavHelper();\r\n \r\n\tlet selectedWheelObject;\r\n\r\n const selectedColor = useMemo(() => {\r\n const storageColor = sessionStorage.getItem(Constants.SelectedExteriorColour);\r\n return storageColor ? JSON.parse(storageColor).code : summaryCalculator.Wheels?.visual.interiors[0].default_exterior.code;\r\n }, [summaryCalculator.Wheels]);\r\n\r\n hideCmsHiddenBlock();\r\n\r\n summaryCalculator.CurrentStep = 4;\r\n\r\n React.useEffect(() => {\r\n async function executeTasks() {\r\n if (!summaryCalculator.isDataLoaded()) {\r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, packageCode);\r\n await summaryCalculator.loadFromFinancialProvider();\r\n\r\n setLoading(false);\r\n\r\n setSelectedWheelIndex(summaryCalculator.SelectedWheelIndex);\r\n } else {\r\n setLoading(false);\r\n }\r\n\r\n if (!loading) {\r\n if (nav === null) {\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender); \r\n //setNav(navHelper.getNavContent(year, carline, trim, model, packageCode, summaryCalculator.CurrentStep, t));\r\n }\r\n } \r\n\r\n if (listRef.current) {\r\n setListMaxHeight();\r\n }\r\n }\r\n\r\n executeTasks();\r\n }, [summaryCalculator, nav, loading]);\r\n\r\n async function handleSelectedWheel(index) {\r\n setCursorWaiting(true);\r\n\r\n await summaryCalculator.setSelectedWheelIndex(index);\r\n\r\n setSelectedWheelIndex(index);\r\n\r\n setCursorWaiting(false);\r\n\r\n\t\tgtmHelper.setGTM({'action':'Selected Wheel'}, false, false);\r\n }\r\n\r\n function nextStep() {\r\n goToTop();\r\n //navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/connectivity${decodeURI(window.location.search)}`);\r\n navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/accessories${decodeURI(window.location.search)}`)\r\n\t\tgtmHelper.setGTM({'action':'Next Step'}, true , false);\r\n }\r\n\r\n function setListMaxHeight() {\r\n if (listRef.current){\r\n if (window.innerWidth < 1025) {\r\n listRef.current.style.height = 'unset';\r\n } else {\r\n const incentivebar = document.querySelector('.mz-alert__item'); // Red alert bar\r\n\r\n listRef.current.style.height = `${window.innerHeight - (document.querySelector(\".mz-sticky-submenu\")?.offsetTop + document.querySelector(\".mz-sticky-submenu\")?.offsetHeight + document.querySelector(\".mz-pricing\")?.offsetHeight + (incentivebar ? incentivebar.offsetHeight : 0) + 30)}px`;\r\n }\r\n\t\t}\r\n\r\n\t}\r\n\r\n\r\n if (summaryCalculator.Wheels && !images) {\r\n setImages(get360Data(summaryCalculator.Wheels.visual, model));\r\n }\r\n\r\n if (summaryCalculator.Wheels && summaryCalculator.Wheels.wheels) {\r\n // Set Wheel Images\r\n const yearSlug = summaryCalculator.Wheels.year.url_slug;\r\n const carlineSlug = summaryCalculator.Wheels.carline.url_slug;\r\n const trimSlug = summaryCalculator.Wheels.trim.trim_type.url_slug ? summaryCalculator.Wheels.trim.trim_type.url_slug : summaryCalculator.Wheels.trim.trim_type.name;\r\n const wheelImageBaseURL = `${summaryCalculator.Wheels.visual.static_content_base_path}/wheels/${yearSlug}/${carlineSlug}/`;\r\n const bgImagePath = summaryCalculator.SelectedColourInterior && summaryCalculator.SelectedColourInterior.include_in_360 ? `${wheelImageBaseURL}${yearSlug}-${carlineSlug}-${trimSlug.replaceAll(' ', '')}-${selectedColor}-${summaryCalculator.SelectedColourInterior.code}-WHEELS.jpg` : `${wheelImageBaseURL}${yearSlug}-${carlineSlug}-${trimSlug.replaceAll(' ', '')}-${selectedColor}-WHEELS.jpg`;\r\n if (bgImage !== bgImagePath)\r\n setbgImage(bgImagePath);\r\n\r\n selectedWheelObject = summaryCalculator.Wheels.wheels[Object.keys(summaryCalculator.Wheels.wheels)[selectedWheelIndex]];\r\n if (selectedWheelObject) {\r\n const fgImagePath = `${wheelImageBaseURL}${yearSlug}-${carlineSlug}-WHEELS-${selectedWheelObject.image.overlay_image_suffix}.png`;\r\n if(fgImage !== fgImagePath)\r\n setfgImage(fgImagePath);\r\n }\r\n }\r\n\r\n function handleShowFinanceClick(value) {\r\n setShowFinancePrice(value);\r\n }\r\n\r\n return (\r\n <>\r\n {getLoading(false, t)}\r\n {ReactHtmlParser(trimName)}
\r\n\r\n 
\r\n\t\t\t\t{ imageForegroundWheel ?\r\n\t\t\t\t\t
\r\n\r\n \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t: <>\r\n\t\t\t\t}\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Wheels;","// carousel driven by Core\r\n/* global mzCarousel */\r\n\r\nimport React, { useState } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { get360Data, goToTop, getLoading, setTabsNextAndPrevButtons, setCursorWaiting, getBaseUrl } from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport CollapseLegal from '../../2_Molecules/Collapse/CollapseLegal';\r\nimport ColourCard from '../../2_Molecules/ColourCard/ColourCard';\r\nimport ThreeSixtyContainer from '../../3_Organisms/360Container/360Container';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport PackageCard from '../../2_Molecules/PackageCard/PackageCard';\r\n\r\nexport const Connectivity = ({ ...props }) => {\r\n const [loading, setLoading] = useState(true);\r\n const [is360Loading, setIs360Loading] = useState(true);\r\n const summaryCalculator = window.summaryCalculator;\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [nav, setNav] = React.useState(null);\r\n let extArray = null;\r\n const [images, setImages] = React.useState({});\r\n const navigate = useNavigate();\r\n const listRef = React.useRef();\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalConnectivity));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const [connectModalOpen, setConnectModalOpen] = React.useState(false);\r\n const [carouselInit, setCarouselInit] = React.useState(false);\r\n const { t, i18n } = useTranslation(['connectivity', 'general']);\r\n const [showFinancePrice, setShowFinancePrice] = React.useState(summaryCalculator.ShowFinancePrice);\r\n const [selectedConnectedVehicleIndex, setSelectedConnectedVehicleIndex] = React.useState(summaryCalculator.SelectedConnectedVehicleIndex); \r\n const [connectivityPackage, setConnectivityPackage] = React.useState(null); \r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n \r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst navHelper = new NavHelper();\r\n\r\n function hideShownCmsBlock() {\r\n let toHideBlocks = document.querySelectorAll('.mz-footer.visually-shown');\r\n if (toHideBlocks) {\r\n toHideBlocks.forEach(function (e) {\r\n e.classList.remove('visually-shown');\r\n e.classList.add('visually-hidden');\r\n });\r\n }\r\n }\r\n\r\n hideShownCmsBlock();\r\n\r\n summaryCalculator.CurrentStep = 5;\r\n \r\n\r\n React.useEffect(() => {\r\n\t\tasync function executeTasks() {\r\n if (!summaryCalculator.isDataLoaded()) {\r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, packageCode);\r\n\r\n if (JSON.parse(sessionStorage.getItem(Constants.HasFinancialProviderError)) === true) {\r\n const vehiclePageUri = `/${decodeURI(window.location.search)}`;\r\n navigate(vehiclePageUri)\r\n }\r\n\r\n setLoading(false);\r\n } else {\r\n setLoading(false);\r\n }\r\n\r\n if (!loading) {\r\n if (nav === null) {\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender); \r\n }\r\n\r\n if(summaryCalculator.Packages && !connectivityPackage) {\r\n setConnectivityPackage(summaryCalculator.Packages.connected_services[0]);\r\n }\r\n }\r\n\r\n if (listRef.current) {\r\n window.removeEventListener('resize', setListMaxHeight);\r\n window.addEventListener('resize', setListMaxHeight);\r\n setListMaxHeight();\r\n }\r\n \r\n }\r\n\r\n executeTasks();\r\n }, [loading, nav, connectivityPackage]);\r\n\r\n function getConnectivityImagePath() {\r\n const imagePath = getBaseUrl() + process.env.REACT_APP_BASIC_CONTENT_PATH;\r\n //return `https://preprod.mazda.ca/globalassets/mazda-canada/discover-mazda/innovation/mymazdaapp/4.1_c44_remotevehiclestart_nobackground_en.png`\r\n \r\n return `${imagePath}${connectivityPackage.image_folder}hero_section_bnp${connectivityPackage.image_extension}`\r\n }\r\n\r\n function getModalImagePath(carousel) {\r\n const imagePath = getBaseUrl() + process.env.REACT_APP_BASIC_CONTENT_PATH;\r\n \r\n return `${imagePath}${connectivityPackage.image_folder}${carousel.image}`\r\n }\r\n\r\n function nextStep() {\r\n goToTop();\r\n navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/accessories${decodeURI(window.location.search)}`)\r\n\t\tgtmHelper.setGTM({'action':'Next Step'}, true , false);\r\n }\r\n\r\n function setListMaxHeight() {\r\n if (listRef.current && typeof(mzFunc) === 'object'){\r\n if (window.innerWidth < 1200) {\r\n listRef.current.style.height = 'auto';\r\n } else {\r\n const baseTarget= document.querySelector('.App-container .mz-connectivity-page');\r\n const contentHeight = baseTarget.querySelector('.mz-connectivity-page__title').clientHeight + baseTarget.querySelector('.mz-connectivity-page__content').clientHeight;\r\n const visibleHeight = window.innerHeight - baseTarget.querySelector('.mz-pricing').clientHeight - document.querySelector('.mz-menu').clientHeight - baseTarget.querySelector('nav').clientHeight - document.querySelector('.mz-alert--permanent')?.clientHeight;\r\n if(contentHeight > visibleHeight){\r\n listRef.current.style.height = (window.innerHeight +150)+'px';\r\n }else{\r\n listRef.current.style.height = 'auto';\r\n }\r\n }\r\n\t\t}\r\n\r\n\t}\r\n\r\n function handleShowFinanceClick(value) {\r\n setShowFinancePrice(value);\r\n }\r\n\r\n async function handleSelectedConnectedVehiclePackage(index) {\r\n setCursorWaiting(true);\r\n\r\n await summaryCalculator.setSelectedConnectedVehicleIndex(index);\r\n\r\n setSelectedConnectedVehicleIndex(index);\r\n\t\tgtmHelper.setGTM({'action':'Add Connected Vehicle Package', 'package': summaryCalculator.SelectedConnectedVehiclePackage.name}, false, false);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n async function handleRemoveConnectedVehiclelPackage(index) {\r\n setCursorWaiting(true);\r\n\r\n\t\tgtmHelper.setGTM({'action':'Remove Connected Vehicle Package', 'package': summaryCalculator.SelectedConnectedVehiclePackage.name}, true, false);\r\n\r\n await summaryCalculator.setSelectedConnectedVehicleIndex(null);\r\n\r\n setSelectedConnectedVehicleIndex(null);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n\twindow.addEventListener('resize', setListMaxHeight);\r\n\r\n function setCarousel(){\r\n if(carouselInit){\r\n return `\r\n
\r\n : null}\r\n {summaryCalculator.Wheels?.wheels ?\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {ReactHtmlParser(t(\"select_wheels\"))}
\r\n\r\n\r\n {\r\n\t\t\t\t\t\t\t\t\t\tdocument.querySelector('body').classList.add('disabled');\r\n\t\t\t\t\t\t\t\t\t\tsetLegalModalOpen(true)}}\r\n />\r\n
\r\n \r\n
`\r\n }\r\n }\r\n\r\n function setBullets(){\r\n let slideContent='';\r\n if(connectivityPackage) {\r\n connectivityPackage.carousel.map((carousel, index) => {\r\n slideContent +=``;\r\n });\r\n }\r\n\r\n return slideContent;\r\n }\r\n\r\n function setSlides(){\r\n let slideContent='';\r\n if(connectivityPackage) {\r\n connectivityPackage.carousel.map((carousel, index) => {\r\n slideContent +=`\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ${setBullets()}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
`;\r\n }\r\n\r\n return (\r\n <>\r\n {\r\n !summaryCalculator.isDataLoaded() ? getLoading(loading, t) : null\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n ${carousel.content}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n ![](\"${getModalImagePath(carousel)}\")
\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default Connectivity;","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\n//import SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { formatPrice, convertNum, setCursorWaiting } from '../../../utils'\r\n\r\nexport const CollapseFinance = ({dropdownCallback, selectCallback, setSelectedFinanceOption, key, ...props }) => {\r\n const { t, i18n } = useTranslation(['payments', 'general']);\r\n\r\n const summaryCalculator = window.summaryCalculator;\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const [collapseOpenContent, setCollapseOpenContent] = useState('');\r\n\r\n const [isCollapsed, setIsCollapsed] = useState(false);\r\n const [didInit, setInit] = React.useState(false);\r\n const collapseRef = useRef();\r\n\r\n const [update, setForceUpdate] = useState('');\r\n \r\n function termCanBeDisplayed(term) {\r\n const allowedTerm = [12,24,36,48,60,72,84];\r\n \r\n return allowedTerm.includes(term);\r\n }\r\n\r\n function hasRatePercentageDiscount(financeElement) {\r\n return (Number.parseFloat(financeElement.aprRate) !== Number.parseFloat(financeElement.aprRateDiscounted));\r\n }\r\n\r\n function getFinanceOptions(financialInfo) {\r\n if (summaryCalculator.getResponsesHasError() === true)\r\n return (\r\n <>\r\n {t(\"connectivity:title\")}
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n {connectivityPackage &&\r\n
\r\n \r\n
}\r\n \r\n })
\r\n
\r\n \r\n {ReactHtmlParser(connectivityPackage.description)}\r\n\r\n {\r\n e.preventDefault();\r\n setConnectModalOpen(true);\r\n //mzCarousel.init();\r\n if(!carouselInit){\r\n \r\n // window.setTimeout(()=>{\r\n setCarouselInit(true)\r\n mzCarousel.init();\r\n \r\n //}, 1000)\r\n \r\n }\r\n }}>{connectivityPackage.carousel_cta_text}\r\n
\r\n \r\n {connectivityPackage && Object.entries(connectivityPackage.subscription).map(([key, value], index) => \r\n
\r\n {t(\"general:contact_a_dealer\")}
\r\n \r\n ) \r\n else\r\n return (\r\n - \r\n {summaryCalculator.LoyaltyChecked ?\r\n
- {t(\"payments:mazda_loyalty_collapse_title\")} :''}\r\n
- {t(\"months\")}{t(\"rate\")}{t(\"weekly_payment\")}{t(\"bi_weekly_payment\")}{t(\"monthly_payment\")} \r\n { financialInfo.calculatedFinance.financeValues.map((financeElement, index) => {\r\n if (termCanBeDisplayed(financeElement.term)){\r\n return (\r\n <>\r\n
- \r\n \r\n {summaryCalculator.LoyaltyChecked && hasRatePercentageDiscount(financeElement) ? \r\n {financeElement.aprRate ? convertNum(financeElement.aprRate, 2) : \"\"}% {convertNum(financeElement.aprRateDiscounted, 2)}%:\r\n {financeElement.aprRate ? convertNum(financeElement.aprRate, 2) : \"\"}%\r\n }\r\n {formatPrice(financeElement[summaryCalculator.IncludeTaxes ? 'weeklyWithTaxes' : 'weekly'])}\r\n {formatPrice(financeElement[summaryCalculator.IncludeTaxes ? 'biWeeklyWithTaxes' : 'biWeekly'])}\r\n {formatPrice(financeElement[summaryCalculator.IncludeTaxes ? 'monthlyWithTaxes' : 'monthly'])}\r\n \r\n {summaryCalculator.LoyaltyChecked && !hasRatePercentageDiscount(financeElement) ? \r\n
- \r\n {t(\"payments:item_contains_discount\", { discount: formatPrice(summaryCalculator.Incentives.loyalty.cash_value) })}\r\n : null}\r\n \r\n )\r\n }\r\n })}\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nCollapseFinance.propTypes = {\r\n}\r\n\r\nCollapseFinance.defaultProps = {\r\n}\r\n\r\nexport default CollapseFinance;","import React, { useState, useEffect, useRef } from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\n\r\nimport { formatPrice, getIncentiveDisplayName, getMazdaFeesAndLeviesDetailTitle, convertNum, setCursorWaiting, setCheckChanged, getProvince, getLang} from '../../../utils'\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport OcaService from '../../../Services/OcaService';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\nimport { Button } from '../../1_Atoms/Button/Button';\r\nimport { OcaModal } from '../../3_Organisms/Modal/OcaModal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport CollapseFinance from '../Collapse/CollapseFinance';\r\nimport { openModal } from '../../../Helpers/helpers';\r\n\r\nexport const FinanceOptions = ({ setSelectedFinanceOption, includeFees, includeTaxes, includeRebates, setPreorderModalOpen, ...props }) => {\r\n const navigate = useNavigate();\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const summaryCalculator = window.summaryCalculator;\r\n\r\n const [feesAndLeviesToDisplay, setFeesAndLeviesToDisplay] = useState(summaryCalculator.FinancialInfo.calculatedCash.feesAndLevies.detail.filter(item => item.title !== 'PDE'));\r\n\r\n const [didInit, setInit] = useState(false);\r\n const [showDetailedPricing, toggleShowDetailedPricing] = useState(false);\r\n const financeDetailRef1 = useRef();\r\n const financeDetailRef2 = useRef();\r\n const financeDetailRef3 = useRef();\r\n\r\n const { t, i18n } = useTranslation(['payments', 'general', 'summary']);\r\n const provinceCode = getProvince().toUpperCase();\r\n const [financialInfo, setFinancialInfo] = useState(summaryCalculator.FinancialInfo);\r\n const [update, setForceUpdate] = useState('');\r\n\r\n const gtmHelper = new GTMHelper();\r\n const ocaService = new OcaService();\r\n\r\n const [ocaOpen, setOcaModalOpen] = useState(false);\r\n const [financeType, setFinanceType] = useState(false);\r\n\r\n //Fixed Number provided by API\r\n const [currentIncentives, setCurrentIncentives] = useState(null);\r\n\r\n const [reserveOpen, setReserveModalOpen] = React.useState(false);\r\n\r\n useEffect(() =>{\r\n const collapse1 = financeDetailRef1.current;\r\n const collapse2 = financeDetailRef2.current;\r\n const collapse3 = financeDetailRef3.current;\r\n \r\n if(typeof window.mzAnimator === 'object' && !didInit && showDetailedPricing){\r\n window.mzAnimator.animateHeight(collapse1, 'CollapseDetailedFinance1', 'init')\r\n window.mzAnimator.animateHeight(collapse2, 'CollapseDetailedFinance2', 'init')\r\n window.mzAnimator.animateHeight(collapse3, 'CollapseDetailedFinance3', 'init')\r\n setInit(true);\r\n toggleCollapse(false);\r\n }else{\r\n toggleCollapse(true);\r\n }\r\n },[showDetailedPricing, didInit]);\r\n\r\n useEffect(() =>{\r\n (async function() {\r\n setInit(false);\r\n \r\n setFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n\r\n setForceUpdate(Math.random());\r\n })();\r\n },[summaryCalculator._tradeInValue, summaryCalculator._downPaymentValue, summaryCalculator.LoyaltyChecked, summaryCalculator.GraduateChecked, summaryCalculator.MilitaryChecked, summaryCalculator.FirstTimeOwnerChecked, summaryCalculator.IncludeFees, summaryCalculator.IncludeTaxes, summaryCalculator.AnnualMileage, summaryCalculator.IncludeRebates]); \r\n\r\n useEffect(() => {\r\n if(summaryCalculator.FinancialInfo.incentive_programs){\r\n setCurrentIncentives(summaryCalculator.FinancialInfo.incentive_programs?.find(element => element.type === \"incentive\"));\r\n }\r\n\r\n console.log('refreshing the finance options section');\r\n //console.log(summaryCalculator.FinancialInfo);\r\n }, [update]);\r\n\r\n\r\n function toggleCollapse(fromClick) {\r\n const collapse1 = financeDetailRef1.current;\r\n const collapse2 = financeDetailRef2.current;\r\n const collapse3 = financeDetailRef3.current;\r\n \r\n if(showDetailedPricing){\r\n window.mzAnimator.animateHeight(collapse1, 'CollapseDetailedFinance1', true)\r\n window.mzAnimator.animateHeight(collapse2, 'CollapseDetailedFinance2', true)\r\n window.mzAnimator.animateHeight(collapse3, 'CollapseDetailedFinance3', true)\r\n }else{\r\n window.mzAnimator.animateHeight(collapse1, 'CollapseDetailedFinance1', false)\r\n window.mzAnimator.animateHeight(collapse2, 'CollapseDetailedFinance2', false)\r\n window.mzAnimator.animateHeight(collapse3, 'CollapseDetailedFinance3', false)\r\n }\r\n if(fromClick)\r\n gtmHelper.setGTM({'action':'Collapse', 'type': 'Finance ', 'value': showDetailedPricing}, true , false);\r\n \r\n }\r\n\r\n function financeClick(financeType){\r\n document.querySelector('body').classList.add('disabled');\r\n\t\tsetOcaModalOpen(true);\r\n setFinanceType(financeType);\r\n\r\n const price = summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebatesTaxed;\r\n gtmHelper.setGTM({'action':`OCA - Finance Payment`,'year': year,'model': ReactHtmlParser(carline), 'trim': trim, 'price' : Math.round(price)}, true, false);\r\n }\r\n\r\n const handleContactDealerLinkClick = (e) => {\r\n e.preventDefault();\r\n\r\n const contactRoute = `/${year}/${carline}/${trim}/${model}/${packageCode}/summary?contactDealer`;\r\n navigate(contactRoute);\r\n }\r\n\r\n includeFees = summaryCalculator.IncludeFees;\r\n includeTaxes = summaryCalculator.IncludeTaxes;\r\n includeRebates = summaryCalculator.IncludeRebates;\r\n\r\n\tfunction getRebatesDetails() {\r\n\t\treturn financialInfo.calculatedCash.evRebates.details.map((rebate, index) => `\r\n
\r\n \r\n \r\n {t(\"term\")}: {summaryCalculator.FinancialInfo.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].term} {t(\"payments:months_lowercase\")} {getDisplayedRate()}%
\r\n{collapseOpenContent}
\r\n ${rebate.title==='federal'? t('fed_rebate'):t('prov_rebate') + ' ('+getProvince()+')'}
${rebate.finance ? '-' : ''}${formatPrice(rebate.finance, true)}\r\n${t('exterior')} ${options.exteriorColour.description}
\r\n ${formatPrice(options.exteriorColour.price, true)}\r\n${t('interior')} ${options.interiorColour.description}
\r\n ${formatPrice(options.interiorColour.price, true)}\r\n${t('package')} ${options.model_option_package.name}
\r\n ${formatPrice(options.model_option_package.financial.msrp, true)}\r\n${t(\"warranties\")} ${selectedWarrantyPackage.name}
\r\n ${formatPrice(warrantyPrice, true)}\r\n${t(\"connected\")} ${selectedConnectedVehiclePackage.name}
\r\n ${formatPrice(connectedPrice, true)}\r\n${`4x ${options.wheels.title}`}
\r\n ${formatPrice(options.wheels.base_msrp, true)}\r\n${`4x ${t(\"payments:tpms\")}`}
\r\n ${formatPrice(options.wheels.tpms, true)}\r\n${t(\"payments:installation\")}
\r\n ${formatPrice(options.wheels.install_cost, true)}\r\n{accessory.name}
\r\n {formatPrice(accessory.base_msrp, true)}\r\n{accessory.name} - Installation
\r\n {formatPrice(accessory.install_cost, true)}\r\n\r\n
\r\n )\r\n}\r\n\r\nFinanceOptions.propTypes = {\r\n\r\n}\r\n\r\nFinanceOptions.defaultProps = {\r\n\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\n//import SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { formatPrice, convertNum, setCursorWaiting } from '../../../utils'\r\n\r\nexport const CollapseLease = ({dropdownCallback, selectCallback, setSelectedLeaseOption, ...props }) => {\r\n const { t, i18n } = useTranslation(['payments', 'general']);\r\n\r\n const summaryCalculator = window.summaryCalculator;\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const [collapseOpenContent, setCollapseOpenContent] = useState('');\r\n\r\n const [isCollapsed, setIsCollapsed] = useState(false);\r\n const [didInit, setInit] = React.useState(false);\r\n const collapseRef = useRef();\r\n\r\n const [update, setForceUpdate] = useState('');\r\n\r\n function leaseTermCanBeDisplayed(term) {\r\n const allowedTerm = [36,39,42,45,48,51,54,57,60];\r\n\r\n return allowedTerm.includes(term);\r\n }\r\n\r\n function hasRatePercentageDiscount(leaseElement) {\r\n return (Number.parseFloat(leaseElement.leaseRate) !== Number.parseFloat(leaseElement.leaseRateDiscounted));\r\n }\r\n \r\n function getLeaseOptions(financialInfo) {\r\n if (summaryCalculator.getResponsesHasError() === true)\r\n return (\r\n <>\r\n {t(\"finance_options\")}
\r\n {!summaryCalculator.getResponsesHasError() ?\r\n <>\r\n\r\n
\r\n \r\n
\r\n {t(\"weekly\")}
\r\n {getWeeklyPrice()} \r\n\r\n
\r\n {t(\"bi_weekly\")}
\r\n {getBiWeeklyPrice()} \r\n\r\n
\r\n {t(\"monthly\")}
\r\n {getMonthlyPrice()} \r\n\r\n
\r\n \r\n :\r\n <>\r\n \r\n {ReactHtmlParser(t(\"general:generalErrorMessage\"))}\r\n
\r\n }\r\n \r\n\r\n
\r\n - \r\n
- \r\n
{t(\"msrp\")}
\r\n {`${formatPrice(summaryCalculator.SelectedModel.financial.msrp, true)}`}\r\n \r\n - \r\n
{t(\"trade_in\")}1
\r\n {`${summaryCalculator.FinancialInfo.tradeInValue > 0 ? '-' : ''}${formatPrice(summaryCalculator.FinancialInfo.tradeInValue, true)}`}\r\n \r\n {currentIncentives && currentIncentives.value >0 ?\r\n - \r\n
{t(\"current_incentive\")}
\r\n {currentIncentives?'-':''}{formatPrice(currentIncentives.value, true)}\r\n :''}\r\n {ReactHtmlParser(getOptionList())}\r\n {summaryCalculator.FinancialInfo.calculatedLease?.accessories.total > 0 ?\r\n getAccessoriesDetails()\r\n : '' }\r\n - \r\n
{t(\"freight\")}
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.freight, true)}`}\r\n \r\n - \r\n
{t(\"general:pde\")}
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.pde, true)}`}\r\n \r\n {includeFees ? - \r\n
\r\n {getMazdaFeesAndLeviesDetailTitle(\"Administration Fee\", t)}\r\n 9\r\n
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.adminServiceFees, true)}`}\r\n :''} \r\n {includeFees ? feesAndLeviesToDisplay.map((fee, index) => {\r\n return - \r\n
{ReactHtmlParser(getMazdaFeesAndLeviesDetailTitle(fee.title,t))}\r\n {fee.sup ? ReactHtmlParser(`${fee.sup}`) : ''}\r\n
\r\n {`${formatPrice(fee.price, true)}`}\r\n \r\n }):''}\r\n {includeRebates ? ReactHtmlParser(getRebatesDetails()) : \"\"}\r\n
- \r\n
{provinceCode === \"QC\" ? \"RDPRM\" : \"PPSA\"}7
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].ppsa, true)}`}\r\n \r\n - \r\n
{t(\"sub_total\")}
\r\n \r\n { includeFees && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.subtotalWithFeesWithRebates, true)}`} : null}\r\n { includeFees && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.subtotalWithFees, true)}`} : null}\r\n {!includeFees && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.subtotalWithRebates, true)}`} : null}\r\n {!includeFees && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.subtotal, true)}`} : null}\r\n \r\n \r\n {includeTaxes? - \r\n
{t(\"taxes\")}
\r\n \r\n {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.subtotalTaxes, true)}`} \r\n \r\n :''}\r\n\r\n - \r\n
{t(\"down_payment\")}2
\r\n {`${summaryCalculator.FinancialInfo.downPaymentValue > 0 ? '-' : ''}${formatPrice(summaryCalculator.FinancialInfo.downPaymentValue, true)}`}\r\n \r\n\r\n {summaryCalculator.FinancialInfo.calculatedFinance.rewards.map((el, index) => {\r\n return - \r\n
{getIncentiveDisplayName(el.type)}
\r\n {`-${el.cash_value?formatPrice(el.cash_value, true):formatPrice(el.value, true)}`}\r\n \r\n })}\r\n\r\n
- \r\n
- \r\n
{t(\"balance_to_finance\")}
\r\n {includeFees && includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebatesTaxed, true)}`} : null}\r\n {!includeFees && includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithRebatesTaxed, true)}`} : null}\r\n {includeFees && !includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFeesWithRebates, true)}`} : null}\r\n {includeFees && includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFeesTaxed, true)}`} : null}\r\n {includeFees && !includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithFees, true)}`} : null}\r\n {!includeFees && includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceTaxed, true)}`} : null}\r\n {!includeFees && !includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceWithRebates, true)}`} : null}\r\n {!includeFees && !includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinance, true)}`} : null}\r\n \r\n - \r\n
{t(\"period_of_loan\")}
\r\n {`${summaryCalculator.FinancialInfo.calculatedFinance.financeValues[summaryCalculator.FinanceTermIndex].term}`} {t(\"months\")}\r\n \r\n - \r\n
{t(\"rate\")}
\r\n {getDisplayedRate()}\r\n \r\n - \r\n
{t(\"informational_apr\")}
\r\n {getInformationalRate()}\r\n \r\n
\r\n
\r\n - \r\n
- \r\n
{t(\"cost_of_borrowing\")}
\r\n {getCostOfBorrowing()}\r\n \r\n - \r\n {\r\n e.preventDefault();\r\n toggleShowDetailedPricing(!showDetailedPricing);\r\n \r\n }}>{t(\"show_detailed_pricing\")}\r\n {\r\n e.preventDefault();\r\n toggleShowDetailedPricing(!showDetailedPricing);\r\n \r\n }}>\r\n \r\n
\r\n {window.allow_oca ?\r\n
\r\n \r\n {currentIncentives && currentIncentives.value != 0 ?\r\n i18n.language == \"en\" ?\r\n <>\r\n
\r\n \r\n :\r\n <>\r\n
\r\n \r\n :\r\n ''\r\n }\r\n {i18n.language == \"en\" ?\r\n
\r\n Payments shown include a {formatPrice(currentIncentives.value)} Current Incentive.
Contact your local Mazda retailer for details.
\r\n \r\n :\r\n <>\r\n
Les paiements indiqués incluent l'offre incitatives actuelle de {formatPrice(currentIncentives.value)}. Communiquez avec votre concessionnaire Mazda pour les détails.
\r\n\r\n \r\n :\r\n ''\r\n }\r\n {i18n.language == \"en\" ?\r\n
Informational APR {getInformationalRate()}. The rate selected is a special promotional rate. Alternatively, you can take advantage of cash purchase incentives that cannot be combined with the special promotional rate and your Informational APR would be as outlined above.
\r\n :\r\nTAP informatif {getInformationalRate()}. Le taux sélectionné est un taux promotionnel spécial. Si vous profitez plutôt des offres à l'achat au comptant qui ne peuvent être combinées avec le taux promotionnel spécial, votre TAP informatif serait celui indiqué ci-dessus.
\r\n }\r\n{t(\"general:contact_a_dealer\")}
\r\n \r\n ) \r\n else\r\n return (\r\n - \r\n {summaryCalculator.LoyaltyChecked ?\r\n
- {t(\"payments:mazda_loyalty_collapse_title\")} : ''}\r\n
- \r\n {t(\"months\")}{t(\"rate\")}{t(\"weekly_payment\")}{t(\"bi_weekly_payment\")}{t(\"monthly_payment\")}\r\n \r\n { financialInfo.calculatedLease.leaseValues.map((leaseElement, index) => {\r\n if (leaseTermCanBeDisplayed(leaseElement.term)){\r\n return (\r\n <>\r\n
- \r\n \r\n {summaryCalculator.LoyaltyChecked && hasRatePercentageDiscount(leaseElement) ? \r\n {convertNum(leaseElement.leaseRate, 2)}% {convertNum(leaseElement.leaseRateDiscounted, 2)}%:\r\n {convertNum(leaseElement.leaseRate, 2)}%\r\n }\r\n {formatPrice(leaseElement[summaryCalculator.IncludeTaxes ? 'weeklyWithTaxes' : 'weekly'])}\r\n {formatPrice(leaseElement[summaryCalculator.IncludeTaxes ? 'biWeeklyWithTaxes' : 'biWeekly'])}\r\n {formatPrice(leaseElement[summaryCalculator.IncludeTaxes ? 'monthlyWithTaxes' : 'monthly'])}\r\n \r\n {summaryCalculator.LoyaltyChecked && !hasRatePercentageDiscount(leaseElement) ? \r\n
- \r\n {t(\"payments:item_contains_discount\", { discount: formatPrice(summaryCalculator.Incentives.loyalty.cash_value) })}\r\n : null}\r\n \r\n )\r\n }\r\n })}\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nCollapseLease.propTypes = {\r\n}\r\n\r\nCollapseLease.defaultProps = {\r\n}\r\n\r\nexport default CollapseLease;","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\n//import SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { convertNum, setCursorWaiting } from '../../../utils'\r\n\r\nexport const CollapseLeaseMileage = ({callback, key, setSelectedLeasesMileage, ...props }) => {\r\n const { t, i18n } = useTranslation(['payments', 'general']);\r\n\r\n const summaryCalculator = window.summaryCalculator;\r\n\tconst gtmHelper = new GTMHelper();\r\n\r\n const [isCollapsed, setIsCollapsed] = useState(false);\r\n const [didInit, setInit] = React.useState(false);\r\n const collapseRef = useRef();\r\n\r\n const [collapseClosedContent, setCollapseClosedContent] = useState('');\r\n const [currentMileage, setCurrentAnnuelMileage] = useState(summaryCalculator.AnnualMileage);\r\n \r\n const [update, setForceUpdate] = useState('');\r\n\r\n //content for mileage current drop down select\r\n const ClosedContent = ()=>{\r\n let mileage = '';\r\n\r\n switch (parseInt(summaryCalculator.AnnualMileage)) {\r\n case 2:\r\n mileage = 20000;\r\n break;\r\n case 3:\r\n mileage = 16000;\r\n break;\r\n case 0:\r\n mileage = 24000;\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n return `${t(\"annual_km\")}: ${convertNum(mileage)}`\r\n }\r\n\r\n //content for mileage dropdown\r\n function collapseOpenContent() {\r\n return (\r\n \r\n
\r\n \r\n \r\n {t(\"term\")}: {summaryCalculator.FinancialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].term} {t(\"payments:months_lowercase\")} {getDisplayedRate()}%
\r\n{collapseOpenContent}
\r\n - \r\n \r\n
- \r\n \r\n \r\n \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nCollapseLeaseMileage.propTypes = {\r\n\r\n}\r\n\r\nCollapseLeaseMileage.defaultProps = {\r\n\r\n}\r\n\r\nexport default CollapseLeaseMileage;","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { Trans, useTranslation } from \"react-i18next\";\r\n\r\nimport { formatPrice, getIncentiveDisplayName, getMazdaFeesAndLeviesDetailTitle, convertNum, getProvince, getLang} from '../../../utils'\r\nimport { openModal } from '../../../Helpers/helpers';\r\n\r\n//import SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\nimport { Button } from '../../1_Atoms/Button/Button';\r\nimport { OcaModal } from '../../3_Organisms/Modal/OcaModal';\r\nimport CollapseLease from '../Collapse/CollapseLease';\r\nimport CollapseLeaseMileage from '../Collapse/CollapseLeaseMileage';\r\n\r\nexport const LeaseOptions = ({ setSelectedLeaseOption, includeFees, includeTaxes, includeRebates, setSelectedLeasesMileage, setPreorderModalOpen, ...props }) => {\r\n const navigate = useNavigate();\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const summaryCalculator = window.summaryCalculator;\r\n \r\n const { t, i18n } = useTranslation(['payments', 'general', 'summary']);\r\n const provinceCode = getProvince().toUpperCase();\r\n const [financialInfo, setFinancialInfo] = useState(summaryCalculator.FinancialInfo);\r\n const [update, setForceUpdate] = useState(''); \r\n const [isLeaseTermCollapsed, setLeaseTermCollapsed] = useState(false);\r\n\r\n const [didInit, setInit] = useState(false);\r\n const [showDetailedPricing, toggleShowDetailedPricing] = useState(false);\r\n const leaseDetailRef1 = useRef();\r\n const leaseDetailRef2 = useRef();\r\n const leaseDetailRef3 = useRef();\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n \r\n const [ocaOpen, setOcaModalOpen] = useState(false);\r\n const [financeType, setFinanceType] = useState(false);\r\n\r\n //Fixed Number provided by API\r\n const [currentIncentives, setCurrentIncentives] = useState(null);\r\n \r\n const [reserveOpen, setReserveModalOpen] = React.useState(false);\r\n\r\n useEffect(() =>{\r\n const collapse1 = leaseDetailRef1.current;\r\n const collapse2 = leaseDetailRef2.current;\r\n const collapse3 = leaseDetailRef3.current;\r\n \r\n if(typeof window.mzAnimator === 'object' && !didInit && showDetailedPricing){\r\n window.mzAnimator.animateHeight(collapse1, 'CollapseDetailedLease1', 'init')\r\n window.mzAnimator.animateHeight(collapse2, 'CollapseDetailedLease2', 'init')\r\n window.mzAnimator.animateHeight(collapse3, 'CollapseDetailedLease3', 'init')\r\n setInit(true);\r\n toggleCollapse(false);\r\n }else{\r\n toggleCollapse(true);\r\n }\r\n },[showDetailedPricing, didInit]);\r\n\r\n \r\n function toggleCollapse(fromClick) {\r\n const collapse1 = leaseDetailRef1.current;\r\n const collapse2 = leaseDetailRef2.current;\r\n const collapse3 = leaseDetailRef3.current;\r\n \r\n if(showDetailedPricing){\r\n window.mzAnimator.animateHeight(collapse1, 'CollapseDetailedLease1', true)\r\n window.mzAnimator.animateHeight(collapse2, 'CollapseDetailedLease2', true)\r\n window.mzAnimator.animateHeight(collapse3, 'CollapseDetailedLease3', true)\r\n }else{\r\n window.mzAnimator.animateHeight(collapse1, 'CollapseDetailedLease1', false)\r\n window.mzAnimator.animateHeight(collapse2, 'CollapseDetailedLease2', false)\r\n window.mzAnimator.animateHeight(collapse3, 'CollapseDetailedLease3', false)\r\n }\r\n if(fromClick)\r\n gtmHelper.setGTM({'action':'Collapse', 'type': 'Detailed Lease ', 'value': showDetailedPricing}, true , false);\r\n \r\n }\r\n function financeClick(financeType){\r\n document.querySelector('body').classList.add('disabled');\r\n\t\tsetOcaModalOpen(true);\r\n setFinanceType(financeType);\r\n \r\n const price = summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFeesWithRebatesTaxed;\r\n gtmHelper.setGTM({'action':`OCA - Lease Payment`,'year': year,'model': ReactHtmlParser(carline), 'trim': trim, 'price' : Math.round(price)}, true, false);\r\n }\r\n\r\n function getRebatesDetails() {\r\n\t\treturn financialInfo !== null ? financialInfo.calculatedLease.evRebates.details.map((rebate, index) => `\r\n
\r\n \r\n \r\n {collapseClosedContent}
\r\n{collapseOpenContent()}
\r\n ${rebate.title==='federal'? t('fed_rebate'):t('prov_rebate') + ' ('+getProvince()+')'}
${rebate.lease ? '-' : ''}${formatPrice(rebate.lease, true)}\r\n{t('tax_fed_rebate')}
{formatPrice(financialInfo.calculatedLease.evRebates.total.lease_federal_tax, true)}{t('tax_prov_rebate') + ' ('+getProvince()+')'}
{formatPrice(financialInfo.calculatedLease.evRebates.total.lease_provincial_tax, true)}${t('exterior')} ${options.exteriorColour.description}
\r\n ${formatPrice(options.exteriorColour.price, true)}\r\n${t('interior')} ${options.interiorColour.description}
\r\n ${formatPrice(options.interiorColour.price, true)}\r\n${t('package')} ${options.model_option_package.name}
\r\n ${formatPrice(options.model_option_package.financial.msrp, true)}\r\n${t(\"warranties\")} ${selectedWarrantyPackage.name}
\r\n ${formatPrice(warrantyPrice, true)}\r\n${t(\"connected\")} ${selectedConnectedVehiclePackage.name}
\r\n ${formatPrice(connectedPrice, true)}\r\n${`4x ${options.wheels.title}`}
\r\n ${formatPrice(options.wheels.base_msrp, true)}\r\n${`4x ${t(\"payments:tpms\")}`}
\r\n ${formatPrice(options.wheels.tpms, true)}\r\n${t(\"payments:installation\")}
\r\n ${formatPrice(options.wheels.install_cost, true)}\r\n{accessory.name}
\r\n {formatPrice(accessory.base_msrp, true)}\r\n{accessory.name} - Installation
\r\n {formatPrice(accessory.install_cost, true)}\r\n\r\n
\r\n )\r\n}\r\n\r\nLeaseOptions.propTypes = {\r\n\r\n}\r\n\r\nLeaseOptions.defaultProps = {\r\n\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport { openModal } from '../../../Helpers/helpers';\r\nimport { getMazdaFeesAndLeviesDetailTitle, formatPrice, getProvince, getLang } from '../../../utils';\r\nimport { CollapseList } from '../Collapse/CollapseList';\r\n\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Button } from '../../1_Atoms/Button/Button';\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\n\r\nexport const CashOptions = ({ ...props }) => {\r\n const gtmHelper = new GTMHelper();\r\n\r\n const summaryCalculator = window.summaryCalculator;\r\n //Fixed Number provided by API\r\n const currentIncentives = summaryCalculator.FinancialInfo.incentive_programs.find(element => element.type === \"incentive\");\r\n const { t, i18n } = useTranslation(['payments', 'general']);\r\n //const [update, setForceUpdate] = useState('');\r\n const [financialInfo, setFinancialInfo] = useState(summaryCalculator.FinancialInfo);\r\n const [reserveOpen, setReserveModalOpen] = React.useState(false);\r\n\r\n function getMazdaPriceDetails() {\r\n // TODO : THIS HAS MOVED OUT INTO A COLLAPSE BOX, I HAVE COMMENTED DURING THE MERGE FROM DEVELOP - VIET TO WILL\r\n \r\n //{t(\"lease_options\")}
\r\n {!summaryCalculator.getResponsesHasError() ?\r\n <>\r\n\r\n
\r\n \r\n
\r\n {t(\"weekly\")}
\r\n {getWeeklyPrice()} \r\n\r\n
\r\n {t(\"bi_weekly\")}
\r\n {getBiWeeklyPrice()} \r\n\r\n
\r\n {t(\"monthly\")}
\r\n {getMonthlyPrice()} \r\n\r\n
\r\n \r\n :\r\n <>\r\n \r\n {ReactHtmlParser(t(\"general:generalErrorMessage\"))}\r\n
\r\n } \r\n \r\n\r\n
\r\n - \r\n
- \r\n
{t(\"msrp\")}
\r\n {`${formatPrice(summaryCalculator.SelectedModel.financial.msrp, true)}`}\r\n \r\n - \r\n
{t(\"trade_in\")}1
\r\n {`${summaryCalculator.FinancialInfo.tradeInValue > 0 ? '-' : ''}${formatPrice(summaryCalculator.FinancialInfo.tradeInValue, true)}`}\r\n \r\n {currentIncentives && currentIncentives.value >0 ?\r\n - \r\n
{t(\"current_incentive\")}
\r\n {currentIncentives?'-':''}{formatPrice(currentIncentives.value, true)}\r\n :''}\r\n {ReactHtmlParser(getOptionList())}\r\n {summaryCalculator.FinancialInfo.calculatedLease?.accessories.total > 0?\r\n getAccessoriesDetails()\r\n :''}\r\n - \r\n
{t(\"freight\")}
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.freight, true)}`}\r\n \r\n - \r\n
{t(\"general:pde\")}
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.pde, true)}`}\r\n \r\n {includeFees ? - \r\n
\r\n {getDisplayedFee({title: \"Administration Fee\"})}\r\n 9\r\n
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.adminServiceFees, true)}`}\r\n :''} \r\n {includeFees? getMazdaFeesAndLeviesDetails().map((fee, index) => {\r\n return - \r\n
{ReactHtmlParser(getDisplayedFee(fee))}\r\n {fee.sup ? ReactHtmlParser(`${fee.sup}`) : ''}\r\n
\r\n {`${formatPrice(fee.price, true)}`}\r\n \r\n }):''}\r\n\t\t\t\t\t{includeRebates ? ReactHtmlParser(getRebatesDetails()) : \"\"}\r\n
- \r\n
{provinceCode === \"QC\" ? \"RDPRM\" : \"PPSA\"}7
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].ppsa, true)}`}\r\n \r\n - \r\n
{t(\"sub_total\")}
\r\n \r\n { includeFees && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.subtotalWithFeesWithRebates, true)}`} : null}\r\n { includeFees && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.subtotalWithFees, true)}`} : null}\r\n {!includeFees && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.subtotalWithRebates, true)}`} : null}\r\n {!includeFees && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.subtotal, true)}`} : null}\r\n \r\n \r\n - \r\n
{t(\"down_payment\")}2
\r\n {`${summaryCalculator.FinancialInfo.downPaymentValue > 0 ? '-' : ''}${formatPrice(summaryCalculator.FinancialInfo.downPaymentValue, true)}`}\r\n \r\n {summaryCalculator.FinancialInfo.calculatedLease.rewards.map((el, index) => {\r\n return - \r\n
{getIncentiveDisplayName(el.type)}
\r\n {`-${el.cash_value?formatPrice(el.cash_value, true):formatPrice(el.value, true)}`}\r\n \r\n })}\r\n\r\n
- \r\n
- \r\n
{t(\"balance_to_lease\")}
\r\n {includeFees && includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFeesWithRebates, true)}`} : null}\r\n {!includeFees && includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithRebates, true)}`} : null}\r\n {includeFees && !includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFeesWithRebates, true)}`} : null}\r\n {includeFees && includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFees, true)}`} : null}\r\n {includeFees && !includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithFees, true)}`} : null}\r\n {!includeFees && includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLease, true)}`} : null}\r\n {!includeFees && !includeTaxes && includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLeaseWithRebates, true)}`} : null}\r\n {!includeFees && !includeTaxes && !includeRebates ? {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.balanceToLease, true)}`} : null}\r\n \r\n - \r\n
{t(\"period_of_lease\")}
\r\n {`${summaryCalculator.FinancialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].term}`} months\r\n \r\n - \r\n
{t(\"rate\")}
\r\n {`${getDisplayedRate()}`}\r\n \r\n - \r\n
{t(\"informational_apr\")}
\r\n {getInformationalRate()}\r\n \r\n
\r\n
\r\n - \r\n
- \r\n
{t(\"total_payable\")}
\r\n {`${getTotalPayable()}`}\r\n \r\n {includeTaxes? - \r\n
{t(\"taxes\")}
\r\n {`${formatPrice(summaryCalculator.FinancialInfo.calculatedLease.leaseValues[summaryCalculator.LeaseTermIndex].monthly*summaryCalculator.FinancialInfo.calculatedLease.tax, true)}`}\r\n :''}\r\n
- \r\n
- \r\n
{t(\"amount_due_on_delivery\")}
\r\n \r\n - \r\n
{t(\"first_payment\")}
\r\n {getFirstPayment()}\r\n \r\n { includeTaxes ? - \r\n
{t(\"taxe_first_payment\")}
\r\n {`${formatPrice(firstPaymentTaxes, true)}`}\r\n : null}\r\n - \r\n
{t(\"down_payment\")}2
\r\n {formatPrice(summaryCalculator.FinancialInfo.calculatedLease.downPaymentValue, true)}\r\n \r\n {includeTaxes? - \r\n
{t(\"taxes_on_down_payment\")}
\r\n {formatPrice(summaryCalculator.FinancialInfo.calculatedLease.downPaymentTax, true)}\r\n :''}\r\n {includeRebates && includeTaxes ? getTaxRebatesDetails() : \"\"}\r\n - \r\n
{t(\"total_due\")}
\r\n {getTotalDue()}\r\n \r\n
- \r\n
- \r\n {\r\n e.preventDefault();\r\n toggleShowDetailedPricing(!showDetailedPricing);\r\n \r\n }}>{t(\"show_detailed_pricing\")}\r\n {\r\n e.preventDefault();\r\n toggleShowDetailedPricing(!showDetailedPricing);\r\n \r\n }}>\r\n \r\n
\r\n {window.allow_oca ?\r\n
\r\n \r\n {currentIncentives && currentIncentives.value != 0 ?\r\n i18n.language == \"en\" ?\r\n <>\r\n
\r\n \r\n :\r\n <>\r\n
\r\n \r\n :\r\n ''\r\n }\r\n {i18n.language == \"en\" ?\r\n
\r\n Payments shown include a {formatPrice(currentIncentives.value)} Current Incentive.
Contact your local Mazda retailer for details.
\r\n \r\n :\r\n <>\r\n
Les paiements indiqués incluent l'offre incitatives actuelle de {formatPrice(currentIncentives.value)}. Communiquez avec votre concessionnaire Mazda pour les détails.
\r\n\r\n \r\n :\r\n ''\r\n }\r\n {i18n.language == \"en\" ?\r\n
Informational APR {getInformationalRate()}. The rate selected is a special promotional rate. Alternatively, you can take advantage of cash purchase incentives that cannot be combined with the special promotional rate and your Informational APR would be as outlined above.
\r\n :\r\nTAP informatif {getInformationalRate()}. Le taux sélectionné est un taux promotionnel spécial. Si vous profitez plutôt des offres à l'achat au comptant qui ne peuvent être combinées avec le taux promotionnel spécial, votre TAP informatif serait celui indiqué ci-dessus.
\r\n }\r\n${t(\"accessories\")}${t(\"accLegal\")}
${formatPrice(financialInfo.calculatedCash.accessories.total, true)}- \r\n
${getMazdaFeesAndLeviesDetailTitle(\"Administration Fee\", t)}9
${formatPrice(financialInfo.adminServiceFees, true)} \r\n ${t(\"msrp\")}
${formatPrice(summaryCalculator.SelectedModel.financial.msrp, true)} \r\n ${getOptionList()}\r\n ${t(\"freight\")}
${formatPrice(financialInfo.freight, true)} \r\n ${t(\"general:pde\")}
${formatPrice(financialInfo.pde, true)} \r\n
- \r\n
${`4x ${options.wheels.title}`}
${formatPrice(options.wheels.base_msrp, true)} \r\n ${`4x ${t(\"payments:tpms\")}`}
${formatPrice(options.wheels.tpms, true)} \r\n ${t(\"payments:installation\")}
${formatPrice(options.wheels.install_cost, true)} \r\n
- \r\n
${`${selectedConnectedVehiclePackage.title}`}
${formatPrice(connectedPrice, true)} \r\n
- ';\r\n accessories.map((accessory, index) => {\r\n list += `
${accessory.name}
${formatPrice(accessory.base_msrp, true)} `\r\n list += `${accessory.name} - Installation
${formatPrice(accessory.install_cost, true)} `\r\n });\r\n list += '
- \";\r\n\r\n if(summaryCalculator.SelectedAddedProtectionPackage.name != undefined ){\r\n list += `
${t(\"added_protection\")} ${summaryCalculator.SelectedAddedProtectionPackage.name}
${formatPrice(summaryCalculator.SelectedAddedProtectionPackage.financial.msrp, true)} `\r\n }\r\n if(summaryCalculator.SelectedAppearanceProtectionPlan.name != undefined && summaryCalculator.SelectedAppearanceProtectionPlansIndex !== null) {\r\n\r\n list += `${t(\"appearance_protection\")} ${summaryCalculator.SelectedAppearanceProtectionPlansPackage.name} for ${summaryCalculator.SelectedAppearanceProtectionPlan.name}
${formatPrice(summaryCalculator.SelectedAppearanceProtectionPlansPackage.financial.msrp, true)} `\r\n } \r\n list += \"
- \r\n ${feesAndLeviesToDisplay.map((fee, index) => `
- \r\n
${getMazdaFeesAndLeviesDetailTitle(fee.title, t)}${fee.sup ? `${fee.sup}` : ''}
${formatPrice(fee.price, true)}\r\n `).join(\"\")}\r\n
- \r\n ${financialInfo.calculatedCash.evRebates.details.map((rebate, index) => `
- \r\n \t
${rebate.title==='federal'? t('fed_rebate'):t('prov_rebate') + ' ('+getProvince()+')'}
-${formatPrice(rebate.cash, true)}\r\n `).join(\"\")}\r\n
- \r\n ${financialInfo.calculatedCash.incentives.taxable.details.map((incentive, index) => {\r\n const price = incentive.cash_value ? incentive.cash_value : incentive.value;\r\n return `
- \r\n
${getIncentiveDisplayName(incentive)}
-${formatPrice(price, true)}\r\n `;\r\n }).join(\"\")}\r\n ${financialInfo.calculatedCash.incentives.nonTaxable.details.map((incentive, index) => {\r\n const price = incentive.cash_value ? incentive.cash_value : incentive.value;\r\n return ` - \r\n
${getIncentiveDisplayName(incentive)}
-${formatPrice(price, true)}\r\n `;\r\n }).join(\"\")}\r\n ${(currentIncentives.value > 0) ? ` - \r\n
${t(\"current_incentive\")}
\r\n ${currentIncentives?'-':''}${formatPrice(currentIncentives.value, true)}\r\n `:''}\r\n ${(summaryCalculator.FinancialInfo.mazdaCashIncentive > 0) ? ` - \r\n
${t(\"mazda_cash_incentive\")}
\r\n ${summaryCalculator.FinancialInfo.mazdaCashIncentive?'-':''}${formatPrice(summaryCalculator.FinancialInfo.mazdaCashIncentive, true)}\r\n `:''}\r\n - \r\n
${t(\"trade_in\")}1
${financialInfo.tradeInValue>0?'-':''}${formatPrice(financialInfo.tradeInValue, true)}\r\n \r\n
${t('exterior')} ${options.exteriorColour.description}
\r\n ${formatPrice(options.exteriorColour.price, true)}\r\n${t('interior')} ${options.interiorColour.description}
\r\n ${formatPrice(options.interiorColour.price, true)}\r\n${t('package')} ${options.model_option_package.name}
\r\n ${formatPrice(options.model_option_package.financial.msrp, true)}\r\n${t(\"warranties\")} ${selectedWarrantyPackage.name}
\r\n ${formatPrice(warrantyPrice, true)}\r\n${t(\"connected\")} ${selectedConnectedVehiclePackage.title}
\r\n ${formatPrice(connectedPrice, true)}\r\n${t(\"added_protection\")} ${selectedAddedProtectionPackage.name}
\r\n ${formatPrice(selectedAddedProtectionPackagePrice, true)}\r\n${t(\"appearance_protection\")} ${appearanceProtectionPlan.name}${selectedAppearanceProtectionPlansPackage.name}
\r\n ${formatPrice(selectedAppearanceProtectionPlansPackagePrice, true)}\r\n${options.wheels.title}
\r\n ${formatPrice(options.wheels.price, true)}\r\n\r\n
\r\n )\r\n}\r\n//ev_rebates >0? evRebate.getRebate(ev_rebates, 'general', true)","import React from 'react';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport PropTypes from 'prop-types';\r\n\r\n\r\nexport const TradeInModal = ({modalContent, checkTradeInValue, isOpen, modalId, handleClose, setFinancialInfo, ...props }) => {\r\n const summaryCalculator = window.summaryCalculator;\r\n const { t } = useTranslation(['summary', 'general']);\r\n //const [reserveOpen, setReserveOpen] = React.useState(isOpen);\r\n\r\n React.useEffect(() => {\r\n // Restart React Forms app.\r\n // Skip if this is the first time loading it because App.js takes care of it.\r\n if (window.isReactFormsAppLoaded && typeof window.initReactFormsApp === 'function') {\r\n window.initReactFormsApp();\r\n }\r\n }, [isOpen]);\r\n\r\n return (\r\n {t(\"cash_purchase_price\")}
\r\n\r\n
\r\n\r\n \r\n
\r\n {t(\"purchase_price\")}
\r\n {getCashPrice()}\r\n {/* {summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithFeesWithRebatesTaxed, true)}`} : null}\r\n {!summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebatesTaxed, true)}`} : null}\r\n {summaryCalculator.IncludeFees && !summaryCalculator.IncludeTaxes && summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithFeesWithRebatesAndEvRebates, true)}`} : null}\r\n {summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && !summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithFeesTaxed, true)}`} : null}\r\n {summaryCalculator.IncludeFees && !summaryCalculator.IncludeTaxes && !summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithFees, true)}`} : null}\r\n {!summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && !summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalTaxed, true)}`} : null}\r\n {!summaryCalculator.IncludeFees && !summaryCalculator.IncludeTaxes && summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebates, true)}`} : null}\r\n {!summaryCalculator.IncludeFees && !summaryCalculator.IncludeTaxes && !summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotal, true)}`} : null} */}\r\n\r\n \r\n < CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price\" ColCarText1={`${t('cash_price')}`} ColBoxText={getMazdaPriceDetails()} ColClassPrice=\"mz-collapse__price\" TooltipName=\"detailedprice_mazdaprice\" ColPrices={`${formatPrice(getMazdaPrice(), true)}`} id={t('cash_price').replace(/[^0-9a-z]/gi, '_')} />\r\n \r\n {financialInfo ?.calculatedFinance ?.options.wheels.title ? \r\n < CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price\" ColCarText1={t(\"cash_option_wheels\")} ColBoxText={getWheelsDetails()} ColClassPrice=\"mz-collapse__price\" TooltipName=\"\" TooltipText={ReactHtmlParser(getTooltipText())} ColPrices={`${formatPrice(getWheelsPrice(), true)}`} id={t(\"cash_option_wheels\").replace(/[^0-9a-z]/gi, '_')} />\r\n : null}\r\n\r\n {summaryCalculator.SelectedConnectedVehiclePackage.financial.msrp ?\r\n < CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price\" ColCarText1={t(\"cash_option_connectivity\")} ColBoxText={getConnectivityDetails()} ColClassPrice=\"mz-collapse__price\" TooltipName=\"\" ColPrices={`${formatPrice(getConnectivityPrice(), true)}`} id={t(\"cash_option_connectivity\").replace(/[^0-9a-z]/gi, '_')} />\r\n : null }\r\n\r\n {financialInfo ?.calculatedFinance ?.accessories.total ? \r\n < CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price\" ColCarText1={t(\"cash_option_accessories\")} ColBoxText={getAccessoriesDetails()} ColClassPrice=\"mz-collapse__price\" TooltipName=\"\" TooltipText={getAccessoriesTooltipText()} ColPrices={`${formatPrice(getAccessoriesPrice(), true)}`} id={t(\"cash_option_accessories\").replace(/[^0-9a-z]/gi, '_')} />\r\n : null }\r\n\r\n {summaryCalculator.SelectedAddedProtectionPackage.name || summaryCalculator.SelectedAppearanceProtectionPlansIndex !== null ? \r\n < CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price\" ColCarText1={t(\"cash_option_protection\")} ColBoxText={getProtectionDetails()} ColClassPrice=\"mz-collapse__price\" TooltipName=\"\" ColPrices={`${formatPrice(getProtectionPrice(), true)}`} id={t(\"cash_option_protection\").replace(/[^0-9a-z]/gi, '_')} />\r\n : null } \r\n\r\n\t\t\t\t{canDisplayRebates() ?< CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price evRebates\" ColCarText1={t(\"gov_rebates\")} ColBoxText={getRebatesDetails()} ColClassPrice=\"mz-collapse__price\" ColPrices={`${financialInfo.calculatedCash.evRebates.total.cash>0?'-':''}${formatPrice(financialInfo.calculatedCash.evRebates.total.cash, true)}`} id={t(\"gov_rebates\").replace(/[^0-9a-z]/gi, '_')} />:null}\r\n {summaryCalculator.IncludeFees?< CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price\" ColCarText1={`${t('cash_fees')}`} ColBoxText={getMazdaFeesAndLeviesDetails()} ColClassPrice=\"mz-collapse__price\" TooltipName=\"detailedprice_feesandlevies\" ColPrices={`${formatPrice(getMazdaFeesAndLeviesPricingWithoutPDE(), true)}`} id={t(\"cash_fees\").replace(/[^0-9a-z]/gi, '_')} />:null}\r\n {summaryCalculator.IncludeTaxes?:null}\r\n < CollapseList CollapseClasses=\"mz-collapse__button mz-collapse__button--transparent mz-collapse__button--price negative\" ColCarText1={`${t('cash_credits')}`} TooltipName=\"detailedprice_credit\" ColBoxText={getCreditsDetails()} ColClassPrice=\"mz-collapse__price\" ColPrices={`${currentIncentives.value + financialInfo.calculatedCash.incentives.taxable.total + financialInfo.calculatedCash.incentives.nonTaxable.total + financialInfo.tradeInValue + summaryCalculator.FinancialInfo.mazdaCashIncentive >0?'-':''}${formatPrice(currentIncentives.value + financialInfo.calculatedCash.incentives.taxable.total + financialInfo.calculatedCash.incentives.nonTaxable.total + financialInfo.tradeInValue + summaryCalculator.FinancialInfo.mazdaCashIncentive, true)}`} id={t(\"cash_credits\").replace(/[^0-9a-z]/gi, '_')} />\r\n \r\n
\r\n {t(\"taxes\")}
\r\n { summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithFeesWithRebatesTaxes, true)}`} : null}\r\n {!summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithIncentiveRebatesAndEvRebatesTaxes, true)}`} : null}\r\n { summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && !summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalWithFeesTaxes, true)}`} : null}\r\n {!summaryCalculator.IncludeFees && summaryCalculator.IncludeTaxes && !summaryCalculator.IncludeRebates ? {`${formatPrice(financialInfo.calculatedCash.subtotalTaxes, true)}`} : null}\r\n {t(\"down_payment\")}2
{financialInfo.downPaymentValue > 0 ? '-':''}{formatPrice(financialInfo.downPaymentValue, true)}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nTradeInModal.propTypes = {\r\n HandleTabClick: PropTypes.func,\r\n}\r\n\r\nTradeInModal.defaultProps = {\r\n handleClose: () => {\r\n },\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { formatPrice, getBaseUrl, getProvince } from '../../../utils'\r\n\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\n\r\nimport { Tooltip } from '../../1_Atoms/Tooltip/Tooltip';\r\nimport { TradeInModal } from '../../3_Organisms/Modal/TradeInModal';\r\n\r\nexport const PricePayment = ({ incentives, tradeInValue, checkTradeInValue, downPaymentValue, loyaltyChecked, graduateChecked, militaryChecked, firstTimeOwnerChecked, setDownPaymentInput, onBlurDownPaymentInput, setTradeInInput, onBlurTradeInInput, setLoyaltyChecked, setGraduateChecked, setMilitaryChecked, setFirstTimeOwnerChecked, setFinancialInfo, title, ...props }) => {\r\n\tconst summaryCalculator = new SummaryCalculator().reloadStoredData();\r\n\tconst evRebates = summaryCalculator.FinancialInfo.ev_rebates;\r\n const { t, i18n } = useTranslation(['payments', 'general', 'summary']);\r\n const tradeInLink = i18n.language === \"en\" ? `${getBaseUrl()}/en/shopping/trade-in-estimator/?bnp=1` : `${getBaseUrl()}/fr/magasiner/Estimateur-de-la-valeur-dechange/?bnp=1`;\r\n\tconst incentive_img_path = getBaseUrl() + t(\"payments:incentive_img\");\r\n\t\r\n\tconst [isTradeOpen, setIsTradeOpen] = React.useState(false);\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst carline = summaryCalculator.VehicleTitle;\r\n\r\n\tsessionStorage.setItem('curr_BNP_URL', 'https://' + window.location.host + window.location.pathname + window.location.hash.split('?')[0]);\r\n\t\r\n\tfunction isFirstTimeOwnerGreyOut() {\r\n\t\t// Uncheck\r\n\t\tif(!loyaltyChecked && !firstTimeOwnerChecked)\r\n\t\t\treturn '';\r\n\r\n\t\t// Checked\r\n\t\treturn !firstTimeOwnerChecked ? 'grey-out' : ''\r\n\t}\r\n\r\n\tfunction isLoyaltyGreyOut() {\r\n\t\t// Uncheck\r\n\t\tif(!loyaltyChecked && !firstTimeOwnerChecked)\r\n\t\t\treturn '';\r\n\r\n\t\t// Checked\r\n\t\treturn !loyaltyChecked ? 'grey-out' : '';\r\n\t}\r\n\r\n\tReact.useEffect(()=>{\r\n\t\twindow.addEventListener(\"message\", async function (e) {\r\n if (e.data.type === \"formEvent\") {\r\n console.log(\r\n `received message: ${e.data.message}`\r\n )\r\n \r\n // If the message 'close' is passed, close the trade-in modal\r\n if (e.data.message === \"close\") {\r\n setIsTradeOpen(false);\r\n }\r\n }else if(e.data.type==='setTradeInVal'){\r\n\t\t\t\tcheckTradeInValue(e.data.message);\r\n\t\t\t\tsetFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n\t\t\t}\r\n });\r\n\t},[tradeInValue])\r\n return (\r\n\t\t\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {isOpen &&\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n \r\n\t
\r\n )\r\n}\r\n\r\nPricePayment.propTypes = {\r\n setMoneyInput: PropTypes.func,\r\n setLoyaltyChecked: PropTypes.func,\r\n setGraduateChecked: PropTypes.func,\r\n setMilitaryChecked: PropTypes.func,\r\n\tsetFirstTimeOwnerChecked: PropTypes.func\r\n}\r\n\r\nPricePayment.defaultProps = {\r\n setMoneyInput: () => {},\r\n setLoyaltyChecked: () => {},\r\n setGraduateChecked: () => {},\r\n setMilitaryChecked: () => {},\r\n\tsetFirstTimeOwnerChecked: () => {}\r\n}","//tabs driven by core js.\r\n/* global mzFunc mzMenu mzTabs */\r\n\r\nimport React, { useState } from \"react\";\r\nimport { useNavigate, useParams, useSearchParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { goToTop, getBaseUrl, getParams, getLoading, setCursorWaiting, province, hideCmsHiddenBlock } from \"../../../utils\";\r\n\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport { FinanceOptions } from '../../2_Molecules/FinanceOptions/FinanceOptions';\r\nimport { LeaseOptions } from '../../2_Molecules/LeaseOptions/LeaseOptions';\r\nimport { CashOptions } from '../../2_Molecules/CashOptions/CashOptions';\r\nimport { PricePayment } from '../../2_Molecules/PricePayment/PricePayment';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nexport const PaymentsPage = ({ ...props }) => {\r\n const [loading, setLoading] = useState(true);\r\n const { t, i18n } = useTranslation(['payments', 'general']);\r\n const summaryCalculator = window.summaryCalculator;\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [nav, setNav] = React.useState(null);\r\n let hasScrolled = false;\r\n const navigate = useNavigate();\r\n const [visibleTab, setVisibleTab] = useState(t(\"payments:finance_options\"));\r\n //const [openCollapsable, setOpenCollapsable] = useState(null);\r\n const legalContent = JSON.parse(sessionStorage.getItem(Constants.LegalPaymentInformation));\r\n const [legalModalOpen, setLegalModalOpen] = React.useState(false);\r\n const [selectedFinanceOption, setSelectedFinanceOption] = useState(null);\r\n const [selectedLeaseOption, setSelectedLeaseOption] = useState(null);\r\n const [selectedLeaseMileage, setSelectedLeasesMileage] = useState(null);\r\n \r\n const [loyaltyChecked, setLoyaltyChecked] = useState(summaryCalculator.LoyaltyChecked);\r\n const [graduateChecked, setGraduateChecked] = useState(summaryCalculator.GraduateChecked);\r\n const [militaryChecked, setMilitaryChecked] = useState(summaryCalculator.MilitaryChecked);\r\n const [firstTimeOwnerChecked, setFirstTimeOwnerChecked] = useState(summaryCalculator.FirstTimeOwnerChecked);\r\n const [includeFeesChecked, setIncludeFeesChecked] = useState(summaryCalculator.IncludeFees);\r\n const [includeTaxesChecked, setIncludeTaxesChecked] = useState(summaryCalculator.IncludeTaxes);\r\n const [includeRebatesChecked, setIncludeRebatesChecked] = useState(summaryCalculator.IncludeRebates);\r\n\r\n const [tradeInValue, setTradeInValue] = useState(summaryCalculator.TradeInValue);\r\n const [downPaymentValue, setDownPaymentValue] = useState(summaryCalculator.DownPaymentValue);\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n\r\n const [financialInfo, setFinancialInfo] = useState(summaryCalculator.FinancialInfo);\r\n\r\n const [searchParams, setSearchParams] = useSearchParams();\r\n const DEBUG_MODE = sessionStorage.getItem(Constants.DEBUG);\r\n\r\n\tconst baseURL = getBaseUrl() + '/globalassets/mazda-canada/build-and-price/pricing/evgridicons/';\r\n\r\n const [financeType, setFinanceType] = React.useState(false);\r\n\r\n\tconst gtmHelper = new GTMHelper();\r\n\tconst navHelper = new NavHelper();\r\n\r\n if(getParams()['tve']){\r\n console.log(getParams()['tve'][0]);\r\n }\r\n \r\n if (DEBUG_MODE)\r\n console.log('YOU ARE IN DEBUG!');\r\n\r\n let legalContentObject = '';\r\n if (legalContentObject) {\r\n legalContentObject.map(item => {\r\n legalContent += item.copy\r\n });\r\n }\r\n\r\n if (DEBUG_MODE) {\r\n console.log(summaryCalculator.SelectedModelYear);\r\n\r\n console.log('mazdaCashIncentive', summaryCalculator.FinancialInfo.mazdaCashIncentive);\r\n }\r\n\r\n async function setDownPaymentInput(e) {\r\n const el = e.target;\r\n\r\n let val = e.target.value;\r\n val = val.replace(/\\D/g, \"\");\r\n\r\n if (!DEBUG_MODE) {\r\n // downpayment : Min: 0 , Max: (TotalMSRP-10000) \r\n if(parseInt(val) + summaryCalculator.FinancialInfo.tradeInValue >= summaryCalculator.FinancialInfo.maxDownPayment){\r\n val = summaryCalculator.FinancialInfo.maxDownPayment -summaryCalculator.FinancialInfo.tradeInValue;\r\n }else if(parseInt(val) > summaryCalculator.FinancialInfo.maxDownPayment){\r\n val = summaryCalculator.FinancialInfo.maxDownPayment;\r\n }\r\n }\r\n\r\n if (val.length > 0) {\r\n summaryCalculator.DownPaymentValue = `$${val}`;\r\n } else {\r\n summaryCalculator.DownPaymentValue = val;\r\n }\r\n\r\n // Check if the balance is under 7500$, if so update the downpayment\r\n if(summaryCalculator.IncludeFees ? (summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinance < 7500 || summaryCalculator.FinancialInfo.calculatedLease.leaseEndValue < 3000) : (summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceNoFees < 7500 || summaryCalculator.FinancialInfo.calculatedLease.leaseEndValueNoFees < 3000) ) {\r\n summaryCalculator.TradeInValue = 0;\r\n summaryCalculator.DownPaymentValue = 0;\r\n }\r\n\r\n setDownPaymentValue(summaryCalculator.DownPaymentValue);\r\n } \r\n\r\n async function checkTradeInValue(tempVal){\r\n console.log('checkTradeInValue', tempVal);\r\n let val = tempVal;\r\n if(typeof val==='string'){\r\n val = tempVal.replace(/\\D/g, \"\");\r\n }\r\n if (!DEBUG_MODE) {\r\n // Tradein : Min: 0 , Max: (TotalMSRP-10000) \r\n if(parseInt(val) > summaryCalculator.FinancialInfo.maxDownPayment){\r\n val = summaryCalculator.FinancialInfo.maxDownPayment;\r\n summaryCalculator.DownPaymentValue = 0;\r\n }else if(parseInt(val) + summaryCalculator.FinancialInfo.downPaymentValue > summaryCalculator.FinancialInfo.maxDownPayment){\r\n summaryCalculator.DownPaymentValue = summaryCalculator.FinancialInfo.maxDownPayment - parseInt(val);\r\n }\r\n }\r\n\r\n if (val.length > 0) {\r\n summaryCalculator.TradeInValue = `$${val}`;\r\n } else {\r\n summaryCalculator.TradeInValue = val;\r\n }\r\n\r\n // Check if the balance is under 7500$, if so update the downpayment\r\n if(summaryCalculator.IncludeFees ? (summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinance < 7500 || summaryCalculator.FinancialInfo.calculatedLease.leaseEndValue < 3000) : (summaryCalculator.FinancialInfo.calculatedFinance.balanceToFinanceNoFees < 7500 || summaryCalculator.FinancialInfo.calculatedLease.leaseEndValueNoFees < 3000) ) {\r\n summaryCalculator.TradeInValue = 0;\r\n summaryCalculator.DownPaymentValue = 0;\r\n }\r\n\r\n setTradeInValue(summaryCalculator.TradeInValue);\r\n }\r\n async function onBlurDownPaymentInput(e) {\r\n setCursorWaiting(true);\r\n\r\n setFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n\r\n gtmHelper.setGTM({'action':'Input', 'type': 'down payment', 'value': e.target.value}, true , false);\r\n \r\n setCursorWaiting(false);\r\n }\r\n async function setTradeInInput(e) {\r\n setCursorWaiting(true);\r\n \r\n checkTradeInValue(e.target.value);\r\n setFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n } \r\n async function onBlurTradeInInput(e) {\r\n setCursorWaiting(true);\r\n\r\n setFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n\r\n gtmHelper.setGTM({'action':'Input', 'type': 'trade in', 'value': e.target.value}, true , false);\r\n \r\n setCursorWaiting(false);\r\n } \r\n\r\n hideCmsHiddenBlock();\r\n\r\n summaryCalculator.CurrentStep = 8;\r\n \r\n React.useEffect(() => {\r\n async function executeTasks() {\r\n if (!summaryCalculator.isDataLoaded()/* && !loading*/) {\r\n await summaryCalculator.loadVehicleData(year, carline, trim, model, packageCode);\r\n\r\n if (JSON.parse(sessionStorage.getItem(Constants.HasFinancialProviderError)) === true) {\r\n const vehiclePageUri = `/${decodeURI(window.location.search)}`;\r\n navigate(vehiclePageUri)\r\n }\r\n\r\n setNav(null);\r\n\r\n await summaryCalculator.loadFromFinancialProvider();\r\n }\r\n\r\n if (nav === null) {\r\n //setNav(navHelper.getNavContent(year, carline, trim, model, packageCode,summaryCalculator.CurrentStep, t));\r\n const toRender = navHelper.getNavContent(t);\r\n setNav(toRender);\r\n }\r\n\r\n // patch for the ctrl-r case\r\n //await summaryCalculator.loadFromFinancialProvider();\r\n \r\n if (loading) {\r\n setLoading(false);\r\n }\r\n\r\n if (getParams()['tve'] !== undefined){\r\n checkTradeInValue(getParams()['tve'][0]);\r\n searchParams.delete('tve');\r\n setSearchParams(searchParams)\r\n \r\n setFinancialInfo(await summaryCalculator.RecalculateFinancialInfo());\r\n }\r\n }\r\n\t\tif(typeof mzFunc === 'object' && typeof mzTabs === 'object'){\r\n\t\t\tmzFunc.waitForEl('.mzBuildandPrice .mz-tabs').then(function(components){mzTabs.init(components);});\r\n // TODO: Verify why it doesn't work on mobile\r\n //mzMenu.init();\r\n\t\t}\r\n \r\n executeTasks();\r\n }, [nav, searchParams, summaryCalculator, financialInfo, selectedFinanceOption, selectedLeaseOption, loyaltyChecked, graduateChecked, militaryChecked, firstTimeOwnerChecked, includeFeesChecked, includeTaxesChecked, includeRebatesChecked, tradeInValue, downPaymentValue]);\r\n\r\n React.useEffect(() => {\r\n if( document.querySelector('#oca') != undefined){\r\n if (searchParams.get('oca') === '1') {\r\n document.querySelector('#oca').scrollIntoView({\r\n block: 'center',\r\n behavior: 'smooth'\r\n });\r\n }\r\n }\r\n\r\n },[searchParams, loading]);\r\n\r\n function nextStep() {\r\n goToTop();\r\n navigate(`/${year}/${carline}/${trim}/${model}/${packageCode}/summary${decodeURI(window.location.search)}`);\r\n\t\tgtmHelper.setGTM({'action':'Next Step'}, true , false);\r\n }\r\n\r\n let paymentCats = [{ name: t(\"payments:finance_options\") }, { name: t(\"payments:lease_options\") }, { name: t(\"payments:purchase_price\") }];\r\n\r\n const paymentTabs = Object.keys(paymentCats).map((item, key) => {\r\n return (\r\n \r\n\t
\r\n\t\t\t{ReactHtmlParser(title)}
\r\n\t {incentives.incentive && incentives.incentive.value > 0?\r\n\t
:null}\r\n\t {summaryCalculator.FinancialInfo.mazdaCashIncentive && summaryCalculator.FinancialInfo.mazdaCashIncentive > 0?\r\n\t {/*
*/}\r\n\t\t\t\t\t\t{t(\"current_incentive\")}\r\n\t \r\n\t
\r\n\t {`-${formatPrice(incentives.incentive.value)}`}\r\n\t\t\t\t\r\n\t
:null}\t\t\t\t\r\n\t\t\t\t{ evRebates && evRebates.length > 0 ?\r\n\t\t\t\t<>\r\n\t\t\t\t {evRebates[0] && evRebates[0].province==='federal'?\r\n\t {/**/}\r\n\t\t\t\t\t\t{t(\"mazda_cash_incentive_title\")}\r\n\t \r\n\t
\r\n\t {`-${formatPrice(summaryCalculator.FinancialInfo.mazdaCashIncentive)}`}\r\n\t\t\t\t\r\n\t
: ''}\r\n\t\t\t\t{evRebates[1] && evRebates[1].province==getProvince()?\r\n\t {t(\"fed_rebate\")}★\r\n\t \r\n\t
\r\n\t {t(\"up_to\")} {formatPrice(evRebates[0].cash)}\r\n\t \r\n\t
:''}\r\n\t\t\t\t{evRebates[0] && evRebates[0].province==getProvince()?\r\n\t {t(\"prov_rebate\")} ({getProvince()})★\r\n\t \r\n\t
\r\n\t {t(\"up_to\")} {formatPrice(evRebates[1].cash)}\r\n\t \r\n\t
:''}\r\n\r\n\t\t\t\t : '' }\r\n\t \r\n\t {t(\"prov_rebate\")} ({getProvince()})★\r\n\t \r\n\t
\r\n\t {t(\"up_to\")} {formatPrice(evRebates[0].cash)}\r\n\t \r\n\t \r\n\t \r\n\t
\r\n\t \r\n\t
\r\n\t {incentives.first_time_owner.value ?\r\n\t
:null}\r\n\t\t\t\t\r\n\t {incentives.loyalty ?{\r\n\t\t\t\t\t\tsetFirstTimeOwnerChecked(!firstTimeOwnerChecked); \r\n\t\t\t\t\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'FirstTimeOwner', 'value': firstTimeOwnerChecked}, true , false);\r\n\t\t\t\t\t}} id=\"firstTimeOwner\" />
\r\n\t {firstTimeOwnerChecked?{`-${formatPrice(incentives.first_time_owner.value)}`}:null}\r\n\t \r\n\t
:null}\r\n\t {incentives.grad_award?{\r\n\t\t\t\t\t\tsetLoyaltyChecked(!loyaltyChecked);\r\n\t\t\t\t\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'Loyalty', 'value': loyaltyChecked}, true , false);\r\n\t\t\t\t\t}} id=\"loyalty\" />
\r\n\t \r\n\t
:null}\r\n\t {incentives.military?{\r\n\t\t\t\t\t\tsetGraduateChecked(!graduateChecked);\r\n\t\t\t\t\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'Graduate', 'value': graduateChecked}, true , false);\r\n\t\t\t\t\t}} id=\"graduate\" />
\r\n\t {graduateChecked?{`-${formatPrice(incentives.grad_award.value)}`}:null}\r\n\t \r\n\t
:null}\r\n\t\t\t{\r\n\t\t\t\t\t\tsetMilitaryChecked(!militaryChecked);\r\n\t\t\t\t\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'Military', 'value': militaryChecked}, true , false);\r\n\t\t\t\t\t}} id=\"military\" />
\r\n\t {militaryChecked?{`-${formatPrice(incentives.military.value)}`}:null}\r\n\t \r\n {disclaimerMessage}\r\n
\r\n );\r\n else\r\n return (\r\n <>\r\n \r\n );\r\n }\r\n\r\n async function handleLoyaltyChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.LoyaltyChecked = !summaryCalculator.LoyaltyChecked;\r\n if(summaryCalculator.LoyaltyChecked)\r\n summaryCalculator.FirstTimeOwnerChecked = false;\r\n\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setLoyaltyChecked(summaryCalculator.LoyaltyChecked);\r\n setFirstTimeOwnerChecked(summaryCalculator.FirstTimeOwnerChecked);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n async function handleFirstTimeOwnerChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.FirstTimeOwnerChecked = !summaryCalculator.FirstTimeOwnerChecked;\r\n if(summaryCalculator.FirstTimeOwnerChecked)\r\n summaryCalculator.LoyaltyChecked = false;\r\n\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setFirstTimeOwnerChecked(summaryCalculator.FirstTimeOwnerChecked);\r\n setLoyaltyChecked(summaryCalculator.LoyaltyChecked);\r\n\r\n setCursorWaiting(false);\r\n } \r\n\r\n async function handleGraduateChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.GraduateChecked = !summaryCalculator.GraduateChecked;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setGraduateChecked(summaryCalculator.GraduateChecked);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n async function handleMilitaryChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.MilitaryChecked = !summaryCalculator.MilitaryChecked;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setMilitaryChecked(summaryCalculator.MilitaryChecked);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n\r\n\r\n async function handleIncludeFeesChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.IncludeFees = !summaryCalculator.IncludeFees;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setIncludeFeesChecked(summaryCalculator.IncludeFees);\r\n\r\n\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'Fees', 'value': summaryCalculator.IncludeFees}, true , false);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n async function handleIncludeTaxesChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.IncludeTaxes = !summaryCalculator.IncludeTaxes;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setIncludeTaxesChecked(summaryCalculator.IncludeTaxes);\r\n\r\n\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'Taxes', 'value': summaryCalculator.IncludeTaxes}, true , false);\r\n\r\n setCursorWaiting(false);\r\n }\r\n\r\n async function handleIncludeRebatesChecked() {\r\n setCursorWaiting(true);\r\n\r\n summaryCalculator.IncludeRebates = !summaryCalculator.IncludeRebates;\r\n await summaryCalculator.RecalculateFinancialInfo();\r\n setIncludeRebatesChecked(summaryCalculator.IncludeRebates);\r\n \r\n\r\n\t\tgtmHelper.setGTM({'action':'Checkbox', 'type': 'Rebates', 'value': summaryCalculator.IncludeRebates}, true , false);\r\n\r\n setCursorWaiting(false);\r\n }\r\n \r\n function hasAlertBar() {\r\n return summaryCalculator?._selectedModelYear?.incentives_banner;\r\n }\r\n\r\n function canDisplayEvRebatesCheckBox() {\r\n return summaryCalculator.FinancialInfo.ev_rebates && summaryCalculator.FinancialInfo.ev_rebates.length > 0;\r\n }\r\n\r\n if (loading) {\r\n return (\r\n LOADING ...
\r\n )\r\n }\r\n return (\r\n <>\r\n {getLoading(loading, t)}\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default PaymentsPage;","import React, { useState, useRef, useEffect } from 'react';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\nimport ReactHtmlParser from 'react-html-parser';\r\n\r\nimport { formatPrice, goToTop, getLoading, setCursorWaiting, getFinanceWeekly, getLeaseBiWeeklyFromOptions, getLang, getBaseUrl, get360Data, hideCmsHiddenBlock} from '../../../utils';\r\n\r\nimport { SummaryConstants as Constants } from '../../../Helpers/summaryconstants';\r\nimport SummaryCalculator from '../../../Helpers/summarycalculator';\r\nimport GTMHelper from '../../../Helpers/gtmHelper';\r\nimport NavHelper from '../../../Helpers/navhelper';\r\n\r\nimport { Svg } from '../../1_Atoms/Svg/Svg';\r\nimport Button from '../../1_Atoms/Button/Button';\r\nimport CollapseLegal from '../../2_Molecules/Collapse/CollapseLegal';\r\nimport ColourCard from '../../2_Molecules/ColourCard/ColourCard';\r\nimport ThreeSixtyContainer from '../../3_Organisms/360Container/360Container';\r\nimport { Nav } from '../../3_Organisms/Nav/Nav';\r\nimport { Pricing } from '../../3_Organisms/Pricing/Pricing';\r\nimport { Modal } from '../../3_Organisms/Modal/Modal';\r\nimport { PreOrderModal } from '../../3_Organisms/Modal/PreOrderModal';\r\nimport { Alert } from '../../3_Organisms/Alert/Alert';\r\n\r\nexport const Protection = ({ ...props }) => {\r\n const baseURL = getBaseUrl();\r\n const lang = getLang();\r\n const [loading, setLoading] = useState(true);\r\n const summaryCalculator = window.summaryCalculator;\r\n const { year, carline, trim, model, packageCode } = useParams();\r\n const [nav, setNav] = useState(null);\r\n const navigate = useNavigate();\r\n\r\n const [preorderOpen, setPreorderModalOpen] = React.useState(false);\r\n \r\n let images = {};\r\n \r\n if (summaryCalculator.SelectedColourExteriorIndex !== 'null' && summaryCalculator.Colours !== null) {\r\n const { exteriors, interiors } = summaryCalculator.Colours.visual;\r\n const selectedExterior = Object.entries(exteriors)[summaryCalculator.SelectedColourExteriorIndex][1];\r\n const selectedInterior = summaryCalculator.SelectedColourInteriorIndex !== 'null' ? interiors[summaryCalculator.SelectedColourInteriorIndex] : null;\r\n images = get360Data(summaryCalculator.Colours.visual, selectedExterior, selectedInterior);\r\n }\r\n const generateStaticVehicleImg = () => {\r\n if (images) {\r\n const { imagePath, imageName } = images;\r\n const { year, carline, trim } = summaryCalculator.selectedVehicle\r\n const src = imagePath && imageName ? `${imagePath}${imageName.replace('{index}', 18)}` : '';\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n : ''\r\n }\r\n \r\n \r\n
\r\n {t('creditTitle')}
\r\n{t('creditContent')}
\r\n\r\n {canDisplayEvRebatesCheckBox() ? \r\n
\r\n\r\n {getAdminFeeDisclaimerSection()}\r\n \r\n \r\n \r\n \r\n
: null }\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {paymentTabs}\r\n
\r\n \r\n
\r\n
\r\n {paymentTabsContent}\r\n
\r\n \r\n {\r\n document.querySelector('body').classList.add('disabled');\r\n setLegalModalOpen(true);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n ));\r\n\r\n return ({plan.name}
\r\n + {formatPrice(plan.financial.msrp)} {\r\n `(${showFinancePrice?\r\n `${getFinanceWeekly(plan.financial.msrp, financial.calculatedFinance.financeValues[financeTermIndex].aprRate, financial.calculatedFinance.financeValues[financeTermIndex].term)}${t(\"general:week\")}`:\r\n `${getLeaseBiWeeklyFromOptions(plan.financial.msrp, financial.calculatedLease.leaseValues[leaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[leaseTermIndex].term)}${t(\"general:bi_week\")}`})`}\r\n \r\n \r\n {addedProtectionPackageList}\r\n
\r\n )\r\n }\r\n\r\n function getCurrentAddedProtectionPackage() {\r\n const plan = summaryCalculator.SelectedAddedProtectionPackage.financial.msrp;\r\n return (\r\n
)\r\n }\r\n\r\n function getAppearanceProtectionSection() {\r\n if (appearanceSelection === null) {\r\n return (\r\n <>\r\n {getAppearanceProtectionTermsDropDown()}\r\n {getAppearanceProtectionList()}\r\n \r\n )\r\n } else {\r\n const appearanceProtectionPlan = summaryCalculator.SelectedAppearanceProtectionPlan;\r\n const plan = appearanceProtectionPlan.packages[appearanceSelection].financial.msrp;\r\n return (\r\n {summaryCalculator.SelectedAddedProtectionPackage.name}
\r\n + {formatPrice(plan)} {\r\n `(${showFinancePrice?\r\n `${getFinanceWeekly(plan, financial.calculatedFinance.financeValues[financeTermIndex].aprRate, financial.calculatedFinance.financeValues[financeTermIndex].term)}${t(\"general:week\")}`:\r\n `${getLeaseBiWeeklyFromOptions(plan, financial.calculatedLease.leaseValues[leaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[leaseTermIndex].term)}${t(\"general:bi_week\")}`})`}\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n }\r\n\r\n // TODO : LOOK WHAT WE DO WITH THOSE ICONS\r\n function getAddedProtectionIcons() {\r\n if (summaryCalculator.Packages.added_protection.length === 0)\r\n return;\r\n\r\n const src =`${baseURL}/globalassets/mazda-canada/react/images/mazdaaddedprotection_${lang}.png`;\r\n\r\n return (\r\n
\r\n {summaryCalculator.SelectedAppearanceProtectionPlansPackage.name} ({appearanceProtectionPlan.name})
\r\n+ {formatPrice(plan)} {\r\n `(${showFinancePrice?\r\n `${getFinanceWeekly(plan, financial.calculatedFinance.financeValues[financeTermIndex].aprRate, financial.calculatedFinance.financeValues[financeTermIndex].term)}${t(\"general:week\")}`:\r\n `${getLeaseBiWeeklyFromOptions(plan, financial.calculatedLease.leaseValues[leaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[leaseTermIndex].term)}${t(\"general:bi_week\")}`})`}
\r\n\r\n
\r\n \r\n
\r\n ));\r\n\r\n return (\r\n {iconList}\r\n
\r\n )\r\n }\r\n\r\n function setExpand(title, innerContent, target) {\r\n // HACK FOR THE COLLAPSIBLE ON CTRL-R\r\n if (!innerContent) \r\n return (\r\n <>\r\n \r\n )\r\n \r\n let active='';\r\n let visible='';\r\n let ref=null;\r\n if(target === 'protection' && protectionExpanded){\r\n active='active';\r\n ref=collapseRefProtection;\r\n }else if(target === 'protection'){\r\n ref=collapseRefProtection;\r\n }else if(target === 'appearance' && appearanceExpanded){\r\n active='active';\r\n ref=collapseRefAppearance;\r\n }else if(target === 'appearance'){\r\n ref=collapseRefAppearance;\r\n }\r\n console.log(target, active, ref)\r\n return (\r\n \r\n
)\r\n }\r\n\r\n function expandToggle(target){\r\n if(target === 'protection'){\r\n setProtectionExpanded(!protectionExpanded);\r\n }else{\r\n setAppearanceExpanded(!appearanceExpanded);\r\n }\r\n }\r\n\r\n function getAppearanceProtectionTermsDropDown() {\r\n const terms = Object.entries(summaryCalculator.Packages.appearance_protection[0].plans).map(([key, appearanceProtectionPlans], index) =>\r\n \r\n );\r\n return (\r\n \r\n
\r\n \r\n {innerContent}\r\n
\r\n \r\n\r\n {summaryCalculator.Packages.appearance_protection[0].term_dropdown_label}\r\n
\r\n )\r\n }\r\n\r\n function getAppearanceProtectionList() {\r\n const plans = Object.entries(summaryCalculator.Packages.appearance_protection[0].plans[appearanceDropDown].packages).map(([key, appearanceProtectionPlansPackage], index) => (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n ));\r\n\r\n return (\r\n <>\r\n {plans}\r\n \r\n )\r\n }\r\n\r\n function scrollToID(id){\r\n const target = document.getElementById(id);\r\n window.gsap.to(window, {duration: 1, scrollTo: {y: target, offsetY: window.mzFunc.offsetMenu + 60, autoKill: true}});\r\n }\r\n\r\n return (\r\n <>\r\n {\r\n !summaryCalculator.isDataLoaded() ? getLoading(loading, t) : null\r\n }\r\n {appearanceProtectionPlansPackage.popular===1 ? <>popular
: \"\"}{appearanceProtectionPlansPackage.name}
\r\n : \"\"}{appearanceProtectionPlansPackage.name}
\r\n
\r\n + {formatPrice(appearanceProtectionPlansPackage.financial.msrp)} {\r\n `(${showFinancePrice?\r\n `${getFinanceWeekly(appearanceProtectionPlansPackage.financial.msrp, financial.calculatedFinance.financeValues[financeTermIndex].aprRate, financial.calculatedFinance.financeValues[financeTermIndex].term)}${t(\"general:week\")}`:\r\n `${getLeaseBiWeeklyFromOptions(appearanceProtectionPlansPackage.financial.msrp, financial.calculatedLease.leaseValues[leaseTermIndex].leaseRate, financial.calculatedLease.leaseValues[leaseTermIndex].term)}${t(\"general:bi_week\")}`})`}
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nexport default Protection","import React, { useEffect } from \"react\";\r\nimport { HashRouter as Router, Routes, Route } from 'react-router-dom';\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport './Assets/scss/main.scss';\r\n\r\nimport { getBaseUrl, getUrlParamsObject, getParams, getProvince, setCursorWaiting } from './utils';\r\n\r\nimport BuildHelper from \"./Helpers/BuildHelper\";\r\nimport NavHelper from './Helpers/navhelper';\r\nimport SummaryCalculator from './Helpers/summarycalculator';\r\nimport { openModal } from './Helpers/helpers';\r\n// import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'\r\n\r\nimport { Nav } from './Components/3_Organisms/Nav/Nav';\r\nimport { Modal } from './Components/3_Organisms/Modal/Modal';\r\nimport { AccessoriesList } from './Components/3_Organisms/AccessoriesList/AccessoriesList'\r\nimport { VehiclePage } from './Components/5_Pages/Vehicles/Vehicles';\r\nimport { TrimsPage } from './Components/5_Pages/Trim/Trim';\r\nimport { SummaryPage } from './Components/5_Pages/Summary/Summary';\r\nimport { Options } from './Components/5_Pages/Option/Option';\r\nimport { Colours } from './Components/5_Pages/Colours/Colours';\r\nimport { Wheels } from './Components/5_Pages/Wheels/Wheels';\r\nimport { Connectivity } from './Components/5_Pages/Connectivity/Connectivity';\r\nimport { PaymentsPage } from './Components/5_Pages/Payments/Payments';\r\nimport { Protection } from './Components/5_Pages/Protection/Protection';\r\n\r\nfunction App() {\r\n const { t, i18n } = useTranslation(['general']);\r\n\r\n const urlParams = getUrlParamsObject();\r\n const buildId = urlParams.build;\r\n\r\n window.summaryCalculator = new SummaryCalculator().reloadStoredData();\r\n\r\n const savedCarline = JSON.parse(sessionStorage.getItem('SelectedVehicle')) ?.carline;\r\n const savedCarYear = JSON.parse(sessionStorage.getItem('SelectedVehicle')) ?.year;\r\n\r\n const getProvinceInUrl = () => {\r\n const params = getParams(window.location.hash);\r\n if(params.prov_code) {\r\n return params.prov_code[0];\r\n }\r\n\r\n return undefined\r\n }\r\n\r\n /*const getRequestedLanguageInUrl = () => {\r\n const params = getParams(window.location.hash);\r\n if(params.lang_code) {\r\n return params.lang_code[0];\r\n }\r\n\r\n return undefined\r\n }*/\r\n\r\n const currentProvince = document.querySelector('meta[name=\"data-region\"]').content;\r\n const requestedProvince = getProvinceInUrl();\r\n\r\n //const currentLanguage = document.querySelector('meta[name=\"data-language\"]').content;\r\n //const requestedLanguage = getRequestedLanguageInUrl();\r\n\r\n // Force a CMS redirect so that it can change province / language behind the scenes\r\n if (window.location.hash && (requestedProvince !== undefined && requestedProvince !== currentProvince)/* && (requestedLanguage !== undefined && requestedLanguage !== currentLanguage)*/) {\r\n const newLocation = window.location.origin + window.location.pathname + \"?changeProvince=\" + encodeURIComponent(window.location.origin + window.location.pathname +window.location.hash);\r\n window.location = newLocation;\r\n }\r\n\r\n // Rewrite the url after the redirect\r\n if (urlParams['changeProvince']) {\r\n window.summaryCalculator._apiService.province = currentProvince;\r\n window.summaryCalculator._tcciService.province = currentProvince; \r\n window.history.pushState({}, document.title, decodeURIComponent(urlParams['changeProvince']));\r\n }\r\n\r\n // Override onchange behavior for the region selector\r\n document.addEventListener('DOMContentLoaded', () => {\r\n window.handleSelectChange = async () => {\r\n const select = document.getElementById('region-selector-dropdown');\r\n\r\n const newProvince = select.value;\r\n //console.log(newProvince);\r\n\r\n window.summaryCalculator._apiService.province = newProvince;\r\n window.summaryCalculator._tcciService.province = newProvince;\r\n \r\n const waitScreen = document.querySelector('div.loading');\r\n \r\n setCursorWaiting(true);\r\n // Display wait screen\r\n if(waitScreen) {\r\n waitScreen.classList.add('visible');\r\n }\r\n\r\n // DO NOT REMOVE THIS LINE, USED TO RELOAD FOR THE EV REBATE\r\n await window.summaryCalculator.forceReloadVehicle();\r\n\r\n setCursorWaiting(false);\r\n // Hide wait screen\r\n if(waitScreen) {\r\n waitScreen.classList.remove('visible');\r\n }\r\n\r\n // Set the regEx for prov_code replacement\r\n const provCodePattern = /prov_code=[^&]*/;\r\n \r\n // Replace the prov_code parameter\r\n let updatedUrl = window.location.href.replace(provCodePattern, `prov_code=${newProvince}`);\r\n\r\n // Update the url in the address bar before submit\r\n window.history.pushState({}, document.title, updatedUrl);\r\n \r\n const form = document.getElementById('region-selector');\r\n form.submit();\r\n };\r\n\r\n const languageLink = document.querySelector('#region-language-link');\r\n\r\n window.handleLanguageChange = async (e) => {\r\n const newLocation = languageLink.href;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n const newLanguage = languageLink.text;\r\n\r\n const waitScreen = document.querySelector('div.loading');\r\n\r\n // Display the wait screen while loading\r\n if(waitScreen) {\r\n waitScreen.classList.add('visible');\r\n }\r\n \r\n window.summaryCalculator._apiService.language = newLanguage;\r\n window.summaryCalculator._tcciService.language = newLanguage;\r\n\r\n await window.summaryCalculator.forceReloadVehicle();\r\n \r\n // Hide wait screen\r\n if(waitScreen) {\r\n waitScreen.classList.remove('visible');\r\n }\r\n\r\n window.location = newLocation;\r\n };\r\n \r\n if (languageLink) {\r\n languageLink.addEventListener('click', window.handleLanguageChange, false);\r\n }\r\n\r\n });\r\n\r\n\r\n useEffect(() => {\r\n const cssFile = document.createElement(\"link\");\r\n const scriptFile = document.createElement(\"script\");\r\n \r\n \r\n cssFile.href = window.location.host.indexOf(\"localhost\") === -1 ? getBaseUrl() + process.env.REACT_APP_GLOBALASSETS_CSS : '/forms/main.css';\r\n cssFile.rel = \"stylesheet\";\r\n document.head.appendChild(cssFile);\r\n\r\n scriptFile.src = window.location.host.indexOf(\"localhost\") === -1 ? getBaseUrl() + process.env.REACT_APP_GLOBALASSETS_JS : '/forms/main.js';\r\n document.body.appendChild(scriptFile);\r\n\r\n }, [])\r\n\r\n if (window.location.hash) {\r\n if (window.location.hash.split('/')[1].substring(0, 1) != '?' && savedCarline) {\r\n const carYearHash = window.location.hash.split('/')[1];\r\n const carlineHash = window.location.hash.split('/')[2];\r\n if (carYearHash != savedCarYear || carlineHash != savedCarline) {\r\n console.log(carYearHash, carlineHash, savedCarYear, savedCarline);\r\n window.summaryCalculator.reset(true);\r\n }\r\n }\r\n }\r\n\r\n return (\r\n {t(\"title\")}
\r\n\r\n {scrollToID('map')}}>{ReactHtmlParser(summaryCalculator.Packages.added_protection[0].title.toLowerCase())} {t(\"and\")} {scrollToID('ap')}}>{ReactHtmlParser(summaryCalculator.Packages.appearance_protection[0].title.toLowerCase())}\r\n
\r\n \r\n {summaryCalculator.Packages.added_protection &&\r\n \r\n }\r\n\r\n \r\n \r\n
\r\n \r\n {ReactHtmlParser(summaryCalculator.Packages.added_protection[0].title)}
\r\n\r\n\r\n
\r\n { summaryCalculator.SelectedAddedProtectionIndex == null ? \r\n setExpand(summaryCalculator.Packages.added_protection[0].accordion_title, addedProtectionSection, 'protection') :\r\n \r\n {generateStaticVehicleImg()}\r\n {getAddedProtectionIcons()}\r\n
\r\n \r\n {ReactHtmlParser(summaryCalculator.Packages.added_protection[0].description)}\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
{ReactHtmlParser(summaryCalculator.Packages.added_protection[0].selected_plan_text)}
\r\n {addedProtectionSection}\r\n{ReactHtmlParser(summaryCalculator.Packages.appearance_protection[0].title)}
\r\n\r\n\r\n
\r\n {appearanceSelection === null ?\r\n setExpand(summaryCalculator.Packages.appearance_protection[0].accordion_title , getAppearanceProtectionSection(), 'appearance'):\r\n \r\n {generateStaticVehicleImg()}\r\n {getAppearanceProtectionIcons()}\r\n
\r\n \r\n {ReactHtmlParser(summaryCalculator.Packages.appearance_protection[0].description)}\r\n
\r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n \r\n
{ReactHtmlParser(summaryCalculator.Packages.appearance_protection[0].selected_plan_text)}
\r\n {getAppearanceProtectionSection()}\r\n\r\n {\r\n document.querySelector('body').classList.add('disabled');\r\n setLegalModalOpen(true)\r\n }}\r\n />\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n