wickes-css2 2.109.0-test.1 → 2.110.0

package/src/js/components/general/accordion.js

@@ -3,10 +3,18 @@ Wick.Accordion = (function () {
     var accordionRoot = '.accordion',
         accordionToggler = '.accordion__header',
         accordionIcon = '.accordion__action',
+        accordionBottomClose = '.opening-times-accordion__close',
         accordionContent = '.accordion__content',
         collapsed = 'accordion_collapsed',
         $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
 
+    function toggleAccordion($acc) {
+        if (!$acc.length) return;
+
+        $acc.toggleClass(collapsed);
+        $acc.children(accordionContent).stop(true, true).slideToggle(200);
+    }
+
     function getTriggerSelector($acc) {
         return $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler;
     }
@@ -20,8 +28,19 @@ Wick.Accordion = (function () {
 
         if (!$trigger.is(triggerSel)) return;
 
-        $acc.toggleClass(collapsed);
-        $acc.children(accordionContent).stop(true, true).slideToggle(200);
+        toggleAccordion($acc);
+    }
+
+    function onAccordionBottomCloseClick(e) {
+        e.preventDefault();
+
+        var $trigger = $(e.currentTarget);
+        var $acc = $trigger.closest(accordionRoot);
+        if (!$acc.length) return;
+
+        if (!$acc.hasClass(collapsed)) {
+            toggleAccordion($acc);
+        }
     }
 
     function init() {
@@ -29,6 +48,10 @@ Wick.Accordion = (function () {
             .off('click.wickAccordion', accordionToggler + ',' + accordionIcon)
             .on('click.wickAccordion', accordionToggler + ',' + accordionIcon, onAccordionClick);
 
+        $(document)
+            .off('click.wickAccordionClose', accordionBottomClose)
+            .on('click.wickAccordionClose', accordionBottomClose, onAccordionBottomCloseClick);
+
         $asideAccordion.off('click.wickAsideAccordion').on('click.wickAsideAccordion', function () {
             if (window.matchMedia('(min-width: 992px)').matches) {
                 if ($(this).text().toLowerCase() !== 'useful links') {

package/src/js/emulation/banner-placement-manager.js

@@ -1,53 +1,254 @@
 // Simulate prompt for input
-function getInputs() {
-  const productBannerPositions = prompt("Enter Product Banner Positions:", "2") || "";
-  const sponsorProductPositions = prompt("Enter Sponsor Product Positions (comma-separated):", "6,7,8") || "";
-  const sponsorBannerPositions = prompt("Enter Sponsor Banner Positions:", "10") || "";
 
-  return {
-    productBannerPositions: productBannerPositions ? productBannerPositions.split(",").map(Number) : [],
-    sponsorProductPositions: sponsorProductPositions ? sponsorProductPositions.split(",").map(Number) : [],
-    sponsorBannerPositions: sponsorBannerPositions ? sponsorBannerPositions.split(",").map(Number) : [],
-  };
+function parseSlots(value) {
+    if (!value) {
+        return [];
+    }
+
+    return String(value)
+        .split(',')
+        .map((item) => parseInt(item.trim(), 10))
+        .filter((item) => Number.isInteger(item) && item >= 0);
+}
+
+function isBloomreachDisabled(slots) {
+    return !slots.length || slots.every((s) => s === 0);
+}
+
+function toggleHybrisProductBanners(inputs) {
+    const banners = document.querySelectorAll('.card-product-banner');
+    const disabled = isBloomreachDisabled(inputs.bloomreachSlots);
+
+    banners.forEach((banner) => {
+        if (disabled) {
+            banner.classList.remove('d-none');
+            banner.classList.remove('card-product-banner--inactive');
+        } else {
+            banner.classList.add('d-none');
+            banner.classList.add('card-product-banner--inactive');
+        }
+    });
 }
 
 function getPositionAttr() {
-  const isMobile = Wick.BannerPlacementManager.isMobileResolution();
-  return isMobile
-    ? 'data-mobile-position'
-    : 'data-desktop-position';
+    const isMobile = Wick.BannerPlacementManager.isMobileResolution();
+
+    return isMobile ? 'data-mobile-position' : 'data-desktop-position';
+}
+
+function setUnifiedPosition(el, slot) {
+    el.setAttribute('data-desktop-position', String(slot));
+    el.setAttribute('data-mobile-position', String(slot));
+}
+
+function hasLegacyBanners() {
+    return Boolean(
+        document.querySelector('.card-product-banner') ||
+        document.querySelector('.card-sponsor-product') ||
+        document.querySelector('.card-sponsor-banner')
+    );
+}
+
+function getInputs() {
+    const hasLegacy = hasLegacyBanners();
+
+    const bloomreachSlots = parseSlots(
+        prompt('Enter Bloomreach Banner Slots (comma-separated):', '3') || ''
+    );
+
+    if (!hasLegacy) {
+        return {
+            bloomreachSlots,
+            sponsorProductPositions: [],
+            sponsorBannerPositions: [],
+            productBannerPositions: [],
+        };
+    }
+
+    const productBannerPositions =
+        prompt('Enter Product Banner Positions (comma-separated):', '2') || '';
+
+    const sponsorProductPositions =
+        prompt('Enter Sponsor Product Positions (comma-separated):', '6,7,8') || '';
+
+    const sponsorBannerPositions =
+        prompt('Enter Sponsor Banner Positions (comma-separated):', '10') || '';
+
+    return {
+        productBannerPositions: parseSlots(productBannerPositions),
+        sponsorProductPositions: parseSlots(sponsorProductPositions),
+        sponsorBannerPositions: parseSlots(sponsorBannerPositions),
+        bloomreachSlots,
+    };
+}
+
+function updateBannerPositions(selector, positions) {
+    if (!positions?.length) {
+        return;
+    }
+
+    const positionAttr = getPositionAttr();
+    const elements = document.querySelectorAll(selector);
+
+    elements.forEach((el, index) => {
+        if (positions[index] !== undefined) {
+            el.setAttribute(positionAttr, String(positions[index]));
+        }
+    });
 }
 
 function updatePositions(inputs) {
-  const productBannerElements = document.querySelectorAll(".card-product-banner");
-  productBannerElements.forEach((el, index) => {
-    if (inputs.productBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.productBannerPositions[index]);
+    updateBannerPositions('.card-product-banner', inputs.productBannerPositions);
+    updateBannerPositions('.card-sponsor-product', inputs.sponsorProductPositions);
+    updateBannerPositions('.card-sponsor-banner', inputs.sponsorBannerPositions);
+}
+
+function patchBannerPlacementManagerForBloomreachEmulation(inputs) {
+    const manager = window.Wick?.BannerPlacementManager;
+
+    if (!manager || manager.__bloomreachEmulationPatched) {
+        return;
     }
-  });
 
-  const sponsorProductElements = document.querySelectorAll(".card-sponsor-product");
-  sponsorProductElements.forEach((el, index) => {
-    if (inputs.sponsorProductPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorProductPositions[index]);
+    const shouldDisableProductBanners = Boolean(inputs.bloomreachSlots?.length);
+
+    manager.el.bloomreachBanners = '.card-bloomreach-media-banner';
+
+    manager.el.allBanners = shouldDisableProductBanners
+        ? '.card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product'
+        : '.card-product-banner, .card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product';
+
+    manager.el.allListSlots = shouldDisableProductBanners
+        ? '.product-card, .card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product'
+        : '.product-card, .card-product-banner, .card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product';
+
+    manager.classes.bloomreachBanners = 'card-bloomreach-media-banner';
+
+    manager.getListSlots = function () {
+        return $(manager.el.productsWrap)
+            .children(manager.el.allListSlots)
+            .filter(function () {
+                if (
+                    $(this).hasClass(manager.classes.productBanners) ||
+                    $(this).hasClass(manager.classes.bloomreachBanners)
+                ) {
+                    const position = manager.getBannerPosition(this);
+                    const productsCount = manager.getListLength();
+
+                    return position <= productsCount;
+                }
+
+                return true;
+            });
+    };
+
+    manager.arrangeBannersInRightOrder = function () {
+        const $allBanners = $(manager.el.allBanners);
+
+        function getSameSlotInsertionOrder(el) {
+            if ($(el).hasClass(manager.classes.bloomreachBanners)) {
+                return 0;
+            }
+
+            if ($(el).hasClass(manager.classes.sponsorBanners)) {
+                return 1;
+            }
+
+            if ($(el).hasClass(manager.classes.sponsorProducts)) {
+                return 2;
+            }
+
+            if ($(el).hasClass(manager.classes.productBanners)) {
+                return 3;
+            }
+
+            return 4;
+        }
+
+        $allBanners
+            .sort((a, b) => {
+                const positionA = manager.getBannerPosition(a);
+                const positionB = manager.getBannerPosition(b);
+
+                if (positionA !== positionB) {
+                    return positionA - positionB;
+                }
+
+                return getSameSlotInsertionOrder(a) - getSameSlotInsertionOrder(b);
+            })
+            .appendTo(manager.el.productsWrap);
+    };
+
+    manager.__bloomreachEmulationPatched = true;
+}
+
+function rebuildBloomreachBannersForEmulation(inputs) {
+    const slots = inputs.bloomreachSlots || [];
+    const productsWrap = document.querySelector('.products-list.products-list-v2');
+
+    if (!productsWrap) {
+        return;
+    }
+
+    const existingBanners = document.querySelectorAll('.card-bloomreach-media-banner');
+
+    if (isBloomreachDisabled(slots)) {
+        existingBanners.forEach((banner) => banner.remove());
+        return;
     }
-  });
 
-  const sponsorBannerElements = document.querySelectorAll(".card-sponsor-banner");
-  sponsorBannerElements.forEach((el, index) => {
-    if (inputs.sponsorBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorBannerPositions[index]);
+    if (!existingBanners.length) {
+        return;
     }
-  });
+
+    const template = existingBanners[0].cloneNode(true);
+
+    existingBanners.forEach((banner) => banner.remove());
+
+    const fragment = document.createDocumentFragment();
+
+    slots.forEach((slot) => {
+        if (slot === 0) return;
+
+        const node = template.cloneNode(true);
+
+        node.removeAttribute('data-slots');
+        setUnifiedPosition(node, slot);
+
+        fragment.appendChild(node);
+    });
+
+    productsWrap.appendChild(fragment);
 }
 
-function init() {
-  const inputs = getInputs();
-  updatePositions(inputs);
+function applyBloomreachEmulation() {
+    const inputs = getInputs();
+
+    updatePositions(inputs);
+
+    const isDisabled = isBloomreachDisabled(inputs.bloomreachSlots);
+
+    toggleHybrisProductBanners(inputs);
+
+    if (!isDisabled) {
+        patchBannerPlacementManagerForBloomreachEmulation(inputs);
+    }
+
+    rebuildBloomreachBannersForEmulation(inputs);
+
+    if (
+        window.Wick &&
+        Wick.BannerPlacementManager &&
+        typeof Wick.BannerPlacementManager.checkProductsInColumn === 'function'
+    ) {
+        Wick.BannerPlacementManager.checkProductsInColumn();
+    }
 }
 
 $(document).ready(function () {
-  if ($('.retail-media .products-list.products-list-v2').length) {
-    setTimeout(() => init(), 100)
-  }
+    if ($('.products-list.products-list-v2').length) {
+        setTimeout(() => {
+            applyBloomreachEmulation();
+        }, 100);
+    }
 });

package/src/js/emulation/checkout-delivery-details.js

@@ -1,35 +1,38 @@
 var Wick = Wick || {};
 Wick.DeliveryDetails = (function () {
-  var $page = $('.page_checkout-delivery-details');
+    var $page = $('.page_checkout-delivery-details');
 
-  function bindEvents () {
-    var dateAlert;
+    function bindEvents() {
+        var dateAlert;
 
-    $page.find('.btn-payment-details, .delivery-details__payment-details, .delivery-details__payment-details_mobile').on('click', function () {
+        $page
+            .find(
+                '.btn-payment-details, .delivery-details__payment-details, .delivery-details__payment-details_mobile'
+            )
+            .on('click', function () {
+                if (navigator.userAgent.match(/TradeProMobile_Android|DIYMobile_Android/i)) {
+                    document.body.scrollTop = 0;
+                    document.documentElement.scrollTop = 0;
+                }
 
-      if (navigator.userAgent.match(/TradeProMobile_Android|DIYMobile_Android/i)) {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
-      }
+                if (!Wick.DateSelection.isDateSelected()) {
+                    dateAlert = Wick.Notification.show({
+                        text: 'Sorry, please select a delivery date and/or time',
+                        container: '.checkout-heading',
+                        type: 'error',
+                    });
+                    return false;
+                }
+            });
 
-      if (!Wick.DateSelection.isDateSelected()){
-        dateAlert = Wick.Notification.show({
-          text: 'Sorry, please select a delivery date and/or time',
-          container: '.checkout-heading',
-          type: 'error'
+        $('.date-selection').on('selected', function () {
+            dateAlert && dateAlert.hide();
         });
-        return false;
-      }
-    });
+    }
 
-    $('.date-selection').on('selected', function(){
-      dateAlert && dateAlert.hide();
-    });
-  }
+    if (!$page.length) {
+        return;
+    }
 
-  if (!$page.length){
-    return;
-  }
-
-  bindEvents();
+    bindEvents();
 })();

package/src/js/emulation/custom-slider-emulation.js

@@ -3,7 +3,7 @@ function simulateHybrisSendingHtml() {
     const event = new CustomEvent('productAddedToCart', {
         detail: { html: htmlFromHybris },
     });
-    document.dispatchEvent(event);
+    window.dispatchEvent(event);
 }
 
 function bindResolveEvent(events) {

package/src/js/emulation/date-selection.js

@@ -1,32 +1,144 @@
-var Wick = Wick || {};
-Wick.DateSelection = (function(){
-  var $self = $('.date-selection'),
-    cell = '.calendar__cell_cnt',
-    selectedCell = 'calendar__cell_selected',
-    isSelected = 'date-selection_selected',
-    isDateSelected = false;
-
-  var selectTimeSlot = function(e){
-    $(cell).removeClass(selectedCell);
-    $(e.target).addClass(selectedCell);
-    $self.addClass(isSelected);
+const DS_EL = {
+    cell: '.calendar__cell_cnt',
+    dateSelection: '.date-selection',
+    loader: '.rapid-loader',
+    title: '.delivery-btn .title',
+    subtitle: '.delivery-btn .subtitle',
+    infoIcon: '.rapid-info-icon',
+    image: '.delivery-btn__image',
+};
+
+const DS_CLASSES = {
+    selectedCell: 'calendar__cell_selected',
+    isSelected: 'date-selection_selected',
+    rapidCell: 'calendar__cell_rapid',
+    hidden: 'd-none',
+};
+
+let rapidLoaderShown = false;
+let isDateSelected = false;
+
+function generateRapidEstimate() {
+    const scenario = Math.floor(Math.random() * 4);
+
+    switch (scenario) {
+        case 0: {
+            const mins = Math.floor(Math.random() * 59) + 1;
+            const padded = String(mins).padStart(2, '0');
+            const word = mins === 1 ? 'minute' : 'minutes';
+            return `Delivered in as little as <br>${padded} ${word} for &pound;10.00`;
+        }
+        case 1: {
+            const mins = Math.floor(Math.random() * 60);
+            const padded = String(mins).padStart(2, '0');
+            const word = mins === 1 ? 'minute' : 'minutes';
+            const minutePart = mins === 0 ? '00 minutes' : `${padded} ${word}`;
+            return `Delivered in as little as <br>1 hour ${minutePart} for &pound;10.00`;
+        }
+        case 2: {
+            const mins = Math.floor(Math.random() * 60);
+            const padded = String(mins).padStart(2, '0');
+            const word = mins === 1 ? 'minute' : 'minutes';
+            const minutePart = mins === 0 ? '00 minutes' : `${padded} ${word}`;
+            return `Delivered in as little as <br>2 hours ${minutePart} for &pound;10.00`;
+        }
+        default:
+            return null;
+    }
+}
+
+function updateDeliveryInfo() {
+    const $subtitle = $(DS_EL.subtitle);
+    const $infoIcon = $subtitle.find(DS_EL.infoIcon).detach();
+    const estimate = generateRapidEstimate();
+
+    if (estimate) {
+        $subtitle.html(estimate);
+        $infoIcon.removeClass(DS_CLASSES.hidden);
+    } else {
+        $subtitle.html('Delivery within 3 hours for <b>&pound;10.00');
+        $infoIcon.addClass(DS_CLASSES.hidden);
+    }
+
+    $subtitle.append($infoIcon);
+    $infoIcon.filter('[data-toggle="tooltip"]').tooltip();
+}
+
+function showRapidLoader() {
+    const $self = $(DS_EL.dateSelection);
+    const $loader = $(DS_EL.loader);
+    $loader.removeClass(DS_CLASSES.hidden);
+
+    setTimeout(() => {
+        $loader.addClass(DS_CLASSES.hidden);
+        $self.addClass(DS_CLASSES.isSelected);
+        updateRapidInfo();
+    }, 3000);
+}
+
+function updateNonRapidInfo() {
+    const $title = $(DS_EL.title);
+    const $subtitle = $(DS_EL.subtitle);
+    const $infoIcon = $subtitle.find(DS_EL.infoIcon).detach();
+    const $image = $(DS_EL.image);
+
+    $title.text('Next or Named day delivery');
+    $subtitle.html('Delivery between 7am - 7pm for &pound;12.00');
+    $infoIcon.addClass(DS_CLASSES.hidden);
+    $subtitle.append($infoIcon);
+    $image.addClass(DS_CLASSES.hidden);
+}
+
+function updateRapidInfo() {
+    const $title = $(DS_EL.title);
+    const $image = $(DS_EL.image);
+
+    $title.text('Rapid delivery');
+    $image.removeClass(DS_CLASSES.hidden);
+    updateDeliveryInfo();
+}
+
+function selectTimeSlot(e) {
+    const $self = $(DS_EL.dateSelection);
+    const $cell = $(e.target).closest(DS_EL.cell);
+    const isRapid = $cell.hasClass(DS_CLASSES.rapidCell);
+
+    $(DS_EL.cell).removeClass(DS_CLASSES.selectedCell);
+    $cell.addClass(DS_CLASSES.selectedCell);
     $self.trigger('selected');
     isDateSelected = true;
-  };
 
-  var init = function () {
+    if (isRapid) {
+        if (!rapidLoaderShown) {
+            rapidLoaderShown = true;
+            showRapidLoader();
+            return;
+        } else {
+            $self.addClass(DS_CLASSES.isSelected);
+            updateRapidInfo();
+        }
+    } else {
+        $self.addClass(DS_CLASSES.isSelected);
+        updateNonRapidInfo();
+    }
+}
+
+function initDateSelection() {
+    const $self = $(DS_EL.dateSelection);
+
     if (!$self.length) {
-      return;
+        return;
     }
 
-    $self.on('click', cell, selectTimeSlot);
-  }
+    $self.on('click', DS_EL.cell, selectTimeSlot);
+}
 
-  init();
+var Wick = window.Wick || {};
 
-  return {
-    isDateSelected: function(){
-      return isDateSelected;
-    }
-  }
-})();
+Wick.DateSelection = {
+    isDateSelected: () => isDateSelected,
+};
+
+$(document).ready(function () {
+    initDateSelection();
+});

package/src/js/emulation/forms.js

@@ -323,6 +323,18 @@ Wick.Forms = (function () {
             }
         }
 
+        if ($(form).is('.notify-me-form')) {
+            if ($(form).find('#notify-me-email').val().length) {
+                return false;
+            }
+        }
+
+        if ($(form).is('.add-list-id__form')) {
+            if ($(form).find('#project-id').val().length) {
+                return false;
+            }
+        }
+
         if ($(form).is('.header-search')) {
             window.location.href = './page_search-results.html';
         }

package/src/js/emulation/gift-cards.js

@@ -205,7 +205,7 @@
         mock.giftCards = [];
         recomputeTotalsAndOrder();
 
-        Wick.GiftCard.init({
+        Wick.GiftCard?.init({
             giftCardsLimit: GIFT_CARDS_LIMIT,
             errorCode: PAY_ERROR_CODE,
             giftCards: mock.giftCards.slice(),

package/src/js/emulation/mini-basket-data.js

@@ -1,4 +1,4 @@
-var Wick = Wick || {};
+window.Wick = window.Wick || {};
 Wick.MiniBasketData = (function () {
     return {
         updateQuantity: {
@@ -874,14 +874,14 @@ Wick.MiniBasketData = (function () {
             clickAndCollectOnly: false,
             deliveryItemsQuantity: 1,
             pickupItemsQuantity: 2,
-            freeDelivery: true,
+            freeDelivery: false,
             subtotalWithoutCharity: {
                 value: 19.0,
                 formattedValue: '£19.00',
                 currencyIso: 'GBP',
                 formattedPriceWithoutCurrencySymbol: '19.00',
             },
-            messageForFreeDelivery: 'Free delivery<i class="icon fas fa-check"></i>',
+            messageForFreeDelivery: null,
             pickupOrderGroups: [
                 {
                     entries: [

package/src/js/emulation/notify-me.js

@@ -0,0 +1,9 @@
+function initNotifyMeEmulation() {
+    $(document).on('submit', Wick.NotifyMeSubscription.el.form, () =>
+        Wick.NotifyMeSubscription.showSuccessState()
+    );
+}
+
+$(document).ready(function () {
+    initNotifyMeEmulation();
+});