{"version":3,"sources":["block-deals-group.js"],"names":["BlockDealsGroup","constructor","container","apiEndpoint","options","this","Object","assign","blocksContainer","carouselContainer","modalsContainer","swiper","modal","infoIcon","modalClose","title","document","querySelector","swiperElem","modals","querySelectorAll","modalCloseIcons","infoIcons","geoData","localStorage","getItem","init","fetch","then","response","json","dealsGroup","displayDealItems","classList","remove","dealsToRender","getDealsToRender","renderBlockItems","renderCarouselItems","initSwiper","renderModals","setModalEvents","now","getCurrentAustralianTime","geo","JSON","parse","filteredItems","conditionalDeals","filter","item","Date","startDate","endDate","countryCodes","some","code","countryCode","length","deals","defaultDeals","localeString","toLocaleString","timeZone","items","let","html","forEach","id","content","renderModalButton","innerHTML","linkUrl","linkText","imageUrl","imageAlt","renderModalIcon","heading","subHeading","renderPrimaryLink","description","primaryLinkUrl","innerText","primaryLinkText","window","DSTAPI","country","Swiper","direction","loop","slidesPerView","centeredSlides","spaceBetween","grabCursor","pagination","el","clickable","breakpoints","998","1400","update","icon","addEventListener","e","stopPropagation","dataset","modalId","modalOpen","add"],"mappings":"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","file":"block-deals-group.min.js","sourcesContent":["export default class BlockDealsGroup {\r\n\r\n    constructor(container, apiEndpoint, options) {\r\n        const defaultOptions = {\r\n            blocksContainer: '.blocks-container',\r\n            carouselContainer: '.carousel-container .swiper-wrapper',\r\n            modalsContainer: '.modals-container',\r\n            swiper: '.deals-list-swiper',\r\n            modal: '.deal-modal',\r\n            infoIcon: '.icon-info',\r\n            modalClose: '.icon-modal-close',\r\n            title: '.title-container .title'\r\n        };\r\n\r\n        this.options = Object.assign({}, defaultOptions, options);\r\n\r\n        this.apiEndpoint = apiEndpoint;\r\n\r\n        this.container = document.querySelector(container);\r\n        this.blocksContainer = this.container.querySelector(this.options.blocksContainer);\r\n        this.carouselContainer = this.container.querySelector(this.options.carouselContainer);\r\n        this.modalsContainer = this.container.querySelector(this.options.modalsContainer);\r\n\r\n        this.swiperElem = this.container.querySelector(this.options.swiper);\r\n        this.modals = this.container.querySelectorAll(this.options.modal);\r\n        this.modalCloseIcons = this.container.querySelectorAll(this.options.modalClose);\r\n        this.infoIcons = this.container.querySelectorAll(this.options.infoIcon);\r\n        this.swiper = null; \r\n\r\n        this.title = this.container.querySelector(this.options.title);\r\n        \r\n        this.geoData = localStorage.getItem('geo');\r\n\r\n        this.init();\r\n    }\r\n\r\n    init(){\r\n\r\n        fetch(this.apiEndpoint)\r\n            .then(response => response.json())\r\n            .then(dealsGroup =>  {\r\n                                \r\n                this.displayDealItems(dealsGroup);\r\n\r\n                this.container.classList.remove('loading');\r\n            \r\n            });\r\n\r\n    }\r\n\r\n    displayDealItems(dealsGroup){\r\n    \r\n        const dealsToRender = this.getDealsToRender(dealsGroup);\r\n\r\n        this.renderBlockItems(dealsToRender);\r\n\r\n        if(this.carouselContainer !== null){            \r\n            this.renderCarouselItems(dealsToRender);        \r\n            this.initSwiper();\r\n        }\r\n\r\n        this.renderModals(dealsToRender);\r\n        this.setModalEvents();\r\n\r\n        \r\n    }\r\n\r\n    getDealsToRender(dealsGroup){\r\n\r\n        const now = this.getCurrentAustralianTime();\r\n        const geo = this.geoData !== null ? JSON.parse(this.geoData) : null;\r\n\r\n        const filteredItems = dealsGroup.conditionalDeals.filter(item=> {\r\n\r\n            if(new Date(item.startDate) > now)\r\n                return false;\r\n\r\n            if(new Date(item.endDate) < now)\r\n                return false;\r\n\r\n            if(geo !== null)\r\n            {\r\n                if(!item.countryCodes.some(code => code == geo.countryCode))                \r\n                    return false;\r\n\r\n                //TODO: No region data from https://where-am-i.teeg.cloud/?geo=true\r\n            }\r\n            \r\n            return true;\r\n\r\n        });\r\n\r\n        if (filteredItems.length > 0)\r\n            return filteredItems[0].deals;\r\n\r\n        return dealsGroup.defaultDeals;\r\n    }\r\n\r\n    getCurrentAustralianTime() {\r\n\r\n        const TIMEZONE = 'Australia/Sydney';\r\n\r\n        const currentDateTime = new Date();\r\n\r\n        const localeString = currentDateTime.toLocaleString(\"en-US\", {timeZone: TIMEZONE});\r\n\r\n        return new Date(localeString);   \r\n    }\r\n\r\n    renderModals(items){\r\n\r\n        let html = '';\r\n\r\n        items.filter(item=> item.modal !== null)\r\n            .forEach(item => {\r\n\r\n                const modal = item.modal;\r\n\r\n                html += ` <div class=\"deal-modal\" data-modal-id=\"modal-${item.id}\">\r\n                                <div class=\"deal-modal-details\">\r\n                                    <svg class=\"close icon-modal-close\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\r\n                                        <path d=\"M24,0C10.75,0,0,10.75,0,24s10.75,24,24,24,24-10.75,24-24C47.99,10.75,37.25,0,24,0m8.7,30.07c.73,.73,.73,1.9,0,2.63-.73,.73-1.9,.73-2.63,0h0l-6.07-6.09-6.07,6.09c-.73,.73-1.9,.73-2.63,0-.73-.73-.73-1.9,0-2.63h0l6.09-6.07-6.09-6.07c-.65-.8-.53-1.97,.25-2.63,.69-.58,1.69-.58,2.38,0l6.07,6.09,6.07-6.09c.8-.65,1.97-.53,2.63,.25,.58,.69,.58,1.69,0,2.38l-6.09,6.07,6.09,6.07Z\" fill=\"#ffffff\" />\r\n                                    </svg>\r\n                                    <div class=\"details-container\">\r\n                                        <h4>${modal.title}</h4>\r\n                                        <p>${modal.content}</p>\r\n                                        ${this.renderModalButton(modal)}                                \r\n                                    </div>\r\n                                </div>\r\n                            </div>`;\r\n            });\r\n\r\n       this.modalsContainer.innerHTML = html;\r\n\r\n    };\r\n\r\n    renderModalButton(item){\r\n\r\n        if(item.linkUrl === null || item.linkUrl === '')\r\n            return '';\r\n\r\n        return `<a class=\"btn btn-sm btn-modal-cta\" href=\"${item.linkUrl}\">\r\n                    ${item.linkText}\r\n                </a>`;\r\n    }\r\n\r\n    renderCarouselItems(items){\r\n\r\n        let html = '';\r\n\r\n        items.forEach(item => {\r\n\r\n            html+= ` <div class=\"swiper-slide\">\r\n                        <div class=\"image-container\">\r\n                            <picture>\r\n                                <img class=\"background-image\" srcset=\"${item.imageUrl}\" alt=\"${item.imageAlt}\" />\r\n                            </picture>\r\n                            <div class=\"gradient\"></div>\r\n                        </div>\r\n                        ${this.renderModalIcon(item)}                        \r\n                        <div class=\"details-container\">\r\n                            <h3 class=\"heading\">${item.heading}</h3>\r\n                            <h4 class=\"subheading\">${item.subHeading}</h4>\r\n                            ${this.renderPrimaryLink(item)}\r\n                        </div>\r\n                        <div class=\"spare-background\"></div>\r\n                    </div>`;\r\n\r\n        });\r\n\r\n        this.carouselContainer.innerHTML = html;\r\n    }\r\n\r\n    \r\n    renderBlockItems(items){\r\n\r\n        let html = '';\r\n\r\n        items.forEach(item=> {\r\n\r\n            html+=`<div class=\"item\" style=\"background-image: url('${item.imageUrl}');\">\r\n                    <div class=\"gradient\"></div>\r\n                        <div class=\"spare-background\"></div>\r\n                        <div class=\"hover-details\">\r\n                            <div class=\"hover-details-container\">\r\n                                <div class=\"details-container\">\r\n                                    <h3 class=\"heading\">${item.heading}</h3>\r\n                                <h4 class=\"subheading\">${item.subHeading}</h4>\r\n                                    <div class=\"divider\"></div>\r\n                                    <p class=\"description\">${item.description}</p>\r\n                                </div>\r\n                                ${this.renderModalIcon(item)}  \r\n                                ${this.renderPrimaryLink(item)}\r\n                            </div>\r\n                        </div>\r\n                    </div>`\r\n\r\n        });\r\n\r\n        this.blocksContainer.innerHTML = html;\r\n\r\n    }\r\n\r\n    renderModalIcon(item){\r\n\r\n        if(item.modal === null){\r\n            return '';\r\n        }\r\n\r\n        return `<svg class=\"icon-info\" data-modal-open=\"modal-${item.id}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\r\n                    <path d=\"M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16,16-7.16,16-16C32,7.17,24.83,0,16,0m-.31,7.39c1.02,0,1.85,.83,1.85,1.85s-.83,1.85-1.85,1.85-1.85-.83-1.85-1.85h0c0-1.02,.83-1.84,1.85-1.85m1.54,17.23h-1.23c-.68,0-1.23-.55-1.23-1.23v-7.39c-.68,0-1.23-.55-1.23-1.23s.55-1.23,1.23-1.23h1.23c.68,0,1.23,.55,1.23,1.23v7.38c.68,0,1.23,.55,1.23,1.23s-.55,1.23-1.23,1.23\" fill=\"#fff\"/>\r\n                </svg>`;\r\n    }\r\n\r\n    renderPrimaryLink(item){\r\n\r\n        if(item.primaryLinkUrl === null)\r\n            return '';\r\n\r\n        return `<a data-dstapi-click\r\n                    data-dstapi-event=\"card_interaction\"\r\n                    data-dstapi-header=\"${this.title.innerText}\" \r\n                    data-dstapi-cta_text=\"${item.primaryLinkText}\"\r\n                    data-dstapi-title=\"${item.heading}\"\r\n                    data-dstapi-custom_country=\"${window.DSTAPI.country}\"\r\n                    title=\"${item.heading}, ${item.primaryLinkText}\"\r\n                    aria-label=\"${item.heading}, ${item.primaryLinkText}\"\r\n                    class=\"btn btn-sm btn-cta\" \r\n                    href=\"${item.primaryLinkUrl}\" \r\n                    target=\"_self\">\r\n                    ${item.primaryLinkText}\r\n                </a>`;\r\n    }\r\n\r\n\r\n    initSwiper() {\r\n        this.swiper = new Swiper(this.swiperElem, {\r\n            direction: 'horizontal',\r\n            loop: true,\r\n            slidesPerView: 1.15,\r\n            centeredSlides: true,\r\n            spaceBetween: 15,\r\n            grabCursor: true,\r\n            pagination: {\r\n                el: `.swiper-pagination`,\r\n                clickable: true\r\n            },\r\n            breakpoints: {\r\n                998: {\r\n                    slidesPerView: 3,\r\n                    centeredSlides: false,\r\n                    spaceBetween: 30\r\n                },\r\n                1400: {\r\n                    slidesPerView: 5,\r\n                    centeredSlides: false,\r\n                    spaceBetween: 30\r\n                }\r\n            }\r\n        });\r\n\r\n        this.swiper.update();\r\n    }\r\n\r\n    setModalEvents() {\r\n\r\n        this.modals = this.modalsContainer.querySelectorAll(this.options.modal);   \r\n        \r\n        this.container\r\n            .querySelectorAll(this.options.infoIcon)\r\n            .forEach(icon => {\r\n                icon.addEventListener('click', e => {\r\n                    e.stopPropagation()\r\n                    this.modals.forEach(modal => {\r\n                        if (modal.dataset.modalId === icon.dataset.modalOpen) {\r\n                            modal.classList.add('active')\r\n                        }\r\n                    });           \r\n                });\r\n            });\r\n\r\n        this.container\r\n            .querySelectorAll(this.options.modalClose)\r\n            .forEach(icon => {\r\n                icon.addEventListener('click', e => {\r\n                    e.stopPropagation()\r\n                    this.modals.forEach(modal => { \r\n                        modal.classList.remove('active')\r\n                    })\r\n                })\r\n            });\r\n        \r\n    }\r\n}"]}