\n
\n \n
\n \n
\n \n
\n \n
\n \n {HeroSource &&\n HeroSource.value &&\n HeroSource.value == \"Video\" ? (\n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n {GoogleMapURL && GoogleMapURL.value && GoogleMap && GoogleMap.value &&\n
\n \n \n
\n }\n {GoogleMapURL && GoogleMapURL.value && (\n \n \n \n
\n )}\n {Website && Website.value && Website.value.href && (\n \n \n \n
\n )}\n \r\n
\r\n );\r\n }\r\n return moduleHeaderLayout;\r\n};\r\n\r\nexport default ModuleHeader;\r\n","import React from \"react\";\nimport { Text, Link } from \"@sitecore-jss/sitecore-jss-react\";\nimport TagManager from \"react-gtm-module\";\n\nconst Button = (props) => {\n /**\n * Color - light-primary, light-secondary, dark-primary, dark-secondary\n * Size - small, medium, large\n **/\n let {\n onClick = null,\n label = null,\n color = null,\n size = null,\n icon = null,\n className = null,\n disabled = false,\n isLink = false,\n linkField = null,\n moduleName = null,\n } = props || {};\n\n let buttonLayout = \"\";\n\n if (isLink) {\n buttonLayout = (\n \r\n
\r\n \r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName,\r\n moduleCtaLink: url,\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n target={targetVal}\r\n >\r\n {title}\r\n \r\n {title}\r\n
\r\n {url && text && (\r\n \r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName,\r\n moduleCtaLink: url,\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n target={targetVal}\r\n >\r\n {text}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n \n {featuredCentres &&\n featuredCentres.map((item, index) => {\n let {\n Thumbnail = null,\n Location = null,\n Name = null,\n SummaryStatement = null,\n AssetFeatures = null,\n AssetLink = null,\n } = item.fields || {};\n return (\n \n
\n );\n })}\n \n );\n };\n\n showButton = () => {\n if (!this.state.gate) {\n return (\n \n {\n this.setState({ gate: true });\n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCta\",\n moduleName: \"Asset Listing Highlights\",\n moduleCtaLink: \"Show More\",\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n label={\"Show More\"}\n color={\"light-secondary\"}\n size={\"medium\"}\n />\n
\n );\n } else {\n return null;\n }\n };\n\n showFeatured = (featuredAsset) => {\n if (featuredAsset && featuredAsset.fields) {\n const {\n Thumbnail = null,\n Location = null,\n Name = null,\n SummaryStatement = null,\n AssetFeatures = null,\n AssetLink = null,\n } = featuredAsset.fields;\n return (\n \n
\n );\n } else return null;\n };\n\n render() {\n const {\n Title = null,\n ViewAll = null,\n FeaturedAsset = null,\n FeaturedCentres = null,\n } = this.props.fields || {};\n const { dataSource } = this.props.rendering;\n return (\n this.setVisible(dataSource, FeaturedCentres) === \"show\" && (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"Asset Listing Highlights\",\n moduleCardLink:\n AssetLink && AssetLink.value ? AssetLink.value : \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n \n
\n \n
\n \n )\n );\n }\n}\n\nexport default FeatureAssetsAssetListHighlights;\n","import React, { Component } from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport FormCheckbox from \"../../../../Base/Form/FormCheckbox\";\n\nclass Filter extends Component {\n renderTokens = (locations) => {\n const { AssetFilterTokens } =\n locations && locations.length && locations[0] && locations[0].fields;\n\n if (AssetFilterTokens && AssetFilterTokens.length) {\n return (\n \n
\n \n {this.showItems(FeaturedCentres)}\n {this.showButton()}\n
\n \n
\n );\n }\n };\n renderStates = (locations) => {\n const { StateFilterTokens } =\n locations && locations.length && locations[0] && locations[0].fields;\n\n if (StateFilterTokens && StateFilterTokens.length) {\n return (\n \n -1}\n type=\"assetCheckbox\"\n onCheckboxChange={this.props.onCheckboxChange}\n />\n
\n {AssetFilterTokens.map((item, index) => {\n const { Value } = item.fields;\n return (\n \n -1}\n type=\"assetCheckbox\"\n onCheckboxChange={this.props.onCheckboxChange}\n />\n
\n );\n })}\n \n
\n );\n }\n };\n\n render() {\n const { locations, hideView, bgColor, bgColorHex } = this.props;\n\n return (\n \n -1}\n type=\"stateCheckbox\"\n onCheckboxChange={(type, value, checked) => {\n this.props.onCheckboxChange(type, value, checked);\n this.props.changeCountry(\"\");\n }}\n />\n
\n {StateFilterTokens.map((item, index) => {\n const { Value } = item.fields;\n return (\n \n -1}\n type=\"stateCheckbox\"\n onCheckboxChange={(type, value, checked) => {\n this.props.onCheckboxChange(type, value, checked);\n this.props.changeCountry(\"Australia\");\n }}\n />\n
\n );\n })}\n {/* \n -1}\n type=\"stateCheckbox\"\n onCheckboxChange={(type, value, checked) => {\n this.props.onCheckboxChange(type, value, checked);\n this.props.changeCountry(\"United States\");\n }}\n />\n
*/}\n \n
\n );\n }\n}\n\nexport default Filter;\n","import React, { Component } from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport TilePlaces from \"../../../../Base/Tiles/TilePlaces\";\nimport RiseAndFade from \"../../../../Base/Animations/RiseAndFade\";\nimport TagManager from \"react-gtm-module\";\n\nclass List extends Component {\n renderList = () => {\n const {\n AssetLists,\n NoResults,\n ShowFeatured\n } = this.props.list;\n\n if (AssetLists && AssetLists.length) {\n let Highlight = {};\n let Asset = AssetLists;\n if (ShowFeatured && ShowFeatured.value) {\n Highlight = AssetLists[0];\n Asset = AssetLists.slice(1);\n }\n\n const {\n ThumbnailType = null,\n ThumbnailUrl = null,\n Address = null,\n AssetName = null,\n Summary = null,\n AssetFeatures = null,\n ItemURL = null,\n } = Highlight || {};\n\n\n return (\n \n
\n \n\n
\n \n
\n \n
\n \n
\n \n this.props.changeView(\"list\")}\n className={`icon icon-grid ${this.props.currentView === \"list\" ? \"accent\" : \"\"\n }`}\n />\n this.props.changeView(\"map\")}\n className={`icon icon-location ${this.props.currentView === \"map\" ? \"accent\" : \"\"\n }`}\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n {this.renderTokens(locations)}\n
\n {hideView ? (\n \"\"\n ) : (\n \n
\n )}\n \n
\n \n this.props.changeView(\"list\")}\n className={`icon icon-grid ${this.props.currentView === \"list\" ? \"accent\" : \"\"\n }`}\n />\n this.props.changeView(\"map\")}\n className={`icon icon-location ${this.props.currentView === \"map\" ? \"accent\" : \"\"\n }`}\n />\n
\n \n
\n \n
\n \n
\n \n {this.renderStates(locations)}\n
\n \n
\n \n
\n this.props.resetCheckbox()}>\n
\n \n {ShowFeatured &&\n ShowFeatured.value &&\n
\n \n );\n } else {\n return (\n \n
\n }\n\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"Asset Listing highlight\",\n moduleCardLink:\n ItemURL && ItemURL.value && ItemURL.value.href ? ItemURL.value.href : \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n \n
\n \n
\n \n {Asset && Asset.length > 0 &&\n Asset.map((item, index) => {\n return (\n \n \n
\n );\n })\n }\n \n
\n );\n }\n };\n render() {\n return (\n \n
\n )}\n {this.renderList()}
\n \n
\n );\n }\n };\n\n render() {\n return (\n \n {ThumbnailUrl && ThumbnailUrl.value ? (\n isVideo ? (\n {\n this.props.resetSelectedLocation();\n }}\n className=\"icon icon-close\"\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n {AssetFeatures &&\n AssetFeatures.length > 0 &&\n AssetFeatures.map((item, index) => {\n return (\n \n
\n \n {ItemURL && ItemURL.value && ItemURL.value.href &&\n \n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingViewAsset\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n className=\"btn btn-light-primary btn-medium\"\n >\n {\"View\"}\n \n \n }\n this.props.showEnquireModal()}\n color={\"light-secondary\"}\n size={\"medium\"}\n label={\"Enquire\"}\n />\n
\n \n {this.renderModal()}\n \n
\n );\n }\n}\n\nexport default Map;\n","import React from \"react\";\n\nconst LazyLoading = () => {\n return (\n \n \n
\n )\n};\n\nexport default LazyLoading;","export const getUrlParameter = name => {\n // name = name.replace(/[\\[]/, \"\\\\[\").replace(/[\\]]/, \"\\\\]\");\n var regex = new RegExp(\"[\\\\?&]\" + name + \"=([^&#]*)\");\n var results = regex.exec(window.location.search);\n return results === null\n ? \"\"\n : decodeURIComponent(results[1].replace(/\\+/g, \" \"));\n };\n \n export const changeUrlParameter = (name, value) => {\n window.location.search = `?${name}=${value}&sc_mode=normal`;\n };\n \n \n export const addParameter = (url, param, value) => {\n // Using a positive lookahead (?=\\=) to find the\n // given parameter, preceded by a ? or &, and followed\n // by a = with a value after than (using a non-greedy selector)\n // and then followed by a & or the end of the string\n var val = new RegExp('(\\\\?|\\\\&)' + param + '=.*?(?=(&|$))'),\n qstring = /\\?.+$/;\n \n // Check if the parameter exists\n if (val.test(url)) {\n // if it does, replace it, using the captured group\n // to determine & or ? at the beginning\n return url.replace(val, '$1' + param + '=' + value);\n }\n else if (qstring.test(url)) {\n // otherwise, if there is a query string at all\n // add the param to the end of it\n return url + '&' + param + '=' + value;\n }\n else {\n // if there's no query string, add one\n return url + '?' + param + '=' + value;\n }\n }","export const addClassLazyload = (parentClass) => {\n const parentWrapper = document.getElementsByClassName(parentClass)[0];\n let imageList = \"\";\n if (parentWrapper) {\n imageList = parentWrapper.querySelectorAll(\"img\");\n if (imageList.length > 0) {\n imageList.forEach((el) => {\n el.classList.add(\"lazyload\");\n });\n }\n }\n};\n","import React from \"react\";\nimport axios from \"axios\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport Filter from \"./Filter\";\nimport List from \"./List\";\nimport Map from \"./Map\";\nimport LazyLoading from \"../../../Base/LazyLoading\";\nimport TagManager from \"react-gtm-module\";\nimport { getUrlParameter } from \"../../../../helper/UrlHelper\";\nimport { addClassLazyload } from \"../../../../helper/AddClassLazyloadHelper\";\n\nclass FeatureRetailerListingAssetListing extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedLocation: null,\n view: \"list\",\n currentCountry: \"\",\n assetCheckbox: [\"All\"],\n stateCheckbox: [\"All\"],\n listResult: {},\n showLoader: false,\n };\n }\n\n componentDidMount() {\n this.getQueries();\n }\n\n getQueries = () => {\n let qCountry = getUrlParameter(\"country\");\n let country = \"\";\n let qState = getUrlParameter(\"state\");\n let state = \"\";\n\n let qType = getUrlParameter(\"type\");\n let type = \"\";\n\n if (qCountry && qCountry.toLowerCase() === \"us\") {\n country = \"United States\";\n state = [\"US\"];\n qState = \"\";\n } else if (qState) {\n country = \"Australia\";\n let b = [];\n qState.split(\",\").forEach((item) => {\n b.push(item.toUpperCase());\n });\n state = b;\n qState = b;\n } else if (qCountry && qCountry.toLowerCase() === \"au\") {\n country = \"Australia\";\n state = this.getAustralianStates(\n this.props && this.props.fields && this.props.fields.Locations\n );\n } else {\n country = \"Australia\"\n state = [\"All\"];\n qState = \"\";\n }\n\n if (qType) {\n let a = [];\n qType.split(\",\").forEach((item) => {\n a.push(item.charAt(0).toUpperCase() + item.slice(1));\n });\n type = a;\n qType = a;\n } else {\n type = [\"All\"];\n qType = \"\";\n }\n\n if (qCountry || qType || qState) {\n this.setState(\n {\n currentCountry: country,\n stateCheckbox: state,\n assetCheckbox: type,\n },\n () => this.getListData(country, qType, qState)\n );\n\n setTimeout(() => {\n const assetListingContainer = document.querySelector(\".assetlisting\");\n const isPropertiestLisng = document.querySelector(\".is-properties-listing\");\n if (assetListingContainer && window && !isPropertiestLisng) {\n let yPos = assetListingContainer.getBoundingClientRect().top + window.pageYOffset;\n window.scrollTo({ top: yPos, behavior: 'smooth' });\n }\n }, 500)\n } else this.getListData(country);\n };\n\n getAustralianStates = (s) => {\n let states = [];\n let list = [];\n\n if (s && s.length && s[0] && s[0].fields && s[0].fields.StateFilterTokens) {\n list = s[0].fields.StateFilterTokens;\n\n list.forEach((item) => {\n if (\n item &&\n item.fields &&\n item.fields.Value &&\n item.fields.Value.value\n ) {\n states.push(item.fields.Value.value);\n }\n });\n }\n\n return states;\n };\n\n getListData = async (country = \"\", assetFilter = \"\", stateFilter = \"\") => {\n let contextInfo = window.document.getElementsByName(\"ContextItem\")[0];\n let pageId = contextInfo.value;\n let dbName = contextInfo.dataset.targetDb;\n\n let apiUrl = `/api/sitecore/assetlisting/search?pageId=${pageId}&dbName=${dbName}&country=${country}&assetFilter=${assetFilter}&stateFilter=${stateFilter}`;\n\n\n this.setState({\n showLoader: true,\n });\n\n let response = await axios.get(apiUrl);\n if (response) {\n this.setState(\n {\n listResult: response.data,\n showLoader: false,\n },\n () => addClassLazyload(\"list-wrapper\")\n );\n }\n };\n\n applyFilter = () => {\n const { assetCheckbox, stateCheckbox, currentCountry } = this.state;\n let assetFilter, stateFilter, country = \"\";\n\n if (assetCheckbox.indexOf(\"All\") > -1) {\n assetFilter = \"\";\n } else {\n assetFilter = assetCheckbox.filter((el) => el !== \"All\").join();\n }\n\n if (\n stateCheckbox.indexOf(\"All\") > -1 ||\n (stateCheckbox && stateCheckbox.indexOf(\"US\") > -1)\n ) {\n stateFilter = \"\";\n if (stateCheckbox.indexOf(\"All\") > -1) {\n country = \"Australia\";\n } else {\n country = \"\";\n }\n } else {\n stateFilter = stateCheckbox.filter((el) => el !== \"All\").join();\n }\n this.getListData(country ? country : currentCountry, assetFilter, stateFilter);\n\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingFilter\",\n assetFilter,\n stateFilter,\n },\n dataLayerName: \"dataLayer\",\n });\n };\n\n onCheckboxChange = (checkbox, property, value) => {\n this.setState(\n {\n [checkbox]: value\n ? [...this.state[checkbox], property]\n : this.state[checkbox].filter((el) => el !== property),\n },\n () => {\n if (property === \"All\" && value) {\n this.setState(\n {\n [checkbox]: [\"All\"],\n },\n () => this.applyFilter()\n );\n } else {\n if (this.state[checkbox].indexOf(\"All\") > -1) {\n this.setState(\n {\n [checkbox]: this.state[checkbox].filter((el) => el !== \"All\"),\n },\n () => this.applyFilter()\n );\n } else {\n if (!this.state[checkbox].length) {\n this.setState(\n {\n [checkbox]: [\"All\"],\n currentCountry:\n checkbox == \"stateCheckbox\"\n ? \"\"\n : this.state.currentCountry,\n },\n () => {\n this.applyFilter();\n }\n );\n } else {\n if (checkbox == \"stateCheckbox\") {\n let newStates = this.state.stateCheckbox;\n if (property === \"US\") {\n this.setState({ stateCheckbox: [\"US\"] }, () =>\n this.applyFilter()\n );\n } else {\n if (newStates.indexOf(\"US\") > -1) {\n newStates.splice(newStates.indexOf(\"US\"), 1);\n this.setState({ stateCheckbox: newStates }, () =>\n this.applyFilter()\n );\n } else this.applyFilter();\n }\n } else this.applyFilter();\n }\n }\n }\n }\n );\n };\n\n showEnquireModal = () => {\n document.getElementsByClassName(\n \"modal-enquire-form-leasing\"\n )[0].style.display = \"block\";\n };\n\n resetCheckbox = () => {\n this.getListData(\"Australia\");\n this.setState({\n stateCheckbox: [\"All\"],\n assetCheckbox: [\"All\"],\n selectedLocation: null,\n currentCountry: \"Australia\"\n });\n };\n\n resetSelectedLocation = () => {\n this.setState({ selectedLocation: null });\n };\n\n onMarkerClick = (location) => {\n this.setState({ selectedLocation: location }, () =>\n addClassLazyload(\"map-wrapper\")\n );\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingMarker\",\n assetMarker:\n location && location.AssetName && location.AssetName.value\n ? location.AssetName.value\n : \"Not specified\",\n },\n dataLayerName: \"dataLayer\",\n });\n };\n\n renderView = (apiKey) => {\n const { view, listResult, selectedLocation, currentCountry } = this.state;\n if (view === \"map\") {\n let locations = listResult.AssetLists.map((item) => {\n return { ...item };\n });\n\n return (\n \n {PageTitle &&\n PageTitle.value &&\n
\n \n
\n }\n \n
\n \n
\n \n {Locations && Locations.length && (\n {\n this.setState(\n { currentCountry, selectedLocation: null }\n // this.resetCheckbox\n );\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingLocation\",\n assetLocation: currentCountry,\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n locations={Locations}\n DoneText={DoneText}\n ViewText={ViewText}\n ResetText={ResetText}\n changeView={(view) => {\n this.setState({ view });\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingView\",\n assetView: view,\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n currentView={this.state.view}\n stateCheckbox={stateCheckbox}\n assetCheckbox={assetCheckbox}\n onCheckboxChange={this.onCheckboxChange}\n resetCheckbox={() => {\n this.resetCheckbox();\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingResetFilter\",\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n applyFilter={this.applyFilter}\n bgColor={bgColor}\n bgColorHex={bgColorHex}\n />\n )}\n
\n \n {!showLoader && this.renderView(ApiKey)}\n {showLoader &&
\n \n {FeaturedCentres &&\n FeaturedCentres.length > 0 &&\n FeaturedCentres.map((item, index) => {\n let {\n Thumbnail: thumbnail = null,\n Location: location = null,\n Name: name = null,\n SummaryStatement: summary = null,\n AssetFeatures: features = null,\n AssetLink: link = null,\n } = item.fields || {};\n let PartialFeatures = [];\n //let NewFeatures = [];\n if (features && features.length) {\n features.map((item) => {\n if (\n item.fields.Icon &&\n item.fields.Icon.value &&\n item.fields.Icon.value.src &&\n item.fields.Name &&\n item.fields.Name.value\n ) {\n PartialFeatures.push(item);\n }\n });\n }\n return (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"Asset Discover Centre\",\n moduleCardLink: link.value,\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n );\n })}\n \n );\n };\n let showButton = () => {\n if (!this.state.gate) {\n return (\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n {\n this.setState({ gate: !this.state.gate });\n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCta\",\n moduleName: \"Asset Discover Centre\",\n moduleCtaLink: \"Show More\",\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n label={\"Show More\"}\n color={\"light-secondary\"}\n size={\"medium\"}\n />\n
\n );\n } else {\n return null;\n }\n };\n return (\n \n
\n \n );\n }\n}\n\nexport default FeatureAssetsAssetsDiscoverCentre;\n","export const getAncestorElement = (element, ancestorClass) => {\n if (element) {\n while ((element = element.parentElement) && !element.classList.contains(ancestorClass));\n }\n return element;\n};\n","import React, { Component } from \"react\";\nimport { RichText } from \"@sitecore-jss/sitecore-jss-react\";\n\nclass Checkbox extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isInvalid: true,\n isTouched: false\n };\n }\n\n render() {\n const {\n className = null,\n id = null,\n name = null,\n uniqueKey = null,\n handleCheckboxClick = null,\n checked = false,\n isRequired = false,\n errorMessage = null,\n isSubmitted = false,\n } = this.props || {};\n\n const {\n isInvalid,\n isTouched\n } = this.state;\n\n return (\n \n
\n \n {showItems()}\n {showButton()}\n
\n \n \n {(isTouched || isSubmitted) &&\n isRequired &&\n isInvalid &&\n
\n )\n }\n};\n\nexport default Checkbox;","import React from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport TagManager from \"react-gtm-module\";\nimport axios from \"axios\";\nimport ReCAPTCHA from \"react-google-recaptcha\";\nimport { getAncestorElement } from \"../../../helper/GetAncestorElement\";\nimport FormInput from \"../Form/FormInput\";\nimport Checkbox from \"../Checkbox\";\n\nclass DownloadForm extends React.Component {\n constructor(props) {\n super(props);\n this.inputField = React.createRef();\n this.state = {\n formFieldState: props.FormFields,\n defaultFormFields: JSON.stringify(props.FormFields),\n complete: false,\n submitted: false,\n showForm: true,\n isSuccess: false,\n postData: [],\n show: false,\n showField: null,\n verifiedRecaptcha: false,\n expiredRecaptcha: false,\n load: false,\n recaptchaLoaded: false,\n pageUrl: \"\"\n };\n }\n\n componentDidMount = () => {\n setTimeout(() => {\n this.setState({ load: true });\n }, 1500);\n if (window) {\n this.setState({\n pageUrl: window.location.href\n })\n }\n };\n\n recaptchaLoaded = () => {\n console.log(\"Successful Load Recaptcha\");\n this.setState({ recaptchaLoaded: true });\n };\n\n recaptchaExpired = () => {\n this.setState({\n verifiedRecaptcha: false,\n expiredRecaptcha: true,\n });\n };\n recaptchaVerifyResponse = (response) => {\n if (response) {\n this.setState({\n verifiedRecaptcha: true,\n expiredRecaptcha: false,\n });\n } else {\n this.setState({ verifiedRecaptcha: false });\n }\n };\n\n checkFields = () => {\n let data = this.state.formFieldState;\n for (let i = 0; i < data.length; i++) {\n if (data[i].fields.Valid !== true) {\n this.setState({ complete: false });\n break;\n } else {\n this.setState({ complete: true });\n }\n }\n };\n\n validateField = (e, fields) => {\n let { Name = null } = fields || {};\n const {\n formFieldState\n } = this.state;\n formFieldState.map((items) => {\n let {\n Type,\n Name: fieldName = null,\n IsRequired,\n FormatValidation,\n Value = null,\n Valid = null,\n Touched = null\n } = items.fields || {};\n\n if (Type.value === \"Checkbox Field\") {\n if (IsRequired.value) {\n if (fieldName.value === Name.value) {\n items.fields.Value = e.target.checked;\n items.fields.Valid = e.target.checked;\n }\n } else if (fieldName.value === Name.value) {\n items.fields.Value = e.target.checked;\n } else {\n items.fields.Valid = true;\n }\n }\n else if (fieldName.value === Name.value) {\n items.fields.Value = e.target.value;\n items.fields.Touched = true;\n\n if (e.target.value) {\n if (FormatValidation.value) {\n let regExp = new RegExp(FormatValidation.value);\n if (regExp.test(String(e.target.value).toLowerCase())) {\n items.fields.Valid = true;\n } else {\n items.fields.Valid = false;\n }\n } else {\n items.fields.Valid = true;\n }\n } else {\n if (IsRequired.value) {\n items.fields.Valid = false;\n } else {\n items.fields.Valid = true\n }\n }\n } else {\n if (Value) {\n if (FormatValidation.value) {\n let regExp = new RegExp(FormatValidation.value);\n if (regExp.test(String(Value).toLowerCase())) {\n items.fields.Valid = true;\n } else {\n items.fields.Valid = false;\n }\n } else {\n items.fields.Valid = true;\n }\n } else {\n if (IsRequired.value) {\n items.fields.Valid = false;\n } else {\n items.fields.Valid = true\n }\n }\n }\n\n this.setState({ formFieldState: formFieldState });\n });\n\n this.checkFields();\n };\n\n handleClickClose = () => {\n document.body.classList.remove(\"scroll-disable\");\n this.setState({\n successMessage: null,\n verifiedRecaptcha: false,\n expiredRecaptcha: false,\n submitted: false,\n complete: false\n })\n this.props.onClickClose(JSON.parse(this.state.defaultFormFields));\n }\n\n handleSubmitBtn = async (e) => {\n e.preventDefault();\n const {\n formFieldState,\n complete,\n verifiedRecaptcha,\n pageUrl,\n } = this.state;\n const {\n fileId,\n gtmComponent\n } = this.props\n let formsWrapper = e.target;\n let formModalWrapper = getAncestorElement(formsWrapper, \"download-form__modal\");\n let submitBtn = formModalWrapper.querySelector(\".submit-btn\");\n let recaptchaWrapper = formModalWrapper.querySelector(\".form-recaptcha\");\n\n\n this.checkFields();\n this.setState({ submitted: true });\n\n setTimeout(() => {\n let invalidField = formsWrapper.querySelector(\".isInvalid\");\n if (invalidField) {\n invalidField.scrollIntoView();\n }\n }, 250);\n\n if (recaptchaWrapper) {\n if (!verifiedRecaptcha) {\n recaptchaWrapper.classList.add(\"is-required\");\n return;\n }\n }\n if (!complete) return;\n\n submitBtn.setAttribute(\"disabled\", \"\");\n\n let dataFields = [];\n const url = `/api/sitecore/downloadguidelines/SendFile`;\n\n // key compose field data\n formFieldState.map((item) => {\n const {\n Type,\n Name,\n Value\n } = item.fields;\n if (Type.value === \"Checkbox Field\") {\n dataFields.push({\n FieldName: Name.value,\n Value: Value ? Value.toString() : \"false\",\n });\n } else {\n if (Value) {\n dataFields.push({\n FieldName: Name.value,\n Value: Value,\n });\n }\n }\n });\n\n let postData = {\n FileId: fileId,\n Fields: dataFields,\n };\n\n console.log(postData)\n await axios({\n url,\n method: \"POST\",\n data: postData,\n })\n .then((response) => {\n if (response && response.data && response.data.status) {\n if (response.data.status.toLowerCase() === \"success\") {\n this.setState({\n showForm: false,\n isSuccess: true,\n submitted: false,\n });\n\n TagManager.dataLayer({\n dataLayer: {\n event: \"downloadFormSubmit\",\n downloadComponent: gtmComponent,\n downloadPageUrl: pageUrl\n },\n dataLayerName: \"dataLayer\",\n });\n }\n\n else {\n this.setState({\n showForm: false,\n isSuccess: false,\n submitted: false,\n });\n }\n formModalWrapper.scrollIntoView();\n }\n })\n .catch((error) => {\n submitBtn.removeAttribute(\"disabled\");\n console.error(error);\n this.setState({\n showForm: false,\n isSuccess: false,\n submitted: false,\n });\n });\n };\n\n handleOnInputFocus = (e) => {\n if (window.outerWidth < 992) {\n const inputElem = e.target;\n const formModalWrapper = getAncestorElement(inputElem, \"download-form__modal\");\n const formInputWrapper = getAncestorElement(inputElem, \"form-group\");\n if(formModalWrapper && formInputWrapper) {\n let inputTop = formInputWrapper.offsetTop + inputElem.clientHeight + 24;\n formModalWrapper.scrollTop = inputTop;\n formModalWrapper.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\n }\n }\n };\n\n renderFormFields = (fieldList) => {\n return fieldList.map((items, index) => {\n const {\n Type,\n Name,\n IsRequired,\n Touched,\n Valid,\n Value,\n Placeholder,\n RequiredValidationMessage,\n } = items.fields;\n\n let fieldLayout = \"\";\n\n switch (Type.value) {\n case \"Heading Field\":\n fieldLayout = (\n \n {errorMessage}\n
\n }\n\n \n
\n );\n break;\n case \"Text Field\":\n case \"Email Address Field\":\n case \"Phone Number field\":\n fieldLayout = (\n \n
\n \n\n );\n } else return null;\n }\n}\n\nexport default DownloadForm","import React from \"react\";\nimport {\n Text,\n Image,\n RichText,\n Link,\n Placeholder,\n} from \"@sitecore-jss/sitecore-jss-react\";\nimport defaultImg from \"../../../../assets/image/transparent.png\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport SectionDivider from \"../../../Base/SmallModules/SectionDivider\";\nimport Button from \"../../../Base/Button\";\nimport DownloadForm from \"../../../Base/DownloadForm\";\n\nclass FeatureAssetsAssetType extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n formFieldState: props.fields.FormFields,\n showModal: false,\n modalDownloadLink: \"#\",\n fileId: \"\"\n };\n }\n\n showHero = (heroUrl, heroType, heroTitle) => {\n let heroImageLayout = null;\n if (\n heroType &&\n heroType.value &&\n heroType.value.toLowerCase() === \"image\" &&\n heroUrl &&\n heroUrl.value\n ) {\n heroImageLayout = (\n \n
\n :\n \n \n
\n {showForm ?\n \n
\n )}\n {PrivacyPolicy && PrivacyPolicy.value && (\n \n
\n )}\n \n \n {\"Submit\"}\n \n \n
\n \n \n
\n }\n \n
\n {isSuccess &&\n \n
\n }\n \n
\n \n \n {\"Download\"}\n \n \n \n \n
\n );\n } else if (\n heroType &&\n heroType.value &&\n heroType.value.toLowerCase() === \"video\" &&\n heroUrl &&\n heroUrl.value\n ) {\n heroImageLayout = (\n \n \n
\n );\n } else if (heroUrl && heroUrl.value) {\n heroImageLayout = (\n \n
\n );\n }\n return heroImageLayout;\n };\n\n hasHeroHeader = (SectionTitle, HeroMediaUrl) => {\n let hasHeroHeaderValue = false;\n if ((SectionTitle && SectionTitle.value) || (HeroMediaUrl && HeroMediaUrl.value)) {\n hasHeroHeaderValue = true;\n }\n return hasHeroHeaderValue;\n }\n\n render() {\n const {\n SectionTitle = null,\n SectionId = null,\n SectionName = null,\n HeaderColor = null,\n HeaderTextColor = null,\n Heading = null,\n Description = null,\n CalltoAction = null,\n HeroMediaUrl = null,\n HeroMediaType = null,\n HeroMediaTitle = null,\n GoogleMap = null,\n GoogleMapURL = null,\n Address = null,\n IsOverlapping = null,\n FileDownloadsTitle,\n FileDownloads,\n FormFields = null,\n EnableRecaptcha = null,\n PublicKey = null,\n PrivacyPolicy = null,\n SuccessMessageHeader,\n SuccessMessage,\n FailedMessage,\n } = this.props.fields || {};\n\n const {\n showModal,\n fileId,\n modalDownloadLink,\n formFieldState\n } = this.state;\n\n return (\n \n {this.hasHeroHeader(SectionTitle, HeroMediaUrl) &&\n \n
\n \n }\n \n \n
\n \n
\n \n \n );\n }\n}\n\nexport default FeatureAssetsAssetType;\n","import React from \"react\";\nimport axios from \"axios\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport Filter from \"../AssetListing/Filter\";\nimport Map from \"../AssetListing/Map\";\nimport LazyLoading from \"../../../Base/LazyLoading\";\nimport TagManager from \"react-gtm-module\";\nimport { getUrlParameter } from \"../../../../helper/UrlHelper\";\nimport { addClassLazyload } from \"../../../../helper/AddClassLazyloadHelper\";\nimport ModuleHeader from \"../../../Base/ModuleHeader\";\nimport { RichText } from \"@sitecore-jss/sitecore-jss-react\";\n\nclass FeatureAssetsLocationsMap extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedLocation: null,\n view: \"map\",\n currentCountry: \"\",\n assetCheckbox: [\"All\"],\n stateCheckbox: [\"All\"],\n listResult: {},\n showLoader: false,\n };\n }\n\n componentDidMount() {\n this.getQueries();\n }\n\n getQueries = () => {\n let qCountry = getUrlParameter(\"country\");\n let country = \"\";\n let qState = getUrlParameter(\"state\");\n let state = \"\";\n\n let qType = getUrlParameter(\"type\");\n let type = \"\";\n\n if (qCountry && qCountry.toLowerCase() === \"us\") {\n country = \"United States\";\n state = [\"US\"];\n qState = \"\";\n } else if (qState) {\n country = \"Australia\";\n let b = [];\n qState.split(\",\").forEach((item) => {\n b.push(item.toUpperCase());\n });\n state = b;\n qState = b;\n } else if (qCountry && qCountry.toLowerCase() === \"au\") {\n country = \"Australia\";\n state = this.getAustralianStates(\n this.props && this.props.fields && this.props.fields.Locations\n );\n } else {\n state = [\"All\"];\n qState = \"\";\n }\n\n if (qType) {\n let a = [];\n qType.split(\",\").forEach((item) => {\n a.push(item.charAt(0).toUpperCase() + item.slice(1));\n });\n type = a;\n qType = a;\n } else {\n type = [\"All\"];\n qType = \"\";\n }\n\n if (qCountry || qType || qState) {\n this.setState(\n {\n currentCountry: country,\n stateCheckbox: state,\n assetCheckbox: type,\n },\n () => this.getListData(country, qType, qState)\n );\n } else this.getListData();\n };\n\n getAustralianStates = (s) => {\n let states = [];\n let list = [];\n\n if (s && s.length && s[0] && s[0].fields && s[0].fields.StateFilterTokens) {\n list = s[0].fields.StateFilterTokens;\n\n list.forEach((item) => {\n if (\n item &&\n item.fields &&\n item.fields.Value &&\n item.fields.Value.value\n ) {\n states.push(item.fields.Value.value);\n }\n });\n }\n\n return states;\n };\n\n getListData = async (country = \"\", assetFilter = \"\", stateFilter = \"\") => {\n let contextInfo = window.document.getElementsByName(\"ContextItem\")[0];\n let pageId = contextInfo.value;\n let dbName = contextInfo.dataset.targetDb;\n let apiUrl = `/api/sitecore/assetlisting/searchlocation?pageId=${pageId}&dbName=${dbName}&country=${country}&assetFilter=${assetFilter}&stateFilter=${stateFilter}`;\n\n this.setState({\n showLoader: true,\n });\n\n let response = await axios.get(apiUrl);\n if (response) {\n this.setState(\n {\n listResult: response.data,\n showLoader: false,\n },\n () => addClassLazyload(\"list-wrapper\")\n );\n }\n };\n\n applyFilter = () => {\n const { assetCheckbox, stateCheckbox, currentCountry } = this.state;\n let assetFilter, stateFilter;\n\n if (assetCheckbox.indexOf(\"All\") > -1) {\n assetFilter = \"\";\n } else {\n assetFilter = assetCheckbox.filter((el) => el !== \"All\").join();\n }\n\n if (\n stateCheckbox.indexOf(\"All\") > -1 ||\n (stateCheckbox && stateCheckbox.indexOf(\"US\") > -1)\n ) {\n stateFilter = \"\";\n } else {\n stateFilter = stateCheckbox.filter((el) => el !== \"All\").join();\n }\n this.getListData(currentCountry, assetFilter, stateFilter);\n\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingFilter\",\n assetFilter,\n stateFilter,\n },\n dataLayerName: \"dataLayer\",\n });\n };\n\n onCheckboxChange = (checkbox, property, value) => {\n this.setState(\n {\n [checkbox]: value\n ? [...this.state[checkbox], property]\n : this.state[checkbox].filter((el) => el !== property),\n },\n () => {\n if (property === \"All\" && value) {\n this.setState(\n {\n [checkbox]: [\"All\"],\n },\n () => this.applyFilter()\n );\n } else {\n if (this.state[checkbox].indexOf(\"All\") > -1) {\n this.setState(\n {\n [checkbox]: this.state[checkbox].filter((el) => el !== \"All\"),\n },\n () => this.applyFilter()\n );\n } else {\n if (!this.state[checkbox].length) {\n this.setState(\n {\n [checkbox]: [\"All\"],\n currentCountry:\n checkbox == \"stateCheckbox\"\n ? \"\"\n : this.state.currentCountry,\n },\n () => {\n this.applyFilter();\n }\n );\n } else {\n if (checkbox == \"stateCheckbox\") {\n let newStates = this.state.stateCheckbox;\n if (property === \"US\") {\n this.setState({ stateCheckbox: [\"US\"] }, () =>\n this.applyFilter()\n );\n } else {\n if (newStates.indexOf(\"US\") > -1) {\n newStates.splice(newStates.indexOf(\"US\"), 1);\n this.setState({ stateCheckbox: newStates }, () =>\n this.applyFilter()\n );\n } else this.applyFilter();\n }\n } else this.applyFilter();\n }\n }\n }\n }\n );\n };\n\n showEnquireModal = () => {\n document.getElementsByClassName(\n \"modal-enquire-form-leasing\"\n )[0].style.display = \"block\";\n };\n\n resetCheckbox = () => {\n this.getListData(\"Australia\");\n this.setState({\n stateCheckbox: [\"All\"],\n assetCheckbox: [\"All\"],\n selectedLocation: null,\n currentCountry: \"Australia\"\n });;\n };\n\n resetSelectedLocation = () => {\n this.setState({ selectedLocation: null });\n };\n\n onMarkerClick = (location) => {\n this.setState({ selectedLocation: location }, () =>\n addClassLazyload(\"map-wrapper\")\n );\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingMarker\",\n assetMarker:\n location && location.AssetName && location.AssetName.value\n ? location.AssetName.value\n : \"Not specified\",\n },\n dataLayerName: \"dataLayer\",\n });\n };\n\n renderView = (apiKey) => {\n const { listResult, selectedLocation, currentCountry } = this.state;\n\n let locations =\n listResult &&\n listResult.AssetLists &&\n listResult.AssetLists.map((item) => {\n return { ...item };\n });\n if (locations) {\n return (\n \n {this.showHero(HeroMediaUrl, HeroMediaType, HeroMediaTitle)}\n
\n \n
\n \n
\n \n {!this.hasHeroHeader(SectionTitle, HeroMediaUrl) &&\n
\n \n
\n )}\n {Description && Description.value && (\n \n
\n )}\n {CalltoAction &&\n CalltoAction.value &&\n CalltoAction.value.href &&\n CalltoAction.value.text && (\n \n
\n )}\n \n {GoogleMap &&\n GoogleMap.value &&\n GoogleMapURL &&\n GoogleMapURL.value && (\n this.setState({\n showModal: false,\n formFieldState: value\n })}\n gtmComponent={\"Asset Type Introduction File Download\"}\n />\n }\n
\n \n
\n )}\n {FileDownloads &&\n FileDownloads.length > 0 &&\n \n \n
\n {GoogleMapURL &&\n GoogleMapURL.value &&\n Address &&\n Address.value && (\n \n \n \n
\n )}\n \n
\n }\n {showModal &&\n \n
\n \n {FileDownloadsTitle && FileDownloadsTitle.value ?\n
\n {FileDownloads.map((item, index) => {\n const {\n Name,\n Url,\n FileId\n } = item.fields\n\n if (Name && Name.value && Url && Url.value && FileId && FileId.value) {\n return (\n \n \n
\n )\n } else return null\n })\n }\n \n
\n \n
\n \n
\n )}\n \n {\n this.setState(\n { currentCountry, selectedLocation: null }\n // this.resetCheckbox\n );\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingLocation\",\n assetLocation: currentCountry,\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n locations={locations}\n DoneText={DoneText}\n ResetText={ResetText}\n currentView=\"map\"\n hideView\n stateCheckbox={stateCheckbox}\n assetCheckbox={assetCheckbox}\n onCheckboxChange={this.onCheckboxChange}\n resetCheckbox={() => {\n this.resetCheckbox();\n TagManager.dataLayer({\n dataLayer: {\n event: \"assetListingResetFilter\",\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n applyFilter={this.applyFilter}\n />\n
\n \n
\n \n {!showLoader && this.renderView(ApiKey)}\n {showLoader &&
\n \n
\n \n );\n }\n}\n\nexport default FeatureEnquireEnquiryHighlight;\n","import React from \"react\";\r\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport TagManager from \"react-gtm-module\";\r\nimport defaultImg from \"../../../assets/image/transparent.png\";\r\n\r\nconst Highlight = (props) => {\r\n const {\r\n data = null,\r\n gtmEvent = null,\r\n gtmModuleName = null,\r\n index = null,\r\n imageSize = null,\r\n } = props || {};\r\n const {\r\n Image: image = null,\r\n ImageAltText: imageAltText = null,\r\n Title: title = null,\r\n Description: description = null,\r\n CTALink: url = null,\r\n CTAText: text = null,\r\n CTAType: type = null,\r\n } = data || {};\r\n\r\n let link =\r\n url && url.value && url.value.href\r\n ? { value: url.value.href }\r\n : null;\r\n if (link === null) {\r\n link = url && url.value && url.value.length\r\n ? url\r\n : null;\r\n } \r\n\r\n let linkTarget = (url && url.value && url.value && url.value.target) || null;\r\n\r\n return (\r\n \n
\n \n
\n )}\n \n
\n {LeasingTitle && (\n \n
\n \n {\n this.handleEnquireButton(LeasingType.value);\n }}\n {...getImage(LeasingImage, LeasingImageAltText)}\n />\n
\n \n \n
\n )}\n {LeasingContent && (\n \n
\n )}\n {LeasingCTACaption && (\n \n {\n this.handleEnquireButton(LeasingType.value);\n }}\n >\n
\n )}\n {LeasingCTACaption.value}
\n \n \n \n \n \n \r\n {image && image.value ? (\r\n 
\r\n )}\r\n
\r\n \r\n {title && title.value && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Highlight;\r\n","import React from \"react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport Highlight from \"../../../Base/Highlight\";\n\nclass FeatureEnquireEnquiryHighlights extends React.Component {\n constructor(props) {\n super(props);\n }\n\n handleOnClickEnquire(type) {\n let modal = \"\";\n if (type.toLowerCase() === \"long-term\") {\n modal = document.getElementsByClassName(\"modal-enquire-form-leasing\")[0];\n const longTermBtn = modal.querySelector(\".js-long-term-leasing\");\n this.triggerEvent(longTermBtn, \"click\");\n } else if (type.toLowerCase() === \"short-term\") {\n modal = document.getElementsByClassName(\"modal-enquire-form-leasing\")[0];\n const shortTermBtn = modal.querySelector(\".js-short-term-leasing\");\n this.triggerEvent(shortTermBtn, \"click\");\n } else if (type.toLowerCase() === \"media\") {\n modal = document.getElementsByClassName(\"modal-enquire-form-media\")[0];\n }\n\n if (modal) {\n modal.style.display = \"block\";\n modal.classList.add(\"enquire-modal-open\");\n if (modal.ownerDocument) {\n modal.ownerDocument.body.classList.add(\"scroll-disabled-body\");\n }\n }\n }\n\n // Manual Trigger Event\n triggerEvent = (element, event) => {\n var evt;\n if (document.createEvent) {\n evt = document.createEvent(\"HTMLEvents\");\n evt.initEvent(event, true, true);\n evt.eventName = event;\n element.dispatchEvent(evt);\n } else {\n evt = document.createEventObject();\n evt.eventName = event;\n evt.eventType = event;\n element.fireEvent(\"on\" + evt.eventType, evt);\n }\n };\n\n render() {\n const { Title = null, Enquiries = null } = this.props.fields || {};\n return (\n \r\n
\r\n )}\r\n {description && description.value && (\r\n \r\n
\r\n )}\r\n {text && text.value && (\r\n \r\n \r\n
\r\n )}\r\n \n
\n \n );\n }\n}\n\nexport default FeatureEnquireEnquiryHighlights;\n","import React from 'react';\r\n\r\nconst handleNextStep = (onStepChangeFunc, step, duration) => {\r\n let obj = {leaseDuration: duration, formType: 'leasing'}\r\n onStepChangeFunc(step, obj);\r\n}\r\n\r\nconst LeasingStep1 = (props) => {\r\n return(\r\n \n
\n \n {Title && Title.value && (\n
\n \n
\n )}\n \n
\n \n {Enquiries &&\n Enquiries.length > 0 &&\n Enquiries.map((item, index) => {\n return (\n \n this.handleOnClickEnquire(type)\n }\n />\n );\n })}\n
\n \r\n
\r\n );\r\n}\r\n\r\nexport default LeasingStep1;","import React, { Component } from \"react\";\r\nimport FormDropdown from \"../../../../Base/Form/FormDropDown\";\r\n\r\nclass LeasingStep2 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selected: null,\r\n show: false,\r\n showField: null\r\n };\r\n }\r\n\r\n handleNextStep = (onStepChangeFunc, step) => {\r\n onStepChangeFunc(step);\r\n };\r\n\r\n handleSelectionChange = (onFormDataChange, value, field) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = value;\r\n if (Object.keys(obj)[0] === \"preferredCentre\") {\r\n obj.LeasingRecipients =\r\n this.props.centreRecipients &&\r\n this.props.centreRecipients[value] &&\r\n this.props.centreRecipients[value].LeasingRecipients\r\n ? this.props.centreRecipients[value].LeasingRecipients\r\n : \"\";\r\n }\r\n onFormDataChange(obj);\r\n if (this.state.show) {\r\n this.setState({ show: !this.state.show });\r\n }\r\n };\r\n\r\n handleToggle = (e, field) => {\r\n this.setState({ showField: field, show: !this.state.show });\r\n };\r\n\r\n render() {\r\n const {\r\n countries,\r\n states,\r\n preferredCentres,\r\n onStepChange,\r\n onFormDataChange\r\n } = this.props || {};\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n STEP 1 OF 4\r\n
\r\n \r\n
\r\n \r\n How long are you looking to lease for?\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default LeasingStep2;\r\n","import React from \"react\";\r\n\r\nconst handleNextStep = (onStepChangeFunc, step, spaceRequirement) => {\r\n let obj = { spaceRequirement: spaceRequirement };\r\n onStepChangeFunc(step, obj);\r\n};\r\n\r\nconst LeasingStep3 = props => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n STEP 2 OF 4
\r\n STEP 1 OF 3
\r\n \r\n
\r\n Choose a location
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {this.state.show && this.state.showField === \"country\" && (\r\n {\r\n this.handleSelectionChange(onFormDataChange, value, {\r\n country: \"\",\r\n state: \"\",\r\n preferredCentre: \"\"\r\n });\r\n }}\r\n options={countries}\r\n active={\r\n this.props.formData[\"country\"]\r\n ? this.props.formData[\"country\"]\r\n : countries && countries.length && countries[0].name\r\n }\r\n />\r\n )}\r\n
\r\n\r\n \r\n \r\n {this.state.show && this.state.showField === \"state\" && (\r\n {\r\n this.handleSelectionChange(onFormDataChange, value, {\r\n state: \"\",\r\n preferredCentre: \"\"\r\n });\r\n }}\r\n options={states}\r\n active={this.props.formData[\"state\"]}\r\n />\r\n )}\r\n
\r\n\r\n \r\n \r\n {this.state.show &&\r\n this.state.showField === \"centres\" &&\r\n preferredCentres &&\r\n preferredCentres !== {} && (\r\n {\r\n this.handleSelectionChange(onFormDataChange, value, {\r\n preferredCentre: \"\"\r\n });\r\n }}\r\n options={preferredCentres}\r\n active={this.props.formData[\"preferredCentre\"]}\r\n />\r\n )}\r\n
\r\n \r\n
\r\n \r\n {\r\n this.handleNextStep(onStepChange, 3);\r\n }}\r\n >\r\n Next\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LeasingStep3;\r\n","import React, { Component } from \"react\";\r\nimport FormRadioGroup from \"../../../../Base/Form/FormRadiogroup\";\r\nimport FormFile from \"../../../../Base/Form/FormFile\";\r\nimport FormDropdown from \"../../../../Base/Form/FormDropDown\";\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\n\r\nclass LeasingStep4 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n formError: {\r\n firstName: true,\r\n lastName: true,\r\n email: true,\r\n phone: true,\r\n businessName: true,\r\n },\r\n show: false,\r\n showField: null,\r\n verifiedRecaptcha: false,\r\n expiredRecaptcha: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const formInput = document\r\n .getElementsByClassName(\"enquire-form-wrapper\")[0]\r\n .querySelectorAll(\"input\");\r\n if (formInput) {\r\n Array.prototype.slice.call(formInput).map((formInput, index) => {\r\n // For all major browsers, except IE 8 and earlier\r\n if (formInput.addEventListener) {\r\n formInput.addEventListener(\"focus\", this.handleOnInputFocus);\r\n // For IE 8 and earlier versions\r\n } else if (formInput.attachEvent) {\r\n formInput.attachEvent(\"onfocus\", this.handleOnInputFocus);\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleOnInputFocus = (e) => {\r\n if (window.outerWidth < 992) {\r\n const inputElem = e.target;\r\n inputElem.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n }\r\n };\r\n\r\n checkFormError = () => {\r\n let error = false;\r\n for (let key in this.state.formError) {\r\n if (this.state.formError[key]) {\r\n error = true;\r\n }\r\n }\r\n return error;\r\n };\r\n\r\n resetFormError = () => {\r\n for (let key in this.state.formError) {\r\n this.state.formError[key] = true;\r\n }\r\n };\r\n\r\n recaptchaLoaded = () => {\r\n console.log(\"Successful Load Recaptcha\");\r\n this.setState({ recaptchaLoaded: true });\r\n };\r\n\r\n recaptchaExpired = () => {\r\n this.setState({\r\n verifiedRecaptcha: false,\r\n expiredRecaptcha: true,\r\n });\r\n };\r\n recaptchaVerifyResponse = (response) => {\r\n if (response) {\r\n this.setState({\r\n verifiedRecaptcha: true,\r\n expiredRecaptcha: false,\r\n });\r\n } else {\r\n this.setState({ verifiedRecaptcha: false });\r\n }\r\n };\r\n\r\n handleNextStep = (onStepChangeFunc, step) => {\r\n let valid = true;\r\n // validate form before changing step\r\n if (valid) {\r\n onStepChangeFunc(step);\r\n }\r\n };\r\n\r\n handleInputChange = (\r\n onFormDataChange,\r\n e,\r\n field,\r\n required,\r\n validate,\r\n expression\r\n ) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = e.target.value;\r\n onFormDataChange(obj);\r\n\r\n if (required && !e.target.value) {\r\n this.state.formError[Object.keys(obj)[0]] = true;\r\n } else if (validate && !this.validateFormat(expression, e.target.value)) {\r\n this.state.formError[Object.keys(obj)[0]] = true;\r\n } else {\r\n this.state.formError[Object.keys(obj)[0]] = false;\r\n }\r\n };\r\n\r\n handleSelectChange = (onFormDataChange, e, field) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = e;\r\n onFormDataChange(obj);\r\n if (this.state.show) {\r\n this.setState({ show: false });\r\n }\r\n };\r\n\r\n handleRadioChange = (onFormDataChange, optionValue, field) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = optionValue;\r\n onFormDataChange(obj);\r\n };\r\n\r\n handleAttachments = (onFormDataChange, attachments, errorMessage) => {\r\n onFormDataChange({ attachments: attachments }, errorMessage);\r\n };\r\n\r\n validateFormat = (expression, value) => {\r\n let re = new RegExp(expression);\r\n return re.test(String(value).toLowerCase());\r\n };\r\n\r\n handleToggle = (e) => {\r\n e.target.focus();\r\n this.setState({ show: !this.state.show });\r\n };\r\n\r\n handleBlur = (e) => {\r\n if (this.state.show) {\r\n setTimeout(() => {\r\n this.setState({ show: false });\r\n }, 100);\r\n }\r\n };\r\n\r\n render() {\r\n if (!this.props.submitted) {\r\n this.resetFormError();\r\n }\r\n const {\r\n recapConfig,\r\n } = this.props || {};\r\n\r\n const { verifiedRecaptcha, expiredRecaptcha } = this.state;\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n STEP 3 OF 4
\r\n STEP 2 OF 3
\r\n \r\n
\r\n \r\n What's your minimum space requirement?\r\n
\r\n \r\n
\r\n \r\n {\r\n handleNextStep(props.onStepChange, 4, \"Small\");\r\n }}\r\n >\r\n Small\r\n
\r\n Under 100m²\r\n \r\n
\r\n \r\n Under 100m²\r\n \r\n
\r\n {\r\n handleNextStep(props.onStepChange, 4, \"Medium\");\r\n }}\r\n >\r\n Medium\r\n
\r\n 100-200m²\r\n \r\n
\r\n \r\n 100-200m²\r\n \r\n
\r\n {\r\n handleNextStep(props.onStepChange, 4, \"Large\");\r\n }}\r\n >\r\n Large\r\n
\r\n More than 200m²\r\n \r\n
\r\n \r\n More than 200m²\r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default LeasingStep4;\r\n","import React from \"react\";\r\n\r\nconst LeasingStepComplete = props => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n STEP 4 OF 4
\r\n STEP 3 OF 3
\r\n \r\n
\r\n A few more details...
\r\n \r\n
\r\n \r\n {/* call now button */}\r\n {this.props.centreContactNumber && (\r\n
\r\n \r\n
\r\n )}\r\n {/* Contact details */}\r\n \r\n \r\n
\r\n \r\n \r\n Call now\r\n \r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n {\r\n firstName: \"\",\r\n },\r\n true\r\n );\r\n }}\r\n value={this.props.formData[\"firstName\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.firstName\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.firstName ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n {\r\n lastName: \"\",\r\n },\r\n true\r\n );\r\n }}\r\n value={this.props.formData[\"lastName\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.lastName\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.lastName ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n this.handleRadioChange(\r\n this.props.onFormDataChange,\r\n optionValue,\r\n {\r\n contactPreference: \"\",\r\n }\r\n );\r\n }}\r\n value={this.props.formData[\"contactPreference\"]}\r\n />\r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n { email: \"\" },\r\n true,\r\n true,\r\n this.props.formatValidation.email\r\n );\r\n }}\r\n value={this.props.formData[\"email\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.email\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.email ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n {this.props.submitted &&\r\n this.props.formData.email &&\r\n !this.validateFormat(\r\n this.props.formatValidation.email,\r\n this.props.formData.email\r\n ) ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n { phone: \"\" },\r\n true,\r\n true,\r\n this.props.formatValidation.phone\r\n );\r\n }}\r\n value={this.props.formData[\"phone\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.phone\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.phone ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n {this.props.submitted &&\r\n this.props.formData.phone &&\r\n !this.validateFormat(\r\n this.props.formatValidation.phone,\r\n this.props.formData.phone\r\n ) ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n {\r\n businessName: \"\",\r\n },\r\n true\r\n );\r\n }}\r\n value={this.props.formData[\"businessName\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.businessName\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.businessName ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n {this.state.show && (\r\n {\r\n this.handleSelectChange(\r\n this.props.onFormDataChange,\r\n value,\r\n { retailCategory: \"\" }\r\n );\r\n }}\r\n options={this.props.categories}\r\n active={this.props.formData[\"retailCategory\"]}\r\n />\r\n )}\r\n
\r\n {/* Existing retailer / lease */}\r\n \r\n {\r\n this.handleRadioChange(\r\n this.props.onFormDataChange,\r\n optionValue,\r\n {\r\n existingRetailer: \"\",\r\n }\r\n );\r\n }}\r\n value={this.props.formData[\"existingRetailer\"]}\r\n />\r\n
\r\n \r\n {\r\n this.handleRadioChange(\r\n this.props.onFormDataChange,\r\n optionValue,\r\n {\r\n leasedWithQicgre: \"\",\r\n }\r\n );\r\n }}\r\n value={this.props.formData[\"leasedWithQicgre\"]}\r\n />\r\n
\r\n \r\n {/* Attachements */}\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n this.handleAttachments(\r\n this.props.onFormDataChange,\r\n files,\r\n errorMessage\r\n );\r\n }}\r\n value={this.props.formData[\"attachments\"]}\r\n />\r\n {this.props.fileErrorMessage && (\r\n
\r\n \r\n {/* Subscription */}\r\n \r\n {this.props.fileErrorMessage}\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n { recapConfig.fields.EnableRecaptcha &&\r\n recapConfig.fields.EnableRecaptcha.value &&\r\n recapConfig.fields.PublicKey &&\r\n recapConfig.fields.PublicKey.value && (\r\n \r\n
\r\n )}\r\n \r\n {expiredRecaptcha &&\r\n
\r\n ReCaptcha is required
\r\n }\r\n\r\n
\r\n \r\n {\r\n if(recapConfig.fields.EnableRecaptcha.value){\r\n if(!verifiedRecaptcha) {\r\n this.setState({ expiredRecaptcha: true });\r\n return;\r\n }}\r\n this.handleNextStep(this.props.onStepChange, 5);\r\n }}\r\n >\r\n Submit enquiry\r\n \r\n \r\n {this.props.submitted && this.checkFormError() ? (\r\n
\r\n \r\n !\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LeasingStepComplete;\r\n","import React, { Component } from \"react\";\r\nimport { Link } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport defaultImg from \"../../../../../assets/image/transparent.png\";\r\n\r\nclass MediaStep1 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n advertisingOpportunity: this.props.formData[\"advertisingOpportunity\"]\r\n };\r\n }\r\n\r\n handleNextStep = (onStepChangeFunc, step) => {\r\n onStepChangeFunc(step, { formType: \"media\" });\r\n };\r\n\r\n handleOpportunityClick = (onFormDataChange, value) => {\r\n const selected = this.state.advertisingOpportunity === value ? \"\" : value;\r\n onFormDataChange({ advertisingOpportunity: selected });\r\n this.setState({ advertisingOpportunity: selected });\r\n };\r\n\r\n render() {\r\n const props = this.props;\r\n const advertisingOpportunity = [\r\n \"\",\r\n \"In-centre media\",\r\n \"Custom campaigns\",\r\n \"Digital promotion\"\r\n ];\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Thanks {props.formData.firstName}. We'll be in contact with you\r\n soon.\r\n
\r\n \r\n
\r\n \r\n In the meantime, you can learn more about our business and what we do.\r\n
\r\n \r\n
\r\n \r\n \r\n Learn more\r\n \r\n {\r\n props.onDone();\r\n }}>Done\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default MediaStep1;\r\n","import React, { Component } from \"react\";\r\nimport FormRadioGroup from \"../../../../Base/Form/FormRadiogroup\";\r\nimport FormFile from \"../../../../Base/Form/FormFile\";\r\nimport FormDropdown from \"../../../../Base/Form/FormDropDown\";\r\nimport $ from \"jquery\";\r\n// window.$ = $;\r\n\r\nclass MediaStep2 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n formError: {\r\n firstName: true,\r\n lastName: true,\r\n email: true,\r\n phone: true,\r\n businessName: true,\r\n },\r\n show: false,\r\n showField: null,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n $(\".modal-enquire-form-media\").scrollTop(0);\r\n const formInput = document\r\n .getElementsByClassName(\"enquire-form-wrapper\")[0]\r\n .querySelectorAll(\"input\");\r\n if (formInput) {\r\n Array.prototype.slice.call(formInput).map((formInput, index) => {\r\n // For all major browsers, except IE 8 and earlier\r\n if (formInput.addEventListener) {\r\n formInput.addEventListener(\"focus\", this.handleOnInputFocus);\r\n // For IE 8 and earlier versions\r\n } else if (formInput.attachEvent) {\r\n formInput.attachEvent(\"onfocus\", this.handleOnInputFocus);\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleOnInputFocus = (e) => {\r\n if (window.outerWidth < 992) {\r\n const inputElem = e.target;\r\n inputElem.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n }\r\n };\r\n\r\n checkFormError = () => {\r\n let error = false;\r\n for (let key in this.state.formError) {\r\n if (this.state.formError[key]) {\r\n error = true;\r\n }\r\n }\r\n return error;\r\n };\r\n\r\n resetFormError = () => {\r\n for (let key in this.state.formError) {\r\n this.state.formError[key] = true;\r\n }\r\n };\r\n\r\n handleNextStep = (onStepChangeFunc, step) => {\r\n let valid = true;\r\n // validate form before changing step\r\n if (valid) {\r\n onStepChangeFunc(step);\r\n }\r\n };\r\n\r\n handleInputChange = (\r\n onFormDataChange,\r\n e,\r\n field,\r\n required,\r\n validate,\r\n expression\r\n ) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = e.target.value;\r\n onFormDataChange(obj);\r\n\r\n if (required && !e.target.value) {\r\n this.state.formError[Object.keys(obj)[0]] = true;\r\n } else if (validate && !this.validateFormat(expression, e.target.value)) {\r\n this.state.formError[Object.keys(obj)[0]] = true;\r\n } else {\r\n this.state.formError[Object.keys(obj)[0]] = false;\r\n }\r\n };\r\n\r\n handleSelectChange = (onFormDataChange, value, field) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = value;\r\n onFormDataChange(obj);\r\n };\r\n\r\n handleRadioChange = (onFormDataChange, optionValue, field) => {\r\n let obj = field;\r\n obj[Object.keys(obj)[0]] = optionValue;\r\n onFormDataChange(obj);\r\n };\r\n\r\n handleAttachments = (onFormDataChange, attachments, errorMessage) => {\r\n onFormDataChange({ attachments: attachments }, errorMessage);\r\n };\r\n\r\n validateFormat = (expression, value) => {\r\n let re = new RegExp(expression);\r\n return re.test(String(value).toLowerCase());\r\n };\r\n\r\n handleToggle = (e) => {\r\n this.setState({ show: !this.state.show });\r\n };\r\n\r\n handleBlur = (e) => {\r\n if (this.state.show) {\r\n setTimeout(() => {\r\n this.setState({ show: !this.state.show });\r\n }, 100);\r\n }\r\n };\r\n\r\n render() {\r\n if (!this.props.submitted) {\r\n this.resetFormError();\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n STEP 1 OF 2
\r\n \r\n
\r\n \r\n Which type of advertising do you have in mind?\r\n
\r\n \r\n
\r\n \r\n {\r\n this.handleOpportunityClick(\r\n props.onFormDataChange,\r\n advertisingOpportunity[1]\r\n );\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n In-centre media
\r\n \r\n Utilise banners, screens and decals in high-traffic areas.\r\n
\r\n \r\n {\r\n this.handleOpportunityClick(\r\n props.onFormDataChange,\r\n advertisingOpportunity[2]\r\n );\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Custom campaigns
\r\n \r\n Spread your message across multiple channels and locations.\r\n
\r\n \r\n {\r\n this.handleOpportunityClick(\r\n props.onFormDataChange,\r\n advertisingOpportunity[3]\r\n );\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Digital promotion
\r\n \r\n Leverage our website, eDM and social media audiences.\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n this.handleNextStep(props.onStepChange, 2);\r\n }}\r\n >\r\n Next\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default MediaStep2;\r\n","import React, { Fragment, createRef } from \"react\";\nimport LeasingStep1 from \"./steps/LeasingStep1\";\nimport LeasingStep2 from \"./steps/LeasingStep2\";\nimport LeasingStep3 from \"./steps/LeasingStep3\";\nimport LeasingStep4 from \"./steps/LeasingStep4\";\nimport StepComplete from \"./steps/StepComplete\";\nimport MediaStep1 from \"./steps/MediaStep1\";\nimport MediaStep2 from \"./steps/MediaStep2\";\nimport TagManager from \"react-gtm-module\";\nimport axios from \"axios\";\nimport { getUrlParameter } from \"../../../../helper/UrlHelper.js\";\n\nclass FeatureEnquireForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n formStep: 1,\n formData: {\n formType: \"\", // leasing or media\n // step 1\n leaseDuration: \"\",\n advertisingOpportunity: \"\",\n // step 2\n country: \"\",\n state: \"\",\n preferredCentre: \"\",\n // step 3\n spaceRequirement: \"\",\n // step 4\n firstName: \"\",\n lastName: \"\",\n contactPreference: \"email\",\n email: \"\",\n phone: \"\",\n businessName: \"\",\n retailCategory: \"\",\n existingRetailer: \"no\",\n leasedWithQicgre: \"no\",\n advertisedWithQicgre: \"no\",\n tellUs: \"\",\n attachments: [],\n subscribe: \"\",\n LeasingRecipients: \"\",\n PageItemId: \"\",\n PageDbName: \"\"\n },\n formFieldData: {\n countries: [],\n states: {},\n preferredCentres: {},\n retailerCategories: [],\n centreContactNumber: {},\n centreRecipients: {}\n },\n submitted: false,\n fileErrorMessage: null,\n verifiedRecaptcha: false,\n expiredRecaptcha: false,\n load: false,\n recaptchaLoaded: false,\n formatValidation: {\n phone: \"^[0-9 +()-]+$\",\n email: \"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\\\.[a-zA-Z0-9-.]+$\"\n }\n };\n this.enquireModal = createRef();\n this.enquireModalMedia = createRef();\n }\n\n componentDidMount() {\n const {\n Countries = null,\n Assets = null,\n RetailerCategories = null,\n } = this.props.fields || {};\n this.extractFromFieldData(Countries, Assets, RetailerCategories);\n\n if (document) {\n let enquireType = getUrlParameter(\"enquire\").toLowerCase();\n if (enquireType) {\n let modal = \"\";\n if (enquireType === \"leasing\") {\n modal = document.getElementsByClassName(\"modal-enquire-form-leasing\")[0];\n if (modal) {\n modal.classList.add(\"enquire-old\");\n modal.style.display = \"block\";\n }\n } else if (enquireType === \"media\") {\n modal = document.getElementsByClassName(\"modal-enquire-form-media\")[0];\n if (modal) {\n modal.style.display = \"block\";\n }\n }\n }\n }\n }\n\n handleCloseButton() {\n let modal = \"\";\n let enquiryType = \"leasing\";\n\n if (\n this.enquireModalMedia &&\n this.enquireModalMedia.current &&\n this.enquireModalMedia.current.classList.contains(\"enquire-modal-open\")\n ) {\n enquiryType = \"media\";\n }\n TagManager.dataLayer({\n dataLayer: {\n event: \"enquiryFormDropout\",\n enquiryType: enquiryType,\n stepDropout: this.state.formStep\n },\n dataLayerName: \"dataLayer\"\n });\n\n modal = document.getElementsByClassName(\"modal-enquire-form-leasing\")[0];\n modal.style.display = \"none\";\n modal.classList.remove(\"enquire-old\");\n\n modal = document.getElementsByClassName(\"modal-enquire-form-media\")[0];\n modal.style.display = \"none\";\n\n // let country = this.Model.get(\"Countries\").map((item, i) => {\n // if (i === 0) return item.fields.Name.value;\n // });\n\n // reset all states\n this.setState({\n ...this.state,\n formStep: 1,\n formData: {\n formType: \"\",\n leaseDuration: \"\",\n advertisingOpportunity: \"\",\n country: this.state.formData.country,\n state: this.state.formData.state,\n preferredCentre: this.state.formData.preferredCentre,\n spaceRequirement: \"\",\n firstName: \"\",\n lastName: \"\",\n contactPreference: \"email\",\n email: \"\",\n phone: \"\",\n businessName: \"\",\n retailCategory: \"\",\n existingRetailer: \"no\",\n leasedWithQicgre: \"no\",\n advertisedWithQicgre: \"no\",\n tellUs: \"\",\n attachments: [],\n subscribe: \"\",\n PageItemId: this.state.formData.PageItemId,\n PageDbName: this.state.formData.PageDbName\n },\n submitted: false,\n fileErrorMessage: null,\n verifiedRecaptcha: false,\n expiredRecaptcha: false,\n load: false,\n recaptchaLoaded: false,\n });\n // leasing\n if (\n this.enquireModal &&\n this.enquireModal.current &&\n this.enquireModal.current.classList.contains(\"enquire-modal-open\")\n ) {\n this.enquireModal.current.classList.remove(\"enquire-modal-open\");\n\n if (this.enquireModal.current.ownerDocument) {\n this.enquireModal.current.ownerDocument.body.classList.remove(\n \"scroll-disabled-body\"\n );\n }\n }\n // media\n if (\n this.enquireModalMedia &&\n this.enquireModalMedia.current &&\n this.enquireModalMedia.current.classList.contains(\"enquire-modal-open\")\n ) {\n this.enquireModalMedia.current.classList.remove(\"enquire-modal-open\");\n\n if (this.enquireModalMedia.current.ownerDocument) {\n this.enquireModalMedia.current.ownerDocument.body.classList.remove(\n \"scroll-disabled-body\"\n );\n }\n }\n }\n\n validateFormat(expression, value) {\n let re = new RegExp(expression);\n return re.test(String(value).toLowerCase());\n }\n\n handleStepChange(step, data) {\n if (\n (this.state.formData.formType === \"leasing\" && step === 5) ||\n (this.state.formData.formType === \"media\" && step === 3)\n ) {\n let isValid = true;\n if (\n !this.state.formData.firstName ||\n !this.state.formData.lastName ||\n !this.state.formData.email ||\n !this.state.formData.phone ||\n !this.state.formData.businessName\n ) {\n isValid = false;\n }\n\n if (\n this.state.formData.email &&\n !this.validateFormat(\n this.state.formatValidation.email,\n this.state.formData.email\n )\n ) {\n isValid = false;\n }\n\n if (\n this.state.formData.phone &&\n !this.validateFormat(\n this.state.formatValidation.phone,\n this.state.formData.phone\n )\n ) {\n isValid = false;\n }\n\n if (!isValid) {\n this.setState({\n submitted: true\n });\n return;\n }\n }\n\n const withData = data || {};\n\n this.setState(\n {\n ...this.state,\n formStep: step,\n formData: {\n ...this.state.formData,\n ...withData\n }\n },\n () => {\n if (\n (this.state.formData.formType === \"leasing\" &&\n this.state.formStep === 5) ||\n (this.state.formData.formType === \"media\" &&\n this.state.formStep === 3)\n ) {\n this.submitForm();\n }\n }\n );\n }\n\n handleFormDataChange(obj, fileErrorMessage) {\n this.setState({\n ...this.state,\n formData: {\n ...this.state.formData,\n ...obj\n },\n fileErrorMessage: fileErrorMessage\n });\n }\n\n extractFromFieldData(Countries, Assets, RetailerCategories) {\n let countries = [];\n let states = {};\n let preferredCentres = {};\n let centreContactNumber = {};\n let centreRecipients = {};\n let retailerCategories = [];\n let initialState = \"\";\n let initialCountry = \"\";\n let initialCentre = \"\";\n let initialAsset = \"\";\n\n if (window && window.location) {\n initialAsset = window.location.pathname\n .substr(window.location.pathname.lastIndexOf(\"/\") + 1)\n .replace(/-/g, \" \")\n .replace(/%20/g, \" \");\n }\n\n Countries.map(country => {\n const { Name, States } = country.fields || {};\n\n // build countries\n countries.push({\n name: Name.value,\n value: Name.value\n });\n\n // build states\n let tempCountryStates = [];\n States.map(countryState => {\n tempCountryStates.push({\n name: countryState.fields.Name.value,\n value: countryState.fields.Name.value\n });\n });\n states[Name.value] = tempCountryStates;\n });\n\n // build preferred centres\n Assets.map(asset => {\n const {\n AssetName,\n EnquiryContactNumber,\n Country,\n State,\n LeasingRecipients\n } = asset.fields || {};\n let stateName =\n State && State.value && State.value !== \"\" ? State.value : \"others\";\n\n preferredCentres[stateName] = !preferredCentres[stateName]\n ? []\n : preferredCentres[stateName];\n preferredCentres[stateName].push({\n name: AssetName.value,\n value: AssetName.value\n });\n centreContactNumber[AssetName.value] = {\n contact:\n EnquiryContactNumber && EnquiryContactNumber.value\n ? EnquiryContactNumber.value\n : \"\"\n };\n centreRecipients[AssetName.value] = {\n LeasingRecipients:\n LeasingRecipients && LeasingRecipients.value\n ? LeasingRecipients.value\n : \"\"\n };\n if (AssetName.value.toLowerCase() === initialAsset.toLowerCase()) {\n initialCountry = Country.value;\n initialState = State.value;\n initialCentre = AssetName.value;\n }\n });\n // build reatailer categories\n RetailerCategories.map(category => {\n const { Name } = category.fields || {};\n\n retailerCategories.push({\n name: Name.value,\n value: Name.value\n });\n });\n\n let contextInfo = window.document.getElementsByName(\"ContextItem\")[0];\n let PageItemId = contextInfo.value;\n let PageDbName = contextInfo.dataset.targetDb;\n\n this.setState({\n ...this.state,\n formFieldData: {\n countries,\n states,\n preferredCentres,\n retailerCategories,\n centreContactNumber,\n centreRecipients\n },\n formData: {\n ...this.state.formData,\n PageItemId,\n PageDbName,\n country: initialCountry ? initialCountry : countries[0].value,\n state: initialState,\n preferredCentre: initialCentre\n }\n });\n }\n\n getRecipient = () => {\n const { preferredCentre, leaseDuration } = this.state.formData;\n const { Assets = null } = this.props.fields || {};\n const selectedAsset = Assets.filter(\n item => item.fields.AssetName.value === preferredCentre\n );\n\n if (selectedAsset) {\n const {\n LeasingRecipients,\n ShortTermLeasingRecipients\n } = selectedAsset[0].fields;\n if (\n leaseDuration.toLowerCase() === \"less than 12 months\" &&\n ShortTermLeasingRecipients.value\n ) {\n return ShortTermLeasingRecipients.value;\n }\n return LeasingRecipients.value;\n }\n };\n\n submitForm = async () => {\n const url = `/api/sitecore/enquiry/sendenquiryformemail`;\n\n let postData = { ...this.state.formData };\n\n const formData = new FormData();\n Object.keys(postData).forEach(function (key) {\n if (key !== \"attachments\" && key !== \"LeasingRecipients\")\n return formData.append(key, postData[key]);\n });\n if (postData.preferredCentre) {\n formData.append(\"LeasingRecipients\", this.getRecipient());\n }\n postData.attachments.map(file => {\n formData.append(\"attachments\", file);\n });\n\n let response = await axios({\n method: \"POST\",\n url,\n data: formData,\n config: { headers: { \"Content-Type\": \"multipart/form-data\" } }\n });\n\n var withInput = 0;\n var completionRate;\n let duration = postData.leaseDuration;\n let checkFields = [\"retailCategory\", \"subscribe\", \"attachments\"];\n let emptyFields = \"\";\n\n if (postData.formType.toLowerCase() === \"leasing\") {\n checkFields.push(\"state\", \"preferredCentre\");\n duration && duration.toLowerCase().indexOf(\"less\") !== -1\n ? (duration = \"Short term leasing\")\n : (duration = \"Long term leasing\");\n } else {\n checkFields.push(\"tellUs\");\n }\n\n checkFields.map(item => {\n if (postData[item] === true || postData[item].length) {\n withInput++;\n } else {\n emptyFields += \" \" + item;\n }\n });\n\n completionRate = ((withInput / checkFields.length) * 100).toFixed(2) + \"%\";\n\n TagManager.dataLayer({\n dataLayer: {\n event: \"enquiryFormSubmit\",\n enquiryType: postData.formType,\n enquiryCategory: duration ? duration : postData.advertisingOpportunity,\n enquiryCompletionRate: completionRate,\n enquiryEmptyFields: emptyFields\n },\n dataLayerName: \"dataLayer\"\n });\n\n if (response) {\n const { data } = response.data;\n }\n };\n\n render() {\n const {\n Static = null,\n Partnership = null,\n Digital = null,\n LearnMore = null,\n GoogleRecaptchaConfig = null\n } = this.props.fields || {};\n\n const {\n verifiedRecaptcha,\n expiredRecaptcha,\n load,\n recaptchaLoaded,\n } = this.state;\n\n console.log(GoogleRecaptchaConfig);\n\n return (\n \r\n
\r\n \r\n
\r\n \r\n
\r\n STEP 2 OF 2
\r\n \r\n
\r\n A few more details...
\r\n \r\n
\r\n \r\n {/* call now button */}\r\n {this.props.centreContactNumber && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {/* Contact details */}\r\n \r\n \r\n
\r\n \r\n \r\n Call now\r\n \r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n {\r\n firstName: \"\",\r\n },\r\n true\r\n );\r\n }}\r\n value={this.props.formData[\"firstName\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.firstName\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.firstName ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n {\r\n lastName: \"\",\r\n },\r\n true\r\n );\r\n }}\r\n value={this.props.formData[\"lastName\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.lastName\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.lastName ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n this.handleRadioChange(\r\n this.props.onFormDataChange,\r\n optionValue,\r\n {\r\n contactPreference: \"\",\r\n }\r\n );\r\n }}\r\n value={this.props.formData[\"contactPreference\"]}\r\n />\r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n { email: \"\" },\r\n true,\r\n true,\r\n this.props.formatValidation.email\r\n );\r\n }}\r\n value={this.props.formData[\"email\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.email\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.email ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n {this.props.submitted &&\r\n this.props.formData.email &&\r\n !this.validateFormat(\r\n this.props.formatValidation.email,\r\n this.props.formData.email\r\n ) ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n { phone: \"\" },\r\n true,\r\n true,\r\n this.props.formatValidation.phone\r\n );\r\n }}\r\n value={this.props.formData[\"phone\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.phone\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.phone ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n {this.props.submitted &&\r\n this.props.formData.phone &&\r\n !this.validateFormat(\r\n this.props.formatValidation.phone,\r\n this.props.formData.phone\r\n ) ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n \r\n {\r\n this.handleInputChange(\r\n this.props.onFormDataChange,\r\n e,\r\n {\r\n businessName: \"\",\r\n },\r\n true\r\n );\r\n }}\r\n value={this.props.formData[\"businessName\"]}\r\n className={\r\n this.props.submitted && !this.props.formData.businessName\r\n ? \"form-error\"\r\n : \"\"\r\n }\r\n />\r\n {this.props.submitted && !this.props.formData.businessName ? (\r\n \r\n !\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n \r\n {this.state.show && (\r\n {\r\n this.handleSelectChange(\r\n this.props.onFormDataChange,\r\n value,\r\n { retailCategory: \"\" }\r\n );\r\n }}\r\n options={this.props.categories}\r\n active={this.props.formData[\"retailCategory\"]}\r\n />\r\n )}\r\n
\r\n \r\n {\r\n this.handleRadioChange(\r\n this.props.onFormDataChange,\r\n optionValue,\r\n {\r\n advertisedWithQicgre: \"\",\r\n }\r\n );\r\n }}\r\n value={this.props.formData[\"advertisedWithQicgre\"]}\r\n />\r\n
\r\n {/* */}\r\n \r\n {\r\n this.handleInputChange(this.props.onFormDataChange, e, {\r\n tellUs: \"\",\r\n });\r\n }}\r\n value={this.props.formData[\"tellUs\"]}\r\n className=\"\"\r\n />\r\n
\r\n \r\n {/* Attachements */}\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n this.handleAttachments(\r\n this.props.onFormDataChange,\r\n files,\r\n errorMessage\r\n );\r\n }}\r\n value={this.props.formData[\"attachments\"]}\r\n />\r\n {this.props.fileErrorMessage && (\r\n
\r\n \r\n {/* Subscription */}\r\n \r\n {this.props.fileErrorMessage}\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n this.handleNextStep(this.props.onStepChange, 3);\r\n }}\r\n >\r\n Submit enquiry\r\n \r\n {this.props.submitted && this.checkFormError() ? (\r\n
\r\n \r\n !\r\n \r\n
\r\n ) : null}\r\n \n \n {this.state.formStep !== 1 && this.state.formStep !== 5 && (\n {\n this.handleStepChange(this.state.formStep - 1);\n }}\n >\n \n BACK\n \n )}\n {\n this.handleCloseButton();\n }}\n >\n CLOSE\n \n \n
\n \n {this.state.formStep === 1 && (\n \n \n {this.state.formStep !== 1 && this.state.formStep !== 3 && (\n {\n this.handleStepChange(this.state.formStep - 1);\n }}\n >\n \n BACK\n \n )}\n {\n this.handleCloseButton();\n }}\n >\n CLOSE\n \n \n
\n {this.state.formStep === 1 && (\n \n
\n \n \n
\n \n \n
\n \n
\n \n \n {/* TODO correct the argument passed in handleEnquireButton */}\n {\n this.handleEnquireButton(\n FormType && FormType.value ? FormType.value : \"\"\n );\n }}\n color={mode == \"bg-dark\" ? \"dark-primary\" : \"light-primary\"}\n size={\"large\"}\n icon={\"chevron-up-2\"}\n >\n
\n )}\n \n \n \n
\n {LeasingCaption && LeasingCaption.value && (\n \n
\n \n \n \n \n \n )\n );\n }\n}\n\nexport default FeatureEnquireLeasingInquiryHighlight;\n","import React from \"react\";\nimport SecondaryLinks from \"../../../Base/SmallModules/SecondaryLinks\";\n\nconst FeatureESGESGQuickLinks = props => {\n const {\n Links\n } = props.fields || {};\n if (\n props.rendering.dataSource &&\n props.rendering.dataSource !== \"\" &&\n Links.length !== undefined &&\n Links.length !== 0\n ) {\n return (\n \n
\n );\n } else {\n return null;\n }\n};\n\nexport default FeatureESGESGQuickLinks;\n","import React from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport ModuleHeader from \"../../../Base/ModuleHeader\";\nimport TagManager from \"react-gtm-module\";\n\nconst FeatureESGESGReportHighlights = (props) => {\n let {\n Heading,\n CTA,\n Description,\n DisplayWholeReports: full,\n Highlights,\n } = props.fields;\n full = (full && full.value) || false;\n if (!full) {\n Highlights = Highlights.slice(0, 6);\n }\n return (\n \n
\n \n {!full && CTA && CTA.value && CTA.value.href && CTA.value.text && (\n \n {full ? (\n \n
\n );\n })}\n \n
\n ) : (\n \n {Highlights.map((item, index) => {\n const {\n HighlightTitle: title,\n HighlightSubtitle: subtitle,\n HighlightIcon: icon,\n HighlightLink: link,\n HighlightTheme: theme,\n } = item.fields;\n let colValue = 3;\n if (index == 0 || index % 6 == 0 || index % 6 == 5) {\n colValue = 6;\n }\n return (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"ESG Report Highlights\",\n moduleCardLink:\n (link && link.value && link.value.href) || \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n \n
\n {icon && icon.value && (\n \n )}\n \n \n
\n \n
\n \n {(link && link.value && link.value.text) ||\n \"View case study\"}\n \n
\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCta\",\n moduleName: \"ESG Report Highlights\",\n moduleCtaLink: CTA.value.href,\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n {CTA.value.text}\n \n \n \n \n \n
\n )}\n \n \n \n
\n \n
\n \n
\n \n {Details.map((item, index) => {\n const {\n ReportImage = null,\n ReportImageAltText = null,\n ReportTitle = null,\n ReportDescription = null,\n LinkUrl = null,\n LinkText = null,\n } = item.fields || {};\n return (\n
\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"ESG Report Links\",\n moduleCardLink: LinkUrl.value,\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n );\n })}\n \n
\n \n {ReportTitle && ReportTitle.value && (\n
\n \n \n
\n )}\n {ReportDescription && ReportDescription.value && (\n \n
\n )}\n {LinkText && LinkText.value && (\n \n {LinkText.value}\n \n
\n )}\n \n
\n \n \n {Heading && Heading.value && (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"ESG Report Section\",\n moduleTitle: SectionTitle.value,\n moduleCardLink:\n (LinkUrl &&\n LinkUrl.value &&\n LinkUrl.value.href) ||\n \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n );\n })\n : \"\"}\n \n
\n \n \n
\n \n
\n \n {SectionNumber &&\n SectionNumber.value &&\n SectionNumber.value < 10\n ? \"0\"\n : \"\"}\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n );\n });\n };\n\n setVisible = (Assets) => {\n if (Assets && Assets.length > 0) {\n return \"show\";\n }\n return \"hide\";\n };\n\n render() {\n const {\n ModuleTitle = null,\n Assets = null,\n FormFields = null,\n EnableRecaptcha = null,\n PublicKey = null,\n PrivacyPolicy = null,\n SuccessMessageHeader,\n SuccessMessage,\n FailedMessage,\n } = this.props.fields || {};\n\n const {\n showModal,\n fileId,\n modalDownloadLink,\n formFieldState\n } = this.state;\n\n return (\n \n \n
\n );\n })}\n \n
\n\n \n );\n }\n}\n\nexport default FeatureFitoutDownloadableGuidelines;\n","import React from \"react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport SectionDivider from \"../../../Base/SmallModules/SectionDivider\";\nimport defaultImg from \"../../../../assets/image/transparent.png\";\nimport ModuleHeader from \"../../../Base/ModuleHeader\";\nimport DownloadForm from \"../../../Base/DownloadForm\";\n\nclass FeatureFitoutDownloadableGuidelinesHighlight extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n formFieldState: props.fields.FormFields,\n showModal: false,\n modalDownloadLink: \"#\",\n fileId: \"\"\n };\n }\n\n renderAssets = assets => {\n return assets.map((item, index) => {\n const { AssetImage, AssetGuidelines } = item.fields;\n return (\n \n
\n {Assets &&\n Assets.length > 0 && (\n \n
\n \n
\n )}\n \n
\n {this.renderAssets(Assets)}
\n \n
\n \n
\n \n
\n \n );\n });\n };\n\n setVisible = (Assets) => {\n if (Assets && Assets.length >= 4) {\n return \"show\";\n }\n return \"hide\";\n };\n\n render() {\n const {\n ModuleTitle = null,\n Assets = null,\n ViewAllCTA = null,\n FormFields = null,\n EnableRecaptcha = null,\n PublicKey = null,\n PrivacyPolicy = null,\n SuccessMessageHeader,\n SuccessMessage,\n FailedMessage,\n } = this.props.fields || {};\n \n const {\n showModal,\n fileId,\n modalDownloadLink,\n formFieldState\n } = this.state;\n\n return (\n \n \n
\n );\n })}\n \n
\n\n \n );\n }\n}\n\nexport default FeatureFitoutDownloadableGuidelinesHighlight;\n","import React from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport SectionDivider from \"../../../Base/SmallModules/SectionDivider\";\nimport { getImage } from \"../../../../helper/ImageHelper\";\n\nconst FeatureFitoutTimeline = props => {\n const { Description = null, TimelineActivities = null, SectionId = null } =\n props.fields || {};\n return (\n \n
\n {Assets &&\n Assets.length > 0 && (\n \n
\n \n
\n )}\n \n
\n {this.renderAssets(Assets)}
\n \n
\n )}\n \n );\n};\n\nexport default FeatureFitoutTimeline;\n","import React from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport SectionDivider from \"../../../Base/SmallModules/SectionDivider\";\n\nconst setVisible = props => {\n if (!props.rendering.dataSource || props.rendering.dataSource === \"\") {\n return \"hide\";\n }\n return \"show\";\n};\n\nclass FeatureFloorPlanFloorPlan extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n levelData: [],\n enableMap: false\n };\n this.wrapperRef = React.createRef();\n }\n\n componentDidMount() {\n const script = document.createElement(\"script\");\n const { Map } = this.props.fields || {};\n\n if (setVisible(this.props) === \"show\") {\n\n window.mappedin = {\n miKey: {\n id: \"5b27ff074738e142bc3596a8\",\n key: \"cnLpUwpoMZNygC8AiDRB9K3xe5fISsE5CZ8SBhO0jUDRU1U6\"\n },\n venue: Map.fields.Venue.value\n };\n script.src =\n \"https://cdn.mappedin.com/web2/release/mappedin-web.js\";\n script.type = \"text/javascript\";\n script.async = true;\n document.body.appendChild(script);\n }\n }\n\n setWrapperRef = node => {\n this.wrapperRef = node;\n };\n\n render() {\n const { Map } = this.props.fields || {};\n const {\n Title = null,\n SectionId = null\n } = this.props.fields || {};\n return (\n setVisible(this.props) === \"show\" && (\n \n
\n )}\n {TimelineActivities.map((item, index) => {\n const {\n Title: Title = null,\n Duration: Duration = null,\n Description: Description = null,\n Image: Image = null\n } = item.fields || {};\n return (\n \n
\n );\n })}\n {index + 1}
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n )\n );\n }\n}\n\nexport default FeatureFloorPlanFloorPlan;\n","import React from \"react\";\r\nimport { Text, Link } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport TagManager from \"react-gtm-module\";\r\n\r\nconst FooterLinks = (props) => {\r\n const { FooterMainLinks } = props.data || {};\r\n\r\n return (\r\n \n
\n \n
\n {this.props.fields &&\n this.props.fields.Map &&\n this.props.fields.Map.fields && (\n \n
\n )}\n \n \n
\n \r\n {FooterMainLinks &&\r\n FooterMainLinks.length > 0 &&\r\n FooterMainLinks.map((item, index) => {\r\n let {\r\n Title: Title = null,\r\n FooterMain: FooterMain = null,\r\n MenuLink: MenuLink = null,\r\n } = item.fields;\r\n let footerLinksLayout;\r\n let noFooterLinks = true;\r\n\r\n if (Title && Title.value && FooterMain && FooterMain.length > 0) {\r\n\r\n let footerMainLayout =\r\n FooterMain.map((linkitem, linkindex) => {\r\n let { MainLink: MainLink = null } = linkitem.fields;\r\n let footerMainLinkLayout;\r\n if (\r\n MainLink &&\r\n MainLink.value &&\r\n MainLink.value.href &&\r\n MainLink.value.text\r\n ) {\r\n noFooterLinks = false\r\n footerMainLinkLayout = (\r\n \r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Retailer Footer\",\r\n moduleCtaLink:\r\n MainLink.value.href +\r\n MainLink.value.querystring,\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n />\r\n\r\n {MainLink.value.text.toLowerCase() === \"careers\" && (\r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Retailer Footer\",\r\n moduleCtaLink: MainLink.value.href,\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n >\r\n \r\n \r\n )}\r\n
\r\n );\r\n }\r\n return footerMainLinkLayout;\r\n })\r\n\r\n\r\n if (MenuLink && MenuLink.value && MenuLink.value.href) {\r\n noFooterLinks = false\r\n }\r\n\r\n footerLinksLayout = (\r\n \r\n {MenuLink !== null ? (\r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Retailer Footer\",\r\n moduleCtaLink: MenuLink.value.href,\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n >\r\n
\r\n {footerMainLayout}\r\n \r\n );\r\n }\r\n return footerLinksLayout;\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default FooterLinks;\r\n","import React from \"react\";\r\nimport { Text, Link } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport TagManager from \"react-gtm-module\";\r\n\r\nconst FooterNotes = (props) => {\r\n const { NotesTitle = null, NotesLinks = null, FooterMainLinks = null } = props.data || {};\r\n if (NotesTitle && NotesTitle.value) {\r\n let footerLinkClass = \"\";\r\n\r\n if (FooterMainLinks && FooterMainLinks.length < 3) {\r\n footerLinkClass = \"is-link-two\";\r\n }\r\n else if (FooterMainLinks && FooterMainLinks.length < 4) {\r\n footerLinkClass = \"is-link-three\";\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\nexport default FooterNotes;\r\n","import React from \"react\";\r\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport TagManager from \"react-gtm-module\";\r\n\r\nconst FooterSocial = (props) => {\r\n const { SocialTitle = null, SocialLinks = null } = props.data || {};\r\n if (SocialTitle && SocialTitle.value && SocialLinks && SocialLinks.length) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {NotesLinks &&\r\n NotesLinks.length &&\r\n NotesLinks.map((item, index) => {\r\n let { NoteLink: NoteLink = null } = item.fields;\r\n return (\r\n
\r\n \r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Retailer Footer\",\r\n moduleCtaLink:\r\n (NoteLink &&\r\n NoteLink.value &&\r\n NoteLink.value.href) ||\r\n \"\",\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n />\r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Retailer Footer\",\r\n moduleCtaLink:\r\n (NoteLink &&\r\n NoteLink.value &&\r\n NoteLink.value.href) ||\r\n \"\",\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n >\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\nexport default FooterSocial;\r\n","import React, { createRef } from \"react\";\r\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport axios from \"axios\";\r\nimport TagManager from \"react-gtm-module\";\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\n\r\nclass FooterLinks extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n formData: {\r\n pageId: \"\",\r\n dbName: \"\",\r\n name: \"\",\r\n emailAddress: \"\",\r\n },\r\n message: \"\",\r\n error: false,\r\n verifiedRecaptcha: false,\r\n expiredRecaptcha: false,\r\n load: false,\r\n recaptchaLoaded: false,\r\n };\r\n\r\n this.recatpchaRef = createRef();\r\n }\r\n\r\n validateFormat = (value) => {\r\n let re = new RegExp(\"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\\\.[a-zA-Z0-9-.]+$\");\r\n return re.test(String(value).toLowerCase());\r\n };\r\n\r\n componentDidMount() {\r\n let contextInfo = window.document.getElementsByName(\"ContextItem\")[0];\r\n let pageId = contextInfo.value;\r\n let dbName = contextInfo.dataset.targetDb;\r\n\r\n this.setState({\r\n ...this.state,\r\n formData: {\r\n pageId: pageId,\r\n dbName: dbName,\r\n name: \"\",\r\n emailAddress: \"\",\r\n },\r\n });\r\n\r\n setTimeout(() => {\r\n this.setState({ load: true });\r\n }, 1500);\r\n }\r\n\r\n subscribe = async (element) => {\r\n const { verifiedRecaptcha, formData } = this.state;\r\n const url = `/api/sitecore/subscription/subscribe`;\r\n let data = { ...formData };\r\n\r\n const recaptchaWrapper = document\r\n .getElementsByClassName(\"footer-subscribe-wrapper\")[0]\r\n .querySelector(\".footer-subscribe-recaptcha\");\r\n\r\n if (recaptchaWrapper && !verifiedRecaptcha) {\r\n recaptchaWrapper.classList.add(\"is-required\");\r\n }\r\n\r\n if (formData.emailAddress === \"\") {\r\n this.setState({\r\n ...this.state,\r\n message: \"Please enter a valid email.\",\r\n error: true,\r\n });\r\n }\r\n\r\n if ((recaptchaWrapper && !verifiedRecaptcha) || formData.emailAddress === \"\") {\r\n return;\r\n }\r\n\r\n if (formData.emailAddress !== \"\") {\r\n if (!this.validateFormat(formData.emailAddress)) {\r\n this.setState({\r\n ...this.state,\r\n message: \"Please enter a valid email.\",\r\n error: true,\r\n });\r\n } else {\r\n let response = await axios({\r\n method: \"POST\",\r\n url,\r\n data: data,\r\n });\r\n\r\n if (response && response.data) {\r\n if (response.data.IsSuccessful) {\r\n // this.recatpchaRef.current.props.grecaptcha.reset();\r\n if(recaptchaWrapper) {\r\n this.recaptcha.reset();\r\n }\r\n this.setState({\r\n ...this.state,\r\n message: response.data.Message,\r\n error: false,\r\n verifiedRecaptcha: false\r\n });\r\n } else {\r\n this.setState({\r\n ...this.state,\r\n message: response.data.Message,\r\n error: false,\r\n });\r\n }\r\n\r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"subscribeFormSubmit\",\r\n },\r\n dataLayerName: \"dataLayer\",\r\n });\r\n }\r\n }\r\n }\r\n };\r\n\r\n recaptchaLoaded = () => {\r\n console.log(\"Successful Load Recaptcha\");\r\n this.setState({ recaptchaLoaded: true });\r\n };\r\n\r\n recaptchaExpired = () => {\r\n this.setState({\r\n verifiedRecaptcha: false,\r\n expiredRecaptcha: true,\r\n });\r\n };\r\n recaptchaVerifyResponse = (response) => {\r\n if (response) {\r\n this.setState({\r\n verifiedRecaptcha: true,\r\n expiredRecaptcha: false,\r\n });\r\n } else {\r\n this.setState({ verifiedRecaptcha: false });\r\n }\r\n };\r\n\r\n handleEmailChange = (e) => {\r\n let message = \"\";\r\n let error = false;\r\n\r\n if (this.state.error && !this.validateFormat(e.target.value)) {\r\n message = \"Please enter a valid email.\";\r\n error = true;\r\n }\r\n\r\n this.setState({\r\n ...this.state,\r\n formData: {\r\n ...this.state.formData,\r\n emailAddress: e.target.value,\r\n },\r\n message: message,\r\n error: error,\r\n });\r\n };\r\n\r\n\r\n render() {\r\n\r\n const { verifiedRecaptcha, expiredRecaptcha, load } = this.state;\r\n\r\n const {\r\n SubscribeTitle = null,\r\n SubscribeSummary = null,\r\n SubscribeEmailPlaceholder = null,\r\n SubscribeSubmitButton = null,\r\n SubscribePrivacyPolicy = null,\r\n EnableRecaptcha = null,\r\n PublicKey = null\r\n } = this.props.data || {};\r\n if (\r\n SubscribeTitle &&\r\n SubscribeTitle.value &&\r\n SubscribeSummary &&\r\n SubscribeSummary.value &&\r\n SubscribeEmailPlaceholder &&\r\n SubscribeEmailPlaceholder.value &&\r\n SubscribeSubmitButton &&\r\n SubscribeSubmitButton.value\r\n ) {\r\n return (\r\n \r\n
\r\n {SocialLinks.map((item, index) => {\r\n const {\r\n Icon: Icon = null,\r\n SocialLink: SocialLink = null,\r\n } = item.fields;\r\n if (\r\n Icon &&\r\n Icon.value &&\r\n SocialLink &&\r\n SocialLink.value &&\r\n SocialLink.value.href\r\n ) {\r\n return (\r\n \r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Retailer Footer\",\r\n moduleCtaLink:\r\n (SocialLink &&\r\n SocialLink.value &&\r\n SocialLink.value.href) ||\r\n \"\",\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n >\r\n \r\n \r\n
\r\n );\r\n } else return null;\r\n })}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n this.recaptcha = ref}\r\n />\r\n
\r\n )}\r\n \r\n {\r\n this.handleEmailChange(e);\r\n }}\r\n autoComplete=\"off\"\r\n />\r\n \r\n {SubscribeEmailPlaceholder.value\r\n ? SubscribeEmailPlaceholder.value\r\n : \"\"}\r\n \r\n {this.state.message !== \"\" && (\r\n \r\n {this.state.message}\r\n \r\n )}\r\n
\r\n \r\n \r\n
\r\n {load &&\r\n EnableRecaptcha &&\r\n EnableRecaptcha.value &&\r\n PublicKey &&\r\n PublicKey.value &&\r\n (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n}\r\n\r\nexport default FooterLinks;\r\n","import React from \"react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport FooterLinks from \"../FooterLinks\";\nimport FooterNotes from \"../FooterNotes\";\nimport FooterSocial from \"../FooterSocial\";\nimport FooterSubscribe from \"../FooterSubscribe\";\n\nconst FeatureFooterRetailerFooter = props => {\n let pageWithoutSpace = [\n \"Asset Page\",\n \"Partners\",\n \"Leadership\",\n \"About\",\n \"Contact Us\"\n ];\n let { pageName = \"\" } = props.params || {};\n let noMarginTop = pageWithoutSpace.includes(pageName);\n\n return (\n \n
\n \n \n
\n \n
\n \n
\n No options
;\r\n };\r\n\r\n formatOptionLabel = ({ label }, { inputValue }) => {\r\n let highlighted = label;\r\n if (inputValue && inputValue.length > 1) {\r\n highlighted = label.replace(\r\n new RegExp(inputValue, \"gi\"),\r\n highlighted => `${highlighted}`\r\n );\r\n }\r\n return ;\r\n };\r\n\r\n render() {\r\n const { title, placeholder, isRequired = false, errorMessage = null, isSubmitted = false, } = this.props;\r\n const { optionsList, options, isInvalid, isTouched } = this.state;\r\n return (\r\n \r\n ({\r\n ...theme,\r\n colors: {\r\n ...theme.colors,\r\n primary25: \"#f5f5f6\"\r\n }\r\n })}\r\n isClearable={false}\r\n backspaceRemovesValue={false}\r\n formatOptionLabel={this.formatOptionLabel}\r\n // isDisabled={isRetailersDisabled}\r\n />\r\n {(isTouched || isSubmitted) &&\r\n isRequired &&\r\n isInvalid &&\r\n \r\n \r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default MultiselectField;\r\n","import React, { Component } from \"react\";\nimport { RichText, Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport TagManager from \"react-gtm-module\";\nimport axios from \"axios\";\nimport ReCAPTCHA from \"react-google-recaptcha\";\nimport DOMPurify from 'dompurify';\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport MultiselectField from \"../../../Base/MultiselectField\";\nimport Checkbox from \"../../../Base/Checkbox\";\n\nclass FeatureFormsRetailerContactUs extends Component {\n constructor(props) {\n super(props);\n this.inputField = React.createRef();\n this.state = {\n fields: props.fields.Fields,\n userEmailAddress: \"\",\n complete: false,\n submitted: false,\n successMessage: null,\n postData: [],\n show: false,\n showField: null,\n verifiedRecaptcha: false,\n expiredRecaptcha: false,\n load: false,\n recaptchaLoaded: false,\n };\n }\n\n componentDidMount = () => {\n setTimeout(() => {\n this.setState({ load: true });\n }, 1500);\n };\n\n recaptchaLoaded = () => {\n console.log(\"Successful Load Recaptcha\");\n this.setState({ recaptchaLoaded: true });\n };\n\n recaptchaExpired = () => {\n this.setState({\n verifiedRecaptcha: false,\n expiredRecaptcha: true,\n });\n };\n recaptchaVerifyResponse = (response) => {\n if (response) {\n this.setState({\n verifiedRecaptcha: true,\n expiredRecaptcha: false,\n });\n } else {\n this.setState({ verifiedRecaptcha: false });\n }\n };\n\n validateField = (e, fields, fieldname, droplistValue) => {\n let { Name = null } = fields || {};\n this.state.fields.map((items) => {\n if (items.fields.Type.value === \"Email Address Field\") {\n this.setState({ userEmailAddress: items.fields.Value });\n }\n\n if (items.fields.Type.value === \"Checkbox Field\") {\n if (items.fields.IsRequired.value) {\n if (items.fields.Name.value === Name.value) {\n items.fields.Value = e.target.checked;\n items.fields.Valid = e.target.checked;\n }\n } else if (items.fields.Name.value === Name.value) {\n items.fields.Value = e.target.checked;\n } else {\n items.fields.Valid = true;\n }\n } else if (items.fields.Type.value === \"DropList\") {\n if (items.fields.IsRequired.value) {\n if (items.fields.Name.value === fieldname) {\n items.fields.Value = droplistValue;\n items.fields.Valid = droplistValue ? true : false;\n }\n } else if (items.fields.Name.value === fieldname) {\n items.fields.Value = droplistValue;\n } else {\n items.fields.Valid = true;\n }\n } else if (items.fields.Name.value === Name.value) {\n items.fields.Value = e.target.value;\n items.fields.Touched = true;\n\n if (items.fields.FormatValidation.value) {\n let expression = items.fields.FormatValidation.value;\n let re = new RegExp(expression);\n\n if (\n items.fields.IsRequired.value &&\n !re.test(String(e.target.value).toLowerCase())\n ) {\n items.fields.Valid = false;\n } else if (\n !items.fields.IsRequired.value &&\n e.target.value &&\n !re.test(String(e.target.value).toLowerCase())\n ) {\n items.fields.Valid = false;\n } else {\n items.fields.Valid = true;\n }\n } else {\n if (items.fields.IsRequired.value) {\n items.fields.Valid = e.target.value ? true : false;\n } else {\n items.fields.Valid = true;\n }\n }\n } else {\n if (items.fields.FormatValidation.value) {\n let expression = items.fields.FormatValidation.value;\n let re = new RegExp(expression);\n\n if (\n items.fields.IsRequired.value &&\n !re.test(String(items.fields.Value).toLowerCase())\n ) {\n items.fields.Valid = false;\n } else if (\n !items.fields.IsRequired.value &&\n items.fields.Value &&\n !re.test(String(items.fields.Value).toLowerCase())\n ) {\n items.fields.Valid = false;\n } else {\n items.fields.Valid = true;\n }\n } else {\n if (items.fields.IsRequired.value) {\n items.fields.Valid = items.fields.Value ? true : false;\n } else {\n items.fields.Valid = true;\n }\n }\n }\n\n this.setState({ fields: this.state.fields });\n });\n\n this.checkFields();\n };\n\n checkFields = () => {\n let data = this.state.fields;\n for (let i = 0; i < data.length; i++) {\n if (data[i].fields.Valid !== true) {\n this.setState({ complete: false });\n break;\n } else {\n this.setState({ complete: true });\n }\n }\n };\n\n handleSubmitBtn = (e) => {\n e.preventDefault();\n let contactUsWrapper = document.querySelector(\n \".retailer-contactus-wrapper\"\n );\n let natureOfEnquiry = \"\";\n let formsWrapper = e.target,\n submitBtn = formsWrapper.querySelector(\".submit-btn\");\n const { SuccessMessage = null, FailedMessage = null } =\n this.props.fields || {};\n const { verifiedRecaptcha } = this.state;\n const recaptchaWrapper = document\n .getElementsByClassName(\"contactus-form\")[0]\n .querySelector(\".form-recaptcha\");\n this.checkFields();\n this.setState({ submitted: true });\n\n setTimeout(() => {\n let invalidField = formsWrapper.querySelector(\".form-control-error\");\n if (invalidField) {\n let subNavWrapper = document.querySelector(\".second-level-nagivation-container\");\n if (subNavWrapper && window.outerWidth >= 992) {\n formsWrapper.scrollIntoView();\n } else {\n invalidField.scrollIntoView();\n }\n }\n }, 250);\n\n if (recaptchaWrapper) {\n if (!verifiedRecaptcha) {\n recaptchaWrapper.classList.add(\"is-required\");\n return;\n }\n }\n if (!this.state.complete) return;\n\n submitBtn.setAttribute(\"disabled\", \"\");\n\n let fields = [];\n const dataSource = this.props.rendering.dataSource || \"\";\n const url = `/api/sitecore/forms/contactus`;\n\n // key compose field data\n this.state.fields.map((field) => {\n if (field.fields.Type.value === \"DropList\") {\n fields.push({\n FieldName: field.fields.Name.value,\n Value: field.fields.Value ? field.fields.Value : \"\",\n });\n natureOfEnquiry = field.fields.Value ? field.fields.Value : \"\"; // for gtm\n } else if (field.fields.Type.value === \"Checkbox Field\") {\n fields.push({\n FieldName: field.fields.Name.value,\n Value: field.fields.Value ? field.fields.Value.toString() : \"false\",\n });\n } else {\n if (field.fields.Value) {\n fields.push({\n FieldName: field.fields.Name.value,\n Value: field.fields.Value,\n });\n }\n }\n });\n let postData = {\n ContactUsDetails: {\n ItemID: dataSource,\n UserEmailAddress: this.state.userEmailAddress,\n Fields: fields,\n SuccessMessage:\n SuccessMessage && SuccessMessage.value ? SuccessMessage.value : \"\",\n FailedMessage:\n FailedMessage && FailedMessage.value ? FailedMessage.value : \"\",\n },\n };\n\n axios({\n url,\n method: \"POST\",\n data: postData,\n })\n .then((response) => {\n if (response && response.data && response.data.message) {\n this.setState({\n successMessage: response.data.message,\n submitted: false,\n });\n TagManager.dataLayer({\n dataLayer: {\n event: \"contactUsFormSubmit\",\n natureOfEnquiry: natureOfEnquiry,\n },\n dataLayerName: \"dataLayer\",\n });\n contactUsWrapper.scrollIntoView();\n }\n })\n .catch((error) => {\n submitBtn.removeAttribute(\"disabled\");\n console.error(error);\n });\n };\n\n setVisible = (fields) => {\n if (fields && fields.length > 0) {\n return \"show\";\n }\n return \"hide\";\n };\n\n handleToggle = (e, field) => {\n this.setState({ showField: field });\n e.target.focus();\n this.setState({ show: !this.state.show });\n };\n\n handleBlur = (e, field) => {\n this.setState({ showField: field });\n if (this.state.show) {\n setTimeout(() => {\n this.setState({ show: !this.state.show });\n }, 250);\n }\n };\n\n renderFields = (fieldList) => {\n return fieldList.map((items, index) => {\n const {\n Type,\n Name,\n IsRequired,\n Touched,\n Valid,\n Value,\n Values,\n Placeholder,\n RequiredValidationMessage,\n } = items.fields;\n\n let fieldLayout = \"\";\n\n switch (Type.value) {\n case \"Heading Field\":\n fieldLayout = (\n {title}
\r\n \n
\n );\n break;\n case \"Text Field\":\n case \"Email Address Field\":\n case \"Phone Number field\":\n fieldLayout = (\n \n this.validateField(e, items.fields)}\n onBlur={(e) => this.validateField(e, items.fields)}\n className={`form-control form-control-lg ${(this.state.submitted || Touched) &&\n Valid !== true &&\n (IsRequired.value || Valid === false)\n ? \"form-control-error\"\n : \"\"\n }`}\n autoComplete=\"off\"\n />\n \n {Placeholder.value}\n {IsRequired.value && \" *\"}\n \n {(this.state.submitted || Touched) &&\n Valid !== true &&\n (IsRequired.value || Valid === false) ? (\n \n !\n \n \n ) : null}\n
\n );\n break;\n case \"DropList\":\n fieldLayout = (\n \n this.validateField(e, items.fields)}\n onBlur={(e) => this.validateField(e, items.fields)}\n className={\n (this.state.submitted || Touched) &&\n Valid !== true &&\n IsRequired.value\n ? \"form-control-error\"\n : \"\"\n }\n autoComplete=\"off\"\n />\n {(this.state.submitted || Touched) &&\n Valid !== true &&\n IsRequired.value ? (\n \n !\n \n \n ) : null}\n
\n );\n break;\n case \"Checkbox Field\":\n fieldLayout = (\n \n {message ? (\n UseAsModule && UseAsModule.value ?\n
\n )}\n \n \n );\n }\n}\n\nexport default FeatureFormsRetailerContactUs;\n","import React from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nconst FeatureFormsRetailerNewsletter = props => {\n return (\n \n {message}\n
\n : message\n ) : (\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n )\n } else return null;\n};\n\nexport default FeatureGenericContentFeaturedImageHighlights;\n","import React from \"react\";\r\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport DownloadForm from \"../../../Base/DownloadForm\";\r\n\r\nclass FeatureGenericContentFileDownloads extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n formFieldState: props.fields.FormFields,\r\n showModal: false,\r\n modalDownloadLink: \"#\",\r\n fileId: \"\"\r\n };\r\n }\r\n\r\n render() {\r\n const {\r\n FileDownloads,\r\n Title,\r\n FormFields = null,\r\n EnableRecaptcha = null,\r\n PublicKey = null,\r\n PrivacyPolicy = null,\r\n SuccessMessageHeader,\r\n SuccessMessage,\r\n FailedMessage,\r\n } = this.props.fields || {};\r\n\r\n const {\r\n showModal,\r\n fileId,\r\n modalDownloadLink,\r\n formFieldState\r\n } = this.state;\r\n\r\n if (FileDownloads && FileDownloads.length > 0) {\r\n return (\r\n <>\r\n \n
\n \n {FeaturedItems.map((item, index) => {\n if (index < displayRange) {\n return (\n
\n \r\n
\r\n {showModal &&\r\n \r\n
\r\n \r\n {Title && Title.value ?\r\n
\r\n {FileDownloads.map((item, index) => {\r\n const {\r\n Name,\r\n Url,\r\n FileId\r\n } = item.fields\r\n\r\n if (Name && Name.value && Url && Url.value && FileId && FileId.value) {\r\n return (\r\n \r\n \r\n
\r\n )\r\n } else return null\r\n })\r\n }\r\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCta\",\n moduleName,\n moduleCtaLink: url,\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n );\n }\n\n return ctaLayout;\n};\n\nexport default CtaHyperlink;\n","import React from \"react\";\nimport { Text, Link, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport SectionDivider from \"../../../Base/SmallModules/SectionDivider\";\nimport Button from \"../../../Base/Button\";\nimport CtaHyperlink from \"../../../Base/CtaHyperlink\";\nimport { getImage } from \"../../../../helper/ImageHelper\";\nimport TagManager from \"react-gtm-module\";\n\nconst setVisible = (props) => {\n if (!props.rendering.dataSource || props.rendering.dataSource === \"\" || !props.fields) {\n return \"hide\";\n }\n return \"show\";\n};\n\nconst FeatureGenericContentGenericCtaHighlight = (props) => {\n const {\n Title = null,\n Content = null,\n Image: image = null,\n ImageUrl = null,\n ImageAltText = null,\n DisplayImageToTheLeft = null,\n ImageCaption = null,\n CtaName = null,\n CtaLandingPage = null,\n SectionId = null,\n IsButtonStyle = null,\n Orientation = null\n } = props.fields || {};\n\n let noImage = true;\n let ctaLayout = \"\";\n const contentImage = getImage(ImageUrl, ImageAltText, image);\n // const noImage = contentImage.src.indexOf(\"/static/media/transparent\") !== -1;\n if (\n (image && image.value && image.value.src) ||\n (ImageUrl && ImageUrl.value)\n ) {\n noImage = false;\n }\n\n if (CtaName && CtaName.value &&\n CtaLandingPage && CtaLandingPage.value && CtaLandingPage.value.href) {\n if (IsButtonStyle && IsButtonStyle.value) {\n ctaLayout =\n {text}
\n \n \n \n \n \n \n \n {!noImage && (\n \n
\n )}\n \n
\n {ImageCaption && ImageCaption.value && (\n \n
\n \n
\n )}\n \n \n
\n\n \n
\n \n
\n \n
\n \n )\n );\n};\n\nexport default FeatureGenericContentGenericImageHighlight;\n","import React, { Component } from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport { debounce } from \"lodash\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport { getAncestorElement } from \"../../../../helper/GetAncestorElement\";\nimport TagManager from \"react-gtm-module\";\n\nclass FeatureGenericContentRetailerFAQ extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showClearButton: false,\n faqList: {},\n };\n this.searchTerm = React.createRef();\n }\n\n componentDidMount() {\n const { FAQGroups = [] } = this.props.fields || {};\n const { bgColor = null, bgColorHex = null, noCutout = null } = this.props.headerparams || {};\n\n if (FAQGroups && FAQGroups.length > 0) {\n this.setState({\n faqList: FAQGroups,\n });\n }\n }\n\n handleClickOption = (event) => {\n const element = event.target;\n const faqOptionListContainer = getAncestorElement(\n element,\n \"faq__group--content__item\"\n );\n if (faqOptionListContainer) {\n faqOptionListContainer.classList.toggle(\"is-active\");\n const block = faqOptionListContainer.querySelector(\"button>div\");\n let question = \"\";\n if (block) {\n question = block.innerText;\n }\n if (question) {\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Clicked block\",\n faqLabel: question,\n },\n dataLayerName: \"dataLayer\",\n });\n }\n }\n };\n\n handleClickCollapse = (event) => {\n const element = event.target;\n const faqContainer = getAncestorElement(element, \"faq\");\n const faqOptionList = faqContainer.querySelectorAll(\n \".faq__group--content__item\"\n );\n if (faqOptionList) {\n for (let i = 0; i < faqOptionList.length; i++) {\n let faqOption = faqOptionList[i];\n faqOption.classList.remove(\"is-active\");\n }\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Clicked button\",\n faqLabel: \"Collapse all\",\n },\n dataLayerName: \"dataLayer\",\n });\n }\n };\n\n handleClickExpand = (event) => {\n const element = event.target;\n const faqContainer = getAncestorElement(element, \"faq\");\n const faqOptionList = faqContainer.querySelectorAll(\n \".faq__group--content__item\"\n );\n if (faqOptionList) {\n for (let i = 0; i < faqOptionList.length; i++) {\n let faqOption = faqOptionList[i];\n faqOption.classList.add(\"is-active\");\n }\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Click button\",\n faqLabel: \"Expand all\",\n },\n dataLayerName: \"dataLayer\",\n });\n }\n };\n\n handleSearchFilter = (event) => {\n const { FAQGroups = {} } = this.props.fields || {};\n let searchFaqList = [];\n const searchTerm = this.searchTerm.current;\n if (searchTerm && searchTerm.value !== \"\") {\n let replaceSpecialChar = searchTerm.value.replace(\n /[-[\\]{}()*+!<=:?.\\/\\\\^$|#\\s,]/g,\n \"\\\\$&\"\n );\n const searchPattern = new RegExp(replaceSpecialChar.toLowerCase());\n FAQGroups.map((itemGroup, index) => {\n let groupOption = {};\n let hasSearch = false;\n const { Name = null, FAQs = null } = itemGroup.fields;\n\n groupOption = {\n fields: {\n Name: {\n value: Name.value,\n },\n FAQs: [],\n },\n };\n FAQs.map((itemOption, index) => {\n const { Question, Answer } = itemOption.fields;\n let optionList;\n if (searchPattern.test(Question.value.toLowerCase())) {\n let regEx = new RegExp(\"(\" + replaceSpecialChar + \")\", \"gi\");\n let replaceMask = `$1`;\n const replaceQuestion = Question.value.replace(regEx, replaceMask);\n optionList = {\n fields: {\n Question: {\n value: replaceQuestion,\n },\n Answer: {\n value: Answer.value,\n },\n },\n };\n groupOption.fields.FAQs.push(optionList);\n hasSearch = true;\n }\n });\n if (hasSearch) {\n searchFaqList.push(groupOption);\n }\n });\n this.setState({\n ...this.state,\n showClearButton: true,\n faqList: searchFaqList,\n });\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Search\",\n faqLabel: searchTerm.value,\n },\n dataLayerName: \"dataLayer\",\n });\n } else {\n this.setState({\n ...this.state,\n showClearButton: false,\n faqList: FAQGroups,\n });\n }\n };\n\n handleClearButton = (faqGroup) => {\n this.searchTerm.current.value = \"\";\n this.setState({\n ...this.state,\n showClearButton: false,\n faqList: faqGroup,\n });\n };\n\n renderFAQ = () => {\n const { faqList } = this.state;\n const { NoResultsText = null } = this.props.fields || {};\n const { bgColor = null, bgColorHex = null, noCutout = null } = this.props.headerparams || {};\n\n let faqOptionLayout;\n if (faqList && faqList.length > 0) {\n faqOptionLayout = faqList.map((item, index) => {\n const { Name = null, FAQs = null } = item.fields;\n\n return (\n \n
\n {displaySubItems && (\n \n
\n )}\n {HighlightCallToAction && HighlightCallToAction.value && (\n \n
\n )}\n {Title &&\n Title.value && (\n \n
\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"Generic Image Highlight\",\n moduleCtaLink:\n HighlightCallToAction.value &&\n HighlightCallToAction.value.href,\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n ![]()
\n \n
\n \n \n
\n )}\n {Description && \n {SubItems.map((item, index) => {\n if (index < displayRange) {\n return (\n
\n )}\n \n
\n \n );\n });\n } else {\n faqOptionLayout = (\n \n
\n \n
\n \n
\n \n
\n \n {FAQs &&\n FAQs.length > 0 &&\n FAQs.map((item, index) => {\n const { Question = null, Answer = null } = item.fields;\n let faqContentLayout;\n if (\n Question &&\n Question.value &&\n Answer &&\n Answer.value\n ) {\n faqContentLayout = (\n \n \n
\n );\n }\n return faqContentLayout;\n })}\n \n
\n \n {NoResultsText && NoResultsText.value ? (\n
\n );\n }\n\n return faqOptionLayout;\n };\n render() {\n const { SearchPlaceholder = null, FAQGroups = [] } =\n this.props.fields || {};\n\n const { bgColor = null, bgColorHex = null, noCutout = null } = this.props.headerparams || {};\n\n return (\n \n {FAQGroups && FAQGroups.length > 0 && (\n \n \n )}\n
\n );\n }\n}\n\nexport default FeatureGenericContentRetailerFAQ;\n","import React, { Component } from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport { getAncestorElement } from \"../../../../helper/GetAncestorElement\";\nimport TagManager from \"react-gtm-module\";\n\nclass FeatureGenericContentRetailerFAQBlock extends Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount() { }\n\n handleClickOption = (event) => {\n const element = event.target;\n const faqOptionListContainer = getAncestorElement(\n element,\n \"faq-block__group--content__item\"\n );\n if (faqOptionListContainer) {\n faqOptionListContainer.classList.toggle(\"is-active\");\n\n const block = faqOptionListContainer.querySelector(\"button>div\");\n let question = \"\";\n if (block) {\n question = block.innerText;\n }\n if (question) {\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Clicked block\",\n faqLabel: question,\n },\n dataLayerName: \"dataLayer\",\n });\n }\n }\n };\n\n handleClickCollapse = (event) => {\n const element = event.target;\n const faqContainer = getAncestorElement(element, \"faq-block\");\n const faqOptionList = faqContainer.querySelectorAll(\n \".faq-block__group--content__item\"\n );\n if (faqOptionList) {\n for (let i = 0; i < faqOptionList.length; i++) {\n let faqOption = faqOptionList[i];\n faqOption.classList.remove(\"is-active\");\n }\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Clicked button\",\n faqLabel: \"Collapse all\",\n },\n dataLayerName: \"dataLayer\",\n });\n }\n };\n\n handleClickExpand = (event) => {\n const element = event.target;\n const faqContainer = getAncestorElement(element, \"faq-block\");\n const faqOptionList = faqContainer.querySelectorAll(\n \".faq-block__group--content__item\"\n );\n if (faqOptionList) {\n for (let i = 0; i < faqOptionList.length; i++) {\n let faqOption = faqOptionList[i];\n faqOption.classList.add(\"is-active\");\n }\n TagManager.dataLayer({\n dataLayer: {\n event: \"retailerFAQ\",\n faqAction: \"Click button\",\n faqLabel: \"Expand all\",\n },\n dataLayerName: \"dataLayer\",\n });\n }\n };\n\n renderFAQ = (faqList) => {\n let faqOptionLayout;\n const { bgColor = null, bgColorHex = null, noCutout = null } = this.props.headerparams || {};\n if (faqList && faqList.length > 0) {\n faqOptionLayout = (\n \n
\n \n {\n this.handleSearchFilter(e);\n }, 1000)}\n />\n {this.state.showClearButton && (\n this.handleClearButton(FAQGroups)}\n >\n Clear\n \n )}\n
\n \n \n \n Collapse all\n \n \n \n Expand all\n \n
\n {this.renderFAQ()}
\n \n
\n \n );\n }\n\n return faqOptionLayout;\n };\n render() {\n const { Title = null, FAQs = [] } = this.props.fields || {};\n return (\n \n {faqList.map((item, index) => {\n const { Question = null, Answer = null } = item.fields;\n let faqContentLayout;\n if (Question && Question.value && Answer && Answer.value) {\n faqContentLayout = (\n \n \n
\n );\n }\n return faqContentLayout;\n })}\n \n
\n \n {FAQs && FAQs.length > 0 && (\n \n \n )}\n
\n );\n }\n}\n\nexport default FeatureGenericContentRetailerFAQBlock;\n","import React from \"react\";\r\n\r\nclass CustomPlayer extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.data = props.data;\r\n }\r\n\r\n componentDidMount() {\r\n var supportsVideo = !!document.createElement(\"video\").canPlayType;\r\n var videoControls = document.getElementById(\"video-controls\");\r\n\r\n if (supportsVideo && videoControls) {\r\n var video = document.getElementById(\"video\");\r\n video.controls = false;\r\n videoControls.setAttribute(\"data-state\", \"visible\");\r\n var playpause = document.getElementById(\"playpause\");\r\n video.muted = true;\r\n if (document.addEventListener) {\r\n var changeButtonState = function(type) {\r\n if (type == \"playpause\") {\r\n if (video.paused || video.ended) {\r\n playpause.setAttribute(\"data-state\", \"play\");\r\n playpause.setAttribute(\"class\", \"icon icon-play\");\r\n } else {\r\n playpause.setAttribute(\"data-state\", \"pause\");\r\n playpause.setAttribute(\"class\", \"icon icon-pause\");\r\n }\r\n }\r\n };\r\n video.addEventListener(\r\n \"play\",\r\n function() {\r\n changeButtonState(\"playpause\");\r\n },\r\n false\r\n );\r\n video.addEventListener(\r\n \"pause\",\r\n function() {\r\n changeButtonState(\"playpause\");\r\n },\r\n false\r\n );\r\n playpause.addEventListener(\"click\", function(e) {\r\n if (video.paused || video.ended) video.play();\r\n else video.pause();\r\n });\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n Collapse all\n \n \n \n Expand all\n \n
\n \n {this.renderFAQ(FAQs)}\n
\n \r\n \r\n {/* \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default CustomPlayer;\r\n","const HexToColorMatrix = hex => {\n let rColor, gColor, bColor, hexColor, colorMatrix;\n\n if (hex) {\n hexColor = hex.replace(/#/g, \"\");\n if (hexColor.length === 6 || hexColor.length === 3) {\n if (hexColor.length === 3) {\n rColor = (parseInt(hexColor.substring(0, 1).repeat(2), 16)) / 255;\n gColor = (parseInt(hexColor.substring(1, 2).repeat(2), 16)) / 255;\n bColor = (parseInt(hexColor.substring(2, 3).repeat(2), 16)) / 255;\n } else {\n rColor = (parseInt(hexColor.substring(0, 2), 16)) / 255;\n gColor = (parseInt(hexColor.substring(2, 4), 16)) / 255;\n bColor = (parseInt(hexColor.substring(4, 6), 16)) / 255;\n }\n }\n colorMatrix = `1 0 0 ${rColor} 0 0 1 0 ${gColor} 0 0 0 1 ${bColor} 0 0 0 0 1 0`;\n }\n else {\n colorMatrix = \"\";\n }\n return colorMatrix;\n};\n\nexport default HexToColorMatrix;","import React, { Component } from \"react\";\r\nimport BaseComponent from \"../../../Base/BaseComponent\";\r\nimport { Text, Image, Link } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport CustomPlayer from \"../../../Base/CustomPlayer\";\r\nimport PlayerControls from \"../../../Base/CustomPlayer/PlayerControls\";\r\nimport defaultImg from \"../../../../assets/image/transparent.png\";\r\nimport HexToColorMatrix from \"../../../Base/HexToColorMatrix/index.js\";\r\nimport TagManager from \"react-gtm-module\";\r\nimport HeroVideo from \"../../../Base/Video\";\r\n\r\nclass FeatureGenericContentRetailerHero extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isSmallHero: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const { HeaderFontColorName, HeaderFontColorHex, DisplaySmallHero } = this.props.fields || {};\r\n if (\r\n HeaderFontColorName &&\r\n HeaderFontColorName.value !== \"\" &&\r\n HeaderFontColorHex &&\r\n HeaderFontColorHex.value !== \"\"\r\n ) {\r\n this.changeFontColor(HeaderFontColorHex);\r\n }\r\n if (window) {\r\n const path = window.location.pathname.toLowerCase();\r\n if (path.length === 1 && DisplaySmallHero && DisplaySmallHero.value) {\r\n this.setState({\r\n isSmallHero: true\r\n })\r\n }\r\n }\r\n }\r\n\r\n changeFontColor = (colorHex) => {\r\n const heroWrapper = document.getElementsByClassName(\r\n \"retailerhero-wrapper\"\r\n )[0];\r\n const colour = colorHex.value;\r\n if (heroWrapper) {\r\n const heroTitle = heroWrapper.getElementsByClassName(\"herotitle\")[0];\r\n const heroVideo = heroWrapper.querySelector(\"#video-controls\");\r\n const headerWrapper = document.getElementsByClassName(\r\n \"top-navigation-container\"\r\n )[0];\r\n\r\n if (heroTitle) {\r\n heroTitle.style.color = colour;\r\n }\r\n if (heroVideo) {\r\n heroVideo.querySelector(\"#playpause\").style.color = colour;\r\n }\r\n if (headerWrapper) {\r\n const navLink = headerWrapper.querySelectorAll(\".nav-link\");\r\n const navIcon = headerWrapper.querySelectorAll(\".icon\");\r\n const navDivider = headerWrapper.querySelectorAll(\".nav-divider\");\r\n\r\n for (let i = 0; i < navLink.length; ++i) {\r\n navLink[i].style.color = colour;\r\n var styleElemA = document.head.appendChild(\r\n document.createElement(\"style\")\r\n );\r\n var pathStyleA = \".navbar-nav .nav-item:hover {border-bottom-color: \";\r\n var pathStyleB = colour + \"!important;}\";\r\n styleElemA.innerHTML = pathStyleA + pathStyleB;\r\n }\r\n for (let i = 0; i < navIcon.length; ++i) {\r\n navIcon[i].style.color = colour;\r\n }\r\n for (let i = 0; i < navDivider.length; ++i) {\r\n navDivider[i].style.borderColor = colour;\r\n }\r\n setTimeout(() => {\r\n const headerLogoSVg = headerWrapper.querySelectorAll(\"svg path\");\r\n const headerLogoSVGFilter = headerWrapper.querySelector(\r\n \".cdn-url-image-svg filter feColorMatrix\"\r\n );\r\n if (headerLogoSVGFilter) {\r\n headerLogoSVGFilter.setAttribute(\r\n \"values\",\r\n HexToColorMatrix(colour)\r\n );\r\n }\r\n if (headerLogoSVg) {\r\n for (let i = 0; i < headerLogoSVg.length; ++i) {\r\n headerLogoSVg[i].style.fill = colour;\r\n }\r\n }\r\n }, 500);\r\n }\r\n }\r\n };\r\n\r\n showHero = (image, video, source, isWide) => {\r\n let heroImageLayout = null;\r\n if (\r\n source &&\r\n source.value &&\r\n source.value.toLowerCase() === \"image\" &&\r\n image &&\r\n image.value &&\r\n image.value.src\r\n ) {\r\n heroImageLayout = (\r\n \r\n
\r\n );\r\n } else if (\r\n source &&\r\n source.value &&\r\n source.value.toLowerCase() === \"video\" &&\r\n video.value\r\n ) {\r\n if (isWide) {\r\n heroImageLayout = \r\n
\r\n );\r\n }\r\n return heroImageLayout;\r\n };\r\n\r\n showHeroTitle = (title, video, source, isWide) => {\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n render() {\r\n const {\r\n DisplayWideHeroImage,\r\n HeroImage: HeroImage = null,\r\n HeroVideo: HeroVideo = null,\r\n HeroTitle,\r\n HeroSource,\r\n HeroCTA,\r\n } = this.props.fields || {};\r\n\r\n let { AddMargin = \"\" } = this.props.params || {};\r\n let margin =\r\n AddMargin && AddMargin === \"1\" ? \"standard\" : \"\";\r\n \r\n return (\r\n ((HeroImage && HeroImage.value && HeroImage.value.src) ||\r\n (HeroVideo && HeroVideo.value)) && (\r\n \r\n
\r\n {source &&\r\n source.value &&\r\n source.value.toLowerCase() === \"video\" &&\r\n video &&\r\n video.value &&\r\n isWide && \r\n \r\n {DisplayWideHeroImage && DisplayWideHeroImage.value ? (\r\n this.showHero(\r\n HeroImage,\r\n HeroVideo,\r\n HeroSource,\r\n DisplayWideHeroImage.value\r\n )\r\n ) : (\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n )}\r\n {((HeroTitle && HeroTitle.value) ||\r\n (HeroCTA && HeroCTA.value && HeroCTA.value.href)) && (\r\n \r\n
\r\n \r\n {this.showHero(\r\n HeroImage,\r\n HeroVideo,\r\n HeroSource,\r\n DisplayWideHeroImage && DisplayWideHeroImage.value\r\n )}\r\n
\r\n \r\n {HeroTitle &&\r\n HeroTitle.value &&\r\n this.showHeroTitle(\r\n HeroTitle,\r\n HeroVideo,\r\n HeroSource,\r\n DisplayWideHeroImage && DisplayWideHeroImage.value\r\n )}\r\n {HeroCTA &&\r\n HeroCTA.value &&\r\n HeroCTA.value.href &&\r\n HeroCTA.value.text && (\r\n \r\n \r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Generic Retailer Hero\",\r\n moduleCtaLink:\r\n HeroCTA &&\r\n HeroCTA.value &&\r\n HeroCTA.value.href,\r\n },\r\n dataLayerName: \"dataLayer\",\r\n })\r\n }\r\n className=\"btn btn-large btn-light-primary\"\r\n >\r\n \r\n
\r\n )}\r\n \n
\n \n );\n } else return null;\n }\n}\n\nexport default FeatureGenericContentRetailerObjectBlock;\n","import React, { Component } from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport _ from \"lodash\";\nimport $ from \"jquery\";\nimport defaultImg from \"../../../../assets/image/transparent.png\";\n\nclass FeatureGenericContentRetailerObjectBlockGallery extends Component {\n constructor(props) {\n super(props);\n this.state = {\n prevScrollLeft: 0,\n activePage: 1,\n totalPage: 0,\n isControlClick: false,\n currentWindowWidth: 0\n };\n\n this.objectGalleryScrollRef = React.createRef();\n this.objectGalleryScrollHandler = _.debounce(this.objectGalleryScrollHandler, 150);\n this.objectGalleryControlsOnClickHandler = _.debounce(this.objectGalleryControlsOnClickHandler, 150);\n }\n\n componentDidMount() {\n const {\n Gallery\n } = this.props.fields;\n\n if (document && Gallery && Gallery.length > 0) {\n let objectBlockGalleryLength = Gallery.length;\n this.setState({\n totalPage: objectBlockGalleryLength,\n currentWindowWidth: window.outerWidth\n })\n window.addEventListener(\"resize\", this.objectGalleryResizeHandler);\n //this.appendScript(Gallery);\n }\n }\n\n appendScript(objectGallery) {\n if (objectGallery && objectGallery.length > 0) {\n\n objectGallery.map((item) => {\n let objectValue = item.fields.Object.value\n if (objectValue) {\n let parser = new DOMParser();\n let scripts = parser\n .parseFromString(objectValue, \"text/html\")\n .body.querySelectorAll(\"script\");\n if (scripts && scripts.length) {\n for (let i = 0; i < scripts.length; i++) {\n $(\"head\").append(String(scripts[i].outerHTML));\n }\n }\n }\n })\n }\n }\n\n objectGalleryResizeHandler = () => {\n if (this.state.currentWindowWidth !== window.outerWidth) {\n this.objectGalleryScrollRef.current.scrollLeft = 0;\n this.setState({\n activePage: 1,\n prevScrollLeft: 0,\n })\n this.objectGalleryScrollHandler(this.objectGalleryScrollRef, true)\n }\n this.setState({\n currentWindowWidth: window.outerWidth\n })\n }\n\n objectGalleryScrollHandler = (scroll, isWindow) => {\n const {\n prevScrollLeft,\n isControlClick,\n activePage\n } = this.state;\n\n let scrollCurrent = scroll.current;\n\n if (isWindow) {\n scrollCurrent.scrollLeft = 0;\n this.setState({\n activePage: 1,\n prevScrollLeft: 0,\n })\n }\n else if (window.outerWidth <= 991 && !isControlClick) {\n let activeScroll = 0;\n let addValue = (scrollCurrent.clientWidth / 2) - 6;\n let divideValue = (scrollCurrent.clientWidth / 2) + 4\n let newActivePage = 1;\n if (prevScrollLeft < scrollCurrent.scrollLeft) {\n activeScroll = Math.floor((scrollCurrent.scrollLeft + addValue) / divideValue);\n } else {\n activeScroll = Math.floor(scrollCurrent.scrollLeft / divideValue);\n }\n\n scrollCurrent.scrollLeft = activeScroll * divideValue;\n\n if (scrollCurrent.scrollWidth - scrollCurrent.clientWidth == scrollCurrent.scrollLeft) {\n if (prevScrollLeft < scrollCurrent.scrollLeft) {\n newActivePage = activeScroll + 1;\n } else {\n newActivePage = activePage;\n }\n } else {\n newActivePage = activeScroll + 1\n }\n\n this.setState({\n activePage: newActivePage,\n prevScrollLeft: scrollCurrent.scrollLeft\n });\n }\n this.setState({\n isControlClick: false\n });\n }\n\n objectGalleryControlsOnClickHandler = (isControl, direction, thumbnailPage) => {\n const {\n activePage\n } = this.state;\n\n let activeItemValue = activePage;\n let activeScroll = 0;\n let scrollWrapper = this.objectGalleryScrollRef.current;\n let scrollMultiplier;\n\n if (isControl) {\n if (direction === \"left\" && this.state.activePage > 1) {\n activeItemValue = activePage - 1\n } else if (\n direction === \"right\" &&\n this.state.activePage < this.state.totalPage\n ) {\n activeItemValue = activePage + 1\n }\n } else {\n activeItemValue = thumbnailPage\n }\n\n\n if (window.outerWidth <= 991) {\n scrollMultiplier = (scrollWrapper.clientWidth / 2) + 4;\n } else if (window.outerWidth < 1200) {\n scrollMultiplier = 240;\n } else {\n scrollMultiplier = 285;\n }\n\n activeScroll = (activeItemValue - 1) * scrollMultiplier\n scrollWrapper.scrollLeft = activeScroll;\n\n this.setState({\n activePage: activeItemValue,\n prevScrollLeft: activeScroll,\n isControlClick: scrollWrapper.scrollWidth - scrollWrapper.clientWidth == scrollWrapper.scrollLeft ? false : true\n });\n }\n\n objectGalleryBarDisplay = (activeItem, totalPage) => {\n const total = activeItem * (100 / totalPage);\n return (\n \n
\n \n )\n\n }\n}\n\nexport default FeatureGenericContentRetailerObjectBlockGallery;\n","import React from \"react\";\nimport { withSitecoreContext, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nclass FeatureGenericContentRichText extends React.Component {\n constructor (props) {\n super(props);\n }\n\n componentDidMount () {\n if (window){\n const el = window.document.getElementById(\"_goback\");\n if (el) {\n el.onclick = function() {\n window.history.back();\n };\n }\n }\n }\n\n render () {\n const props = this.props;\n const { RemoveDefaultMargin = \"\" } = this.props.params || {};\n const margin = RemoveDefaultMargin && RemoveDefaultMargin === \"1\" ? \"\" : \"standard\";\n\n return (\n \n {Header &&\n Header.value &&\n
\n \n
\n }\n \n {Gallery.map((item, index) => {\n const { Object } = item.fields;\n if (Object && Object.value) {\n return (\n
\n \n
\n )\n } else return;\n\n })\n }\n this.objectGalleryScrollHandler(this.objectGalleryScrollRef, false)}\n >\n {Gallery.map((item, index) => {\n const { Object, Thumbnail, ThumbnailAltText, Caption } = item.fields;\n\n if (Object && Object.value) {\n return (\n
\n {(totalPage > activePage || totalPage === activePage) &&\n {\n this.objectGalleryControlsOnClickHandler(false, \"\", index + 1)\n }}\n >\n
\n )\n } else return;\n\n })\n }\n \n
\n {Caption &&\n Caption.value &&\n \n
\n }\n \n
\n }\n \n this.objectGalleryControlsOnClickHandler(true, \"left\")}\n >\n \n \n
\n\n \n \n {activePage < 10 ? \"0\" : \"\"}\n {activePage}\n \n {this.objectGalleryBarDisplay(activePage, totalPage)}\n \n {totalPage < 10 ? \"0\" : \"\"}\n {totalPage}\n \n
\n\n \n this.objectGalleryControlsOnClickHandler(true, \"right\")}\n >\n \n \n
\n \n
\n \n
\n \n Rich Text component is not displayed due to following reasons:{\" \"}\n
- Datasource is not set.\n
\r\n
\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\nexport default FeatureHeaderRetailerGenericPageHeader;\r\n","import React, { Component } from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport _ from \"lodash\";\nimport defaultImg from \"../../../../assets/image/transparent.png\";\nimport TagManager from \"react-gtm-module\";\n\nclass FeatureImageGalleryRetailerImageGallery extends Component {\n constructor(props) {\n super(props);\n this.state = {\n ImageGalleryListRaw: props.fields.ImageGalleryList,\n ImageGalleryList: [],\n activeItem: 0,\n viewedItem: 0,\n };\n this.scrollWrapper = React.createRef();\n this.minImage = +this.props.params.MinimumNumberOfImages;\n this.handleScroll = _.debounce(this.handleScroll, 150);\n this.prevScrollLeft = 0;\n }\n\n componentDidMount() {\n let data = [];\n for (let i = 0; i < this.state.ImageGalleryListRaw.length; i++) {\n if (\n i < this.minImage &&\n this.state.ImageGalleryListRaw[i] &&\n this.state.ImageGalleryListRaw[i].fields\n ) {\n if (\n this.state.ImageGalleryListRaw[i].fields.MediaType.value.indexOf(\n \"video\"\n ) > -1 ||\n this.state.ImageGalleryListRaw[i].fields.MediaType.value.indexOf(\n \"image\"\n ) > -1\n ) {\n data.push(this.state.ImageGalleryListRaw[i]);\n }\n } else {\n break;\n }\n }\n\n this.setState(\n {\n ImageGalleryList: data,\n activeItem: 1,\n },\n () => {\n if (\n this.state.ImageGalleryList &&\n this.state.ImageGalleryList.length >= 2 &&\n this.scrollWrapper.current\n ) {\n this.scrollWrapper.current.scrollLeft = 0;\n }\n }\n );\n\n window.onresize = function () {\n let imageGalleryWrapper = document.querySelector(\".image-gallery-wrapper\");\n if (imageGalleryWrapper) {\n imageGalleryWrapper.querySelector(\".row\").scrollLeft = 0;\n }\n };\n }\n\n handleScroll(scroll, e) {\n let activeItem = this.state.activeItem;\n if (window.outerWidth <= 767) {\n let activeScroll = 0;\n if (this.prevScrollLeft < scroll.current.scrollLeft) {\n activeScroll = Math.floor((scroll.current.scrollLeft + 285) / 295);\n } else {\n activeScroll = Math.floor(scroll.current.scrollLeft / 295);\n }\n scroll.current.scrollLeft = activeScroll * 295;\n this.setState({ activeItem: activeScroll + 1 });\n this.prevScrollLeft = scroll.current.scrollLeft;\n if (\n activeItem !== this.state.activeItem &&\n this.state.activeItem > this.state.viewedItem\n ) {\n this.setState({ viewedItem: this.state.activeItem });\n TagManager.dataLayer({\n dataLayer: {\n event: \"imageGalleryScroll\",\n imageGalleryItem:\n this.state.activeItem + \"/\" + this.state.ImageGalleryList.length,\n },\n dataLayerName: \"dataLayer\",\n });\n }\n return false;\n }\n\n if (scroll.current.scrollLeft == 0) {\n this.setState({ activeItem: 1 });\n this.prevScrollLeft = scroll.current.scrollLeft;\n } else {\n if (\n scroll.current.scrollLeft > this.prevScrollLeft &&\n this.state.activeItem < this.state.ImageGalleryList.length\n ) {\n /* handle scroll left */\n this.prevScrollLeft = scroll.current.scrollLeft;\n this.setState({ activeItem: activeItem + 1 });\n } else if (\n scroll.current.scrollLeft < this.prevScrollLeft &&\n this.state.activeItem === this.state.ImageGalleryList.length\n ) {\n this.prevScrollLeft = scroll.current.scrollLeft;\n this.setState({ activeItem: this.state.ImageGalleryList.length - 1 });\n } else if (\n scroll.current.scrollLeft < this.prevScrollLeft &&\n this.state.activeItem >= 1\n ) {\n /* handle scroll right */\n this.setState({ activeItem: activeItem - 1 });\n this.prevScrollLeft = scroll.current.scrollLeft;\n }\n }\n\n if (this.state.activeItem > this.state.viewedItem) {\n this.setState({ viewedItem: this.state.activeItem });\n TagManager.dataLayer({\n dataLayer: {\n event: \"imageGalleryScroll\",\n imageGalleryItem:\n this.state.activeItem + \"/\" + this.state.ImageGalleryList.length,\n },\n dataLayerName: \"dataLayer\",\n });\n }\n }\n\n scroll = (e, direction) => {\n if (direction === \"left\" && this.state.activeItem > 1) {\n this.displayImage(this.state.activeItem - 2);\n } else if (\n direction === \"right\" &&\n this.state.activeItem < this.state.ImageGalleryList.length\n ) {\n this.displayImage(this.state.activeItem);\n }\n };\n\n renderList = (withCaption) => {\n return this.state.ImageGalleryList.map((item, index) => {\n const { Caption, MediaType, Url, Height, Width } = item.fields;\n return (\n \r\n
\r\n \r\n
\r\n {HeroCTA && HeroCTA.value && HeroCTA.value.href &&\r\n \r\n \r\n // TagManager.dataLayer({\r\n // dataLayer: {\r\n // event: \"clickedModuleCta\",\r\n // moduleName: \"Generic Retailer Hero\",\r\n // moduleCtaLink:\r\n // (HeroCTA &&\r\n // HeroCTA.value &&\r\n // HeroCTA.value.href) ||\r\n // \"\",\r\n // },\r\n // dataLayerName: \"dataLayer\",\r\n // })\r\n // }\r\n className=\"btn btn-large btn-light-primary\"\r\n >\r\n \r\n
\r\n }\r\n \n \n
\n )}\n \n \n \n )\n );\n }\n}\n\nexport default FeatureImageGalleryRetailerImageGallery;\n","import React from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport Chart from \"chart.js\";\n\nclass FeatureKeyStatsKeyStatsChart extends React.Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n const { TenantStatsList = null } = this.props.fields || {};\n let labels = [];\n let backgroundColor = [];\n let datus = [];\n\n if (TenantStatsList.length) {\n TenantStatsList.map(data => {\n labels.push(data.fields.StatName.value);\n backgroundColor.push(data.fields.StatColor.value);\n datus.push(data.fields.StatPercentatge.value);\n });\n\n new Chart(document.getElementById(\"doughnut-chart\"), {\n type: \"doughnut\",\n data: {\n labels: labels,\n display: false,\n datasets: [\n {\n backgroundColor: backgroundColor,\n data: datus\n }\n ]\n },\n options: {\n title: {\n display: false,\n text: \"\"\n },\n legend: {\n display: false\n },\n tooltips: {\n bodyFontSize: 35\n },\n cutoutPercentage: 60\n }\n });\n }\n }\n\n validateDisplay(tenantStatsList) {\n let display = \"hide\";\n if (\n this.props.rendering.dataSource &&\n this.props.rendering.dataSource !== \"\" &&\n tenantStatsList &&\n tenantStatsList.length > 0\n ) {\n display = \"show\";\n }\n return display;\n }\n\n render() {\n const {\n SectionId = null,\n IsOverlapping = null,\n Title = null,\n TenantStatsList = null\n } = this.props.fields || {};\n return (this.validateDisplay(TenantStatsList) === 'show' &&\n \n this.handleScroll(this.scrollWrapper, e)}\n >\n {this.renderList(WithCaption)}\n
\n {this.state.ImageGalleryList &&\n this.state.ImageGalleryList.length >= 2 && (\n \n this.scroll(e, \"left\")}\n >\n \n \n
\n \n \n {this.state.activeItem < 10 ? \"0\" : \"\"}\n {this.state.activeItem}\n \n {this.displayItemBar(this.state.activeItem)}\n
\n \n this.scroll(e, \"right\")}\n >\n \n \n
\n \n
\n \n \n \n \n );\n }\n}\n\nexport default FeatureKeyStatsKeyStatsChart;\n","import React from \"react\";\nimport { Text, Image } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nclass FeatureKeyStatsKeyStatsMap extends React.Component {\n constructor(props) {\n super(props);\n }\n\n renderList(keyStatsList) {\n if (\n keyStatsList &&\n keyStatsList.length > 0\n ) {\n return keyStatsList.map((item, index) => {\n const {\n Title: Title = null,\n Value: Value = null,\n Suffix = null\n } = item.fields;\n // const lastIndex = Value.value.length - 1;\n // const valueNumber = Value.value.substring(0, lastIndex);\n // const valuePercent = Value.value.substring(lastIndex);\n return (\n \n \n
\n \n
\n \n
\n \n {TenantStatsList.map((item, index) => {\n return (\n \n
\n );\n })}\n \n
\n \n
\n \n {Title.value && Value.value && (\n
\n );\n });\n }\n }\n\n validateDisplay(keyStatsList, demographicsLegendList, map) {\n let display = \"hide\";\n if (\n this.props.rendering.dataSource &&\n this.props.rendering.dataSource !== \"\" &&\n keyStatsList &&\n demographicsLegendList &&\n map &&\n map.value &&\n map.value.src !== \"\"\n ) {\n display = \"show\";\n }\n return display;\n }\n\n render() {\n const {\n SectionId = null,\n IsOverlapping = null,\n Title = null,\n Subtext = null,\n Map: map = null,\n MapOrientation = null,\n KeyStatsList = null,\n DemographicsLegendList = null\n } = this.props.fields || {};\n\n return (this.validateDisplay(KeyStatsList, DemographicsLegendList, map) === 'show' &&\n \n
\n )}\n \n
\n \n
\n \n
\n \n \n );\n }\n}\n\nexport default FeatureKeyStatsKeyStatsMap;\n","import React from \"react\";\nimport { Text, RichText } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nclass FeatureKeyStatsKeyStatsSummary extends React.Component {\n constructor(props) {\n super(props);\n }\n\n setVisible = (keyStats) => {\n if (\n !this.props.rendering.dataSource ||\n this.props.rendering.dataSource === \"\" ||\n keyStats.length < 3\n ) {\n return \"hide\";\n }\n return \"show\";\n };\n\n renderList = (keyStats) => {\n if (keyStats.length > 0) {\n let hasIcons = false\n let keyStatsLayout =\n keyStats.map((item, index) => {\n const {\n Title = null,\n Value = null,\n Prefix = null,\n Suffix = null,\n IconName = null,\n } = item.fields || {};\n let keyStatsSummaryLayout;\n\n if ((Title && Title.value) || (Value && Value.value)) {\n keyStatsSummaryLayout = (\n \n
\n \n
\n \n
\n \n {/*
\n */}\n
\n \n {DemographicsLegendList &&\n DemographicsLegendList.map(\n (item, index) => {\n const {\n Name: Name = null,\n Colour: Colour = null\n } = item.fields;\n return (\n \n
\n );\n }\n )}\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {this.renderList(KeyStatsList)}
\n \n
\n \n \n );\n }\n if (IconName && IconName.value) {\n hasIcons = true\n }\n return keyStatsSummaryLayout\n })\n\n return (\n \n \n {Value && Value.value && (\n
\n \n \n
\n \n \n 2`)\n }}\n />\n \n }\n
\n )}\n {Title && Title.value && (\n \n
\n )}\n \n {keyStatsLayout}\n
)\n } else return null;\n };\n\n render() {\n const {\n Title = null,\n Subtext = null,\n KeyStats = null,\n SectionId = null,\n MoveSubtextToBottom = null\n } = this.props.fields || {};\n let { RemoveDefaultMargin = \"\" } = this.props.params || {};\n let margin =\n RemoveDefaultMargin && RemoveDefaultMargin === \"1\" ? \"\" : \"standard\";\n\n return (\n this.setVisible(KeyStats) === \"show\" && (\n \n
\n \n )\n );\n }\n}\n\nexport default FeatureKeyStatsKeyStatsSummary;\n","import React, { Component } from \"react\";\nimport { Text, Image } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport ModuleHeader from \"../../../Base/ModuleHeader\";\nimport Button from \"../../../Base/Button\";\nimport defaultImg from \"../../../../assets/image/transparent.png\";\nimport TagManager from \"react-gtm-module\";\n\nclass FeatureLeadershipFeaturedLeadership extends Component {\n constructor(props) {\n super(props);\n this.leadershiplist = React.createRef();\n this.hideButton = false;\n }\n\n state = {\n hideButton: false,\n };\n\n showmorelist = () => {\n this.setState({ hideButton: true });\n this.leadershiplist.current.classList.remove(\"leadershiplist\");\n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCta\",\n moduleName: \"Featured Leadership\",\n moduleCtaLink: \"View More\",\n },\n dataLayerName: \"dataLayer\",\n });\n };\n\n setVisible = (LeadershipList) => {\n if (\n !this.props.rendering.dataSource ||\n this.props.rendering.dataSource === \"\" ||\n !(LeadershipList && LeadershipList.length)\n ) {\n return \"hide\";\n }\n return \"show\";\n };\n\n render() {\n const {\n Title = null,\n LeadershipList = null,\n LeadershipPageLink = null,\n ViewMoreText = null,\n } = this.props.fields || {};\n return (\n \n {Title && Title.value && (\n
\n \n
\n )}\n {Subtext && Subtext.value && MoveSubtextToBottom && !MoveSubtextToBottom.value && (\n \n
\n )}\n {this.renderList(KeyStats)}\n {Subtext && Subtext.value && MoveSubtextToBottom && MoveSubtextToBottom.value && (\n \n
\n )}\n \n
\n \n \n
\n {LeadershipList &&\n LeadershipList.length > 2 &&\n \n {LeadershipList && LeadershipList.length > 0 &&\n LeadershipList.map((items, index) => {\n return (\n \n
\n );\n })}\n \n
\n \n
\n \n
\n \n \n
\n }\n \n \n {LeadershipList &&\n LeadershipList.length &&\n LeadershipList.map((items, index) => {\n return (\n \n
\n );\n })}\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n \n \n \n
\n\n \n
\n \n {OfficeDetails.map((items, index) => {\n return (\n \n
\n );\n })}\n \n
\n \n
\n {items.fields.TelephoneNo && items.fields.TelephoneNo.value &&\n \n \n
\n }\n \n
\n \n
\n \n
\n \n \n );\n }\n}\n\nexport default FeatureOfficeOfficeLocations;\n","import React, { Component } from \"react\";\r\nimport TagManager from \"react-gtm-module\";\r\nimport TilePartners from \"../../../Base/Tiles/TilePartners\";\r\nimport Button from \"../../../Base/Button\";\r\n\r\nclass PartnerItems extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { gate: false };\r\n this.Partners = this.props.data;\r\n }\r\n render() {\r\n return (\r\n - \n
- \n
- \n {OfficeDetails.map((items, index) => {\n if (this.defaultValue !== items.fields.Name.value) {\n return (\n
\n \n );\n }\n })}\n
\n
\n )}\n\n {this.state.defaultDetails && this.defaultDetails && (\n \n
\n {this.defaultDetails.TelephoneNo && this.defaultDetails.TelephoneNo.value &&\n \n \n
\n }\n \n
\n \n
\n \n
\n )}\n \n
\n {this.state.defaultDetails.TelephoneNo && this.state.defaultDetails.TelephoneNo.value &&\n \n \n
\n }\n \n
\n \n
\n \r\n
\r\n {!this.state.gate && (\r\n \r\n {this.Partners &&\r\n this.Partners.map((item, index) => {\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \n
\n \n )\n );\n};\n\nexport default FeaturePartnersFeaturedDesignPartners;\n","import React from \"react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport PartnerItems from \"../PartnerItems\";\n\nconst FeaturePartnersPartnerListing = props => {\n const {\n Partners = null,\n SectionId = null\n } = props.fields || {};\n return (\n \n
\n }\n \n {PromotionImage && PromotionImage.value &&\n \n
\n \n \n
\n \n
\n \n );\n });\n }\n };\n\n setVisible = (promotions) => {\n if (\n !this.props.rendering.dataSource ||\n this.props.rendering.dataSource === \"\" ||\n promotions.length < 2\n ) {\n return \"hide\";\n }\n return \"show\";\n };\n render() {\n const {\n Title,\n CentreWebsiteText,\n CentreWebsiteUrl,\n Promotions,\n SectionId,\n BackgroundColor,\n FontColor\n } = this.props.fields || {};\n return (\n this.setVisible(Promotions) === \"show\" && (\n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n \n 2\n ? \"\"\n : \"hide\"\n }`}\n >\n this.setState({ showMore: false })}\n color={\"light-secondary\"}\n size={\"medium\"}\n label={\"Show More\"}\n />\n
\n \n \n \n \n )\n );\n }\n}\n\nexport default FeaturePromotionsRetailerWhatsOn;\n","import React from \"react\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport { Link } from \"react-scroll\";\nimport TagManager from \"react-gtm-module\";\n\nclass FeatureRetailerNavigationSecondLevelNavigation extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n currentSection: \"\",\n showMenu: false,\n active: \"\",\n };\n }\n\n componentDidMount() {\n const { navList } = this.props.params || {};\n window.onscroll = function () {\n stickyFunction();\n };\n\n let navbar = document.getElementById(\"second-navbar\");\n let sticky = navbar.offsetTop;\n\n function stickyFunction() {\n if (window.pageYOffset >= sticky) {\n navbar.classList.add(\"sticky\");\n } else {\n navbar.classList.remove(\"sticky\");\n }\n }\n\n if (navList && navList.length > 0) {\n this.setState({\n ...this.state,\n currentSection: navList[0].SectionName,\n active: navList[0].SectionId,\n });\n }\n\n if (window) {\n const windowHash = window.location.hash.replace(\"#\", '');\n if (windowHash) {\n const componentElement = document.getElementById(windowHash);\n setTimeout(() => {\n if (componentElement.getBoundingClientRect().top > 56 || componentElement.getBoundingClientRect().top < 54) {\n const secondNavLink = document.getElementsByClassName(windowHash)[0];\n if (secondNavLink) {\n let yPos = componentElement.getBoundingClientRect().top + window.pageYOffset;\n window.scrollTo({ top: yPos, behavior: 'smooth' });\n }\n }\n\n setTimeout(() => {\n const windowHash = window.location.hash.replace(\"#\", '');\n if (windowHash) {\n let navListCta = document.querySelector('.' + windowHash);\n if (navListCta) {\n navListCta.click();\n }\n }\n }, 1500);\n }, 1000);\n }\n }\n }\n\n render() {\n const { navList = null, assetName = null, pageTitle = null } =\n this.props.params || {};\n\n const { bgColor = null, bgColorHex = null } = this.props.headerparams || {};\n\n return (\n {this.renderList(Promotions)}
\n \n {/*
\n \n {/* mobile mode 2nd level navigation */}\n \n
*/}\n \n \n
\n \n
\n \n );\n }\n}\nexport default FeatureRetailerNavigationSecondLevelNavigation;\n","import React, { Component } from \"react\";\nimport { Image } from \"@sitecore-jss/sitecore-jss-react\";\nimport { ReactSVG } from \"react-svg\";\nimport defaultImg from \"../../../assets/image/transparent.png\";\n\nclass HeaderImageFormat extends Component {\n constructor(props) {\n super(props);\n }\n\n validateImageFormat = (logo) => {\n const imageSource = logo.src;\n if (imageSource) {\n let svgPattern = new RegExp(\"svg\");\n let urlPattern = new RegExp(\"https|http|.com\");\n let isSVGFormat = svgPattern.test(imageSource.toLowerCase());\n let isUrlFormat = urlPattern.test(imageSource.toLowerCase());\n let imageFormat = \"\";\n\n if (isSVGFormat && isUrlFormat) {\n imageFormat = (\n \n {navList && navList.length > 0 && (\n \n )}\n
\n \n 
\n \n
\n );\n } else if (isSVGFormat) {\n imageFormat = \n
\n ) : (\n \"\"\n )}\n {displayPageHeader && !isStoryPage && pageTitle && pageTitle.value && (\n \n
\n {IsBreadcrumbsSticky && IsBreadcrumbsSticky.value && (\n \n {Breadcrumbs &&\n Breadcrumbs.map((item, index) => {\n const { Link = null, LinkName = null } = item.fields;\n let breadcrumbsLayout;\n if (index === 0) {\n breadcrumbsLayout = (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"navigationClick\",\n navType: \"Breadcrumbs\",\n navText: (LinkName && LinkName.value) || \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n {LinkName.value}\n \n \n );\n } else {\n if (Link && Link.value) {\n breadcrumbsLayout = (\n \n » \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"navigationClick\",\n navType: \"Breadcrumbs\",\n navText: (LinkName && LinkName.value) || \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n {LinkName.value}\n \n \n );\n } else {\n breadcrumbsLayout = (\n \n » \n {LinkName.value}\n \n );\n }\n }\n return breadcrumbsLayout;\n })}\n
\n \n
)} {/*mobile start*/}\n {IsBreadcrumbsSticky && IsBreadcrumbsSticky.value && (\n \n
\n \n
\n \n {Breadcrumbs &&\n Breadcrumbs.map((item, index) => {\n const { Link = null, LinkName = null } = item.fields;\n let breadcrumbsLayout;\n if (index === 0) {\n breadcrumbsLayout = (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"navigationClick\",\n navType: \"Sticky Breadcrumbs\",\n navText:\n (LinkName && LinkName.value) || \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n {LinkName.value}\n \n \n );\n } else {\n if (Link && Link.value) {\n breadcrumbsLayout = (\n \n » \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"navigationClick\",\n navType: \"Sticky Breadcrumbs\",\n navText:\n (LinkName && LinkName.value) || \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n {LinkName.value}\n \n \n );\n } else {\n breadcrumbsLayout = (\n \n » \n {LinkName.value}\n \n );\n }\n }\n return breadcrumbsLayout;\n })}\n
\n {ESGReportNavigation && ESGReportNavigation.length > 0 &&\n \n
\n }\n \n {ESGReportNavigation.map((item, index) => {\n const {\n ReportTitle = null,\n ReportNumber = null,\n IsActive = null,\n } = item.fields || {};\n\n if (IsActive && IsActive.value) {\n return (\n
\n \n
)\n }\n })}\n \n {IsActive && IsActive.value ? String(ReportNumber.value).padStart(2, '0') : \"\"} \n {IsActive && IsActive.value ? ReportTitle.value : \"\"} \n
\n \n \n {ESGReportNavJumpToText && ESGReportNavJumpToText.value ? ESGReportNavJumpToText.value : \"Jump to\"} \n 
\n \n
\n \n {ESGReportNavigation.map((item, index) => {\n const {\n ReportTitle = null,\n ReportNumber = null,\n IsActive = null,\n } = item.fields || {};\n\n if (IsActive && IsActive.value) {\n return (\n
\n )} {/*mobile end*/}\n {IsBreadcrumbsSticky && IsBreadcrumbsSticky.value && (\n \n
)\n }\n })}\n \n {IsActive && IsActive.value ? String(ReportNumber.value).padStart(2, '0') : \"\"} \n {IsActive && IsActive.value ? ReportTitle.value : \"\"} \n
\n \n \n {ESGReportNavJumpToText && ESGReportNavJumpToText.value ? ESGReportNavJumpToText.value : \"Jump to\"} \n \n \n
\n \n
\n )}\n \n this.flkty = ref} reloadOnUpdate static>\n {ESGReportNavigation.map((item, index) => {\n const {\n ReportTitle = null,\n ReportNumber = null,\n ReportImageUrl = null,\n ReportImageAltText = null,\n ReportLink = null,\n IsActive = null,\n } = item.fields || {};\n if (IsActive && IsActive.value) if (index !== this.state.reportActive) this.setState({ reportActive: index }) //get/set active report\n\n return (\n \n
\n \n {ReportLink && ReportLink.value && this.state.isMobile ? (\n \n TagManager.dataLayer({\n dataLayer: {\n event: \"navigationClick\",\n navType: \"Sticky Breadcrumbs\",\n navText: ReportTitle.value,\n navLink: ReportLink.value\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n \n TagManager.dataLayer({\n dataLayer: {\n event: \"navigationClick\",\n navType: \"Sticky Breadcrumbs\",\n navText: ReportTitle.value,\n navLink: ReportLink.value\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n )\n })}\n \n
\n \n
\n \n ) : ReportLink && ReportLink.value && !this.state.isMobile ? (\n {ReportNumber && ReportNumber.value ? String(ReportNumber.value).padStart(2, '0') : \"\"}
\n{ReportTitle && ReportTitle.value ? ReportTitle.value : \"\"}
\n\n
\n \n
\n \n ) : \"\"}\n {ReportNumber && ReportNumber.value ? String(ReportNumber.value).padStart(2, '0') : \"\"}
\n{ReportTitle && ReportTitle.value ? ReportTitle.value : \"\"}
\n\n
\n )}\n \n );\n }\n}\n\nexport default FeatureRetailerNavigationTopNavigation;\n","import React from \"react\";\nimport { Text, Image } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport defaultImg from \"../../../../assets/image/transparent.png\";\n\nclass FeatureRetailerStoryAuthor extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n const {\n AuthorName = null,\n RoleCompany = null,\n Group = null,\n Picture = null\n } = this.props.fields || {};\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n )\n }\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n \n {Heading &&\n Heading.value ? (\n
\n \n
\n ) : (\n \n
\n \n 1 ? \"two\" : \"one\"}`}\n >\n
\n \n
\n \n );\n });\n }\n };\n\n render() {\n return (\n \n
\n \n
\n {this.renderList()}
\n \r\n \r\n
\r\n \r\n );\r\n } else return null;\r\n }\r\n\r\n showLowerCards = () => {\r\n const {\r\n Title = null,\r\n HighlightStories = null,\r\n ViewAllText = null,\r\n ViewMoreText = null,\r\n StoriesListingPageLink = null\r\n } = this.props.fields || {};\r\n\r\n if (HighlightStories.length === 5) {\r\n return (\r\n \r\n {PageLink && PageLink.value ? (\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n {PageLink && PageLink.value ? (\r\n \r\n
\r\n\r\n \r\n {PageLink && PageLink.value ? (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n showItems = (highlightStories) => {\r\n return (\r\n \r\n {this.showItems(HighlightStories)}\r\n {this.showButton(ViewMoreText)}\r\n
\r\n \r\n {highlightStories &&\r\n highlightStories.map((item, index) => {\r\n const {\r\n StoryTitle: StoryTitle = null,\r\n StoryTags: StoryTags = null,\r\n StoryImage: StoryImage = null,\r\n StoryPublishDate: StoryPublishDate = null,\r\n PageLink: PageLink = null,\r\n } = item.fields || {};\r\n\r\n if (highlightStories.length < 5 && highlightStories.length > 1) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n \r\n \r\n {StoryImage && StoryImage.value && StoryImage.value.src &&\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n );\r\n }\r\n\r\n showButton = (viewMoreText) => {\r\n if (!this.state.gate) {\r\n return (\r\n \r\n {StoryImage && StoryImage.value && StoryImage.value.src &&\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n this.setState({ gate: !this.state.gate });\r\n TagManager.dataLayer({\r\n dataLayer: {\r\n event: \"clickedModuleCta\",\r\n moduleName: \"Highlight Stories\",\r\n moduleCtaLink: \"View More\",\r\n },\r\n dataLayerName: \"dataLayer\",\r\n });\r\n }}\r\n label={viewMoreText && viewMoreText.value ? viewMoreText.value : \"View more\"}\r\n color={\"light-secondary\"}\r\n size={\"large\"}\r\n />\r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n Title = null,\r\n HighlightStories = null,\r\n ViewAllText = null,\r\n ViewMoreText = null,\r\n } = this.props.fields || {};\r\n\r\n if (HighlightStories && HighlightStories.length > 0) {\r\n return (\r\n \r\n {this.showUpperCard(HighlightStories, Title)}\r\n {this.showLowerCards()}\r\n
\r\n \n
\n \n );\n }\n}\n\nexport default FeatureRetailerStoryQuote;\n","import React from \"react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nclass FeatureRetailerStorySocialShare extends React.Component {\n constructor(props) {\n super(props);\n }\n\n renderList = () => {\n const { Social = null } = this.props.fields || {};\n if (Social.length) {\n return Social.map((item, index) => {\n const { Type, Url } = item.fields;\n return (\n \n
\n \n
\n \n \n \n \n
\n );\n });\n }\n };\n\n render() {\n const { params } = this.props;\n return (\n \n
\n \n \n
\n Share
\n {this.renderList()}\n \n
\n \n
\n\n {/* \n Chapters\n
\n \n {this.renderList()}\n \n
\n \n
*/}\n \n (window.location = e.target.value)}\n >\n \n {this.renderListMobile()}\n \n
\n \n
\n \n
\n \n
\n \n
\n {(Category &&\n Category.value &&\n PublishedDate &&\n PublishedDate.value) &&\n |\n }\n \n
\n \n
\n \n
\n } else if (image && image.value && image.value.src) {\n heroLayout =\n \n
\n }\n\n return heroLayout;\n }\n\n render() {\n const {\n HeroImage = null,\n HeroVideo = null,\n HeroSource = null,\n } = this.props.fields || {};\n\n return (\n \n
\n \n {this.renderStoryHero(HeroImage, HeroVideo, HeroSource)}\n
\n \n
\n );\n });\n }\n };\n\n setVisible = (tags) => {\n if (!tags.length) {\n return \"hide\";\n }\n return \"show\";\n };\n render() {\n const { Tags = null } = this.props.fields || {};\n return (\n \n
\n \n
\n \n
\n Tags
\n {this.renderList(Tags)}\n \n
\n \n );\n }\n };\n\n renderStoriesList = () => {\n const { Stories, StoriesViewAll } = this.props.items;\n if (Stories.length) {\n return (\n \n {Places.map((item, index) => {\n return (\n \n
\n );\n })}\n \n
\n \n );\n }\n };\n\n renderOthersList = () => {\n const { Others } = this.props.items;\n if (Others.length) {\n return (\n \n {Stories.map((item, index) => {\n return (\n \n
\n );\n })}\n \n
\n \n );\n }\n };\n\n render() {\n return (\n \n {Others.map((item, index) => {\n return (\n \n
\n );\n })}\n \n
\n );\n }\n}\n\nexport default SearchResult;\n","import React from \"react\";\nimport axios from \"axios\";\nimport _ from \"lodash\";\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport TagManager from \"react-gtm-module\";\nimport SearchResult from \"./SearchResult\";\n\nclass FeatureSearchRetailerSiteSearch extends React.Component {\n constructor(props) {\n super(props);\n this.handleSearch = _.debounce(this.handleSearch, 500);\n }\n\n state = { keyword: \"\", searchResults: null };\n\n handleSearch = async () => {\n let pageId = window.document.getElementsByName(\"ContextItem\")[0].value;\n let apiUrl = `/api/sitecore/retailersearch/search?keyword=${this.state.keyword}&pageid=${pageId}`;\n let response = await axios.get(apiUrl);\n\n TagManager.dataLayer({\n dataLayer: {\n event: \"performedSearch\",\n searchTerm: this.state.keyword\n },\n dataLayerName: \"dataLayer\"\n });\n\n if (response) {\n this.setState({\n searchResults: response.data\n });\n }\n };\n\n renderSearchResult = () => {\n const { keyword, searchResults } = this.state;\n if (keyword && searchResults) {\n let count = parseInt(searchResults.SearchResultCount.value.split(\" \")[0]);\n if (count !== 0) {\n return \n
\n {this.renderPlacesList()}\n {this.renderStoriesList()}\n {this.renderOthersList()}\n \n
\n );\n }\n } else {\n return ;\n }\n };\n\n render() {\n const { Placeholder = null } = this.props.fields || {};\n return (\n \n
\n \n
\n \n \n this.setState({ keyword: e.target.value }, this.handleSearch)\n }\n placeholder={Placeholder && Placeholder.value ? Placeholder.value : \"\"}\n />\n
\n\n {this.renderSearchResult()}\n \n {Stories &&\n Stories.length > 0 &&\n Stories.map((item, index) => {\n let {\n StoryTitle: StoryTitle = null,\n StoryImage: StoryImage = null,\n StoryTags: StoryTags = null,\n PageLink: PageLink = null,\n StoryPublishDate: StoryPublishDate = null,\n } = item.fields || {};\n return (\n \n \n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCard\",\n moduleName: \"Featured Stories\",\n moduleCardLink:\n PageLink && PageLink.value ? PageLink.value : \"\",\n },\n dataLayerName: \"dataLayer\",\n })\n }\n >\n
\n );\n })}\n \n );\n };\n let showButton = () => {\n if (!this.state.gate) {\n return (\n \n {StoryImage && StoryImage.value && StoryImage.value.src && (\n
\n \n \n
\n )}\n \n \n
\n \n
\n {TileCTAText &&\n TileCTAText.value &&\n \n \n
\n }\n \n {\n this.setState({ gate: !this.state.gate });\n TagManager.dataLayer({\n dataLayer: {\n event: \"clickedModuleCta\",\n moduleName: \"Featured Stories\",\n moduleCtaLink: \"Show More\",\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n label={\"Show More\"}\n color={\"light-secondary\"}\n size={\"large\"}\n className=\"showmore-btn\"\n />\n
\n );\n } else {\n return null;\n }\n };\n return Stories &&\n Stories.length > 0 &&\n Stories.length > 2 &&\n \n
\n\n \n
\n \n
\n \n \n }\n}\n\nexport default FeatureStoriesFeaturedStories;\n","import React, { Component, Fragment } from \"react\";\r\n\r\nclass DropDown extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: false,\r\n };\r\n }\r\n\r\n handleToggle = (e) => {\r\n e.target.focus();\r\n this.setState({ show: !this.state.show });\r\n };\r\n\r\n handleBlur = () => {\r\n if (this.state.show) {\r\n setTimeout(() => {\r\n this.setState({ show: !this.state.show });\r\n }, 250);\r\n }\r\n };\r\n\r\n render() {\r\n const {\r\n inputTitle,\r\n options,\r\n handleSelectionChange,\r\n showSelected,\r\n defaultSelected,\r\n } = this.props || {};\r\n return (\r\n \n {showItems()}\n {showButton()}\n
\n \r\n \r\n
\r\n No story found
;\n }\n };\n\n render() {\n const {\n Stories = null,\n IsESG = null,\n IsOverlapping = null,\n SectionId = null,\n } = this.props.fields || {};\n const { showLoader } = this.state;\n return (\n \n
{\" \"}\n {/* */}\n \n {this.state.CategoryList &&\n this.state.CategoryList.length &&\n this.state.CategoryList.map((item, index) => {\n return (\n {\n this.setState({\n showLoader: true,\n });\n setTimeout(() => {\n this.setState({\n SelectedCategory: item,\n showLoader: false,\n });\n }, 100);\n TagManager.dataLayer({\n dataLayer: {\n event: \"storiesListingFilter\",\n storiesFilterType: \"category\",\n storiesFilterValue: item,\n },\n dataLayerName: \"dataLayer\",\n });\n }}\n >\n {item}\n \n );\n })}\n
\n {this.renderCategories()}
\n {this.renderYear()}
\n \n {!showLoader && this.renderItems(Stories)}\n {showLoader &&
\n \n \n );\n }\n}\n\nexport default FeatureStoriesStoriesListing;\n","import React from \"react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nclass FeatureVideoVideo extends React.Component {\n constructor(props) {\n super(props);\n }\n\n setVisible = (videoUrl, videoFile) => {\n let setVisible = \"hide\";\n if (\n (videoFile &&\n videoFile.value &&\n videoFile.value.src &&\n videoFile.value.mimeType) ||\n videoUrl.value\n ) {\n if (videoUrl.value) {\n setVisible = \"show\";\n } else {\n if (videoFile.value.mimeType.indexOf(\"video\") > -1) {\n setVisible = \"show\";\n } else {\n setVisible = \"hide\";\n }\n }\n }\n return setVisible;\n };\n\n render() {\n const { VideoUrl, VideoFile, SectionId } = this.props.fields || {};\n\n if (\n (VideoUrl && VideoUrl.value) ||\n (VideoFile && VideoFile.value && VideoFile.value.src)\n ) {\n return (\n \n
\n \n );\n } else return null;\n }\n}\n\nexport default FeatureVideoVideo;\n","export const Action_Constants = {\n show: \"{AAE07A52-46A4-49EF-98B0-C2595BAC2382}\",\n hide: \"{7F58C8DD-D7C0-4FB7-BB44-8EC6B5E1C3D9}\",\n enable: \"{5744A87E-E32C-42CC-862F-96842A0202BB}\",\n disable: \"{C698C993-549E-486A-A09C-BB8D830DA958}\",\n}\n\nexport const MatchType_Constants = {\n any: \"{365C94DA-C1CD-4783-A91D-0D17A16C7117}\",\n all: \"{4E50C172-7EA6-4989-82C3-75F24F80EF72}\",\n}\n\nexport const Operator_Constants = {\n is_equal_To: \"{1D38B217-A2EE-4E7B-B6ED-13E751462FEB}\",\n is_not_equal_to: \"{49F47E77-E8C5-46F9-BF39-78D6B0D40B48}\",\n contains: \"{BF8935A6-1976-43A0-ABA5-D0BC128A76EA}\",\n does_not_contain: \"{45AAB0FB-775B-40F5-B3B8-7CAE3ABBF643}\",\n starts_with: \"{FD10F291-3C2E-4AE7-8A67-2F8271CB3DF2}\",\n does_not_start_with: \"{6B92597D-F2E0-47D3-A40D-59AFB37EEDE5}\",\n ends_with: \"{D375ED5B-E156-4A2B-9F91-DFD5B03F0D78}\",\n does_not_end_with: \"{F3AC7A1A-3458-4385-BB65-860315313DB3}\",\n is_greater_than: \"{61FF63A0-375C-47BD-9986-1F81BD12BBBB}\",\n is_greater_than_or_equal_to: \"{062C6ED9-EA6E-4A88-AE54-C88E2147971D}\",\n is_less_than: \"{8FE41E53-AD87-4D24-B50F-EA0F6BDF739F}\",\n is_less_than_or_equal_to: \"{88AC1C6B-BAFE-40A7-BB75-E304C8EC29DD}\",\n}\n\nexport const FieldType_Constants = {\n recaptcha: \"{E383BDE2-BC88-4278-83EF-832A15C9E94A}\",\n retailer_name_list: \"{C3A50B9C-80B2-4C58-A841-9A01633BD9AA}\",\n}","/*\n** Source Code: https://www.codehousegroup.com/insight-and-inspiration/tech-stream/sitecore-forms-and-jss-conditional-logic-in-react\n** Author: Aleksandar Kisimov\n*/\nimport { Action_Constants, MatchType_Constants, Operator_Constants } from \"../Constants\";\n\nconst handleActionType = (actionType, value) => {\n const actions = {\n [Action_Constants[\"show\"]]: () => {\n return !value;\n },\n [Action_Constants[\"hide\"]]: () => {\n return value;\n },\n [Action_Constants[\"enable\"]]: () => {\n return !value;\n },\n [Action_Constants[\"disable\"]]: () => {\n return value;\n }\n }\n\n return actions[actionType]();\n}\n\nconst validate = (operator, value, valueAgainst, isListBoxField) => {\n\n const operators = {\n [Operator_Constants[\"contains\"]]: () => {\n const regex = RegExp(`${value}`, \"g\");\n return regex.test(valueAgainst);\n },\n [Operator_Constants[\"does_not_contain\"]]: () => {\n const regex = RegExp(`${value}`, \"g\");\n return !(regex.test(valueAgainst));\n },\n [Operator_Constants[\"starts_with\"]]: () => {\n // const regex = RegExp(`^${valueAgainst}`);\n // return regex.test(value);\n return value.startsWith(valueAgainst);\n },\n [Operator_Constants[\"does_not_start_with\"]]: () => {\n // const regex = RegExp(`^${valueAgainst}`);\n // return !(regex.test(value));\n return !value.startsWith(valueAgainst);\n },\n [Operator_Constants[\"ends_with\"]]: () => {\n // const regex = RegExp(`${valueAgainst}$`);\n // return regex.test(value);\n return value.endsWith(valueAgainst);\n },\n [Operator_Constants[\"does_not_end_with\"]]: () => {\n // const regex = RegExp(`${valueAgainst}$`);\n // return !(regex.test(value));\n return !value.endsWith(valueAgainst);\n },\n [Operator_Constants[\"is_equal_To\"]]: () => {\n let result;\n if (isListBoxField) {\n const regex = RegExp(`${value}`, \"g\");\n result = regex.test(valueAgainst);\n } else {\n result = (value === valueAgainst);\n }\n return result;\n },\n [Operator_Constants[\"is_not_equal_to\"]]: () => {\n let result;\n if (isListBoxField) {\n const regex = RegExp(`${value}`, \"g\");\n result = !(regex.test(valueAgainst));\n } else {\n result = (value !== valueAgainst);\n }\n return result;\n },\n [Operator_Constants[\"is_greater_than\"]]: () => {\n return value > valueAgainst;\n },\n [Operator_Constants[\"is_greater_than_or_equal_to\"]]: () => {\n return value >= valueAgainst;\n },\n [Operator_Constants[\"is_less_than\"]]: () => {\n return value < valueAgainst;\n },\n [Operator_Constants[\"is_less_than_or_equal_to\"]]: () => {\n return value <= valueAgainst;\n }\n };\n\n if (typeof operators[operator] === 'undefined') {\n return false;\n }\n\n return operators[operator]();\n};\n\nconst getValidation = (elemValue, item, isListBoxField) => {\n let shouldHide;\n\n for (let i = 0; i < item.conditions.length; i += 1) {\n const value = item.conditions[i].value.toString().toLowerCase(),\n operator = item.conditions[i].operatorId,\n valueAgainst = elemValue.toString().toLowerCase();\n\n shouldHide = validate(operator, value, valueAgainst, isListBoxField);\n\n if (shouldHide) {\n break;\n }\n }\n let result = shouldHide;\n return handleActionType(item.actions[0].actionTypeId, result);\n};\n\n// Manual Trigger Event\nconst triggerEvent = (element, event) => {\n var evt;\n if (document.createEvent) {\n evt = document.createEvent(\"HTMLEvents\");\n evt.initEvent(event, true, true);\n evt.eventName = event;\n element.dispatchEvent(evt);\n } else {\n evt = document.createEventObject();\n evt.eventName = event;\n evt.eventType = event;\n element.fireEvent(\"on\" + evt.eventType, evt);\n }\n}\nexport const hideElement = (elemValue, fieldConditions, isListBoxField) => {\n setTimeout(() => {\n let shouldHide;\n for (let i = 0; i < fieldConditions.length; i += 1) {\n shouldHide = getValidation(elemValue, fieldConditions[i], isListBoxField);\n let actionsList = fieldConditions[i].actions;\n for (let j = 0; j < actionsList.length; j += 1) {\n let fieldId = actionsList[j].fieldId;\n let elemfieldId = document.querySelector('[data-fieldkey = \"' + fieldId + '\"]');\n let sectionField = \"\";\n let fieldList = \"\";\n if (elemfieldId) {\n if (shouldHide) {\n elemfieldId.classList.add(\"is-hidden\");\n elemfieldId.classList.remove(\"is-invalid\");\n elemfieldId.classList.remove(\"is-to-validate\");\n sectionField = elemfieldId.querySelector(\"fieldset\");\n if (sectionField) {\n fieldList = sectionField.querySelectorAll(\".form-group\");\n if (fieldList && fieldList.length > 0) {\n Array.prototype.slice.call(fieldList).map((elem, index) => {\n elem.classList.add(\"is-hidden\");\n elem.classList.remove(\"is-invalid\");\n elem.classList.remove(\"is-to-validate\");\n if (/form-single-line/g.test(elem.className)) {\n let inputElem = elem.querySelector(\"input\");\n if (inputElem) {\n inputElem.value = null;\n triggerEvent(inputElem, \"change\");\n }\n }\n if (/form-date/g.test(elem.className)) {\n let inputElem = elem.querySelector(\".react-datepicker-wrapper input\");\n if (inputElem) {\n inputElem.value = null;\n triggerEvent(inputElem, \"change\");\n }\n }\n if (/form-textarea/g.test(elem.className)) {\n let textArea = elem.querySelector(\"textarea\");\n if (textArea) {\n textArea.value = null;\n triggerEvent(textArea, \"change\");\n }\n }\n if (/form-checkbox-only/g.test(elem.className)) {\n let inputElem = elem.querySelector(\"input\");\n if (inputElem) {\n if (inputElem.checked) {\n inputElem.click();\n }\n }\n }\n if (/form-checkboxlist/g.test(elem.className)) {\n let inputElem = elem.querySelectorAll(\"input\");\n Array.prototype.slice.call(inputElem).map((elem, index) => {\n if (elem) {\n if (elem.checked) {\n elem.click();\n }\n }\n });\n }\n if (/form-radiobutton/g.test(elem.className)) {\n let inputElem = elem.querySelectorAll(\"input\");\n Array.prototype.slice.call(inputElem).map((elem, index) => {\n if (elem.value === \"null\") {\n elem.click();\n }\n });\n }\n if (/form-dropdown/g.test(elem.className)) {\n const hiddenOption = elem.querySelector(\".hidden-option\");\n if (hiddenOption) {\n hiddenOption.click();\n }\n }\n if (/form-listbox/g.test(elem.className)) {\n const selectElem = elem.querySelector(\"select\");\n selectElem.value = null;\n triggerEvent(selectElem, \"change\");\n }\n });\n }\n } else {\n if (/form-single-line/g.test(elemfieldId.className)) {\n let inputElem = elemfieldId.querySelector(\"input\");\n if (inputElem) {\n inputElem.value = null;\n triggerEvent(inputElem, \"change\");\n }\n }\n if (/form-date/g.test(elemfieldId.className)) {\n let inputElem = elemfieldId.querySelector(\".react-datepicker-wrapper input\");\n if (inputElem) {\n inputElem.value = null;\n triggerEvent(inputElem, \"change\");\n }\n }\n if (/form-textarea/g.test(elemfieldId.className)) {\n let textArea = elemfieldId.querySelector(\"textarea\");\n if (textArea) {\n textArea.value = null;\n triggerEvent(textArea, \"change\");\n }\n }\n if (/form-checkbox-only/g.test(elemfieldId.className)) {\n let inputElem = elemfieldId.querySelector(\"input\");\n if (inputElem) {\n if (inputElem.checked) {\n inputElem.click();\n }\n }\n }\n if (/form-checkboxlist/g.test(elemfieldId.className)) {\n let inputElem = elemfieldId.querySelectorAll(\"input\");\n Array.prototype.slice.call(inputElem).map((elem, index) => {\n if (elem) {\n if (elem.checked) {\n elem.click();\n }\n }\n });\n }\n if (/form-radiobutton/g.test(elemfieldId.className)) {\n let inputElem = elemfieldId.querySelectorAll(\"input\");\n Array.prototype.slice.call(inputElem).map((elem, index) => {\n if (elem.value === \"null\") {\n elem.click();\n }\n });\n }\n if (/form-dropdown/g.test(elemfieldId.className)) {\n const hiddenOption = elemfieldId.querySelector(\".hidden-option\");\n if (hiddenOption) {\n hiddenOption.click();\n }\n }\n if (/form-listbox/g.test(elemfieldId.className)) {\n const selectElem = elemfieldId.querySelector(\"select\");\n selectElem.value = null;\n triggerEvent(selectElem, \"change\");\n }\n }\n } else {\n elemfieldId.classList.remove(\"is-hidden\");\n elemfieldId.classList.add(\"is-to-validate\");\n\n sectionField = elemfieldId.querySelector(\"fieldset\");\n if (sectionField) {\n fieldList = sectionField.querySelectorAll(\".form-group\");\n if (fieldList && fieldList.length > 0) {\n Array.prototype.slice.call(fieldList).map((elem, index) => {\n elem.classList.remove(\"is-hidden\");\n elem.classList.add(\"is-to-validate\");\n\n if (/form-checkbox-only/g.test(elem.className)) {\n let hyperlinkLabel = elem.querySelector(\".hyperlink-container label\");\n let labelElem = elem.querySelector(\"label\");\n let labelHeight = hyperlinkLabel.clientHeight;\n labelElem.style.height = labelHeight + \"px\";\n }\n\n if (/form-checkboxlist/g.test(elem.className)) {\n let hyperlinkContainer = elem.querySelector(\".hyperlink-container\");\n let checkboxLabel;\n if (hyperlinkContainer) {\n checkboxLabel = hyperlinkContainer.querySelectorAll(\"label\");\n }\n\n if (checkboxLabel) {\n Array.prototype.slice.call(checkboxLabel).map((checkboxLabel, index) => {\n let checkboxLabelHeight = checkboxLabel.clientHeight;\n elem.querySelectorAll(\"label\")[index + 1].style.maxHeight = checkboxLabelHeight + \"px\";\n })\n }\n }\n });\n }\n } else {\n if (/form-checkbox-only/g.test(elemfieldId.className)) {\n let hyperlinkLabel = elemfieldId.querySelector(\".hyperlink-container label\");\n let labelElem = elemfieldId.querySelector(\"label\");\n let labelHeight = hyperlinkLabel.clientHeight;\n labelElem.style.height = labelHeight + \"px\";\n }\n\n if (/form-checkboxlist/g.test(elemfieldId.className)) {\n let hyperlinkContainer = elemfieldId.querySelector(\".hyperlink-container\");\n let checkboxLabel;\n if (hyperlinkContainer) {\n checkboxLabel = hyperlinkContainer.querySelectorAll(\"label\");\n }\n\n if (checkboxLabel) {\n Array.prototype.slice.call(checkboxLabel).map((checkboxLabel, index) => {\n let checkboxLabelHeight = checkboxLabel.clientHeight;\n elemfieldId.querySelectorAll(\"label\")[index + 1].style.maxHeight = checkboxLabelHeight + \"px\";\n })\n }\n }\n }\n }\n }\n }\n }\n return shouldHide;\n }, 250);\n};","import React, { Component } from \"react\";\nimport { FieldTypes } from \"@sitecore-jss/sitecore-jss-react-forms\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport * as moment from \"moment\";\nimport ReCAPTCHA from \"react-google-recaptcha\";\nimport TagManager from \"react-gtm-module\";\nimport { getAncestorElement } from \"../../../../../helper/GetAncestorElement\";\nimport { hideElement } from \"../ConditionalRendering\";\nimport { FieldType_Constants } from \"../Constants\";\n\nexport class ConditionalFieldWrapper extends Component {\n constructor(props) {\n super(props);\n this.state = {\n fieldItems: props.field.model.items,\n value: \"\",\n showDroplist: false,\n selectValue: null,\n startDate: null,\n verifiedRecaptcha: false,\n expiredRecaptcha: false,\n load: false,\n recaptchaLoaded: false,\n dropdownSearch: '',\n };\n this.dropdownSearchRef = React.createRef();\n }\n\n retailerDropdownPopulateData(data) {\n // Update state model.items with retailer data\n const newItems = data.AvailableRetailer.map(retailer => ({\n text: retailer.RetailerName.value,\n value: retailer.RetailerName.value,\n }));\n this.setState({ fieldItems: newItems });\n }\n\n retailerDropdownAddListener() {\n const { field } = this.props;\n if (field.model.fieldTypeItemId !== FieldType_Constants.retailer_name_list) { return; }\n\n const customForm = document.getElementById('js-custom-form');\n const retailerList = customForm.getElementsByClassName('js-retailer-list');\n const firstRetailerList = retailerList[0];\n const customDropdown = firstRetailerList.parentElement.querySelector('.custom-dropdown');\n const dropdownBtn = customDropdown.querySelector('input.dropdown-btn[type=\"button\"]');\n dropdownBtn.disabled = true;\n\n // Add change listener at document level and check for retailer center dropdown\n document.addEventListener('change', (event) => {\n if (event.target.matches('.js-retailer-list-center')) {\n // First empty out the current retailer selection if any\n this.setState({\n selectValue: null,\n showDroplist: false,\n fieldItems: []\n });\n\n // Handle multi-select change event and call API\n const selectedOptions = Array.from(event.target.selectedOptions).map(option => option.value);\n dropdownBtn.disabled = true;\n firstRetailerList.value = '';\n \n // We will not call the api if there is no center selected\n if (!selectedOptions.length) { return;}\n\n // We have selected enter, show loading, and call get retailer api\n dropdownBtn.classList.add('loading');\n\n let availableRetailerUrl = `/api/sitecore/formsearch/GetAvailableRetailer?`;\n selectedOptions.forEach((centreName, index) => {\n if (index === 0) {\n availableRetailerUrl += `centreNames=${centreName}`;\n } else {\n availableRetailerUrl += `¢reNames=${centreName}`;\n }\n });\n\n fetch(availableRetailerUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json'\n },\n })\n .then(response => response.json() )\n .then(data => {\n this.retailerDropdownPopulateData(data);\n dropdownBtn.disabled = false;\n })\n .catch(error => {\n console.error('Error calling getRetailer API:', error);\n this.retailerDropdownPopulateData(\n {\"AvailableRetailer\": [\n {\n \"RetailerName\": {\n \"value\": \"Failed fetch result\"}\n }\n ]});\n dropdownBtn.disabled = false;\n })\n .finally(() => {\n dropdownBtn.classList.remove('loading');\n });\n }\n });\n }\n\n componentDidMount = () => {\n setTimeout(() => {\n this.setState({ load: true });\n }, 1500);\n if (document) {\n const { field } = this.props;\n if (field.model.fieldTypeItemId === FieldTypes.Button) {\n const formInputWrapper = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".form-group.form-single-line\");\n const formTextareaWrapper = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".form-group.form-textarea\");\n const formDateWrapper = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".form-group.form-date\");\n const formSpan = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"span\");\n const formParagraph = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"p\");\n const formH1 = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"h1\");\n const formH2 = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"h2\");\n const formH3 = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"h3\");\n const formH4 = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"h4\");\n const formH5 = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"h5\");\n const formH6 = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\"h6\");\n const formHyperlink = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".has-hyperlink\");\n const checkboxlist = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".form-checkboxlist\");\n const listboxWrapper = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".form-listbox\");\n if (formInputWrapper) {\n Array.prototype.slice\n .call(formInputWrapper)\n .map((formGroups, index) => {\n const inputElem = formGroups.querySelector(\"input\");\n if (inputElem.type === \"email\") {\n inputElem.type = \"text\";\n }\n\n this.addEvent(inputElem, \"focus\", this.handleOnInputFocus);\n this.addEvent(inputElem, \"blur\", this.handleOnInputBlur, true);\n this.addEvent(inputElem, \"keyup\", this.handleOnInputChange);\n this.addEvent(inputElem, \"change\", this.handleOnInputChange);\n });\n }\n if (formDateWrapper) {\n Array.prototype.slice\n .call(formDateWrapper)\n .map((formGroups, index) => {\n const inputElem = formGroups.querySelector(\"input\");\n this.addEvent(\n inputElem,\n \"change\",\n this.handleConditionOnChangeDate\n );\n });\n }\n if (formTextareaWrapper) {\n Array.prototype.slice\n .call(formTextareaWrapper)\n .map((formGroups, index) => {\n const textareaElem = formGroups.querySelector(\"textarea\");\n\n this.addEvent(textareaElem, \"blur\", this.handleOnInputBlur, true);\n this.addEvent(textareaElem, \"keyup\", this.handleOnInputChange);\n this.addEvent(textareaElem, \"change\", this.handleOnInputChange);\n });\n }\n if (listboxWrapper) {\n Array.prototype.slice\n .call(listboxWrapper)\n .map((formGroups, index) => {\n const selectElem = formGroups.querySelector(\"select\");\n this.addEvent(selectElem, \"change\", this.handleOnChangeListbox);\n });\n }\n if (checkboxlist) {\n Array.prototype.slice\n .call(checkboxlist)\n .map((checkboxlist, index) => {\n let formLabel = checkboxlist.querySelector(\"label\");\n let checkboxLabel = checkboxlist\n .querySelector(\".hyperlink-container\")\n .querySelectorAll(\"label\");\n\n if (formLabel) {\n if (formLabel.innerHTML.trim() == \"\") {\n let formError = checkboxlist.querySelector(\n \".form-control-validation\"\n );\n checkboxlist.classList.add(\"no-title\");\n formLabel.classList.add(\"hide-label\");\n formError.innerHTML =\n \"Field is required. Please select atleast one of the choices.\";\n }\n }\n if (checkboxLabel) {\n Array.prototype.slice\n .call(checkboxLabel)\n .map((checkboxLabel, index) => {\n let checkboxLabelHeight = checkboxLabel.clientHeight;\n checkboxlist.querySelectorAll(\"label\")[\n index + 1\n ].style.maxHeight = checkboxLabelHeight + \"px\";\n });\n }\n });\n }\n if (formHyperlink) {\n Array.prototype.slice.call(formHyperlink).map((formLinks, index) => {\n let formLabel = formLinks\n .querySelector(\".hyperlink-container\")\n .querySelectorAll(\"label\");\n if (formLabel) {\n this.formUpdateHyperlink(formLabel);\n\n if (/form-checkbox-only/g.test(formLinks.className)) {\n let checkboxElem = formLinks.querySelector(\"input\");\n this.addEvent(checkboxElem, \"click\", this.handleClickCheckbox);\n let hyperlinkContainer = formLinks.querySelector(\n \".hyperlink-container\"\n );\n setTimeout(() => {\n let labelHeight = hyperlinkContainer.querySelector(\"label\")\n .clientHeight;\n let hyperlinkText = hyperlinkContainer.textContent;\n let formError = formLinks.querySelector(\n \".form-control-validation\"\n );\n formLinks.querySelector(\"label\").style.height =\n labelHeight + \"px\";\n if (formError) {\n formError.innerHTML = hyperlinkText + \" is required.\";\n }\n }, 250);\n }\n\n if (/form-radiobutton/g.test(formLinks.className)) {\n let radioInput = formLinks.querySelectorAll(\"input\");\n for (var i = 0; i < radioInput.length; i++) {\n this.addEvent(radioInput[i], \"click\", this.handleClickRadio);\n }\n if (/form-required/g.test(formLinks.className)) {\n let labelList = formLinks.querySelectorAll(\"label\");\n let counter = (labelList.length - 1) / 2;\n labelList[counter].classList.add(\"hide-label\");\n }\n setTimeout(() => {\n let labelHeight = formLinks.querySelector(\"label\")\n .clientHeight;\n let hyperlinkContainer = formLinks.querySelector(\n \".hyperlink-container\"\n );\n formLinks.querySelector(\"label\").style.height =\n labelHeight + \"px\";\n hyperlinkContainer.style.top = labelHeight + 26 + \"px\";\n }, 500);\n }\n }\n });\n }\n if (formSpan) {\n this.formUpdateHyperlink(formSpan);\n }\n if (formParagraph) {\n this.formUpdateHyperlink(formParagraph);\n }\n if (formH1) {\n this.formUpdateHyperlink(formH1);\n }\n if (formH2) {\n this.formUpdateHyperlink(formH2);\n }\n if (formH3) {\n this.formUpdateHyperlink(formH3);\n }\n if (formH4) {\n this.formUpdateHyperlink(formH4);\n }\n if (formH5) {\n this.formUpdateHyperlink(formH5);\n }\n if (formH6) {\n this.formUpdateHyperlink(formH6);\n }\n }\n this.handleConditionalLogic(field);\n this.retailerDropdownAddListener();\n }\n window.addEventListener(\"resize\", this.handleRadioStyle);\n };\n\n handleRadioStyle = () => {\n const formHyperlink = document\n .getElementsByClassName(\"custom-form\")[0]\n .querySelectorAll(\".has-hyperlink\");\n if (formHyperlink) {\n Array.prototype.slice.call(formHyperlink).map((formLinks, index) => {\n let formLabel = formLinks\n .querySelector(\".hyperlink-container\")\n .querySelectorAll(\"label\");\n if (formLabel) {\n if (/form-radiobutton/g.test(formLinks.className)) {\n let labelElem = formLinks.querySelector(\"label\");\n let hyperlinkContainer = formLinks.querySelector(\n \".hyperlink-container\"\n );\n let labelHeight;\n labelElem.style.height = \"auto\";\n labelHeight = labelElem.clientHeight;\n labelElem.style.height = labelHeight + \"px\";\n hyperlinkContainer.style.top = labelHeight + 26 + \"px\";\n }\n }\n });\n }\n };\n\n addEvent = (element, event, task, useCapture) => {\n // For all major browsers, except IE 8 and earlier\n if (element.addEventListener) {\n element.addEventListener(event, task, useCapture);\n // For IE 8 and earlier versions\n } else if (element.attachEvent) {\n element.attachEvent(\"on\" + event, task);\n }\n };\n\n // Manual Trigger Event\n triggerEvent = (element, event) => {\n var evt;\n if (document.createEvent) {\n evt = document.createEvent(\"HTMLEvents\");\n evt.initEvent(event, true, true);\n evt.eventName = event;\n element.dispatchEvent(evt);\n } else {\n evt = document.createEventObject();\n evt.eventName = event;\n evt.eventType = event;\n element.fireEvent(\"on\" + evt.eventType, evt);\n }\n };\n\n handleConditionalLogic = (field) => {\n if (field) {\n let fieldConditions = [];\n if (field.model) {\n fieldConditions = field.model.conditionSettings.fieldConditions;\n }\n if (fieldConditions.length > 0) {\n let fieldKey = field.model.conditionSettings.fieldKey;\n let elemFieldKey = document.querySelector(\n '[data-fieldkey = \"' + fieldKey + '\"]'\n );\n if (elemFieldKey) {\n if (/form-single-line/g.test(elemFieldKey.className)) {\n let inputVal = elemFieldKey.querySelector(\"input\").value;\n hideElement(inputVal, fieldConditions);\n } else if (/form-date/g.test(elemFieldKey.className)) {\n let inputVal = elemFieldKey.querySelector(\"input\").value;\n hideElement(inputVal, fieldConditions);\n } else if (/form-textarea/g.test(elemFieldKey.className)) {\n let textareaVal = elemFieldKey.querySelector(\"textarea\").value;\n hideElement(textareaVal, fieldConditions);\n } else if (/form-dropdown/g.test(elemFieldKey.className)) {\n let dropdownVal = elemFieldKey.querySelector(\".dropdown-btn\").value;\n hideElement(dropdownVal, fieldConditions);\n } else if (/form-checkbox-only/g.test(elemFieldKey.className)) {\n let checkboxElem = elemFieldKey.querySelector(\"input\");\n let checkboxVal = checkboxElem.checked;\n this.addEvent(checkboxElem, \"click\", this.handleClickCheckbox);\n hideElement(checkboxVal, fieldConditions);\n } else if (/form-radiobutton/g.test(elemFieldKey.className)) {\n let radioInput = elemFieldKey.querySelectorAll(\"input\");\n var radioValue = \"\";\n for (var i = 0; i < radioInput.length; i++) {\n if (radioInput[i].checked) {\n radioValue = radioInput[i].value;\n }\n this.addEvent(radioInput[i], \"click\", this.handleClickRadio);\n }\n hideElement(radioValue, fieldConditions);\n } else if (/form-listbox/g.test(elemFieldKey.className)) {\n let listboxSelect = elemFieldKey.querySelector(\"select\");\n hideElement(listboxSelect.value, fieldConditions);\n }\n }\n }\n }\n };\n\n formUpdateHyperlink = (element) => {\n Array.prototype.slice.call(element).map((formElement, index) => {\n let anchor = formElement.querySelector(\"a\");\n if (!anchor) {\n let textContent = formElement.innerHTML;\n if (/\\/a>/g.test(textContent)) {\n while (/\\/a>/g.test(textContent)) {\n textContent = textContent.replace(\"<a\", \"\n
\n \n \n
\n \n \n !\n \n \n
\n )}\n \n \n );\n }\n // Layout for date\n else if (field.model.fieldTypeItemId === FieldTypes.DateField) {\n fieldKey = field.model.conditionSettings.fieldKey;\n fieldCondition = field.model.conditionSettings.fieldConditions;\n fieldConditionData = JSON.stringify(fieldCondition);\n\n const defaultMinDate = new Date(\"1500-01-01T00:00:00Z\");\n const defaultMaxDate = moment().add(5, \"years\")._d;\n const yearDropdownNum = moment()._d.getFullYear() - 1500;\n const minDate = field.model.min\n ? new Date(field.model.min)\n : defaultMinDate;\n const maxDate = field.model.max\n ? new Date(field.model.max)\n : defaultMaxDate;\n const initialDate = field.model.value\n ? new Date(field.model.value)\n : null;\n let isRequired = false;\n if (/required/g.test(field.model.cssClass)) {\n isRequired = true;\n }\n formDisplay = (\n \n \n \n \n
\n )}\n {hyperlinkItems}
\n \n );\n }\n // Layout for checkbox list\n else if (field.model.fieldTypeItemId === FieldTypes.CheckboxList) {\n fieldKey = field.model.conditionSettings.fieldKey;\n fieldCondition = field.model.conditionSettings.fieldConditions;\n fieldConditionData = JSON.stringify(fieldCondition);\n\n let hyperlinkItems = field.model.items.map((itemList, index) => {\n return (\n {hyperlinkItems}
\n \n );\n }\n // Layout for radio button\n else if (field.model.fieldTypeItemId === FieldTypes.RadioButtonList) {\n fieldKey = field.model.conditionSettings.fieldKey;\n fieldCondition = field.model.conditionSettings.fieldConditions;\n fieldConditionData = JSON.stringify(fieldCondition);\n let hasNullValue = false;\n\n let hyperlinkItems = field.model.items.map((itemList, index) => {\n if (itemList && itemList.value === \"null\") {\n hasNullValue = true;\n }\n return (\n \n {field.model.title ? field.model.title : \"\"}\n {\" is required\"}\n
\n )}\n {hyperlinkItems}
\n \n );\n }\n // Layout for textarea\n else if (field.model.fieldTypeItemId === FieldTypes.MultipleLineText) {\n fieldKey = field.model.conditionSettings.fieldKey;\n let isRequired = false;\n if (/required/g.test(field.model.cssClass)) {\n isRequired = true;\n }\n formDisplay = (\n \n \n !\n \n \n
\n )}\n \n );\n }\n // Layout for dropdown\n else if (field.model.fieldTypeItemId === FieldTypes.DropdownList) {\n fieldKey = field.model.conditionSettings.fieldKey;\n fieldCondition = field.model.conditionSettings.fieldConditions;\n fieldConditionData = JSON.stringify(fieldCondition);\n const { field: dropdownField = null } = this.props || {};\n let defaultDropdownValue = \"\";\n field.model.items &&\n field.model.items.map((dropdownList, index) => {\n if (dropdownList.selected === true) {\n defaultDropdownValue = dropdownList.text;\n }\n });\n let isRequired = false;\n if (/required/g.test(field.model.cssClass)) {\n isRequired = true;\n }\n formDisplay = (\n \n \n \n \n
\n )}\n \n
\n \n \n \n {/* */}\n
\n \n - \n {field.model.showEmptyItem && (\n
\n \n \n \n
\n )}\n \n *Tip: Hold the Ctrl (Windows) or Command (Mac) key\n down while selecting multiple items.\n
\n \n );\n }\n // Layout for recaptcha\n else if (field.model.fieldTypeItemId === FieldType_Constants.recaptcha) {\n if (load) {\n formDisplay = (\n \n \n \n \n
\n \n );\n } else {\n formDisplay = \"\";\n }\n }\n // Layout for retailer name list dropdown\n else if (field.model.fieldTypeItemId === FieldType_Constants.retailer_name_list) {\n const isRequired = true;\n const defaultDropdownValue = '';\n formDisplay = (\n \n \n \n \n
\n )}\n \n
\n \n \n \n
\n \n - \n {field.model.showEmptyItem && (\n
\n \n \n {field.model.title ? field.model.title : \"\"}\n \n \n \n
\n );\n }\n // Default layout\n else {\n formDisplay = (\n \n {this.props.children}\n
\n );\n }\n } else {\n fieldKey = field.model.conditionSettings.fieldKey;\n\n formDisplay = (\n \n {this.props.children}\n
\n );\n }\n\n return formDisplay;\n }\n}\n\nexport const ErrorComponent = (props) => {\n return (\n \n {props.formErrors.map((error, index) => (\n \n !\n \n \n ))}\n
\n );\n};\n\nexport const FieldErrorComponent = (props) => (\n \n {props.errors.map((error, index) => (\n \n !\n \n \n ))}\n
\n);\n\n// Update Field JSON\nexport const UpdateFieldModel = (fields) => {\n let newField = fields;\n let fieldArray = [];\n\n if (fields.fields[0].fields) {\n fieldArray = fields.fields[0].fields;\n } else if (fields.fields) {\n fieldArray = fields.fields;\n }\n\n if (fieldArray.length > 0) {\n fieldArray.map((fieldItem, index) => {\n if (fieldItem.model.fieldTypeItemId === FieldTypes.RadioButtonList) {\n if (/required/g.test(fieldItem.model.cssClass)) {\n let hasAddedArray = false;\n fieldItem.model.items.map((item, index) => {\n const { itemId = null } = item || {};\n\n if (itemId == fieldItem.model.name) {\n hasAddedArray = true;\n }\n });\n if (!hasAddedArray) {\n let addedArray = {\n itemId: fieldItem.model.name,\n selected: false,\n text: \"\",\n value: \"\",\n };\n fieldItem.model.items.push(addedArray);\n }\n }\n } else if (fieldItem.model.fieldTypeItemId === FieldTypes.ListBox) {\n if (/required/g.test(fieldItem.model.cssClass)) {\n let hasAddedArray = false;\n fieldItem.model.items.map((item, index) => {\n const { itemId = null } = item || {};\n\n if (itemId == fieldItem.model.name) {\n hasAddedArray = true;\n }\n });\n if (!hasAddedArray) {\n let addedArray = {\n itemId: fieldItem.model.name,\n selected: false,\n text: \"\",\n value: \"\",\n };\n fieldItem.model.items.unshift(addedArray);\n }\n }\n } else if (fieldItem.model.fieldTypeItemId === FieldTypes.DropdownList) {\n fieldItem.model.showEmptyItem = true;\n }\n });\n }\n\n return newField;\n};\n","import { Form, createDefaultFieldFactory } from \"@sitecore-jss/sitecore-jss-react-forms\";\nimport React, { useEffect } from \"react\";\nimport { withRouter } from \"react-router-dom\";\nimport { sitecoreApiHost, sitecoreApiKey } from \"../../../../temp/config\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\nimport { FieldType_Constants } from \"./Constants\";\nimport {\n ConditionalFieldWrapper,\n ErrorComponent,\n FieldErrorComponent,\n UpdateFieldModel\n} from \"./CustomizeForm\";\n\nfunction handleOnChange(field, fieldValue, callback) {\n let valid = true;\n const errorMessages = [];\n\n if (field.model.required && !fieldValue) {\n valid = false;\n errorMessages.push(`${field.model.title} is required`);\n }\n\n callback(field.valueField.name, fieldValue, valid, errorMessages);\n}\n\nconst defaultFieldFactory = createDefaultFieldFactory();\ndefaultFieldFactory.setComponent(FieldType_Constants.retailer_name_list, (props) => {\n return (\n <>\n \n \n \n );\n});\n\nclass FoundationFormsForm extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n \n {this.props.fields && (\n \n \n )}\n
\n );\n }\n};\n\nexport default withRouter(FoundationFormsForm);\n","import React from \"react\";\nimport { Placeholder } from \"@sitecore-jss/sitecore-jss-react\";\nimport BaseComponent from \"../../../Base/BaseComponent\";\n\nconst FoundationLayoutTwoColumn2575 = props => {\n return (\n \n this.props.history.push(url)}\n fieldWrapperComponent={ConditionalFieldWrapper}\n errorComponent={ErrorComponent}\n fieldValidationErrorsComponent={FieldErrorComponent}\n fieldFactory={defaultFieldFactory}\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {showBackToTop &&\n
\n )\n }\n}\n\nexport default BackToTop;\n","import React from \"react\";\nimport {\n Placeholder,\n VisitorIdentification\n} from \"@sitecore-jss/sitecore-jss-react\";\nimport Helmet from \"react-helmet\";\nimport TagManager from \"react-gtm-module\";\nimport \"./assets/app.css\";\nimport {\n composeSecondaryNav,\n getHeaderBgColor,\n headerCutout,\n getPageName\n} from \"./helper/ParamsHelper\";\nimport { get } from \"lodash\";\nimport objectFitImages from \"object-fit-images\";\nimport \"lazysizes\";\nimport BackToTop from \"./components/Base/BackToTop/index.js\";\n\nclass Layout extends React.Component {\n constructor(props) {\n super(props);\n this.gtmId = \"GTM-K46JWXX\";\n this.state = {\n getHeaderParams: null,\n getHeaderBackground: null,\n getBodyParams: null,\n getFooterParams: {\n pageName: null\n },\n url: \"\",\n domain: \"\"\n };\n }\n\n componentDidMount() {\n const route = this.props.route;\n this.paramsHelper(route);\n TagManager.initialize({ gtmId: this.gtmId });\n\n if (document) {\n // document.querySelector('meta[property=\"og:url\"]').setAttribute(\"content\", window.location.href);\n // document.querySelector('meta[property=\"og:image\"]').setAttribute(\"content\", window.location.origin + get(route, \"fields.MetaImage.value.src\", \"\"));\n // document.querySelector('meta[name=\"twitter:url\"]').setAttribute(\"content\", window.location.href);\n // document.querySelector('meta[name=\"twitter:image\"]').setAttribute(\"content\", window.location.origin + get(route, \"fields.MetaImage.value.src\", \"\"));\n\n this.setState({\n url: window.location.href,\n domain: window.location.origin\n });\n // Canonical URL\n let canonicalSrc = get(route, \"fields.CanonicalUrl.value\", \"\");\n if (!canonicalSrc) {\n canonicalSrc = document.URL;\n }\n document.getElementById(\"canonical\").href = canonicalSrc;\n\n objectFitImages();\n this.isSafariBrowser();\n }\n }\n\n isSafariBrowser = () => {\n let isSafariBrowser = navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') <= -1;\n if(isSafariBrowser) {\n document.querySelector(\"body\").classList.add(\"is-safari\");\n }\n }\n\n paramsHelper = route => {\n this.setState({\n getHeaderParams: { ...composeSecondaryNav(route) },\n getHeaderBackground: {\n ...getHeaderBgColor(route),\n ...headerCutout(route)\n },\n getFooterParams: { pageName: getPageName(route) }\n });\n };\n\n render() {\n const {\n getHeaderParams,\n getHeaderBackground,\n getBodyParams,\n getFooterParams,\n url,\n domain\n } = this.state;\n const { route, context } = this.props;\n\n return (\n \n
\n }\n \n \n
\n Page not found
\nThis page does not exist.
\n\n Site: {context.site && context.site.name}\n
\n Language: {context.language}\n
\n \n {'Page not found'} \n \n
\n );\n }\n // Don't render anything if the route data or dictionary data is not fully loaded yet.\n // This is a good place for a \"Loading\" component, if one is needed.\n if (!routeData || this.languageIsChanging) {\n return null;\n }\n // Render the app's root structural layout\n return