wickes-css2 2.109.0-develop.6 → 2.109.0-develop.8

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-payment-details.js

@@ -1,9 +1,16 @@
-var Wick = Wick || {};
+window.Wick = window.Wick || {};
+window.Wick.BillieData = window.Wick.BillieData || {};
+window.Wick.BillieData.billiePaymentTerms = ['30', '60', '90'];
+window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
+window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
 
 Wick.PaymentDetails = (function () {
     var $btnEnterDetails = $('.btn-enter-details'),
         isGuestPage = $('.page_checkout-payment-details_guest').length;
 
+    const $billieInfo = $('.checkout-payment-details__billie .billie-info');
+    const $klarnaInfo = $('.checkout-payment-details__klarna .klarna-info');
+
     function bindEvents() {
         $btnEnterDetails.on('click', function (e) {
             e.preventDefault();
@@ -49,6 +56,32 @@ Wick.PaymentDetails = (function () {
             Wick.Forms.showValidationErrors(this);
             return false;
         });
+
+        $(window).on(window.INIT_BILLIE_PAYMENT, function (e) {
+            const detail = e.detail || (e.originalEvent && e.originalEvent.detail) || {};
+
+            if (detail && detail.resolve) {
+                $billieInfo.show();
+                detail.resolve();
+            }
+        });
+
+        $(window).on(window.INIT_KLARNA_PAYMENT, function (e) {
+            const detail = e.detail || (e.originalEvent && e.originalEvent.detail) || {};
+
+            if (detail && detail.resolve) {
+                $klarnaInfo.show();
+                detail.resolve();
+            }
+        });
+
+        $(document).on('change', 'input[name="repaymentTerms"]', function () {
+            const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
+
+            if (hasSelection) {
+                $billieInfo.show();
+            }
+        });
     }
 
     bindEvents();

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/store-locator-load-more.js

@@ -0,0 +1,69 @@
+import { appendLoader, showLoader, hideLoader } from '../page/utils/loader';
+
+function initStoreLocatorLoadMore() {
+    const PAGE_SIZE = 8;
+
+    const SELECTORS = {
+        cards: '.cards-store-list',
+        btnMore: '.store-locator__load-button_more',
+        loader: '.store-locator-loader',
+    };
+
+    const loaderPayload = {
+        wrapper: 'body',
+        hidden: true,
+        modifier: 'store-locator-loader',
+    };
+
+    const $cards = $(SELECTORS.cards);
+    const $btnMore = $(SELECTORS.btnMore);
+
+    let visibleCount = PAGE_SIZE;
+
+    function updateVisibility() {
+        $cards.each(function (index) {
+            $(this).toggle(index < visibleCount);
+        });
+
+        if (visibleCount >= $cards.length) {
+            $btnMore.hide();
+        } else {
+            $btnMore.show();
+        }
+
+        Wick.StoreCardsAlign?.align();
+    }
+
+    function loadMore() {
+        showLoader(SELECTORS.loader);
+        $btnMore.prop('disabled', true);
+
+        setTimeout(() => {
+            visibleCount += PAGE_SIZE;
+            updateVisibility();
+
+            hideLoader(SELECTORS.loader);
+            $btnMore.prop('disabled', false).blur();
+        }, 1000);
+    }
+
+    function init() {
+        if (!$cards.length || !$btnMore.length) {
+            return;
+        }
+
+        if (!$(SELECTORS.loader).length) {
+            appendLoader(loaderPayload);
+        }
+
+        updateVisibility();
+
+        $btnMore.on('click', loadMore);
+    }
+
+    init();
+}
+
+$(document).ready(function () {
+    initStoreLocatorLoadMore();
+});

package/src/js/page/checkout-payment-details.js

@@ -1,4 +1,6 @@
 var Wick = Wick || {};
+window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
+window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
 Wick.CheckoutPaymentDetails = (function () {
     const $modal = $('#modal-terms-and-conditions');
 
@@ -10,10 +12,11 @@ Wick.CheckoutPaymentDetails = (function () {
         buttonName: 'btn-enter-details',
     };
 
+    const toggleBillieRepaymentTermsClass = 'js-billie-repayment-terms--has-selection';
+
     const elements = {
         $billieRepaymentTerms: $('.js-billie-repayment-terms'),
-        $billieInfoBlock: $('.checkout-payment-details__billie'),
-        $billieInfo: $('.checkout-payment-details__billie .billie-info'),
+        $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
         $wrapperPaymentInput: $('.checkout-payment-details__row'),
         paymentInputName: '[name=payment-method]',
         $cardDetails: $('.checkout-payment-details__card-details'),
@@ -27,6 +30,52 @@ Wick.CheckoutPaymentDetails = (function () {
         hiddenClass: 'd-none',
     };
 
+    let klarnaInited = false;
+    let billieInited = false;
+
+    function initKlarnaPayment() {
+        if (klarnaInited) return Promise.resolve({ ok: true, cached: true });
+
+        return new Promise((resolve, reject) => {
+            const payload = {};
+            const detail = {
+                resolve: (data) => {
+                    klarnaInited = true;
+                    resolve(data);
+                },
+                reject,
+            };
+
+            const evt = createEvent(window.INIT_KLARNA_PAYMENT, payload, detail);
+            window.dispatchEvent(evt);
+        });
+    }
+
+    function initBilliePayment() {
+        if (billieInited) return Promise.resolve({ ok: true, cached: true });
+
+        return new Promise((resolve, reject) => {
+            const payload = {};
+            const detail = {
+                resolve: (data) => {
+                    billieInited = true;
+                    resolve(data);
+                },
+                reject,
+            };
+
+            const evt = createEvent(window.INIT_BILLIE_PAYMENT, payload, detail);
+            window.dispatchEvent(evt);
+        });
+    }
+
+    function getBillieRepaymentTermsLength() {
+        const billieRepaymentTerms =
+            (window.Wick && window.Wick?.BillieData?.billiePaymentTerms) || [];
+
+        return Array.isArray(billieRepaymentTerms) ? billieRepaymentTerms.length : 0;
+    }
+
     function preparePage() {
         var modalOpened = $('.modal.show').length;
         if (!modalOpened) return;
@@ -55,10 +104,14 @@ Wick.CheckoutPaymentDetails = (function () {
 
     function togglePaymentBlocks(paymentMethods, checkedMethod) {
         paymentMethods.forEach((method) => {
-            $(`[data-${method}]`).toggle(checkedMethod === method);
+            $(`[data-${method}]`).hide();
         });
-    }
 
+        const $selected = $(`[data-${checkedMethod}]`);
+        if ($selected.length) {
+            $selected.show();
+        }
+    }
     function resetAllCheckoutForms(keepPaymentMethod) {
         const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
         if (!$container.length) return;
@@ -102,9 +155,18 @@ Wick.CheckoutPaymentDetails = (function () {
         $row.find(':input').prop('disabled', !isVisible);
     }
 
+    function _syncBillieUI(isReady) {
+        elements.$billieWidget.toggle(isReady);
+        elements.$billieRepaymentTerms.toggleClass(toggleBillieRepaymentTermsClass, isReady);
+    }
+
+    function resetBillieUi() {
+        _syncBillieUI(false);
+    }
+
     function setBillieStepVisibility(isReady) {
+        _syncBillieUI(isReady);
         setBillingDetailsRowVisibility(isReady);
-        elements.$billieInfo.toggleClass(elements.hiddenClass, !isReady);
     }
 
     function resetBillieRepaymentSelection() {
@@ -130,13 +192,34 @@ Wick.CheckoutPaymentDetails = (function () {
         const isUnregistered = type === 'unregistered';
         const isRegistered = type === 'registered';
 
-        elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
-        elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
+        elements.$unregisteredFields
+            .toggleClass(elements.hiddenClass, !isUnregistered)
+            .removeAttr('style');
+        elements.$registeredFields
+            .toggleClass(elements.hiddenClass, !isRegistered)
+            .removeAttr('style');
+    }
+
+    function showBillingAddressDataCardFields() {
+        const dataCardFields = elements.$billingAddress.find('[data-card]');
+        if (dataCardFields) {
+            dataCardFields.show();
+        }
     }
 
     function changeDetailsBlock(checkedMethod) {
         if (checkedMethod !== 'billie') {
+            resetBillieUi();
             setBillingDetailsRowVisibility(true);
+            hideBillieBusiness();
+        }
+
+        if (checkedMethod === 'klarna') {
+            initKlarnaPayment().catch(() => {});
+        }
+
+        if (checkedMethod === 'billie' && getBillieRepaymentTermsLength() === 1) {
+            initBilliePayment().catch(() => {});
         }
 
         switch (checkedMethod) {
@@ -158,7 +241,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 };
                 changeLabelText(detailsLabel);
 
-                setBillieStepVisibility(false);
+                setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
                 break;
@@ -172,15 +255,16 @@ Wick.CheckoutPaymentDetails = (function () {
                 prevClearableMethod === 'card' && clearInputFields();
                 changeLabelText(detailsLabel);
                 prevClearableMethod = checkedMethod;
+                showBillingAddressDataCardFields();
                 break;
 
-            case 'apple':
+            case 'apple-pay':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
                 break;
 
-            case 'google':
+            case 'google-pay':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
@@ -256,7 +340,7 @@ Wick.CheckoutPaymentDetails = (function () {
             if (currentMethod !== 'billie') return;
 
             requestAnimationFrame(() => {
-                forceReflow(elements.$billieInfoBlock);
+                forceReflow(elements.$billieWidget);
             });
 
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;

package/src/js/page/components/gift-cards.js

@@ -111,7 +111,7 @@ Wick.GiftCard = {
         klarnaInfo: '.checkout-payment-details__klarna',
         billingAddress: '.billing-address',
         altPaymentRowsAttr:
-            '[data-apple],[data-google],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
+            '[data-apple-pay],[data-google-pay],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
         hiddenCard: 'checkout-payment-details__card-details_hidden',
         cardDetails: '.checkout-payment-details__card-details',
     },

package/src/js/page/components/store-locator-cards.js

@@ -0,0 +1,76 @@
+var Wick = window.Wick || (window.Wick = {});
+
+Wick.StoreCardsAlign = (function () {
+    const SELECTORS = {
+        card: '.card-store',
+        info: '.card-store__info',
+        accordionHeader: '.opening-times-accordion__header',
+    };
+
+    let resizeTimeout;
+
+    function alignCardInfoHeights() {
+        const rows = [];
+
+        $(SELECTORS.card).each(function () {
+            const $card = $(this);
+            const top = $card.offset().top;
+
+            let row = rows.find((r) => Math.abs(r.top - top) < 5);
+
+            if (!row) {
+                row = { top: top, items: [] };
+                rows.push(row);
+            }
+
+            row.items.push($card);
+        });
+
+        rows.forEach((row) => {
+            let maxHeight = 0;
+
+            // reset
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', '');
+            });
+
+            // find max
+            row.items.forEach(($card) => {
+                const h = $card.find(SELECTORS.info).outerHeight();
+                if (h > maxHeight) maxHeight = h;
+            });
+
+            // apply
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', maxHeight + 'px');
+            });
+        });
+    }
+
+    function bindEvents() {
+        // load
+        $(window).on('load', alignCardInfoHeights);
+
+        // resize
+        $(window).on('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(alignCardInfoHeights, 100);
+        });
+
+        // accordion
+        $(document).on('click', SELECTORS.accordionHeader, () => {
+            setTimeout(alignCardInfoHeights, 0);
+        });
+    }
+
+    function init() {
+        bindEvents();
+    }
+
+    init();
+
+    return {
+        init: init,
+        align: alignCardInfoHeights,
+    };
+})();