wickes-css2 2.103.0-RG-1587-replace-klarna-logo-with-svg-image.1 → 2.103.0-RG-1742-billie-30-60-90-days.2

package/src/js/components/product-banner.js

@@ -0,0 +1,148 @@
+var Wick = Wick || {};
+Wick.ProductBanner = {
+  el: {
+    banners: '.card-product-banner',
+    bannerInactiveClass: 'card-product-banner--inactive',
+    productsWrap: '.products-list-v2',
+    $products: $('.product-card'),
+    attrPositionDesktop: 'data-desktop-position',
+    attrPositionMobile: 'data-mobile-position',
+    attrRequiredAmountDesktop: 'data-required-amount-desktop',
+    attrRequiredAmountMobile: 'data-required-amount-mobile',
+    hide: 'd-none'
+  },
+  currentBreakpoint: null,
+  checkProductsInColumn() {
+    Wick.ProductBanner.addInactiveClasses();
+    Wick.ProductBanner.arrangeBannersInRightOrder();
+    $(Wick.ProductBanner.el.banners).each((index, banner) => {
+      Wick.ProductBanner.hideBannerDueLimit(banner, index);
+      Wick.ProductBanner.moveBannerToSpecifiedPosition(banner);
+    });
+  },
+  moveBannerToSpecifiedPosition(banner) {
+    const $listSlots = Wick.ProductBanner.getListSlots();
+    const bannerPosition = Wick.ProductBanner.getBannerPosition(banner) - 2;
+    const listSlotsLength = $listSlots.length;
+
+    if(Wick.ProductBanner.isBannerVisible(banner)) {
+      if (bannerPosition <= listSlotsLength) {
+        if ($listSlots[bannerPosition]) {
+          Wick.ProductBanner.showBanner(banner);
+          Wick.ProductBanner.removeInactiveClass(banner);
+          Wick.ProductBanner.moveBanner(banner, $listSlots[bannerPosition]);
+        } else {
+          Wick.ProductBanner.hideBanner(banner);
+          Wick.ProductBanner.coverEdgeCases(banner);
+        }
+      } else {
+        Wick.ProductBanner.hideBanner(banner);
+      }
+    }
+  },
+  moveBanner(banner, targetElement) {
+    $(banner).remove();
+    $(targetElement).after(banner);
+  },
+  hideBanner(banner) {
+    $(banner).addClass(Wick.ProductBanner.el.hide);
+  },
+  showBanner(banner) {
+    $(banner).removeClass(Wick.ProductBanner.el.hide);
+  },
+  isBannerVisible(banner) {
+    return !$(banner).hasClass(Wick.ProductBanner.el.hide);
+  },
+  hideBannerDueLimit(banner) {
+    const bannerMinLimit = Wick.ProductBanner.getBannerLimit(banner) - 1;
+    const $listSlots = Wick.ProductBanner.getListSlots();
+    const listProductsLength = $listSlots.length;
+    Wick.ProductBanner.showBanner(banner);
+
+    if (bannerMinLimit > listProductsLength) {
+      Wick.ProductBanner.hideBanner(banner);
+    }
+  },
+  getBannerPosition(banner) {
+    const isMobile = Wick.ProductBanner.isMobileResolution();
+    const positionAttribute = isMobile
+      ?  Wick.ProductBanner.el.attrPositionMobile
+      : Wick.ProductBanner.el.attrPositionDesktop
+
+    return banner.hasAttribute(positionAttribute)
+      ? Number(banner.getAttribute(positionAttribute))
+      : Number(Wick.ProductBanner.getListLength() + Wick.ProductBanner.getBannersAmount());
+  },
+  getBannerLimit(banner) {
+    const isMobile = Wick.ProductBanner.isMobileResolution();
+
+    const limitAttribute = isMobile
+      ? Wick.ProductBanner.el.attrRequiredAmountMobile
+      : Wick.ProductBanner.el.attrRequiredAmountDesktop;
+
+    return banner.hasAttribute(limitAttribute)
+      ? Number(banner.getAttribute(limitAttribute))
+      : 0;
+  },
+  isMobileResolution() {
+    return Wick.Responsive.getCurrentBreakpoint() !== 'up-lg';
+  },
+  getListLength() {
+    const $listItems = $(Wick.ProductBanner.el.productsWrap).find('.product-card');
+    return $listItems.length;
+  },
+  getBannersAmount() {
+    return $(Wick.ProductBanner.el.banners).length;
+  },
+  getProductsAmount() {
+    return Wick.ProductBanner.el.$products.length;
+  },
+  arrangeBannersInRightOrder() {
+    $(Wick.ProductBanner.el.banners).sort((a, b) => {
+      let bannerPositionA = Wick.ProductBanner.getBannerPosition(a);
+      let bannerPositionB = Wick.ProductBanner.getBannerPosition(b);
+
+      return bannerPositionA - bannerPositionB
+    }).appendTo(Wick.ProductBanner.el.productsWrap);
+  },
+  addInactiveClasses() {
+    $(Wick.ProductBanner.el.banners).addClass(Wick.ProductBanner.el.bannerInactiveClass);
+  },
+  removeInactiveClass(banner) {
+    $(banner).removeClass(Wick.ProductBanner.el.bannerInactiveClass)
+  },
+  insertFirstBanner(banner) {
+    const bannerPosition = Wick.ProductBanner.getBannerPosition(banner);
+
+    if (bannerPosition === 1) {
+      Wick.ProductBanner.showBanner(banner);
+      Wick.ProductBanner.removeInactiveClass(banner);
+      $(banner).remove();
+      $(Wick.ProductBanner.el.productsWrap).prepend(banner);
+    }
+  },
+  coverEdgeCases(banner) {
+    Wick.ProductBanner.insertFirstBanner(banner);
+  },
+  getListSlots() {
+    return $(Wick.ProductBanner.el.productsWrap)
+      .find('.product-card, .card-product-banner:not(.card-product-banner--inactive)');
+  },
+  init() {
+    Wick.Responsive.onResize(function () {
+      if(Wick.ProductBanner.currentBreakpoint !== Wick.Responsive.getCurrentBreakpoint()) {
+        Wick.ProductBanner.currentBreakpoint = Wick.Responsive.getCurrentBreakpoint()
+        Wick.ProductBanner.checkProductsInColumn();
+        $(window).trigger('productBannerPositionChanged');
+      }
+    });
+  }
+};
+
+$(document).ready(function () {
+  if (!Wick.ProductBanner.getBannersAmount() || !Wick.ProductBanner.getProductsAmount()) {
+    return;
+  }
+
+  Wick.ProductBanner.init();
+})

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

@@ -1,20 +1,20 @@
 var Wick = Wick || {};
 
-Wick.PaymentDetails = (function () {
+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 &&
+  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){
+        $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
+          scrollTop: $('.checkout-payment-details__card-details').offset().top - 15,
         }, 700);
         return false;
       }
@@ -22,14 +22,14 @@ Wick.PaymentDetails = (function () {
       return false;
     });
 
-    $('.checkout-payment-details__card-details').on('submit', function(){
+    $('.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()){
+        $form.find('#security-code').val()) {
         window.location.href = isGuestPage
           ? './page_checkout_confirmation_guest.html'
           : './page_checkout_confirmation.html';

package/src/js/emulation/forms.js

@@ -1,5 +1,5 @@
 var Wick = Wick || {};
-Wick.Forms = (function(){
+Wick.Forms = (function() {
   var fieldRow = '.form-row[data-row-required]',
     field = '.form-row__field',
     fieldError = '.form-row__error',
@@ -9,43 +9,44 @@ Wick.Forms = (function(){
     // validationError = '<div class="form-row__error">Error message here</div>',
     $forgotPassword = $('.link-forgot-password'),
     scenarios = [{
-        condition: function(){
-          // fill in the valid returning customer's details
-          // Email: responsive@test.com; Password: 123456
-          return $('#login-email').val() === 'responsive@test.com' && $('#password').val() === '123456';
-        },
-        action: function(){
-          // redirected to the homepage
-          Wick.User.login();
-          window.location.href = './';
-        }
+      condition: function() {
+        // fill in the valid returning customer's details
+        // Email: responsive@test.com; Password: 123456
+        return $('#login-email').val() === 'responsive@test.com' && $('#password').val() === '123456';
+      },
+      action: function() {
+        // redirected to the homepage
+        Wick.User.login();
+        window.location.href = './';
       },
+    },
       {
-        condition: function(){
+        condition: function() {
           // continue as a new user with "test+random@user.com"
           return $('#registration-email').val().length;
           // return $('#registration-email').val() === 'test+random@user.com';
         },
-        action: function(){
+        action: function() {
           // redirected to the register form
           window.location.href = './page_registration.html';
-        }
+        },
       },
       {
-        condition: function(){
+        condition: function() {
           // When I click forgotten password link
         },
-        action: function(){
+        action: function() {
           // redirected on the "Forgotten Password" page
           window.location.href = './page_forgotten-password.html';
-        }
-      }
-    ];
+        },
+      },
+    ],
 
-  validationError = function (errorMsg) {
-    return `<div class="form-row__error"> ${errorMsg || 'Error message here'}</div>`
-  }
-  function isElementInViewport (el) {
+    validationError = function(errorMsg) {
+      return `<div class="form-row__error"> ${errorMsg || 'Error message here'}</div>`;
+    };
+
+  function isElementInViewport(el) {
     if (typeof jQuery === 'function' && el instanceof jQuery) {
       el = el[0];
     }
@@ -58,15 +59,21 @@ Wick.Forms = (function(){
     );
   }
 
-  var showValidationErrors = function (form, errorMsg) {
+  var showValidationErrors = function(form, errorMsg) {
     var $form = $(form);
     if (!$form.hasClass(formInvalid)) {
       $form.find('.form-row__error').remove();
-      $form.addClass(formInvalid).find(fieldRow).append(validationError(errorMsg)).addClass(rowValidationError);
+      var $rows = $form.find(fieldRow).filter(function() {
+        return $(this).css('display') !== 'none';
+      });
+
+      $rows.append(validationError(errorMsg)).addClass(rowValidationError);
     }
 
-    var $firstMsg = $form.find(fieldRow).first();
-    if($firstMsg.length && !isElementInViewport($firstMsg)){
+    var $firstMsg = $form.find(fieldRow).filter(function() {
+      return $(this).css('display') !== 'none';
+    }).first();
+    if ($firstMsg.length && !isElementInViewport($firstMsg)) {
       var inModal = $firstMsg.closest('.modal').length,
         $scrollableEl = inModal ? $firstMsg.closest('.modal') : $('html, body'),
         y = inModal ? 0 : $firstMsg.offset().top - 30;
@@ -75,22 +82,26 @@ Wick.Forms = (function(){
     }
   };
 
-  var clearValidationErrors = function (form) {
+  var clearValidationErrors = function(form) {
     var $form = $(form);
-    if ($form.hasClass(formInvalid)) {
-      $form.removeClass(formInvalid)
-        .find(fieldRow).removeClass(rowValidationError)
-        .find(fieldError).remove();
-    }
+
+    $form.removeClass(formInvalid);
+
+    $form.find(fieldRow)
+      .removeClass(rowValidationError)
+      .find(fieldError).remove();
+
+    $form.find(fieldError).remove();
   };
 
-  var handleSmoothScroll = function () {
+
+  var handleSmoothScroll = function() {
     $('html, body').animate({
-      scrollTop: $('.cards-store-list').offset().top - 60
+      scrollTop: $('.cards-store-list').offset().top - 60,
     }, 300);
   };
 
-  var handleFormSubmit = function () {
+  var handleFormSubmit = function() {
     var form = this;
 
     if ($(form).is('#form-login') || $(form).is('#form-register')) {
@@ -104,21 +115,21 @@ Wick.Forms = (function(){
     }
 
     if ($(form).is('#form-forgotten-password')) {
-      if ($(form).find('#email').val().length){
+      if ($(form).find('#email').val().length) {
         window.location.href = './page_upd-pass.html';
         return false;
       }
     }
 
     if ($(form).is('#form-forgotten-password-popup')) {
-      if ($(form).find('#email').val().length){
+      if ($(form).find('#email').val().length) {
         window.location.href = './page_checkout_sign-in.html';
         return false;
       }
     }
 
     if ($(form).is('#checkout-form-forgotten-password-popup')) {
-      if ($(form).find('#email').val().length){
+      if ($(form).find('#email').val().length) {
         $('.modal-reset-wrap').addClass('d-block');
         $('.request-pass').addClass('d-none');
         $('.modal-title').text('Password Reset');
@@ -127,7 +138,7 @@ Wick.Forms = (function(){
     }
 
     if ($(form).is('.update-pass')) {
-      if ($(form).find('#new-password').val().length && $(form).find('#confirmed-password').val().length){
+      if ($(form).find('#new-password').val().length && $(form).find('#confirmed-password').val().length) {
         window.location.href = './page_login.html';
         return false;
       }
@@ -136,7 +147,7 @@ Wick.Forms = (function(){
     if ($(form).is('.change-email')) {
       if ($(form).find('#new-email').val().length &&
         $(form).find('#confirm-new-email').val().length &&
-        $(form).find('#password').val().length){
+        $(form).find('#password').val().length) {
         window.location.href = './page_my-account.html';
         return false;
       }
@@ -145,7 +156,7 @@ Wick.Forms = (function(){
     if ($(form).is('.form-change-password')) {
       if ($(form).find('#current-password').val().length &&
         $(form).find('#new-password').val().length &&
-        $(form).find('#confirm-password').val().length){
+        $(form).find('#confirm-password').val().length) {
         window.location.href = './page_my-account.html';
         return false;
       }
@@ -157,14 +168,14 @@ Wick.Forms = (function(){
         $(form).find('#postcode').val().length &&
         $(form).find('#email').val().length &&
         $(form).find('#password').val().length &&
-        $(form).find('#confirm-password').val().length){
+        $(form).find('#confirm-password').val().length) {
         window.location.href = './page_my-account.html';
         return false;
       }
     }
 
     if ($(form).is('.form-personal-details')) {
-      if ($(form).find('#first-name').val().length && $(form).find('#surname').val().length){
+      if ($(form).find('#first-name').val().length && $(form).find('#surname').val().length) {
         window.location.href = './page_my-account.html';
         return false;
       }
@@ -172,26 +183,26 @@ Wick.Forms = (function(){
 
     if ($(form).is('.form-address-details')) {
       if ($(form).find('#first-name').val().length &&
-          $(form).find('#second-name').val().length &&
-          $(form).find('#address1').val().length &&
-          $(form).find('#town-city').val().length &&
-          $(form).find('#mobile-telephone').val().length) {
+        $(form).find('#second-name').val().length &&
+        $(form).find('#address1').val().length &&
+        $(form).find('#town-city').val().length &&
+        $(form).find('#mobile-telephone').val().length) {
         window.location.href = './page_my-account_address-book.html';
         return false;
       }
     }
 
     if ($(form).is('.form-locator')) {
-      if ($(form).find('#store-id').val()){
+      if ($(form).find('#store-id').val()) {
         window.location.href = './page_store-locator-details.html';
         return false;
       }
     }
 
     if ($(form).is('.form-locator-list')) {
-      if ($(form).find('#postcode-town').val().length){
+      if ($(form).find('#postcode-town').val().length) {
         var actionAfterSubmit = $(form).attr('data-action');
-        if (actionAfterSubmit === 'scroll-to-list'){
+        if (actionAfterSubmit === 'scroll-to-list') {
           clearValidationErrors(this);
           handleSmoothScroll();
         } else {
@@ -202,7 +213,7 @@ Wick.Forms = (function(){
     }
 
     if ($(form).is('#form-mini-basket')) {
-      if (Wick.User.isLoggedIn()){
+      if (Wick.User.isLoggedIn()) {
         window.location.href = './page_checkout_delivery-address.html';
       } else {
         window.location.href = './page_checkout_sign-in.html';
@@ -210,13 +221,31 @@ Wick.Forms = (function(){
       return false;
     }
 
-    function isNotEmpty(field){
-      return !!$(field).val();
+    function isNotEmpty(field) {
+      var $field = $(field);
+      var type = ($field.attr('type') || '').toLowerCase();
+
+      if (type === 'checkbox') {
+        return $field.is(':checked');
+      }
+
+      if (type === 'radio') {
+        var name = $field.attr('name');
+        if (!name) return false;
+
+        var $scope = $field.closest('[data-row-required]');
+        if (!$scope.length) $scope = $field.closest('form');
+
+        return $scope.find('input[type="radio"][name="' + name.replace(/"/g, '\\"') + '"]').is(':checked');
+      }
+
+      return !!$field.val();
     }
 
+
     if ($(form).is('#form-checkout-your-details')) {
       var requiredFields = $(form).find('[data-row-required]:visible :input');
-      if (_.every(requiredFields, isNotEmpty)){
+      if (_.every(requiredFields, isNotEmpty)) {
         window.location.href = $(form).attr('data-action');
         return false;
       }
@@ -224,7 +253,7 @@ Wick.Forms = (function(){
 
     if ($(form).is('#checkout-your-details-modal')) {
       var requiredFields = $(form).find('[data-row-required]:visible :input');
-      if (_.every(requiredFields, isNotEmpty)){
+      if (_.every(requiredFields, isNotEmpty)) {
         $('#modalDeliveryEdit').modal('hide');
         return false;
       }
@@ -238,15 +267,15 @@ Wick.Forms = (function(){
       }
     }
 
-    if ($(form).is('.checkout-register')){
+    if ($(form).is('.checkout-register')) {
       if ($(form).find('#password').val().length &&
-          $(form).find('#confirm-password').val().length) {
+        $(form).find('#confirm-password').val().length) {
         window.location.href = './page_my-account.html';
         return false;
       }
     }
 
-    if ($(form).is('#form-checkout-voucher')){
+    if ($(form).is('#form-checkout-voucher')) {
       if ($(form).find('#voucher-code').val().length) {
         return false;
       }
@@ -258,11 +287,11 @@ Wick.Forms = (function(){
       }
     }
 
-    if ($(form).is('.header-search')){
+    if ($(form).is('.header-search')) {
       window.location.href = './page_search-results.html';
     }
 
-    if ($(form).is('.click-and-collect__locator-form')){
+    if ($(form).is('.click-and-collect__locator-form')) {
       var $form = $(form);
       if ($form.find('#click-and-collect-town').val().length) {
         clearValidationErrors(this);
@@ -275,24 +304,24 @@ Wick.Forms = (function(){
       return false;
     }
 
-    if($(form).is('.form-track-order')) {
-        var $form = $(form);
-
-        if ($form.find('#order').val().length &&
-            $form.find('#tel').val().length &&
-            $form.find('#email').val().length &&
-            $form.find('#postcode').val().length) {
-            clearValidationErrors(this);
-        } else if (!$form.hasClass(formInvalid)) {
-          $form.addClass(formInvalid);
-
-          $(fieldRow).each(function() {
-            $(this).addClass(rowValidationError)
-              .append('<div class="form-row__error">' + $(this).data('message') + '</div>');
-          });
-        }
+    if ($(form).is('.form-track-order')) {
+      var $form = $(form);
 
-        return false;
+      if ($form.find('#order').val().length &&
+        $form.find('#tel').val().length &&
+        $form.find('#email').val().length &&
+        $form.find('#postcode').val().length) {
+        clearValidationErrors(this);
+      } else if (!$form.hasClass(formInvalid)) {
+        $form.addClass(formInvalid);
+
+        $(fieldRow).each(function() {
+          $(this).addClass(rowValidationError)
+            .append('<div class="form-row__error">' + $(this).data('message') + '</div>');
+        });
+      }
+
+      return false;
     }
 
     if ($(form).is('#edit-billing-address')) {
@@ -308,28 +337,28 @@ Wick.Forms = (function(){
   };
 
   var scrollLocatorListPage = function() {
-      var isLocatorListPage = $('.cards-store-list').length;
-      var isScrollNeeded = window.location.hash === "#stores-list";
-      if (isLocatorListPage && isScrollNeeded) {
-          handleSmoothScroll();
-      }
+    var isLocatorListPage = $('.cards-store-list').length;
+    var isScrollNeeded = window.location.hash === '#stores-list';
+    if (isLocatorListPage && isScrollNeeded) {
+      handleSmoothScroll();
+    }
   };
 
-  let bindEvents = function () {
+  let bindEvents = function() {
     let selector = excludedClassesForForm.reduce((acc, className) => {
       return acc + ':not([class^="' + className + '"])';
     }, 'form');
     $(document).on('submit', selector, handleFormSubmit);
     $forgotPassword.on('click', scenarios[2].action);
-    $('.btn-cancel').on('click', function(){
+    $('.btn-cancel').on('click', function() {
       window.location.href = './page_my-account.html';
     });
-    $('.btn-previous').on('click', function(){
+    $('.btn-previous').on('click', function() {
       window.location.href = './page_login.html';
     });
   };
 
-  var init = function () {
+  var init = function() {
     bindEvents();
     scrollLocatorListPage();
   };
@@ -338,6 +367,6 @@ Wick.Forms = (function(){
 
   return {
     showValidationErrors: showValidationErrors,
-    clearValidationErrors: clearValidationErrors
-  }
+    clearValidationErrors: clearValidationErrors,
+  };
 })();

package/src/js/emulation/paymentLoader.js

@@ -1,3 +1,5 @@
+var Wick = Wick || {};
+
 const paymentLoader= '.payment-loader';
 const paymentLoaderHideClass= 'payment-loader--hidden';
 const paymentLoaderModal = '.payment-loader__modal'
@@ -5,11 +7,10 @@ const paymentTypeSelectors = {
   apple: '.apple__button',
   google: '.google__button',
   clearpay: '#checkout-payment-details-clearpay',
-  billie: '#checkout-payment-details-billie, .billie__button',
   paypal: '#checkout-payment-details-paypal'
 };
 
-function showPaymentLoader(paymentType) {
+Wick.showPaymentLoader = function(paymentType) {
   $(paymentLoader).find(`${paymentLoaderModal} > div`).hide();
   $(`.${paymentType}-checkout-logo`).show();
   $(`${paymentLoader} .spinner`).show();
@@ -21,5 +22,5 @@ function showPaymentLoader(paymentType) {
 }
 
 Object.entries(paymentTypeSelectors).forEach(([type, triggerSelector]) => {
-  $(document).on('click', triggerSelector, () => showPaymentLoader(type));
+  $(document).on('click', triggerSelector, () => Wick.showPaymentLoader(type));
 });

package/src/js/emulation/repayment-toggle.js

@@ -0,0 +1,35 @@
+var Wick = Wick || {};
+
+Wick.RepaymentToggle = (function () {
+  const SELECTORS = {
+    repaymentRadio: 'input[name="repaymentTerms"]',
+    term: '.billie-info .term',
+    paymentMethod: '[name="payment-method"]'
+  };
+
+  function updateTerm(value) {
+    const $term = $(SELECTORS.term);
+    if (!$term.length) return;
+
+    $term.text(value);
+  }
+
+  function bindEvents () {
+    $(document).on('change', SELECTORS.repaymentRadio, function () {
+      const value = $(this).val();
+      if (!value) return;
+
+      updateTerm(value);
+
+      const currentMethod = $(SELECTORS.paymentMethod + ':checked').val();
+      if (currentMethod !== 'billie') return;
+
+      if (typeof Wick.showPaymentLoader === 'function') {
+        Wick.showPaymentLoader('billie');
+      }
+
+    });
+  }
+
+  bindEvents();
+})();