\\r\\n\";\n},\"43\":function(container,depth0,helpers,partials,data) {\n var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {\n if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {\n return parent[propertyName];\n }\n return undefined\n };\n\n return \" \"\n + alias2(alias1(((stack1 = ((stack1 = (depth0 != null ? lookupProperty(depth0,\"labels\") : depth0)) != null ? lookupProperty(stack1,\"cta\") : stack1)) != null ? lookupProperty(stack1,\"label\") : stack1), depth0))\n + \"\\r\\n\";\n},\"compiler\":[8,\">= 4.3.0\"],\"main\":function(container,depth0,helpers,partials,data,blockParams,depths) {\n var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.lambda, alias3=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {\n if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {\n return parent[propertyName];\n }\n return undefined\n };\n\n return \"\\r\\n\";\n},\"useData\":true,\"useDepths\":true});","import { EVENTS, SELECTORS } from '../../common/constants';\r\n\r\nvar HeroBanner = {\r\n init: function (element) {\r\n this.element = element;\r\n\r\n var video = element.querySelector(SELECTORS.HEROBANNER_VIDEO);\r\n var playButton = element.querySelector(SELECTORS.HEROBANNER_VIDEO_PLAY);\r\n var volumeButton = element.querySelector(SELECTORS.HEROBANNER_VIDEO_VOLUME);\r\n\r\n playButton.addEventListener(EVENTS.CLICK, function () {\r\n if (video.paused || video.ended) {\r\n video.play();\r\n $(playButton).addClass('playing');\r\n $(playButton).removeClass('paused');\r\n } else {\r\n video.pause();\r\n $(playButton).addClass('paused');\r\n $(playButton).removeClass('playing');\r\n }\r\n });\r\n\r\n volumeButton.addEventListener(EVENTS.CLICK, function () {\r\n if (video.muted) {\r\n video.muted = false;\r\n video.volume = 0.3;\r\n $(volumeButton).addClass('unmuted');\r\n $(volumeButton).removeClass('muted');\r\n } else {\r\n video.muted = true;\r\n $(volumeButton).addClass('muted');\r\n $(volumeButton).removeClass('unmuted');\r\n }\r\n });\r\n }\r\n};\r\n\r\nexport default HeroBanner;\r\n","import Swiper from 'swiper/dist/js/swiper.min.js';\r\n\r\nvar Slider = {\r\n\r\n init: function (element) {\r\n var _self = this;\r\n this.$element = element;\r\n\r\n this.dom = {\r\n $paginationContainer: this.$element.querySelector('.hof-slider-pagination__container'),\r\n $pagination: this.$element.querySelector('.hof-slider-pagination'),\r\n $slides: this.$element.querySelectorAll('.hof-slider-item'),\r\n $previousButton: this.$element.querySelector('.hof-slider-btn.left'),\r\n $nextButton: this.$element.querySelector('.hof-slider-btn.right')\r\n };\r\n\r\n if (this.$element) {\r\n const sliderFrame = this.$element.querySelectorAll('.hof-slider-frame')[0];\r\n\r\n //autoplay\r\n var autoplayAttribute = this.$element.getAttribute('data-autoplay-delay');\r\n var autoplayDelay = autoplayAttribute ? new Number(autoplayAttribute) * 1000 : 0;\r\n var autoplay = false;\r\n\r\n if (this.dom.$slides.length > 1 && autoplayDelay > 0) {\r\n autoplay = {\r\n delay: autoplayDelay,\r\n };\r\n }\r\n\r\n //slides per view\r\n var slidesPerViewAttribute = this.$element.getAttribute('data-slides-per-view');\r\n var slidesPerView = slidesPerViewAttribute ? (slidesPerViewAttribute) : 1;\r\n\r\n //generate breakpoints\r\n var breakpoints = {}\r\n\r\n if (slidesPerView > 1) {\r\n var minWidth = 480; //Anything below this should be 1 slide\r\n var maxWidth = 960; //Anything above this should be max slides (desktop)\r\n var numBreakpoints = slidesPerView - 1; //default value is slidesperview, create breakpoints for in between\r\n var incrementDivisor = numBreakpoints - 1;\r\n if (incrementDivisor <= 0)\r\n incrementDivisor = 1;\r\n var increment = (maxWidth - minWidth) / incrementDivisor; //we want to include max & min so determine increment to get those + middle points\r\n\r\n for (var i = 0; i < numBreakpoints; i++) {\r\n var width = minWidth + (increment * i);\r\n breakpoints[width] = { slidesPerView: (i + 1) };\r\n }\r\n }\r\n //pagination\r\n var pagination = {};\r\n if (this.dom.$pagination && this.dom.$slides.length > 1) {\r\n var paginationClass = `hof-slider-pagination--${Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)}`;\r\n this.dom.$pagination.classList.add(paginationClass);\r\n pagination = {\r\n el: `.${paginationClass}`,\r\n clickable: true\r\n };\r\n }\r\n\r\n //navigation\r\n var navigation = {};\r\n if (this.dom.$previousButton && this.dom.$nextButton) {\r\n navigation = {\r\n nextEl: this.dom.$nextButton,\r\n prevEl: this.dom.$previousButton\r\n };\r\n }\r\n\r\n //initialize hof-slider\r\n this.$slider = new Swiper(sliderFrame, {\r\n direction: 'horizontal',\r\n loop: this.dom.$slides.length > 1,\r\n slidesPerView: slidesPerView,\r\n breakpoints: breakpoints,\r\n watchOverflow: false,\r\n slideClass: 'hof-slider-item',\r\n wrapperClass: 'hof-slider-row',\r\n navigation: navigation,\r\n pagination: pagination,\r\n autoplay: autoplay,\r\n pauseOnMouseEnter: true,\r\n lazy: true\r\n });\r\n\r\n /*\r\n * Adjusting control positioning for certain 'slide' components\r\n */\r\n if (Array.from(this.dom.$slides).some(function (slide) { return slide.querySelectorAll('.hero-banner--overlay').length > 0 })) {\r\n adjustControlPosition(); //Call listener function at run time\r\n window.addEventListener('resize', adjustControlPosition);// Attach listener function on state changes\r\n }\r\n\r\n function adjustControlPosition() {\r\n var slides = Array.from(_self.dom.$slides);\r\n \r\n if (window.matchMedia(\"(min-width: 60em)\").matches) {\r\n $(_self.dom.$paginationContainer).css('top', 'unset');\r\n $(_self.dom.$paginationContainer).css('bottom', '5%');\r\n }\r\n //If we're on mobile, get the average height of the imagery on the hero banners\r\n // Move the pagination and nav arrows appropriately\r\n else {\r\n var contentWrappers = $.map(slides, function (slide) { return Array.from(slide.querySelectorAll('.hero-banner__content-wrapper')) }).flat();\r\n var heights = $.map(contentWrappers, function (wrapper) { return wrapper.previousElementSibling.offsetHeight; });\r\n\r\n var sumHeights = 0;\r\n $.each(heights, function () { sumHeights += this });\r\n\r\n var averageHeight = sumHeights / contentWrappers.length;\r\n var paginationOffset = (averageHeight * .95).toString() + 'px';\r\n var navigationHeight = averageHeight.toString() + 'px';\r\n\r\n if (_self.dom.$paginationContainer) {\r\n $(_self.dom.$paginationContainer).css('top', paginationOffset);\r\n $(_self.dom.$paginationContainer).css('bottom', 'unset');\r\n }\r\n if (_self.dom.$previousButton) {\r\n $(_self.dom.$previousButton).css('height', navigationHeight);\r\n }\r\n if (_self.dom.$nextButton) {\r\n $(_self.dom.$nextButton).css('height', navigationHeight);\r\n }\r\n }\r\n }\r\n\r\n return this.$slider;\r\n } \r\n }\r\n};\r\n\r\nexport default Slider;\r\n","import { EVENTS } from './../constants';\r\n\r\n/**\r\n * ID\r\n *\r\n * @type {Number}\r\n * @ignore\r\n */\r\nvar id = 0;\r\n\r\n/**\r\n * Get ID\r\n *\r\n * Because file is loaded only once, this function\r\n * can be used to generate a unique id every time\r\n * it is called.\r\n *\r\n * @return {Number} Unique ID value\r\n * @ignore\r\n */\r\nfunction getId() {\r\n return id++;\r\n}\r\n\r\n/**\r\n * KeyUp Service\r\n */\r\nvar KeyUpService = {};\r\n\r\n\r\n/**\r\n* An array to be populated with callback functions that will be triggered on KeyUp\r\n*\r\n* @property {Array} callbacks\r\n*/\r\nKeyUpService.callbacks = [];\r\n\r\n/**\r\n * @desc Initialize the singleton by attaching the event listener to the window\r\n * @listens {Event} listens to the window KeyUp event\r\n */\r\nKeyUpService.init = function() {\r\n\twindow.addEventListener(EVENTS.KEY_UP, KeyUpService.onKeyUp.bind(this));\r\n};\r\n\r\n/**\r\n* @desc The KeyUp event handler. Itertates through the `callback` array and invokes each callback in the Array\r\n*/\r\nKeyUpService.onKeyUp = function() {\r\n\tvar charCode = event.charCode || event.keyCode;\r\n\tfor (var i = 0; i < this.callbacks.length; i++) {\r\n\t\t\tthis.callbacks[i].callback(charCode);\r\n\t}\r\n};\r\n\r\n/**\r\n * @desc A hook for pushing a callback function\r\n * into the `callbacks` array. A unique\r\n * ID value for the callback is generated\r\n * and a function is returned for removing\r\n * the callback if need be.\r\n *\r\n * @param {Function} callback A function to invoke by the KeyUpService\r\n * @return {Function} `removeCallback` A function which will remove an entry from the `callbacks` array\r\n */\r\nKeyUpService.addCallback = function (callback) {\r\n\t// Generate an id for the callback\r\n\tvar id = getId();\r\n\r\n\t// Push function into array with a unique id\r\n\tthis.callbacks.push({\r\n\t\tid,\r\n\t\tcallback\r\n\t});\r\n\r\n\t// Return the remove function\r\n\treturn this.removeCallback.bind(this, id);\r\n};\r\n\r\n/**\r\n * Filters through the `callback` array and removes\r\n * the entry that corresponds to the id passed\r\n * in as an argument\r\n *\r\n * @param {Number} id An id value to filter by\r\n */\r\nKeyUpService.removeCallback = function (id) {\r\n\tthis.callbacks = this.callbacks.filter((item) => {\r\n\t\treturn item.id !== id;\r\n\t});\r\n};\r\n\r\n\r\nexport {KeyUpService};","import { debounce } from './../utils';\r\nimport { EVENTS } from './../constants';\r\n\r\n/**\r\n * ID\r\n *\r\n * @type {Number}\r\n * @ignore\r\n */\r\nvar id = 0;\r\n\r\n/**\r\n * Get ID\r\n *\r\n * Because file is loaded only once, this function\r\n * can be used to generate a unique id every time\r\n * it is called.\r\n *\r\n * @return {Number} Unique ID value\r\n * @ignore\r\n */\r\nfunction getId() {\r\n return id++;\r\n}\r\n\r\n/**\r\n * Resize Service\r\n */\r\nvar ResizeService = {};\r\n\r\n\r\n/**\r\n* An array to be populated with callback functions that will be triggered on resize\r\n*\r\n* @property {Array} callbacks\r\n*/\r\nResizeService.callbacks = [];\r\n\r\n/**\r\n * @desc Initialize the singleton by attaching the event listener to the window\r\n * @listens {Event} listens to the window resize event\r\n */\r\nResizeService.init = function() {\r\n\twindow.addEventListener(EVENTS.RESIZE, debounce(ResizeService.onResize.bind(this), 10));\r\n};\r\n\r\n/**\r\n* @desc The resize event handler. Itertates through the `callback` array and invokes each callback in the Array\r\n*/\r\nResizeService.onResize = function() {\r\n\tfor (var i = 0; i < this.callbacks.length; i++) {\r\n\t\t\tthis.callbacks[i].callback();\r\n\t}\r\n};\r\n\r\n/**\r\n * @desc A hook for pushing a callback function\r\n * into the `callbacks` array. A unique\r\n * ID value for the callback is generated\r\n * and a function is returned for removing\r\n * the callback if need be.\r\n *\r\n * @param {Function} callback A function to invoke by the ResizeService\r\n * @return {Function} `removeCallback` A function which will remove an entry from the `callbacks` array\r\n */\r\nResizeService.addCallback = function (callback) {\r\n\t// Generate an id for the callback\r\n\tvar id = getId();\r\n\r\n\t// Push function into array with a unique id\r\n\tthis.callbacks.push({\r\n\t\tid,\r\n\t\tcallback\r\n\t});\r\n\r\n\t// Return the remove function\r\n\treturn this.removeCallback.bind(this, id);\r\n};\r\n\r\n/**\r\n * Filters through the `callback` array and removes\r\n * the entry that corresponds to the id passed\r\n * in as an argument\r\n *\r\n * @param {Number} id An id value to filter by\r\n */\r\nResizeService.removeCallback = function (id) {\r\n\tthis.callbacks = this.callbacks.filter((item) => {\r\n\t\treturn item.id !== id;\r\n\t});\r\n};\r\n\r\nexport {ResizeService};","import { debounce } from './../utils';\r\nimport { EVENTS } from './../constants';\r\n\r\n/**\r\n * ID\r\n *\r\n * @type {Number}\r\n * @ignore\r\n */\r\nvar id = 0;\r\n\r\n/**\r\n * Get ID\r\n *\r\n * Because file is loaded only once, this function\r\n * can be used to generate a unique id every time\r\n * it is called.\r\n *\r\n * @return {Number} Unique ID value\r\n * @ignore\r\n */\r\nfunction getId() {\r\n return id++;\r\n}\r\n\r\n/**\r\n * Scroll Service\r\n */\r\nvar ScrollService = {};\r\n\r\n\r\n/**\r\n* An array to be populated with callback functions that will be triggered on scroll\r\n*\r\n* @property {Array} callbacks\r\n*/\r\nScrollService.callbacks = [];\r\n\r\n/**\r\n * @desc Initialize the singleton by attaching the event listener to the window\r\n * @listens {Event} listens to the window scroll event\r\n */\r\nScrollService.init = function() {\r\n\twindow.addEventListener(EVENTS.SCROLL, debounce(ScrollService.onScroll.bind(this), 10));\r\n};\r\n\r\n/**\r\n* @desc The scroll event handler. Itertates through the `callback` array and invokes each callback in the Array\r\n*/\r\nScrollService.onScroll = function() {\r\n\tfor (var i = 0; i < this.callbacks.length; i++) {\r\n\t\t\tthis.callbacks[i].callback();\r\n\t}\r\n};\r\n\r\n/**\r\n * @desc A hook for pushing a callback function\r\n * into the `callbacks` array. A unique\r\n * ID value for the callback is generated\r\n * and a function is returned for removing\r\n * the callback if need be.\r\n *\r\n * @param {Function} callback A function to invoke by the ScrollService\r\n * @return {Function} `removeCallback` A function which will remove an entry from the `callbacks` array\r\n */\r\nScrollService.addCallback = function (callback) {\r\n\t// Generate an id for the callback\r\n\tvar id = getId();\r\n\r\n\t// Push function into array with a unique id\r\n\tthis.callbacks.push({\r\n\t\tid,\r\n\t\tcallback\r\n\t});\r\n\r\n\t// Return the remove function\r\n\treturn this.removeCallback.bind(this, id);\r\n};\r\n\r\n/**\r\n * Filters through the `callback` array and removes\r\n * the entry that corresponds to the id passed\r\n * in as an argument\r\n *\r\n * @param {Number} id An id value to filter by\r\n */\r\nScrollService.removeCallback = function (id) {\r\n\tthis.callbacks = this.callbacks.filter((item) => {\r\n\t\treturn item.id !== id;\r\n\t});\r\n};\r\n\r\n\r\nexport {ScrollService};","var CustomButtonService = {};\r\n\r\nfunction isHexColor(color) {\r\n return /^#([0-9A-F]{3}){1,2}$/i.test(color);\r\n}\r\n\r\nfunction colorToRGB(color) {\r\n if (isHexColor(color)) {\r\n // If it's a hex color, convert directly to RGB\r\n let r, g, b;\r\n if (color.length === 4) { // #RGB\r\n r = parseInt(color[1] + color[1], 16);\r\n g = parseInt(color[2] + color[2], 16);\r\n b = parseInt(color[3] + color[3], 16);\r\n } else if (color.length === 7) { // #RRGGBB\r\n r = parseInt(color[1] + color[2], 16);\r\n g = parseInt(color[3] + color[4], 16);\r\n b = parseInt(color[5] + color[6], 16);\r\n }\r\n return `rgb(${r}, ${g}, ${b})`;\r\n } else {\r\n // If it's a color name, use the colorNameToRGB function\r\n return colorNameToRGB(color);\r\n }\r\n}\r\n\r\nfunction colorNameToRGB(colorName) {\r\n // Create a temporary element\r\n const div = document.createElement(\"div\");\r\n // Set the color\r\n div.style.color = colorName;\r\n // Attach to the DOM to ensure styles are applied\r\n document.body.appendChild(div);\r\n // Use getComputedStyle to get the color value\r\n const rgb = getComputedStyle(div).color;\r\n // Clean up by removing the element\r\n document.body.removeChild(div);\r\n return rgb;\r\n}\r\n\r\nfunction getIsDark(color) {\r\n const rgb = colorToRGB(color).match(/\\d+/g); // Extract RGB components\r\n const [r, g, b] = rgb.map(Number); // Convert to numbers\r\n // Calculate luminance\r\n const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\r\n console.log(luminance)\r\n var isDark = luminance < 220; // Threshold of luminance, might need adjusting\r\n\r\n return isDark;\r\n}\r\n\r\nCustomButtonService.init = function () {\r\n document.addEventListener('DOMContentLoaded', function () {\r\n document.querySelectorAll('[class*=\"button--custom-\"]').forEach(function (element) {\r\n const classRegex = /button--custom-(?[^\\-]+)(?:-(?.+))?/i;\r\n var match = classRegex.exec(element.className);\r\n var textColor, bgColor, borderColor;\r\n var isDark = true;\r\n\r\n if (match) {\r\n if (match.groups[\"bgColor\"]) {\r\n bgColor = match.groups[\"bgColor\"]\r\n }\r\n\r\n isDark = getIsDark(bgColor)\r\n if (match.groups[\"textColor\"]) {\r\n textColor = match.groups[\"textColor\"]\r\n } else if (isDark) {\r\n textColor = \"#ffffff\";\r\n } else {\r\n textColor = \"#000000\";\r\n }\r\n\r\n if (isDark) {\r\n borderColor = bgColor\r\n } else {\r\n borderColor = textColor\r\n }\r\n } else {\r\n var textColor = element.getAttribute('data-text-color');\r\n var bgColor = element.getAttribute('data-bg-color');\r\n var borderColor = element.getAttribute('data-border-color');\r\n }\r\n\r\n //Default\r\n element.style.setProperty('--text-color', textColor);\r\n element.style.setProperty('--bg-color', bgColor);\r\n element.style.setProperty('--border-color', borderColor);\r\n\r\n //Active\r\n var activeTextColor = element.getAttribute('data-active-text-color');\r\n if (!activeTextColor) {\r\n activeTextColor = bgColor;\r\n }\r\n element.style.setProperty('--active-text-color', activeTextColor);\r\n\r\n var activeBgColor = element.getAttribute('data-active-bg-color');\r\n if (!activeBgColor) {\r\n activeBgColor = textColor\r\n }\r\n element.style.setProperty('--active-bg-color', activeBgColor);\r\n\r\n var activeBorderColor = element.getAttribute('data-active-border-color');\r\n if (!activeBorderColor) {\r\n if (isDark) {\r\n activeBorderColor = bgColor\r\n } else {\r\n activeBorderColor = textColor\r\n }\r\n }\r\n element.style.setProperty('--active-border-color', activeBorderColor);\r\n });\r\n });\r\n}\r\n\r\n\r\nexport { CustomButtonService };","import { KeyUpService } from './keyupservice';\r\nimport { ResizeService } from './resizeservice';\r\nimport { ScrollService } from './scrollservice';\r\n\r\n//SHARED\r\nimport { CustomButtonService } from '../../../../../_shared/src/js/common/services/custombuttonservice';\r\n\r\n/**\r\n * Services\r\n */\r\nvar Services = {\r\n\r\n /**\r\n * @desc Initialize the services\r\n */\r\n init: function () {\r\n this.CustomButtonService.init();\r\n this.KeyUpService.init();\r\n this.ResizeService.init();\r\n this.ScrollService.init();\r\n },\r\n\r\n /**\r\n * @desc Assign KeyUpService to an object in Services\r\n */\r\n CustomButtonService: CustomButtonService,\r\n\r\n /**\r\n * @desc Assign KeyUpService to an object in Services\r\n */\r\n KeyUpService: KeyUpService,\r\n\r\n /**\r\n * @desc Assign ResizeService to an object in Services\r\n */\r\n ResizeService: ResizeService,\r\n\r\n /**\r\n * @desc Assign ScrollService to an object in Services\r\n */\r\n ScrollService: ScrollService\r\n\r\n};\r\n\r\nexport { Services };\r\n","import { EVENTS, MISC, SELECTORS } from '../../common/constants';\r\nimport { Services } from '../../common/services';\r\nimport { queryselectorparents } from '../../common/utils/queryselectorparents';\r\n\r\n\r\nexport function tabs(element) {\r\n \r\n // Find the tablinks & tab panels\r\n\tvar tablinks = element.querySelectorAll(SELECTORS.TAB_LIST);\r\n\tvar tabpanels = element.querySelectorAll(SELECTORS.TABPANEL);\r\n\r\n\t// listen for click & show/hide tab\r\n\tfor (var i = 0; i < tablinks.length; i++) {\r\n\t\ttablinks[i].addEventListener(EVENTS.CLICK, tabTriggerHandler(tablinks[i]));\r\n\t}\r\n\t\r\n\t/**\r\n\t* event handler for showHidePanels\r\n\t*\r\n\t*/\r\n function tabTriggerHandler(tablink) {\r\n\t\treturn function(event) {\r\n\t\t\tshowHidePanels(event, tablink);\r\n\t\t};\r\n\t}\r\n\t\r\n\t/**\r\n\t* show/hide Panels\r\n\t*\r\n\t* @param {DOM element} the tablink that was clicked\r\n\t*\r\n\t*/\r\n function showHidePanels(event, tablink) {\r\n \tevent.preventDefault();\r\n \tvar id = tablink.querySelector(SELECTORS.ANCHOR).getAttribute(MISC.HREF);\r\n\t\tvar tabWrapper = queryselectorparents(tablink, '.tabs-container');\r\n\t\tvar ourTablinks = tabWrapper.querySelectorAll(SELECTORS.TAB_LIST);\r\n\t\tvar ourTabpanels = tabWrapper.querySelectorAll(SELECTORS.TABPANEL);\r\n \t// Hide every tab\r\n\t\tfor (var i = 0; i < ourTablinks.length; i++) {\r\n\t\t\tourTablinks[i].setAttribute(MISC.ARIA_SELECTED, MISC.FALSE);\r\n\t\t\tourTabpanels[i].setAttribute(MISC.ARIA_HIDDEN, MISC.TRUE);\r\n\t\t}\r\n\t\t// show only the one we chose\r\n\t\ttablink.setAttribute(MISC.ARIA_SELECTED, MISC.TRUE);\r\n\t\telement.querySelector(id).parentNode.setAttribute(MISC.ARIA_HIDDEN, MISC.FALSE);\r\n }\r\n\r\n return {\r\n \ttabTriggerHandler\r\n }\r\n}","/****\r\n * Tooltips utility\r\n *\r\n *
\r\n `\r\n\r\n parentWrapper.querySelector('.hof-profile-basics-copy__data').innerHTML = userdata;\r\n }\r\n parentWrapper.querySelector('.hof-profile-basics-copy').setAttribute(MISC.ARIA_HIDDEN, false);\r\n parentWrapper.querySelector('.hof-profile-basics-edit').setAttribute(MISC.ARIA_HIDDEN, true);\r\n } else {\r\n const errors = formatErrors(data.FieldErrors);\r\n setErrors(_self.theForm, errors);\r\n if(data.Message) {\r\n _self.theForm.querySelector('.hof-form-error').innerHTML = data.Message;\r\n }\r\n }\r\n \r\n } else if(_self.theForm.id === 'hof-profile-account-edit-form') {\r\n if (data.Success) {\r\n var parentWrapper = queryselectorparents(_self.theForm, '.hof-profile-account');\r\n if (data.Message) {\r\n parentWrapper.querySelector('.hof-error-label.success').innerHTML = data.Message;\r\n }\r\n\r\n if(data.settings && data.settings.basics) {\r\n parentWrapper.querySelector('.hof-email').innerHTML = data.settings.basics.email;\r\n }\r\n\r\n parentWrapper.querySelector('.hof-profile-account-copy').setAttribute(MISC.ARIA_HIDDEN, false);\r\n parentWrapper.querySelector('.hof-profile-account-edit').setAttribute(MISC.ARIA_HIDDEN, true);\r\n } else {\r\n const errors = formatErrors(data.FieldErrors);\r\n setErrors(_self.theForm, errors);\r\n if(data.Message) {\r\n _self.theForm.querySelector('.hof-form-error').innerHTML = data.Message;\r\n }\r\n }\r\n } else {\r\n var tpl = data.template;\r\n var template = _self[tpl];\r\n\r\n var result = template({...data, form: configObject, errors: !!data.FieldErrors });\r\n var replaceTarget = queryselectorparents(_self.theForm, '.hof-profile-module');\r\n\r\n replaceTarget.innerHTML = result;\r\n\r\n _self.init(_self.element);\r\n\r\n Flipper.init(replaceTarget);\r\n Forms.init(replaceTarget);\r\n }\r\n });\r\n }\r\n};\r\n\r\nexport default Profile;","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { tooltips } from '../../common/utils/tooltips';\r\n\r\nvar RetailList = {\r\n\t\r\n\t//variable to store retailer data\r\n\tretailerData : null,\r\n\t\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\r\n\t\tvar that = this;\r\n\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.retailerslist = element.querySelector(SELECTORS.RETAILERS_LIST);\r\n\t\tthis.retailerMessage = element.querySelector(SELECTORS.RETAILER_MESSAGE);\r\n\t\tthis.pickupStore = element.querySelector('#hof-pickup-store');\r\n\t\tthis.zipStore = element.querySelector('#hof-store-zip');\r\n\t\tthis.searchform = this.element.querySelector(SELECTORS.RETAILER_SEARCH);\r\n\t\tthis.searchUrl = this.searchform.getAttribute('action');\r\n\t\tthis.searchinput = this.searchform.querySelector(SELECTORS.GOOGLE_PLACES);\r\n\r\n\t\tthis.giftboolean = element.querySelector(SELECTORS.RETAILER_GIFT);\r\n\t\tthis.giftmessage = element.querySelector(SELECTORS.RETAILER_GIFT_MESSAGE);\r\n\r\n\t\tthis.loader = element.querySelector('.hof-loading');\r\n\t\t\r\n\t\t/* call to temp function for prototype ONLY */\r\n\t\tthis.initSearchBox();\r\n\t\t\r\n\t\t/* for if you want to use Google Places Autocomplete */\r\n\t\t/* \r\n\t\tthis.loadPlaces();\r\n\t\t*/\r\n\r\n\t\tthis.giftmessage.addEventListener(EVENTS.BLUR, _syncGiftFields);\r\n\r\n\t\tfunction _syncGiftFields() {\r\n\t\t\tvar bool = that.giftboolean.value;\r\n\t\t\tvar msg = that.giftmessage.value;\r\n\t\t\tvar boolTgt = that.element.querySelector(SELECTORS.RETAILER_GIFT_TGT);\r\n\t\t\tvar msgTgt = that.element.querySelector(SELECTORS.RETAILER_GIFT_MESSAGE_TGT);\r\n\t\t\tboolTgt.value = bool;\r\n\t\t\tmsgTgt.value = msg;\r\n\t\t}\r\n\t\t\r\n\t},\r\n\t\r\n\tinitSearchBox : function() {\r\n\t\tvar _self = this;\r\n\t\t\r\n\t\t_self.searchform.addEventListener(EVENTS.SUBMIT, function(event) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tvar ziptest = new RegExp(MISC.ZIP_REGEX);\r\n\t\t\tvar zip = _self.searchinput.value;\r\n\t\t\tvar isValidZip = ziptest.test(zip);\r\n \tif(isValidZip) {\r\n\t\t\t\t_self.getRetailerData(zip);\r\n\t\t\t}\r\n\t\t});\r\n\t\t\r\n\t\t\r\n\t},\r\n\t\r\n\t/**\r\n\t* build Retailer list\r\n\t*\r\n\t*/\r\n\tbuildRetailerList : function() {\r\n\t\tvar _self = this;\r\n\t\tvar retailers = _self.retailerData.Retailers;\r\n\t\tvar message = _self.retailerData.Message;\r\n\t\tvar hasCSC = false;\r\n\t\tvar list = '';\r\n\t\tif(typeof(retailers) !== 'undefined') {\r\n\t\t\tvar numRetailers = retailers.length;\r\n\t\t\t// Add new markers\r\n\t\t\tif(numRetailers > 0) {\r\n\t\t\t\t// the below line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\t//retailers[0].csc = true;\r\n\t\t\t\t// the above line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\tfor (var i = 0; i < numRetailers; i++) {\r\n\t\t\t\t var retailer = retailers[i];\r\n\t\t\t\t\t// FOR CSC ICON: you will need to add the classname that gets created in scss/base/icons when you run gulp compile-icons after adding the SVG for the CSC icon to the assets/icons folder. Add that class to .hof-tooltip-link\r\n\t\t\t\t\tvar CSC = typeof(retailer.csc) !== 'undefined' && retailer.csc === true ? ''+MISC.CSC+''+MISC.CSC_MESSAGE+'' : '';\r\n\t\t\t\t\tlist += '
';\r\n\t\t\t\t\tif(!hasCSC && CSC !== '') {\r\n\t\t\t\t\t\thasCSC = true;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t/* regrettable hack but display:flex collapses margins/paddings/:after at the end of the list */\r\n\t\t\t\tlist += '
';\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t_self.retailerMessage.innerHTML = message;\r\n\t\tthis.retailerslist.innerHTML = list;\r\n\t\t\t\t\r\n\t\t//create event listener for newly-created CTA\r\n\t\tvar possibleStores = this.retailerslist.querySelectorAll(SELECTORS.STORE_DETAILS);\r\n\t\t\r\n\t\tfor (var j = 0; j < possibleStores.length; j++) {\r\n\t\t\tvar storeID = possibleStores[j].getAttribute('id');\r\n\t\t\tvar zip = possibleStores[j].dataset.zip;\r\n\t\t\tpossibleStores[j].addEventListener(EVENTS.CLICK, _storeSelectorSetter(storeID, zip));\r\n\t\t}\r\n\r\n\t\tfunction _storeSelectorSetter(storeID, zip) {\r\n\t\t\treturn function() {\r\n\t\t\t\t_storeSelector(storeID, zip);\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tfunction _storeSelector(storeID, zip) {\r\n\t\t\t_self.selectStore(storeID, zip);\r\n\t\t}\r\n\t\t//init tooltip\r\n\t\tif(hasCSC) {\r\n\t\t\ttooltips(this.retailerslist);\r\n\t\t}\r\n\t},\r\n\t\r\n\t/**\r\n\t* store Retailer data\r\n\t*\r\n\t* @param {JSON} retailerData stores retailerData in object for use across the module\r\n\t*\r\n\t*/\r\n\tstoreRetailerData : function(retailerData) {\r\n\t\tthis.retailerData = retailerData;\r\n\t},\r\n\t\r\n\t/**\r\n\t* get Retailer data\r\n\t*\r\n\t* @param {JSON} zip zipcode\r\n\t*\r\n\t*/\r\n\tgetRetailerData : function(zip) {\r\n\t\tvar _self = this;\r\n\t\t_self.retailerData = null;\r\n\r\n\t\t_self.loader.classList.add('show');\r\n\t\tvar getURL = this.searchUrl + '?zip=' + zip;\r\n\t\tgetJSON(getURL).then(function(data) {\r\n\t\t\t_self.loader.classList.remove('show');\r\n\t\t\t_self.storeRetailerData(data);\r\n\t\t\t_self.buildRetailerList();\r\n\t\t}, function(status) {\r\n\t\t\t_self.loader.classList.remove('show');\r\n\t\t\t_self.storeRetailerData(status);\r\n\t\t});\r\n\t},\r\n\t\r\n\t/**\r\n\t* selects chosen store \r\n\t*\r\n\t* @param {String} Retailer ID\r\n\t*\r\n\t*/\r\n\tselectStore(rID, zip) {\r\n\t\tthis.pickupStore.value = rID;\r\n\t\tthis.zipStore.value = zip;\r\n\t\tvar allStores = this.retailerslist.querySelectorAll(SELECTORS.STORE_DETAILS);\r\n\t\t\r\n\t\tfor (var j = 0; j < allStores.length; j++) {\r\n\t\t\tallStores[j].classList.remove(CLASS_NAMES.SELECTED);\r\n\t\t}\r\n\t\tdocument.getElementById(rID).classList.add(CLASS_NAMES.SELECTED);\r\n\t}\r\n\r\n};\r\n\r\nexport default RetailList;","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport loadGoogleMapsAPI from 'load-google-maps-api';\r\nimport { Services } from '../../common/services';\r\n\r\nvar RetailLocation = {\r\n\r\n\t// variable to store latitude and longitude\r\n\tuserPosition : {\r\n\t\tlat: 42.3525575,\r\n\t\tlng : -71.0573034,\r\n\t\terr: false\r\n\t},\r\n\r\n\t//variable to store map\r\n\tmap : {},\r\n\r\n\t//variable to store markers\r\n\tmarkers : {\r\n\t\tretailLocations : {}\r\n\t},\r\n\r\n\t//variable to store infoWindow\r\n\tinfoWin : null,\r\n\r\n\t// variable to store map bounds\r\n\tbounds: null,\r\n\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\r\n\t\t// get lat/lng for retailer\r\n\t\tthis.userPosition.lat = parseFloat(this.element.getAttribute('data-lat'));\r\n\t\tthis.userPosition.lng = parseFloat(this.element.getAttribute('data-lng'));\r\n\r\n\t\t// Load Google Maps API\r\n\t\tthis.loadMap();\r\n\r\n\r\n\t},\r\n\r\n\t/**\r\n\t* Loads Google Maps API via npm-included function\r\n\t* writes a script tag to the document that calls Google API\r\n\t*\r\n\t*/\r\n\tloadMap : function() {\r\n\t\tvar gmapKey = this.element.dataset.key;\r\n\t\tloadGoogleMapsAPI({key: gmapKey}).then((googleMaps) => {\r\n\t\t\tthis.initMap();\r\n\t\t}).catch((err) => {\r\n\t\t\tconsole.error(err);\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* inits Google Map\r\n\t*\r\n\t*/\r\n\tinitMap: function() {\r\n\t\tvar _self = this;\r\n\t\t// set latitude, longitude and DOM element where map will be loaded\r\n\t\tvar mapcenter = _self.userPosition;\r\n\t\tvar mapcontainer = this.element.querySelector(SELECTORS.GOOGLE_MAP);\r\n\r\n\t\t// Create a new StyledMapType object, passing it an array of styles,\r\n\t\t// and the name to be displayed on the map type control.\r\n\t\tvar styledMapType = new google.maps.StyledMapType(\r\n\t\t[\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"1.16\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"4.11\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative\",\r\n\t\t\t\t\"elementType\": \"labels.text.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"0.00\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#4c4c4c\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative.country\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#00ff42\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-55\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#f2f2f2\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape\",\r\n\t\t\t\t\"elementType\": \"geometry\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.landcover\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-100\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-27\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"4.55\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"6.79\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.terrain\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"48\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"7.59\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.terrain\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-2\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-14\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"poi\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"5.20\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": -100\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": 45\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"39\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"38\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eed5cd\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"simplified\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.arterial\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eed5cd\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-1\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"43\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.arterial\",\r\n\t\t\t\t\"elementType\": \"labels.icon\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.local\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eed5cd\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"3\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit.line\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#fab89b\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-20\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-17\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"5.25\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit.line\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"23\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"water\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#46bcec\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"27\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"water\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eaf5fb\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t}\r\n\t\t],\r\n\t\t{name: 'Styled Map'});\r\n\r\n\t\t// Create map\r\n\t\tthis.map = new google.maps.Map(mapcontainer, {\r\n\t\t\tzoom: 12,\r\n\t\t\tcenter: mapcenter,\r\n\t\t\tmapTypeControl: false,\r\n\t\t\tscaleControl: false,\r\n\t\t\tstreetViewControl: false,\r\n\t\t\trotateControl: false,\r\n\t\t\tfullscreenControl: false,\r\n\t\t\tmapTypeControlOptions: {\r\n\t\t\t\tmapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// variable to store map object locally\r\n\t\tvar map = this.map;\r\n\r\n\t\t//Associate the styled map with the MapTypeId and set it to display.\r\n map.mapTypes.set('styled_map', styledMapType);\r\n map.setMapTypeId('styled_map');\r\n\r\n\t\t// Create variable to hold map center on load\r\n\t\tvar center = map.getCenter();\r\n\r\n\t\t// Listen for Google Map custom \"idle\" event and update center\r\n\t\tmap.addListener(EVENTS.GMAPS_IDLE, function() {\r\n\t\t\tcenter = map.getCenter();\r\n\t\t});\r\n\r\n\t\t// Add callback to resize service to center the map\r\n\t\tServices.ResizeService.addCallback(function(){\r\n\t\t\tmap.setCenter(center);\r\n\t\t});\r\n\r\n\t\t// set retailer marker\r\n\t\t_self.setRetailerMarker();\r\n\t},\r\n\r\n\t/**\r\n\t* set Retailer marker\r\n\t*\r\n\t*/\r\n\tsetRetailerMarker : function() {\r\n\t\tvar _self = this;\r\n\t\tvar retailerImg = MISC.MAP_MARKER;\r\n\t\tvar retailerPlace = new google.maps.LatLng(_self.userPosition);\r\n\r\n\t\t// Create marker for retailer location\r\n\t\t_self.markers.retailLocations[0] = new google.maps.Marker({\r\n\t\t\ticon: {\r\n\t\t\t\turl: retailerImg,\r\n\t\t\t\tsize: new google.maps.Size(64,64),\r\n\t\t\t\tanchor: new google.maps.Point(0, 32),\r\n\t\t\t\tscaledSize: new google.maps.Size(32,32)\r\n\t\t\t},\r\n\t\t\tposition: retailerPlace,\r\n\t\t\tmap: _self.map\r\n\t\t});\r\n\t}\r\n\r\n};\r\n\r\nexport default RetailLocation;\r\n","/**\r\n * checks for presence of protocol in URL string, returns new string with protocol\r\n * @param {String} url the url to check\r\n * @return {String} the checked/converted url\r\n */\r\nexport function urlProtocol(url) {\r\n if (!/^(f|ht)tps?:\\/\\//i.test(url)) {\r\n url = \"http://\" + url;\r\n }\r\n return url;\r\n}\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport loadGoogleMapsAPI from 'load-google-maps-api';\r\nimport { Services } from '../../common/services';\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { tabs } from '../../common/utils/tabs';\r\nimport { urlProtocol } from '../../common/utils/urlprotocol';\r\nimport { tooltips } from '../../common/utils/tooltips';\r\n\r\nvar RetailLocator = {\r\n\r\n\t// variable to store latitude and longitude\r\n\tuserPosition : {\r\n\t\tlat: 42.3525575,\r\n\t\tlng : -71.0573034,\r\n\t\terr: false\r\n\t},\r\n\r\n\t//variable to store map\r\n\tmap : {},\r\n\r\n\t//variable to store markers\r\n\tmarkers : {\r\n\t\tretailLocations : {}\r\n\t},\r\n\r\n\t//variable to store infoWindow\r\n\tinfoWin : null,\r\n\r\n\t//variable to store retailer data\r\n\tretailerData : null,\r\n\r\n\t// number of stores to load in each batch\r\n\tstoresBatch: 5,\r\n\r\n\t//variable to track stores loaded offset factor\r\n\tstoresMultiple: 1,\r\n\r\n\t// variable to set to enable listening for map drag\r\n\tlistenForDrag: false,\r\n\r\n\t// variable to store HTML string used in populating retailer list\r\n\tHTMLString: '',\r\n\r\n\t// variable to store map bounds\r\n\tbounds: null,\r\n\r\n\t// fallback content for example of closest retailer\r\n\tfbretailer : {\r\n\t\t\t\"__type\": \"Retailer\",\r\n\t\t\t\"Name\": \"Armstrong/Rockwell\",\r\n\t\t\t\"Address1\": \"150 Trumbull Street\",\r\n\t\t\t\"Address2\": \"Hartford, CT 06103\",\r\n\t\t\t\"City\": \"Hartford\",\r\n\t\t\t\"State\": \"CT\",\r\n\t\t\t\"Postal\": \"06103\",\r\n\t\t\t\"Country\": \"USA\",\r\n\t\t\t\"Phone\": \"(860) 246-9858\",\r\n\t\t\t\"Email\": \"info@Email.com\",\r\n\t\t\t\"Url\": \"www.Email.com\",\r\n\t\t\t\"ID\": \"00001239\",\r\n\t\t\t\"Latitude\": 41.77,\r\n\t\t\t\"Longitude\": -72.68,\r\n\t\t\t\"Distance\": 2,\r\n\t\t\t\"SSC\": false,\r\n\t\t\t\"HOFStore\": false,\r\n\t\t\t\"DetailUrl\": \"/locations/armstrongrockwell.aspx?brel=00001239\",\r\n\t\t\t\"IsPreferredStore\": false\r\n\t},\r\n\r\n\t// object to store user's preferred retailer\r\n\tpretailer : null,\r\n\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.retailerslist = element.querySelector(SELECTORS.RETAILERS_LIST);\r\n\t\tthis.refreshMap = element.querySelector(SELECTORS.REFRESH_MAP);\r\n\t\tthis.refreshButton = this.refreshMap.querySelector(SELECTORS.BUTTON);\r\n\t\tthis.retailerMessage = element.querySelector(SELECTORS.RETAILER_MESSAGE);\r\n\r\n\t\t// set up tabs functionality\r\n\t\ttabs(this.element);\r\n\t\t// Load Google Maps API\r\n\t\tthis.userPosition.lat = (this.element.dataset.lat) ? Number(this.element.dataset.lat) : this.userPosition.lat\r\n\t\tthis.userPosition.lng = (this.element.dataset.lng) ? Number(this.element.dataset.lng) : this.userPosition.lng\r\n\t\tthis.radius = this.element.dataset.radius;\r\n\t\tthis.csc = {\r\n\t\t\t\"cta\": this.element.dataset.csccta,\r\n\t\t\t\"message\": this.element.dataset.cscmessage\r\n\t\t}\r\n\t\tthis.labels = {\r\n\t\t\t\"callRetailer\": this.element.dataset.callRetailerText,\r\n\t\t\t\"emailRetailer\": this.element.dataset.emailRetailerText,\r\n\t\t\t\"getDirections\": this.element.dataset.getDirectionsText,\r\n\t\t\t\"setPreferredStore\": this.element.dataset.setPreferredStoreText,\r\n\t\t\t\"visitWebsite\": this.element.dataset.visitWebsiteText\r\n\t\t}\r\n\t\tthis.isLoggedIn = this.element.dataset.isLoggedIn === 'true';\r\n\t\tthis.setPreferredStoreUrl = this.element.dataset.setPreferredStoreUrl;\r\n\t\tthis.loadMap();\r\n\t},\r\n\r\n\t/**\r\n\t* Loads Google Maps API via npm-included function\r\n\t* writes a script tag to the document that calls Google API\r\n\t*\r\n\t*/\r\n\tloadMap : function() {\r\n\t\tvar gmapKey = this.element.dataset.key;\r\n\t\tloadGoogleMapsAPI({key: gmapKey, libraries: 'places'}).then((googleMaps) => {\r\n\t\t\tthis.initMap();\r\n\t\t}).catch((err) => {\r\n\t\t\tconsole.error(err);\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* inits Google Map\r\n\t*\r\n\t*/\r\n\tinitMap: function() {\r\n\t\t// set latitude, longitude and DOM element where map will be loaded\r\n\t\tvar mapcenter = {lat: this.userPosition.lat, lng: this.userPosition.lng};\r\n\t\tvar mapcontainer = this.element.querySelector(SELECTORS.GOOGLE_MAP);\r\n\t\tvar _self = this;\r\n\r\n\t\t// Create a new StyledMapType object, passing it an array of styles,\r\n\t\t// and the name to be displayed on the map type control.\r\n\t\tvar styledMapType = new google.maps.StyledMapType(\r\n\t\t[],\r\n\t\t{name: 'Styled Map'});\r\n\r\n\t\t// Create map\r\n\t\tthis.map = new google.maps.Map(mapcontainer, {\r\n\t\t\tzoom: 10,\r\n\t\t\tcenter: mapcenter,\r\n\t\t\tmapTypeControl: false,\r\n\t\t\tscaleControl: true,\r\n\t\t\tstreetViewControl: false,\r\n\t\t\trotateControl: false,\r\n\t\t\tfullscreenControl: false,\r\n\t\t\tmapTypeControlOptions: {\r\n\t\t\t\tmapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// variable to store map object locally\r\n\t\tvar map = this.map;\r\n\r\n\t\t//Associate the styled map with the MapTypeId and set it to display.\r\n map.mapTypes.set('styled_map', styledMapType);\r\n map.setMapTypeId('styled_map');\r\n\r\n\t\t//attempt geolocation\r\n\t\tthis.geolocate();\r\n\r\n\t\t// Create variable to hold map center on load\r\n\t\tvar center = map.getCenter();\r\n\r\n\t\t// Listen for Google Map custom \"idle\" event and update center\r\n\t\tmap.addListener(EVENTS.GMAPS_IDLE, function() {\r\n\t\t\tcenter = map.getCenter();\r\n\t\t});\r\n\r\n\t\t// Listen for Google Map custom \"dragend\" event and display refresh button\r\n\t\tmap.addListener(EVENTS.GMAPS_DRAGEND, function() {\r\n\t\t\tif(_self.listenForDrag) {\r\n\t\t\t\t_self.toggleRefreshOption();\r\n\t\t\t\t_self.listenForDrag = false;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// Add callback to resize service to center the map\r\n\t\tServices.ResizeService.addCallback(function(){\r\n\t\t\tmap.setCenter(center);\r\n\t\t});\r\n\r\n\t\t//create info window\r\n\t\tthis.createInfoWindow();\r\n\r\n\t\t//build search box\r\n\t\tthis.buildSearchBox();\r\n\r\n\t\t// create custom event to call when user clicks on link in map infowindow\r\n\t\twindow.callDealerPreference = new Event(EVENTS.INFOTRIGGER);\r\n\r\n\t\t// Add listener for our custom event\r\n\t\twindow.addEventListener(EVENTS.INFOTRIGGER, function() { _self.onInfoTrigger(_self);}, false);\r\n\r\n\t\t// Add listener for map refresh button\r\n\t\tthis.refreshButton.addEventListener(EVENTS.CLICK, function() { _self.resetAndReload();}, false);\r\n\t},\r\n\r\n\t/**\r\n\t* HTML5 Geolocation\r\n\t* tries to use HTML5 Geolocation, stores lat/long if so\r\n\t*\r\n\t*/\r\n\tgeolocate : function() {\r\n\t\tvar _self = this;\r\n\t\tif (navigator.geolocation) {\r\n\t\t\tnavigator.geolocation.getCurrentPosition(function(position) {\r\n\t\t\t\t_self.userPosition.lat = position.coords.latitude;\r\n\t\t\t\t_self.userPosition.lng = position.coords.longitude;\r\n\r\n\t\t\t\t// set center based on geolocated coordinates\r\n\t\t\t\t_self.map.setCenter({lat: _self.userPosition.lat, lng: _self.userPosition.lng});\r\n\r\n\r\n\r\n\t\t\t\t_self.markers.user.setPosition({lat: _self.userPosition.lat, lng: _self.userPosition.lng});\r\n\r\n\t\t\t\t// having moved map center, get retailers\r\n\t\t\t\t_self.getRetailerData({lat: _self.userPosition.lat, lng: _self.userPosition.lng});\r\n\r\n\t\t\t}, function() {\r\n\t\t\t\t// Geolocation failed for some other reason\r\n\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// Browser doesn't support Geolocation\r\n\r\n\t\t}\r\n\r\n\t\t// having determined map center, set geo marker, get retailers\r\n\t\t_self.createGeoMarker();\r\n\t\t_self.getRetailerData({lat: _self.map.getCenter().lat(), lng: _self.map.getCenter().lng()});\r\n\t},\r\n\r\n\t/**\r\n\t* create geolocation marker\r\n\t*\r\n\t*/\r\n\tcreateGeoMarker : function() {\r\n\t\tvar _self = this;\r\n\t\t// Create marker for user location\r\n\t\t_self.markers.user = new google.maps.Marker({\r\n\t\t\ticon: {\r\n\t\t\t\tpath: google.maps.SymbolPath.CIRCLE,\r\n\t\t\t\tscale: 5,\r\n\t\t\t\tfillColor: 'blue',\r\n\t\t\t\tfillOpacity: 0.8,\r\n\t\t\t\tstrokeColor: 'blue',\r\n\t\t\t\tstrokeOpacity: 0.8\r\n\t\t\t},\r\n\t\t\tposition: _self.map.getCenter(),\r\n\t\t\tmap: _self.map\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* create info window in Google map\r\n\t*\r\n\t*/\r\n\tcreateInfoWindow : function() {\r\n\t\tthis.infoWin = new google.maps.InfoWindow({map: this.map});\r\n\t\tthis.infoWin.close();\r\n\t},\r\n\r\n\t/**\r\n\t* populate Info Window\r\n\t*\r\n\t*/\r\n\tpopulateInfoWindow : function(retailer) {\r\n\t\tvar _self = this;\r\n\t\tgoogle.maps.event.addListener(_self.markers.retailLocations[retailer.ID],'click', function() {\r\n\t\t\t_self.infoWin.close();\r\n\t\t\t// as you update the CSS for retail list, you'll need to update this CSS otherwise the designs won't match\r\n\t\t\tvar CSSString = \"\";\r\n\t\t\tvar urlString = (retailer.Url && retailer.Url.length > 0) ? ''+_self.labels.visitWebsite+'' : '';\r\n\t\t\tvar emailString = (retailer.Email && retailer.Email.length > 0) ? ''+_self.labels.emailRetailer+'' : '';\r\n\t\t\tvar isPreferredStore = _self.pretailer && _self.pretailer.ID === retailer.ID;\r\n\t\t\tvar setPreferredStore = _self.isLoggedIn && !isPreferredStore ? ''+_self.labels.setPreferredStore+'' : '';\r\n\r\n\t\t\tvar hoursTempate = retailer.hours.reduce((acc, cur) => {\r\n\t\t\t\treturn acc += `${cur}`;\r\n\t\t\t}, '');\r\n\r\n\t\t\tvar HTMLString = '
';\r\n\t\t\t_self.infoWin.setContent(CSSString + HTMLString);\r\n\t\t\t_self.infoWin.open(_self.map, _self.markers.retailLocations[retailer.ID]);\r\n\t\t\twindow.openRetailer = retailer.ID;\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* link search input to Google map\r\n\t*\r\n\t*/\r\n\tbuildSearchBox : function() {\r\n\t\tvar _self = this;\r\n\t\tvar input = this.element.querySelector(SELECTORS.GOOGLE_PLACES);\r\n var autocomplete = new google.maps.places.Autocomplete(input);\r\n\r\n _self.enableEnterKey(input);\r\n\r\n // Bias the autocomplete results towards current map's viewport.\r\n\t\t_self.map.addListener(EVENTS.GMAPS_BOUNDSCHANGED, function() {\r\n\t\t\tautocomplete.setBounds(_self.map.getBounds());\r\n\t\t});\r\n\r\n autocomplete.addListener(EVENTS.GMAPS_PLACECHANGED, function() {\r\n\t\t\tvar place = autocomplete.getPlace();\r\n\r\n\t\t\tif (!place.geometry) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\t// recenter map at user's chosen coordinates\r\n\t\t\t_self.map.setCenter(place.geometry.location);\r\n\t\t\t_self.markers.user.setPosition(place.geometry.location);\r\n\r\n\t\t\t// having moved map center, get retailers\r\n\t\t\t_self.getRetailerData({lat: place.geometry.location.lat(), lng: place.geometry.location.lng()});\r\n\t\t});\r\n\t},\r\n\r\n\tenableEnterKey: function(input) {\r\n\r\n\t /* Store original event listener */\r\n\t const _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent\r\n\r\n\t const addEventListenerWrapper = (type, listener) => {\r\n\t if (type === \"keydown\") {\r\n\t /* Store existing listener function */\r\n\t const _listener = listener\r\n\t listener = (event) => {\r\n\t /* Simulate a 'down arrow' keypress if no address has been selected */\r\n\t const suggestion_selected = document.getElementsByClassName('pac-item-selected').length > 0\r\n\t if (event.which === 13 && !suggestion_selected) {\r\n\t const e = JSON.parse(JSON.stringify(event))\r\n\t e.which = 40\r\n\t e.keyCode = 40\r\n\t _listener.apply(input, [e])\r\n\t }\r\n\t _listener.apply(input, [event])\r\n\t }\r\n\t }\r\n\t _addEventListener.apply(input, [type, listener])\r\n\t }\r\n\r\n\t input.addEventListener = addEventListenerWrapper\r\n\t input.attachEvent = addEventListenerWrapper\r\n\t },\r\n\r\n\t/**\r\n\t* build Retailer list\r\n\t*\r\n\t*/\r\n\tbuildRetailerList: function() {\r\n\t\tvar _self = this;\r\n\t\tvar retailers = _self.retailerData;\r\n\t\tvar prID = null;\r\n\t\tvar hasCSC = false;\r\n\t\tvar retailerRadius = this.radius;\r\n\t\tif(typeof(retailers) !== 'undefined') {\r\n\t\t\tvar numRetailers = retailers.length;\r\n\t\t\t// Add new markers\r\n\t\t\tif(numRetailers > 0) {\r\n\t\t\t\t_self.HTMLString = '
';\r\n\t\t\t\tif(_self.pretailer !== null && _self.pretailer !== 'undefined') {\r\n\t\t\t\t\tthis.buildRetailerItem(_self.pretailer, true);\r\n\t\t\t\t\tprID = _self.pretailer.ID;\r\n\t\t\t\t}\r\n\t\t\t\t// the below line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\t// retailers[0].csc = true;\r\n\t\t\t\t// the above line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\tfor (var i = 0; i < numRetailers; i++) {\r\n\t\t\t\t var retailer = retailers[i];\r\n\t\t\t\t\tif(retailer.ID !== prID) {\r\n\t\t\t\t\t\tthis.buildRetailerItem(retailer, false);\r\n\t\t\t\t\t\tif(!hasCSC && retailer.csc === true) {\r\n\t\t\t\t\t\t\thasCSC = true;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tnumRetailers = Object.keys(retailers).length;\r\n\t\t\t\tretailerRadius = Math.ceil(parseInt(retailers[numRetailers - 1].Distance) / 100) * 100;\r\n\t\t\t\tif(retailerRadius <= this.radius) {\r\n\t\t\t\t\t_self.retailerMessage.innerHTML = 'Displaying '+numRetailers+' stores within ' + this.radius + ' miles.';\r\n\t\t\t\t} else {\r\n\t\t\t\t\t_self.retailerMessage.innerHTML = 'No stores found within ' + this.radius + ' miles. ' + 'Displaying closest stores.'\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t_self.fallbackRetailer();\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t_self.fallbackRetailer();\r\n\t\t}\r\n\r\n\t\t_self.HTMLString += '
';\r\n\t\tthis.retailerslist.innerHTML = _self.HTMLString;\r\n\r\n\t\t//create event listener for newly-created CTA\r\n\t\tvar preferredLinks = this.retailerslist.querySelectorAll(SELECTORS.SET_PREFERRED);\r\n\r\n\t\tfor (var j = 0; j < preferredLinks.length; j++) {\r\n\t\t\tpreferredLinks[j].addEventListener(EVENTS.CLICK, _self.infoTriggerHandler());\r\n\t\t}\r\n\r\n\t\t//init tooltip\r\n\t\tif(hasCSC) {\r\n\t\t\ttooltips(this.retailerslist);\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n\t* build Retailer item\r\n\t*\r\n\t*/\r\n\tbuildRetailerItem: function(retailer, preferred) {\r\n\t\t// FOR CSC ICON: you will need to add the classname that gets created in scss/base/icons when you run gulp compile-icons after adding the SVG for the CSC icon to the assets/icons folder. Add that class to .hof-tooltip-link\r\n\t\tvar CSC = typeof(retailer.csc) !== 'undefined' && retailer.csc === true ? '\\\r\n\t\t\t' + this.csc.cta + '\\\r\n\t\t\t' + this.csc.message + '\\\r\n\t\t\t' : '';\r\n\t\tvar retailerClass = preferred ? 'class=\"preferred-retailer\"' : '';\r\n\t\tvar urlString = (retailer.Url && retailer.Url.length > 0) ? ''+this.labels.visitWebsite+'' : '';\r\n\t\tvar phoneString = (retailer.Phone && retailer.Phone.length > 0) ?''+retailer.Phone+'': '';\r\n\t\tvar emailString = (retailer.Email && retailer.Email.length > 0) ? ''+this.labels.emailRetailer+'' : '';\r\n\t\tvar setPreferred = (this.isLoggedIn && !preferred) ? ''+this.labels.setPreferredStore+'': '';\r\n\r\n\t\tvar hourOpen = retailer.hoursopen ? ''+ retailer.hoursopen+'' : '';\r\n\t\tvar hours = (retailer.hours && retailer.hours.length) ?\r\n\t\t\tretailer.hours.reduce((acc, cur) => {\r\n\t\t\t\treturn acc += `${cur}`;\r\n\t\t\t}, '')\r\n\t\t\t:\r\n\t\t\t'';\r\n\t\tvar hoursTemplate = ''+ hourOpen + hours + '';\r\n\r\n\t\tthis.HTMLString += '