{model.title}

\r\n {sitecoreContext?.pageEditing ? (\r\n children\r\n ) : (\r\n \r\n {children}\r\n \r\n )}\r\n

\r\n );\r\n};\r\n\r\nexport default withSitecoreContext()(LazySection);\r\n","import { TAdvisorFields, TAdvisorProps } from '../types/advisor.types';\r\n\r\nexport class AdvisorModel {\r\n private readonly fields?: TAdvisorFields;\r\n constructor(props: TAdvisorProps) {\r\n this.fields = props?.fields || null;\r\n }\r\n\r\n get featuredImage() {\r\n return this.fields?.image;\r\n }\r\n\r\n get proceedButtonText() {\r\n return this.fields?.proceedButtonText;\r\n }\r\n\r\n get scriptUrl() {\r\n return this.fields?.scriptUrl;\r\n }\r\n}\r\n","export const localstorageService = () =>\r\n typeof localStorage !== 'undefined'\r\n ? localStorage\r\n : {\r\n clear: () => undefined,\r\n getItem: () => undefined,\r\n key: () => null,\r\n removeItem: () => undefined,\r\n setItem: () => undefined,\r\n };\r\n\r\nexport const sessionStorageService = () =>\r\n typeof sessionStorage !== 'undefined'\r\n ? sessionStorage\r\n : {\r\n clear: () => undefined,\r\n getItem: () => undefined,\r\n key: () => null,\r\n removeItem: () => undefined,\r\n setItem: () => undefined,\r\n };\r\n\r\nexport const windowService = () => (typeof window !== 'undefined' ? window : {});\r\nexport const documentService = () => (typeof document !== 'undefined' ? document : {});\r\n","const selectors = {\r\n advisorId: 'xc_application',\r\n advisorScriptId: 'advisor-sript',\r\n paginationBarId: 'advisor-pagination-bar',\r\n paginationCurrentSlideId: 'advisor-pagination-counter',\r\n paginationBackButtonId: 'advisor-pagination-back-button',\r\n loadingCircle: '#xc_application .sk-fading-circle',\r\n radioButtons: '#xc_wizard_container_1 .xc_tile__footer-wrapper',\r\n whatAreYouLookingForRadio:\r\n '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > div.sc-13bvdeq-0.lmyPrR.xc_wizard-body > section.xc_slide-container.xc_slide-container--current > div > div.xc_stage-wrapper__body > div.xc_stage-wrapper__children > div.xc_question-wrapper > div.xc_question-body-wrapper > div > div',\r\n wrapper: '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper',\r\n slides: '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > .xc_wizard-body .xc_slide-container',\r\n backButton: '#xc_wizard_container_1 .xc_nav-button.xc_previous-button',\r\n nextButton: '#xc_wizard_container_1 .xc_nav-button.xc_next-button',\r\n powerRangeYesButton:\r\n '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > div.sc-13bvdeq-0.lmyPrR.xc_wizard-body > section.xc_slide-container.xc_slide-container--current > div > div.xc_stage-wrapper__body > div.xc_stage-wrapper__children > div:nth-child(1) > div.xc_question-body-wrapper > div:nth-child(1) > div',\r\n powerRangeNewOptionsButton:\r\n '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > div.sc-13bvdeq-0.lmyPrR.xc_wizard-body > section.xc_slide-container.xc_slide-container--current > div > div.xc_stage-wrapper__body > div.xc_stage-wrapper__children > div.xc_question-wrapper > div.xc_question-body-wrapper > div:nth-child(2) > div',\r\n powerRangeRadioButtons:\r\n '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > div.sc-13bvdeq-0.lmyPrR.xc_wizard-body > section.xc_slide-container.xc_slide-container--current > div > div.xc_stage-wrapper__body > div.xc_stage-wrapper__children > div:nth-child(2) > div.xc_question-body-wrapper > div',\r\n powerRangeRadioButtonsWrapper: \"#xc_wizard_container_1 [data-id='xcAjaxClient.wizard.power_range.facet_51.pwr_range']\",\r\n restartButton: '#xc_wizard-header > div > div.gjo8co-0.d2goba-0.igaRF.xc_header-button.xc_restart-button',\r\n restartButtonId: 'advisor-restart',\r\n lastSlide:\r\n '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > div.sc-13bvdeq-0.RInbK.xc_wizard-body > div.xc_stage-wrapper.xc_endgame-flex-container__wrapper.xc_stage-wrapper--no-padding > div',\r\n sliderWrapper: '#xc_wizard_container_1 > div.ycc1e3-0.hdbgso.xc_sized-wrapper > div.sc-13bvdeq-0.RInbK.xc_wizard-body',\r\n};\r\n\r\nexport default selectors;\r\n","import React, { useEffect, FC } from 'react';\r\n\r\nimport { documentService } from '../../../utils/window.utils';\r\nimport selectors from '../constants/selectors';\r\nimport { TLoadAdvisorProps } from '../types/advisor.types';\r\n\r\nconst LoadAdvisor: FC = (props) => {\r\n const { scriptUrl } = props;\r\n\r\n useEffect(() => {\r\n const loadScript = (src: string) =>\r\n new Promise((resolve, reject) => {\r\n const tag = documentService().createElement('script');\r\n tag.async = false;\r\n tag.id = selectors.advisorScriptId;\r\n tag.src = src;\r\n tag.onload = resolve;\r\n tag.onerror = reject;\r\n documentService().getElementsByTagName('body')[0].appendChild(tag);\r\n });\r\n\r\n const loadAdvisor = async () => {\r\n if (!scriptUrl?.value) return;\r\n await loadScript(scriptUrl?.value);\r\n };\r\n loadAdvisor();\r\n }, [scriptUrl]);\r\n\r\n return (\r\n

\r\n

\r\n );\r\n};\r\n\r\nexport default LoadAdvisor;\r\n","import React, { FC } from 'react';\r\nimport { TAdvisorProps } from './types/advisor.types';\r\nimport LazySection from '../@shared/lazySection';\r\nimport { AdvisorModel } from './model/advisor.model';\r\nimport { documentService } from '../../utils/window.utils';\r\nimport selectors from './constants/selectors';\r\nimport LoadAdvisor from './components/loadAdvisor';\r\n\r\nconst Advisor: FC = (props) => {\r\n const model = new AdvisorModel(props);\r\n\r\n let currentSlide = 0;\r\n let radioButtons: NodeList | undefined = undefined;\r\n\r\n const getCurrentSlideNumber = () => {\r\n let number = 0; //last slide is not in slider\r\n const slides = documentService().querySelectorAll(selectors.slides);\r\n slides.forEach((slide, index) => {\r\n if (slide.classList.contains('xc_slide-container--current')) {\r\n number = index + 1;\r\n }\r\n });\r\n return slides.length > 0 ? number : 6;\r\n };\r\n\r\n const getCurrentSlide = (): HTMLElement => {\r\n let currentSlideItem;\r\n const slides = documentService().querySelectorAll(selectors.slides);\r\n slides.forEach((slide) => {\r\n if (slide.classList.contains('xc_slide-container--current')) {\r\n currentSlideItem = slide;\r\n }\r\n });\r\n return slides.length > 0 ? currentSlideItem : documentService().querySelector(selectors.lastSlide);\r\n };\r\n\r\n const waitSliderToUpdate = (): Promise =>\r\n new Promise((resolve) => {\r\n const lastSlide = getCurrentSlide();\r\n const slidesObserver = new MutationObserver(() => {\r\n if (getCurrentSlide() !== lastSlide) resolve();\r\n if (documentService().querySelectorAll(selectors.slides).length < 1) resolve();\r\n });\r\n const config = { attributes: true, childList: true, subtree: true };\r\n slidesObserver.observe(documentService().querySelector(selectors.slides).parentElement, config);\r\n });\r\n\r\n const waitPowerRangeSlideToUpdate = (): Promise =>\r\n new Promise((resolve) => {\r\n const slideObserver = new MutationObserver(() => {\r\n if (documentService().querySelector(selectors.powerRangeRadioButtonsWrapper)) resolve();\r\n });\r\n const config = { attributes: true, childList: true, subtree: true };\r\n slideObserver.observe(getCurrentSlide(), config);\r\n });\r\n\r\n // TO DO: Not used! Check if this function is needed.\r\n // const appendPagination = () => {\r\n // currentSlide = getCurrentSlideNumber();\r\n // let pagination: HTMLElement = document.createElement('div');\r\n // pagination.className = 'xc_pagination';\r\n // pagination.innerHTML = `\r\n //

\r\n // \r\n //

\r\n //

\r\n // ${currentSlide}/${slideCount}\r\n //

\r\n // `;\r\n // const wrapper: HTMLElement = document.querySelector(selectors.wrapper);\r\n // wrapper?.appendChild(pagination);\r\n // }\r\n // check log for: const appendPagination = () => {\r\n\r\n const removePagination = (): void => {\r\n documentService().getElementById(selectors.paginationBarId)?.parentElement?.parentElement?.remove();\r\n };\r\n\r\n const addResetButton = (): void => {\r\n if (!documentService().getElementById(selectors.restartButtonId)) {\r\n const restartButtonCopy: HTMLElement = documentService().querySelector(selectors.restartButton);\r\n const restartButton: HTMLElement = documentService().createElement('button');\r\n restartButton.className = 'xc_restart-button';\r\n restartButton.innerHTML = ' Restart';\r\n const currentSlideContainer = documentService().querySelector(selectors.sliderWrapper);\r\n currentSlideContainer && currentSlideContainer.appendChild(restartButton);\r\n restartButton.addEventListener('click', () => {\r\n restartButtonCopy.click();\r\n });\r\n }\r\n };\r\n\r\n const updatePagination = (): void => {\r\n currentSlide = getCurrentSlideNumber();\r\n documentService().getElementById(selectors.paginationBackButtonId).className = `xc_pagination-back-button ${\r\n currentSlide < 2 ? 'xc_pagination-back-button--hidden' : ''\r\n }`;\r\n documentService().getElementById(selectors.paginationBarId).className = `xc_pagination-bar-line xc_pagination-bar-line-${currentSlide}`;\r\n documentService().getElementById(selectors.paginationCurrentSlideId).innerHTML = currentSlide.toString();\r\n };\r\n\r\n const appendImage = (): void => {\r\n const image: HTMLElement = documentService().createElement('div');\r\n image.className = 'xc_featured-image-wrapper';\r\n image.innerHTML = ` $\"${model.featuredImage?.value?.alt}\"/$ `;\r\n const currentSlideContainer = getCurrentSlide()?.firstChild?.firstChild;\r\n if (!currentSlideContainer) return;\r\n currentSlideContainer.insertBefore(image, currentSlideContainer.firstChild);\r\n };\r\n const updateSlideAfterClick = async () => {\r\n await waitSliderToUpdate();\r\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\r\n updateSlide();\r\n };\r\n const nextButtonClick = (): void => {\r\n const nextButton: HTMLElement = documentService().querySelector(selectors.nextButton);\r\n nextButton.click();\r\n updateSlideAfterClick();\r\n };\r\n\r\n const radioButtonClick = (radioButtonsValue): void => {\r\n if (!radioButtonsValue?.length) return;\r\n radioButtonsValue.forEach((button) => {\r\n button.addEventListener('click', () => {\r\n nextButtonClick();\r\n });\r\n });\r\n };\r\n const bindClickOnRadioButtons = (): void => {\r\n radioButtons = documentService().querySelectorAll(selectors.radioButtons);\r\n radioButtonClick(radioButtons);\r\n };\r\n\r\n const bindClickOnWhatAreYouLookingRadioButtons = (): void => {\r\n radioButtons = documentService().querySelectorAll(selectors.whatAreYouLookingForRadio);\r\n radioButtonClick(radioButtons);\r\n };\r\n\r\n const bindClickOnPowerRangeRadioButtons = (): void => {\r\n radioButtons = documentService().querySelectorAll(selectors.powerRangeRadioButtons);\r\n if (!radioButtons?.length) return;\r\n radioButtons.forEach((button) => {\r\n button.firstChild?.addEventListener('click', () => {\r\n nextButtonClick();\r\n });\r\n });\r\n };\r\n\r\n const appendProceedButton = (): void => {\r\n const proceedButton: HTMLElement = documentService().createElement('button');\r\n proceedButton.className = 'xc_proceed-button';\r\n proceedButton.innerHTML = `${model?.proceedButtonText?.value}`;\r\n const currentSlideContainer = getCurrentSlide()?.firstChild?.firstChild?.lastChild;\r\n currentSlideContainer?.appendChild(proceedButton);\r\n proceedButton.addEventListener('click', () => {\r\n nextButtonClick();\r\n });\r\n };\r\n\r\n const bindYesButton = (): void => {\r\n const yesButton = documentService().querySelector(selectors.powerRangeYesButton);\r\n yesButton.addEventListener('click', async () => {\r\n await waitPowerRangeSlideToUpdate();\r\n bindClickOnPowerRangeRadioButtons();\r\n });\r\n };\r\n\r\n const bindNewOptionsButton = (): void => {\r\n documentService()\r\n .querySelector(selectors.powerRangeNewOptionsButton)\r\n .addEventListener('click', () => {\r\n nextButtonClick();\r\n });\r\n };\r\n const updateSlide = (): void => {\r\n const slideNumber = getCurrentSlideNumber();\r\n if (slideNumber < 6) {\r\n updatePagination();\r\n appendImage();\r\n }\r\n if (slideNumber === 1 || slideNumber === 2) {\r\n bindClickOnRadioButtons();\r\n }\r\n if (slideNumber === 3) {\r\n appendProceedButton();\r\n }\r\n if (slideNumber === 4) {\r\n bindYesButton();\r\n bindNewOptionsButton();\r\n if (documentService().querySelector(selectors.powerRangeRadioButtonsWrapper)) {\r\n bindClickOnPowerRangeRadioButtons();\r\n }\r\n }\r\n if (slideNumber === 5) {\r\n bindClickOnWhatAreYouLookingRadioButtons();\r\n }\r\n if (slideNumber === 6) {\r\n removePagination();\r\n addResetButton();\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\r\nexport default Advisor;\r\n","import { ImageField, imageMobileField, LinkField, StringField, CardFields, CardProps } from '../../types/types';\r\n\r\nexport class CardModel {\r\n private readonly fields?: CardFields;\r\n constructor(props: CardProps) {\r\n this.fields = props.fields;\r\n }\r\n\r\n get all(): CardProps {\r\n return {\r\n fields: {\r\n title: this.title,\r\n subtitle: this.subtitle,\r\n image: this.image,\r\n mobileImage: this.mobileImage,\r\n link: this.link,\r\n },\r\n };\r\n }\r\n\r\n get title(): StringField {\r\n return this.fields?.title || {};\r\n }\r\n\r\n get subtitle(): StringField {\r\n return this.fields?.subtitle || {};\r\n }\r\n\r\n get image(): ImageField {\r\n return this.fields?.image || {};\r\n }\r\n\r\n get mobileImage(): imageMobileField {\r\n return this.fields?.mobileImage || {};\r\n }\r\n\r\n get link(): LinkField {\r\n return this.fields?.link as LinkField;\r\n }\r\n}\r\n","import { THeadingTag } from '../types/types';\r\n\r\n/**\r\n * Returns following tag in H-tags hierarchy.\r\n * If H1 is passed to function in currentPage property than H2 is returned.\r\n * In case currentTag is H6 then DIV tag is returned.\r\n * */\r\nexport const getFollowingHTag = (currentTag: THeadingTag): THeadingTag => {\r\n const tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div'] as Array;\r\n\r\n if (typeof currentTag === 'string') {\r\n const indexOfCurrentTag = tags.indexOf(currentTag);\r\n\r\n if (indexOfCurrentTag >= 0 && indexOfCurrentTag < 6) {\r\n return tags[indexOfCurrentTag + 1];\r\n }\r\n }\r\n\r\n return 'div';\r\n};\r\n","import { TComponentParamsGeneral, THeadingTag, CardProps, LinkField, StringField } from '../../../types/types';\r\nimport { CardModel } from '../../../lib/shared-models/card.model';\r\nimport { TBlogNewsFields, TBlogNewsProps } from '../types/blogNews.types';\r\nimport { getFollowingHTag } from '../../../utils/seo.utils';\r\n\r\nexport class BlogNewsModel {\r\n private readonly fields?: TBlogNewsFields;\r\n private readonly params?: TComponentParamsGeneral;\r\n\r\n constructor(props: TBlogNewsProps) {\r\n this.fields = props?.fields;\r\n this.params = props?.params;\r\n }\r\n\r\n get title(): StringField | undefined {\r\n return this.fields?.title;\r\n }\r\n\r\n get content(): StringField | undefined {\r\n return this.fields?.subtitle;\r\n }\r\n\r\n get cards(): CardProps[] {\r\n const cardList = this.fields?.items ?? [];\r\n return cardList.map((el) => new CardModel(el).all);\r\n }\r\n\r\n get eyebrow(): StringField | undefined {\r\n return this.fields?.eyebrow;\r\n }\r\n\r\n get link(): LinkField | undefined {\r\n return this.fields?.link;\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n\r\n get textColor(): string | undefined {\r\n return this.params?.textColor?.toLowerCase() || 'black';\r\n }\r\n\r\n get isGradientDisabled(): boolean | undefined {\r\n return this.params?.disableGradient === '1';\r\n }\r\n\r\n get headingTag(): THeadingTag {\r\n return (this.params?.headingTag?.toLowerCase() as THeadingTag) || 'h3';\r\n }\r\n\r\n get cardHeadingTitleTag(): THeadingTag {\r\n return getFollowingHTag(this.headingTag);\r\n }\r\n}\r\n","import { useContext } from 'react';\r\nimport { LayoutServiceData, SitecoreContextReactContext, SitecoreContextValue } from '@sitecore-jss/sitecore-jss-react';\r\nimport { WithSitecoreContextOptions } from '@sitecore-jss/sitecore-jss-react/types/enhancers/withSitecoreContext';\r\nimport { TSitecoreContext } from '../types/types';\r\n\r\ntype TSitecoreContextType = {\r\n sitecoreContext: TSitecoreContext;\r\n updateSitecoreContext?: (value: SitecoreContextValue | LayoutServiceData) => void\r\n}\r\n\r\nexport default function useSitecoreContext(options?: WithSitecoreContextOptions): TSitecoreContextType {\r\n const reactContext = useContext(SitecoreContextReactContext);\r\n const updatable = options?.updatable;\r\n\r\n return {\r\n sitecoreContext: reactContext.context as TSitecoreContext,\r\n updateSitecoreContext: updatable ? reactContext.setContext : undefined,\r\n };\r\n}\r\n","import useSitecoreContext from './useSitecoreContext';\r\n\r\n// returns true in Experience editor edit mode\r\n// more reliable than isExperienceEditor function\r\nexport default function useEEActive(previewIncluded = false): boolean {\r\n const {sitecoreContext} = useSitecoreContext();\r\n let isEEActive = sitecoreContext?.pageEditing;\r\n if (previewIncluded) {\r\n isEEActive = isEEActive || sitecoreContext?.pageState === 'preview';\r\n }\r\n\r\n return !!isEEActive;\r\n}\r\n","enum ctaTypes {\r\n primaryRed = 'p-red',\r\n primaryWhite = 'p-white',\r\n primaryBlack = 'p-black',\r\n secondaryRed = 's-red',\r\n secondaryWhite = 's-white',\r\n baseButton = 'cta',\r\n secondaryBaseButton = 'button',\r\n smallButton = 'cta--small',\r\n}\r\n\r\nexport default ctaTypes;\r\n","import { TBaseObj } from '../types/types';\r\n\r\n/**\r\n *\r\n * @param {String} url\r\n * @return {boolean}\r\n */\r\nfunction isInternalUrl(url: string | undefined): boolean {\r\n if (url) return url.startsWith('/') || url.startsWith('#');\r\n return false;\r\n}\r\n\r\nexport const getExternalLinkRelAttribute = (url = ''): TBaseObj => {\r\n return isInternalUrl(url) ? {} : { rel: 'nofollow' };\r\n};\r\n\r\nfunction appendToUrlPath(url: string, add: string): string {\r\n const appendSlash = (newurl: string): string => (newurl.endsWith('/') ? newurl : `${newurl}/`);\r\n const appendString = add || '';\r\n\r\n if (!url) {\r\n return '';\r\n } else if (url.includes('?')) {\r\n const urlArray = url.split('?');\r\n\r\n return `${appendSlash(urlArray[0])}${appendString}?${urlArray[1]}`;\r\n } else if (url.includes('#')) {\r\n const urlArray = url.split('#');\r\n\r\n return `${appendSlash(urlArray[0])}${appendString}#${urlArray[1]}`;\r\n } else {\r\n return `${appendSlash(url)}${appendString}`;\r\n }\r\n}\r\n\r\nfunction removeTrailingSlashFromPath(path: string): string {\r\n return path.endsWith('/') ? path.slice(0, -1) : path;\r\n}\r\n\r\nexport { isInternalUrl, appendToUrlPath, removeTrailingSlashFromPath };\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport { isInternalUrl } from '../../../utils';\r\n\r\nconst RoutableNotEditableLink = ({ href, target = '', ...otherProps }) => {\r\n if (href && isInternalUrl(href)) {\r\n return ;\r\n }\r\n //eslint-disable-next-line\r\n return ;\r\n};\r\n\r\nRoutableNotEditableLink.propTypes = {\r\n href: PropTypes.string.isRequired,\r\n target: PropTypes?.string,\r\n};\r\n\r\nexport default RoutableNotEditableLink;\r\n","\r\n//eslint-disable-next-line\r\n\r\nconst iconSize = {\r\n xxs: 12,\r\n sm: 16,\r\n md: 18,\r\n mbl: 20,\r\n mldsk: 22,\r\n dsk: 24,\r\n lg: 30,\r\n xlg: 32,\r\n};\r\n\r\nexport { iconSize };\r\n","import React from 'react';\r\nimport { TIconField, TIconFromRenderingParams } from '../../../types/types';\r\nimport iconData from './caseih.json';\r\n\r\nexport type TIconProps = {\r\n iconName?: string;\r\n iconField?: TIconField | TIconFromRenderingParams;\r\n color?: 'primary' | 'complement' | 'white' | 'error' | 'gray' | 'light-black' | 'success' | 'medium-gray' | 'warning';\r\n size?: number;\r\n extraClassName?: string;\r\n onClick?: () => void;\r\n};\r\n\r\ntype TIconData = {\r\n webkitMaskUrl: string | null;\r\n alt: string | undefined;\r\n};\r\n\r\nconst getIconDataFromKey: (iconName: string) => TIconData = (iconName) => {\r\n const icon = iconData?.items.find((iconItem) => iconName === iconItem?.title);\r\n\r\n if (icon) {\r\n return {\r\n webkitMaskUrl: typeof icon?.full === 'string' ? icon.full : null,\r\n alt: icon?.alt,\r\n };\r\n }\r\n\r\n return { webkitMaskUrl: null, alt: undefined };\r\n};\r\n\r\nconst getIconDataromField: (iconField: TIconField | TIconFromRenderingParams | undefined) => TIconData = (iconField) => {\r\n const iconReferenceField = iconField as TIconField;\r\n const iconFromRenderingParams = iconField as TIconFromRenderingParams;\r\n\r\n if (iconReferenceField?.fields?.iconUrl?.value) {\r\n return { webkitMaskUrl: iconReferenceField.fields.iconUrl.value, alt: iconReferenceField.fields.iconAlt?.value };\r\n }\r\n\r\n if (iconFromRenderingParams?.iconUrl) {\r\n return { webkitMaskUrl: iconFromRenderingParams.iconUrl, alt: iconFromRenderingParams?.iconUrl };\r\n }\r\n\r\n return { webkitMaskUrl: null, alt: undefined };\r\n};\r\n\r\nconst Icon = React.forwardRef(function InnerIcon(\r\n { iconName, iconField, onClick, color = '', size, extraClassName = '' },\r\n ref\r\n) {\r\n const { webkitMaskUrl, alt } = iconName ? getIconDataFromKey(iconName) : getIconDataromField(iconField);\r\n\r\n if (!webkitMaskUrl) {\r\n return null;\r\n }\r\n\r\n const iconStyles: React.CSSProperties = {\r\n WebkitMaskImage: `url(${webkitMaskUrl})`,\r\n WebkitMaskSize: 'cover',\r\n height: `${size || 16}px`,\r\n width: `${size || 16}px`,\r\n };\r\n\r\n return (\r\n \r\n );\r\n});\r\n\r\nexport default React.memo(Icon);\r\n","import React, { FC } from 'react';\r\nimport { iconSize } from '../../../../../constants/icon.constants';\r\nimport ctaTypes from '../../../../../enums/CTA.enums';\r\nimport Icon from '../../../icon';\r\nimport { TArrowRight } from '../../types/cta.types';\r\n\r\nconst ArrowRight: FC = (props) => {\r\n const { type } = props;\r\n return (\r\n

\r\n \r\n

\r\n );\r\n};\r\n\r\nexport default ArrowRight;\r\n","import React, { FC, memo } from 'react';\r\nimport { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-react';\r\nimport useEEActive from '../../../hooks/useEEActive';\r\nimport { TRoutableSiteCoreLinkField, TBaseObj } from '../../../types/types';\r\n\r\nconst buildLinkAttributes = (props: TRoutableSiteCoreLinkField): TBaseObj => {\r\n const { field } = props;\r\n if (!field?.value) return { className: props?.className || '' };\r\n\r\n let linkAttributes = {};\r\n const value = field?.value;\r\n linkAttributes = {\r\n href: value?.href,\r\n className: props?.className ?? value?.class,\r\n title: value?.title,\r\n onClick: props.onClick,\r\n target: props?.target ?? value?.target,\r\n };\r\n\r\n if (!value?.removenofollow) {\r\n linkAttributes['rel'] = 'nofollow';\r\n }\r\n\r\n return linkAttributes;\r\n};\r\n\r\nconst CustomExternalAnchor: FC = (props) => {\r\n const isEE = useEEActive();\r\n\r\n if (isEE) {\r\n return ;\r\n }\r\n\r\n const { children, field } = props;\r\n\r\n const linkAttributes = buildLinkAttributes(props);\r\n\r\n return {children || field?.value?.text || field?.value?.href};\r\n};\r\n\r\nexport default memo(CustomExternalAnchor);\r\n","import React, { FC } from 'react';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { isInternalUrl } from '../../../utils';\r\nimport CustomExternalAnchor from '../customExternalAnchor';\r\nimport { TRoutableSiteCoreLinkField } from '../../../types/types';\r\n\r\n/** React component that turns Sitecore link values that start are internal into react-router route links */\r\nconst RoutableSitecoreLink: FC = (props) => {\r\n const { field, editable = true, children } = props;\r\n const hasValidHref = field?.value?.href;\r\n const isEditing = editable && field?.editable;\r\n\r\n // only want to apply the routing link if not editing (if editing, need to render editable link value)\r\n if (hasValidHref && !isEditing) {\r\n const value = field.value;\r\n\r\n // determine if a link is a route or not. This logic may not be appropriate for all usages.\r\n if (isInternalUrl(value.href)) {\r\n return (\r\n \r\n {children || value.text || value.href}\r\n \r\n );\r\n }\r\n }\r\n\r\n return ;\r\n};\r\n\r\nexport default RoutableSitecoreLink;\r\n","import React, { FC } from 'react';\r\nimport CustomExternalAnchor from '../../../customExternalAnchor';\r\nimport RoutableSitecoreLink from '../../../routableSitecoreLink';\r\nimport { TLinkChildrenAndIcon } from '../../types/cta.types';\r\nimport ArrowRight from './arrowRight';\r\n\r\nconst LinkChildrenAndIcon: FC = (props) => {\r\n const { isEditing, onClick, field, ctaClassName, children, hasArrowRight, type, target } = props;\r\n if (isEditing) {\r\n return (\r\n \r\n \r\n {children}\r\n {hasArrowRight && }\r\n \r\n );\r\n } else if (children) {\r\n return (\r\n \r\n {children}\r\n {hasArrowRight && }\r\n \r\n );\r\n } else if (hasArrowRight) {\r\n return (\r\n \r\n {field.value.text || field.value.href}\r\n {}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default LinkChildrenAndIcon;\r\n","import React, { FC } from 'react';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport { isInternalUrl } from '../../../../../utils';\r\nimport { TLinkWithField } from '../../types/cta.types';\r\nimport ArrowRight from './arrowRight';\r\n\r\nconst ValidHrefAndNotEditing: FC = ({ field, type, children, hasArrowRight, ctaClassName, onClick }) => {\r\n const value = field.value;\r\n\r\n // determine if a link is a route or not. This logic may not be appropriate for all usages.\r\n if (value.href && isInternalUrl(value.href)) {\r\n return (\r\n \r\n {children || value.text || value.href}\r\n {hasArrowRight && }\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ValidHrefAndNotEditing;\r\n","import { isEditorActive } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { FC } from 'react';\r\nimport { isInternalUrl } from '../../../../../utils';\r\nimport CustomExternalAnchor from '../../../customExternalAnchor';\r\nimport RoutableSitecoreLink from '../../../routableSitecoreLink';\r\nimport { TLinkWithField } from '../../types/cta.types';\r\nimport LinkChildrenAndIcon from './linkChildrenAndIcon';\r\nimport ValidHrefAndNotEditing from './validHrefAndNotEditing';\r\n\r\nconst LinkWithField: FC = (props) => {\r\n const { field, hasArrowRight, ctaClassName, onClick, target, children, type } = props;\r\n\r\n const hasValidHref = field.value && field.value.href;\r\n const isEditing = (field as unknown as { editable: any }).editable;\r\n\r\n // only want to apply the routing link if not editing (if editing, need to render editable link value)\r\n if (hasValidHref && !isEditing && isInternalUrl(field.value.href)) {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n\r\n if (children || hasArrowRight) {\r\n // if it has children or the arrow, the sitecore link component gets duplicated on EE\r\n // return ;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n if (!hasArrowRight) {\r\n // Primary CTA with no children\r\n return \r\n }\r\n\r\n return ;\r\n};\r\n\r\nexport default LinkWithField;\r\n","import React, { FC } from 'react';\r\nimport ctaTypes from '../../../enums/CTA.enums';\r\nimport { getExternalLinkRelAttribute } from '../../../utils';\r\nimport RoutableNotEditableLink from '../routableNotEditableLink';\r\nimport ArrowRight from './components/LinkWithField/arrowRight';\r\nimport LinkWithField from './components/LinkWithField';\r\nimport { TCtaProps } from './types/cta.types';\r\n\r\nconst CTA: FC = ({ type, href, onClick, children, field, extraClassName, target, isArrowShown = true }) => {\r\n const ctaClassName = [ctaTypes['baseButton'], type, extraClassName].join(' ');\r\n\r\n const hasArrowRight = isArrowShown && (type === ctaTypes.secondaryRed || type === ctaTypes.secondaryWhite);\r\n\r\n if (field) {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n {children}\r\n {hasArrowRight && }\r\n \r\n );\r\n }\r\n};\r\n\r\nexport { ctaTypes };\r\nexport default React.memo(CTA);\r\n","import React, { ReactElement, FunctionComponent } from 'react';\r\nimport PropTypes, {Validator} from 'prop-types';\r\nimport { ICustomTextField, ICustomTextProps, TSuperScriptTags } from './types/customText.types';\r\nimport useSitecoreContext from '../../../hooks/useSitecoreContext';\r\n\r\nexport const CustomText: FunctionComponent = ({ field, tag, editable, encode, ...otherProps }): JSX.Element | null => {\r\n if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {\r\n return null;\r\n }\r\n\r\n const {sitecoreContext} = useSitecoreContext();\r\n const language: string = sitecoreContext?.language?.toLowerCase() || '';\r\n const isEnglish = language?.startsWith('en');\r\n // can't use editable value if we want to output unencoded\r\n if (!encode) {\r\n editable = false;\r\n }\r\n\r\n const isEditable = field.editable && editable;\r\n\r\n let output: string | number | (ReactElement | string)[];\r\n if (isEditable) {\r\n output = field.editable || '';\r\n } else {\r\n output = field.value === undefined ? '' : field.value;\r\n }\r\n\r\n function replaceSuperScriptTags(str: string, formatted: (ReactElement | string)[], isEnglish = true) {\r\n // u00A9 -> © , u00AE -> ®, u002A -> * , u2122 -> ™\r\n let regex = /(\\d)(?:st|nd|rd|th)|(\\u00A9)|(\\u00AE)|(\\u002A)|(\\u2122)/g;\r\n if (!isEnglish) {\r\n regex = /(\\u00A9)|(\\u00AE)|(\\u002A)|(\\u2122)/g;\r\n }\r\n const superScriptTags: TSuperScriptTags[] = [];\r\n let cursor = 0;\r\n let matchedScriptChar = regex.exec(str);\r\n while (matchedScriptChar !== null) {\r\n let matchedChars: string;\r\n if (matchedScriptChar[1] && isEnglish) {\r\n superScriptTags.push([cursor, matchedScriptChar.index + 1]);\r\n matchedChars = matchedScriptChar[0].slice(matchedScriptChar[1].length);\r\n } else {\r\n superScriptTags.push([cursor, matchedScriptChar.index]);\r\n matchedChars = matchedScriptChar[0];\r\n }\r\n superScriptTags.push(matchedChars);\r\n cursor = matchedScriptChar.index + matchedScriptChar[0].length;\r\n matchedScriptChar = regex.exec(str);\r\n }\r\n superScriptTags.push([cursor, str.length]);\r\n superScriptTags.forEach((val) => {\r\n if (typeof val === 'string') {\r\n formatted.push(^{val});\r\n }\r\n if (Array.isArray(val)) {\r\n const [startIndex, endIndex] = val;\r\n formatted.push(str.slice(startIndex, endIndex));\r\n }\r\n });\r\n }\r\n\r\n // when string value isn't formatted, we should format line breaks\r\n if (!field.editable && typeof output === 'string') {\r\n const splitted = String(output).split('\\n');\r\n\r\n if (splitted.length) {\r\n const formatted: (ReactElement | string)[] = [];\r\n\r\n splitted.forEach((str, i) => {\r\n replaceSuperScriptTags(str, formatted, isEnglish);\r\n\r\n const isLast = i === splitted.length - 1;\r\n\r\n if (!isLast) {\r\n formatted.push(
);\r\n }\r\n });\r\n\r\n output = formatted;\r\n }\r\n }\r\n\r\n const setDangerously = isEditable || !encode;\r\n\r\n let children: string | number | (string | JSX.Element)[] | null = null;\r\n const htmlProps: {\r\n [htmlAttributes: string]: unknown;\r\n children?: React.ReactNode;\r\n } = {\r\n ...otherProps,\r\n };\r\n\r\n if (setDangerously) {\r\n htmlProps.dangerouslySetInnerHTML = {\r\n __html: output,\r\n };\r\n } else {\r\n children = output;\r\n }\r\n\r\n if (tag || setDangerously) {\r\n return React.createElement(tag || 'span', htmlProps, children);\r\n } else {\r\n return {children};\r\n }\r\n};\r\n\r\nCustomText.propTypes = {\r\n field: PropTypes.shape({\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n editable: PropTypes.string,\r\n }) as Validator,\r\n tag: PropTypes.string,\r\n editable: PropTypes.bool,\r\n encode: PropTypes.bool,\r\n};\r\n\r\nCustomText.defaultProps = {\r\n editable: true,\r\n encode: true,\r\n};\r\n\r\nCustomText.displayName = 'CustomText';\r\n","import React, { FC } from 'react';\r\nimport { WithTranslation, withTranslation } from 'react-i18next';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport useSitecoreContext from '../../../hooks/useSitecoreContext';\r\n\r\nexport type TDictionaryTermProps = WithTranslation & {\r\n t: WithTranslation['t'];\r\n keyword: string;\r\n isCustomText?: boolean;\r\n customTextClass?: string;\r\n customTextTag?: string;\r\n};\r\n\r\nconst DictionaryTerm: FC = ({ t, keyword, isCustomText = false, customTextClass = '', customTextTag = 'div' }) => {\r\n const {sitecoreContext} = useSitecoreContext();\r\n const pageEditing = sitecoreContext?.pageState === 'edit';\r\n\r\n if (!keyword) return null;\r\n if (!t) return <>{keyword};\r\n\r\n if (isCustomText) {\r\n const value = t(keyword, { defaultValue: '' })?.trim();\r\n if (!pageEditing) {\r\n return value && value !== keyword ? (\r\n \r\n ) : null;\r\n }\r\n return ;\r\n }\r\n\r\n return <>{t(keyword)};\r\n};\r\n\r\nexport default withTranslation()(DictionaryTerm);\r\n","import React, { FC } from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { CustomText } from '../customText';\r\nimport { TextComponentDeciderProps } from './types/textComponentDecider.types';\r\nimport DictionaryTerm from '../dictionaryTerm';\r\n\r\nconst TextComponentDecider: FC = (props) => {\r\n const { type, onClick, ...restOfProps } = props;\r\n\r\n if (type === 'CustomText') {\r\n return ;\r\n } else if (type === 'RichText') {\r\n return ;\r\n } else if (type === 'DictionaryTerm') {\r\n if (props?.dictionaryKey) {\r\n return (\r\n \r\n );\r\n }\r\n return null;\r\n }\r\n return ;\r\n};\r\n\r\nexport default TextComponentDecider;\r\n","import { THeadingProps } from '../types/heading.types';\r\nimport { StringField, TLinkField } from '../../../../types/types';\r\n\r\nexport class HeadingModel {\r\n private readonly props: THeadingProps;\r\n private readonly isEE: boolean;\r\n\r\n constructor(props: THeadingProps, isEE: boolean) {\r\n this.props = props || null;\r\n this.isEE = isEE;\r\n }\r\n\r\n get title(): StringField {\r\n if (typeof this.props?.title === 'string') return { value: this.props.title } as StringField;\r\n return this.props?.title as StringField;\r\n }\r\n\r\n get eyebrow(): StringField {\r\n if (typeof this.props.eyebrow === 'string') return { value: this.props.eyebrow } as StringField;\r\n return this.props?.eyebrow as StringField;\r\n }\r\n\r\n get subtitle(): StringField {\r\n if (typeof this.props.subtitle === 'string') return { value: this.props.subtitle } as StringField;\r\n return this.props?.subtitle as StringField;\r\n }\r\n\r\n get link(): TLinkField | undefined {\r\n return this.props.link;\r\n }\r\n get isLinkExistsOrIsEE(): boolean {\r\n return !!(this.props.link?.value?.href || this.isEE);\r\n }\r\n\r\n get editable(): boolean {\r\n return !!this.props.editable;\r\n }\r\n\r\n get eyebrowExistsOrIsEE(): boolean {\r\n return !!(this.eyebrow?.value || this.isEE);\r\n }\r\n\r\n get titleExistsOrIsEE(): boolean {\r\n return !!(this.title?.value || this.isEE);\r\n }\r\n\r\n get subtitleExistsOrIsEE(): boolean {\r\n return !!(this.subtitle?.value || this.isEE);\r\n }\r\n}\r\n","import { TLinkField } from '../types/types';\r\n\r\nexport function targetLinkdsk(link: TLinkField | undefined, isDesktop?: boolean): string {\r\n if (isDesktop && link?.value?.target) {\r\n return link?.value?.target;\r\n } else if (!isDesktop && link?.value?.target) {\r\n return '_self';\r\n } else return '';\r\n}\r\n","import { useState, useEffect } from 'react';\r\nimport { windowService } from '../../utils/window.utils';\r\n\r\nconst useMediaQuery = (\r\n query: string,\r\n initialState = false,\r\n //eslint-disable-next-line\r\n callbackOnChange = (mediaMatches: boolean) => {\r\n // This is intentional\r\n }\r\n) => {\r\n const [matches, setMatches] = useState(initialState);\r\n\r\n useEffect(() => {\r\n const media = windowService().matchMedia(query);\r\n if (media.matches !== matches) {\r\n setMatches(media.matches);\r\n callbackOnChange(media.matches);\r\n }\r\n const listener = () => setMatches(media.matches);\r\n media.addListener(listener);\r\n return () => media.removeListener(listener);\r\n }, [matches, query]); //eslint-disable-line\r\n\r\n return matches;\r\n};\r\n\r\nexport default useMediaQuery;\r\n","export const Breakpoints: { [key: string]: number } = {\r\n xs: 0,\r\n sm: 576,\r\n md: 768,\r\n lg: 992,\r\n xl: 1200,\r\n xxl: 1600,\r\n};\r\n\r\nexport const BreakpointsInPx: { [key: string]: string } = {\r\n xs: `${Breakpoints.xs}px`,\r\n sm: `${Breakpoints.sm}px`,\r\n md: `${Breakpoints.md}px`,\r\n lg: `${Breakpoints.lg}px`,\r\n xl: `${Breakpoints.xl}px`,\r\n xxl: `${Breakpoints.xxl}px`,\r\n};\r\n","import { bg, cs, da, deAT, de, enAU, enCA, enGB, enIE, enUS, es, fr, frCA, hu, id, it, nl, nlBE, pl, pt, ptBR, ro, ru, sr, sv, th, tr, uk } from 'date-fns/locale';\r\n\r\nexport default { bg, cs, da, deAT, de, enAU, enCA, enGB, enIE, enUS, es, fr, frCA, hu, id, it, nl, nlBE, pl, pt, ptBR, ro, ru, sr, sv, th, tr, uk };\r\n","import { Locale, format } from 'date-fns';\r\nimport allLocales from '../constants/locale.constants';\r\nimport useSitecoreContext from './useSitecoreContext';\r\n\r\nexport const getUTCDate = (dateString: string): Date => {\r\n const date = new Date(dateString);\r\n return new Date(date.getTime() + date.getTimezoneOffset() * 60000);\r\n};\r\n\r\nexport const getFormattedDate = (date: Date, dateFormat: string, locale?: Locale) => {\r\n return format(date, dateFormat, locale && { locale });\r\n};\r\n\r\nexport default function useFormatDate(dateString?: string): string | undefined {\r\n\r\n if (!dateString) return dateString;\r\n\r\n const {sitecoreContext} = useSitecoreContext();\r\n const defaultDateFormat = 'dd MMMM yyyy';\r\n const { dateFormat = defaultDateFormat, dateLocal } = sitecoreContext?.regionalSettings || {};\r\n const utcDate = getUTCDate(dateString);\r\n const locale = allLocales[dateLocal];\r\n let formattedDate: string;\r\n\r\n try {\r\n formattedDate = getFormattedDate(new Date(utcDate), dateFormat, locale);\r\n } catch (error) {\r\n formattedDate = getFormattedDate(new Date(utcDate), defaultDateFormat, locale);\r\n }\r\n\r\n return formattedDate;\r\n}\r\n","import { getFormattedDate, getUTCDate } from '../hooks/useFormatDate';\r\nimport { windowService } from './window.utils';\r\n\r\nconst addLeadingZeros = (num: number, totalLength: number): string => String(num).padStart(totalLength, '0');\r\nconst formatComponentNumber = (num: number): string => addLeadingZeros(num, 2);\r\nexport const getDLMFormatDate = (dateString: string) => {\r\n const utcDate = getUTCDate(dateString);\r\n const DLM_DATE_FORMAT = 'yyyyMMdd';\r\n return getFormattedDate(utcDate, DLM_DATE_FORMAT);\r\n};\r\n\r\nfunction googleDataLayerPush(dataLayerData: any): void {\r\n windowService().dataLayer = windowService()?.dataLayer || [];\r\n\r\n if (!windowService().dataLayer) {\r\n return;\r\n }\r\n\r\n windowService().dataLayer.push(dataLayerData);\r\n}\r\n\r\nfunction googleClickEvent(\r\n type: string,\r\n category: string,\r\n action: string | undefined,\r\n label: string | undefined,\r\n elementNumber?: number | undefined,\r\n news_type?: string | undefined,\r\n date?: string | undefined,\r\n event_type?: string | undefined,\r\n event_status?: string | undefined\r\n): void {\r\n action = action ?? '';\r\n label = label ?? '';\r\n\r\n const dataLayerData = {\r\n event: 'click',\r\n _clear: true,\r\n 'data-tag-meta': {\r\n type,\r\n category,\r\n action,\r\n label,\r\n ...(news_type && { news_type }),\r\n ...(date && { date }),\r\n ...(event_type && { event_type }),\r\n ...(event_status && { event_status }),\r\n },\r\n };\r\n\r\n if (typeof elementNumber !== 'undefined') {\r\n dataLayerData['data-tag-meta']['elementNo'] = formatComponentNumber(elementNumber);\r\n }\r\n\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleFormSubmitEvent(formName: string | undefined, fileUploaded: boolean | undefined): void {\r\n const dataLayerData = {\r\n event: 'click',\r\n 'data-tag-meta': {\r\n type: 'form',\r\n category: 'Form Submit',\r\n action: 'Success',\r\n label: formName,\r\n fileUpload: fileUploaded ? 'Yes' : 'No',\r\n },\r\n };\r\n\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleClickCtaEvent(\r\n category: 'Button' | 'Link' | 'Hero' | 'Page Nav' | 'Global Nav' | 'Global Footer' | 'Brochure' | 'Convert to Excel' | 'Print' | 'News Files',\r\n action: string | undefined,\r\n label: string | undefined,\r\n elementNumber?: number | undefined\r\n) {\r\n googleClickEvent('cta', category, action, label, elementNumber);\r\n}\r\n\r\nfunction googleClickNewsCtaEvent(label: string | undefined, elementNumber?: number, news_type?: string, date?: string) {\r\n googleClickEvent('cta', 'Button', 'News Click', label, elementNumber, news_type, date);\r\n}\r\n\r\nfunction googleClickEventsCtaEvent(\r\n label: string | undefined,\r\n elementNumber?: number,\r\n event_type?: string,\r\n date?: string,\r\n event_status?: string\r\n) {\r\n googleClickEvent('cta', 'Button', 'Events Click', label, elementNumber, undefined, date, event_type, event_status);\r\n}\r\n\r\nfunction googleClickNavEvent(\r\n category: 'Page Nav' | 'Page Sub Nav' | 'Global Footer' | 'Global Nav',\r\n action: string | undefined,\r\n label: string | undefined,\r\n elementNumber?: number | undefined\r\n) {\r\n googleClickEvent('nav', category, action, label, elementNumber);\r\n}\r\n\r\nfunction googleClickSubNavigationEvent(action: string | undefined, label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('nav', 'Page Sub Nav', action, label, elementNumber);\r\n}\r\n\r\nfunction googleClickSlideEvent(action: string | undefined, label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('slide', 'Carousel', action, label, elementNumber);\r\n}\r\n\r\nfunction googleClickOpenVideoEvent(label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('video', 'Video', 'Open', label, elementNumber);\r\n}\r\n\r\nfunction googleClickAccordionEvent(action: string | undefined, label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('accordion', 'Accordion', action, label, elementNumber);\r\n}\r\n\r\nfunction googleClickCardEvent(label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('card', 'Card', 'Click', label, elementNumber);\r\n}\r\n\r\nfunction googleSeeMoreCardEvent(label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('card', 'Link', 'See More', label, elementNumber);\r\n}\r\n\r\nfunction googleClickBreadcrumbEvent(label: string | undefined): void {\r\n googleClickEvent('breadcrumb', 'Breadcrumb', 'Click', label);\r\n}\r\n\r\nfunction googleClickDropdownEvent(action: string | undefined, label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('dropdown', 'Dropdown', action, label, elementNumber);\r\n}\r\n\r\nfunction googleClickTabEvent(action: 'Open' | 'Select', label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('tab', 'Tab', action, label, elementNumber);\r\n}\r\n\r\nfunction googleSocialEvent(label: string | undefined, elementNumber?: number | undefined): void {\r\n googleClickEvent('social', 'Social', 'Share', label, elementNumber);\r\n}\r\n\r\nfunction googleClickSearchEvent(action: string | undefined, label: string | undefined): void {\r\n googleClickEvent('search', 'Search Result', action, label);\r\n}\r\n\r\nfunction googleClickRichTextEvent(event: any, label: string | undefined, elementNumber?: number | undefined): void {\r\n const anchorElement = event?.target;\r\n\r\n if (!anchorElement || anchorElement.nodeName !== 'A') {\r\n return;\r\n }\r\n\r\n const anchorText = anchorElement.text;\r\n googleClickCtaEvent('Link', anchorText, label, elementNumber);\r\n}\r\n\r\nfunction googleClickDealerLocatorResults(\r\n event: string,\r\n dealerLocatorCountry: any | undefined,\r\n dealerLocatorSearch: string | undefined,\r\n dealerLocatorEquipment: string | undefined,\r\n dealerLocatorServices: string | undefined,\r\n dealerLocatorType: string | undefined,\r\n dealerLocatorState: string | undefined\r\n): void {\r\n const dataLayerData = {\r\n event,\r\n dealerLocatorCountry,\r\n dealerLocatorSearch,\r\n dealerLocatorEquipment,\r\n dealerLocatorServices,\r\n dealerLocatorType,\r\n dealerLocatorState,\r\n };\r\n\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleGeolocationClick(\r\n event: string,\r\n region: string | undefined,\r\n language: string | undefined,\r\n market: string | undefined,\r\n dealerLocatorType: string | undefined\r\n): void {\r\n const dataLayerData = {\r\n event,\r\n region,\r\n language,\r\n market,\r\n dealerLocatorType,\r\n };\r\n\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleClickDealerLocatorGetDetals(\r\n event: string,\r\n dealerLocatorCountry: string | undefined,\r\n dealerLocatorSearch: string | undefined,\r\n dealerName: string | undefined,\r\n certifiedDealer: string | undefined,\r\n dealerLocatorType: string | undefined\r\n): void {\r\n const dataLayerData = {\r\n event,\r\n dealerLocatorCountry,\r\n dealerLocatorSearch,\r\n dealerName,\r\n certifiedDealer,\r\n dealerLocatorType,\r\n };\r\n\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleDealerLocatorContactClick(\r\n event: string,\r\n type: string | undefined,\r\n dealerName: string | undefined,\r\n dealerLocatorType: string | undefined\r\n): void {\r\n const dataLayerData = {\r\n event,\r\n type,\r\n dealerName,\r\n dealerLocatorType,\r\n };\r\n\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleFormProgress(form_name, form_step: string, form_step_name: string | undefined) {\r\n const dataLayerData = {\r\n event: 'form_progress',\r\n form_name,\r\n form_step,\r\n form_step_name,\r\n };\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nfunction googleDownloadBrochureListingEvent(\r\n event: string,\r\n productLine?: string,\r\n productSeries?: string,\r\n productCategory?: string,\r\n search_term?: string\r\n) {\r\n const dataLayerData = {\r\n event,\r\n productLine,\r\n productSeries,\r\n productCategory,\r\n search_term,\r\n };\r\n googleDataLayerPush(dataLayerData);\r\n}\r\n\r\nexport {\r\n formatComponentNumber,\r\n googleDataLayerPush,\r\n googleFormSubmitEvent,\r\n googleClickCtaEvent,\r\n googleClickNewsCtaEvent,\r\n googleClickSlideEvent,\r\n googleClickOpenVideoEvent,\r\n googleClickAccordionEvent,\r\n googleClickCardEvent,\r\n googleSeeMoreCardEvent,\r\n googleClickBreadcrumbEvent,\r\n googleClickDropdownEvent,\r\n googleClickNavEvent,\r\n googleClickSubNavigationEvent,\r\n googleClickTabEvent,\r\n googleSocialEvent,\r\n googleClickSearchEvent,\r\n googleClickRichTextEvent,\r\n googleClickEvent,\r\n googleClickDealerLocatorResults,\r\n googleGeolocationClick,\r\n googleClickDealerLocatorGetDetals,\r\n googleDealerLocatorContactClick,\r\n googleClickEventsCtaEvent,\r\n googleFormProgress,\r\n googleDownloadBrochureListingEvent,\r\n};\r\n","export const getTextType = (textType, isFallbackToDictionaryTerm = false) => {\r\n if (isFallbackToDictionaryTerm) {\r\n return 'DictionaryTerm';\r\n } else {\r\n return textType;\r\n }\r\n};\r\n","import React, { FC, useMemo } from 'react';\r\nimport useEEActive from '../../../hooks/useEEActive';\r\nimport ctaTypes from '../../../enums/CTA.enums';\r\nimport CTA from '../cta';\r\nimport TextComponentDecider from '../TextComponentDecider';\r\nimport { HeadingModel } from './model/heading.model';\r\nimport { THeadingProps } from './types/heading.types';\r\nimport { targetLinkdsk } from '../../../utils/targetDskLink';\r\nimport useMediaQuery from '../../../lib/custom-hooks/useMediaQuery';\r\nimport { BreakpointsInPx } from '../../../constants/breakpoints.constants';\r\nimport { googleClickCtaEvent, googleClickRichTextEvent } from '../../../utils/analytics';\r\nimport { getTextType } from '../../../utils/getTextType.utils';\r\n\r\nconst Heading: FC = (props) => {\r\n const isEE = useEEActive();\r\n const memoDependencires = props?.modelDependencies || [];\r\n const model = useMemo(() => new HeadingModel(props, isEE), [...memoDependencires, props, isEE]); // eslint-disable-line\r\n const {\r\n extraClassNameLink = '',\r\n children,\r\n customTextTitle = false,\r\n customTextSubtitle = false,\r\n tag = 'h2',\r\n useDictionaryFallback = false,\r\n titleDictionaryKey,\r\n eyebrowDictionaryKey,\r\n descriptionDictionaryKey,\r\n } = props;\r\n const isDesktop = useMediaQuery(`(min-width: ${BreakpointsInPx['md']})`);\r\n\r\n return (\r\n

\r\n {(model.eyebrowExistsOrIsEE || useDictionaryFallback) && (\r\n \r\n )}\r\n\r\n {(model.titleExistsOrIsEE || useDictionaryFallback) && (\r\n \r\n )}\r\n {(model.subtitleExistsOrIsEE || useDictionaryFallback) && (\r\n {\r\n if (props.useAnalytics) {\r\n googleClickRichTextEvent(event, model.title?.value);\r\n }\r\n }}\r\n dictionaryKey={descriptionDictionaryKey}\r\n />\r\n )}\r\n {!props.hideSecondaryLink && model.isLinkExistsOrIsEE && (\r\n \r\n {\r\n if (props.useAnalytics) {\r\n googleClickCtaEvent('Link', model?.link?.value.text ?? model?.link?.value.title, model.title?.value);\r\n }\r\n }}\r\n />\r\n \r\n )}\r\n {(Boolean(children) || isEE) && {children}}\r\n

\r\n );\r\n};\r\nexport default React.memo(Heading);\r\n","import React, { FC } from 'react';\r\nimport Icon from '../icon';\r\nimport { TCarouselArrowProps } from './types/carouselArrow.types';\r\n\r\nconst CarouselArrow: FC = ({ direction, onClick, onClickSecondary, className, additionalCssClass = '' }: TCarouselArrowProps) => {\r\n const icon = `arrow-chevron-${direction === 'previous' ? 'left' : 'right'}` as 'arrow-chevron-left' | 'arrow-chevron-right';\r\n return (\r\n {\r\n onClick && onClick();\r\n onClickSecondary && onClickSecondary();\r\n }}\r\n >\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CarouselArrow;\r\n","const triggerCTRLCmdAndClick = (event, cb) => {\r\n if (event.ctrlKey || event.metaKey) {\r\n event?.stopPropagation();\r\n event?.preventDefault();\r\n cb();\r\n }\r\n };\r\n \r\n export { triggerCTRLCmdAndClick };","export function getYoutubeVideoId(link: string): string | undefined {\r\n if (!link) return;\r\n const trimmedLink = link.trim();\r\n let videoId = '';\r\n if (trimmedLink.includes('youtube')) {\r\n if (trimmedLink.includes('watch')) {\r\n videoId = trimmedLink.split('v=')[1];\r\n const ampPos = videoId.indexOf('&');\r\n if (ampPos !== -1) {\r\n videoId = videoId.substring(0, ampPos);\r\n }\r\n } else if (trimmedLink.includes('embed')) {\r\n videoId = trimmedLink.split('embed/')[1];\r\n const quesPos = videoId.indexOf('?');\r\n if (quesPos !== -1) {\r\n videoId = videoId.substring(0, quesPos);\r\n }\r\n }\r\n } else if (trimmedLink.includes('youtu.be')) {\r\n videoId = trimmedLink.split('youtu.be/')[1];\r\n }\r\n if (videoId) {\r\n return videoId;\r\n }\r\n}\r\n\r\nconst ThumbnailResolutionOptions = ['maxresdefault', 'hqdefault', 'mqdefault', 'sddefault', 'default'] as const;\r\n\r\ntype TThumbnailResolution = typeof ThumbnailResolutionOptions[number];\r\n\r\nexport function getYoutubeThumbNail(videoId: string, resolution: TThumbnailResolution = 'maxresdefault'): string {\r\n return `https://img.youtube.com/vi/${videoId}/${resolution}.jpg`;\r\n}\r\n\r\ntype TThumbnailprops = {\r\n showThumbnail: boolean;\r\n thumbnailImgSrc: string | undefined;\r\n};\r\n\r\nexport function getThumbnailProps(link: string, resolution?: TThumbnailResolution): TThumbnailprops {\r\n const videoID = getYoutubeVideoId(link);\r\n if (!videoID) {\r\n return { showThumbnail: false, thumbnailImgSrc: undefined };\r\n }\r\n return { showThumbnail: true, thumbnailImgSrc: getYoutubeThumbNail(videoID, resolution) };\r\n}\r\n\r\nfunction checkAndhandleSrcSet(imgElement: HTMLImageElement, currentres, replaceres) {\r\n if (imgElement.parentElement?.tagName === 'PICTURE') {\r\n const pictureChildrens = Array.from(imgElement.parentElement.children);\r\n for (const element of pictureChildrens) {\r\n if (element.tagName === 'SOURCE' && (element as HTMLSourceElement).srcset.indexOf(currentres) > 0) {\r\n (element as HTMLSourceElement).srcset = (element as HTMLSourceElement).srcset.replace(currentres, replaceres);\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport function handleThumbnailImage(event, isVideo = false, imgElement: HTMLImageElement | null = null): void {\r\n if (!isVideo) return;\r\n\r\n const img = imgElement || event?.target;\r\n const imgUrl = img.src;\r\n\r\n if (img.naturalWidth === 120 && img.naturalHeight === 90) {\r\n for (let i = 0, len = ThumbnailResolutionOptions.length - 1; i < len; i++) {\r\n if (img.currentSrc.indexOf(ThumbnailResolutionOptions[i]) > 0) {\r\n img.src = imgUrl.replace(ThumbnailResolutionOptions[i], ThumbnailResolutionOptions[i + 1]);\r\n checkAndhandleSrcSet(img, ThumbnailResolutionOptions[i], ThumbnailResolutionOptions[i + 1]);\r\n break;\r\n }\r\n }\r\n }\r\n}\r\n","import React, { useEffect, useRef, useState, FC } from 'react';\r\nimport Helmet from 'react-helmet';\r\n\r\nimport { BreakpointsInPx } from '../../../../../constants/breakpoints.constants';\r\nimport { handleThumbnailImage } from '../../../../../utils/youtubeUtils';\r\nimport { TContentHubImageProps } from '../../types/contentHubImage.types';\r\n\r\nconst ContentHubImage: FC = ({\r\n desktopRendition,\r\n desktopSDRendition,\r\n tabletLandscapeRendition,\r\n tabletRendition,\r\n mobileRendition,\r\n alt,\r\n imageClassName,\r\n pictureClassName,\r\n imageStyle,\r\n pictureStyle,\r\n disableLazyLoad,\r\n prioritize,\r\n onClick,\r\n onTouchStart,\r\n onTouchEnd,\r\n onLoad,\r\n isVideoThumbnail,\r\n}) => {\r\n const [imageLoaded, setImageLoaded] = useState(false);\r\n const imageRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (imageLoaded || !imageRef.current || !isVideoThumbnail) return;\r\n handleThumbnailImage(null, isVideoThumbnail, imageRef.current);\r\n setImageLoaded(() => true);\r\n }, [isVideoThumbnail, imageRef, isVideoThumbnail]);\r\n\r\n const getDefaultRenditionsAndBreakpoint = () => {\r\n let defaultRenditions = '';\r\n let defaultBreakpoint = '';\r\n\r\n if (desktopRendition?.url) {\r\n defaultRenditions = desktopRendition.url;\r\n defaultBreakpoint = BreakpointsInPx.xxl;\r\n } else if (desktopSDRendition?.url) {\r\n defaultRenditions = desktopSDRendition.url;\r\n defaultBreakpoint = BreakpointsInPx.xl;\r\n } else if (tabletRendition?.url) {\r\n defaultRenditions = tabletRendition.url;\r\n defaultBreakpoint = BreakpointsInPx.lg;\r\n } else if (tabletLandscapeRendition?.url) {\r\n defaultRenditions = tabletLandscapeRendition.url;\r\n defaultBreakpoint = BreakpointsInPx.md;\r\n } else if (mobileRendition?.url) {\r\n defaultRenditions = mobileRendition.url;\r\n defaultBreakpoint = BreakpointsInPx.sm;\r\n }\r\n return [defaultRenditions, defaultBreakpoint];\r\n };\r\n\r\n const [defaultRenditions, defaultBreakpoint] = getDefaultRenditionsAndBreakpoint();\r\n\r\n if (!defaultRenditions) {\r\n return null;\r\n }\r\n\r\n const handleOnLoad = (event) => {\r\n onLoad?.(event);\r\n handleThumbnailImage(event, isVideoThumbnail);\r\n setImageLoaded(() => true);\r\n };\r\n\r\n return (\r\n <>\r\n {prioritize && (\r\n \r\n {mobileRendition?.url && (\r\n \r\n )}\r\n {tabletRendition?.url && (\r\n \r\n )}\r\n {tabletLandscapeRendition?.url && (\r\n \r\n )}\r\n {desktopSDRendition?.url && (\r\n \r\n )}\r\n {desktopRendition?.url && }\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ContentHubImage;\r\n","import { Image as SitecoreImage } from '@sitecore-jss/sitecore-jss-react';\r\nimport React, { useEffect, useRef, useState, FC } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { iconSize } from '../../../../../constants/icon.constants';\r\nimport useEEActive from '../../../../../hooks/useEEActive';\r\nimport { TImageField } from '../../../../../types/types';\r\nimport { triggerCTRLCmdAndClick } from '../../../../../utils/macOs.utils';\r\nimport { documentService } from '../../../../../utils/window.utils';\r\nimport Icon from '../../../icon';\r\nimport { TEditorialImageProps, TImageFieldOrString, TTransformations } from '../../types/editorialImage.types';\r\nimport ContentHubImage from '../contentHubImage';\r\nimport useSitecoreContext from '../../../../../hooks/useSitecoreContext';\r\n\r\nconst Image: FC = (props: TEditorialImageProps) => {\r\n const {\r\n mobileImage,\r\n tabletImage,\r\n desktopImage,\r\n mobileTransformation,\r\n tabletTransformation,\r\n desktopTransformation,\r\n disableLazyLoad,\r\n alt,\r\n cssClassPictureEl = '',\r\n cssClassImageEl = '',\r\n style,\r\n prioritize = false,\r\n onClick,\r\n onTouchStart,\r\n onTouchEnd,\r\n onLoad,\r\n isVideoThumbnail,\r\n } = props;\r\n\r\n const getUrl = (image: TImageFieldOrString): string => {\r\n if (typeof image === 'object' && image?.value?.src) return image?.value?.src;\r\n if (typeof image === 'string') return image;\r\n\r\n return '';\r\n };\r\n\r\n const desktopFallbackImageUrl = getUrl(tabletImage) || getUrl(mobileImage);\r\n const tabletFallbackImageUrl = getUrl(desktopImage) || getUrl(mobileImage);\r\n const mobileFallbackImageUrl = getUrl(tabletImage) || getUrl(desktopImage);\r\n\r\n const getSrcImage = (image: TImageFieldOrString, fallbackImageUrl: string, transformation?: TTransformations): string => {\r\n let url = getUrl(image);\r\n\r\n if (!transformation) {\r\n return url;\r\n }\r\n\r\n if (!url) {\r\n url = fallbackImageUrl;\r\n }\r\n\r\n if (url) {\r\n url = url.includes('?') ? `${url}&t=${transformation}` : `${url}?t=${transformation}`;\r\n }\r\n\r\n return url;\r\n };\r\n\r\n const getImageDimensions = (image: string | TImageFieldOrString | null): { width; height } => {\r\n if (typeof image === 'string') return { width: null, height: null };\r\n return {\r\n width: image?.value?.width || null,\r\n height: image?.value?.height || null,\r\n };\r\n };\r\n\r\n const getAlt = (image: TImageFieldOrString): string => {\r\n if (typeof image === 'string') return '';\r\n return image?.value?.alt as string || '';\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nconst EditImageEE: FC = ({ image, mobileImage }) => {\r\n const getImage = (picture): TImageField => {\r\n let img: TImageField;\r\n\r\n if (typeof picture === 'string') {\r\n img = {\r\n value: {\r\n src: picture,\r\n },\r\n };\r\n } else {\r\n img = picture;\r\n }\r\n\r\n return img;\r\n };\r\n\r\n return (\r\n <>\r\n {image && (\r\n

\r\n

Edit Desktop image

\r\n \r\n

\r\n )}\r\n {mobileImage && (\r\n

\r\n

Edit Mobile image

\r\n \r\n

\r\n )}\r\n \r\n );\r\n};\r\n\r\nconst EditorialImage: FC = (props: TEditorialImageProps) => {\r\n const {sitecoreContext} = useSitecoreContext();\r\n const isEEActive = useEEActive();\r\n const [isOpenEditImageModal, setIsOpenEditImageModal] = useState(false);\r\n const popUpClassName = 'generic-modal-dialog';\r\n const modalDialogConatinerClass = 'modal-dialog__overlay';\r\n const modalDialogContentlass = 'modal-dialog';\r\n const modalDialogCloseBtnClass = 'modal-dialog__close-button';\r\n const editorRef = useRef(null);\r\n const ctaCloseTriggerRef = useRef(null);\r\n const ctaOpenTriggerRef = useRef(null);\r\n const [modalContainer, setModalContainerEl] = useState(documentService()?.getElementById?.('modal-EE-section'));\r\n\r\n useEffect(() => {\r\n if (!isEEActive) return;\r\n\r\n setModalContainerEl(documentService()?.getElementById?.('modal-EE-section'));\r\n\r\n const startStopBodyScroll = (isScrollable: boolean): void => {\r\n const docElement = documentService();\r\n if (!docElement?.body) return;\r\n return isScrollable ? docElement.body.classList.remove('body--with-pop-up') : docElement.body.classList.add('body--with-pop-up');\r\n };\r\n\r\n const openCTA = (event): void => {\r\n triggerCTRLCmdAndClick(event, () => {\r\n editorRef.current?.classList.add('editor_popup--visible');\r\n startStopBodyScroll(false);\r\n setIsOpenEditImageModal(true);\r\n });\r\n };\r\n\r\n const closeCTA = (event): void => {\r\n triggerCTRLCmdAndClick(event, () => {\r\n editorRef.current?.classList.remove('editor_popup--visible');\r\n startStopBodyScroll(true);\r\n setIsOpenEditImageModal(false);\r\n });\r\n };\r\n\r\n ctaOpenTriggerRef.current?.addEventListener('click', openCTA);\r\n ctaCloseTriggerRef.current?.addEventListener('click', closeCTA);\r\n\r\n return (): void => {\r\n ctaOpenTriggerRef.current?.removeEventListener('click', openCTA); /* eslint-disable-line */\r\n ctaCloseTriggerRef.current?.removeEventListener('click', closeCTA); /* eslint-disable-line */\r\n };\r\n }, [isOpenEditImageModal, isEEActive]);\r\n\r\n if (isEEActive && sitecoreContext)\r\n return (\r\n <>\r\n

\r\n \r\n \r\n {modalContainer &&\r\n ReactDOM.createPortal(\r\n

\r\n \r\n

\r\n

,\r\n modalContainer\r\n )}\r\n

\r\n \r\n );\r\n\r\n return ;\r\n};\r\n\r\nexport default React.memo(EditorialImage);\r\n","import React, { FC } from 'react';\r\n\r\nimport EditorialImage from './components/editorialImage';\r\nimport { default as ProductImage } from './components/contentHubImage';\r\nimport { TImageComponentProps } from './types/picture.types';\r\n\r\nconst Picture: FC = ({ productImageProps, editorialImageProps }) => {\r\n if (editorialImageProps) {\r\n return ;\r\n }\r\n\r\n if (productImageProps) {\r\n return ;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport default Picture;\r\n","import React, { FC } from 'react';\r\nimport CustomExternalAnchor from '../../../../@shared/customExternalAnchor';\r\nimport { CustomText } from '../../../../@shared/customText';\r\nimport Picture from '../../../../@shared/picture';\r\nimport { TSingleCard } from '../../../types/blogNews.types';\r\n\r\nconst Card: FC = (props): JSX.Element => {\r\n const { isEE, image, mobileImage, title, link, isGradientDisabled, textColor, cardHeadingTag } = props;\r\n return (\r\n <>\r\n \r\n

\r\n \r\n {isEE ? (\r\n \r\n ) : (\r\n link?.value?.text && {link?.value?.text}\r\n )}\r\n

\r\n \r\n );\r\n};\r\n\r\nexport default Card;\r\n","import React, { memo } from 'react';\r\nimport { CardModel } from '../../../../lib/shared-models/card.model';\r\nimport { CardProps } from '../../../../types/types';\r\nimport RoutableSitecoreLink from '../../../@shared/routableSitecoreLink';\r\nimport { targetLinkdsk } from '../../../../utils/targetDskLink';\r\nimport useMediaQuery from '../../../../lib/custom-hooks/useMediaQuery';\r\nimport { BreakpointsInPx } from '../../../../constants/breakpoints.constants';\r\nimport Card from './components/card';\r\n\r\nconst StoriesCard = (props: CardProps & { onClick; cardHeadingTag; isGradientDisabled; textColor }): JSX.Element => {\r\n const isEE = props.sitecoreContext?.pageEditing;\r\n const model = new CardModel(props);\r\n const isDesktop = useMediaQuery(`(min-width: ${BreakpointsInPx['md']})`);\r\n\r\n const disable = model.link?.value?.href ? '' : 'stories-card--disable';\r\n return (\r\n <>\r\n {isEE ? (\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 memo(StoriesCard);\r\n","function isEmptyResponse(props) {\r\n const hasError = !!(props?.fields?.error || props?.fields?.apiData?.error);\r\n if (hasError) {\r\n return false;\r\n }\r\n const data = props?.fields?.apiData;\r\n // if the component has hidden = true we do not have to show the component\r\n if (!data || Object.keys(data).length === 0) return false;\r\n if (!(data && data.constructor === Object && Object.keys(data).length === 0)) return !(data && 'hidden' in data && data.hidden);\r\n return false;\r\n}\r\n\r\nexport { isEmptyResponse };\r\n","import { useCallback, useEffect } from 'react';\r\nimport { ComponentRendering } from '@sitecore-jss/sitecore-jss-react';\r\nimport { isEmptyResponse } from '../utils/checkEmptyResponse';\r\nimport { formatComponentNumber, googleDataLayerPush } from '../utils/analytics';\r\nimport useSitecoreContext from './useSitecoreContext';\r\n\r\nconst exceptComponentNames = [\r\n 'BreadcrumbBar',\r\n 'GenericPopUp',\r\n 'NavigationBarAnchorComponent',\r\n 'ProductBreadcrumbBar',\r\n 'ProductSeoTags',\r\n 'ProductSeriesNavigationBar',\r\n 'ProductSeriesDetailNavigationOverview',\r\n 'QuickLinks',\r\n 'ProductModelNavigation',\r\n];\r\n\r\nconst useAnalyticsActionOnScroll = (\r\n rendering: ComponentRendering,\r\n refElement: React.MutableRefObject,\r\n title: string,\r\n template: string\r\n): void => {\r\n let isActionExecuted = false;\r\n const {sitecoreContext} = useSitecoreContext();\r\n\r\n const isEditorialEmptyResponse = (component: any, excludeComponentNames: string[]) => {\r\n const fields = component?.fields;\r\n if (Object.keys(fields).length > 0 && !excludeComponentNames.includes(component?.componentName)) {\r\n return (\r\n component?.fields?.items?.length > 0 ||\r\n component?.fields?.apiData?.items?.length > 0 ||\r\n component?.fields?.innerComponents?.length > 0\r\n );\r\n }\r\n return Object.keys(fields).length > 0;\r\n };\r\n\r\n const isProductEmptyResponse = (component: any, excludeComponentNames: string[]): boolean => {\r\n if (isEmptyResponse(component) && !excludeComponentNames.includes(component?.componentName)) {\r\n const apiDataLength =\r\n component?.fields?.apiData?.items?.length > 0 ||\r\n component?.fields?.apiData?.innerComponents?.length > 0 ||\r\n component?.fields?.apiData?.models?.length > 0 ||\r\n component?.fields?.apiData?.brochures?.length > 0 ||\r\n component?.fields?.apiData?.lines?.items?.length > 0 ||\r\n component?.fields?.apiData?.series?.items?.length > 0;\r\n const isChildrenPopulated = component?.componentName?.toLowerCase()?.includes('compatible')\r\n ? component?.fields?.apiData?.items?.some((e) => e?.items?.length > 0)\r\n : true;\r\n return apiDataLength && isChildrenPopulated;\r\n }\r\n return isEmptyResponse(component);\r\n };\r\n\r\n const isEmptyResponseValue = (component: any): boolean => {\r\n //components which doesn't have items array\r\n const excludeComponentNames = [\r\n 'EventsListing', // has items array but will be visible even if items are empty\r\n 'EventDetail',\r\n 'LiveEventDetail',\r\n 'NewsListing', // has items array but will be visible even if items are empty\r\n 'NewsDetail',\r\n 'ProductHeroBanner',\r\n 'ProductHeroBannerSeriesDetail',\r\n 'ProductModelDetailHeroSection',\r\n 'ProductSeriesDetailTestimonial',\r\n 'ProductSeriesOverview',\r\n 'SmallHero',\r\n 'SplitModule',\r\n 'TextModule',\r\n 'Footer',\r\n ];\r\n if (component?.componentName.startsWith('Product')) {\r\n return isProductEmptyResponse(component, excludeComponentNames);\r\n } else {\r\n return isEditorialEmptyResponse(component, excludeComponentNames);\r\n }\r\n };\r\n\r\n const isComponentsValid = (component: any) => !!component.uid && isEmptyResponseValue(component);\r\n const isComponentInTheList = (component: any, componentList: Array) => componentList.indexOf(component.componentName) >= 0;\r\n\r\n const getComponentsFromGenericPopUp = (component: any) => {\r\n if (isComponentInTheList(component, ['GenericPopUp'])) {\r\n return component.placeholders?.['jss-popup'];\r\n }\r\n\r\n if (component?.placeholders?.['jss-generic-popup']?.length <= 0) {\r\n return [];\r\n }\r\n\r\n return (\r\n component?.placeholders?.['jss-generic-popup']\r\n ?.map((genericPopUpComponent) => genericPopUpComponent.placeholders?.['jss-popup'])\r\n .filter((newcomponent) => newcomponent)\r\n .flat(1) ?? []\r\n );\r\n };\r\n\r\n const isInOverlay = (newSitecoreContext) => {\r\n if (!rendering) {\r\n return true;\r\n }\r\n\r\n const componentList = newSitecoreContext?.route.placeholders['jss-main'];\r\n\r\n const genericPopUpsComponentIds = componentList\r\n .map((component) => getComponentsFromGenericPopUp(component))\r\n .flat(1)\r\n .map((component) => component.uid);\r\n\r\n const genericPopUpsComponentsIndex = genericPopUpsComponentIds.indexOf(rendering.uid);\r\n\r\n return genericPopUpsComponentsIndex >= 0;\r\n };\r\n\r\n const getComponentNumber = (sitecoreContext, inOverlayValue) => {\r\n if (inOverlayValue) {\r\n return '00-overlay';\r\n }\r\n const jssMain = sitecoreContext?.route?.placeholders['jss-main'];\r\n const jssFooter = sitecoreContext?.route.placeholders['jss-footer'];\r\n const componentList = [...jssMain, ...jssFooter];\r\n\r\n const validComponentIds = componentList\r\n .filter((component) => isComponentsValid(component))\r\n .filter((component) => !isComponentInTheList(component, exceptComponentNames))\r\n .map((component) => component.uid);\r\n\r\n const componentIndex = validComponentIds.indexOf(rendering.uid);\r\n\r\n return formatComponentNumber(componentIndex + 1);\r\n };\r\n\r\n const inOverlay = isInOverlay(sitecoreContext);\r\n const elementNumber = getComponentNumber(sitecoreContext, inOverlay);\r\n\r\n const callAnalyticsAction = () => {\r\n if (isActionExecuted) {\r\n return;\r\n }\r\n\r\n isActionExecuted = true;\r\n\r\n const dataLayerTemplate = inOverlay ? `Overlay ${template}` : template;\r\n\r\n const dataLayerData = {\r\n event: 'visible',\r\n _clear: true,\r\n 'data-tag-meta': {\r\n type: 'component',\r\n title: title || dataLayerTemplate,\r\n template: dataLayerTemplate,\r\n componentNo: elementNumber,\r\n },\r\n };\r\n\r\n googleDataLayerPush(dataLayerData);\r\n };\r\n\r\n const handleIfIsIntersectedElement = (element) => {\r\n if (!element) return;\r\n\r\n if (element.isIntersecting) {\r\n callAnalyticsAction();\r\n }\r\n };\r\n\r\n const handleIntersector = (entries) => {\r\n entries.forEach((element) => handleIfIsIntersectedElement(element));\r\n };\r\n\r\n const analyticsActionCallback = useCallback(handleIntersector, []);\r\n\r\n useEffect(() => {\r\n if (!refElement?.current) return;\r\n const observer = new IntersectionObserver(analyticsActionCallback, { threshold: 0.01 });\r\n observer.observe(refElement?.current);\r\n\r\n return (): void => observer.disconnect();\r\n }, [analyticsActionCallback, refElement]);\r\n};\r\n\r\nexport default useAnalyticsActionOnScroll;\r\n","import React, { useRef } from 'react';\r\nimport useAnalyticsActionOnScroll from '../../../hooks/useAnalyticsActionOnScroll';\r\n\r\ntype TAnalyticsVisibleEvent = {\r\n children: any;\r\n rendering: any;\r\n title: any;\r\n template: any;\r\n className?: string;\r\n styles?: any;\r\n};\r\n\r\nconst AnalyticsVisibleEvent = (props: TAnalyticsVisibleEvent) => {\r\n const { children, rendering, title, template, className, styles } = props;\r\n const elementRef = useRef(null);\r\n\r\n useAnalyticsActionOnScroll(rendering, elementRef, title, template);\r\n\r\n return (\r\n

\r\n {children}\r\n

\r\n );\r\n};\r\n\r\nexport default AnalyticsVisibleEvent;\r\n","import React, { FC } from 'react';\r\nimport useEEActive from '../../../hooks/useEEActive';\r\n\r\nconst UnreleasedComponent: FC = () => {\r\n const isEEActive = useEEActive();\r\n\r\n if (isEEActive) {\r\n return (\r\n

\r\n

This component was unreleased so will be not visible in the page until will be enabled by admin/developer team.

\r\n

\r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport default UnreleasedComponent;\r\n","import React, { useCallback, useEffect, useRef, useState, FC } from 'react';\r\nimport Slider from 'react-slick';\r\nimport { withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';\r\nimport { documentService } from '../../utils/window.utils';\r\nimport { BlogNewsModel } from './models/blognews.model';\r\nimport { TBlogNewsProps } from './types/blogNews.types';\r\nimport Heading from '../@shared/heading';\r\nimport CarouselArrow from '../@shared/carouselArrow';\r\nimport StoriesCard from './components/storiesCard';\r\nimport { BreakpointsInPx } from '../../constants/breakpoints.constants';\r\nimport useMediaQuery from '../../lib/custom-hooks/useMediaQuery';\r\nimport AnalyticsVisibleEvent from '../@shared/analyticsVisibleEvent';\r\nimport { googleClickCtaEvent } from '../../utils/analytics';\r\nimport UnreleasedComponent from '../@shared/unreleasedComponent';\r\n\r\ntype TArrowDomObj = {\r\n leftArrow: HTMLButtonElement | null;\r\n rightArrow: HTMLButtonElement | null;\r\n};\r\n\r\nconst BlogNews: FC = (props) => {\r\n const model = new BlogNewsModel(props);\r\n const isDesktop = useMediaQuery(`(min-width: ${BreakpointsInPx['md']})`, true);\r\n const [arrowDomObj, setArrowDomObj] = useState({ leftArrow: null, rightArrow: null });\r\n const cardWidthRef = useRef(null);\r\n\r\n const findSlidesToShow = useCallback((): number => {\r\n const DESKTOP_CARD_WIDTH = 200;\r\n const DESKTOP_CARD_MARGIN = 16;\r\n const MOBILE_CARD_WIDTH = 163;\r\n const MOBILE_CARD_MARGIN = 8;\r\n const cardContainerWidth = cardWidthRef?.current?.clientWidth || 1680;\r\n const cardWidth = isDesktop ? DESKTOP_CARD_WIDTH : MOBILE_CARD_WIDTH;\r\n const cardMargin = isDesktop ? DESKTOP_CARD_MARGIN : MOBILE_CARD_MARGIN;\r\n const slidesCanBeShown = Math.floor(cardContainerWidth / (cardWidth + cardMargin));\r\n\r\n return model.cards.length > slidesCanBeShown ? slidesCanBeShown || 7 : model.cards.length;\r\n }, [isDesktop, model.cards.length]);\r\n\r\n const storiesMapper = useCallback(\r\n (blogModel: BlogNewsModel) => {\r\n return blogModel.cards.map((item) => (\r\n

\r\n \r\n googleClickCtaEvent(\r\n 'Link',\r\n item.fields?.link?.value?.text ?? item.fields?.link?.value?.title,\r\n item.fields?.title?.value || ''\r\n )\r\n }\r\n cardHeadingTag={model?.cardHeadingTitleTag}\r\n isGradientDisabled={model?.isGradientDisabled}\r\n textColor={model?.textColor}\r\n />\r\n

\r\n ));\r\n },\r\n [model, props.sitecoreContext] //eslint-disable-line\r\n );\r\n\r\n const [slidesToShow, setSlidesToShow] = useState(4.5);\r\n useEffect(() => setSlidesToShow(findSlidesToShow()), [cardWidthRef, findSlidesToShow]);\r\n\r\n const settings = {\r\n slidesToShow: slidesToShow,\r\n arrows: true,\r\n infinite: false,\r\n variableWidth: true,\r\n slidesToScroll: 1,\r\n nextArrow: ,\r\n prevArrow: ,\r\n afterChange: (index): void => {\r\n if (arrowDomObj.leftArrow?.style) {\r\n arrowDomObj.leftArrow.style.visibility = index === 0 ? 'hidden' : 'visible';\r\n }\r\n if (arrowDomObj.rightArrow?.style) {\r\n arrowDomObj.rightArrow.style.visibility = index === model.cards.length - slidesToShow ? 'hidden' : 'visible';\r\n }\r\n },\r\n };\r\n\r\n useEffect(() => {\r\n const leftArrow: HTMLButtonElement = documentService().querySelector('.blog-news .carousel-arrow--left');\r\n const rightArrow: HTMLButtonElement = documentService().querySelector('.blog-news .carousel-arrow--right');\r\n setArrowDomObj({ leftArrow, rightArrow });\r\n\r\n // hiding left arrow on load\r\n if (leftArrow?.style) {\r\n leftArrow.style.visibility = 'hidden';\r\n }\r\n }, []);\r\n\r\n // Component is unreleased\r\n if (model.isUnreleased) {\r\n return ;\r\n }\r\n\r\n return (\r\n \r\n

\r\n

\r\n \r\n

\r\n {storiesMapper(model)}\r\n

\r\n

\r\n \r\n );\r\n};\r\n\r\nexport default withSitecoreContext()(BlogNews);\r\n","import React, { FC } from 'react';\r\nimport { iconSize } from '../../../../constants/icon.constants';\r\nimport Icon from '../../icon';\r\nimport RoutableNotEditableLink from '../../routableNotEditableLink';\r\nimport { TNavigationBarItemProps } from '../types/navigationBarItem.types';\r\n\r\nconst NavigationItems: FC = (props) => {\r\n const { isLast, item, isNotClickable, onClick } = props;\r\n\r\n const chevronRightIcon = ;\r\n\r\n if (isLast) {\r\n return <>{item.text};\r\n } else if (isNotClickable) {\r\n return (\r\n <>\r\n {item.text}\r\n {chevronRightIcon}\r\n \r\n );\r\n } else {\r\n return (\r\n <>\r\n \r\n {item.text}\r\n \r\n {chevronRightIcon}\r\n \r\n );\r\n }\r\n};\r\n\r\nexport default NavigationItems;\r\n","import React, { FC } from 'react';\r\nimport NavigationItems from './components/navigationItem';\r\nimport { TNavigationBarItemProps } from './types/navigationBarItem.types';\r\n\r\nconst NavigationBarItem: FC = ({ item, isLast = false, extraClassName, onClick }) => {\r\n const isNotClickable = item?.url?.trim().length === 0;\r\n\r\n return (\r\n <>\r\n {item.text && (\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default NavigationBarItem;\r\n","import { ComponentRendering } from '@sitecore-jss/sitecore-jss-react';\r\nimport { BreadcrumbList } from 'schema-dts';\r\nimport { helmetJsonLdProp } from 'react-schemaorg';\r\nimport { TNavigationBarBreadcrumbItem } from '../../navigationBarItem/types/navigationBarItem.types';\r\nimport { Params, TNavigationBarFields, TNavigationBarProps, } from '../types/breadcrumbBar.types';\r\nimport { windowService } from '../../../../utils/window.utils';\r\nimport { TJsonLDObj } from '../../../../types/types';\r\n\r\nexport class NavigationBarModel {\r\n private readonly fields?: TNavigationBarFields | null;\r\n private readonly params?: Params;\r\n private readonly rendering?: ComponentRendering;\r\n\r\n constructor(props: TNavigationBarProps) {\r\n this.fields = props?.fields || null;\r\n this.params = props?.params || null;\r\n this.rendering = props?.rendering;\r\n }\r\n\r\n get thumbnailEE(): string {\r\n return this.fields?.itemData?.thumbnail || '';\r\n }\r\n\r\n get componentName(): string {\r\n return this.rendering?.componentName || '';\r\n }\r\n\r\n get breadcrumbItems(): Array {\r\n return this.fields?.itemData?.fields?.breadcrumbs || [];\r\n }\r\n\r\n get productsPageLabel(): string | undefined {\r\n return this.fields?.itemData?.fields?.productsPageTitle;\r\n }\r\n\r\n get productsPageUrl(): string | undefined {\r\n return this.fields?.itemData?.fields?.productsPageLink;\r\n }\r\n\r\n get backButtonLabel(): string | undefined {\r\n return this.fields?.itemData?.fields?.backButtonText;\r\n }\r\n\r\n get backButtonUrl(): string | undefined {\r\n return this.fields?.itemData?.fields?.backButtonUrl;\r\n }\r\n\r\n get isPlm(): boolean {\r\n return this.params?.isPLM === '1';\r\n }\r\n\r\n get breadcrumbJSONLD(): TJsonLDObj {\r\n const origin = windowService()?.location?.origin;\r\n return helmetJsonLdProp({\r\n '@context': 'https://schema.org',\r\n '@type': 'BreadcrumbList',\r\n itemListElement: this.breadcrumbItems.map((item, index) => ({\r\n '@type': 'ListItem',\r\n position: index + 1,\r\n name: item.text,\r\n item: `${origin}${item.url}`,\r\n })),\r\n });\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n}\r\n","import { documentService } from './window.utils';\r\nimport useSitecoreContext from '../hooks/useSitecoreContext';\r\n\r\nfunction parseHTML(html) {\r\n const divElement = documentService()?.createElement?.('div');\r\n if (!divElement) return;\r\n divElement.innerHTML = html;\r\n return divElement;\r\n}\r\n\r\nfunction serializeHTML(element) {\r\n const container = documentService()?.createElement?.('div');\r\n if (!container) return;\r\n container.appendChild(element.cloneNode(true));\r\n return container?.innerHTML;\r\n}\r\n\r\nfunction useAppendRootToRichTextInternalLinks(richText?: string) {\r\n const {sitecoreContext} = useSitecoreContext();\r\n const hostAppRoot: string | undefined = sitecoreContext?.hostAppRoot;\r\n if (!richText || !hostAppRoot) return richText;\r\n\r\n const baseUrl: string = hostAppRoot.endsWith('/') ? hostAppRoot.slice(0, -1) : hostAppRoot;\r\n const parsedHTML = parseHTML(richText);\r\n const anchorTagArr = parsedHTML?.getElementsByTagName?.('a') as HTMLCollectionOf;\r\n if (!anchorTagArr) return richText;\r\n\r\n const anchorTags = Array.from(anchorTagArr);\r\n\r\n for (const anchorTag of anchorTags) {\r\n const href = anchorTag?.getAttribute?.('href');\r\n if (href?.startsWith('/')) {\r\n anchorTag?.setAttribute?.('href', `${baseUrl}${href}`);\r\n }\r\n }\r\n\r\n const serializedHTML = serializeHTML(parsedHTML);\r\n return serializedHTML;\r\n}\r\n\r\nexport { useAppendRootToRichTextInternalLinks as appendRootToRichTextInternalLinks };\r\n","import useSitecoreContext from '../hooks/useSitecoreContext';\r\n\r\nfunction useAppendRootToInternalLink(link?: string) {\r\n const {sitecoreContext } = useSitecoreContext();\r\n const hostAppRoot: string | undefined = (sitecoreContext)?.hostAppRoot;\r\n if (!link || !hostAppRoot || !link.startsWith('/')) return link;\r\n\r\n const baseUrl: string = hostAppRoot.endsWith('/') ? hostAppRoot.slice(0, -1) : hostAppRoot;\r\n return `${baseUrl}${link}`;\r\n}\r\n\r\nexport { useAppendRootToInternalLink as appendRootToInternalLink };\r\n","import { ComponentRendering } from '@sitecore-jss/sitecore-jss-react';\r\nimport {\r\n TContentHubHeroBannerSeriesDetailFields,\r\n TContentHubHeroBannerSeriesDetailModelSummarySpecs,\r\n TContentHubHeroBannerSeriesDetailProps,\r\n} from '../types/productHeroBannerSeriesDetail.types';\r\nimport { TContentHubButton, TRendition } from '../../../types/types';\r\nimport { appendRootToRichTextInternalLinks } from '../../../utils/appendRootToRichTextInternalLinks.utils';\r\nimport { appendRootToInternalLink } from '../../../utils/appendRootToInternalLink.utils';\r\n\r\nexport class ContentHubHeroBannerSeriesDetailModel {\r\n private readonly fields?: TContentHubHeroBannerSeriesDetailFields;\r\n private readonly params?: ComponentParamsGeneral;\r\n private readonly rendering?: ComponentRendering;\r\n\r\n constructor(props: TContentHubHeroBannerSeriesDetailProps) {\r\n this.fields = props?.fields;\r\n this.params = props?.params;\r\n this.rendering = props?.rendering;\r\n }\r\n\r\n get thumbnailEE(): string {\r\n return this.fields?.itemData?.thumbnail || '';\r\n }\r\n\r\n get componentName(): string {\r\n return this.rendering?.componentName || '';\r\n }\r\n\r\n get textColor(): string {\r\n return this.params?.textColor;\r\n }\r\n\r\n get quickSpecsColor(): string {\r\n return this.params?.quickSpecsColor;\r\n }\r\n\r\n get title(): string | undefined {\r\n return this.fields?.apiData?.title;\r\n }\r\n\r\n get description(): string | undefined {\r\n return appendRootToRichTextInternalLinks(this.fields?.apiData?.description);\r\n }\r\n\r\n get eyebrow(): string | undefined {\r\n return this.fields?.apiData?.eyebrow;\r\n }\r\n\r\n get desktopImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_desktop_size1900;\r\n }\r\n\r\n get desktopSDImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_desktop_size1200;\r\n }\r\n\r\n get tabletLandscapeImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_tablet_size1000;\r\n }\r\n\r\n get tabletImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_tablet_size1200;\r\n }\r\n\r\n get mobileImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_mobile_size1100;\r\n }\r\n\r\n get imageAlt(): string {\r\n return this.fields?.apiData?.assets?.[0]?.alt || '';\r\n }\r\n\r\n get primaryLink(): TContentHubButton | undefined {\r\n return this.fields?.apiData?.button1;\r\n }\r\n\r\n get primaryLinkUrl(): string | undefined {\r\n return appendRootToInternalLink(this.primaryLink?.url);\r\n }\r\n\r\n get secondaryLink(): TContentHubButton | undefined {\r\n return this.fields?.apiData?.button2;\r\n }\r\n\r\n get secondaryLinkUrl(): string | undefined {\r\n return appendRootToInternalLink(this.secondaryLink?.url);\r\n }\r\n\r\n get summarySpecs(): Array {\r\n return this.fields?.apiData?.summarySpecs || [];\r\n }\r\n\r\n get labelCost(): string | undefined {\r\n return this.fields?.apiData?.optionalLabel1;\r\n }\r\n\r\n get price(): string | undefined {\r\n return this.fields?.apiData?.msrp;\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n\r\n get isGradientDisabled(): boolean | undefined {\r\n return this.params?.disableGradient === '1';\r\n }\r\n\r\n get enableBuildPriceCTA(): boolean | undefined {\r\n return this.params?.enableBuildPriceCTA === '1';\r\n }\r\n}\r\n","import { ComponentRendering } from '@sitecore-jss/sitecore-jss-react';\r\nimport { TContentHubHeroBannerFields, TContentHubHeroBannerProps } from '../types/productHeroBanner.types';\r\nimport { TContentHubButton, TRendition } from '../../../types/types';\r\nimport { appendRootToRichTextInternalLinks } from '../../../utils/appendRootToRichTextInternalLinks.utils';\r\nimport { appendRootToInternalLink } from '../../../utils/appendRootToInternalLink.utils';\r\n\r\nexport class ProductHeroBannerModel {\r\n private readonly fields?: TContentHubHeroBannerFields;\r\n private readonly params?: ComponentParamsGeneral;\r\n private readonly rendering?: ComponentRendering;\r\n\r\n constructor(props: TContentHubHeroBannerProps) {\r\n this.fields = props?.fields;\r\n this.params = props?.params;\r\n this.rendering = props?.rendering;\r\n }\r\n\r\n get thumbnailEE(): string {\r\n return this.fields?.itemData?.thumbnail || '';\r\n }\r\n\r\n get componentName(): string {\r\n return this.rendering?.componentName || '';\r\n }\r\n\r\n get textColor(): string {\r\n return this.params?.textColor;\r\n }\r\n\r\n get title(): string | undefined {\r\n return this.fields?.apiData?.title;\r\n }\r\n\r\n get description(): string | undefined {\r\n return appendRootToRichTextInternalLinks(this.fields?.apiData?.description);\r\n }\r\n\r\n get eyebrow(): string | undefined {\r\n return this.fields?.apiData?.eyebrow;\r\n }\r\n\r\n get desktopImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_desktop_size1900;\r\n }\r\n\r\n get desktopSDImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_desktop_size1300;\r\n }\r\n\r\n get tabletImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_tablet_size1300;\r\n }\r\n\r\n get tabletLandscapeImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_tablet_size1000;\r\n }\r\n\r\n get mobileImage(): TRendition | undefined {\r\n return this.fields?.apiData?.assets?.[0]?.rendition_mobile_size1100;\r\n }\r\n\r\n get primaryLink(): TContentHubButton | undefined {\r\n return this.fields?.apiData?.button1;\r\n }\r\n\r\n get primaryLinkUrl(): string | undefined {\r\n return appendRootToInternalLink(this.primaryLink?.url);\r\n }\r\n\r\n get secondaryLink(): TContentHubButton | undefined {\r\n return this.fields?.apiData?.button2;\r\n }\r\n\r\n get secondaryLinkUrl(): string | undefined {\r\n return appendRootToInternalLink(this.secondaryLink?.url);\r\n }\r\n\r\n get labelCost(): string | undefined {\r\n return this.fields?.apiData?.optionalLabel1;\r\n }\r\n\r\n get price(): string | undefined {\r\n return this.fields?.apiData?.msrp;\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n\r\n get isGradientDisabled(): boolean | undefined {\r\n return this.params?.disableGradient === '1';\r\n }\r\n\r\n get enableBuildPriceCTA(): boolean | undefined {\r\n return this.params?.enableBuildPriceCTA === '1';\r\n }\r\n}\r\n","export const isEmptyObject = (obj: object | undefined): boolean => {\r\n return Object.keys(obj || {}).length === 0;\r\n};\r\n","import { ComponentRendering } from '@sitecore-jss/sitecore-jss-react';\r\nimport {\r\n TComponentParamsGeneral,\r\n THeadingTag,\r\n TLinkField,\r\n TRendition,\r\n TSitecoreContext,\r\n TStringField,\r\n} from '../../../types/types';\r\nimport { isEmptyObject } from '../../../utils/checkEmptyObject';\r\nimport { TSocialMediaBarProps } from '../../@shared/socialMediaBar/types/socialMediaBar.types';\r\nimport {\r\n ProductSpecialOffersDetailHeroBannerFields,\r\n ProductSpecialOffersDetailHeroBannerProps,\r\n} from '../types/ProductSpecialOffersDetailHeroBanner.types';\r\nimport { TProductImageProps } from '../../@shared/picture/types/picture.types';\r\n\r\nexport class ProductSpecialOffersDetailHeroBannerModel {\r\n private readonly fields?: ProductSpecialOffersDetailHeroBannerFields;\r\n private readonly params?: TComponentParamsGeneral;\r\n private readonly rendering?: ComponentRendering;\r\n private readonly _id?: string;\r\n private readonly context?: TSitecoreContext;\r\n\r\n constructor(props: ProductSpecialOffersDetailHeroBannerProps, sitecoreContext: TSitecoreContext) {\r\n this.fields = props?.fields;\r\n this.params = props?.params;\r\n this.rendering = props?.rendering || undefined;\r\n this._id = props.id;\r\n this.context = sitecoreContext;\r\n }\r\n\r\n get id(): string {\r\n return this._id ?? (this.dataSource as string);\r\n }\r\n\r\n get description(): string | undefined {\r\n return this.fields?.apiData?.shortDescription;\r\n }\r\n\r\n get eyebrow(): string | undefined {\r\n return this.fields?.apiData?.eyebrow;\r\n }\r\n\r\n get desktopImage(): TRendition | undefined {\r\n const asset = this.fields?.apiData?.assets?.[0];\r\n return asset?.rendition_desktop_size1900;\r\n }\r\n\r\n get mobileImage(): TRendition | undefined {\r\n const asset = this.fields?.apiData?.assets?.[0];\r\n return asset?.rendition_mobile_size1000;\r\n }\r\n\r\n get thumbnailEE(): string {\r\n return this.fields?.itemData?.thumbnail || '';\r\n }\r\n\r\n get componentName(): string {\r\n return this.rendering?.componentName || '';\r\n }\r\n\r\n get primaryLink(): TLinkField | undefined {\r\n const button = this.fields?.apiData?.buttonHero1;\r\n if (!button?.url || !button?.label) return undefined;\r\n return {\r\n value: {\r\n href: button.url,\r\n title: button.label,\r\n target: button.target,\r\n },\r\n };\r\n }\r\n\r\n get secondaryLink(): TLinkField | undefined {\r\n const button = this.fields?.apiData?.buttonHero2;\r\n if (!button?.url || !button?.label) return undefined;\r\n return {\r\n value: {\r\n href: button.url,\r\n title: button.label,\r\n target: button.target,\r\n },\r\n };\r\n }\r\n\r\n get title(): string | undefined {\r\n return this.fields?.apiData?.title;\r\n }\r\n\r\n get textColor(): TStringField | undefined {\r\n return this.fields?.['textColor']?.fields?.Key;\r\n }\r\n\r\n get dataSource(): string | undefined {\r\n return this.rendering?.dataSource;\r\n }\r\n\r\n get isGradientDisabled(): boolean | undefined {\r\n return this.params?.disableGradient === '1';\r\n }\r\n\r\n get socialMediaBarProps(): TSocialMediaBarProps | undefined {\r\n return isEmptyObject(this.fields?.socialMediaBar) ? undefined : this.fields?.socialMediaBar;\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n\r\n get headingTag(): THeadingTag {\r\n return (this.params?.headingTag?.toLowerCase() as THeadingTag) || 'h3';\r\n }\r\n\r\n get defaultDesktopImage(): string | undefined {\r\n return this.context?.defaultBackgroundImageParameters?.desktopImageData?.specialOfferDetailHeroBannerCardImage;\r\n }\r\n\r\n get defaultMobileImage(): string | undefined {\r\n return this.context?.defaultBackgroundImageParameters?.mobileImageData?.specialOfferDetailHeroBannerCardImage;\r\n }\r\n\r\n get productImageProps(): TProductImageProps {\r\n return {\r\n mobileRendition: this.mobileImage,\r\n desktopRendition: this.desktopImage,\r\n };\r\n }\r\n}\r\n","import { ImageField, LinkField, StringField, THeadingTag } from '../../../types/types';\r\nimport { HeroBannerFields, HeroBannerProps } from '../types/heroBanner.types';\r\n\r\nexport class HeroBannerModel {\r\n private readonly fields?: HeroBannerFields;\r\n private readonly params?: ComponentParamsGeneral;\r\n\r\n constructor(props: HeroBannerProps) {\r\n this.fields = props?.fields;\r\n this.params = props?.params;\r\n }\r\n\r\n get description(): StringField | undefined {\r\n return this.fields?.description;\r\n }\r\n\r\n get eyebrow(): StringField | undefined {\r\n return this.fields?.eyebrow;\r\n }\r\n\r\n get image(): ImageField | undefined {\r\n return this.fields?.image;\r\n }\r\n\r\n get mobileImage(): ImageField | undefined {\r\n return this.fields?.mobileImage;\r\n }\r\n\r\n get primaryLink(): LinkField | undefined {\r\n return this.fields?.link1;\r\n }\r\n\r\n get secondaryLink(): LinkField | undefined {\r\n return this.fields?.link2;\r\n }\r\n\r\n get title(): StringField | undefined {\r\n return this.fields?.title;\r\n }\r\n\r\n get textColor(): 'Black' | 'White' {\r\n return this.fields?.textColor?.fields?.Key?.value || 'White';\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n\r\n get isGradientDisabled(): boolean | undefined {\r\n return this.params?.disableGradient === '1';\r\n }\r\n\r\n get headingTag(): THeadingTag {\r\n return (this.params?.headingTag?.toLowerCase() as THeadingTag) || 'h1';\r\n }\r\n}\r\n","import { useContext } from 'react';\r\nimport { ComponentRendering, SitecoreContextReactContext } from '@sitecore-jss/sitecore-jss-react';\r\nimport { ContentHubHeroBannerSeriesDetailModel } from '../components/productHeroBannerSeriesDetail/models/productHeroBannerSeriesDetail.model';\r\nimport { TContentHubHeroBannerSeriesDetailProps } from '../components/productHeroBannerSeriesDetail/types/productHeroBannerSeriesDetail.types';\r\nimport { ProductHeroBannerModel } from '../components/productHeroBanner/models/productHeroBanner.model';\r\nimport { TContentHubHeroBannerProps } from '../components/productHeroBanner/types/productHeroBanner.types';\r\nimport { ProductSpecialOffersDetailHeroBannerModel } from '../components/ProductSpecialOffersDetailHeroBanner/models/ProductSpecialOffersDetailHeroBanner.model'\r\nimport { ProductSpecialOffersDetailHeroBannerProps } from '../components/ProductSpecialOffersDetailHeroBanner/types/ProductSpecialOffersDetailHeroBanner.types'\r\nimport { HeroBannerModel } from '../components/smallHero/models/heroBanner.model';\r\nimport useSitecoreContext from './useSitecoreContext';\r\n\r\nconst useHeroBanner = (): { isHeroBannerPresent: boolean; textColor: string } => {\r\n const sitecoreContextFactory = useContext(SitecoreContextReactContext);\r\n const excludedComponentNames = ['ProductSeoTags', 'ProductBreadcrumbBar', 'NavigationBarAnchorComponent', 'BreadcrumbBar'];\r\n const {sitecoreContext} = useSitecoreContext();\r\n const componentList = (sitecoreContext?.route?.placeholders['jss-main'] || []) as ComponentRendering[];\r\n const filteredComponentsList = componentList.filter((component) => !excludedComponentNames.includes(component.componentName));\r\n const heroBannerCompIndex = filteredComponentsList?.findIndex(\r\n (item) =>\r\n item.componentName === 'ProductHeroBannerSeriesDetail' ||\r\n item.componentName === 'ProductHeroBanner' ||\r\n item.componentName === 'SmallHero' ||\r\n item.componentName === 'HeroBanner'||\r\n item.componentName === 'FairHero' ||\r\n item.componentName === 'ProductSpecialOffersDetailHeroBanner'\r\n );\r\n const heroBannerData = filteredComponentsList?.[heroBannerCompIndex] as ComponentRendering;\r\n\r\n if (heroBannerData?.componentName === 'ProductHeroBannerSeriesDetail') {\r\n const sdHeroBannerModel = new ContentHubHeroBannerSeriesDetailModel(\r\n filteredComponentsList[heroBannerCompIndex] as any\r\n // TContentHubHeroBannerSeriesDetailProps -- original type to be referred later\r\n );\r\n\r\n const isHeroBannerPresent = !!(\r\n sdHeroBannerModel?.desktopImage?.url ||\r\n sdHeroBannerModel?.desktopSDImage?.url ||\r\n sdHeroBannerModel?.tabletImage?.url ||\r\n sdHeroBannerModel?.tabletLandscapeImage?.url ||\r\n sdHeroBannerModel?.mobileImage?.url\r\n );\r\n\r\n return {\r\n isHeroBannerPresent,\r\n textColor: sdHeroBannerModel?.textColor,\r\n };\r\n }\r\n\r\n if (heroBannerData?.componentName === 'ProductHeroBanner') {\r\n const pHeroBannerModel = new ProductHeroBannerModel(filteredComponentsList[heroBannerCompIndex] as TContentHubHeroBannerProps);\r\n\r\n const isHeroBannerPresent = !!(\r\n pHeroBannerModel?.desktopImage?.url ||\r\n pHeroBannerModel?.desktopSDImage?.url ||\r\n pHeroBannerModel?.tabletImage?.url ||\r\n pHeroBannerModel?.tabletLandscapeImage?.url ||\r\n pHeroBannerModel?.mobileImage?.url\r\n );\r\n\r\n return { isHeroBannerPresent, textColor: pHeroBannerModel.textColor };\r\n }\r\n\r\n if (heroBannerData?.componentName === 'SmallHero') {\r\n const smallHeroBannerModel = new HeroBannerModel(filteredComponentsList[heroBannerCompIndex] as any);\r\n\r\n const isHeroBannerPresent =\r\n !!(smallHeroBannerModel?.image?.value?.src || smallHeroBannerModel?.mobileImage?.value?.src) && heroBannerCompIndex === 0;\r\n\r\n return { isHeroBannerPresent, textColor: smallHeroBannerModel.textColor };\r\n }\r\n\r\n if (heroBannerData?.componentName === 'HeroBanner') {\r\n return { isHeroBannerPresent: heroBannerCompIndex === 0, textColor: '' };\r\n }\r\n\r\n if (heroBannerData?.componentName === 'ProductSpecialOffersDetailHeroBanner') {\r\n const soHeroBannerModel = new ProductSpecialOffersDetailHeroBannerModel(\r\n filteredComponentsList[heroBannerCompIndex] as ProductSpecialOffersDetailHeroBannerProps,\r\n sitecoreContext\r\n );\r\n\r\n const isHeroBannerPresent = !!(soHeroBannerModel?.desktopImage?.url || soHeroBannerModel?.mobileImage?.url);\r\n\r\n return { isHeroBannerPresent, textColor: soHeroBannerModel?.textColor as string };\r\n }\r\n\r\n return { isHeroBannerPresent: heroBannerCompIndex > -1, textColor: '' };\r\n};\r\n\r\nexport default useHeroBanner;\r\n","import React, { FC } from 'react';\r\nimport { withTranslation, WithTranslation } from 'react-i18next';\r\nimport { withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';\r\nimport Helmet from 'react-helmet';\r\nimport Icon from '../icon';\r\nimport NavigationBarItem from '../navigationBarItem';\r\nimport { NavigationBarModel } from './models/breadcrumbBar.model';\r\nimport { TNavigationBarProps } from './types/breadcrumbBar.types';\r\nimport RoutableNotEditableLink from '../routableNotEditableLink';\r\nimport UnreleasedComponent from '../unreleasedComponent';\r\nimport DictionaryTerm from '../dictionaryTerm';\r\nimport { TNavigationBarBreadcrumbItem } from '../navigationBarItem/types/navigationBarItem.types';\r\nimport useHeroBanner from '../../../hooks/useHeroBanner';\r\nimport { iconSize } from '../../../constants/icon.constants';\r\n\r\nconst SharedBreadcrumbBar: FC = (props: TNavigationBarProps & WithTranslation) => {\r\n const model = new NavigationBarModel(props);\r\n const breadcrumbItems = model?.breadcrumbItems || [];\r\n const { isHeroBannerPresent, textColor } = useHeroBanner();\r\n\r\n const isEditOrPreview = props?.sitecoreContext?.pageState === 'edit' || props?.sitecoreContext?.pageState === 'preview';\r\n const cssClass =\r\n (isHeroBannerPresent ? 'breadcrumb-bar breadcrumb-bar__hero-banner' : 'breadcrumb-bar breadcrumb-bar__no-hero-banner') +\r\n (isEditOrPreview ? ' EE-active' : '');\r\n\r\n const getItemWithModifiedUrl = (item: TNavigationBarBreadcrumbItem): TNavigationBarBreadcrumbItem => {\r\n if (props?.appendQueryParams) {\r\n return {\r\n ...item,\r\n url: props.appendQueryParams(item.url),\r\n };\r\n }\r\n\r\n return item;\r\n };\r\n\r\n const getModifiedBackButtonUrl = (url: string) => {\r\n if (props?.appendQueryParams) {\r\n return props.appendQueryParams(url);\r\n }\r\n return url;\r\n };\r\n\r\n // Component is unreleased\r\n if (model.isUnreleased) {\r\n return ;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default withTranslation()(withSitecoreContext()(SharedBreadcrumbBar));\r\n","import React, { FC } from 'react';\r\nimport { TNavigationBarProps } from '../@shared/sharedBreadcrumbBar/types/breadcrumbBar.types';\r\nimport SharedBreadcrumbBar from '../@shared/sharedBreadcrumbBar';\r\n\r\nconst BreadcrumbBar: FC = (props: TNavigationBarProps) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default BreadcrumbBar;\r\n","import { TExternalComponentFields, TExternalComponentProps } from '../types/externalComponent.types';\r\n\r\nexport class ExternalComponentModel {\r\n private readonly fields: null | TExternalComponentFields;\r\n\r\n constructor(props: TExternalComponentProps) {\r\n this.fields = props?.fields || null;\r\n }\r\n\r\n get url(): string {\r\n return this.fields?.link?.value?.url as string;\r\n }\r\n\r\n get height(): number {\r\n const _height = Number.parseInt(this.fields?.height?.value || '');\r\n\r\n return Number.isNaN(_height) ? 1000 : _height;\r\n }\r\n\r\n get visibilityDelay(): number {\r\n const _visibilityDelay = Number.parseInt(this.fields?.visibilityDelay?.value || '');\r\n\r\n return Number.isNaN(_visibilityDelay) ? 0 : _visibilityDelay;\r\n }\r\n\r\n get isUnreleased(): boolean {\r\n return !!this.fields?.isComponentUnreleased;\r\n }\r\n}\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { ExternalComponentModel } from './models/externalComponent.model';\r\nimport LazySection from '../lazySection';\r\nimport { TExternalComponentProps } from './types/externalComponent.types';\r\nimport { windowService } from '../../../utils/window.utils.js';\r\nimport UnreleasedComponent from '../unreleasedComponent';\r\nimport { googleFormSubmitEvent } from '../../../utils/analytics';\r\n\r\nconst SharedExternalComponent = (props: TExternalComponentProps) => {\r\n const model = new ExternalComponentModel(props);\r\n const { url, height, visibilityDelay } = model;\r\n const [iFrameHeight, setiFrameHeight] = useState(height.toString());\r\n const [isVisible, setIsVisible] = useState(false);\r\n const timer = useRef | null>(null);\r\n\r\n useEffect(() => {\r\n function messageListener(event: MessageEvent) {\r\n if (\r\n event.origin === new URL(url).origin &&\r\n event.data &&\r\n typeof event.data === 'string' &&\r\n event.data.includes('iframeHeightChange')\r\n ) {\r\n const iframeHeight = event.data.replace('iframeHeightChange#=###=###=#', '');\r\n iframeHeight && setiFrameHeight(iframeHeight);\r\n }\r\n }\r\n\r\n windowService().addEventListener('message', messageListener);\r\n\r\n return () => {\r\n windowService().removeEventListener('message', messageListener);\r\n clearTimeout(timer?.current as ReturnType);\r\n };\r\n }, [url]);\r\n\r\n useEffect(() => {\r\n function messageListener(event: MessageEvent): void {\r\n const messageName = 'iframe FormResponse#=###=###=#';\r\n const delimiter = ',';\r\n\r\n if (event.origin === new URL(url).origin && event.data && typeof event.data === 'string' && event.data.includes(messageName)) {\r\n const formSubmitData = event.data.replace(messageName, '');\r\n const dataParts = formSubmitData.split(delimiter);\r\n const statusCode = dataParts[0];\r\n\r\n if (statusCode === '200') {\r\n const hasAttachment = dataParts[1] === '1';\r\n const formName = dataParts[2];\r\n\r\n googleFormSubmitEvent(formName, hasAttachment);\r\n }\r\n }\r\n }\r\n\r\n windowService().addEventListener('message', messageListener);\r\n\r\n return (): void => {\r\n windowService().removeEventListener('message', messageListener);\r\n };\r\n }, []);\r\n\r\n const onLoadHandler = (): void => {\r\n timer.current = setTimeout(() => setIsVisible(true), visibilityDelay);\r\n };\r\n\r\n const iframeStyle = {\r\n height: `${iFrameHeight || height}px`,\r\n opacity: isVisible ? 1 : 0,\r\n };\r\n\r\n // Component is unreleased\r\n if (model.isUnreleased) {\r\n return ;\r\n }\r\n\r\n return (\r\n \r\n

\r\n {/* eslint-disable-next-line */}\r\n \r\n

\r\n \r\n );\r\n};\r\n\r\nexport default SharedExternalComponent;\r\n","import React from 'react';\r\nimport { TExternalComponentProps } from '../@shared/sharedExternalComponent/types/externalComponent.types';\r\nimport SharedExternalComponent from '../@shared/sharedExternalComponent';\r\n\r\nconst BuildAndPriceExternalLink = (props: TExternalComponentProps) => {\r\n return \r\n};\r\n\r\nexport default BuildAndPriceExternalLink;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nconst Dots = (props: { class: string }): JSX.Element => {\r\n return ;\r\n};\r\n\r\nconst CustomCarouselDots = (props: {\r\n cardsCount: number;\r\n activeCard: number;\r\n hasAnimation?: boolean;\r\n isDarkMode?: boolean;\r\n}): JSX.Element => {\r\n const dotsArray: JSX.Element[] = [];\r\n const [min, updateMin] = useState(0);\r\n const [max, updateMax] = useState(5); // min 5 cards to be shown\r\n const [changes, updateChanges] = useState(0);\r\n\r\n useEffect(() => {\r\n let initialMax = max;\r\n let initialMin = min;\r\n\r\n if (props.activeCard < initialMin) {\r\n initialMin = props.activeCard;\r\n initialMax = initialMin + 4;\r\n if (initialMax > changes + 1) {\r\n initialMax = changes + 1;\r\n }\r\n }\r\n if (props.activeCard > initialMax) {\r\n initialMax = props.activeCard;\r\n initialMin = initialMax - 4;\r\n if (initialMin < 0) {\r\n initialMin = 0;\r\n }\r\n }\r\n updateMax(initialMax);\r\n updateMin(initialMin);\r\n updateChanges(changes + 1);\r\n }, [props.activeCard, max, min]); // eslint-disable-line\r\n\r\n const getIndicatorClass = (ref: number): string => {\r\n if (ref === props.activeCard) {\r\n return 'active';\r\n }\r\n if (ref >= min && ref <= max) {\r\n return 'std';\r\n }\r\n if (ref === min - 1 || ref === max + 1) {\r\n return 'small';\r\n }\r\n return 'hidden';\r\n };\r\n\r\n for (let i = 1; i <= props.cardsCount; i++) {\r\n dotsArray.push();\r\n }\r\n return (\r\n \r\n {dotsArray}\r\n \r\n );\r\n};\r\n\r\nexport default CustomCarouselDots;\r\n","import React from 'react';\r\nimport CustomCarouselDots from '../../@shared/customCarouselDots';\r\n\r\nconst appendDots = (props: { dots: JSX.Element[]; cardsCount: number; activeCardIndex: number; showCustomDots: boolean }): JSX.Element => {\r\n const { dots, cardsCount, activeCardIndex, showCustomDots } = props;\r\n if (showCustomDots) {\r\n return ;\r\n }\r\n return

{dots};\r\n};\r\n\r\nexport default appendDots;\r\n","import React, { FC, Children } from 'react';\r\nimport ctaEnums from '../../../enums/CTA.enums';\r\n\r\nconst ctaModifierClasses = {\r\n [ctaEnums.primaryRed]: 'cta-button--red',\r\n [ctaEnums.primaryWhite]: 'cta-button--white',\r\n [ctaEnums.primaryBlack]: 'cta-button--black',\r\n [ctaEnums.secondaryRed]: 'cta-button--sec-red',\r\n [ctaEnums.secondaryWhite]: 'cta-button--sec-white',\r\n};\r\n\r\nconst CTAButton: FC<{ type: ctaEnums, children?: any }> = (props) => {\r\n const child = Children.only(props.children);\r\n\r\n if (React.isValidElement(child)) {\r\n const childClassName = (child?.props as any)?.className;\r\n const ctaClassName = `cta cta-button ${ctaModifierClasses?.[props.type] || ''}`;\r\n const newProps = {\r\n className: childClassName ? `${ctaClassName} ${childClassName}` : ctaClassName,\r\n };\r\n return React.cloneElement(child, { ...newProps });\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport { ctaEnums };\r\nexport default CTAButton;\r\n","import { isServer } from '@sitecore-jss/sitecore-jss/utils';\r\nimport { documentService, windowService } from './window.utils';\r\n\r\nexport const adjustModalPositionBasedOnContent = (): void => {\r\n if (isServer()) return;\r\n\r\n const element = documentService()?.querySelector('.ReactModal__Content.ReactModal__Content--after-open.modal-dialog');\r\n if (!element) return;\r\n\r\n const windowHeight = windowService()?.innerHeight;\r\n const scrollHeight = element.scrollHeight;\r\n const diffInGap = windowHeight - scrollHeight;\r\n const noGap = diffInGap > 0 && diffInGap < 160;\r\n const thresholdHeight = windowHeight * 0.8;\r\n\r\n if (scrollHeight > thresholdHeight || noGap) {\r\n element.classList.add('top-aligned-modal');\r\n element.classList.remove('center-aligned-modal');\r\n } else {\r\n element.classList.add('center-aligned-modal');\r\n element.classList.remove('top-aligned-modal');\r\n }\r\n};\r\n","import React from 'react';\r\nimport { iconSize } from '../../../../constants/icon.constants';\r\nimport Icon from '../../icon';\r\n\r\nconst CloseButton = (props): JSX.Element => {\r\n const { closeModal, isEEActiveOrPreview } = props;\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default CloseButton;\r\n","import React, { useState, useEffect, FC, useCallback } from 'react';\r\nimport Modal from 'react-modal';\r\nimport useEEActive from '../../../hooks/useEEActive';\r\nimport { ModalProps } from '../../../types/types';\r\nimport { adjustModalPositionBasedOnContent } from '../../../utils/modal.utils';\r\nimport { documentService, windowService } from '../../../utils/window.utils';\r\nimport CloseButton from './components/closeButton';\r\n\r\nconst ModalDialog: FC = ({\r\n isOpen = false,\r\n close,\r\n children,\r\n shouldCloseOnOverlayClick = true,\r\n className,\r\n overlayClassName = className,\r\n hasMaxHeightRestricted = false,\r\n onAfterOpen = undefined,\r\n hideCloseButton = false,\r\n skipModalPositionAdjustment = false,\r\n}: ModalProps) => {\r\n const [contentEleNode, setContentEleNode] = useState(null);\r\n const isEEActiveOrPreview = useEEActive(true);\r\n\r\n const adjustToToolbarHeight = (element: HTMLIFrameElement): void => {\r\n const height = element.clientHeight;\r\n if (!height) return;\r\n documentService().documentElement?.style?.setProperty('--ee-toolbar-offset', `${height}px`);\r\n };\r\n\r\n useEffect(() => {\r\n const resize = (): void => {\r\n adjustModalPositionBasedOnContent();\r\n };\r\n windowService().addEventListener('resize', resize);\r\n return (): void => {\r\n windowService().removeEventListener('resize', resize);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isOpen && isEEActiveOrPreview && document) {\r\n const EEToolbar = documentService().getElementById('scWebEditRibbon') as HTMLIFrameElement;\r\n if (!EEToolbar) return;\r\n\r\n if (!('MutationObserver' in window)) return;\r\n\r\n adjustToToolbarHeight(EEToolbar);\r\n\r\n const mutationCallback = (mutationsList: MutationRecord[]): void => {\r\n for (const mutation of mutationsList) {\r\n if ((mutation?.target as HTMLIFrameElement)?.id !== 'scWebEditRibbon') return;\r\n adjustToToolbarHeight(mutation?.target as HTMLIFrameElement);\r\n }\r\n };\r\n\r\n const observer = new MutationObserver(mutationCallback);\r\n\r\n const config = { attributes: true, childList: false, subtree: false };\r\n\r\n observer.observe(EEToolbar, config);\r\n\r\n return (): void => {\r\n observer.disconnect();\r\n };\r\n }\r\n }, [isOpen, isEEActiveOrPreview]); // eslint-disable-line\r\n\r\n useEffect(() => {\r\n if (!contentEleNode || !isOpen || skipModalPositionAdjustment) return;\r\n if (!('MutationObserver' in window)) return;\r\n let modalHeight = contentEleNode?.getBoundingClientRect()?.height || 0;\r\n const observer = new MutationObserver(() => {\r\n const newModalHeight = contentEleNode?.getBoundingClientRect()?.height;\r\n if (newModalHeight !== modalHeight) {\r\n modalHeight = newModalHeight;\r\n adjustModalPositionBasedOnContent();\r\n }\r\n });\r\n const config = { attributes: false, childList: true, subtree: true };\r\n observer.observe(contentEleNode, config);\r\n return (): void => {\r\n observer?.disconnect();\r\n };\r\n }, [contentEleNode, isOpen, skipModalPositionAdjustment]);\r\n\r\n const closeModal = (): void => {\r\n close && close(false);\r\n };\r\n\r\n const onAfterOpenCallback = useCallback((): void => {\r\n !skipModalPositionAdjustment && adjustModalPositionBasedOnContent();\r\n if (onAfterOpen) {\r\n onAfterOpen();\r\n }\r\n }, [adjustModalPositionBasedOnContent, onAfterOpen]);\r\n\r\n const overlayElementCallback = useCallback(\r\n (\r\n props: JSX.IntrinsicAttributes & React.ClassAttributes & React.HTMLAttributes,\r\n contentElement: JSX.Element\r\n ): JSX.Element => {\r\n return (\r\n

\r\n {!hideCloseButton ? : null}\r\n <>{contentElement}\r\n

\r\n );\r\n },\r\n [closeModal, isEEActiveOrPreview, hideCloseButton]\r\n );\r\n\r\n return (\r\n documentService().querySelector('#root')}\r\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n className={`modal-dialog ${className}\r\n ${isEEActiveOrPreview ? 'modal-dialog__overlay--ee-active' : ''}\r\n ${hasMaxHeightRestricted ? 'modal-dialog--has-max-height' : ''}`}\r\n overlayClassName={`modal-dialog__overlay ${overlayClassName} ${\r\n hasMaxHeightRestricted ? 'modal-dialog__overlay--has-max-height' : ''\r\n }`}\r\n overlayElement={overlayElementCallback}\r\n appElement={typeof document !== 'undefined' ? documentService()?.querySelector('#root') : null}\r\n contentRef={setContentEleNode}\r\n >\r\n {children}\r\n \r\n );\r\n};\r\nexport default ModalDialog;\r\n","import React, { FC } from 'react';\r\nimport { TExpandableOverlayCarouselPopUpArrow } from '../../types/overlayCarouselPopup.types';\r\nimport { iconSize } from '../../../../../constants/icon.constants';\r\nimport Icon from '../../../icon';\r\n\r\nconst OverlayCarouselArrow: FC = ({ direction, onClick, customClass = '' }) => {\r\n const icon = (direction === 'previous' ? 'arrow-chevron-left' : 'arrow-chevron-right');\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default OverlayCarouselArrow;\r\n","export enum CarouselNavPositionEnum {\r\n LEFT = 'left',\r\n RIGHT = 'right',\r\n}\r\n","import React, { FC } from 'react';\r\nimport { TCustomCarouselNavPositionProps } from './types/carouselTransparentNavSection.types';\r\n\r\nconst CarouselTransparentNavSection: FC = ({\r\n position,\r\n handleTouchStart,\r\n extraClassName = '',\r\n children = null,\r\n}: TCustomCarouselNavPositionProps) => {\r\n const localHandleStart = (event) => {\r\n if (event) {\r\n event.stopPropagation();\r\n event.nativeEvent.stopImmediatePropagation();\r\n }\r\n if (handleTouchStart) {\r\n handleTouchStart();\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default CarouselTransparentNavSection;\r\n","import React, { FC } from 'react';\r\nimport { CarouselNavPositionEnum } from '../../../../../enums/carousel.enums';\r\nimport CarouselTransparentNavSection from '../../../carouselTransparentNavSection';\r\nimport { TCarouselArrowAndNavSection } from '../../types/overlayCarouselPopup.types';\r\nimport OverlayCarouselArrow from '../carouselArrow';\r\n\r\nconst CarouselArrowAndNavSection: FC = (props) => {\r\n const { isWide, slides, currentCardIndex, videoPlaying, videoPaused, moveLeft, moveRight } = props;\r\n\r\n if (!isWide && slides?.length > 1) {\r\n return (\r\n <>\r\n {currentCardIndex === 0 ? null : (\r\n \r\n )}\r\n \r\n {currentCardIndex + 1 === slides.length ? null : (\r\n \r\n )}\r\n \r\n \r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport default CarouselArrowAndNavSection;\r\n","import React, { useEffect, useRef, useState, FC } from 'react';\r\nimport ReactPlayer from 'react-player';\r\nimport { Breakpoints } from '../../../constants/breakpoints.constants';\r\nimport { iconSize } from '../../../constants/icon.constants';\r\nimport useMediaQuery from '../../../lib/custom-hooks/useMediaQuery';\r\nimport { googleClickOpenVideoEvent } from '../../../utils/analytics';\r\nimport Icon from '../icon';\r\nimport Picture from '../picture';\r\nimport { VideoPlayerProps } from './types/videoPlayer.types';\r\nimport LazyLoad from 'react-lazyload';\r\n\r\nconst VideoPlayer: FC = ({\r\n link,\r\n playIconClickCallback,\r\n playCallback,\r\n pauseCallback,\r\n endCallback,\r\n controls = true,\r\n autoPlay = false,\r\n muted = false,\r\n width = '100%',\r\n height = '100%',\r\n showThumbnail = false,\r\n extraClassName = '',\r\n iconWrapperClassName = '',\r\n videoPlayerWrapperClassName = '',\r\n mediaTitle = '',\r\n useAnalytics = false,\r\n mobilePlayIconSize = iconSize.xxs,\r\n desktopPlayIconSize = iconSize.xlg,\r\n editorialImageProps,\r\n productImageProps,\r\n activeCard = true,\r\n loop = false,\r\n playsInline,\r\n}) => {\r\n const isDesktop = useMediaQuery(`(min-width: ${Breakpoints['tbl-p']}px)`);\r\n const [hideThumbnail, setHideThumbnail] = useState(false);\r\n const [playing, setPlaying] = useState(autoPlay ? true : false);\r\n\r\n const [onScreen, setOnScreen] = useState(false);\r\n const [runOnReady, setRunOnReady] = useState(false);\r\n const videoPlayerWrapperRef = useRef(null);\r\n const videoPlayerRef = useRef(null);\r\n const loadedSecondsRef = useRef(0);\r\n\r\n useEffect(() => {\r\n const options = {\r\n rootMargin: '10px',\r\n threshold: 0.01,\r\n };\r\n\r\n const observerCallback = (entries) => {\r\n entries.forEach((entry) => {\r\n if (!entry) return;\r\n setOnScreen(entry.isIntersecting);\r\n });\r\n };\r\n\r\n const observer = new IntersectionObserver(observerCallback, options);\r\n\r\n if (videoPlayerWrapperRef?.current) {\r\n observer.observe(videoPlayerWrapperRef?.current);\r\n }\r\n\r\n return () => {\r\n if (videoPlayerWrapperRef?.current) {\r\n observer.unobserve(videoPlayerWrapperRef?.current);\r\n }\r\n };\r\n }, [videoPlayerWrapperRef, setOnScreen]);\r\n\r\n useEffect(() => {\r\n setOnScreen(activeCard);\r\n }, [activeCard]);\r\n\r\n useEffect(() => {\r\n if (link) {\r\n setHideThumbnail(false);\r\n }\r\n }, [link]);\r\n\r\n useEffect(() => {\r\n if (!onScreen) {\r\n setRunOnReady(true);\r\n }\r\n }, [onScreen]);\r\n\r\n const localPlayCallback = (): void => {\r\n setPlaying(true);\r\n if (playCallback) {\r\n playCallback();\r\n }\r\n useAnalytics && !playing && googleClickOpenVideoEvent(mediaTitle || editorialImageProps?.alt || productImageProps?.alt);\r\n };\r\n\r\n const localPauseCallback = (): void => {\r\n setPlaying(false);\r\n if (pauseCallback) {\r\n pauseCallback();\r\n }\r\n };\r\n\r\n const localEndCallback = (): void => {\r\n setPlaying(false);\r\n if (endCallback) {\r\n endCallback();\r\n }\r\n };\r\n\r\n const handlePlayButton = () => {\r\n playIconClickCallback?.();\r\n useAnalytics && playing && googleClickOpenVideoEvent(mediaTitle || editorialImageProps?.alt || productImageProps?.alt);\r\n setHideThumbnail(true);\r\n };\r\n\r\n const loadLastLoadedSecond = () => {\r\n if (!runOnReady) return;\r\n videoPlayerRef?.current?.seekTo(loadedSecondsRef.current, 'seconds');\r\n setRunOnReady(false);\r\n };\r\n\r\n const playIconSize = isDesktop ? desktopPlayIconSize : mobilePlayIconSize;\r\n\r\n const localEditorialImageProps = editorialImageProps\r\n ? {\r\n ...editorialImageProps,\r\n isVideoThumbnail: true,\r\n cssClassImageEl: (editorialImageProps?.cssClassImageEl || '') + 'video-player',\r\n }\r\n : undefined;\r\n\r\n const localProductImageProps = productImageProps\r\n ? {\r\n ...productImageProps,\r\n isVideoThumbnail: true,\r\n imageClassName: (productImageProps?.imageClassName || '') + 'video-player',\r\n }\r\n : undefined;\r\n\r\n const reactPlayerConfig = {\r\n file: {\r\n attributes: {\r\n preload: 'metadata',\r\n },\r\n },\r\n youtube: {\r\n playerVars: { autoplay: autoPlay ? 1 : 0 },\r\n },\r\n };\r\n\r\n return (\r\n

\r\n {showThumbnail && !hideThumbnail ? (\r\n

\r\n

\r\n \r\n

\r\n {(localEditorialImageProps || localProductImageProps) && (\r\n

\r\n ) : (\r\n \r\n {onScreen ? (\r\n {\r\n loadedSecondsRef.current = played.playedSeconds;\r\n }}\r\n playsinline={playsInline}\r\n width={width}\r\n height={height}\r\n muted={muted}\r\n loop={loop}\r\n className={`video-player ${extraClassName}`}\r\n playing={onScreen && playing}\r\n ref={videoPlayerRef}\r\n config={reactPlayerConfig}\r\n />\r\n ) : (\r\n

\r\n )}\r\n \r\n )}\r\n

\r\n );\r\n};\r\nexport default React.memo(VideoPlayer);\r\n","import React, { FC, useState, useEffect } from 'react';\r\nimport { BreakpointsInPx } from '../../../../../constants/breakpoints.constants';\r\nimport { iconSize } from '../../../../../constants/icon.constants';\r\nimport useMediaQuery from '../../../../../lib/custom-hooks/useMediaQuery';\r\nimport { THeroCardProps } from '../../types/overlayCarouselPopup.types';\r\nimport VideoPlayer from '../../../videoPlayer';\r\nimport Picture from '../../../picture';\r\nimport { TImageComponentProps } from '../../../picture/types/picture.types';\r\nimport TextComponentDecider from '../../../TextComponentDecider';\r\nimport { googleClickOpenVideoEvent } from '../../../../../utils/analytics';\r\n\r\nconst HeroCard: FC = ({\r\n id,\r\n showOverlayTitleAndDescription = false,\r\n customTextTitle = false,\r\n customTextDescription = false,\r\n editorial,\r\n desktopRendition,\r\n tabletRendition,\r\n mobileRendition,\r\n desktopImage,\r\n mobileImage,\r\n desktopAlt,\r\n title,\r\n description,\r\n isVideo,\r\n videoUrl,\r\n activeCard,\r\n index,\r\n playCallback,\r\n pauseCallback,\r\n endCallback,\r\n moveLeft,\r\n moveRight,\r\n onClickPlayButton,\r\n richTextTitle = false,\r\n richTextDescription = false,\r\n}) => {\r\n const isWide = useMediaQuery(`(min-width: ${BreakpointsInPx.md})`);\r\n const [swipeStart, setSwipeStart] = useState(0);\r\n const [videoVisible, setVideoVisible] = useState(false);\r\n\r\n useEffect(() => {\r\n setSwipeStart(0);\r\n }, [activeCard, index]);\r\n\r\n const handleClickVideoPlay = (): void => {\r\n if (!isWide) return;\r\n\r\n onClickPlayButton && onClickPlayButton(index);\r\n\r\n googleClickOpenVideoEvent(title?.value, (index || 0) + 1);\r\n };\r\n\r\n const handleTouchStartVideoPlay = (event): void => {\r\n if (isWide) return;\r\n const value = event?.changedTouches?.[0]?.pageX;\r\n if (!value) return;\r\n setSwipeStart(value);\r\n };\r\n\r\n const handleTouchEndVideoPlay = (event): void => {\r\n if (isWide) return;\r\n const value = event?.changedTouches?.[0]?.pageX;\r\n if (!value) {\r\n setSwipeStart(0);\r\n return;\r\n }\r\n\r\n if (value < swipeStart && swipeStart - value > 20) {\r\n if (moveRight) moveRight();\r\n } else if (value > swipeStart && value - swipeStart > 20) {\r\n if (moveLeft) moveLeft();\r\n }\r\n setSwipeStart(0);\r\n };\r\n\r\n const handleTouchStart = (event): void => {\r\n const value = event?.changedTouches?.[0]?.pageX;\r\n if (!value) return;\r\n setSwipeStart(value);\r\n };\r\n\r\n const handleTouchEnd = (event): void => {\r\n const value = event?.changedTouches?.[0]?.pageX;\r\n if (!value) {\r\n setSwipeStart(0);\r\n return;\r\n }\r\n\r\n if (value < swipeStart && swipeStart - value > 20) {\r\n if (moveRight) moveRight();\r\n } else if (value > swipeStart && value - swipeStart > 20) {\r\n if (moveLeft) moveLeft();\r\n } else {\r\n setSwipeStart(0);\r\n }\r\n };\r\n\r\n const getPictureProps = (): TImageComponentProps => {\r\n if (editorial) {\r\n return {\r\n editorialImageProps: {\r\n id: id,\r\n desktopImage: desktopImage,\r\n mobileImage: mobileImage,\r\n desktopTransformation: 'Size1100',\r\n mobileTransformation: 'Size500',\r\n alt: desktopAlt,\r\n cssClassPictureEl: 'overlay-carousel-popup__picture',\r\n onClick: handleClickVideoPlay,\r\n onTouchStart: isVideo ? handleTouchStartVideoPlay : handleTouchStart,\r\n onTouchEnd: isVideo ? handleTouchEndVideoPlay : handleTouchEnd,\r\n },\r\n };\r\n } else {\r\n return {\r\n productImageProps: {\r\n desktopRendition: desktopRendition,\r\n tabletRendition: tabletRendition,\r\n mobileRendition: mobileRendition,\r\n alt: desktopAlt,\r\n pictureClassName: 'overlay-carousel-popup__picture',\r\n onClick: handleClickVideoPlay,\r\n onTouchStart: isVideo ? handleTouchStartVideoPlay : handleTouchStart,\r\n onTouchEnd: isVideo ? handleTouchEndVideoPlay : handleTouchEnd,\r\n },\r\n };\r\n }\r\n };\r\n\r\n const isRichTextTitle = richTextTitle ? 'RichText' : 'Text';\r\n const isRichTextDescription = richTextDescription ? 'RichText' : 'Text';\r\n\r\n return (\r\n <>\r\n {!videoVisible && showOverlayTitleAndDescription && isWide && (\r\n

\r\n

\r\n {title && }\r\n

\r\n

\r\n {description && (\r\n \r\n )}\r\n

\r\n

\r\n )}\r\n {isVideo ? (\r\n {\r\n setVideoVisible(true);\r\n }}\r\n iconWrapperClassName=\"overlay-carousel-popup__slide-video-play-button\"\r\n desktopPlayIconSize={iconSize.xlg}\r\n mobilePlayIconSize={iconSize.dsk}\r\n {...getPictureProps()}\r\n />\r\n ) : (\r\n

Edit Desktop image

Edit Mobile image

\r\n \r\n

{Title}

{title}

{title}

{lineItem?.title}

{title}

{alt}

{component.eyebrow}

{title}

{title}

{t('cnhi-filterBy')}

{t('cnhi-filterType')}

{t('cnhi-filterBy')}

{t('cnhi-filterType')}

{t('cnhi-filters')}

{result?.title}

{t('cnhi-noMatchesFoundTitle')}

{t('cnhi-searchTitle')}

{t('cnhi-initialSearchTitle')}

{title}

{title}

Edit Desktop image

Edit Mobile image

\r\n \r\n

{Title}

{title}

{title}

{lineItem?.title}

{title}

{alt}

{component.eyebrow}

{title}

{title}

{t('cnhi-filterBy')}

{t('cnhi-filterType')}

{t('cnhi-filterBy')}

{t('cnhi-filterType')}

{t('cnhi-filters')}

{t('cnhi-noMatchesFoundTitle')}

{t('cnhi-searchTitle')}

{t('cnhi-initialSearchTitle')}

{title}

{title}

Page not found