wickes-css2 2.105.0-develop.8 → 2.105.0-develop.9

package/src/js/emulation/billie-modal.js

@@ -1,22 +1,26 @@
 (function () {
-    const ORDER = ["30", "30_60", "30_90", "30_60_90"];
+    const ORDER = ['30', '30_60', '30_90', '30_60_90'];
 
     const COPY = {
-        "30": {
-            heading: "Buy now, pay within 30 days",
-            repayment: "From the point of collection / delivery of goods you’ll have 30 days to pay",
+        30: {
+            heading: 'Buy now, pay within 30 days',
+            repayment:
+                'From the point of collection / delivery of goods you’ll have 30 days to pay',
         },
-        "30_60": {
-            heading: "Buy now and choose to pay within 30 or 60 days",
-            repayment: "From the point of collection / delivery of goods, you'll have until the end of your chosen repayment term to pay",
+        '30_60': {
+            heading: 'Buy now and choose to pay within 30 or 60 days',
+            repayment:
+                "From the point of collection / delivery of goods, you'll have until the end of your chosen repayment term to pay",
         },
-        "30_90": {
-            heading: "Buy now and choose to pay within 30 or 90 days",
-            repayment: "From the point of collection / delivery of goods, you'll have until the end of your chosen repayment term to pay",
+        '30_90': {
+            heading: 'Buy now and choose to pay within 30 or 90 days',
+            repayment:
+                "From the point of collection / delivery of goods, you'll have until the end of your chosen repayment term to pay",
         },
-        "30_60_90": {
-            heading: "Buy now and choose to pay within 30, 60 or 90 days",
-            repayment: "From the point of collection / delivery of goods, you'll have until the end of your chosen repayment term to pay",
+        '30_60_90': {
+            heading: 'Buy now and choose to pay within 30, 60 or 90 days',
+            repayment:
+                "From the point of collection / delivery of goods, you'll have until the end of your chosen repayment term to pay",
         },
     };
 
@@ -28,15 +32,15 @@
     }
 
     function applyBillieTerms(terms) {
-        const copy = COPY[terms] || COPY["30"];
-        const $modal = $("#billieLearnMoreModal");
+        const copy = COPY[terms] || COPY['30'];
+        const $modal = $('#billieLearnMoreModal');
 
-        $modal.find(".js-billie-terms-heading").text(copy.heading);
-        $modal.find(".js-billie-repayment-line").text(copy.repayment);
-        $modal.attr("data-billie-terms", terms);
+        $modal.find('.js-billie-terms-heading').text(copy.heading);
+        $modal.find('.js-billie-repayment-line').text(copy.repayment);
+        $modal.attr('data-billie-terms', terms);
     }
 
-    $(document).on("click", ".billie__link", function (e) {
+    $(document).on('click', '.billie__link', function (e) {
         e.preventDefault();
 
         const terms = nextTerms();

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

@@ -1,44 +1,53 @@
 var Wick = Wick || {};
 
-Wick.PaymentDetails = (function() {
-  var $btnEnterDetails = $('.btn-enter-details'),
-    $form = $btnEnterDetails.parents('form'),
-    isGuestPage = $('.page_checkout-payment-details_guest').length;
+Wick.PaymentDetails = (function () {
+    var $btnEnterDetails = $('.btn-enter-details'),
+        $form = $btnEnterDetails.parents('form'),
+        isGuestPage = $('.page_checkout-payment-details_guest').length;
 
-  function bindEvents() {
-    $btnEnterDetails.on('click', function() {
-      if ($form.find('#card-name').val()?.length &&
-        $form.find('#first-line-address').val().length &&
-        $form.find('#address-line-1').val().length &&
-        $form.find('#town-city').val().length &&
-        $form.find('#postcode_additional').val().length) {
-        $('.checkout-payment-details__card-details').removeClass('checkout-payment-details__card-details_hidden');
-        $('html, body').animate({
-          scrollTop: $('.checkout-payment-details__card-details').offset().top - 15,
-        }, 700);
-        return false;
-      }
-      Wick.Forms.showValidationErrors($form[0]);
-      return false;
-    });
+    function bindEvents() {
+        $btnEnterDetails.on('click', function () {
+            if (
+                $form.find('#card-name').val()?.length &&
+                $form.find('#first-line-address').val().length &&
+                $form.find('#address-line-1').val().length &&
+                $form.find('#town-city').val().length &&
+                $form.find('#postcode_additional').val().length
+            ) {
+                $('.checkout-payment-details__card-details').removeClass(
+                    'checkout-payment-details__card-details_hidden'
+                );
+                $('html, body').animate(
+                    {
+                        scrollTop: $('.checkout-payment-details__card-details').offset().top - 15,
+                    },
+                    700
+                );
+                return false;
+            }
+            Wick.Forms.showValidationErrors($form[0]);
+            return false;
+        });
 
-    $('.checkout-payment-details__card-details').on('submit', function() {
-      var $form = $(this);
-      if ($form.find('#card-type').val() &&
-        $form.find('#card-name1').val().length &&
-        $form.find('#card-number').val().length &&
-        $form.find('#month').val() &&
-        $form.find('#year').val() &&
-        $form.find('#security-code').val()) {
-        window.location.href = isGuestPage
-          ? './page_checkout_confirmation_guest.html'
-          : './page_checkout_confirmation.html';
-        return false;
-      }
-      Wick.Forms.showValidationErrors(this);
-      return false;
-    });
-  }
+        $('.checkout-payment-details__card-details').on('submit', function () {
+            var $form = $(this);
+            if (
+                $form.find('#card-type').val() &&
+                $form.find('#card-name1').val().length &&
+                $form.find('#card-number').val().length &&
+                $form.find('#month').val() &&
+                $form.find('#year').val() &&
+                $form.find('#security-code').val()
+            ) {
+                window.location.href = isGuestPage
+                    ? './page_checkout_confirmation_guest.html'
+                    : './page_checkout_confirmation.html';
+                return false;
+            }
+            Wick.Forms.showValidationErrors(this);
+            return false;
+        });
+    }
 
-  bindEvents();
+    bindEvents();
 })();

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

@@ -1,22 +1,26 @@
-
 function simulateHybrisSendingHtml() {
-  const htmlFromHybris = Wick.FEMock.cartPDP;
-  const event = new CustomEvent('productAddedToCart', {
-    detail: { html: htmlFromHybris }
-  });
-  document.dispatchEvent(event);
+    const htmlFromHybris = Wick.FEMock.cartPDP;
+    const event = new CustomEvent('productAddedToCart', {
+        detail: { html: htmlFromHybris },
+    });
+    document.dispatchEvent(event);
 }
 
 function bindResolveEvent(events) {
-  $(window).on(events.join(' '), function ({ detail: { resolve } }) {
-    setTimeout(() => {
-      resolve();
-    }, 200);
-  });
+    $(window).on(events.join(' '), function ({ detail: { resolve } }) {
+        setTimeout(() => {
+            resolve();
+        }, 200);
+    });
 }
 
 $(document).ready(function () {
-  $('.btn-add-to-basket').on('click', simulateHybrisSendingHtml);
+    $('.btn-add-to-basket').on('click', simulateHybrisSendingHtml);
 
-  bindResolveEvent(['CLOSE_JUST_ADDED', 'CLOSE_MINI_BASKET', 'MINI_BASKET_CHECKOUT', 'MINI_BASKET_VIEW_BASKET']);
+    bindResolveEvent([
+        'CLOSE_JUST_ADDED',
+        'CLOSE_MINI_BASKET',
+        'MINI_BASKET_CHECKOUT',
+        'MINI_BASKET_VIEW_BASKET',
+    ]);
 });

package/src/js/emulation/filters-emulation.js

@@ -0,0 +1,164 @@
+import { createShowMoreLess } from '../page/utils/show-more-less';
+
+var Wick = window.Wick || (window.Wick = {});
+
+function waitFor(getter, cb, opts) {
+    opts = opts || {};
+    var timeout = opts.timeout || 8000;
+    var interval = opts.interval || 50;
+
+    var start = Date.now();
+    (function tick() {
+        var val;
+        try {
+            val = getter();
+        } catch (e) {
+            val = null;
+        }
+
+        if (val) {
+            cb(val);
+            return;
+        }
+
+        if (Date.now() - start > timeout) {
+            return;
+        }
+
+        setTimeout(tick, interval);
+    })();
+}
+
+// show-more-less
+(function () {
+    const SEL = {
+        OPEN: '#open-overlay',
+        CLOSE: '#close-overlay, .filter-results__btn-close',
+        FILTER_RESULT: '.filter-results_desktop',
+        FILTER_MOBILE: '.filter-results_mobile',
+        CATEGORY: '.filter__item--category',
+    };
+
+    const SRPShowMoreLess = createShowMoreLess({
+        excludeGroup: ($group) => $group.hasClass(SEL.CATEGORY),
+    });
+
+    function initInScope() {
+        const $fm = $(SEL.FILTER_MOBILE);
+        SRPShowMoreLess.init($(SEL.FILTER_RESULT));
+        SRPShowMoreLess.init($fm);
+    }
+
+    function resetInMobile() {
+        const $fm = $(SEL.FILTER_MOBILE);
+        SRPShowMoreLess.resetAll($fm);
+    }
+
+    $(function () {
+        initInScope();
+    });
+
+    $(document)
+        .off('click.srpSmlEmu', SEL.OPEN)
+        .on('click.srpSmlEmu', SEL.OPEN, function (e) {
+            e.preventDefault();
+            initInScope();
+            resetInMobile();
+        });
+
+    $(document)
+        .off('click.srpSmlEmu', SEL.CLOSE)
+        .on('click.srpSmlEmu', SEL.CLOSE, function (e) {
+            e.preventDefault();
+            resetInMobile();
+        });
+})();
+
+(function () {
+    waitFor(
+        function () {
+            return Wick.Sort;
+        },
+        function (Sort) {
+            Sort.ROOT = '.products-list-page:not(.page-KitchenPLPPage)';
+            Wick.Sort.ROOT = Sort.ROOT;
+
+            var $root = $(Sort.ROOT);
+            if (!$root.length) return;
+
+            if (Sort.__emuBound) return;
+            Sort.__emuBound = true;
+
+            $root.off('click', Sort.TRIGGER_MOBILE);
+            $root.off('click', Sort.TRIGGER_DESKTOP_BTN);
+            $root.off('keydown', Sort.TRIGGER_MOBILE + ', ' + Sort.TRIGGER_DESKTOP_BTN);
+            $root.off('click', Sort.OPTION);
+
+            $root.on('click', Sort.TRIGGER_MOBILE, function (e) {
+                e.stopPropagation();
+
+                if ($(e.target).closest(Sort.DROPDOWN).length) return;
+                e.preventDefault();
+                Sort.toggle($(e.currentTarget));
+            });
+
+            $root.on('click', Sort.TRIGGER_DESKTOP_BTN, function (e) {
+                e.stopPropagation();
+
+                e.preventDefault();
+                Sort.toggle($(e.currentTarget).closest(Sort.WRAP));
+            });
+
+            $root.on(
+                'keydown',
+                Sort.TRIGGER_MOBILE + ', ' + Sort.TRIGGER_DESKTOP_BTN,
+                function (e) {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        Sort.toggle($(e.currentTarget).closest(Sort.WRAP));
+                    }
+                }
+            );
+
+            $root.on('click', Sort.OPTION, function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                var opt = $(e.currentTarget);
+                var value = opt.data('value');
+                var label = Sort.valueToLabel(value);
+
+                if (opt.data('is-plp-srp')) {
+                    var wrap = opt.closest(Sort.WRAP);
+                    wrap.find(Sort.OPTION).removeClass('is-active');
+                    opt.addClass('is-active');
+
+                    $(Sort.INFO).text(label);
+                    Sort.closeAll();
+                    return;
+                }
+
+                Sort.updateSortParamInURL(value);
+            });
+
+            (function bootstrapEmu() {
+                var urlParams = new URLSearchParams(window.location.search);
+                var value = urlParams.get('sortBy') || 'relevance';
+                var label = Sort.valueToLabel(value);
+
+                var $wraps = $root.find(Sort.WRAP);
+
+                $wraps.each(function (_, el) {
+                    var w = $(el);
+                    w.find(Sort.OPTION)
+                        .removeClass('is-active')
+                        .filter('[data-value="' + value + '"]')
+                        .addClass('is-active');
+                });
+
+                $(Sort.INFO).text(label);
+            })();
+        }
+    );
+})();