wickes-css2 2.94.0-develop.2 → 2.94.0-develop.21

package/src/js/components/flatpickr.js

@@ -0,0 +1,167 @@
+var Wick = window.Wick || {};
+
+Wick.Flatpickr = {
+  el: {
+    $crossIcon: $("#crossIcon"),
+    $calendarIcon: $("#calendarIcon"),
+    flatpickrDisabled: '.flatpickr-disabled',
+    datePickerField: '.flatpickr-datepicker__field',
+  },
+  generateInitialDisabledMonths(year, startMonth) {
+    const today = new Date();
+    const currentYear = today.getFullYear();
+    const currentMonth = today.getMonth();
+
+    if (year === currentYear) {
+      return Array.from({ length: 12 - currentMonth - 1 }, (_, i) =>
+        new Date(year, currentMonth + 1 + i, 1)
+      );
+    }
+
+    return [];
+  },
+  handleYearChange(instance, minYear, currentYear, currentMonth) {
+    const selectedYear = instance.currentYear;
+
+    if (selectedYear > currentYear) {
+      instance.changeYear(currentYear);
+    } else if (selectedYear < minYear) {
+      instance.changeYear(minYear);
+    }
+
+    Wick.Flatpickr.updateDisabledMonths(instance, selectedYear, currentMonth, currentYear);
+  },
+  updateDisabledMonths(instance, year, month) {
+    const disabledMonths = Wick.Flatpickr.generateInitialDisabledMonths(year, month);
+    instance.set("disable", disabledMonths);
+  },
+  bindClearIcon(instance, $field) {
+    if ($field.val().trim() !== "") {
+      Wick.Flatpickr.el.$crossIcon.removeClass("d-none").addClass("d-flex");
+    } else {
+      Wick.Flatpickr.el.$crossIcon.removeClass("d-flex").addClass("d-none");
+    }
+
+    Wick.Flatpickr.el.$crossIcon.on("click", function () {
+      instance.clear();
+      instance.setDate(null);
+      $field.val("");
+      Wick.Flatpickr.el.$crossIcon.hide();
+      instance.open();
+      instance.close();
+    });
+
+    $field.on("input", function () {
+      if ($field.val().trim() === "") {
+        Wick.Flatpickr.el.$crossIcon.removeClass("d-flex").addClass("d-none");
+      } else {
+        Wick.Flatpickr.el.$crossIcon.removeClass("d-none").addClass("d-flex");
+      }
+    });
+  },
+  bindCalendarIcon(instance) {
+    Wick.Flatpickr.el.$calendarIcon.on("click", function () {
+      instance.open();
+    });
+  },
+  formatDateToYYYYMM(date) {
+    const newDate = new Date(date);
+    const year = newDate.getFullYear();
+    const month = String(newDate.getMonth() + 1).padStart(2, "0");
+    return `${year}-${month}`;
+  },
+  getFlatpickrConfig(config) {
+    const today = new Date();
+    const chooseDate = config.chooseDate
+      ? new Date(config.chooseDate)
+      : null;
+    const currentYear = config.currentYear || today.getFullYear();
+    const currentMonth = chooseDate ? chooseDate.getMonth() : today.getMonth();
+    const minYear = config.minYear || currentYear - 15;
+
+    const minDate = new Date(minYear, 0, 1);
+    const maxDate = new Date(`${currentYear}-12-31`);
+
+    const initialDisabledMonths = Wick.Flatpickr.generateInitialDisabledMonths(
+      today.getFullYear(),
+      currentMonth
+    );
+
+    return {
+      dateFormat: config.dateFormat || "F Y",
+      enableTime: false,
+      static: config.static || true,
+      defaultDate: chooseDate || null,
+      placeholder: "Select year and month",
+      minDate,
+      maxDate,
+      disable: initialDisabledMonths,
+      plugins: [
+        new monthSelectPlugin({
+          shorthand: false,
+          dateFormat: config.dateFormat || "F Y",
+          theme: "light",
+        }),
+      ],
+      onYearChange: (selectedDates, dateStr, instance) => {
+        Wick.Flatpickr.handleYearChange(
+          instance,
+          minYear,
+          currentYear,
+          currentMonth
+        );
+      },
+      onMonthChange: (selectedDates, dateStr, instance) => {
+        Wick.Flatpickr.updateDisabledMonths(
+          instance,
+          currentYear,
+          currentMonth
+        );
+      },
+      onReady: (selectedDates, dateStr, instance) => {
+        Wick.Flatpickr.updateDisabledMonths(
+          instance,
+          currentYear,
+          currentMonth
+        );
+      },
+      onOpen: (selectedDates, dateStr, instance) => {
+        $(Wick.Flatpickr.el.datePickerField).addClass('active');
+      },
+      onClose: (selectedDates, dateStr, instance) => {
+        $(Wick.Flatpickr.el.datePickerField).removeClass("active");
+        $(Wick.Flatpickr.el.flatpickrDisabled).removeClass("flatpickr-disabled");
+
+        if (selectedDates.length > 0) {
+          const selectedDate = selectedDates[0];
+          const selectedYear = selectedDate.getFullYear();
+          const selectedMonth = selectedDate.getMonth();
+          instance.currentYear = selectedYear;
+          instance.currentMonth = selectedMonth;
+
+          Wick.Flatpickr.updateDisabledMonths(instance, selectedYear, selectedMonth);
+        }
+      },
+      onChange: (selectedDates, dateStr) => {
+        const { onChangeCallback } = config;
+        if (typeof onChangeCallback === "function") {
+          const formattedDate = Wick.Flatpickr.formatDateToYYYYMM(selectedDates[0]);
+          onChangeCallback(formattedDate);
+        }
+      },
+    };
+  },
+  init(config) {
+    const $field = $(config.id);
+
+    if (!$field.length) {
+      return;
+    }
+
+    const flatpickrConfig = Wick.Flatpickr.getFlatpickrConfig(config);
+    const flatpickrInstance = flatpickr(config.id, flatpickrConfig);
+
+    Wick.Flatpickr.bindClearIcon(flatpickrInstance, $field);
+    Wick.Flatpickr.bindCalendarIcon(flatpickrInstance);
+  },
+};

package/src/js/components/general/handleAccordion.js

@@ -0,0 +1,35 @@
+var Wick = Wick || {};
+
+Wick.HandleAccordions = {
+  el: {
+    $body: $('body'),
+    $accordions: $(".account-nav .accordion"),
+    accordionContent: '.accordion__content',
+    accordionHeader: '.accordion__header',
+    accordionCollapsed: 'accordion_collapsed',
+  },
+  handleOutsideClick() {
+    document.addEventListener("click", function (event) {
+      Wick.HandleAccordions.el.$accordions.each(function () {
+        const $accordion = $(this);
+        const $content = $accordion.find(Wick.HandleAccordions.el.accordionContent);
+        const $toggle = $accordion.find(Wick.HandleAccordions.el.accordionHeader);
+
+        const toggleButton = $toggle[0];
+        const content = $content[0];
+
+        if (!toggleButton || !content) {
+          return;
+        }
+
+        if (!toggleButton.contains(event.target) && !content.contains(event.target)) {
+          if ($content.is(":visible")) {
+            $content.hide();
+            $accordion.addClass(Wick.HandleAccordions.el.accordionCollapsed);
+            $accordion.attr("aria-expanded", "false");
+          }
+        }
+      });
+    });
+  }
+};

package/src/js/components/general/is-trade-pro.js

@@ -21,4 +21,18 @@ $(document).ready(function () {
     if (navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android/i)) {
         $('body').addClass('tp-app');
     }
-});
+});
+
+$(function() {
+    if (Wick.isTradeProAndroid) {
+        $('body').addClass('tp-android');
+    }
+    if (Wick.isTradeProiOS) {
+        $('body').addClass('tp-ios');
+        if (
+          window.matchMedia('(min-width: 768px)').matches
+        ) {
+            $('body').addClass('tp-ios-notch');
+        }
+    }
+});

package/src/js/components/general/switchVat.js

@@ -124,7 +124,7 @@ Wick.VatToggle = {
 
   init: function() {
     const isVatShouldBeToggled = Wick.VatToggle.isOn();
-    const isVatToggled = Wick.VatToggle.getSwitcherState();
+    const isVatToggled = !!Wick.VatToggle.getSwitcherState();
 
     if(isVatShouldBeToggled) {
       Wick.VatToggle.setLabelState();

package/src/js/components/leave-event.js

@@ -26,15 +26,54 @@ Wick.LeaveEvent = {
     const currentState = Wick.LeaveEvent.getState(form);
     const isDifferent = !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
 
-    if (isDifferent) {
+    const csrfTokenCheck = Wick.LeaveEvent.isCsrfTokenEqual(currentState, Wick.LeaveEvent.initialFormState);
+
+    if (isDifferent && (csrfTokenCheck || csrfTokenCheck === undefined)) {
       return Wick.LeaveEvent.LEAVE_MESSAGE;
     }
   },
+  isCsrfTokenEqual(currentState, initialFormState) {
+    const csrfTokenCurrentState = currentState.find(item => item.name === 'CSRFToken')?.value;
+    const csrfTokenNewState = initialFormState.find(item => item.name === 'CSRFToken')?.value;
+
+    return csrfTokenCurrentState === csrfTokenNewState;
+  },
   showCustomModal() {
     $(Wick.LeaveEvent.el.leavePopup).modal('show')
   },
   getState(form) {
-    return $(form).serializeArray();
+    let arrForm = $(form).serializeArray();
+    arrForm = Wick.LeaveEvent.processSerializedArr(arrForm, form);
+    return arrForm;
+  },
+  processSerializedArr(arrForm, form) {
+    arrForm = arrForm.map((item) => {
+      let element = $(form).find(`[name="${item.name}"]`);
+
+      if (element.attr("data-tag")) {
+        let dataTagValue = element.attr("data-tag");
+        let similarElements = $(form).find(`[data-tag="${dataTagValue}"]`);
+        let hiddenElement = similarElements.filter(`[type="hidden"]`);
+
+        if (hiddenElement.length) {
+          let previousElement = similarElements.not(`[type="hidden"]`);
+          let previousValue = previousElement.val();
+          item.value = hiddenElement.val();
+          item.text = previousValue;
+        }
+      } else if (element.prop("tagName").toLowerCase() === "select") {
+        item.value = element.find("option:selected").val();
+        item.text = element.find("option:selected").text();
+      }
+
+      if (item.name === "email" && item.value) {
+        item.value = item.value.toLowerCase();
+      }
+
+      return item;
+    });
+
+    return arrForm;
   },
   checkLeavePopup() {
     if (Wick.LeaveEvent.proceedBrowserLeave) {

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

@@ -43,7 +43,7 @@ Wick.BasketData = (function () {
       "status": 400,
       "responseJSON": {
         "globalMessage": {
-          "message": "Delivery is already free. Coupon can’t be applied",
+          "message": "Delivery is already free.\nCoupon can’t be applied."
         }
       }
     },
@@ -444,7 +444,7 @@ Wick.BasketData = (function () {
       "appliedOrderPromotions": [],
       "promotionsInfo": null,
       "clickAndCollectOnly": true,
-      "deliveryItemsQuantity": 0,
+      "deliveryItemsQuantity": 1,
       "pickupItemsQuantity": 2,
       "freeDelivery": false,
       "subtotalWithoutCharity": {"value": 19.0, "formattedValue": "£19.00", "currencyIso": "GBP", "formattedPriceWithoutCurrencySymbol": "19.00"},

package/src/js/emulation/big-wins.js

@@ -48,7 +48,6 @@ Wick.BigWinsProto = function () {
     $defaultInfo: $('.default-store__det'),
     $store: $('.store'),
     $chosenItem: $('.chosen__item'),
-    $storeAct: $('.store__act'),
     $storeCount: $('.store__count'),
     $stockList: $('.stock__list'),
     $stockTarget: $('.stock__target'),
@@ -64,7 +63,6 @@ Wick.BigWinsProto = function () {
     $findStore: $('.my-account_find-store'),
     $postCodeErrorMsg: $('.stock__postcode_invalid-msg'),
     $ccOrder: $('.cc-order'),
-    storeAct: 'store__act',
     storeState: 'store__state',
     storeCount: '.store__count',
     ccBtn: '.bw__cc-btn',

package/src/js/emulation/default-store.js

@@ -0,0 +1,97 @@
+var Wick = Wick || {};
+Wick.DefaultStoreProto = {
+  el: {
+    searchStoreForm: '.search-store',
+    $searchStoreWrapInput: $('.search-store__input'),
+    searchStoreErrorClass: 'search-store__input-error',
+    searchStoreInput: '.search-store #postcode',
+    $searchStoreError: $('.form-row__error'),
+    $storeUnavailableSection: $('.store-unavailable'),
+    $listOfStoreForm: $('.list-of-store'),
+    btnCancel: '.my-account_cancel-store',
+    btnLocation: '.btn--location',
+    iconLocation: '.btn--location .icon',
+    errorIconLocation: '.btn--location .icon-error',
+    $bigWins: $('.bw'),
+    $bwActions: $('.bw_act'),
+    $sDetails: $('.s-details_hide'),
+    sDetailsHide: 's-details_hide',
+    $storeMoreLink: $('.store__more a'),
+  },
+  showStoreList() {
+    Wick.DefaultStoreProto.el.$searchStoreError.hide();
+    Wick.DefaultStoreProto.el.$storeUnavailableSection.hide();
+    Wick.DefaultStoreProto.el.$listOfStoreForm.show();
+    Wick.DefaultStoreProto.el.$searchStoreWrapInput.removeClass(Wick.DefaultStoreProto.el.searchStoreErrorClass);
+
+    if (Wick.DefaultStoreProto.el.$bigWins.css('display') === 'none') {
+      Wick.DefaultStoreProto.el.$bigWins.show();
+    }
+
+    if (Wick.DefaultStoreProto.el.$bwActions.css('display') === 'none') {
+      Wick.DefaultStoreProto.el.$bwActions.show();
+    }
+  },
+  showErrorState() {
+    Wick.DefaultStoreProto.el.$searchStoreError.show();
+    Wick.DefaultStoreProto.el.$storeUnavailableSection.show();
+    Wick.DefaultStoreProto.el.$listOfStoreForm.hide();
+    Wick.DefaultStoreProto.el.$searchStoreWrapInput.addClass(Wick.DefaultStoreProto.el.searchStoreErrorClass);
+  },
+  showUnavailableState() {
+    Wick.DefaultStoreProto.el.$storeUnavailableSection.show();
+    Wick.DefaultStoreProto.el.$listOfStoreForm.hide();
+
+    Wick.DefaultStoreProto.el.$sDetails.filter(function () {
+      let isNotElementHide = !$(this).hasClass(Wick.DefaultStoreProto.el.sDetailsHide);
+
+      if (isNotElementHide) {
+        $(this)
+          .closest(Wick.DefaultStoreProto.el.$bigWins)
+          .find(Wick.DefaultStoreProto.el.$storeMoreLink)
+          .text('Store Info');
+      }
+
+      return isNotElementHide;
+    }).addClass(Wick.DefaultStoreProto.el.sDetailsHide);
+  },
+  clearSearchInput() {
+    $(Wick.DefaultStoreProto.el.searchStoreInput).val('');
+    Wick.DefaultStore.checkVisibilityOfClearButton();
+  },
+  toggleErrorStateForLocation() {
+    const iconIsVisible = $(Wick.DefaultStoreProto.el.iconLocation).is(':visible');
+
+    if (iconIsVisible) {
+      $(Wick.DefaultStoreProto.el.iconLocation).hide();
+      $(Wick.DefaultStoreProto.el.errorIconLocation).show();
+    } else {
+      $(Wick.DefaultStoreProto.el.iconLocation).show();
+      $(Wick.DefaultStoreProto.el.errorIconLocation).hide();
+    }
+  },
+  init() {
+    $(Wick.DefaultStoreProto.el.searchStoreForm).on('submit', (event) => {
+      event.preventDefault();
+      const value = Wick.DefaultStore.getPostCode();
+      if (value.length) {
+        Wick.DefaultStoreProto.showStoreList();
+      } else {
+        Wick.DefaultStoreProto.showErrorState();
+      }
+    });
+    $(Wick.DefaultStoreProto.el.btnCancel).on('click', (event) => {
+      event.preventDefault();
+      Wick.DefaultStoreProto.clearSearchInput();
+      Wick.DefaultStoreProto.showUnavailableState();
+    })
+    $(Wick.DefaultStoreProto.el.btnLocation).on('click', (event) => {
+      event.preventDefault();
+      Wick.DefaultStoreProto.toggleErrorStateForLocation();
+    })
+  }
+}
+
+$(document).ready(function () {
+  Wick.DefaultStoreProto.init();
+});

package/src/js/emulation/forms.js

@@ -5,7 +5,7 @@ Wick.Forms = (function(){
     fieldError = '.form-row__error',
     formInvalid = 'form_invalid',
     rowValidationError = 'form-row_validation-error',
-    excludedClassesForForm = ['header', 'quiz-modal__form'],
+    excludedClassesForForm = ['header', 'quiz-modal__form', 'search-store'],
     // validationError = '<div class="form-row__error">Error message here</div>',
     $forgotPassword = $('.link-forgot-password'),
     scenarios = [{

package/src/js/emulation/mock.js

@@ -10,5 +10,15 @@ Wick.FEMock = {
       "page": 2,
       "html": '<div class="card product-card " data-product-code="177473"> <div id="product_item_code_177473" class="card__inner card__inner-v2"> <div class="products-list-v2__badges price__badges-v2 price__badges-v2-red price__badges-v2-text-white"> <div class="products-list-v2__badge">2 for £34</div> </div> <a href="/" class="card__img-wrap" title="Dulux"> <img loading="lazy" class="card__img-v2" src="//media.wickes.co.uk/is/image/wickes/GPID_1100360630_00?$normal$" alt="Dulux" title="Dulux"> </a> <div class="product-card__content"> <div class="product-card__header"> <a href="/" class="product-card__title product-card__title-v2" title="Dulux">Dulux Silk Emulsion Paint - 61</a> <div class="product-card__reviews product-card__reviews-v2"> <div class="product-rating product-rating-v2"> <div class="rating-bg"> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <div class="rating-overlay" data-rating="4.9"> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> </div> </div> (41) </div> </div></div> <div class=" product-card__price "> <div class="product-card__price__old-price product-card__price_empty">&nbsp;</div> <div class="main-price"> <div class="main-price__value product-card__price-value "> £22</div> </div> <div class="product-card__price-sqm"> £8.80 per L</div> </div> <div class="energy-efficiency energy-efficiency--empty"> <div class="energy-efficiency__link">&nbsp;</div> </div> </div> </div> </div> <div class="card product-card " data-product-code="116987"> <div id="product_item_code_116987" class="card__inner card__inner-v2"> <div class="products-list-v2__badges price__badges-v2 price__badges-v2-red price__badges-v2-text-white"> <div class="products-list-v2__badge">2 for £34</div> </div> <a href="/" class="card__img-wrap" title="Dulux"> <img loading="lazy" class="card__img-v2" src="//media.wickes.co.uk/is/image/wickes/I9026_116987_00?$normal$" alt="Dulux" title="Dulux"> </a> <div class="product-card__content"> <div class="product-card__header"> <a href="/" class="product-card__title product-card__title-v2" title="Dulux">Dulux Matt Emulsion Paint - 62</a> <div class="product-card__reviews product-card__reviews-v2"> <div class="product-rating product-rating-v2"> <div class="rating-bg"> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <div class="rating-overlay" data-rating="4.8"> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> </div> </div> (58) </div> </div></div> <div class=" product-card__price "> <div class="product-card__price__old-price product-card__price_empty">&nbsp;</div> <div class="main-price"> <div class="main-price__value product-card__price-value "> £22</div> </div> <div class="product-card__price-sqm"> £8.80 per L</div> </div> <div class="energy-efficiency energy-efficiency--empty"> <div class="energy-efficiency__link">&nbsp;</div> </div> </div> </div> </div> <div class="card product-card " data-product-code="122385"> <div id="product_item_code_122385" class="card__inner card__inner-v2"> <a href="/" class="card__img-wrap" title="Wickes"> <img loading="lazy" class="card__img-v2" src="//media.wickes.co.uk/is/image/wickes/O0814_122385_00?$normal$" alt="Wickes" title="Wickes"> </a> <div class="product-card__content"> <div class="product-card__header"> <a href="/" class="product-card__title product-card__title-v2" title="Wickes">Wickes Vinyl Silk Emulsion Paint - 63</a> <div class="product-card__reviews product-card__reviews-v2"> <div class="product-rating product-rating-v2"> <div class="rating-bg"> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <div class="rating-overlay" data-rating="4.8"> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> </div> </div> (74) </div> </div></div> <div class=" product-card__price "> <div class="product-card__price__old-price product-card__price_empty">&nbsp;</div> <div class="main-price"> <div class="main-price__value product-card__price-value "> £15</div> </div> <div class="product-card__price-sqm"> £6 per L</div> </div> <div class="energy-efficiency energy-efficiency--empty"> <div class="energy-efficiency__link">&nbsp;</div> </div> </div> </div> </div> <div class="card product-card " data-product-code="122195"> <div id="product_item_code_122195" class="card__inner card__inner-v2"> <a href="/" class="card__img-wrap" title="Wickes"> <img loading="lazy" class="card__img-v2" src="//media.wickes.co.uk/is/image/wickes/O0814_122195_00?$normal$" alt="Wickes" title="Wickes"> </a> <div class="product-card__content"> <div class="product-card__header"> <a href="/" class="product-card__title product-card__title-v2" title="Wickes">Wickes Vinyl Matt Emulsion Paint - 64</a> <div class="product-card__reviews product-card__reviews-v2"> <div class="product-rating product-rating-v2"> <div class="rating-bg"> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <div class="rating-overlay" data-rating="4.7"> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> </div> </div> (88) </div> </div></div> <div class=" product-card__price "> <div class="product-card__price__old-price product-card__price_empty">&nbsp;</div> <div class="main-price"> <div class="main-price__value product-card__price-value "> £15</div> </div> <div class="product-card__price-sqm"> £6 per L</div> </div> <div class="energy-efficiency energy-efficiency--empty"> <div class="energy-efficiency__link">&nbsp;</div> </div> </div> </div> </div> <div class="card product-card " data-product-code="122300"> <div id="product_item_code_122300" class="card__inner card__inner-v2"> <a href="/" class="card__img-wrap" title="Wickes"> <img loading="lazy" class="card__img-v2" src="//media.wickes.co.uk/is/image/wickes/O0814_122300_00?$normal$" alt="Wickes" title="Wickes"> </a> <div class="product-card__content"> <div class="product-card__header"> <a href="/" class="product-card__title product-card__title-v2" title="Wickes">Wickes Vinyl Matt Emulsion Paint - 65</a> <div class="product-card__reviews product-card__reviews-v2"> <div class="product-rating product-rating-v2"> <div class="rating-bg"> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <i class="fa fa-star star-in" aria-hidden="true"></i> <div class="rating-overlay" data-rating="4.8"> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> <span class="star-overlay"> <i class="fa fa-star" aria-hidden="true"></i> </span> </div> </div> (61) </div> </div></div> <div class=" product-card__price "> <div class="product-card__price__old-price product-card__price_empty">&nbsp;</div> <div class="main-price"> <div class="main-price__value product-card__price-value "> £15</div> </div> <div class="product-card__price-sqm"> £6 per L</div> </div> <div class="energy-efficiency energy-efficiency--empty"> <div class="energy-efficiency__link">&nbsp;</div> </div> </div> </div> </div>'
     }
+  ],
+  orders: [
+    {
+      "page": 1,
+      "html": '<article class="active-orders__item"><header class="order-header"><h3 class="order-header__title">Order 940564000</h3><div class="order-status completed"><svg class="svg-inline--fa fa-check-circle fa-w-16 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><span>Complete</span></div></header><section class="order-details"><div class="order-details__summary"><span class="order-details__price">£92.75</span> <span class="order-details__count">7 item(s)</span></div><time class="order-details__date" datetime="21st November 2024 4:32 PM">21st November 2024 4:32 PM</time></section><div class="view-more"><a class="link" href="/"><span>View More</span> <svg class="svg-inline--fa fa-arrow-right fa-w-14 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></a></div></article><article class="active-orders__item"><header class="order-header"><h3 class="order-header__title">Order 940520023</h3><div class="order-status cancelled"><svg class="svg-inline--fa fa-times fa-w-10 icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg><span>Cancelled</span></div></header><section class="order-details"><div class="order-details__summary"><span class="order-details__price">£32.00</span> <span class="order-details__count">1 item(s)</span></div><time class="order-details__date" datetime="28th October 2024 7:29 AM">28th October 2024 7:29 AM</time></section><div class="view-more"><a class="link" href="/"><span>View More</span> <svg class="svg-inline--fa fa-arrow-right fa-w-14 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></a></div></article>'
+    },
+    {
+      "page": 2,
+      "html": '<article class="active-orders__item"><header class="order-header"><h3 class="order-header__title">Order 940564001</h3><div class="order-status completed"><svg class="svg-inline--fa fa-check-circle fa-w-16 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><span>Complete</span></div></header><section class="order-details"><div class="order-details__summary"><span class="order-details__price">£92.75</span> <span class="order-details__count">7 item(s)</span></div><time class="order-details__date" datetime="21st November 2024 4:32 PM">21st November 2024 4:32 PM</time></section><div class="view-more"><a class="link" href="/"><span>View More</span> <svg class="svg-inline--fa fa-arrow-right fa-w-14 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></a></div></article><article class="active-orders__item"><header class="order-header"><h3 class="order-header__title">Order 940520002</h3><div class="order-status cancelled"><svg class="svg-inline--fa fa-times fa-w-10 icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg><span>Cancelled</span></div></header><section class="order-details"><div class="order-details__summary"><span class="order-details__price">£32.00</span> <span class="order-details__count">1 item(s)</span></div><time class="order-details__date" datetime="28th October 2024 7:29 AM">28th October 2024 7:29 AM</time></section><div class="view-more"><a class="link" href="/"><span>View More</span> <svg class="svg-inline--fa fa-arrow-right fa-w-14 icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></a></div></article>'
+    }
   ]
 }

package/src/js/emulation/my-orders-local.js

@@ -0,0 +1,41 @@
+function getOrdersHtmlByCurrentPage({currentPage}) {
+  const matchingData = Wick.FEMock.orders.find(item => item.page === currentPage);
+  return matchingData.html;
+}
+
+function initMyOrdersEvent() {
+  if (!Wick?.MyOrders?.events) {
+    return;
+  }
+
+  $(window).on(Wick.MyOrders.events.MONTHLY_VIEW_EVENT, function ({ detail: { resolve, reject, payload } }) {
+    setTimeout(() => {
+      return resolve({});
+    }, 500);
+  });
+
+  $(window).on(Wick.MyOrders.events.SORT_BY_EVENT, function ({ detail: { resolve, reject, payload } }) {
+    setTimeout(() => {
+      return resolve({url: '/sitemap.html'});
+    }, 500);
+  });
+
+  $(window).on(Wick.MyOrders.events.CATEGORY_EVENT, function ({ detail: { resolve, reject, payload } }) {
+    setTimeout(() => {
+      return resolve({url: '/sitemap.html'});
+    }, 500);
+  });
+
+  $(window).on(Wick.MyOrders.events.LOAD_MORE_EVENT, function ({ detail: { resolve, reject, payload } }) {
+    setTimeout(() => {
+      resolve({
+        innerHTML: getOrdersHtmlByCurrentPage(payload),
+        callback: () => {}
+      });
+    }, 1500);
+  });
+}
+
+$(document).ready(function () {
+  initMyOrdersEvent();
+});

package/src/js/page/basket/summary-mobile.js

@@ -0,0 +1,22 @@
+const summaryMobileEl = {
+  summaryAside: '.summary__aside',
+  backToTop : '#back-to-top',
+  canDisplayPayPal: '#canDisplayPayPalOnBasketPage',
+};
+
+export function addClassToSummaryAside(data) {
+  const payPalEnabled = data?.paymentInfos?.payPalEnabled;
+  const clickAndCollectOnly = data.clickAndCollectOnly;
+  const canDisplayPayPal = $(summaryMobileEl.canDisplayPayPal).val() === 'true';
+  const isPayPalAllowed = payPalEnabled && clickAndCollectOnly && canDisplayPayPal;
+  const $aside = $(summaryMobileEl.summaryAside);
+  const $backToTop = $(summaryMobileEl.backToTop);
+
+  if (isPayPalAllowed === false) {
+    $aside.addClass('single-button');
+    $backToTop.addClass('single-button');
+  } else {
+    $aside.removeClass('single-button');
+    $backToTop.removeClass('single-button');
+  }
+}