wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

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

@@ -1,53 +1,285 @@
-// 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 getPositionAttr() {
-  const isMobile = Wick.BannerPlacementManager.isMobileResolution();
-  return isMobile
-    ? 'data-mobile-position'
-    : 'data-desktop-position';
-}
-
-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]);
-    }
-  });
-
-  const sponsorProductElements = document.querySelectorAll(".card-sponsor-product");
-  sponsorProductElements.forEach((el, index) => {
-    if (inputs.sponsorProductPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorProductPositions[index]);
-    }
-  });
-
-  const sponsorBannerElements = document.querySelectorAll(".card-sponsor-banner");
-  sponsorBannerElements.forEach((el, index) => {
-    if (inputs.sponsorBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorBannerPositions[index]);
-    }
-  });
-}
-
-function init() {
-  const inputs = getInputs();
-  updatePositions(inputs);
-}
-
-$(document).ready(function () {
-  if ($('.retail-media .products-list.products-list-v2').length) {
-    setTimeout(() => init(), 100)
-  }
-});
+(function () {
+    // Simulate prompt for input
+
+    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 = window.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 isPackagePlp() {
+        const manager = window.Wick?.BannerPlacementManager;
+        const productsWrapSelector = manager
+            ? manager.el.productsWrap
+            : '.products-list.products-list-v2';
+        return (
+            productsWrapSelector.includes('.package-plp__cards') ||
+            document.querySelector('.package-plp__cards') !== null
+        );
+    }
+
+    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 = isPackagePlp()
+            ? ''
+            : 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) {
+        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 shouldDisableProductBanners = Boolean(inputs.bloomreachSlots?.length);
+        const includeSponsorProduct = !isPackagePlp();
+
+        manager.el.bloomreachBanners = '.card-bloomreach-media-banner';
+
+        let activeBanners = ['.card-bloomreach-media-banner', '.card-sponsor-banner'];
+        if (!shouldDisableProductBanners) activeBanners.push('.card-product-banner');
+        if (includeSponsorProduct) activeBanners.push('.card-sponsor-product');
+
+        manager.el.allBanners = activeBanners.join(', ');
+
+        let activeListSlots = [
+            manager.el.productCard || '.product-card',
+            '.card-bloomreach-media-banner',
+            '.card-sponsor-banner',
+        ];
+        if (!shouldDisableProductBanners) activeListSlots.push('.card-product-banner');
+        if (includeSponsorProduct) activeListSlots.push('.card-sponsor-product');
+
+        manager.el.allListSlots = activeListSlots.join(', ');
+        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 manager = window.Wick?.BannerPlacementManager;
+        const productsWrapSelector = manager
+            ? manager.el.productsWrap
+            : '.products-list.products-list-v2';
+        const productsWrap = document.querySelector(productsWrapSelector);
+
+        if (!productsWrap) {
+            return;
+        }
+
+        const existingBanners = document.querySelectorAll('.card-bloomreach-media-banner');
+
+        if (isBloomreachDisabled(slots)) {
+            existingBanners.forEach((banner) => banner.remove());
+            return;
+        }
+
+        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 applyBloomreachEmulation() {
+        const inputs = getInputs();
+
+        updatePositions(inputs);
+
+        const isDisabled = isBloomreachDisabled(inputs.bloomreachSlots);
+
+        toggleHybrisProductBanners(inputs);
+
+        if (!isDisabled) {
+            patchBannerPlacementManagerForBloomreachEmulation(inputs);
+        }
+
+        rebuildBloomreachBannersForEmulation(inputs);
+
+        if (
+            window.Wick &&
+            window.Wick.BannerPlacementManager &&
+            typeof window.Wick.BannerPlacementManager.checkProductsInColumn === 'function'
+        ) {
+            window.Wick.BannerPlacementManager.checkProductsInColumn();
+        }
+    }
+
+    $(document).ready(function () {
+        const manager = window.Wick?.BannerPlacementManager;
+        const productsWrapSelector = manager
+            ? manager.el.productsWrap
+            : '.products-list.products-list-v2';
+
+        if ($(productsWrapSelector).length) {
+            setTimeout(() => {
+                applyBloomreachEmulation();
+            }, 100);
+        }
+    });
+})();

package/src/js/emulation/bloomreach-widget-calculations.js

@@ -0,0 +1,132 @@
+let addToCartResponseIndex = 0;
+
+function formatBundlePrice(value) {
+    return new Intl.NumberFormat('en-GB', {
+        style: 'currency',
+        currency: 'GBP',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+
+function getPriceData(product) {
+    return product.price || product.displayPrice || {};
+}
+
+function getBundleProductPrice(product) {
+    const price = getPriceData(product);
+
+    return typeof price.value === 'number' ? price.value : 0;
+}
+
+function getBundleProductWasPrice(product) {
+    const price = getPriceData(product);
+
+    return typeof price.wasPrice === 'number' ? price.wasPrice : null;
+}
+
+function getBundleProductExcVatPrice(product) {
+    const priceExcVat = product.displayPriceExclusiveVat || product.priceExclusiveVat;
+    if (priceExcVat && typeof priceExcVat.value === 'number') return priceExcVat.value;
+    const price = getPriceData(product);
+    if (typeof price.value !== 'number') return 0;
+    const vatRate = price.vatRatePercentage || 20;
+    return price.value / (1 + vatRate / 100);
+}
+
+function getBundleProductExcVatWasPrice(product) {
+    const display = product.displayPriceExclusiveVat;
+    const raw = product.priceExclusiveVat;
+    if (display && typeof display.wasPrice === 'number') return display.wasPrice;
+    if (raw && typeof raw.wasPrice === 'number') return raw.wasPrice;
+    const price = getPriceData(product);
+    if (typeof price.wasPrice !== 'number') return null;
+    const vatRate = price.vatRatePercentage || 20;
+    return price.wasPrice / (1 + vatRate / 100);
+}
+
+function calculateBundleTotal(entries) {
+    let totalPrice = 0;
+    let totalWasPrice = 0;
+    let totalExcVatPrice = 0;
+    let totalExcVatWasPrice = 0;
+    let hasWasPrice = false;
+
+    entries.forEach(function (entry) {
+        const quantity = entry.quantity || 1;
+        const price = getBundleProductPrice(entry.product);
+        const wasPrice = getBundleProductWasPrice(entry.product);
+        const excVatPrice = getBundleProductExcVatPrice(entry.product);
+        const excVatWasPrice = getBundleProductExcVatWasPrice(entry.product);
+
+        totalPrice += price * quantity;
+        totalWasPrice += (wasPrice || price) * quantity;
+        totalExcVatPrice += excVatPrice * quantity;
+        totalExcVatWasPrice += (excVatWasPrice || excVatPrice) * quantity;
+
+        if (wasPrice) {
+            hasWasPrice = true;
+        }
+    });
+
+    return {
+        totalPrice: formatBundlePrice(totalPrice),
+        totalWasPrice: hasWasPrice ? formatBundlePrice(totalWasPrice) : null,
+        totalExcVatPrice: formatBundlePrice(totalExcVatPrice),
+        totalExcVatWasPrice: hasWasPrice ? formatBundlePrice(totalExcVatWasPrice) : null,
+    };
+}
+
+function bindCalculateProductBundleTotalEvent() {
+    $(window).on('calculateProductBundleTotal', function ({ detail: { payload, resolve } }) {
+        const entries = payload.entries || [];
+
+        setTimeout(function () {
+            resolve(calculateBundleTotal(entries));
+        }, 200);
+    });
+}
+
+function getAddProductBundleResponse() {
+    const responses = [
+        {
+            bulkAddToCartData: {
+                messageType: 'success',
+                messageText: 'Selected product(s) were added to basket',
+            },
+        },
+        {
+            bulkAddToCartData: {
+                messageType: 'warning',
+                messageText: 'Selected product(s) were partially added to basket',
+            },
+        },
+        {
+            bulkAddToCartData: {
+                messageType: 'error',
+                messageText: 'Selected product(s) were not added to basket',
+            },
+        },
+    ];
+
+    const response = responses[addToCartResponseIndex % responses.length];
+
+    addToCartResponseIndex++;
+
+    return response;
+}
+
+function bindAddProductBundleToCartEvent() {
+    $(window).on('bulkAddToCart', function ({ detail: { payload, resolve } }) {
+        const entries = payload.entries || [];
+
+        setTimeout(function () {
+            resolve(getAddProductBundleResponse(entries));
+        }, 1200);
+    });
+}
+
+$(document).ready(function () {
+    bindCalculateProductBundleTotalEvent();
+    bindAddProductBundleToCartEvent();
+});

package/src/js/emulation/bloomreach-widget-loading.js

@@ -0,0 +1,11 @@
+var Wick = window.Wick || {};
+
+$(document).ready(function () {
+    window.setTimeout(function () {
+        const $container = $('[data-complete-widget]');
+        const contextKey = $container.data('context-key');
+        const payloadData = Wick.FEMock.dataBloomreach[contextKey];
+
+        Wick.BloomreachWidget.init(payloadData);
+    }, 3000);
+});

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) {