wickes-css2 2.103.0-RG-1742-billie-30-60-90-days.1 → 2.103.0-RG-1742-billie-30-60-90-days.3

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).is(':visible');
+      });
+
+      $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).is(':visible');
+    }).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,7 +221,7 @@ Wick.Forms = (function(){
       return false;
     }
 
-    function isNotEmpty(field){
+    function isNotEmpty(field) {
       var $field = $(field);
       var type = ($field.attr('type') || '').toLowerCase();
 
@@ -234,7 +245,7 @@ Wick.Forms = (function(){
 
     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;
       }
@@ -242,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;
       }
@@ -256,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;
       }
@@ -276,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);
@@ -293,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')) {
@@ -326,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();
   };
@@ -356,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();
+})();