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

package/src/data/my-account/page_default-store.json

@@ -0,0 +1,158 @@
+{
+  "default-store": {
+    "title": "Default Store",
+    "subtitle": "Add default store",
+    "subtitleChange": "Change default store",
+    "searchField": {
+      "id": "postcode",
+      "label": "Search by postcode/town name",
+      "placeholder": "Postcode / city",
+      "iconSearch": "fas fa-search",
+      "iconLocation": "fas fa-crosshairs",
+      "iconError": "fas fa-exclamation-triangle",
+      "iconCross": "far fa-times fa-lg",
+      "error": "Check that you’ve entered a valid postcode or place name"
+    },
+    "unavailable": {
+      "title": "You have no default store",
+      "icon": "fas fa-warehouse"
+    },
+    "breadcrumbs": [
+      {
+        "url": "/",
+        "text": "Home"
+      },
+      {
+        "url": "/page_my-account.html",
+        "text": "My Account"
+      },
+      {
+        "url": "/page_default-store-page.html",
+        "text": "Default Store"
+      }
+    ],
+    "menu": [
+      {
+        "icon": "fas fa-user",
+        "title": "My Account",
+        "link": "./page_my-account.html"
+      },
+      {
+        "icon": "fas fa-box-open",
+        "link": "./page_my-account_order-history.html",
+        "title": "My Orders",
+        "description": "View and manage your orders."
+      },
+      {
+        "icon": "fas fa-address-card",
+        "link": "./page_my-account_personal-details.html",
+        "title": "Personal Details",
+        "description": "View and update your Personal Details."
+      },
+      {
+        "icon": "fas fa-book",
+        "link": "./page_my-account_address-book.html",
+        "title": "Address Book",
+        "description": "Manage your delivery addresses."
+      },
+      {
+        "icon": "fas fa-sliders-h",
+        "link": "./page_marketing-preferences.html",
+        "title": "Marketing Preferences",
+        "description": "Manage  how you would like to receive the latest offers and deals."
+      },
+      {
+        "icon": "fas fa-list",
+        "link": "./page_my-shopping-list.html",
+        "title": "Project Lists",
+        "description": "Save products to your project lists."
+      },
+      {
+        "icon": "fas fa-warehouse",
+        "link": "./page_default-store-page.html",
+        "title": "Default Store",
+        "description": "Set your default store."
+      }
+    ],
+    "currentStore": {
+      "id": 1,
+      "name": "Blackheath",
+      "phone": "01869 356200",
+      "address": "271 Winchester Road, Southampton, Hampshire, SO16 6TP",
+      "facilities": [
+        {
+          "title": "Burger van",
+          "icon": "fas fa-burger-soda"
+        },
+        {
+          "title": "Kitchen & bathroom displays",
+          "icon": "fas fa-drafting-compass"
+        },
+        {
+          "title": "Installation service",
+          "icon": "fas fa-user-hard-hat"
+        },
+        {
+          "title": "Design appointments",
+          "icon": "fas fa-user-friends"
+        },
+        {
+          "title": "Paint mixing",
+          "icon": "fas fa-paint-roller"
+        }
+      ],
+      "openingTimes": [
+        {
+          "day": "Monday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Tuesday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Wednesday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Thursday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Friday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Saturday",
+          "time": "07:00 AM - 08:00 PM"
+        },
+        {
+          "day": "Sunday",
+          "time": "10:00 AM - 04:00 PM"
+        }
+      ],
+      "specialOpeningTimes": [
+        {
+          "name": "Good Friday",
+          "day": "Fri 10 Apr",
+          "time": "10:00 AM - 4:00 PM"
+        },
+        {
+          "name": "Saturday",
+          "day": "Sat 11 Apr",
+          "time": "Closed"
+        },
+        {
+          "name": "Easter Sunday",
+          "day": "Sun 12 Apr",
+          "time": "Closed"
+        },
+        {
+          "name": "Easter Monday",
+          "day": "Mon 13 Apr",
+          "time": "10:00 AM - 4:00 PM"
+        }
+      ]
+    }
+  }
+}

package/src/elements/dropdown.hbs

@@ -10,7 +10,7 @@
         </option>
       {{/each}}
     {{else}}
-      <option value="" disabled selected hidden>{{placeholder}}</option>
+      <option value="item0" disabled selected hidden>{{placeholder}}</option>
       <option value="item1">Item value</option>
       <option value="item2">Item value 2</option>
       <option value="item3">Item value 3</option>

package/src/elements/input.hbs

@@ -1,7 +1,7 @@
 {{#if textarea}}
   <textarea class="tbx {{#if textarea}}tbx_textarea{{/if}} {{#if error}}tbx_error{{/if}}" rows="{{textareaRows}}" cols="{{textareaCols}}" value="{{value}}" maxlength="{{maxlength}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if disabled}}disabled{{/if}}></textarea>
 {{else if type}}
-  <input type="{{type}}" class="tbx {{#if error}}tbx_error{{/if}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}}>
+  <input type="{{type}}" class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}} {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}>
 {{else}}
-  <input type="text" class="tbx {{#if error}}tbx_error{{/if}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" placeholder="{{placeholder}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}}>
+  <input type="text" class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" placeholder="{{placeholder}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}} {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}>
 {{/if}}

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 = [{