wickes-css2 2.94.0-develop.5 → 2.94.0-ic-298-mega-nav.1

package/src/elements/dropdown.hbs

@@ -1,21 +1,10 @@
 <div class="ddn {{mod}} {{#if error}}ddn_error{{/if}}">
   <select id="{{id}}" name="{{id}}" {{#if disabled}}disabled{{/if}}>
-    {{#if options}}
-      {{#each options as |option|}}
-        <option
-          {{#if (eq @index ../selectedIndex)}}selected{{/if}}
-          value="{{option.value}}"
-        >
-          {{option.label}}
-        </option>
-      {{/each}}
-    {{else}}
-      <option value="" 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>
-      <option value="item4">Item value 4</option>
-    {{/if}}
+    <option value="" disabled selected hidden>{{placeholder}}</option>
+    <option>Item value</option>
+    <option>Item value 2</option>
+    <option>Item value 3</option>
+    <option>Item value 4</option>
   </select>
   <span class="icon">
     <i class="fas fa-chevron-down"></i>

package/src/elements/form-row.hbs

@@ -22,7 +22,7 @@
       {{/if}}
     {{/unless}}
     {{#if dropdown}}
-      {{> dropdown mod=ddn-mod options=options selectedIndex=selectedIndex }}
+      {{> dropdown mod=ddn-mod }}
     {{/if}}
     {{#if infoIcon}}
       {{> info-icon modification="icon-info" title=infoIcon data-container=(concat "." infoIcon-uid)  data-placement="top"}}

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}} {{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}}>
+  <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}}>
 {{else}}
-  <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}}>
+  <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}}>
 {{/if}}

package/src/js/components/date-selection.js

@@ -8,20 +8,24 @@ Wick.DateSelection = function () {
         calendarCell = $(calendarCellClassName),
         calendarCellSelected = 'calendar__cell_selected',
         calendarRowExtended = '.calendar__row_extended',
+        deliverySelection = $('.delivery-selection'),
+        deliverySelectionMobile = $('.delivery-selection-mobile'),
         inputField = '.delivery-types__slot label',
         confirmButton = '.delivery-types__confirm',
+        changeDateLinks = '.delivery-time__show-calendar-link, .delivery-selection__show-calendar-link',
         validationError = $('.delivery-types__error'),
         validationErrorShow = 'delivery-types__error-show',
+        deliverySelectionShow = 'delivery-selection-show',
         deliveryTypesHide = 'delivery-types-hide',
         deliveryTypesSlotLabel = $(inputField),
         closeIcon = $('.delivery-types__accordion'),
         deliveryTypesInnerStr = '.delivery-types__inner',
         dateSelection = '.date-selection',
         dateSelectionTimeVisible = 'date-selection_time-visible',
-        deliveryContainer = $('.delivery-container'),
+        deliveryTypesWrap = $('.delivery-types-wrap'),
         deliveryTypesBtn = 'button.btn',
         deliveryTypeBtnClassSecondary = 'btn-secondary',
-        deliveryBtnClass = 'delivery-btn';
+        deliveryTypeBtnClass = 'delivery-type__action-btn-primary';
 
     function init() {
         var count = 0;
@@ -46,9 +50,9 @@ Wick.DateSelection = function () {
         }
 
         componentDateSelection.on('click', deliveryTypesBtn, function () {
-            $(this).parent(deliveryContainer).find(deliveryTypesBtn).removeClass(deliveryBtnClass);
-            $(this).parent(deliveryContainer).find(deliveryTypesBtn).addClass(deliveryTypeBtnClassSecondary);
-            $(this).addClass(deliveryBtnClass);
+            $(this).parent(deliveryTypesWrap).find(deliveryTypesBtn).removeClass(deliveryTypeBtnClass);
+            $(this).parent(deliveryTypesWrap).find(deliveryTypesBtn).addClass(deliveryTypeBtnClassSecondary);
+            $(this).addClass(deliveryTypeBtnClass);
             $(this).removeClass(deliveryTypeBtnClassSecondary);
         });
 
@@ -75,7 +79,9 @@ Wick.DateSelection = function () {
                 if ($(window).width() < 767) {
                     var rowExtendedBlock = $(this).closest(calendarRowExtended);
                     rowExtendedBlock.slideUp();
+                    deliverySelectionMobile.show();
                 } else {
+                    deliverySelection.addClass(deliverySelectionShow);
                     $deliveryTypes.addClass(deliveryTypesHide);
                 }
             } else {
@@ -106,6 +112,7 @@ Wick.DateSelection = function () {
 
         calendarCell.on("click", function () {
             $deliveryTypes.removeClass(deliveryTypesHide);
+            deliverySelection.removeClass(deliverySelectionShow);
 
             $(deliveryTypesInnerStr).find('input').each(function () {
                 if ($(this).attr('checked')) {
@@ -141,6 +148,12 @@ Wick.DateSelection = function () {
                 }
             }
         });
+
+        $(changeDateLinks).on("click", function () {
+            $(this).closest(dateSelection).removeClass(dateSelectionTimeVisible);
+            deliverySelection.removeClass(deliverySelectionShow);
+            calendarCell.removeClass(calendarCellSelected);
+        });
     }
 
     if (!componentDateSelection.length) {
@@ -153,7 +166,8 @@ Wick.DateSelection = function () {
         closeIcon.unbind('click');
         componentDateSelection.unbind('click');
         calendarCell.unbind('click');
-        deliveryContainer.unbind('click');
+        $(changeDateLinks).unbind('click');
+        deliveryTypesWrap.unbind('click');
     }
 
     $(window).on('resize', _.debounce(function () {

package/src/js/components/general/main-nav.js

@@ -34,7 +34,7 @@ Wick.MainNav = (function () {
                       <ul class="main-nav__menu">
                           ${menuSection.children.map(createMainNavItems).join('')}
                       </ul>
-                    </div>
+                  </div>
                 </li>
               `
           } else {
@@ -66,6 +66,9 @@ Wick.MainNav = (function () {
       function createMainNavItems(menuSection) {
         if (menuSection) {
           if (menuSection.children && menuSection.children.length) {
+            if(menuSection.originalChildrenCount) {
+              console.log(menuSection)
+            }
             return `
               <li class="main-nav__menu__item nav-col">
                 <a href="${checkUrl(menuSection)}" class="main-nav__menu__label ${setClass(menuSection, 2)}" tabindex="0" ${setColor(menuSection)}>
@@ -259,25 +262,31 @@ Wick.MainNav = (function () {
         });
       }
 
-      checkIfRealEnvironment();
+      function isSSR() {
+        return $mainNav.attr('data-ssr') === 'true'
+      }
+
+      if (isSSR()) {
+        Wick.Nav();
+        Wick.Responsive.callBr();
+      } else {
+        checkIfRealEnvironment();
+      }
     }
   }
 })();
 
 $(document).ready(function () {
-  function init() {
-    const defaultOptions = {
-      type: 'GET',
-      cache: true,
-      link: window.location.origin,
-      local: false
-    };
+  const defaultOptions = {
+    type: 'GET',
+    cache: true,
+    link: window.location.origin,
+    local: false
+  };
 
-    if (!$('#main-nav').length) {
-      return;
-    }
-    Wick.MainNav.createMainNav(defaultOptions);
+  if (!$('#main-nav').length) {
+    return;
   }
 
-  init();
+  Wick.MainNav.createMainNav(defaultOptions);
 });

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

@@ -36,11 +36,7 @@ Wick.VatToggle = {
   },
 
   getSwitcherState: function() {
-    if ($(Wick.VatToggle.el.switchVatInput).length) {
-      return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
-    } else {
-      return null;
-    }
+    return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
   },
 
   createToggleEvent: function(isToggled) {
@@ -69,28 +65,6 @@ Wick.VatToggle = {
     $(includingVatEl).toggleClass(hiddenClassName);
     $(excludingVat).toggleClass(hiddenClassName);
   },
-  reapplyDisplayClass: function () {
-    const includingVatEl = Wick.VatToggle.el.includingVat;
-    const excludingVatEl = Wick.VatToggle.el.excludingVat;
-    const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME;
-
-    let vatState = null;
-
-    // check switcher state for web or cookie for app
-    if (Wick.VatToggle.getSwitcherState() !== null) {
-      vatState = Wick.VatToggle.getSwitcherState();
-    } else {
-      vatState = Wick.VatToggle.isOn();
-    }
-
-    if (vatState) {
-      $(includingVatEl).addClass(hiddenClassName);
-      $(excludingVatEl).removeClass(hiddenClassName);
-    } else {
-      $(includingVatEl).removeClass(hiddenClassName);
-      $(excludingVatEl).addClass(hiddenClassName);
-    }
-  },
 
   updateGlobalClass: function () {
     const includingVatGlobal = Wick.VatToggle.el.includingVatGlobalClass;

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

@@ -8,7 +8,7 @@ Wick.LeaveEvent = {
   },
   proceedBrowserLeave: true,
   initialFormState: {},
-  makeLeaveByAction(e, form, callback) {
+  makeLeaveByAction(e, form) {
     const currentState = Wick.LeaveEvent.getState(form);
     const isDifferent = !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
 
@@ -17,63 +17,20 @@ Wick.LeaveEvent = {
       Wick.LeaveEvent.showCustomModal();
       Wick.LeaveEvent.proceedBrowserLeave = false;
     }
-
-    if (callback && !isDifferent) {
-      callback();
-    }
   },
   makeLeaveByBrowser(form) {
     const currentState = Wick.LeaveEvent.getState(form);
     const isDifferent = !_.isEqual(currentState, Wick.LeaveEvent.initialFormState);
 
-    const csrfTokenCheck = Wick.LeaveEvent.isCsrfTokenEqual(currentState, Wick.LeaveEvent.initialFormState);
-
-    if (isDifferent && (csrfTokenCheck || csrfTokenCheck === undefined)) {
+    if (isDifferent) {
       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) {
-    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;
+    return $(form).serializeArray();
   },
   checkLeavePopup() {
     if (Wick.LeaveEvent.proceedBrowserLeave) {
@@ -83,12 +40,12 @@ Wick.LeaveEvent = {
   removeLeaveEvent() {
     $(window).off('beforeunload', Wick.LeaveEvent.checkLeavePopup);
   },
-  bindEvent(form = 'form', leaveBtn, submitBtn, callback) {
+  bindEvent(form = 'form', leaveBtn, submitBtn) {
     Wick.LeaveEvent.initialFormState = Wick.LeaveEvent.getState(form);
     Wick.LeaveEvent.el.form = form;
 
     $(leaveBtn).on('click', (e) => {
-      Wick.LeaveEvent.makeLeaveByAction(e, form, callback);
+      Wick.LeaveEvent.makeLeaveByAction(e, form);
     });
 
     if ($(Wick.LeaveEvent.el.leavePopup).length) {
@@ -100,9 +57,6 @@ Wick.LeaveEvent = {
     if ($(submitBtn).length) {
       $(submitBtn).on('click', (e) => {
         Wick.LeaveEvent.removeLeaveEvent();
-        if (callback) {
-          callback();
-        }
       });
     }
 

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

@@ -48,6 +48,7 @@ Wick.BigWinsProto = function () {
     $defaultInfo: $('.default-store__det'),
     $store: $('.store'),
     $chosenItem: $('.chosen__item'),
+    $storeAct: $('.store__act'),
     $storeCount: $('.store__count'),
     $stockList: $('.stock__list'),
     $stockTarget: $('.stock__target'),
@@ -63,6 +64,7 @@ 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/date-selection.js

@@ -4,6 +4,7 @@ Wick.DateSelection = (function(){
     cell = '.calendar__cell_cnt',
     selectedCell = 'calendar__cell_selected',
     isSelected = 'date-selection_selected',
+    backToCalendar = '.delivery-time__show-calendar-link',
     isDateSelected = false;
 
   var selectTimeSlot = function(e){
@@ -14,12 +15,32 @@ Wick.DateSelection = (function(){
     isDateSelected = true;
   };
 
+  var mobileView = function(){
+    var isTimeSlotsVisible = 'date-selection_time-visible';
+
+    $self
+    .off('.time')
+    .removeClass(isTimeSlotsVisible)
+    .on('click.time', cell, function(){
+      $self.addClass(isTimeSlotsVisible);
+    })
+    .on('click.time', backToCalendar, function(){
+      $self.removeClass(isTimeSlotsVisible);
+    });
+  };
+
   var init = function () {
     if (!$self.length) {
       return;
     }
 
     $self.on('click', cell, selectTimeSlot);
+    new SimpleBar($self.find('.delivery-types__inner')[0]);
+
+    if (Wick.Responsive.getCurrentBreakpoint() === 'down-sm') {
+      mobileView();
+    }
+    Wick.Responsive.onBreakpoint(mobileView, 'down-sm');
   }
 
   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', 'search-store'],
+    excludedClassesForForm = ['header', 'quiz-modal__form'],
     // validationError = '<div class="form-row__error">Error message here</div>',
     $forgotPassword = $('.link-forgot-password'),
     scenarios = [{

package/src/js/emulation/main-nav-local.js

@@ -1,19 +1,21 @@
 var Wick = Wick || {};
-Wick.MainNavLocal = (function(){
+
+Wick.MainNavLocal = function(){
     function init() {
         var localOptions = {
             local: true,
             mockData: Wick.MainNavData.returnData()
         };
 
-        if (!$('#main-nav').length) {
+        if (!$('#main-nav').length || !$('.ssc-nav').length) {
             return;
         }
         
+
         setTimeout(()=> {
             Wick.MainNav.createMainNav(localOptions);
         }, 2000)
     }
 
-    init();
-})();
+    init()
+}();

package/src/js/page/plp-load-more.js

@@ -38,7 +38,6 @@ Wick.PLPLoadMore = {
 
         Wick.PLPLoadMore.showNewCards(response);
         Wick.PLPLoadMore.toggleLoadMoreBtn();
-        Wick.VatToggle.reapplyDisplayClass();
       })
       .finally(() => {
         hideLoader(Wick.PLPLoadMore.el.loader);

package/src/layouts/my-account.hbs

@@ -52,4 +52,4 @@
       {{> scripts }}
     {{/block}}
   </body>
-</html>
+</html>

package/src/page_checkout_delivery-address.html

@@ -0,0 +1,70 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-address" title="Checkout - Delivery address" logout=true isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps active-step-index="1" }}
+{{/content}}
+{{#content "main"}}
+<div class="delivery-address">
+    <div data-addresses>
+        {{> user-address-simplified radioName="checkout-address-radio" modal="modalDeliveryEdit" mod="js-selectable"
+        selectedAddress=true simpleAddress=true isDeleted=true hasRemove=true}}
+    </div>
+    <div data-new-address style="display: none;">
+        <div class="delivery-address__btn-back">
+            <a href="#" class="link-primary btn-back-to-addresses">Back to choose address</a>
+        </div>
+        <form class="form-wrapper delivery-address-form" id="form-checkout-your-details" data-action="./page_checkout_delivery-details.html">
+            <div class="delivery-address-form__inner">
+                {{> checkout_your-details uid="cyd1" address-list=true}}
+            </div>
+        </form>
+    </div>
+</div>
+
+
+
+<div class="delivery-address__actions">
+    <a href="#" class="btn-new-address">Add new address</a>
+    <a href="./page_checkout_delivery-details.html" class="btn_full btn btn-action checkout-widget__outer-button btn-delivery-details btn-md-lg-continue-delivery-details">Continue to delivery details
+        <span class="icon">
+            <i class="fas fa-arrow-right"></i>
+        </span>
+    </a>
+</div>
+{{/content}}
+{{#content "aside"}}
+{{> checkout_order-summary label="Subtotal: "}}
+<a href="./page_checkout_delivery-details.html" class="btn_full btn btn-action checkout-widget__outer-button btn-delivery-details">Continue to delivery details
+    <span class="icon">
+      <i class="fas fa-arrow-right"></i>
+    </span>
+</a>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="js/page/checkout-delivery-address.js"></script>
+
+{{#extend "modal" id="modalDeliveryEdit" title="Edit delivery address" fullWidth=true classMod="edit-delivery-addr-guest"}}
+{{#content "sections"}}
+
+{{#extend "modal-body-section" customSectionClass="edit-delivery-addr-guest__form"}}
+{{#content "body"}}
+<form class="form-wrapper" id="checkout-your-details-modal">
+    {{> checkout_your-details open-delivery-block="true" uid="cyd2"}}
+    <div class="form-row form-row__action">
+        <div class="form-row__col-btn">
+            <button class="btn btn-action btn_full">
+                <span class="btn__text">Continue to delivery details</span>
+                <span class="icon">
+                    <i class="fas fa-arrow-right"></i>
+                 </span>
+            </button>
+        </div>
+    </div>
+</form>
+{{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}