{`${errorMessage}${error.toString()}`}

;\r\n}\r\n","import React from 'react';\r\nimport { SystemMessageBanner } from '@dtcm/ui-components';\r\n\r\nconst NotFoundContent: any = {\r\n en: {\r\n fields: {\r\n title: {\r\n value: 'Sorry, we couldn’t find that page',\r\n },\r\n description: {\r\n value: 'Please recheck the URL or return to the homepage.',\r\n },\r\n ctaLabel: {\r\n value: 'Return to home page',\r\n },\r\n ctaLink: {\r\n value: {\r\n href: '/',\r\n anchor: '',\r\n linktype: 'internal',\r\n class: '',\r\n title: '',\r\n querystring: '',\r\n id: '{A98A98BD-AF22-5239-A16E-DEEF268ED6A4}',\r\n },\r\n },\r\n colourTheme: {\r\n id: '3f7e5570-cd7e-46da-94e7-d9267e7791d1',\r\n url: '/SiteSettings/Theme/Colors/theme-1',\r\n fields: {\r\n backgroundColor: {\r\n value: '#0067b9',\r\n },\r\n themeName: {\r\n value: 'theme-1',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n ar: {\r\n fields: {\r\n title: {\r\n value: 'عذراً، الصفحة التي تُحاول الوصول إليها غير مُتاحة حاليّاً',\r\n },\r\n description: {\r\n value: 'الرجاء التحقّق من الرابط أو العودة إلى الصفحة الرئيسيّة',\r\n },\r\n ctaLabel: {\r\n value: 'العوده للصفحة الرئيسية',\r\n },\r\n ctaLink: {\r\n value: {\r\n href: '/',\r\n anchor: '',\r\n linktype: 'internal',\r\n class: '',\r\n title: '',\r\n querystring: '',\r\n id: '{A98A98BD-AF22-5239-A16E-DEEF268ED6A4}',\r\n },\r\n },\r\n colourTheme: {\r\n id: '3f7e5570-cd7e-46da-94e7-d9267e7791d1',\r\n url: '/SiteSettings/Theme/Colors/theme-1',\r\n fields: {\r\n backgroundColor: {\r\n value: '#0067b9',\r\n },\r\n themeName: {\r\n value: 'theme-1',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport interface NotFoundProps {\r\n context: {\r\n language: string;\r\n };\r\n}\r\n\r\nexport const NotFound: React.FunctionComponent = ({ context }) => {\r\n const langauge = context && context.language ? context.language : 'en';\r\n const props = NotFoundContent[langauge];\r\n return ;\r\n};\r\n","import { get } from '../../lib/getPropertyByPath';\r\nimport React from 'react';\r\n\r\nexport const preloadImages = (rootRoute: any) => {\r\n // preload header images go within the first two components usually\r\n const route = rootRoute.placeholders['leisure-root'].slice(0, 5);\r\n\r\n function getComponents(object: Record, searchKey: string, value: string | number): object[] {\r\n let objects: object[] = [];\r\n\r\n for (let key in object) {\r\n if (!object.hasOwnProperty(key)) {\r\n continue;\r\n }\r\n\r\n if (typeof object[key] === 'object') {\r\n objects = objects.concat(getComponents(object[key], searchKey, value));\r\n } else if (key === searchKey && object[key] === value || key === searchKey && value === '') {\r\n objects.push(object);\r\n }\r\n }\r\n\r\n return objects;\r\n }\r\n\r\n const links: any[] = [];\r\n\r\n const images = [\r\n [\r\n 'PersonalizablePrimaryHeader',\r\n (component: object) => get(\r\n component,\r\n 'fields.data.item.personalizableImage.jss.value.src',\r\n get(component, 'fields.data.item.fallbackImage.jss.value.src')\r\n )\r\n ],\r\n [\r\n 'HeaderMedia',\r\n (component: object) => get(component, 'fields.data.item.image.jss.value.src')\r\n ],\r\n [\r\n 'HeaderCarousel',\r\n (component: object) => get(component, 'fields.data.item.children.0.image.jss.value.src')\r\n ]\r\n ];\r\n\r\n images.forEach((item: any) => {\r\n const [componentName, getImage] = item;\r\n const components = getComponents(route, 'componentName', componentName);\r\n\r\n if (!components[0]) {\r\n return;\r\n }\r\n\r\n // preload only for the first screen\r\n const imgSrc = getImage(components[0]);\r\n\r\n if (imgSrc) {\r\n const HeaderMediaTSXSizes = {\r\n mobile: '&cw=397&ch=397',\r\n desktop: '&cw=1556&ch=690'\r\n };\r\n\r\n links.push(...[\r\n ,\r\n \r\n ]);\r\n } else {\r\n console.info(`image is not found for ${componentName} component`);\r\n }\r\n });\r\n\r\n return links;\r\n};\r\n","import React, { useEffect } from 'react';\r\nimport { RouteComponentProps, withRouter } from 'react-router-dom';\r\nimport Helmet from 'react-helmet';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { get, canUseDOM } from '../../lib/getPropertyByPath';\r\nimport { useAppStateContext } from '../../lib/AppStateProvider';\r\nimport Hjson from 'hjson';\r\nimport cssVars from 'css-vars-ponyfill';\r\nimport { getLatestUserCookie } from '@dtcm/ui-components/dist/components/Login/user_session';\r\nimport { fetchData } from '@dtcm/ui-components/dist/utils/fetchData';\r\nimport { getColorByTheme } from '@dtcm/ui-components/dist/utils/index';\r\nimport { SHA256 } from '@dtcm/ui-components/dist/utils/sha256';\r\nimport { preloadImages } from './PreloadImages';\r\n\r\nexport interface MainContainerProps extends RouteComponentProps {\r\n context: {\r\n origin: string;\r\n language: string;\r\n tealium: {\r\n originUrl: string;\r\n environment: string;\r\n };\r\n canonical: string;\r\n };\r\n route: {\r\n name: string;\r\n itemId: string;\r\n templateName: string;\r\n fields: {\r\n browserTitle: {\r\n value: string;\r\n };\r\n };\r\n };\r\n}\r\nconst isInViewport = (el: any) => {\r\n if (!el) {\r\n return false;\r\n }\r\n var top = el.offsetTop;\r\n var left = el.offsetLeft;\r\n var width = el.offsetWidth;\r\n var height = el.offsetHeight;\r\n\r\n while (el.offsetParent) {\r\n el = el.offsetParent;\r\n top += el.offsetTop;\r\n left += el.offsetLeft;\r\n }\r\n\r\n return (\r\n top < window.pageYOffset + window.innerHeight &&\r\n left < window.pageXOffset + window.innerWidth &&\r\n top + height > window.pageYOffset &&\r\n left + width > window.pageXOffset\r\n );\r\n};\r\n\r\nconst resolvePageTitle = (route: any) => {\r\n let pageTitle = get(route, 'fields.browserTitle.value');\r\n if (!pageTitle || pageTitle === '$name') {\r\n pageTitle = get(route, 'fields.Title.value');\r\n }\r\n return pageTitle;\r\n};\r\n\r\nconst resolveMetaDescription = (route: any) => {\r\n let desc = get(route, 'fields.metaDescription.value');\r\n if (!desc) {\r\n desc = get(route, 'fields.Intro Text.value');\r\n }\r\n return desc;\r\n};\r\nconst resolveMetaImage = (route: any) => {\r\n let desc = get(route, 'fields.Fallback image.value.src', '');\r\n\r\n return desc;\r\n};\r\n\r\nconst getOriginUrl = (context: any) => {\r\n let origin = get(context, 'origin');\r\n if (origin.endsWith('/')) {\r\n origin += '/';\r\n }\r\n return origin;\r\n};\r\n\r\n/*const resolveCanonicalUrl = (context: any, location: any) => {\r\n const path = location && location.pathname ? location.pathname : '/';\r\n return `${getOriginUrl(context)}${path}`;\r\n};\r\n*/\r\nconst renderProperties = (prefix: string, queryString: string) => {\r\n if (!queryString) {\r\n return null;\r\n }\r\n if (!prefix) {\r\n return null;\r\n }\r\n const properties = [];\r\n const parts = queryString.split('&');\r\n for (let i = 0; i < parts.length; i++) {\r\n const pair = parts[i].split('=');\r\n properties.push(\r\n \r\n );\r\n }\r\n\r\n return properties;\r\n};\r\n\r\nconst getAlternateUrls = (context: any) => {\r\n const alternateUrls = get(context, 'alternateUrls');\r\n if (!alternateUrls) {\r\n return null;\r\n }\r\n const alternateUrlTags = alternateUrls.map((alternateUrl: any) => (\r\n \r\n ));\r\n // alternateUrlTags.push(\r\n // \r\n // );\r\n return alternateUrlTags;\r\n};\r\n\r\nconst getXDefault = (context: any) => {\r\n const alternateUrls = get(context, 'alternateUrls');\r\n if (!alternateUrls) {\r\n return null;\r\n }\r\n const alternateUrlTags = alternateUrls.map((alternateUrl: any) => {\r\n if (alternateUrl.lang === 'en') {\r\n return (\r\n \r\n );\r\n } else {\r\n return '';\r\n }\r\n });\r\n\r\n return alternateUrlTags;\r\n};\r\n\r\nconst MainContainer: React.FunctionComponent = ({ route, location, context }) => {\r\n const pageTitle = resolvePageTitle(route);\r\n const pageDescription = resolveMetaDescription(route);\r\n const pageImage = context.origin + resolveMetaImage(route).split('?')[0];\r\n const pageUrl = get(context, 'canonical');\r\n const ogTitle = get(route, 'fields.og-title.value');\r\n const ogDescription = get(route, 'fields.og-description.value');\r\n const ogImage = get(route, 'fields.og-image.value.src');\r\n const twitterTitle = get(route, 'fields.twitter-title.value');\r\n const twitterDescription = get(route, 'fields.twitter-description.value');\r\n const [firstLoad, setFirstLoad] = React.useState(true);\r\n const [articleListSchema, setArticleListSchema] = React.useState('');\r\n const [FAQStructuredData, setFAQStructuredData] = React.useState();\r\n\r\n const { itemId, templateName } = route;\r\n const { language, tealium } = context;\r\n const browserLanguage = typeof navigator !== 'undefined' ? navigator.language : '';\r\n\r\n const utagsData = get(context, 'utags.script', '');\r\n const utagsDataString = utagsData.split('utag_data = ')[1];\r\n\r\n const utagsDataObj = Hjson.parse(utagsDataString);\r\n\r\n const utag_data = {\r\n ...utagsDataObj,\r\n page_id: itemId,\r\n page_name: templateName,\r\n page_language: language,\r\n template: templateName,\r\n pillar: get(route, 'fields.pillar.value'),\r\n content_type: get(route, 'fields.contentType.value'),\r\n persona: get(route, 'fields.persona.value'),\r\n page_location: pageUrl,\r\n page_title: pageTitle,\r\n page_path: location.pathname,\r\n page_browser_language: browserLanguage,\r\n session_country: get(context, 'utags.script', '').includes('session_country')\r\n ? get(context, 'utags.script', '')\r\n .split('session_country:')[1]\r\n .replace(/[\\W_]+/g, ' ')\r\n .trim()\r\n : '',\r\n session_country_code: get(context, 'utags.script', '').includes('session_country_code')\r\n ? get(context, 'utags.script', '')\r\n .split('session_country_code:')[1]\r\n .split(',')[0]\r\n .replace(/[\\W_]+/g, ' ')\r\n .trim()\r\n : '',\r\n };\r\n if (!tealium) {\r\n console.warn('tealium settings are not provided');\r\n }\r\n\r\n useEffect(() => {\r\n const wind = window as any;\r\n if (wind) {\r\n wind.utag_data = {\r\n ...wind.utag_data,\r\n ...utag_data,\r\n };\r\n }\r\n // if cust_id absent in global varible\r\n if (!get(wind, 'utag_data.cust_id')) {\r\n const utag_data = document.getElementById('utag_data');\r\n if (utag_data && utag_data.innerHTML) {\r\n const startIndex = utag_data.innerHTML.indexOf('{');\r\n const data = Hjson.parse(utag_data.innerHTML.slice(startIndex));\r\n // if cust_id exist in html but absent in global variable - just set it, otherwise - get from cookie\r\n if (data.cust_id) {\r\n wind.utag_data.cust_id = data.cust_id;\r\n } else {\r\n getLatestUserCookie().then((userCookie: any) => {\r\n if (userCookie.access_token) {\r\n const apiGlobal =\r\n get(appState, 'sitecoreContextData.configuration.globalApi.apiGlobal') ||\r\n 'https://apiqa.testvisitdubai.com';\r\n fetchData({\r\n path: `${apiGlobal}/graphql/user`,\r\n options: {\r\n method: 'POST',\r\n body: JSON.stringify({\r\n query: `{ userProfile { email } }`,\r\n }),\r\n },\r\n authToken: userCookie.access_token,\r\n }).then((data: any) => {\r\n const { email: ddd } = data.data.userProfile;\r\n const encrEmail = SHA256(ddd);\r\n if (wind && wind.utag_data) {\r\n wind.utag_data.cust_id = encrEmail;\r\n }\r\n const utag_data = document.getElementById('utag_data');\r\n if (utag_data && utag_data.innerHTML) {\r\n const startIndex = utag_data.innerHTML.indexOf('{');\r\n const data = Hjson.parse(utag_data.innerHTML.slice(startIndex));\r\n data.cust_id = encrEmail;\r\n utag_data.innerHTML = `var utag_data = ${JSON.stringify(data)}`;\r\n }\r\n });\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }, [route.name]);\r\n\r\n useEffect(() => {\r\n const wind = window as any;\r\n const utag = wind.utag;\r\n\r\n if (wind && utag) {\r\n utag.data = {\r\n ...utag.data,\r\n ...utag_data,\r\n };\r\n wind.utag_data = {\r\n ...wind.utag_data,\r\n ...utag_data,\r\n };\r\n\r\n wind.utag.utag_cfg_ovrd = wind.utag.utag_cfg_ovrd || {}; // Make sure we don't kill a previous decleration of the object\r\n wind.utag.utag_cfg_ovrd.noview = true;\r\n if (!firstLoad) {\r\n utag.view(wind.utag_data);\r\n } else {\r\n setFirstLoad(false);\r\n }\r\n }\r\n }, [route.name]);\r\n\r\n useEffect(() => {\r\n const moduels = get(route, 'placeholders.leisure-root', []);\r\n let scrolledto25 = false;\r\n let scrollTimer: any = 0;\r\n let scrollTimer2: any = 0;\r\n let timer: any = 0;\r\n\r\n let timerLogged = false;\r\n let timerLogged2 = false;\r\n let scrolledto50 = false;\r\n let scrolledto75 = false;\r\n let scrolledto100 = false;\r\n\r\n let timer20Finsihed = false;\r\n let timer50Finsihed = false;\r\n const desktopHeights: any = {\r\n NeighborhoodsMap: {\r\n desktop: 1150,\r\n mobile: 850,\r\n },\r\n Map: {\r\n desktop: 790,\r\n mobile: 709,\r\n },\r\n Curators: {\r\n desktop: 810,\r\n mobile: 780,\r\n },\r\n Itineraries: {\r\n desktop: 610,\r\n mobile: 811,\r\n },\r\n ContactCard: {\r\n desktop: 740,\r\n mobile: 991,\r\n },\r\n VisaRequirementsWizard: {\r\n desktop: 260,\r\n mobile: 441,\r\n },\r\n EditableListiclePOIs: {\r\n desktop: 1050,\r\n mobile: 798,\r\n },\r\n EditableListicleEvents: {\r\n desktop: 1050,\r\n mobile: 611,\r\n },\r\n ListiclePOIs: {\r\n desktop: 1050,\r\n mobile: 670,\r\n },\r\n ListicleEvents: {\r\n desktop: 1050,\r\n mobile: 611,\r\n },\r\n ListicleMedia: {\r\n desktop: 950,\r\n mobile: 652,\r\n },\r\n ItineraryOverview: {\r\n desktop: 450,\r\n mobile: 585,\r\n },\r\n Tags: {\r\n desktop: 140,\r\n mobile: 178,\r\n },\r\n CookiePolicy: {\r\n desktop: 120,\r\n mobile: 250,\r\n },\r\n TestimonialQuote: {\r\n desktop: 400,\r\n mobile: 468,\r\n },\r\n PracticalInformation: {\r\n desktop: 780,\r\n mobile: 679,\r\n },\r\n MediaGrid: {\r\n desktop: 1000,\r\n mobile: 2040,\r\n },\r\n Footer: {\r\n desktop: 600,\r\n mobile: 1050,\r\n },\r\n CuratorItineraries: {\r\n desktop: 684,\r\n mobile: 816,\r\n },\r\n CuratorPOIs: {\r\n desktop: 681,\r\n mobile: 770,\r\n },\r\n CuratorEvents: {\r\n desktop: 450,\r\n mobile: 604,\r\n },\r\n DetailsCardService: {\r\n desktop: 369,\r\n mobile: 585,\r\n },\r\n MediaVideo: {\r\n desktop: 740,\r\n mobile: 350,\r\n },\r\n\r\n Timeline: {\r\n desktop: 763,\r\n mobile: 587,\r\n },\r\n MediaCarousel: {\r\n desktop: 795,\r\n mobile: 380,\r\n },\r\n SocialSharing: {\r\n desktop: 126,\r\n mobile: 146,\r\n },\r\n TestimonialMultipleMedia: {\r\n desktop: 414,\r\n mobile: 663,\r\n },\r\n TestimonialMedia: {\r\n desktop: 414,\r\n mobile: 663,\r\n },\r\n WizardTraining: {\r\n desktop: 654,\r\n mobile: 562,\r\n },\r\n DownloadSingle: {\r\n desktop: 242,\r\n mobile: 231,\r\n },\r\n AutoDownload: {\r\n desktop: 104,\r\n mobile: 104,\r\n },\r\n\r\n MediaAndCopy: {\r\n desktop: 456,\r\n mobile: 677,\r\n },\r\n\r\n AudioPlayer: {\r\n desktop: 136,\r\n mobile: 136,\r\n },\r\n FunFactsContainer: {\r\n desktop: 342,\r\n mobile: 507,\r\n },\r\n FunFactItem: {\r\n desktop: 342,\r\n mobile: 507,\r\n },\r\n Partners: {\r\n desktop: 270,\r\n mobile: 273,\r\n },\r\n ItineraryFoodBreak: {\r\n desktop: 360,\r\n mobile: 427,\r\n },\r\n TravelDeals: {\r\n desktop: 590,\r\n mobile: 894,\r\n },\r\n CuratorSection: {\r\n desktop: 1130,\r\n mobile: 1180,\r\n },\r\n BottomNavigation: {\r\n desktop: 224,\r\n mobile: 288,\r\n },\r\n ItineraryBottomNavigation: {\r\n desktop: 224,\r\n mobile: 288,\r\n },\r\n TimelineNavigation: {\r\n desktop: 542,\r\n mobile: 582,\r\n },\r\n UserGeneratedContent: {\r\n desktop: 358,\r\n mobile: 358,\r\n },\r\n CuratorMatcher: {\r\n desktop: 715,\r\n mobile: 743,\r\n },\r\n\r\n MediaImage360: {\r\n desktop: 780,\r\n mobile: 347,\r\n },\r\n\r\n ProfileCards: {\r\n desktop: 786,\r\n mobile: 766,\r\n },\r\n GeneralCardIcon: {\r\n desktop: 335,\r\n mobile: 315,\r\n },\r\n GeneralCardIconMultiple: {\r\n desktop: 494,\r\n mobile: 365,\r\n },\r\n GeneralCardImage: {\r\n desktop: 554,\r\n mobile: 571,\r\n },\r\n GeneralCardImageMultiple: {\r\n desktop: 738,\r\n mobile: 751,\r\n },\r\n };\r\n let scrollEvent: any = undefined;\r\n\r\n if (canUseDOM) {\r\n const deviceType = document.body.clientWidth <= 767 ? 'mobile' : 'desktop';\r\n timer = setTimeout(() => {\r\n let bodyHeightOnLoad = document.body.clientHeight + desktopHeights.Footer[deviceType];\r\n moduels.map((module: any) => {\r\n if (isHaveStructedData(module) && module.componentName === 'PracticalInformation') {\r\n setFAQStructuredData(createStructedData(module));\r\n }\r\n\r\n if (moduels.length === 1) {\r\n bodyHeightOnLoad = document.body.clientHeight;\r\n }\r\n if (module.componentName === 'ItineraryPOIsOverview') {\r\n const poiLength = get(module, 'fields.data.item.pois.values.length');\r\n bodyHeightOnLoad += desktopHeights.ListiclePOIs[deviceType] * poiLength;\r\n }\r\n\r\n if (desktopHeights[module.componentName]) {\r\n bodyHeightOnLoad += desktopHeights[module.componentName][deviceType];\r\n }\r\n });\r\n const wind = window as any;\r\n if (wind) {\r\n wind.utag_data = {\r\n ...wind.utag_data,\r\n ...utag_data,\r\n total_window_height: `${bodyHeightOnLoad}`,\r\n };\r\n }\r\n console.log('bodyHeightOnLoad', bodyHeightOnLoad);\r\n clearTimeout(scrollTimer);\r\n clearTimeout(scrollTimer2);\r\n let scrollPercentRounded = 0;\r\n\r\n scrollEvent = () => {\r\n let scrollTop = window.scrollY;\r\n let docHeight = bodyHeightOnLoad;\r\n let winHeight = window.innerHeight;\r\n let scrollPercent = scrollTop / (docHeight - winHeight);\r\n scrollPercentRounded = Math.round(scrollPercent * 100);\r\n\r\n if (scrollPercentRounded >= 25) {\r\n if (!scrolledto25) {\r\n scrolledto25 = true;\r\n\r\n if (get(window, 'SC_Scoll_Function')) {\r\n get(window, 'SC_Scoll_Function')('25');\r\n }\r\n if (timer20Finsihed) {\r\n if (get(window, 'SC_Scoll_Time_Function1')) {\r\n get(window, 'SC_Scoll_Time_Function1')(scrollPercentRounded, '20');\r\n }\r\n }\r\n }\r\n }\r\n if (scrollPercentRounded >= 50) {\r\n if (!scrolledto50) {\r\n scrolledto50 = true;\r\n\r\n if (get(window, 'SC_Scoll_Function')) {\r\n get(window, 'SC_Scoll_Function')('50');\r\n }\r\n\r\n if (timer50Finsihed) {\r\n if (get(window, 'SC_Scoll_Time_Function1')) {\r\n get(window, 'SC_Scoll_Time_Function1')(\r\n scrollPercentRounded > 100 ? 100 : scrollPercentRounded,\r\n '30'\r\n );\r\n }\r\n }\r\n\r\n // clearTimeout(scrollTimer);\r\n }\r\n }\r\n if (scrollPercentRounded >= 75) {\r\n if (!scrolledto75) {\r\n scrolledto75 = true;\r\n\r\n if (get(window, 'SC_Scoll_Function')) {\r\n get(window, 'SC_Scoll_Function')('75');\r\n }\r\n }\r\n }\r\n\r\n if (isInViewport(document.querySelector('.footer__bottom'))) {\r\n if (!scrolledto100) {\r\n scrolledto100 = true;\r\n\r\n if (get(window, 'SC_Scoll_Function')) {\r\n get(window, 'SC_Scoll_Function')('100');\r\n }\r\n }\r\n }\r\n };\r\n\r\n scrollTimer = setTimeout(() => {\r\n timer20Finsihed = true;\r\n if (!timerLogged) {\r\n if (scrolledto25) {\r\n timer20Finsihed = false;\r\n if (get(window, 'SC_Scoll_Time_Function1')) {\r\n get(window, 'SC_Scoll_Time_Function1')(scrollPercentRounded, '20');\r\n }\r\n\r\n timerLogged = true;\r\n clearTimeout(scrollTimer);\r\n }\r\n } else {\r\n clearTimeout(scrollTimer);\r\n }\r\n }, 20 * 1000);\r\n scrollTimer2 = setTimeout(() => {\r\n timer50Finsihed = true;\r\n if (!timerLogged2) {\r\n if (scrolledto50) {\r\n timer50Finsihed = false;\r\n if (get(window, 'SC_Scoll_Time_Function1')) {\r\n get(window, 'SC_Scoll_Time_Function1')(\r\n scrollPercentRounded > 100 ? 100 : scrollPercentRounded,\r\n '30'\r\n );\r\n }\r\n timerLogged2 = true;\r\n clearTimeout(scrollTimer2);\r\n }\r\n } else {\r\n clearTimeout(scrollTimer2);\r\n }\r\n }, 30 * 1000);\r\n window.addEventListener('scroll', scrollEvent);\r\n }, 3000);\r\n }\r\n return () => {\r\n window.removeEventListener('scroll', scrollEvent);\r\n clearTimeout(timer);\r\n\r\n clearTimeout(scrollTimer);\r\n clearTimeout(scrollTimer2);\r\n };\r\n }, [route.name]);\r\n\r\n useEffect(() => {\r\n if ((route && route.templateName === 'Article') || 'Article Listicle Page') {\r\n const listOfPossibleTypes = [\r\n 'EditableListicleEvents',\r\n 'EditableListiclePOIs',\r\n 'ListicleEvents',\r\n 'ListiclePOIs',\r\n 'ListicleMedia',\r\n ];\r\n const itemsForItemList = get(route, 'placeholders.leisure-root', []).filter(\r\n (item: any) => listOfPossibleTypes.includes(item.componentName) && item.dataSource\r\n );\r\n\r\n if (itemsForItemList.length) {\r\n setArticleListSchema(\r\n JSON.stringify(\r\n itemsForItemList.map((item: any, index: number) => ({\r\n '@type': 'ListItem',\r\n position: index + 1,\r\n name: get(item, 'fields.data.item.title.jss.value'),\r\n }))\r\n )\r\n );\r\n } else {\r\n setArticleListSchema('');\r\n }\r\n }\r\n\r\n return () => {\r\n setArticleListSchema('');\r\n };\r\n }, [route.name]);\r\n\r\n useEffect(() => {\r\n if (canUseDOM) {\r\n if (get(route, 'fields.headTransparent.value')) {\r\n document.body.classList.add('nav--transparent');\r\n } else {\r\n document.body.classList.remove('nav--transparent');\r\n }\r\n }\r\n }, [route.name]);\r\n\r\n const isDubaiFont = () => {\r\n const languageName = get(appState, 'language.languageCode', 'en');\r\n const isDubaiFont = [\r\n 'en',\r\n 'ar',\r\n 'fr',\r\n 'da',\r\n 'de',\r\n 'fi',\r\n 'it',\r\n 'no',\r\n 'pt',\r\n 'es',\r\n 'sv',\r\n ].some((value: string) => value === languageName);\r\n\r\n return isDubaiFont;\r\n };\r\n\r\n const { appState } = useAppStateContext();\r\n\r\n const theme = get(appState, 'sitecoreContextData.themesOfPage') || {};\r\n const themePrimary = get(theme, 'primary') || '';\r\n const themePrimaryActive = get(theme, 'primary_active') || '';\r\n const themeGreyscale = get(theme, 'greyscale.item1') || '';\r\n const fontVariable = isDubaiFont() ? \"'Dubai', 'Arial', sans-serif\" : 'Calibri, sans-serif';\r\n\r\n // #0067B9 --site-color-2\r\n cssVars({\r\n shadowDOM: true,\r\n variables: {\r\n '--site-color': '#035E88',\r\n '--site-color-2': `${themePrimaryActive ? themePrimaryActive : '#004565'}`,\r\n '--main-color': `${themePrimary ? themePrimary : '#035E88'}`,\r\n '--main-color-text': `${getColorByTheme(themePrimary ? themePrimary : '#035E88')}`,\r\n '--main-color--active-2': '#006699',\r\n '--main-color--active': `${themePrimaryActive ? themePrimaryActive : '#004565'}`,\r\n '--greyscale': `${themeGreyscale ? themeGreyscale : '#505050'}`,\r\n '--site-font-family': `${fontVariable}`,\r\n },\r\n });\r\n\r\n const removeImageResolution = (src: string) => {\r\n const queryStr = src.split('?')[1];\r\n const clearedQueryStr = queryStr\r\n ? queryStr\r\n .split('&')\r\n .filter((item) => item.indexOf('h=') != 0 && item.indexOf('w=') != 0)\r\n .join('&')\r\n : '';\r\n\r\n return src.split('?')[0] + '?' + clearedQueryStr;\r\n };\r\n\r\n const injectImageResolution = (src: string, width: string | number, height: string | number): string => {\r\n const imageSrc = removeImageResolution(src);\r\n return `${imageSrc}${imageSrc.match(/\\?/) ? '&' : '?'}cw=${width}&ch=${height}`;\r\n };\r\n\r\n const renderArticleListSchema = () => {\r\n const scriptContent = `{\"@context\": \"https://schema.org\",\"@type\": \"ItemList\",\"itemListElement\": ${\r\n articleListSchema || []\r\n }}`;\r\n return \r\n \r\n {FAQStructuredData ? (\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n \r\n {articleListSchema ? renderArticleListSchema() : null}\r\n \r\n );\r\n};\r\n\r\nexport default withRouter(MainContainer);\r\n\r\nconst isHaveStructedData = (module: any) => {\r\n const items =\r\n get(module, 'fields.data.datasource.faqs') ||\r\n get(module, 'fields.data.item.items.targetItems') ||\r\n get(module, 'fields.data.item.children', []);\r\n return !!items.length;\r\n};\r\n\r\nconst createStructedData = (module: any) => {\r\n const items =\r\n get(module, 'fields.data.datasource.faqs') ||\r\n get(module, 'fields.data.item.items.targetItems') ||\r\n get(module, 'fields.data.item.children', []);\r\n\r\n return StructuredData(\r\n items.map((item: any) =>\r\n createStructuredItem(\r\n get(item, 'title.field.value') || get(item, 'title.jss.value'),\r\n get(item, 'description.field.value') || get(item, 'description.jss.value')\r\n )\r\n )\r\n );\r\n};\r\n\r\nconst createStructuredItem = (question: string, answer: string) => {\r\n return {\r\n '@type': 'Question',\r\n name: question,\r\n acceptedAnswer: {\r\n '@type': 'Answer',\r\n text: answer.replace(/(<([^>]+)>)/gi, ''),\r\n },\r\n };\r\n};\r\n\r\nconst StructuredData = (mainEntity: Array = []) => {\r\n return {\r\n '@context': 'https://schema.org',\r\n '@type': 'FAQPage',\r\n mainEntity: mainEntity,\r\n };\r\n};\r\n","import React from 'react';\r\nimport { useAppStateContext } from '../../lib/AppStateProvider';\r\nimport { Error } from './Error';\r\nimport { NotFound } from './NotFound';\r\nimport MainContainer from './MainContainer';\r\n\r\nexport function LayoutFactory() {\r\n const { appState } = useAppStateContext();\r\n\r\n const { routeData, routeError } = appState;\r\n\r\n if (routeError) {\r\n return ;\r\n }\r\n\r\n if (routeData) {\r\n return ;\r\n }\r\n\r\n // no route data for the current route in Sitecore - show not found component.\r\n // Note: this is client-side only 404 handling. Server-side 404 handling is the responsibility\r\n // of the server being used (i.e. node-headless-ssr-proxy and Sitecore intergrated rendering know how to send 404 status codes).\r\n return ;\r\n}\r\n","import React from 'react';\r\nimport { NavigationBar, NavigationBarProps } from '@dtcm/ui-components';\r\nimport { useAppStateContext } from '../../lib/AppStateProvider';\r\nimport { get } from '../../lib/getPropertyByPath';\r\n\r\nexport const NavBarContainer = () => {\r\n const { appState, actions } = useAppStateContext();\r\n\r\n if (!appState.navbar || get(appState, 'dictionary.viewBag.isEmptyLayout', false)) {\r\n return null;\r\n }\r\n\r\n const dictionary = get(appState, 'navbarData');\r\n const dictionaryVenues = get(appState, 'dictionary.viewBag.navbar.venueFormsDictionary');\r\n const commonDictionary = get(appState, 'dictionary.viewBag.navbar.commonDictionary');\r\n\r\n const activeLanguage = {\r\n languageCode: get(appState, 'language.languageCode'),\r\n languageName: get(appState, 'language.languageName'),\r\n };\r\n\r\n // Map data received from Sitecore to props expected by NavBar component.\r\n // Also provide functions to handle actions triggered within the NavBar.\r\n\r\n const props: NavigationBarProps = {\r\n activeLanguage,\r\n analytics: get(appState, 'analytics'),\r\n breadcrumbAnalytics: get(appState, 'sitecoreContextData.breadcrumbAnalytics'),\r\n searchAnalytics: get(appState, 'sitecoreContextData.searchAnalytics'),\r\n mainNav: {\r\n removeVenueFromShortlistAnalytics: get(appState, 'dictionary.viewBag.navbar.removeVenueFromShortlistAnalytics'),\r\n shareYourShortlistAnalytics: get(appState, 'dictionary.viewBag.navbar.shareYourShortlistAnalytics'),\r\n requestProposalAnalytics: get(appState, 'dictionary.viewBag.navbar.requestProposalAnalytics'),\r\n yourShortlistedBottomAnalytics: get(appState, 'dictionary.viewBag.navbar.yourShortlistedBottomAnalytics'),\r\n yourShortlistedTopAnalytics: get(appState, 'dictionary.viewBag.navbar.yourShortlistedTopAnalytics'),\r\n interactionWithVenueRPFormAnalytics: get(appState, 'dictionary.viewBag.navbar.interactionWithVenueRPFormAnalytics'),\r\n mainNavItems: get(appState, 'navbar.mainNavItems'),\r\n primaryBrandLogo: get(appState, 'navbar.logoImage'),\r\n primaryBrandLogoLink: get(appState, 'navbar.primaryBrandLogoLink'),\r\n secondaryBrandLogo: get(appState, 'navbar.secondLogoImage'),\r\n secondaryBrandLogoLink: get(appState, 'navbar.secondaryBrandLogoLink'),\r\n accountLinks: get(appState, 'navbar.accountLinks'),\r\n menuLinks: get(appState, 'navbar.menuLinks'),\r\n venueShortlistVisible: false,\r\n setVenueShortlistVisible: Function,\r\n venueShortlists: [],\r\n transparentNavigation: get(appState, 'routeData.fields.headTransparent.value'),\r\n },\r\n\r\n dictionary: {\r\n dictionary,\r\n dictionaryVenues,\r\n },\r\n accessibilitySettings: {\r\n targetItem: get(appState, 'navbar.accessibilitySettings.targetItem'),\r\n selectedContrastValue: appState.selectedContrastValue,\r\n selectedFontSize: appState.selectedFontSize,\r\n readSpeakerScriptPath: `${process.env.PUBLIC_URL}/assets/scripts`,\r\n onContrastOptionSelected: (option:any) => actions.changeContrast(option),\r\n onFontSizeSelected: (fontSize: any) => actions.changeFontSize(fontSize),\r\n },\r\n languageSelector: {\r\n targetItem: get(appState, 'navbar.languageSelector.targetItem'),\r\n activeLanguage,\r\n currentPath: appState.routePath,\r\n },\r\n topNav: {\r\n accessibilitySettingsTitle: get(appState, 'navbar.accessibilitySettings.targetItem.title.value', ''),\r\n globalLinks: get(appState, 'navbar.globalLinks'),\r\n activeLanguageName: activeLanguage.languageName,\r\n },\r\n breadcrumb: {\r\n mobileLabel: get(appState, 'navbar.mobileBreadcrumbLabel.value.value'),\r\n },\r\n search: {\r\n targetItem: get(appState, 'navbar.search.targetItem'),\r\n dictionary: commonDictionary\r\n\r\n },\r\n login: {\r\n title: 'Login',\r\n },\r\n transparentNavigation: get(appState, 'routeData.fields.headTransparent.value'),\r\n };\r\n\r\n return ;\r\n};\r\n","\r\nimport React, { useEffect } from 'react';\r\nimport { useAppStateContext } from './lib/AppStateProvider';\r\nimport { useSitecoreTracker } from '@uniformdev/tracking-react';\r\nimport { doTracking } from '@uniformdev/optimize-js';\r\n\r\nexport const Tracker: React.FunctionComponent = (props: any) => {\r\n const { route, getLogger } = props;\r\n const { appState } = useAppStateContext();\r\n const sitecoreContext = appState.sitecoreContextData;\r\n const [isTrackerInitialized, setIsTrackerInitialized] = React.useState(false);\r\n\r\n\r\n useSitecoreTracker(sitecoreContext, {\r\n clientSideRouting: true,\r\n onInitialized: () => {\r\n setIsTrackerInitialized(true);\r\n },\r\n type: 'jss',\r\n logger: getLogger('tracker'),\r\n scripts: {\r\n optimize: `/dist/leisure/uniform.optimize.min.js`,\r\n },\r\n });\r\n useEffect(() => {\r\n const shouldNotTrack =\r\n !route ||\r\n isTrackerInitialized !== true ||\r\n !sitecoreContext ||\r\n route.itemId !== route.itemId;\r\n if (shouldNotTrack) {\r\n return;\r\n }\r\n\r\n doTracking({\r\n source: 'sitecore',\r\n data: sitecoreContext,\r\n debug: true,\r\n });\r\n }, [route, isTrackerInitialized, sitecoreContext]);\r\n return(\r\n null\r\n )\r\n\r\n}\r\n","import React, { useEffect, useContext } from 'react';\r\nimport { Route, Switch, useLocation } from 'react-router-dom';\r\nimport Helmet from 'react-helmet';\r\nimport loadable from 'react-loadable-visibility/loadable-components';\r\nimport { routePatterns } from './lib/routerUtils';\r\nimport { LayoutFactory } from './components/Layouts/LayoutFactory';\r\nimport { useAppStateContext } from './lib/AppStateProvider';\r\nimport { NavBarContainer } from './components/Header/NavBarContainer';\r\nimport { HappinessMeterWidget, ScrollToTop, tealiumClickFunc } from '@dtcm/ui-components';\r\nimport { get } from './lib/getPropertyByPath';\r\nimport config from '../src/temp/config';\r\nimport { UniformContext } from '@uniformdev/react';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { SitecorePersonalizationContextProvider } from '@uniformdev/personalize-react';\r\n//import { doTracking } from '@uniformdev/optimize-js';\r\nimport { Tracker } from './Tracker';\r\nimport {getGlobalDictionaryTerm} from \"@dtcm/ui-components/dist/utils\";\r\nimport {SkipContentButtons} from \"@dtcm/ui-components\";\r\n\r\nconst COOKIES_ENABLED_COUNTRY_CODES =\r\n'DE|AT|BE|HR|CY|CZ|DK|EE|FI|FR|GR|HU|IE|IT|LV|LT|LU|MT|NL|PL|PT|RO|SK|SI|ES|SE|GB|IS|LI|NO|BG';\r\n\r\nconst CloseIcon = () => ;\r\n\r\n/*const getCookie = (name: string) => {\r\n const value = `; ${document.cookie}`;\r\n const parts = value.split(`; ${name}=`);\r\n // @ts-ignore\r\n return parts && parts.length === 2 && parts.pop().split(';').shift();\r\n}*/\r\nconst FooterContainer: any = loadable(\r\n () => import(/* webpackChunkName: \"FooterContainer\" */ './components/Footer/FooterContainer')\r\n);\r\n\r\n/*\r\n APP LAYOUT\r\n This is where the app's HTML \"shell\" should be defined.\r\n\r\n All routes share this root layout by default,\r\n but components added to inner placeholders are route-specific.\r\n*/\r\nconst setDarkMode = (value: boolean = false, isDarkModeForThisPage: boolean) => {\r\n if (typeof window !== 'undefined')\r\n if (value && isDarkModeForThisPage) {\r\n document.querySelector('body')!.classList.add('dark');\r\n } else {\r\n document.querySelector('body')!.classList.remove('dark');\r\n }\r\n};\r\n\r\nexport interface LayoutProps {\r\n route: {\r\n name: string;\r\n itemId: string;\r\n };\r\n}\r\n\r\nconst Layout: React.FunctionComponent = (props: any) => {\r\n const { route } = props;\r\n const { appState, actions } = useAppStateContext();\r\n\r\n\r\n const sitecoreContext = appState.sitecoreContextData;\r\n sitecoreContext.itemId = get(route, 'itemId');\r\n const languageCode = get(appState, 'language.languageCode', '');\r\n const {isPersonalised} = appState;\r\n const appLocation = useLocation();\r\n const isEmptyLayout = get(appState, 'dictionary.viewBag.isEmptyLayout', false);\r\n // @ts-ignore\r\n const [mainHeight, setMainHeight] = React.useState('600px');\r\n const alertBanner = get(sitecoreContext, 'configuration.alertBanner');\r\n const covidHeaderAnalytics = get(appState, 'dictionary.viewBag.navbar.covidHeaderAnalytics')\r\n\r\n const [showAlertBanner, setShowAlertBanner] = React.useState(true);\r\n const [isInIframe, setIsInIframe] = React.useState(true);\r\n\r\n const [currentRoute, setCurrentRoute] = React.useState();\r\n //const [isTrackerInitialized, setIsTrackerInitialized] = React.useState(false);\r\n const ctx = useContext(UniformContext);\r\n const btnLabel: string = getGlobalDictionaryTerm(sitecoreContext, 'closeAnnouncementBannerLabel') || \"Close announcement banner\";\r\n\r\n useEffect(() => {\r\n if (appLocation.pathname.indexOf('thank-you') > -1) {\r\n setMainHeight('100px');\r\n }\r\n if (appLocation.search.indexOf('debug=true') <= -1) {\r\n // tslint:disable-next-line:no-empty\r\n window['console']['log'] = () => {};\r\n }\r\n }, [appLocation]);\r\n\r\n useEffect(() => {\r\n if (!ctx.logger) {\r\n ctx.logger = getLogger('context');\r\n }\r\n if (typeof window !== 'undefined') {\r\n const wind = window as any;\r\n const c3 = wind.utag && wind.utag.gdpr && wind.utag.gdpr.getCookieValues().c3\r\n const consent = wind.utag && wind.utag.gdpr && wind.utag.gdpr.getCookieValues().consent\r\n if((consent && c3) || (wind.current_country != '' && COOKIES_ENABLED_COUNTRY_CODES.indexOf(wind.current_country) == -1)) {\r\n\r\n actions.setPersonalisation(true)\r\n } else {\r\n actions.setPersonalisation(false)\r\n\r\n }\r\n wind.personalisation = () => {\r\n console.log('SOMEONE CALL PERSONALISATION FROM UTAG')\r\n actions.setPersonalisation(true)\r\n\r\n }\r\n\r\n setIsInIframe(window.self !== window.top);\r\n\r\n }\r\n }, []);\r\n // const DUBAI_PRESENTS_TEMPLATES_LIST = [\r\n // 'Video Details Page',\r\n // 'Video Hub Page',\r\n // 'Episode Details Page',\r\n // 'Videos Listing Page',\r\n // 'Sections Intro Page',\r\n // 'Multiple Days Itinerary Page',\r\n // ];\r\n // const templateName = get(route, 'templateName');\r\n function getDarkModeSwitcherShow(placeholders: any): boolean {\r\n for (let key in placeholders) {\r\n const components = placeholders[key];\r\n for (let component of components) {\r\n if (component.params?.['Dark Mode Switcher Show'] == '1') {\r\n return true;\r\n }\r\n if (component.placeholders) {\r\n for (let innerKey in component.placeholders) {\r\n const innerComponents = component.placeholders[innerKey];\r\n for (let innerComponent of innerComponents) {\r\n if (innerComponent.params?.['Dark Mode Switcher Show'] == '1') {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n\r\n useEffect(() => {\r\n setCurrentRoute(route);\r\n }, [route]);\r\n useEffect(() => {\r\n const LocalStorageDarkModeValue = appState.darkMode;\r\n\r\n const DarkModeJssParamValue =\r\n get(props, \"route.placeholders\") &&\r\n getDarkModeSwitcherShow(get(props, \"route.placeholders\"));\r\n\r\n LocalStorageDarkModeValue\r\n ? setDarkMode(true, DarkModeJssParamValue)\r\n : setDarkMode(false, DarkModeJssParamValue);\r\n }, [route, appState]);\r\n\r\n /*useEffect(() => {\r\n const shouldNotTrack =\r\n !currentRoute ||\r\n isTrackerInitialized !== true ||\r\n !sitecoreContext ||\r\n currentRoute.itemId !== route.itemId;\r\n if (shouldNotTrack) {\r\n return;\r\n }\r\n\r\n doTracking({\r\n source: 'sitecore',\r\n data: sitecoreContext,\r\n debug: true,\r\n });\r\n }, [currentRoute, isTrackerInitialized, sitecoreContext]);*/\r\n\r\n\r\n // TODO: this code conflicts with personalization during rehydration resulting in lost personalized content\r\n // needs further review\r\n\r\n // useEffect(() => {\r\n // setTimeout(() => {\r\n // setMainHeight('0');\r\n // }, 1000);\r\n // }, []);\r\n\r\n return (\r\n \r\n \r\n {/* react-helmet enables setting contents, like title and OG meta tags */}\r\n {isPersonalised ? : null}\r\n \r\n \r\n \r\n\r\n \r\n

\r\n

\r\n\r\n {alertBanner && alertBanner.text && showAlertBanner && !isInIframe ? (\r\n

\r\n

\r\n {\r\n tealiumClickFunc(covidHeaderAnalytics, window.location.href);\r\n }}\r\n dangerouslySetInnerHTML={{\r\n __html: get(appState, 'sitecoreContextData.configuration.alertBanner.text'),\r\n }}\r\n >

\r\n

\r\n \r\n

\r\n

\r\n ) : null}\r\n \r\n

\r\n \r\n {!isEmptyLayout &&\r\n get(appState, 'sitecoreContextData.configuration.globalAnnouncementBanner.text') && (\r\n

\r\n

\r\n \r\n )}\r\n \r\n \r\n {routePatterns.map((routePattern) => (\r\n \r\n ))}\r\n \r\n {!isEmptyLayout && }\r\n {languageCode === 'en' && (\r\n \r\n )}\r\n

\r\n \r\n {/*\r\n We need to provide content for the loading placeholder used for the footer. This ensures\r\n that the dynamic loading script triggers for the Footer component. Without any content, it\r\n seems that the IntersectionObserver never intersects with the Footer component and therefore\r\n the dynamic loading script doesn't load the component.\r\n\r\n NOTE: most components will not need content in order for dynamic loading to work. The Footer\r\n seems to be more of an edge case.\r\n */}\r\n \r\n \r\n\r\n \r\n );\r\n};\r\n\r\nfunction getLogger(name: string) {\r\n return {\r\n debug: (message: string, data: any) => {\r\n console.log(new Date().toISOString() + ` [DEBUG] [${name}] ` + message, data);\r\n },\r\n info: (message: string, data: any) => {\r\n console.log(new Date().toISOString() + ` [INFO] [${name}] ` + message, data);\r\n },\r\n warn: (message: string, data: any) => {\r\n console.log(new Date().toISOString() + ` [WARN] [${name}] ` + message, data);\r\n },\r\n error: (message: string, data: any) => {\r\n console.log(new Date().toISOString() + ` [ERROR] [${name}] ` + message, data);\r\n },\r\n };\r\n}\r\n\r\nexport default Layout;\r\n","export const getCountryFromContext = (sitecoreContext) => {\r\n let country_code;\r\n const edgescape = sitecoreContext?.headers?.akamai?.edgescape;\r\n if (edgescape) {\r\n const segments = edgescape.split(\",\");\r\n segments.forEach((pair) => {\r\n pair = pair.split(\"=\");\r\n switch (pair[0]) {\r\n case \"country_code\":\r\n country_code = pair[1];\r\n break;\r\n default:\r\n }\r\n });\r\n }\r\n return country_code;\r\n};\r\n","import { getCountryFromContext } from \"./getCountryFromContext\";\r\n\r\n// Condition for handling the `country` archetype.\r\nfunction countryArchetypeCondition(sitecoreContext) {\r\n // This should be used to extract the country from the Sitecore context\r\n // that is provided by Akamai.\r\n const resolveCountry = () => {\r\n return getCountryFromContext(sitecoreContext);\r\n };\r\n\r\n // Return matches from the country the user is tagged with.\r\n const getValues = ({ mappings, sitecoreContext }) => {\r\n const country = resolveCountry(sitecoreContext);\r\n return mappings[country] || [];\r\n };\r\n\r\n // Expose a way to retrieve the values from this condition.\r\n return {\r\n getValues,\r\n };\r\n}\r\n\r\n// A collection of all Archetypes we support.\r\nconst archetypeConditions = (sitecoreContext) => {\r\n return {\r\n country: countryArchetypeCondition(sitecoreContext),\r\n };\r\n};\r\n\r\nexport const resolveListPersonalization = (() => {\r\n return (intents, sitecoreContext) => {\r\n // Iterate all of the personalization rules applied\r\n const conditions = intents?.targetItems\r\n .map((i) => {\r\n // The identifier value for this Archetype, this matches the value in the\r\n // `archetypeConditions` object.\r\n const identifier = i.identifier.value;\r\n\r\n // Check if we have a handler\r\n let handler = archetypeConditions(sitecoreContext)[identifier];\r\n\r\n // If not, warn and just return null.\r\n if (!handler) {\r\n console.warn(\r\n `personalization handler for ${identifier} not defined.`\r\n );\r\n return null;\r\n }\r\n\r\n // Extract all of the mappings for this Archetype which is a mapping between a\r\n // string value and a tag.\r\n const mappings = {};\r\n i.children.forEach((mapping) => {\r\n const { value, tags } = mapping;\r\n mappings[value?.value] = tags.targetItems.map(\r\n (tag) => tag?.name?.value\r\n );\r\n });\r\n\r\n // Return the identifier/handler/mappings for this condition\r\n return {\r\n identifier: identifier,\r\n handler,\r\n mappings,\r\n };\r\n })\r\n .filter((condition) => condition); // Filter nulls from unsupported!\r\n\r\n return conditions;\r\n };\r\n})();\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useAppStateContext } from '../lib/AppStateProvider';\r\n\r\nimport { resolveListPersonalization } from '../uniform/personalization/resolveListPersonalization';\r\nimport { algoliaScoredCondition } from '../uniform/personalization/algoliaScoredCondition';\r\nimport { getCountryFromContext } from '../uniform/personalization/getCountryFromContext';\r\n\r\nimport { usePersonalizedList } from '@uniformdev/personalize-react';\r\nimport algoliasearch from 'algoliasearch';\r\n\r\nconst ALGOLIA_APPID = 'V3CV7A7CMC';\r\nconst ALGOLIA_APIKEY = '35a59b61c1577464818fdb267015c3d2';\r\nconst ALGOLIA_INDEXNAME = 'vd_en';\r\n\r\n// Responsible for building a single tag field filter with an\r\n// optional score value.\r\nconst buildTagField = (field, value, score) => {\r\n let fieldFilter = `${field}:${value}`;\r\n\r\n if (score) {\r\n fieldFilter += ``;\r\n }\r\n\r\n return fieldFilter;\r\n};\r\n\r\nconst loadCategoryAlgoliaResults = (matchedCategories) => {\r\n return new Promise((resolve) => {\r\n // The field that contains tags to match against\r\n const tagField = 'tags';\r\n\r\n // How many matches the user has, plus one because the default\r\n // score for Algolia is 1 on a match so boost above that slightly.\r\n const matchedCount = matchedCategories.length + 1;\r\n\r\n // Build pieces that will be passed and OR'ed together by Algolia\r\n const queryPieces = matchedCategories.map((category, index) => {\r\n const filter = buildTagField(tagField, category, matchedCount - index);\r\n return filter;\r\n });\r\n\r\n // Build a fallback condition so we don't filter out anything from queries.\r\n const fallbackCondition = buildTagField(tagField, '-tag');\r\n\r\n // Init the client and index.\r\n const client = algoliasearch(ALGOLIA_APPID, ALGOLIA_APIKEY);\r\n const index = client.initIndex(ALGOLIA_INDEXNAME);\r\n\r\n // Perform a search using the condition\r\n index\r\n .search('', {\r\n sumOrFiltersScores: true, // This tells Algolia to add the filter tag scores together so we get a \"total\" weight\r\n getRankingInfo: true, // Used to sort client side, highest scored item likely will not be at the top.\r\n facetFilters: ['type:Article', [...queryPieces, fallbackCondition]], // Query filters.\r\n })\r\n .then((response) => {\r\n // Extract the results and do a pass of sorting clientside.\r\n const { hits } = response;\r\n hits.sort((a, b) => b._rankingInfo.filters - a._rankingInfo.filters);\r\n resolve(hits);\r\n });\r\n });\r\n};\r\n\r\nconst MTwo = React.memo(function ({ fields, route }) {\r\n // State placeholder for results that should be personalized.\r\n const [results, setResults] = useState([]);\r\n const { appState } = useAppStateContext();\r\n const sitecoreContext = appState?.sitecoreContextData;\r\n\r\n const country_code = getCountryFromContext(sitecoreContext);\r\n\r\n // Extract required fields from the integrated query.\r\n const {\r\n data: {\r\n datasource: { intents },\r\n contextItem,\r\n },\r\n } = fields;\r\n\r\n // Resolve used conditions based on what is selected with the integrated query\r\n const conditions = resolveListPersonalization(intents, sitecoreContext);\r\n\r\n // Holder for all condition values\r\n const allValues = [];\r\n\r\n // Iterate all conditions and determine what the current user is tagged with.\r\n conditions &&\r\n Array.isArray(conditions) &&\r\n conditions.forEach((condition) => {\r\n const { handler, mappings } = condition;\r\n\r\n const conditionValues = handler.getValues({\r\n mappings,\r\n sitecoreContext,\r\n });\r\n\r\n if (conditionValues) {\r\n allValues.push(...conditionValues);\r\n }\r\n });\r\n\r\n // Used to fetch results from Algolia based on the conditions.\r\n useEffect(() => {\r\n (async () => {\r\n const hits = await loadCategoryAlgoliaResults(allValues || []);\r\n setResults(hits);\r\n refreshTracking();\r\n })();\r\n }, []);\r\n\r\n // Personalize the results list from Algolia\r\n const { personalizedList, refreshTracking } = usePersonalizedList({\r\n rendering: contextItem,\r\n route,\r\n list: results,\r\n conditions: [algoliaScoredCondition(allValues)],\r\n });\r\n\r\n return (\r\n <>\r\n

Personalization for {country_code}

\r\n

\r\n {item.title} (Score: {item._rankingInfo.filters},{' '}\r\n Tags: {item.tags.join(', ')})\r\n

\r\n \r\n );\r\n});\r\n\r\nexport default MTwo;\r\n","export const algoliaScoredCondition = (matchedCategories) => {\r\n return {\r\n weight: 1, // No weighting on this field, pass as a param if there are multiple conditions and this field should be weighted above or below others.\r\n rule: ({ item }) => {\r\n // Algolia results have a tag field, it's a string array.\r\n const tags = item.tags || [];\r\n \r\n // Determine which tags the current item matches\r\n const matches = matchedCategories.find(tag => {\r\n return tags.indexOf(tag) > -1;\r\n })\r\n \r\n // Just return the Algolia score here and any item matches.\r\n return {\r\n score: item._rankingInfo.filters,\r\n matches\r\n }\r\n }\r\n }\r\n}","import loadable from 'react-loadable-visibility/loadable-components';\r\nimport {\r\n EsiChoose,\r\n EsiInclude,\r\n EsiOtherwise,\r\n EsiWhen,\r\n EsiNullComponent,\r\n EsiForEach,\r\n EsiAssign,\r\n EsiText,\r\n EsiScript,\r\n EsiNoOutput,\r\n} from '@uniformdev/esi-jss-react';\r\n// @ts-ignore\r\nimport MTwo from './components/mtwo';\r\nimport { getPersonalizedProps } from '@uniformdev/esi-jss-react';\r\nimport { getPersonalizer } from '@uniformdev/personalize-react';\r\n\r\n// Do not modify anything within the `` comments.\r\n// The content within those comments is automatically generated by\r\n// the `/scripts/generate-component-factory.js` script.\r\n\r\n// \n\n\nimport {\nAccordionFAQ,\nAccordionGeneric,\nAccordionSteps,\nSystemMessageBanner,\nGeneralCardCompleteRound,\nGeneralCardIconCards,\nGeneralCardImageCards,\nRichText,\nOfferAndDeal,\nTabsHorizontal,\nStickyFooter,\nOfferAndDealDetails,\nOffersAndDealsTopPicks,\nHighlightBanner,\nCurators,\nSurpriseWizard,\nCategoryTiles,\nTabsCarouselComponentListing,\nWizardCategories,\nNewsPRs,\nSectionIntro,\nCategoriesChildren,\nCategoriesSiblings,\nTabs,\nMultipleQuoteTestimonial,\nCuratorHeader,\nHeaderArticle1,\nHeaderCarousel,\nHeaderGenericPrimaryLeisure,\nHeaderGenericSecondary,\nHeaderGenericTertiary,\nHeaderListingPage,\nHeaderListingPagePersonalizable,\nHeaderMedia,\nWhatsonHeader,\nInsightsHeader,\nItineraryCoverHeader,\nItineraryDayViewHeader,\nPersonalizablePrimaryHeader,\nPOIHeader,\nTimelineNavigationCompact,\nAnnouncementBanner,\nAnchorItem,\nAnchorList,\nLoader,\nCardMultiple,\nCodeSnippet,\nCommonPageContainer,\nGenericPageContainer,\nDynamicPopup,\nEventsWidget,\nHeaderForActivationPage,\nIdentifyTravelers,\nListingServicesHeader,\nDeleteAccount,\nMainText,\nManagedWidget,\nMultifunctionalCards,\nPopularCuisines,\nRedirectToReturnUrl,\nRestaurantsHeadingAndContentBlock,\nRichTextBubble,\nScrollToBlock,\nSearchRestaurants,\nSkipContentButtons,\nSurpriseMeForm,\nUnbelievableSummerDeals\n} from '@dtcm/ui-components';\n\nconst components = new Map();\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('AccordionCombo', loadable(() => import(/* webpackChunkName: \"AccordionCombo\" */'@dtcm/ui-components/dist/components/01_AccordionCombo/AccordionCombo')))\ncomponents.set('AccordionFAQ', AccordionFAQ);\ncomponents.set('AccordionGeneric', AccordionGeneric);\ncomponents.set('AccordionSteps', AccordionSteps);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Articles', loadable(() => import(/* webpackChunkName: \"Articles\" */'@dtcm/ui-components/dist/components/02_Articles/Articles')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ArticlesFeatureCarousel', loadable(() => import(/* webpackChunkName: \"ArticlesFeatureCarousel\" */'@dtcm/ui-components/dist/components/02_ArticlesFeatureCarousel/ArticlesFeatureCarousel')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CuratorArticles', loadable(() => import(/* webpackChunkName: \"CuratorArticles\" */'@dtcm/ui-components/dist/components/02_CuratorArticles/CuratorArticles')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('AnchorNavigation', loadable(() => import(/* webpackChunkName: \"AnchorNavigation\" */'@dtcm/ui-components/dist/components/03_AnchorNavigation/AnchorNavigation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('AudioPlayer', loadable(() => import(/* webpackChunkName: \"AudioPlayer\" */'@dtcm/ui-components/dist/components/04_Audio/AudioPlayer')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BannerLarge', loadable(() => import(/* webpackChunkName: \"BannerLarge\" */'@dtcm/ui-components/dist/components/05_BannerLarge/BannerLarge')))\ncomponents.set('SystemMessageBanner', SystemMessageBanner);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BannerSmall', loadable(() => import(/* webpackChunkName: \"BannerSmall\" */'@dtcm/ui-components/dist/components/05_BannerSmall/BannerSmall')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeatMap', loadable(() => import(/* webpackChunkName: \"HeatMap\" */'@dtcm/ui-components/dist/components/06_HeatMap/HeatMap')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Table', loadable(() => import(/* webpackChunkName: \"Table\" */'@dtcm/ui-components/dist/components/06_Table/Table')))\ncomponents.set('GeneralCardCompleteRound', GeneralCardCompleteRound);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('GeneralCardIcon', loadable(() => import(/* webpackChunkName: \"GeneralCardIcon\" */'@dtcm/ui-components/dist/components/07_GeneralCardIcon/GeneralCardIcon')))\ncomponents.set('GeneralCardIconCards', GeneralCardIconCards);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('GeneralCardIconMultiple', loadable(() => import(/* webpackChunkName: \"GeneralCardIconMultiple\" */'@dtcm/ui-components/dist/components/07_GeneralCardIconMultiple/GeneralCardIconMultiple')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('GeneralCardImage', loadable(() => import(/* webpackChunkName: \"GeneralCardImage\" */'@dtcm/ui-components/dist/components/07_GeneralCardImage/GeneralCardImage')))\ncomponents.set('GeneralCardImageCards', GeneralCardImageCards);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('GeneralCardImageMultiple', loadable(() => import(/* webpackChunkName: \"GeneralCardImageMultiple\" */'@dtcm/ui-components/dist/components/07_GeneralCardImageMultiple/GeneralCardImageMultiple')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('SubcategoriesCompleteMultiple', loadable(() => import(/* webpackChunkName: \"SubcategoriesCompleteMultiple\" */'@dtcm/ui-components/dist/components/07_SubcategoriesCompleteMultiple/SubcategoriesCompleteMultiple')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ContactCard', loadable(() => import(/* webpackChunkName: \"ContactCard\" */'@dtcm/ui-components/dist/components/08_ContactCard/ContactCard')))\ncomponents.set('RichText', RichText);\ncomponents.set('OfferAndDeal', OfferAndDeal);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListingOffersAndDeals', loadable(() => import(/* webpackChunkName: \"ListingOffersAndDeals\" */'@dtcm/ui-components/dist/components/102_ListingOffersAndDeals/ListingOffersAndDeals')))\ncomponents.set('TabsHorizontal', TabsHorizontal);\ncomponents.set('StickyFooter', StickyFooter);\ncomponents.set('OfferAndDealDetails', OfferAndDealDetails);\ncomponents.set('OffersAndDealsTopPicks', OffersAndDealsTopPicks);\ncomponents.set('HighlightBanner', HighlightBanner);\ncomponents.set('Curators', Curators);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ProfileCards', loadable(() => import(/* webpackChunkName: \"ProfileCards\" */'@dtcm/ui-components/dist/components/10_ProfileCards/ProfileCards')))\ncomponents.set('SurpriseWizard', SurpriseWizard);\ncomponents.set('CategoryTiles', CategoryTiles);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CTAVariation', loadable(() => import(/* webpackChunkName: \"CTAVariation\" */'@dtcm/ui-components/dist/components/113_CTAVariation/CTAVariation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('InteractiveBanner', loadable(() => import(/* webpackChunkName: \"InteractiveBanner\" */'@dtcm/ui-components/dist/components/113_InteractiveBanner/InteractiveBanner')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('InteractiveMap', loadable(() => import(/* webpackChunkName: \"InteractiveMap\" */'@dtcm/ui-components/dist/components/114_InteractiveMap/InteractiveMap')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('OverlayTiles', loadable(() => import(/* webpackChunkName: \"OverlayTiles\" */'@dtcm/ui-components/dist/components/114_OverlayTiles/OverlayTiles')))\ncomponents.set('TabsCarouselComponentListing', TabsCarouselComponentListing);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('StepCards', loadable(() => import(/* webpackChunkName: \"StepCards\" */'@dtcm/ui-components/dist/components/126_StepCards/StepCards')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ComparisonTable', loadable(() => import(/* webpackChunkName: \"ComparisonTable\" */'@dtcm/ui-components/dist/components/129_ComparisonTable/ComparisonTable')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Download', loadable(() => import(/* webpackChunkName: \"Download\" */'@dtcm/ui-components/dist/components/12_Download/Download')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('DownloadSingle', loadable(() => import(/* webpackChunkName: \"DownloadSingle\" */'@dtcm/ui-components/dist/components/12_DownloadSingle/DownloadSingle')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('SectionDetail', loadable(() => import(/* webpackChunkName: \"SectionDetail\" */'@dtcm/ui-components/dist/components/133_SectionDetails/SectionDetail')))\ncomponents.set('WizardCategories', WizardCategories);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('FeatureCardsList', loadable(() => import(/* webpackChunkName: \"FeatureCardsList\" */'@dtcm/ui-components/dist/components/135_FeatureCardsList/FeatureCardsList')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CuratorEvents', loadable(() => import(/* webpackChunkName: \"CuratorEvents\" */'@dtcm/ui-components/dist/components/15_CuratorEvents/CuratorEvents')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Events', loadable(() => import(/* webpackChunkName: \"Events\" */'@dtcm/ui-components/dist/components/15_Events/Events')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EventsFeatureCarousel', loadable(() => import(/* webpackChunkName: \"EventsFeatureCarousel\" */'@dtcm/ui-components/dist/components/15_EventsFeatureCarousel/EventsFeatureCarousel')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EloquaForm', loadable(() => import(/* webpackChunkName: \"EloquaForm\" */'@dtcm/ui-components/dist/components/19_EloquaForm/EloquaForm')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CTABlock', loadable(() => import(/* webpackChunkName: \"CTABlock\" */'@dtcm/ui-components/dist/components/20_CTABlock/CTABlock')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('FunFactsContainer', loadable(() => import(/* webpackChunkName: \"FunFactsContainer\" */'@dtcm/ui-components/dist/components/21_FunFactsContainer/FunFactsContainer')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('FunFactItem', loadable(() => import(/* webpackChunkName: \"FunFactItem\" */'@dtcm/ui-components/dist/components/21_FunFactsItem/FunFactItem')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CuratorItineraries', loadable(() => import(/* webpackChunkName: \"CuratorItineraries\" */'@dtcm/ui-components/dist/components/26_CuratorItineraries/CuratorItineraries')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Itineraries', loadable(() => import(/* webpackChunkName: \"Itineraries\" */'@dtcm/ui-components/dist/components/26_Itineraries/Itineraries')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('MediaCarousel', loadable(() => import(/* webpackChunkName: \"MediaCarousel\" */'@dtcm/ui-components/dist/components/28_MediaCarousel/MediaCarousel')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('MediaGrid', loadable(() => import(/* webpackChunkName: \"MediaGrid\" */'@dtcm/ui-components/dist/components/28_MediaGrid/MediaGrid')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('MediaImage', loadable(() => import(/* webpackChunkName: \"MediaImage\" */'@dtcm/ui-components/dist/components/28_MediaImage/MediaImage')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('MediaImage360', loadable(() => import(/* webpackChunkName: \"MediaImage360\" */'@dtcm/ui-components/dist/components/28_MediaImage360/MediaImage360')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('MediaVideo', loadable(() => import(/* webpackChunkName: \"MediaVideo\" */'@dtcm/ui-components/dist/components/28_MediaVideo/MediaVideo')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VideoTile', loadable(() => import(/* webpackChunkName: \"VideoTile\" */'@dtcm/ui-components/dist/components/28_VideoTile/VideoTile')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Login', loadable(() => import(/* webpackChunkName: \"Login\" */'@dtcm/ui-components/dist/components/30_NavigationBar/Login')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('NewsCarousel', loadable(() => import(/* webpackChunkName: \"NewsCarousel\" */'@dtcm/ui-components/dist/components/31_NewsCarousel/NewsCarousel')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('NewsInsights', loadable(() => import(/* webpackChunkName: \"NewsInsights\" */'@dtcm/ui-components/dist/components/31_NewsInsights/NewsInsights')))\ncomponents.set('NewsPRs', NewsPRs);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('NewsletterFormSection', loadable(() => import(/* webpackChunkName: \"NewsletterFormSection\" */'@dtcm/ui-components/dist/components/32_NewsletterForm/NewsletterFormSection')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Partners', loadable(() => import(/* webpackChunkName: \"Partners\" */'@dtcm/ui-components/dist/components/33_Partners/Partners')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CuratorPOIs', loadable(() => import(/* webpackChunkName: \"CuratorPOIs\" */'@dtcm/ui-components/dist/components/34_CuratorPOIs/CuratorPOIs')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('POIs', loadable(() => import(/* webpackChunkName: \"POIs\" */'@dtcm/ui-components/dist/components/34_POIs/POIs')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('PracticalInformation', loadable(() => import(/* webpackChunkName: \"PracticalInformation\" */'@dtcm/ui-components/dist/components/35_PracticalInformation/PracticalInformation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CTAsList', loadable(() => import(/* webpackChunkName: \"CTAsList\" */'@dtcm/ui-components/dist/components/36_CTAsList/CTAsList')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('QuickLinks', loadable(() => import(/* webpackChunkName: \"QuickLinks\" */'@dtcm/ui-components/dist/components/36_QuickLinks/QuickLinks')))\ncomponents.set('SectionIntro', SectionIntro);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('DetailsCardService', loadable(() => import(/* webpackChunkName: \"DetailsCardService\" */'@dtcm/ui-components/dist/components/44_DetailsCardService/DetailsCardService')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Deals', loadable(() => import(/* webpackChunkName: \"Deals\" */'@dtcm/ui-components/dist/components/44_TravelDeals/Deals')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListingTradeEvents', loadable(() => import(/* webpackChunkName: \"ListingTradeEvents\" */'@dtcm/ui-components/dist/components/44_TravelDeals/ListingTradeEvents')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListingVendors', loadable(() => import(/* webpackChunkName: \"ListingVendors\" */'@dtcm/ui-components/dist/components/44_TravelDeals/ListingVendors')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TravelDeals', loadable(() => import(/* webpackChunkName: \"TravelDeals\" */'@dtcm/ui-components/dist/components/44_TravelDeals/TravelDeals')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('SocialSharing', loadable(() => import(/* webpackChunkName: \"SocialSharing\" */'@dtcm/ui-components/dist/components/45_SocialSharing/SocialSharing')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Statistics', loadable(() => import(/* webpackChunkName: \"Statistics\" */'@dtcm/ui-components/dist/components/46_Statistics/Statistics')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('StatisticsBigNumbers', loadable(() => import(/* webpackChunkName: \"StatisticsBigNumbers\" */'@dtcm/ui-components/dist/components/46_StatisticsBigNumbers/StatisticsBigNumbers')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('StatisticsComparative', loadable(() => import(/* webpackChunkName: \"StatisticsComparative\" */'@dtcm/ui-components/dist/components/46_StatisticsComparative/StatisticsComparative')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('StatisticsContainer', loadable(() => import(/* webpackChunkName: \"StatisticsContainer\" */'@dtcm/ui-components/dist/components/46_StatisticsContainer/StatisticsContainer')))\ncomponents.set('CategoriesChildren', CategoriesChildren);\ncomponents.set('CategoriesSiblings', CategoriesSiblings);\ncomponents.set('Tabs', Tabs);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TabsWithAccordion', loadable(() => import(/* webpackChunkName: \"TabsWithAccordion\" */'@dtcm/ui-components/dist/components/49_TabsWithAccordion/TabsWithAccordion')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Tags', loadable(() => import(/* webpackChunkName: \"Tags\" */'@dtcm/ui-components/dist/components/50_Tags/Tags')))\ncomponents.set('MultipleQuoteTestimonial', MultipleQuoteTestimonial);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TestimonialCarousel', loadable(() => import(/* webpackChunkName: \"TestimonialCarousel\" */'@dtcm/ui-components/dist/components/51_TestimonialCarousel/TestimonialCarousel')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TestimonialMedia', loadable(() => import(/* webpackChunkName: \"TestimonialMedia\" */'@dtcm/ui-components/dist/components/51_TestimonialMedia/TestimonialMedia')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TestimonialMultipleMedia', loadable(() => import(/* webpackChunkName: \"TestimonialMultipleMedia\" */'@dtcm/ui-components/dist/components/51_TestimonialMultipleMedia/TestimonialMultipleMedia')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TestimonialQuote', loadable(() => import(/* webpackChunkName: \"TestimonialQuote\" */'@dtcm/ui-components/dist/components/51_TestimonialQuote/TestimonialQuote')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TestimonialStatement', loadable(() => import(/* webpackChunkName: \"TestimonialStatement\" */'@dtcm/ui-components/dist/components/51_TestimonialStatement/TestimonialStatement')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('UserGeneratedContent', loadable(() => import(/* webpackChunkName: \"UserGeneratedContent\" */'@dtcm/ui-components/dist/components/53_UserGeneratedContent/UserGeneratedContent')))\ncomponents.set('CuratorHeader', CuratorHeader);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EventHeader', loadable(() => import(/* webpackChunkName: \"EventHeader\" */'@dtcm/ui-components/dist/components/57_EventHeader/EventHeader')))\ncomponents.set('HeaderArticle1', HeaderArticle1);\ncomponents.set('HeaderCarousel', HeaderCarousel);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeaderContextImage', loadable(() => import(/* webpackChunkName: \"HeaderContextImage\" */'@dtcm/ui-components/dist/components/57_HeaderContextImage/HeaderContextImage')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeaderGenericLegislation', loadable(() => import(/* webpackChunkName: \"HeaderGenericLegislation\" */'@dtcm/ui-components/dist/components/57_HeaderGenericLegislation/HeaderGenericLegislation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeaderGenericPrimary', loadable(() => import(/* webpackChunkName: \"HeaderGenericPrimary\" */'@dtcm/ui-components/dist/components/57_HeaderGenericPrimary/HeaderGenericPrimary')))\ncomponents.set('HeaderGenericPrimaryLeisure', HeaderGenericPrimaryLeisure);\ncomponents.set('HeaderGenericSecondary', HeaderGenericSecondary);\ncomponents.set('HeaderGenericTertiary', HeaderGenericTertiary);\ncomponents.set('HeaderListingPage', HeaderListingPage);\ncomponents.set('HeaderListingPagePersonalizable', HeaderListingPagePersonalizable);\ncomponents.set('HeaderMedia', HeaderMedia);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeaderMedia360', loadable(() => import(/* webpackChunkName: \"HeaderMedia360\" */'@dtcm/ui-components/dist/components/57_HeaderMedia360/HeaderMedia360')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeaderPressRelease', loadable(() => import(/* webpackChunkName: \"HeaderPressRelease\" */'@dtcm/ui-components/dist/components/57_HeaderPressRelease/HeaderPressRelease')))\ncomponents.set('WhatsonHeader', WhatsonHeader);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeroPrimary', loadable(() => import(/* webpackChunkName: \"HeroPrimary\" */'@dtcm/ui-components/dist/components/57_HeroPrimary/HeroPrimary')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('HeroSecondary', loadable(() => import(/* webpackChunkName: \"HeroSecondary\" */'@dtcm/ui-components/dist/components/57_HeroSecondary/HeroSecondary')))\ncomponents.set('InsightsHeader', InsightsHeader);\ncomponents.set('ItineraryCoverHeader', ItineraryCoverHeader);\ncomponents.set('ItineraryDayViewHeader', ItineraryDayViewHeader);\ncomponents.set('PersonalizablePrimaryHeader', PersonalizablePrimaryHeader);\ncomponents.set('POIHeader', POIHeader);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ServicesHeader', loadable(() => import(/* webpackChunkName: \"ServicesHeader\" */'@dtcm/ui-components/dist/components/57_ServicesHeader/ServicesHeader')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('MediaAndCopy', loadable(() => import(/* webpackChunkName: \"MediaAndCopy\" */'@dtcm/ui-components/dist/components/58_MediaAndCopy/MediaAndCopy')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Map', loadable(() => import(/* webpackChunkName: \"Map\" */'@dtcm/ui-components/dist/components/60_Map/Map')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('NeighborhoodsMap', loadable(() => import(/* webpackChunkName: \"NeighborhoodsMap\" */'@dtcm/ui-components/dist/components/60_NeighborhoodsMap/NeighborhoodsMap')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BottomNavigation', loadable(() => import(/* webpackChunkName: \"BottomNavigation\" */'@dtcm/ui-components/dist/components/61_BottomNavigation/BottomNavigation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ItineraryBottomNavigation', loadable(() => import(/* webpackChunkName: \"ItineraryBottomNavigation\" */'@dtcm/ui-components/dist/components/61_ItineraryBottomNavigation/ItineraryBottomNavigation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Timeline', loadable(() => import(/* webpackChunkName: \"Timeline\" */'@dtcm/ui-components/dist/components/62_Timeline/Timeline')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CuratorMatcher', loadable(() => import(/* webpackChunkName: \"CuratorMatcher\" */'@dtcm/ui-components/dist/components/65_CuratorMatcher/CuratorMatcher')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VisaRequirementsWizard', loadable(() => import(/* webpackChunkName: \"VisaRequirementsWizard\" */'@dtcm/ui-components/dist/components/65_VisaRequirementsWizard/VisaRequirementsWizard')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('WizardTraining', loadable(() => import(/* webpackChunkName: \"WizardTraining\" */'@dtcm/ui-components/dist/components/65_WizardTraining/WizardTraining')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ItineraryOverview', loadable(() => import(/* webpackChunkName: \"ItineraryOverview\" */'@dtcm/ui-components/dist/components/68_ItineraryOverview/ItineraryOverview')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ItineraryPOIsOverview', loadable(() => import(/* webpackChunkName: \"ItineraryPOIsOverview\" */'@dtcm/ui-components/dist/components/68_ItineraryPOIsOverview/ItineraryPOIsOverview')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TimelineNavigation', loadable(() => import(/* webpackChunkName: \"TimelineNavigation\" */'@dtcm/ui-components/dist/components/69_TimelineNavigation/TimelineNavigation')))\ncomponents.set('TimelineNavigationCompact', TimelineNavigationCompact);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ItineraryFoodBreak', loadable(() => import(/* webpackChunkName: \"ItineraryFoodBreak\" */'@dtcm/ui-components/dist/components/70_ItineraryFoods/ItineraryFoodBreak')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('AutoDownload', loadable(() => import(/* webpackChunkName: \"AutoDownload\" */'@dtcm/ui-components/dist/components/71_AutoDownload/AutoDownload')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('IndexList', loadable(() => import(/* webpackChunkName: \"IndexList\" */'@dtcm/ui-components/dist/components/75_IndexList/IndexList')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EditableListicleEvents', loadable(() => import(/* webpackChunkName: \"EditableListicleEvents\" */'@dtcm/ui-components/dist/components/77_EditableListicleEvents/EditableListicleEvents')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EditableListiclePOIs', loadable(() => import(/* webpackChunkName: \"EditableListiclePOIs\" */'@dtcm/ui-components/dist/components/77_EditableListiclePOIs/EditableListiclePOIs')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListicleEvents', loadable(() => import(/* webpackChunkName: \"ListicleEvents\" */'@dtcm/ui-components/dist/components/77_ListicleEvents/ListicleEvents')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListicleItem', loadable(() => import(/* webpackChunkName: \"ListicleItem\" */'@dtcm/ui-components/dist/components/77_ListicleItem/ListicleItem')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListicleMedia', loadable(() => import(/* webpackChunkName: \"ListicleMedia\" */'@dtcm/ui-components/dist/components/77_ListicleMedia/ListicleMedia')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ListiclePOIs', loadable(() => import(/* webpackChunkName: \"ListiclePOIs\" */'@dtcm/ui-components/dist/components/77_ListiclePOIs/ListiclePOIs')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CuratorSection', loadable(() => import(/* webpackChunkName: \"CuratorSection\" */'@dtcm/ui-components/dist/components/78_CuratorSection/CuratorSection')))\ncomponents.set('AnnouncementBanner', AnnouncementBanner);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('WidgetCurrencyConverter', loadable(() => import(/* webpackChunkName: \"WidgetCurrencyConverter\" */'@dtcm/ui-components/dist/components/84_WidgetCurrencyConverter/WidgetCurrencyConverter')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('AccountNavigation', loadable(() => import(/* webpackChunkName: \"AccountNavigation\" */'@dtcm/ui-components/dist/components/AccountNavigation/AccountNavigation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('AccountOverview', loadable(() => import(/* webpackChunkName: \"AccountOverview\" */'@dtcm/ui-components/dist/components/AccountOverview/AccountOverview')))\ncomponents.set('AnchorItem', AnchorItem);\ncomponents.set('AnchorList', AnchorList);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Form', loadable(() => import(/* webpackChunkName: \"Form\" */'@dtcm/ui-components/dist/components/atoms/Forms/Form')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('InteractiveGoogleMap', loadable(() => import(/* webpackChunkName: \"InteractiveGoogleMap\" */'@dtcm/ui-components/dist/components/atoms/InteractiveMap/InteractiveGoogleMap')))\ncomponents.set('Loader', Loader);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Video', loadable(() => import(/* webpackChunkName: \"Video\" */'@dtcm/ui-components/dist/components/atoms/Video/Video')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BrightcoveVideoBanner', loadable(() => import(/* webpackChunkName: \"BrightcoveVideoBanner\" */'@dtcm/ui-components/dist/components/BrightcoveVideoBanner/index')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BrightcoveVideoDetails', loadable(() => import(/* webpackChunkName: \"BrightcoveVideoDetails\" */'@dtcm/ui-components/dist/components/BrightcoveVideoDetails/index')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BrightcoveVideoDetailsHeader', loadable(() => import(/* webpackChunkName: \"BrightcoveVideoDetailsHeader\" */'@dtcm/ui-components/dist/components/BrightcoveVideoDetailsHeader/index')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BrightcoveVideos', loadable(() => import(/* webpackChunkName: \"BrightcoveVideos\" */'@dtcm/ui-components/dist/components/BrightcoveVideos/index')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('BrightcoveVideosHeader', loadable(() => import(/* webpackChunkName: \"BrightcoveVideosHeader\" */'@dtcm/ui-components/dist/components/BrightcoveVideosHeader/index')))\ncomponents.set('CardMultiple', CardMultiple);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Chart', loadable(() => import(/* webpackChunkName: \"Chart\" */'@dtcm/ui-components/dist/components/Chart/Chart')))\ncomponents.set('CodeSnippet', CodeSnippet);\ncomponents.set('CommonPageContainer', CommonPageContainer);\ncomponents.set('GenericPageContainer', GenericPageContainer);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('CookiePolicy', loadable(() => import(/* webpackChunkName: \"CookiePolicy\" */'@dtcm/ui-components/dist/components/CookiePolicy/CookiePolicy')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('DashboardHeader', loadable(() => import(/* webpackChunkName: \"DashboardHeader\" */'@dtcm/ui-components/dist/components/DashboardHeader/DashboardHeader')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('DynamicListingComponent', loadable(() => import(/* webpackChunkName: \"DynamicListingComponent\" */'@dtcm/ui-components/dist/components/DynamicListingComponent/DynamicListingComponent')))\ncomponents.set('DynamicPopup', DynamicPopup);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EmiratesFlightWidget', loadable(() => import(/* webpackChunkName: \"EmiratesFlightWidget\" */'@dtcm/ui-components/dist/components/EmiratesFlightWidget/index')))\ncomponents.set('EventsWidget', EventsWidget);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('FlyDubaiWidget', loadable(() => import(/* webpackChunkName: \"FlyDubaiWidget\" */'@dtcm/ui-components/dist/components/FlyDubaiWidget/index')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('FrontendSystemRedirect', loadable(() => import(/* webpackChunkName: \"FrontendSystemRedirect\" */'@dtcm/ui-components/dist/components/FrontendSystemRedirect/FrontendSystemRedirect')))\ncomponents.set('HeaderForActivationPage', HeaderForActivationPage);\ncomponents.set('IdentifyTravelers', IdentifyTravelers);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Listing', loadable(() => import(/* webpackChunkName: \"Listing\" */'@dtcm/ui-components/dist/components/Listing/Listing')))\ncomponents.set('ListingServicesHeader', ListingServicesHeader);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ChangePassword', loadable(() => import(/* webpackChunkName: \"ChangePassword\" */'@dtcm/ui-components/dist/components/Login/ChangePassword')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TwitterRedirect', loadable(() => import(/* webpackChunkName: \"TwitterRedirect\" */'@dtcm/ui-components/dist/components/Login/components/TwitterRedirect')))\ncomponents.set('DeleteAccount', DeleteAccount);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('EditProfile', loadable(() => import(/* webpackChunkName: \"EditProfile\" */'@dtcm/ui-components/dist/components/Login/EditProfile')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Login', loadable(() => import(/* webpackChunkName: \"Login\" */'@dtcm/ui-components/dist/components/Login/Login')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('NewPassword', loadable(() => import(/* webpackChunkName: \"NewPassword\" */'@dtcm/ui-components/dist/components/Login/NewPassword')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Register', loadable(() => import(/* webpackChunkName: \"Register\" */'@dtcm/ui-components/dist/components/Login/Register')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('RegisterAuthentication', loadable(() => import(/* webpackChunkName: \"RegisterAuthentication\" */'@dtcm/ui-components/dist/components/Login/RegisterAuthentication')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('ResetPassword', loadable(() => import(/* webpackChunkName: \"ResetPassword\" */'@dtcm/ui-components/dist/components/Login/ResetPassword')))\ncomponents.set('MainText', MainText);\ncomponents.set('ManagedWidget', ManagedWidget);\ncomponents.set('MultifunctionalCards', MultifunctionalCards);\ncomponents.set('PopularCuisines', PopularCuisines);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('RecommendationListing', loadable(() => import(/* webpackChunkName: \"RecommendationListing\" */'@dtcm/ui-components/dist/components/RecommendationListing/RecommendationListing')))\ncomponents.set('RedirectToReturnUrl', RedirectToReturnUrl);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('RestaurantsCarousel', loadable(() => import(/* webpackChunkName: \"RestaurantsCarousel\" */'@dtcm/ui-components/dist/components/RestaurantsCarousel/RestaurantsCarousel')))\ncomponents.set('RestaurantsHeadingAndContentBlock', RestaurantsHeadingAndContentBlock);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('RestaurantsListing', loadable(() => import(/* webpackChunkName: \"RestaurantsListing\" */'@dtcm/ui-components/dist/components/RestaurantsListing/RestaurantsListing')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('RestaurantsNavigation', loadable(() => import(/* webpackChunkName: \"RestaurantsNavigation\" */'@dtcm/ui-components/dist/components/RestaurantsNavigation/RestaurantsNavigation')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('RestaurantsSmallBanner', loadable(() => import(/* webpackChunkName: \"RestaurantsSmallBanner\" */'@dtcm/ui-components/dist/components/RestaurantsSmallBanner/RestaurantsSmallBanner')))\ncomponents.set('RichTextBubble', RichTextBubble);\ncomponents.set('ScrollToBlock', ScrollToBlock);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Search', loadable(() => import(/* webpackChunkName: \"Search\" */'@dtcm/ui-components/dist/components/Search/Search')))\ncomponents.set('SearchRestaurants', SearchRestaurants);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('Sitemap', loadable(() => import(/* webpackChunkName: \"Sitemap\" */'@dtcm/ui-components/dist/components/Sitemap/Sitemap')))\ncomponents.set('SkipContentButtons', SkipContentButtons);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('SoftixThankYou', loadable(() => import(/* webpackChunkName: \"SoftixThankYou\" */'@dtcm/ui-components/dist/components/SoftixThankYou/SoftixThankYou')))\ncomponents.set('SurpriseMeForm', SurpriseMeForm);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TicketPurchase', loadable(() => import(/* webpackChunkName: \"TicketPurchase\" */'@dtcm/ui-components/dist/components/TicketPurchase/TicketPurchase')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TicketsPurchases', loadable(() => import(/* webpackChunkName: \"TicketsPurchases\" */'@dtcm/ui-components/dist/components/TicketsPurchases/TicketsPurchases')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('TopPicks', loadable(() => import(/* webpackChunkName: \"TopPicks\" */'@dtcm/ui-components/dist/components/TopPicks/TopPicks')))\ncomponents.set('UnbelievableSummerDeals', UnbelievableSummerDeals);\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VenueBlock', loadable(() => import(/* webpackChunkName: \"VenueBlock\" */'@dtcm/ui-components/dist/components/VenueBlock/VenueBlock')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VenueHeader', loadable(() => import(/* webpackChunkName: \"VenueHeader\" */'@dtcm/ui-components/dist/components/VenueHeader/VenueHeader')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VenueKeyStats', loadable(() => import(/* webpackChunkName: \"VenueKeyStats\" */'@dtcm/ui-components/dist/components/VenueKeyStats/VenueKeyStats')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VenueShortlist', loadable(() => import(/* webpackChunkName: \"VenueShortlist\" */'@dtcm/ui-components/dist/components/VenueShortlist/VenueShortlist')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('VenueTable', loadable(() => import(/* webpackChunkName: \"VenueTable\" */'@dtcm/ui-components/dist/components/VenueTable/VenueTable')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('WeatherWidget', loadable(() => import(/* webpackChunkName: \"WeatherWidget\" */'@dtcm/ui-components/dist/components/WeatherWidget/WeatherWidget')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('YourTicketsPurchases', loadable(() => import(/* webpackChunkName: \"YourTicketsPurchases\" */'@dtcm/ui-components/dist/components/YourTicketsPurchases/YourTicketsPurchases')))\n\n// NOTE: 'import' paths _must_ be static in order for webpack to be able to analyze them at build time.\ncomponents.set('YourTopPicks', loadable(() => import(/* webpackChunkName: \"YourTopPicks\" */'@dtcm/ui-components/dist/components/YourTopPicks/YourTopPicks')))\n\n// \r\ncomponents.set('HeaderGenericPrimary', HeaderGenericPrimaryLeisure);\r\n\r\ncomponents.set('GenericSecondaryHeader', HeaderGenericSecondary);\r\n\r\ncomponents.set('EsiWhen', EsiWhen);\r\ncomponents.set('EsiChoose', EsiChoose);\r\ncomponents.set('EsiInclude', EsiInclude);\r\ncomponents.set('EsiOtherwise', EsiOtherwise);\r\ncomponents.set('EsiNullComponent', EsiNullComponent);\r\ncomponents.set('EsiForEach', EsiForEach);\r\ncomponents.set('EsiAssign', EsiAssign);\r\ncomponents.set('EsiText', EsiText);\r\ncomponents.set('EsiScript', EsiScript);\r\ncomponents.set('EsiNoOutput', EsiNoOutput);\r\n\r\ncomponents.set('MTwo', MTwo);\r\n\r\nconst nonPersonalizableComponents = [\r\n 'EsiAssign',\r\n 'EsiChoose',\r\n 'EsiForEach',\r\n 'EsiInclude',\r\n 'EsiNoOutput',\r\n 'EsiNullComponent',\r\n 'EsiOtherwise',\r\n 'EsiScript',\r\n 'EsiText',\r\n 'EsiWhen',\r\n];\r\n\r\nfunction doNotPersonalize(componentName: string) {\r\n return nonPersonalizableComponents.indexOf(componentName) != -1;\r\n}\r\n\r\n//\r\n//The allowed array is a collection of component names\r\n//that support personalization. If the array is empty,\r\n//all components are supported. If the array has at\r\n//least one item, only the components whose names\r\n//match a value in the array are supported.\r\nconst allowed = ['PersonalizablePrimaryHeader'];\r\nconst Personalizer = getPersonalizer({ components, getPersonalizedProps, allowed });\r\n\r\nexport default function componentFactory(componentName: string) {\r\n const component = components.get(componentName);\r\n\r\n if (!components.has(componentName) && componentName.match(/Container$/)) {\r\n return components.get('CommonPageContainer');\r\n }\r\n\r\n if (doNotPersonalize(componentName)) {\r\n return component;\r\n }\r\n\r\n if(allowed.includes(componentName)){\r\n return Personalizer;\r\n }\r\n\r\n return component;\r\n}\r\n","import React, { useContext, useEffect, ReactElement } from 'react';\r\nimport { useAppStateContext } from './AppStateProvider';\r\nimport { __RouterContext, RouteComponentProps, match } from 'react-router';\r\nimport { matchRoute } from './routerUtils';\r\n\r\n// Component responsible for fetching route data if needed.\r\n// This could probably be converted to a hook.\r\nexport const RouteDataManager: React.FC = (props) => {\r\n const { appState, actions } = useAppStateContext();\r\n\r\n // Always assume that appState contains the correctly resolved language.\r\n // This assumption can be made because we do not provide client-side language switching.\r\n // Language switching requires a full page reload.\r\n const resolvedLanguage = appState.language;\r\n\r\n const routerContext = useContext(__RouterContext);\r\n const route = resolveRouterRoute(routerContext);\r\n const routeParams: {\r\n sitecoreRoute?: string;\r\n lang?: string;\r\n } = (route && route.params) || {};\r\n\r\n // routeParams take precedence over state\r\n // sitecoreRoute will only be populated if there is a value after `/` in the requested URL\r\n // appState.routePath is populated by server.js and index.js before initial render\r\n // appState.routePath is updated during route fetching\r\n\r\n // `sitecoreRoute` may be undefined when the current URL is `/` or\r\n // when the current URL starts with a language parameter, `/en-CA/`\r\n // If so, we need to \"resolve\" to the `/` path to ensure that\r\n // the `useEffect` below is triggered and route data is fetched.\r\n let resolvedRoute: string;\r\n if (\r\n !routeParams.sitecoreRoute &&\r\n route &&\r\n (route.url === '/' || route.url === `/${resolvedLanguage.languageCode}`)\r\n ) {\r\n resolvedRoute = '/';\r\n } else {\r\n resolvedRoute = routeParams.sitecoreRoute || appState.routePath;\r\n }\r\n\r\n // remember that useEffect fires after initial render (no matter what)\r\n // and then fires on subsequent renders if either resolvedRoute or resolvedLanguage has changed\r\n\r\n useEffect(\r\n () => {\r\n // If we have route data from SSR, no need to fetch.\r\n // At this point, we also clear the SSR flag from state so that subsequent renders\r\n // will fetch routeData if needed.\r\n // This approach feels hacky... but it works.\r\n if (appState.routeData && appState.routeData.fromSSR) {\r\n actions.clearSSRFlag();\r\n return;\r\n }\r\n\r\n actions.fetchRoute(resolvedRoute, resolvedLanguage.languageCode);\r\n },\r\n //eslint-disable-next-line react-hooks/exhaustive-deps\r\n [resolvedRoute, resolvedLanguage.languageCode]\r\n );\r\n\r\n // need to cast as ReactElement to satisfy TypeScript\r\n return props.children as ReactElement;\r\n};\r\n\r\n// When accessing `__RouterContext` from react-router, the location and history\r\n// properties of the context are correct, but the route parameters are not\r\n// initialized. Therefore, we call the `matchRoute` function on the router context\r\n// path to get the matched route parameters (i.e. `:sitecoreRoute`, `:lang`).\r\n// This will likely change in a future version of React Router, but this works\r\n// with the current version.\r\nfunction resolveRouterRoute(routerContext: RouteComponentProps): match | null {\r\n const matchedRoute = matchRoute(routerContext.location.pathname);\r\n return matchedRoute;\r\n}\r\n","import React from 'react';\r\nimport { ComponentFactoryReactContext } from '@sitecore-jss/sitecore-jss-react/dist/components/SitecoreContext';\r\nimport { ComponentFactory } from '@sitecore-jss/sitecore-jss-react/types/components/sharedTypes';\r\n\r\nexport { ComponentFactoryReactContext };\r\n\r\nconst ComponentFactoryContext = React.createContext(undefined);\r\n\r\nexport interface ComponentFactoryContextProps {\r\n componentFactory: ComponentFactory;\r\n}\r\n\r\nexport const useComponentFactory = () => {\r\n const context = React.useContext(ComponentFactoryContext);\r\n if (context === undefined) {\r\n throw new Error('useComponentFactory must be used within a ComponentFactoryContextProvider');\r\n }\r\n return context;\r\n};\r\n\r\nexport const ComponentFactoryContextProvider: React.FC = ({\r\n componentFactory,\r\n children,\r\n}) => {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n","import React, { useEffect } from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\nimport Layout from './Layout';\r\nimport config from './temp/config';\r\nimport componentFactory from './componentFactory';\r\nimport { RouteDataManager } from './lib/RouteDataManager';\r\nimport { useAppStateContext } from './lib/AppStateProvider';\r\nimport { ComponentFactoryContextProvider } from './lib/ComponentFactoryProvider';\r\n// This context is required for @dtcm components to fetch context properly.\r\nimport { SitecoreContextReactContext as DtcmUiComponentsSitecoreContext } from '@dtcm/ui-components';\r\nimport { canUseDOM, get } from './lib/getPropertyByPath';\r\nimport { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';\r\n\r\nconst ScrollToTop = () => {\r\n const { pathname } = useLocation();\r\n\r\n React.useEffect(() => {\r\n window.scrollTo(0, 0);\r\n }, [pathname]);\r\n\r\n return null;\r\n};\r\n// This is the main entry point of the app invoked by the renderer (server or client rendering).\r\nconst AppRoot = ({ Router }: { Router: any }) => {\r\n const { appState, actions } = useAppStateContext();\r\n const isEmptyLayout = get(appState, 'dictionary.viewBag.isEmptyLayout', false);\r\n const [isShowCaptchaProvider, setIsShowCaptchaProvider] = React.useState(false);\r\n // Accessibility settings require DOM manipulation, so initialize them after first mount/render.\r\n // `useEffect` will only fire once when providing an empty array as the second argument.\r\n useEffect(() => {\r\n actions.initializeAccessibilitySettings({\r\n contrast: appState.selectedContrastValue,\r\n fontSize: appState.selectedFontSize as any,\r\n });\r\n }, []);\r\n\r\n const sitecoreContextData: any = {\r\n route: null,\r\n rtl: false,\r\n config: config,\r\n pageEditing: false,\r\n origin: '',\r\n breadcrumb: [],\r\n isPersonalised: false,\r\n volume: 0,\r\n };\r\n\r\n if (appState.routeData && appState.sitecoreContextData) {\r\n const identityPath = appState.sitecoreContextData.configuration.globalApi.apiGlobal;\r\n const clientId = appState.sitecoreContextData.configuration.globalApi.clientId;\r\n sitecoreContextData.route = appState.routeData;\r\n\r\n Object.assign(sitecoreContextData, appState.sitecoreContextData, {\r\n isPersonalised: appState.isPersonalised,\r\n darkMode: appState.darkMode,\r\n volume: appState.volume,\r\n videosList: appState.videosList,\r\n selectedFontSize: appState.selectedFontSize,\r\n actions: {\r\n changeThemeFunction: (value: boolean) => actions.changeThemeFunction(value, identityPath),\r\n fetchUserSettings: () => actions.fetchUserSettings(identityPath),\r\n fetchVideosList: () => actions.fetchVideosList(identityPath),\r\n getLikes: ( videoIds: any) => actions.getLikes( videoIds, identityPath),\r\n setLike: ( videoId: any ) => actions.setLike( videoId, identityPath, clientId),\r\n setVideoTimestamp: (videoId: any, timestamp: number) =>\r\n actions.setVideoTimestamp(videoId, timestamp, identityPath, clientId),\r\n setVideoVolumeFunction: (value: number) =>\r\n actions.setVideoVolumeFunction(value, identityPath, clientId),\r\n },\r\n });\r\n }\r\n const captchaKey = get(sitecoreContextData, 'configuration.globalApi.recaptchaKey');\r\n const languageCode: string = get(sitecoreContextData, 'language');\r\n\r\n React.useEffect(() => {\r\n if (canUseDOM && captchaKey) {\r\n setIsShowCaptchaProvider(true);\r\n }\r\n }, [canUseDOM, captchaKey]);\r\n\r\n return (\r\n \r\n {!isEmptyLayout && }\r\n \r\n \r\n \r\n { isShowCaptchaProvider ?\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 AppRoot;\r\n","import './polyfills';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport AppRoot from './AppRoot';\r\nimport config from './temp/config';\r\nimport { resolveLanguageFromContextData, resolveLanguageFromConfig } from './lib/languageResolvers';\r\nimport { matchRoute } from './lib/routerUtils';\r\nimport { AppStateProvider, AppState } from './lib/AppStateProvider';\r\nimport { resolveAccessibilitySettings } from './lib/accessibilityStateManager';\r\nimport { LanguageDefinition } from '@dtcm/ui-components';\r\nimport { resolveUserSettings } from './lib/userSettingsStateManager';\r\n// import { loadableReady } from '@loadable/component';\r\n/* import json from './tempSsrJson.json'; */\r\n\r\n/* eslint-disable no-underscore-dangle */\r\n\r\n/*\r\n App Rendering\r\n*/\r\n\r\nrenderApp();\r\n\r\nfunction renderApp() {\r\n const initialState = resolveInitialAppState();\r\n\r\n // HTML element to place the app into\r\n const rootElement = document.getElementById('root');\r\n\r\n // Create the Router component that will be used for client-side routing.\r\n const Router: React.FC = (routerProps) => {routerProps.children};\r\n\r\n // when React initializes from a SSR-based initial state, you need to render with `hydrate` instead of `render`\r\n const renderFunction = initialState.routeData ? ReactDOM.hydrate : ReactDOM.render;\r\n\r\n // loadableReady(() => {\r\n renderFunction(\r\n \r\n \r\n ,\r\n rootElement\r\n );\r\n // });\r\n}\r\n\r\n/*\r\n SSR Data\r\n If we're running in a server-side rendering scenario,\r\n the server will provide JSON in the #__JSS_STATE__ element\r\n for us to acquire the initial state to run with on the client.\r\n\r\n This enables us to skip a network request to load up the layout data.\r\n We are emitting a quiescent script with JSON so that we can take advantage\r\n of JSON.parse()'s speed advantage over parsing full JS, and enable\r\n working without needing `unsafe-inline` in Content Security Policies.\r\n\r\n SSR is initiated from /server/server.js.\r\n*/\r\n\r\nfunction resolveInitialAppState() {\r\n const ssrRawJson = document.getElementById('__JSS_STATE__');\r\n const ssrState = ssrRawJson ? JSON.parse(ssrRawJson.innerHTML) : null;\r\n /* const ssrState = json; */\r\n\r\n const routePath = resolveRoutePath();\r\n\r\n /*\r\n Language Resolving\r\n Attempt to resolve the app language prior to rendering the app.\r\n */\r\n const language = resolveLanguage(ssrState);\r\n\r\n const accessibilitySettings = resolveAccessibilitySettings(config);\r\n const userSettings = resolveUserSettings();\r\n\r\n const appState: AppState = {\r\n routePath,\r\n language,\r\n routeData: null,\r\n sitecoreContextData: {},\r\n selectedContrastValue: accessibilitySettings.contrast,\r\n selectedFontSize: accessibilitySettings.fontSize,\r\n isUserLoggedIn: false,\r\n isPersonalised: false,\r\n darkMode: userSettings.darkMode,\r\n volume: userSettings.volume,\r\n videosList: userSettings.videosList\r\n };\r\n\r\n if (ssrState) {\r\n const {\r\n dictionary,\r\n navbar,\r\n navbarData,\r\n footer,\r\n downloadBox,\r\n newsletterForm,\r\n footerWeatherWidget,\r\n routeData,\r\n sitecoreContextData,\r\n analytics,\r\n accessWidget\r\n } = ssrState;\r\n\r\n return {\r\n ...appState,\r\n dictionary: dictionary,\r\n routeData: routeData || null,\r\n navbar,\r\n navbarData,\r\n footer,\r\n downloadBox,\r\n newsletterForm,\r\n footerWeatherWidget,\r\n sitecoreContextData,\r\n analytics,\r\n accessWidget\r\n } as AppState;\r\n }\r\n\r\n return appState;\r\n}\r\n\r\n// Resolve the current matched router path\r\nfunction resolveRoutePath() {\r\n const matchedRoute = matchRoute(window.location.pathname);\r\n const routeParams: { sitecoreRoute?: string } = (matchedRoute && matchedRoute.params) || {};\r\n return (routeParams && routeParams.sitecoreRoute) || '/';\r\n}\r\n\r\nfunction resolveLanguage(ssrState: any): LanguageDefinition {\r\n // If SSR data exists, we try to extract the language from that data.\r\n let language: LanguageDefinition =\r\n ssrState && ssrState.sitecoreContextData && resolveLanguageFromContextData(ssrState.sitecoreContextData);\r\n\r\n // If a language parameter is found in the route URL and the parameter has a different value\r\n // than specified in SSR data, use the parameter value. This shouldn't ever happen, but\r\n // anything is possible.\r\n const matchedRoute = matchRoute(window.location.pathname);\r\n if (\r\n matchedRoute &&\r\n matchedRoute.params &&\r\n matchedRoute.params.lang &&\r\n language &&\r\n language.languageCode !== matchedRoute.params.lang\r\n ) {\r\n // note: this will leave us in an incomplete state, i.e. languageName cannot be resolved from URL\r\n // again, this scenario shouldn't ever happen.\r\n language.languageCode = matchedRoute.params.lang;\r\n }\r\n\r\n // If no language could be found in SSR data or route URL, then fallback to the value defined in config.\r\n if (!language) {\r\n language = resolveLanguageFromConfig(config);\r\n }\r\n\r\n return language;\r\n}\r\n","import { LanguageDefinition } from '@dtcm/ui-components';\r\n\r\n// If we have a state, and that state has language data, return the language\r\nexport const resolveLanguageFromContextData = (\r\n sitecoreContextData?: { language?: string; languageName?: string } | undefined\r\n): LanguageDefinition => {\r\n if (!sitecoreContextData || !sitecoreContextData.language || !sitecoreContextData.languageName) {\r\n console.warn('context data is undefined or language is not defined in context data', sitecoreContextData);\r\n return {\r\n languageCode: '',\r\n languageName: '',\r\n };\r\n }\r\n return {\r\n languageCode: sitecoreContextData.language,\r\n languageName: sitecoreContextData.languageName,\r\n };\r\n};\r\nexport const resolveCountryFromContextData = (\r\n sitecoreContextData?: { utags?: any; } | undefined\r\n): any => {\r\n if (!sitecoreContextData || !sitecoreContextData.utags) {\r\n console.warn('context data is undefined or language is not defined in context data', sitecoreContextData);\r\n return {\r\n session_country: 'UAE',\r\n };\r\n }\r\n const country = sitecoreContextData && sitecoreContextData.utags && sitecoreContextData.utags.script \r\n ? sitecoreContextData.utags.script.split('session_country_code:')[1] ? \r\n sitecoreContextData.utags.script.split('session_country_code:')[1].split(',')[0]\r\n .replace(/[\\W_]+/g, ' ')\r\n .trim()\r\n : 'BE' : 'BE';\r\n\r\n return {\r\n session_country: country,\r\n };\r\n};\r\nexport const resolveLanguageFromConfig = (config: {\r\n defaultLanguage: string;\r\n defaultLanguageName: string;\r\n}): LanguageDefinition => {\r\n const values = {\r\n languageCode: '',\r\n languageName: '',\r\n };\r\n if (!config) {\r\n console.error('config is undefined');\r\n return values;\r\n }\r\n values.languageCode = config.defaultLanguage;\r\n values.languageName = config.defaultLanguageName;\r\n return values;\r\n};\r\n","/**\r\n * Implements a data fetcher using window.Fetch - replace with your favorite\r\n * library if you like. See HttpJsonFetcher type\r\n * in sitecore-jss library for implementation details/notes.\r\n * @param {string} url The URL to request; may include query string\r\n * @param {any} data Optional data to POST with the request.\r\n */\r\n\r\nexport function dataFetcher(url: string, data: any, requestOptions: any = {}): Promise {\r\n const requestProps: Partial = {\r\n method: data ? 'POST' : 'GET',\r\n //Setting content-type produces CORS-error \"Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.\"\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n //},\r\n // note: needs to use `withCredentials: true` in order for Sitecore cookies to be included in CORS requests\r\n // which is necessary for analytics and such\r\n //credentials: 'include',\r\n body: JSON.stringify(data),\r\n ... requestOptions\r\n };\r\n\r\n // NOTE: if you plan to make layout service fetch calls during SSR, be sure\r\n // to polyfill fetch for Node.\r\n return fetch(url, requestProps).then((response) => {\r\n // JSS dataApi expects a response with the below signature.\r\n //debugger\r\n return {\r\n status: response.status,\r\n statusText: response.statusText,\r\n data: response.json(),\r\n };\r\n });\r\n}\r\n","import { dataApi } from '@sitecore-jss/sitecore-jss-react';\r\nimport { dataFetcher } from './dataFetcher';\r\nimport config from '../temp/config';\r\n\r\nexport interface State {\r\n routeData: any;\r\n routeDataLoading?: boolean;\r\n routePath: string;\r\n routeError?: Error;\r\n sitecoreContextData: any;\r\n}\r\n\r\nexport interface Action {\r\n type: string;\r\n payload: any;\r\n error?: Error;\r\n}\r\n\r\nexport function reducer(state: State, action: Action) {\r\n switch (action.type) {\r\n case 'clear-ssr-flag': {\r\n return { ...state, routeData: { ...state.routeData, fromSSR: false } };\r\n }\r\n case 'route-data-fetch-begin': {\r\n return { ...state, routeDataLoading: true, routePath: action.payload };\r\n }\r\n case 'route-data-fetch-success': {\r\n return {\r\n ...state,\r\n routeDataLoading: false,\r\n routeData: action.payload.routeData,\r\n sitecoreContextData: action.payload.sitecoreContextData,\r\n routeError: null,\r\n };\r\n }\r\n case 'route-data-fetch-404': {\r\n return {\r\n ...state,\r\n routeDataLoading: false,\r\n routeData: action.payload.routeData,\r\n sitecoreContextData: action.payload.sitecoreContextData,\r\n routeError: action.error,\r\n };\r\n }\r\n case 'route-data-fetch-error': {\r\n return {\r\n ...state,\r\n routeDataLoading: false,\r\n routeData: null,\r\n sitecoreContextData: null,\r\n routeError: action.error,\r\n };\r\n }\r\n default: {\r\n return state;\r\n }\r\n }\r\n}\r\n\r\nexport type FetchRouteFunction = (\r\n routePath: string,\r\n language: string\r\n) => (dispatch: any) => Promise | void;\r\n\r\nexport const fetchRoute: FetchRouteFunction = (routePath: string, language: string) => {\r\n return (dispatch: any) => {\r\n // Signal that we're about to start fetching data. Typically use this\r\n // to set loading state to `true`.\r\n dispatch({\r\n type: 'route-data-fetch-begin',\r\n payload: routePath,\r\n });\r\n\r\n getRouteData(routePath, language)\r\n .then((sitecoreData) => {\r\n dispatch({\r\n type: 'route-data-fetch-success',\r\n payload: {\r\n routeData: sitecoreData.sitecore.route,\r\n sitecoreContextData: sitecoreData.sitecore.context,\r\n },\r\n });\r\n })\r\n .catch((error) => {\r\n console.error(error);\r\n \r\n // 404 errors may contain context data to be used for rendering\r\n if (error.response && error.response.status === 404 && error.response.data) {\r\n dispatch({\r\n type: 'route-data-fetch-404',\r\n payload: {\r\n routeData: error.response.data.sitecore ? error.response.data.sitecore.route : null,\r\n sitecoreContextData: error.response.data.sitecore\r\n ? error.response.data.sitecore.context\r\n : { language },\r\n },\r\n error: null,\r\n });\r\n } else {\r\n dispatch({\r\n type: 'route-data-fetch-error',\r\n error,\r\n });\r\n }\r\n });\r\n };\r\n};\r\n\r\nexport type ClearSSRFlagFunction = () => (dispatch: any) => Promise | void;\r\n\r\nexport const clearSSRFlag: ClearSSRFlagFunction = () => {\r\n return (dispatch: any) => {\r\n dispatch({ type: 'clear-ssr-flag' });\r\n };\r\n};\r\n\r\n/**\r\n * Gets route data from Sitecore. This data is used to construct the component layout for a JSS route.\r\n * @param {string} route Route path to get data for (e.g. /about)\r\n * @param {string} language Language to get route data in (content language, e.g. 'en')\r\n */\r\nfunction getRouteData(route: string, language: string) {\r\n const formattedRoute = ensureLeadingSlash(route);\r\n\r\n const fetchOptions = {\r\n layoutServiceConfig: { host: config.sitecoreApiHost },\r\n querystringParams: { sc_lang: language, sc_apikey: config.sitecoreApiKey },\r\n fetcher: dataFetcher,\r\n };\r\n\r\n return dataApi.fetchRouteData(formattedRoute, fetchOptions);\r\n}\r\n\r\nfunction ensureLeadingSlash(route: string) {\r\n const formattedRoute = !route.startsWith('/') ? `/${route}` : route;\r\n return formattedRoute;\r\n}\r\n","import React, { createContext, useReducer, PropsWithChildren } from 'react';\r\nimport {\r\n fetchRoute,\r\n clearSSRFlag,\r\n reducer as routeStateReducer,\r\n State as RouteState,\r\n FetchRouteFunction,\r\n ClearSSRFlagFunction,\r\n} from './routeStateManager';\r\nimport {\r\n State as AccessibilityState,\r\n changeContrast,\r\n changeFontSize,\r\n reducer as accessibilityStateReducer,\r\n ChangeContrastFunction,\r\n ChangeFontSizeFunction,\r\n initializeAccessibilitySettings,\r\n InitializeAccessibilitySettingsFunction,\r\n setPersonalisation,\r\n setPersonalisationFunction,\r\n\r\n} from './accessibilityStateManager';\r\nimport {\r\n State as UserSettingsState,\r\n reducer as userSettingsStateReducer,\r\n fetchUserSettings,\r\n FetchUserSettingsFunction,\r\n changeThemeFunction,\r\n ChangeThemeFunction,\r\n FetchVideoListFunction,\r\n fetchVideosList,\r\n getLikes,\r\n setLike,\r\n setVideoTimestamp,\r\n likeVideoFunction,\r\n setVideoVolumeFunction\r\n} from './userSettingsStateManager';\r\nimport { NavBarData } from './NavBarData';\r\nimport { LanguageDefinition } from '@dtcm/ui-components';\r\n\r\n// Create and export app state context for consumption in descendants.\r\nconst AppStateContext = createContext(undefined);\r\n\r\nexport const useAppStateContext = () => {\r\n const context = React.useContext(AppStateContext);\r\n if (context === undefined) {\r\n throw new Error('useAppStateContext must be used within a AppStateProvider');\r\n }\r\n return context;\r\n};\r\n\r\n// store the currentState outside of the current function closure so that we can provide\r\n// a `getState()` function to our actions that will actually return the current state\r\nlet currentState: AppState | undefined;\r\n\r\nexport function AppStateProvider({ initialState, children }: PropsWithChildren) {\r\n const reducer = mergeReducers([routeStateReducer, accessibilityStateReducer, userSettingsStateReducer]);\r\n const [state, dispatch] = withDispatchLog(useReducer(reducer, initialState, initState), () => currentState);\r\n\r\n currentState = state;\r\n\r\n const actions: AppStateActions = createAsyncCapableActions(\r\n {\r\n fetchRoute,\r\n clearSSRFlag,\r\n changeContrast,\r\n changeFontSize,\r\n initializeAccessibilitySettings,\r\n setPersonalisation,\r\n changeThemeFunction,\r\n fetchUserSettings,\r\n fetchVideosList,\r\n getLikes,\r\n setLike,\r\n setVideoTimestamp,\r\n likeVideoFunction,\r\n setVideoVolumeFunction\r\n },\r\n dispatch,\r\n () => currentState\r\n );\r\n\r\n return {children};\r\n}\r\n\r\nfunction initState(state: AppState) {\r\n // If we don't have SSR data, then set the loading flags to true so\r\n // that initial app rendering doesn't fail and will show loaders instead.\r\n if (!state.routeData || !state.routeData.fromSSR) {\r\n state.routeDataLoading = true;\r\n }\r\n return state;\r\n}\r\n\r\n// This function provides any actions that return a function with a `dispatch`\r\n// and `state` objects that those actions can then use. This allows for multiple\r\n// `dispatch` calls from an action or calling `dispatch` after async operations.\r\nfunction createAsyncCapableActions(actions: any, dispatch: any, getState: any) {\r\n Object.keys(actions).forEach((key) => {\r\n const action = actions[key];\r\n\r\n actions[key] = (...args: any[]) => {\r\n const actionResult = action(...args);\r\n if (typeof actionResult === 'function') {\r\n actionResult(dispatch, getState);\r\n } else {\r\n dispatch(actionResult);\r\n }\r\n };\r\n });\r\n\r\n return actions;\r\n}\r\n\r\n// Simple function that accepts an array of reducer functions and \"merges\" them\r\n// into a single function. The result from each reducer is passed to the next\r\n// reducer and the final output is the return value.\r\nfunction mergeReducers(reducers: any[]) {\r\n return (state: any, action: any) => {\r\n return reducers.reduce((result: any, reducer: any) => {\r\n result = reducer(result, action);\r\n return result;\r\n }, state);\r\n };\r\n}\r\n\r\n// This function basically wraps the `dispatch` function from a `useReducer`\r\n// call with a console logger to log all actions that are dispatched, along\r\n// with the updated state after the action is complete.\r\nfunction withDispatchLog(useReducerResult: any[], getState: any) {\r\n if (process.env.NODE_ENV === 'development') {\r\n return [\r\n useReducerResult[0],\r\n (...args: any[]) => {\r\n console.group('state action');\r\n console.log(`action '${args[0].type}'`, args[0]);\r\n\r\n useReducerResult[1](...args);\r\n\r\n console.log(`new state`, getState());\r\n console.groupEnd();\r\n },\r\n ];\r\n }\r\n return useReducerResult;\r\n}\r\n\r\nexport type AppState = RouteState &\r\n UserSettingsState &\r\n AccessibilityState & {\r\n isEmptyLayout?: boolean;\r\n navbar?: NavBarData;\r\n navbarData?: any;\r\n footer?: any;\r\n downloadBox?: any;\r\n newsletterForm?: any;\r\n footerWeatherWidget?: any;\r\n language: LanguageDefinition;\r\n // context may have other properties defined outside of what is specified in the UI components SitecoreContextProps\r\n sitecoreContextData: any;\r\n analytics?: any;\r\n accessWidget?: any;\r\n isUserLoggedIn:boolean;\r\n isPersonalised: boolean;\r\n };\r\n\r\nexport interface AppStateContextProps {\r\n appState: AppState;\r\n actions: AppStateActions;\r\n}\r\n\r\nexport interface AppStateProviderProps {\r\n initialState: AppState | undefined;\r\n}\r\n\r\nexport type AppStateActions = {\r\n fetchRoute: FetchRouteFunction;\r\n clearSSRFlag: ClearSSRFlagFunction;\r\n changeFontSize: ChangeFontSizeFunction;\r\n changeContrast: ChangeContrastFunction;\r\n initializeAccessibilitySettings: InitializeAccessibilitySettingsFunction;\r\n setPersonalisation: setPersonalisationFunction;\r\n changeThemeFunction: ChangeThemeFunction;\r\n fetchUserSettings: FetchUserSettingsFunction;\r\n fetchVideosList: FetchVideoListFunction;\r\n getLikes: FetchVideoListFunction;\r\n setVideoTimestamp: FetchVideoListFunction;\r\n setLike: FetchVideoListFunction;\r\n likeVideoFunction: (videoId: string) => void;\r\n setVideoVolumeFunction: (identityPath: number, value: number, clientId: string) => void;\r\n};\r\n","import { ContrastSwitchOption } from '@dtcm/ui-components';\r\n\r\nexport interface State {\r\n selectedFontSize: string;\r\n selectedContrastValue: string;\r\n isPersonalised: boolean | null;\r\n}\r\n\r\nexport interface Action {\r\n type: string;\r\n payload: any;\r\n error?: Error;\r\n}\r\n\r\nexport function reducer(state: State, action: Action) {\r\n switch (action.type) {\r\n case 'accessibility-settings-initialized': {\r\n return state;\r\n }\r\n case 'font-size-changed': {\r\n return { ...state, selectedFontSize: action.payload };\r\n }\r\n case 'contrast-value-changed': {\r\n return { ...state, selectedContrastValue: action.payload };\r\n }\r\n case 'pesonalisation-value-changed': {\r\n return { ...state, isPersonalised: action.payload };\r\n }\r\n\r\n default: {\r\n return state;\r\n }\r\n }\r\n}\r\n\r\n// This function is a bit superfluous, but allows us to centralize the actions\r\n// associated with adjusting accessibility settings.\r\nexport const initializeAccessibilitySettings: InitializeAccessibilitySettingsFunction = ({\r\n contrast,\r\n fontSize,\r\n}) => {\r\n return (dispatch: any) => {\r\n setContrast({ theme: { value: contrast }, title: { value: '' } });\r\n setFontSize(fontSize);\r\n dispatch({\r\n type: 'accessibility-settings-initialized',\r\n });\r\n };\r\n};\r\n\r\nexport type InitializeAccessibilitySettingsFunction = ({\r\n contrast,\r\n fontSize,\r\n}: {\r\n contrast: string;\r\n fontSize: FontSize;\r\n}) => void;\r\n\r\nexport type FontSize = 'z100' | 'z150' | 'z200';\r\n\r\nexport const fontSizeClasses = ['z100', 'z150', 'z200'];\r\n\r\nexport type ChangeFontSizeFunction = (\r\n fontSize: FontSize\r\n) => (dispatch: any, getState?: any) => Promise | void;\r\n\r\nexport const changeFontSize: ChangeFontSizeFunction = (fontSize: FontSize) => {\r\n return (dispatch: any) => {\r\n setFontSize(fontSize);\r\n\r\n dispatch({\r\n type: 'font-size-changed',\r\n payload: fontSize,\r\n });\r\n };\r\n};\r\n\r\nconst setFontSize = (fontSize: FontSize) => {\r\n if (typeof window !== 'undefined') {\r\n document.querySelector('html')!.classList.remove(...fontSizeClasses);\r\n document.querySelector('html')!.classList.add(fontSize);\r\n\r\n storageManager.setFontSize(fontSize);\r\n }\r\n};\r\n\r\nexport type ChangeContrastFunction = (\r\n option: ContrastSwitchOption\r\n) => (dispatch: any, getState?: any) => Promise | void;\r\n\r\nexport const changeContrast: ChangeContrastFunction = (option: ContrastSwitchOption) => {\r\n return (dispatch: any) => {\r\n setContrast(option);\r\n dispatch({\r\n type: 'contrast-value-changed',\r\n payload: option.theme.value,\r\n });\r\n };\r\n};\r\nexport type setPersonalisationFunction = (\r\n value: boolean\r\n) => (dispatch: any, getState?: any) => void;\r\n\r\nexport const setPersonalisation: setPersonalisationFunction = (value: boolean) => {\r\n return (dispatch: any) => {\r\n dispatch({\r\n type: 'pesonalisation-value-changed',\r\n payload: value,\r\n });\r\n };\r\n};\r\nconst setContrast = (option: ContrastSwitchOption) => {\r\n if (typeof window !== 'undefined') {\r\n if (option.theme.value === 'theme1') {\r\n document.querySelector('body')!.classList.remove('contrast');\r\n } else if (option.theme.value === 'theme2') {\r\n document.querySelector('body')!.classList.add('contrast');\r\n }\r\n }\r\n\r\n storageManager.setContrast(option.theme.value);\r\n};\r\n\r\nexport function resolveAccessibilitySettings(config: any) {\r\n return {\r\n contrast: storageManager.getContrast() || config.defaultContrast,\r\n fontSize: storageManager.getFontSize() || config.defaultFontSize,\r\n };\r\n}\r\n\r\nexport const storageManager = {\r\n getFontSize: () => getItem('dtcm-font-size'),\r\n setFontSize: (value: string) => setItem('dtcm-font-size', value),\r\n getContrast: () => getItem('dtcm-contrast'),\r\n setContrast: (value: string) => setItem('dtcm-contrast', value),\r\n};\r\n\r\nexport function getItem(key: string) {\r\n if (typeof window !== 'undefined') {\r\n return window.localStorage.getItem(key);\r\n }\r\n return null;\r\n}\r\n\r\nexport function setItem(key: string, value: any) {\r\n if (typeof window !== 'undefined') {\r\n window.localStorage.setItem(key, value);\r\n }\r\n}\r\n","// Inspired by: https://stackoverflow.com/a/22129960/9324\r\n/**\r\n * Examples:\r\n * {\r\n * prop1: {\r\n * prop2: {\r\n * prop3: 'deep',\r\n * prop4: [\r\n * { prop5: 'deeper' }\r\n * ]\r\n * }\r\n * }\r\n * }\r\n * 'prop1.prop2.prop3' == 'deep'\r\n * 'prop1.prop2.prop4.0.prop5' == 'deeper'\r\n */\r\n\r\n// alias for lodash.get\r\nexport function get(obj: any, propPath: string, defaultValue?: any) {\r\n return getPropertyByPath(obj, propPath, defaultValue);\r\n}\r\n\r\nexport function getPropertyByPath(obj: any, propPath: string, defaultValue?: any) {\r\n return propPath.split('.').reduce((o, p) => (o && o[p]) || defaultValue, obj);\r\n}\r\nexport const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);","import { dataFetcher } from './dataFetcher';\r\nimport Cookies from 'js-cookie';\r\nimport { getItem, setItem } from './accessibilityStateManager';\r\n\r\nconst userCookieName = 'user_session';\r\ninterface Videos {\r\n userId?: string;\r\n videoId: string;\r\n like?: boolean;\r\n likes: number;\r\n timestamp?: number;\r\n}\r\nexport interface State {\r\n\r\n darkMode: boolean;\r\n volume: number;\r\n videosList: Array;\r\n}\r\n\r\nexport interface Action {\r\n type: string;\r\n payload: any;\r\n error?: Error;\r\n}\r\n\r\nconst userSettingsFetcher = (requestURL: string, data: any) => {\r\n const cookieToken = getUserCookie();\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append('Content-Type', 'application/json');\r\n cookieToken && myHeaders.append('Authorization', `Bearer ${cookieToken.access_token}`);\r\n\r\n var requestOptions: any = {\r\n headers: myHeaders,\r\n //redirect: 'follow',\r\n };\r\n const requestProps: Partial = {\r\n method: data ? 'POST' : 'GET',\r\n\r\n body: JSON.stringify(data),\r\n ... requestOptions\r\n };\r\n\r\n\r\n return fetch(requestURL, requestProps).then((response) => {\r\n return {\r\n status: response.status,\r\n statusText: response.statusText,\r\n data: response.json(),\r\n };\r\n });\r\n\r\n}\r\n\r\nexport const getUserCookie = () => {\r\n let parsedCookie,\r\n status = false;\r\n\r\n const cookie = Cookies.get(userCookieName);\r\n\r\n if (cookie) {\r\n try {\r\n parsedCookie = JSON.parse(cookie || '');\r\n if (parsedCookie.access_token) {\r\n\r\n status = true;\r\n }\r\n\r\n } catch (e) { }\r\n }\r\n if (status) {\r\n return parsedCookie;\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const reducer = (state: State, action: Action) => {\r\n switch (action.type) {\r\n\r\n case 'theme-changed': {\r\n return { ...state, darkMode: action.payload };\r\n }\r\n case 'video-like': {\r\n\r\n return {\r\n ...state,\r\n videosList: state.videosList.map(\r\n (item) => item.videoId == action.payload ? { ...item, like: action.payload }\r\n : item\r\n )\r\n };\r\n }\r\n case 'video-list': {\r\n return {\r\n ...state,\r\n videosList: action.payload\r\n };\r\n\r\n }\r\n case 'video-list-addItems': {\r\n\r\n return {\r\n ...state,\r\n videosList: [...state.videosList, ...action.payload.filter((itemResponse: any) => (\r\n state.videosList.findIndex((itemVideoList: any) => itemResponse.videoId == itemVideoList.videoId) == -1\r\n ))]\r\n\r\n };\r\n\r\n }\r\n case 'video-volume': {\r\n return { ...state, volume: action.payload };\r\n }\r\n default: {\r\n return state;\r\n }\r\n }\r\n};\r\n\r\nexport type FetchUserSettingsFunction = (\r\n identityPath: string\r\n) => (dispatch: any) => Promise | void;\r\n\r\nexport type FetchVideoListFunction = (\r\n identityPath: any,\r\n videoId?: any,\r\n videoIds?: any,\r\n clientId?: any,\r\n timestamp?: any,\r\n) => (dispatch: any) => (Promise | void);\r\n\r\nexport const fetchVideosList: FetchVideoListFunction = (identityPath: string) => {\r\n return () => {\r\n // Signal that we're about to start fetching data. Typically use this\r\n // to set loading state to `true`.\r\n const cookieToken = getUserCookie();\r\n\r\n let myHeaders = new Headers();\r\n\r\n myHeaders.append('Authorization', `Bearer ${cookieToken}`);\r\n myHeaders.append('Content-Type', 'application/json');\r\n\r\n var requestOptions: any = {\r\n method: 'POST',\r\n headers: myHeaders,\r\n //body: {},\r\n redirect: 'follow',\r\n };\r\n dataFetcher(`${identityPath}/graphql/video`, null, requestOptions)\r\n .then(() => {\r\n // console.log(data);\r\n })\r\n .catch((error) => {\r\n console.error(error);\r\n });\r\n };\r\n};\r\n/*eslint-disable */\r\nexport const getLikes: FetchVideoListFunction = (videoIds?: any, identityPath?: string) => {\r\n\r\n return (dispatch: any) => {\r\n\r\n const query = {\r\n query: `{ videos(ids:${JSON.stringify(videoIds)}){ userId, videoId, like, likes, timestamp }}`\r\n }\r\n\r\n\r\n userSettingsFetcher(`${identityPath}/graphql/video`, query)\r\n .then((data: any) => {\r\n data.data.then((res: any) => {\r\n const videos = res.data.videos;\r\n // @ts-ignore\r\n let videoList = storageManager.getVideosList() && JSON.parse(storageManager.getVideosList()) || [];\r\n\r\n videos.map((element: any) => {\r\n const currentVideoIndex = videoList.findIndex((item: any) => item.videoId == element.videoId);\r\n if(currentVideoIndex == -1) {\r\n videoList.push(element)\r\n } else {\r\n videoList[currentVideoIndex] = {\r\n ...videoList[currentVideoIndex],\r\n ...element\r\n }\r\n }\r\n });\r\n storageManager.setVideosList(videoList);\r\n dispatch({\r\n type: 'video-list',\r\n payload: videoList\r\n });\r\n })\r\n\r\n })\r\n .catch((error: any) => {\r\n console.log(error)\r\n })\r\n };\r\n};\r\n\r\n\r\n\r\nexport const setLike: FetchVideoListFunction = (videoId: any, identityPath: string) => {\r\n\r\n return (dispatch: any) => {\r\n let videoList = storageManager.getVideosList() && JSON.parse(storageManager.getVideosList()) || [];\r\n // @ts-ignore\r\n const cookieToken = getUserCookie();\r\n let videoLikeValue = true;\r\n videoList.some((v: any) => {\r\n if (v.videoId === videoId) {\r\n videoLikeValue = !v.like;\r\n v.like = !v.like;\r\n v.like ? v.likes++ : v.likes--;\r\n\r\n }\r\n\r\n });\r\n\r\n storageManager.setVideosList(videoList);\r\n dispatch({\r\n type: 'video-list',\r\n payload: videoList\r\n });\r\n if (cookieToken) {\r\n const query = {\r\n query: `mutation updateVideo{ like(videoId:${JSON.stringify(videoId)}, enabled:${JSON.stringify(videoLikeValue)}){userId,videoId,timestamp,like,likes}}`,\r\n variables: {}\r\n }\r\n\r\n userSettingsFetcher(`${identityPath}/graphql/video`, query)\r\n }\r\n\r\n };\r\n};\r\nexport const setVideoTimestamp: FetchVideoListFunction = (videoId?: string, timestamp?: any, identityPath?: number) => {\r\n\r\n return (dispatch: any) => {\r\n let videoList = storageManager.getVideosList() && JSON.parse(storageManager.getVideosList()) || [];\r\n // @ts-ignore\r\n const cookieToken = getUserCookie();\r\n videoList.some((v: any) => {\r\n if (v.videoId === videoId) {\r\n v.timestamp = timestamp;\r\n\r\n }\r\n\r\n });\r\n\r\n if (cookieToken) {\r\n storageManager.setVideosList(videoList);\r\n dispatch({\r\n type: 'video-list',\r\n payload: videoList\r\n });\r\n }\r\n if (cookieToken) {\r\n const query = {\r\n query: `mutation updateVideo{ timestamp(videoId:${JSON.stringify(videoId)}, value:${JSON.stringify(parseInt(timestamp))}){userId,videoId,timestamp,like,likes}}`,\r\n variables: {}\r\n }\r\n userSettingsFetcher(`${identityPath}/graphql/video`, query)\r\n }\r\n };\r\n};\r\n/*eslint-disable */\r\nexport const fetchUserSettings: FetchUserSettingsFunction = (identityPath: string) => {\r\n return (dispatch) => {\r\n // Signal that we're about to start fetching data. Typically use this\r\n // to set loading state to `true`.\r\n const cookieToken = getUserCookie();\r\n\r\n if (cookieToken) {\r\n const query = {\r\n query: `{ settings{ darkMode,\r\n volume}}`\r\n }\r\n\r\n // @ts-ignore\r\n // @ts-ignore\r\n\r\n userSettingsFetcher(`${identityPath}/graphql/video`, query)\r\n .then((data: any) => {\r\n\r\n data.data.then((res: any) => {\r\n storageManager.setDarkMode(res.data.settings.darkMode);\r\n storageManager.setVolume(res.data.settings.volume);\r\n dispatch({\r\n type: 'video-volume',\r\n payload: res.data.settings.volume,\r\n });\r\n dispatch({\r\n type: 'theme-changed',\r\n payload: res.data.settings.darkMode,\r\n });\r\n\r\n })\r\n })\r\n }\r\n };\r\n};\r\n\r\nexport type ChangeThemeFunction = (\r\n value: boolean,\r\n identityPath: string\r\n) => (dispatch: any, getState?: any) => Promise | void;\r\n\r\nexport const changeThemeFunction: ChangeThemeFunction = (value: boolean, identityPath: string) => {\r\n\r\n return (dispatch: any) => {\r\n const cookieToken = getUserCookie();\r\n storageManager.setDarkMode(value);\r\n dispatch({\r\n type: 'theme-changed',\r\n payload: value,\r\n });\r\n if (cookieToken) {\r\n\r\n const query = {\r\n query: `mutation updateSettings{ darkMode(enabled: ${value}){ darkMode,\r\n volume}}`,\r\n variables: {}\r\n }\r\n\r\n userSettingsFetcher(`${identityPath}/graphql/video`, query)\r\n\r\n }\r\n };\r\n\r\n};\r\nexport const likeVideoFunction = (videoId: string) => {\r\n return (dispatch: any) => {\r\n\r\n dispatch({\r\n type: 'video-like',\r\n payload: videoId,\r\n });\r\n };\r\n\r\n};\r\nexport const setVideoVolumeFunction = (value: number, identityPath: string) => {\r\n // @ts-ignore\r\n return (dispatch: any) => {\r\n storageManager.setVolume(value);\r\n dispatch({\r\n type: 'video-volume',\r\n payload: value,\r\n });\r\n const cookieToken = getUserCookie();\r\n if (cookieToken) {\r\n const query = {\r\n query: `mutation updateSettings{\r\n volume(value: ${value}) {userId, darkMode, volume}\r\n }`,\r\n variables: {}\r\n };\r\n\r\n userSettingsFetcher(`${identityPath}/graphql/video`, query)\r\n\r\n }\r\n };\r\n};\r\nexport const resolveUserSettings = () => {\r\n return {\r\n darkMode: storageManager.getDarkMode() === 'true',\r\n volume: Number(storageManager.getVolume()) || 0,\r\n videosList: storageManager.getVideosList() && JSON.parse(storageManager.getVideosList()) || []\r\n };\r\n};\r\nexport const storageManager = {\r\n getDarkMode: () => getItem('dtcm-dark-mode'),\r\n setDarkMode: (value: boolean) => { setItem('dtcm-dark-mode', value); },\r\n getVolume: () => getItem('dtcm-video-volume'),\r\n setVolume: (value: number) => setItem('dtcm-video-volume', value),\r\n getVideosList: () => getItem('dtcm-video-list') || '',\r\n setVideosList: (value: Array) => setItem('dtcm-video-list', JSON.stringify(value))\r\n};\r\n\r\n"],"sourceRoot":""}