wickes-css2 2.104.0-develop.1 → 2.104.0-develop.2

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();
+})();

package/src/js/page/billie-business-type.js

@@ -3,27 +3,32 @@ var Wick = window.Wick || {};
 Wick.BusinessType = {
   el: {
     radios: 'input[name="businessType"]',
-    panels: '.radio-expanded-content'
+    panels: '.radio-expanded-content',
+    hiddenClass: 'd-none',
   },
 
   refreshPanels() {
     const $radios = $(this.el.radios);
     const $panels = $(this.el.panels);
-    const selectedValue = $radios.filter(':checked').val();
+    const $checked = $radios.filter(':checked');
 
-    $panels.hide();
-    $(`#${selectedValue}-fields`).show();
+    $panels.addClass(this.el.hiddenClass);
+    if (!$checked.length) {
+      return;
+    }
+
+    const selectedValue = $checked.val();
+    $(`#${selectedValue}-fields`).removeClass(this.el.hiddenClass);
   },
 
   bindEvents() {
-    $(this.el.radios).on('change', this.refreshPanels.bind(this));
+    $(document).on('change', this.el.radios, this.refreshPanels.bind(this));
   },
 
   init() {
     if (!$(this.el.radios).length) {
       return;
     }
-
     this.refreshPanels();
     this.bindEvents();
   }

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

@@ -1,107 +1,203 @@
 var Wick = Wick || {};
 Wick.CheckoutPaymentDetails = (function() {
   const $modal = $('#modal-terms-and-conditions');
+
+  let prevPaymentMethod = null;
   let prevClearableMethod;
+
   let detailsLabel = {
-    inputName: 'card-name',
-    buttonName: 'btn-enter-details',
+    inputName: 'card-name', buttonName: 'btn-enter-details',
   };
 
   const elements = {
+    $billieRepaymentTerms: $('.js-billie-repayment-terms'),
+    $billieInfoBlock: $('.checkout-payment-details__billie'),
     $wrapperPaymentInput: $('.checkout-payment-details__row'),
     paymentInputName: '[name=payment-method]',
     $cardDetails: $('.checkout-payment-details__card-details'),
     $placeOrder: $('.checkout-payment-details__place-order'),
     $billingAddress: $('.billing-address'),
     hiddenCardDetailsClass: 'checkout-payment-details__card-details_hidden',
+    $billieBusiness: $('[data-billie-business]'),
+    businessTypeName: '[name="businessType"]',
+    $unregisteredFields: $('#unregistered-fields'),
+    $registeredFields: $('#registered-fields'),
     hiddenClass: 'd-none',
-  }
+  };
 
   function preparePage() {
-    var modalOpened = $(".modal.show").length;
-    if (!modalOpened) {
-      return;
-    }
+    var modalOpened = $('.modal.show').length;
+    if (!modalOpened) return;
+
     var modalContent = $modal.find('.modal-content').clone();
-    $modal.modal("hide");
-    modalContent.addClass("print-area");
-    $("body")
-      .addClass("print-mode")
+    $modal.modal('hide');
+    modalContent.addClass('print-area');
+
+    $('body')
+      .addClass('print-mode')
       .append(modalContent);
   }
 
   function resetPage() {
-    var modalPrintModeActive = $("body.print-mode").length;
-    if (!modalPrintModeActive) {
-      return;
-    }
-    $("body").removeClass("print-mode");
-    $(".print-area").remove();
-    $modal.modal("show");
+    var modalPrintModeActive = $('body.print-mode').length;
+    if (!modalPrintModeActive) return;
+
+    $('body').removeClass('print-mode');
+    $('.print-area').remove();
+    $modal.modal('show');
   }
 
   function getPaymentMethods() {
     return $(elements.paymentInputName)
       .map((_, item) => $(item).val())
-      .get()
+      .get();
   }
 
   function togglePaymentBlocks(paymentMethods, checkedMethod) {
     paymentMethods.forEach(method => {
-      $(`[data-${method}]`).toggle(checkedMethod === method)
-    })
+      $(`[data-${method}]`).toggle(checkedMethod === method);
+    });
+  }
+
+  function resetAllCheckoutForms(keepPaymentMethod) {
+    const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
+    if (!$container.length) return;
+
+    $container.find('form').each(function() {
+      if (Wick.Forms && typeof Wick.Forms.clearValidationErrors === 'function') {
+        Wick.Forms.clearValidationErrors(this);
+      }
+    });
+
+    $container
+      .find('input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea')
+      .val('');
+
+    $container.find('select').each(function() {
+      this.selectedIndex = 0;
+    });
+
+    $container.find('input[type="checkbox"]').prop('checked', false);
+
+    $container.find('input[type="radio"]').each(function() {
+      const $radio = $(this);
+      const name = $radio.attr('name');
+      const val = $radio.val();
+
+      if (name === 'payment-method') {
+        $radio.prop('checked', val === keepPaymentMethod);
+      } else {
+        $radio.prop('checked', false);
+      }
+    });
+
+    $container.find('.radio-expanded-content').hide();
+  }
+
+  function setBillingDetailsRowVisibility(isVisible) {
+    const $row = elements.$billingAddress.find('.checkout-payment-details__row');
+    $row.toggle(isVisible);
+    $row.find(':input').prop('disabled', !isVisible);
+  }
+
+  function setBillieStepVisibility(isReady) {
+    setBillingDetailsRowVisibility(isReady);
+    elements.$billieInfoBlock.toggle(isReady);
+  }
+
+  function resetBillieRepaymentSelection() {
+    elements.$billieRepaymentTerms
+      .find('input[name="repaymentTerms"]')
+      .prop('checked', false);
+  }
+
+  function showBillieBusiness() {
+    elements.$billieBusiness.removeClass(elements.hiddenClass);
+  }
+
+  function hideBillieBusiness() {
+    elements.$billieBusiness.addClass(elements.hiddenClass);
+
+    elements.$unregisteredFields
+        .addClass(elements.hiddenClass)
+        .removeAttr('style');
+
+    elements.$registeredFields
+        .addClass(elements.hiddenClass)
+        .removeAttr('style');
+
+    elements.$billieBusiness.find('input[type="radio"]').prop('checked', false);
+    elements.$billieBusiness.find('input.tbx').val('');
   }
 
+  function toggleBusinessTypeFields(type) {
+    const isUnregistered = type === 'unregistered';
+    const isRegistered = type === 'registered';
+
+    elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
+    elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
+  }
+
+
   function changeDetailsBlock(checkedMethod) {
-    switch(checkedMethod) {
+    if (checkedMethod !== 'billie') {
+      setBillingDetailsRowVisibility(true);
+    }
+
+    switch (checkedMethod) {
       case 'paypal':
         hideCardDetails();
         showPlaceOrder();
         hideBillingAddres();
         break;
+
       case 'klarna':
         hideBillingAddres();
         break;
+
       case 'billie':
         detailsLabel = {
-          ...detailsLabel,
-          labelText: 'Name on Billie account',
-          buttonText: 'Pay with Billie'
-        }
+          ...detailsLabel, labelText: 'Name on Billie account', buttonText: 'Pay with Billie',
+        };
         changeLabelText(detailsLabel);
+
+        setBillieStepVisibility(false);
+        resetBillieRepaymentSelection();
+        showBillieBusiness();
         break;
+
       case 'clearpay':
         detailsLabel = {
-          ...detailsLabel,
-          labelText: 'Name on Clearpay account',
-          buttonText: 'Pay with Clearpay'
-        }
+          ...detailsLabel, labelText: 'Name on Clearpay account', buttonText: 'Pay with Clearpay',
+        };
         prevClearableMethod === 'card' && clearInputFields();
         changeLabelText(detailsLabel);
         prevClearableMethod = checkedMethod;
         break;
+
       case 'apple':
-        hideCardDetails()
-        hidePlaceOrder()
-        hideBillingAddres()
+        hideCardDetails();
+        hidePlaceOrder();
+        hideBillingAddres();
         break;
+
       case 'google':
-        hideCardDetails()
-        hidePlaceOrder()
-        hideBillingAddres()
+        hideCardDetails();
+        hidePlaceOrder();
+        hideBillingAddres();
         break;
+
       case 'card':
         detailsLabel = {
-          ...detailsLabel,
-          labelText: 'Name on card',
-          buttonText: 'Enter card details'
-        }
+          ...detailsLabel, labelText: 'Name on card', buttonText: 'Enter card details',
+        };
         prevClearableMethod === 'clearpay' && clearInputFields();
         changeLabelText(detailsLabel);
         prevClearableMethod = checkedMethod;
         break;
+
       default:
-        showPlaceOrder()
+        showPlaceOrder();
     }
   }
 
@@ -115,9 +211,11 @@ Wick.CheckoutPaymentDetails = (function() {
 
   function changeLabelText(params) {
     const { inputName, labelText, buttonName, buttonText } = params;
+
     elements.$billingAddress.removeClass(elements.hiddenClass);
+
     let labelElement = elements.$billingAddress.find('[for="' + inputName + '"]');
-    let buttonElement = elements.$billingAddress.find("." + buttonName + " .btn__text");
+    let buttonElement = elements.$billingAddress.find('.' + buttonName + ' .btn__text');
 
     labelElement && labelElement.text(labelText);
     buttonElement && buttonElement.text(buttonText);
@@ -135,14 +233,43 @@ Wick.CheckoutPaymentDetails = (function() {
     elements.$placeOrder.addClass(elements.hiddenClass);
   }
 
+  function initBillieBusinessTypeToggle() {
+    $(document).on('change', elements.businessTypeName, function () {
+      toggleBusinessTypeFields($(this).val());
+    });
+  }
+
   function init() {
     const paymentMethods = getPaymentMethods();
+    initBillieBusinessTypeToggle();
+    hideBillieBusiness();
+
+    $(document).on('change', 'input[name="repaymentTerms"]', function() {
+      const currentMethod = $(elements.paymentInputName + ':checked').val();
+      if (currentMethod !== 'billie') return;
+
+      const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
+      setBillieStepVisibility(hasSelection);
+
+      const $row = $(this).closest('.form-row[data-row-required]');
+      $row.removeClass('form-row_validation-error')
+        .find('.form-row__error').remove();
+    });
 
     elements.$wrapperPaymentInput.on('change', elements.paymentInputName, function() {
       const checkedMethod = $(this).val();
 
-      togglePaymentBlocks(paymentMethods, checkedMethod)
-      changeDetailsBlock(checkedMethod)
+      if (prevPaymentMethod && prevPaymentMethod !== checkedMethod) {
+        resetAllCheckoutForms(checkedMethod);
+      } else {
+        const form = $(this).closest('form')[0];
+        form && Wick.Forms && Wick.Forms.clearValidationErrors && Wick.Forms.clearValidationErrors(form);
+      }
+
+      togglePaymentBlocks(paymentMethods, checkedMethod);
+      changeDetailsBlock(checkedMethod);
+
+      prevPaymentMethod = checkedMethod;
     });
 
     $('.btn-new-card').on('click', function() {
@@ -157,17 +284,14 @@ Wick.CheckoutPaymentDetails = (function() {
       return false;
     });
 
-    // do not subscribe if no T&C modal on a current page
-    if (!$modal.length) {
-      return;
-    }
+    prevPaymentMethod = $(elements.paymentInputName + ':checked').val() || null;
+
+    if (!$modal.length) return;
 
-    if (typeof(window.onbeforeprint) !== 'undefined') {
-      // subscriptions for browsers
+    if (typeof (window.onbeforeprint) !== 'undefined') {
       window.onbeforeprint = preparePage;
       window.onafterprint = resetPage;
     } else if (window.matchMedia) {
-      // subscriptions for iOS devices
       var mediaQueryList = window.matchMedia('print');
       mediaQueryList.addListener(function(mql) {
         if (mql.matches) {

package/src/page_my-account.html

@@ -35,7 +35,6 @@
           title=my_account.diy.activeOrders.sectionTitle
           linkText='View all orders'
           orders=my_account.diy.activeOrders.orderList
-          billieText="Payment due 30 days from Dispatch or Collection Date"
       }}
     </div>
    </div>

package/src/scss/components/checkout-chip.scss

@@ -0,0 +1,65 @@
+@import '../helpers/variables';
+
+.checkout-chip {
+  position: relative;
+  flex: 0 0 auto;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    pointer-events: none;
+
+    &:checked + .checkout-chip__label {
+      border-color: $blue;
+
+      .checkout-chip__label-top,
+      .checkout-chip__label-bottom {
+        color: $blue;
+      }
+    }
+
+    &:focus-visible + .checkout-chip__label {
+      outline: 2px solid $blue;
+      outline-offset: 2px;
+    }
+  }
+
+  &__label {
+    background: $white;
+    border: 1px solid $gray;
+    border-radius: 16px;
+    padding: 6px 4px 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: border-color .2s;
+    width: 78px;
+  }
+
+  &__label-top {
+    font-family: Roboto, sans-serif;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 20px;
+  }
+
+  &__label-bottom {
+    font-family: Roboto, sans-serif;
+    font-weight: 400;
+    font-size: 0.87rem;
+    line-height: 22px;
+    text-align: center;
+  }
+}
+
+.form-row_validation-error {
+  .checkout-chip__label {
+    border: 1px solid $red;
+  }
+}

package/src/scss/components/checkout-payment-repayment-terms.scss

@@ -0,0 +1,39 @@
+@import '../helpers/variables';
+
+.repayment-terms {
+  background: $gray-bg;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &__title {
+    display: flex;
+    gap: 4px;
+    align-items: flex-start;
+    font-family: Roboto, sans-serif;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 24px;
+  }
+
+  &__asterisk {
+    color: $red;
+  }
+
+  &__chips {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  &__divider {
+    padding: 10px 0;
+  }
+}

package/src/scss/main.scss

@@ -90,6 +90,8 @@
 @import 'components/cards-slider';
 @import 'components/sticky-element-appearance';
 @import 'components/voucher-accordion';
+@import 'components/checkout-chip';
+@import 'components/checkout-payment-repayment-terms';
 
 // Pages
 @import 'pages/contact-us';