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

package/build/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.104.0-develop.1",
+  "version": "2.104.0-develop.2",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/address-billie.hbs

@@ -1,42 +1,44 @@
-<div class="form-row radio-group" data-row-required>
-  <label class="form-row__label form-row__label_required">
-    Select your business type
-  </label>
+<div class="d-none" data-billie-business>
+  <div class="form-row radio-group" data-row-required>
+    <label class="form-row__label form-row__label_required">
+      Select your business type
+    </label>
 
-  <div class="form-row">
-    <div class="form-row__field">
-      {{> radiobutton
-          id="businessTypeUnregistered"
-          name="businessType"
-          value="unregistered"
-          label="Unregistered Sole Trader / Business"}}
+    <div class="form-row">
+      <div class="form-row__field">
+        {{> radiobutton
+            id="businessTypeUnregistered"
+            name="businessType"
+            value="unregistered"
+            label="Unregistered Sole Trader / Business"}}
+      </div>
     </div>
-  </div>
-  <div class="form-row">
-    <div class="form-row__field">
-      {{> radiobutton
-          id="businessTypeRegistered"
-          name="businessType"
-          value="registered"
-          labelClass="registered-label"
-          label="Registered Sole Trader / Business"
-          tooltip="A Registered Business is one that has undergone the official process of being recognised and registered with Companies House, establishing its legal identity and enabling it to operate within a specific jurisdiction, such as a limited company. A Registered Business will have been issued a Company Registration Number (CRN) from Companies House."}}
+    <div class="form-row">
+      <div class="form-row__field">
+        {{> radiobutton
+            id="businessTypeRegistered"
+            name="businessType"
+            value="registered"
+            labelClass="registered-label"
+            label="Registered Sole Trader / Business"
+            tooltip="A Registered Business is one that has undergone the official process of being recognised and registered with Companies House, establishing its legal identity and enabling it to operate within a specific jurisdiction, such as a limited company. A Registered Business will have been issued a Company Registration Number (CRN) from Companies House."}}
+      </div>
     </div>
   </div>
-</div>
-<div
-    id="unregistered-fields"
-    class="radio-expanded-content"
->
-  {{> form-row id="first-name"  label="First name"  required="true" row-mod="first-name"}}
-  {{> form-row id="last-name"   label="Last name"   required="true" row-mod="last-name"}}
-  {{> form-row id="business-name" label="Business name" required="true" row-mod="unregistered-business"}}
-</div>
+  <div
+      id="unregistered-fields"
+      class="radio-expanded-content d-none"
+  >
+    {{> form-row id="first-name"  label="First name"  required="true" row-mod="first-name"}}
+    {{> form-row id="last-name"   label="Last name"   required="true" row-mod="last-name"}}
+    {{> form-row id="business-name" label="Business name" required="true" row-mod="unregistered-business"}}
+  </div>
 
-<div
-    id="registered-fields"
-    class="radio-expanded-content"
->
-  {{> form-row id="business-name-2" label="Business name" required="true" row-mod="registered-business"}}
-  {{> form-row id="company-reg-number" label="Company registration number" row-mod="reg-number"}}
+  <div
+      id="registered-fields"
+      class="radio-expanded-content d-none"
+  >
+    {{> form-row id="business-name-2" label="Business name" required="true" row-mod="registered-business"}}
+    {{> form-row id="company-reg-number" label="Company registration number" row-mod="reg-number"}}
+  </div>
 </div>

package/src/components/billie-modal.hbs

@@ -12,13 +12,13 @@
       <li>View all your Wickes / Billie Orders in one place with your Trade Pro Account, on the Order History page.</li>
     </ul>
 
-    <h4 class="billie-modal__heading">Buy now, pay within 30 days</h4>
+    <h4 class="billie-modal__heading js-billie-terms-heading">Buy now, pay within 30 days</h4>
     <ol class="billie-modal__list billie-modal__list--ordered">
       <li>Add items to your basket and proceed to checkout</li>
       <li>Select Billie as your payment method</li>
       <li>Enter your Business details on the payments page and Billie portal where necessary</li>
       <li>Billie review your submitted details in real-time and gives instant feedback if your order was successful</li>
-      <li>From the point of collection / delivery of goods you’ll have 30 days to pay</li>
+      <li class="js-billie-repayment-line">From the point of collection / delivery of goods you’ll have 30 days to pay</li>
       <li>Billie will send you the invoice document via email and remind you when it is time to pay</li>
     </ol>
 

package/src/components/checkout-chip.hbs

@@ -0,0 +1,15 @@
+<div class="checkout-chip">
+  <input
+      class="checkout-chip__input"
+      type="radio"
+      name="{{name}}"
+      id="{{id}}"
+      value="{{value}}"
+      {{#if checked}}checked{{/if}}
+  />
+
+  <label class="checkout-chip__label" for="{{id}}">
+    <span class="checkout-chip__label-top">{{top}}</span>
+    <span class="checkout-chip__label-bottom">{{bottom}}</span>
+  </label>
+</div>

package/src/components/checkout-edit-billing-address.hbs

@@ -23,9 +23,7 @@
 
     <div class="address-postcode">
       {{> address-postcode-look-up}}
-      {{#if billie-form}}
-        {{> address-billie}}
-      {{/if}}
+      {{> address-billie}}
     </div>
 
     {{#unless no-set-card}}

package/src/components/checkout-payment-details-v2.hbs

@@ -67,13 +67,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-clearpay">
                 <label
-                  class="rbn rbn_align clearpay-label__rbn"
-                  for="checkout-payment-details-clearpay">
+                    class="rbn rbn_align clearpay-label__rbn"
+                    for="checkout-payment-details-clearpay">
                   <input
-                    type="radio"
-                    id="checkout-payment-details-clearpay"
-                    name="payment-method"
-                    value="clearpay">
+                      type="radio"
+                      id="checkout-payment-details-clearpay"
+                      name="payment-method"
+                      value="clearpay">
                   <ins></ins>
                   <div class="clearpay-logo">
                     <img class="payments-checkout__image" src="./img/payment/checkout/clearpay.svg" alt="clearpay">
@@ -86,13 +86,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-apple">
                 <label
-                  class="rbn rbn_align apple-label__rbn"
-                  for="checkout-payment-details-apple">
+                    class="rbn rbn_align apple-label__rbn"
+                    for="checkout-payment-details-apple">
                   <input
-                    type="radio"
-                    id="checkout-payment-details-apple"
-                    name="payment-method"
-                    value="apple">
+                      type="radio"
+                      id="checkout-payment-details-apple"
+                      name="payment-method"
+                      value="apple">
                   <ins></ins>
                   <div class="apple-logo">
                     <img src="img/apple-pay.svg" alt="apple pay">
@@ -105,13 +105,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-google">
                 <label
-                  class="rbn rbn_align google-label__rbn"
-                  for="checkout-payment-details-google">
+                    class="rbn rbn_align google-label__rbn"
+                    for="checkout-payment-details-google">
                   <input
-                    type="radio"
-                    id="checkout-payment-details-google"
-                    name="payment-method"
-                    value="google">
+                      type="radio"
+                      id="checkout-payment-details-google"
+                      name="payment-method"
+                      value="google">
                   <ins></ins>
                   <div class="google-logo">
                     <img src="img/google-pay-mark.png" alt="google pay">
@@ -125,7 +125,8 @@
               <label class="rbn rbn_align" for="checkout-payment-details-paypal">
                 <input type="radio" id="checkout-payment-details-paypal" name="payment-method" value="paypal">
                 <ins></ins>
-                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24" alt="paypal">
+                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24"
+                     alt="paypal">
               </label>
             </div>
           </div>
@@ -164,7 +165,18 @@
         </div>
       </div>
 
+      <div class="form-row js-billie-repayment-terms" style="display: none" data-billie data-row-required data-message="Please select repayment terms">
+        <div class="form-row__field">
+          {{> checkout-payment-repayment-terms
+              name="repaymentTerms"
+              title="Select repayment terms"
+              repaymentTerms=billieTerms
+          }}
+        </div>
+      </div>
+
       {{> checkout-payment-info-block
+          showRepaymentTerms=false
           dataAttr="data-klarna"
           blockClass="checkout-payment-details__klarna"
           infoClass="klarna-info"
@@ -198,10 +210,11 @@
 
       {{> checkout-payment-info-block
           dataAttr="data-billie"
+          showRepaymentTerms=true
           blockClass="checkout-payment-details__billie"
           infoClass="billie-info"
 
-          heading="Get first. Pay later <br> Pay 30 days after shipment"
+          heading="Get first. Pay later <br> Pay <span class='term'>30</span> days after shipment"
           brandLogoHtml="<img
             src='https://static.billie.io/badges/Billie_Checkout_Default.svg'
             alt='Billie Pay Later'
@@ -224,12 +237,11 @@
           <img class="clearpay-widget__image" src="./img/payment/checkout/clearpay-widget.png" alt="clearpay widget">
         </div>
       </div>
-
-
       <div class="billing-address">
         {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
       </div>
-      <div data-existing-card class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
+      <div data-existing-card
+           class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
         <div class="form-row__col-btn" data-paypal style="display: none;">
           <a class="pay-pal_wrap" href="./page_checkout_confirmation-new.html">
             <div class="buttons-container">

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

@@ -0,0 +1,12 @@
+<div class="repayment-terms">
+  <div class="repayment-terms__title">
+    <span class="repayment-terms__asterisk">*</span>
+    <span>{{title}}</span>
+  </div>
+
+  <div class="repayment-terms__chips" role="radiogroup">
+    {{#each repaymentTerms}}
+      {{> checkout-chip name=../name }}
+    {{/each}}
+  </div>
+</div>

package/src/components/my-account/active-orders/list-orders.hbs

@@ -4,7 +4,7 @@
   {{/if}}
 
   {{#each orders}}
-    {{> my-account/active-orders/order switch-vat=../switch-vat billieText=../billieText}}
+    {{> my-account/active-orders/order switch-vat=../switch-vat}}
   {{/each}}
 
   {{#if linkText}}

package/src/data/data_billie-terms.json

@@ -0,0 +1,7 @@
+{
+  "billieTerms": [
+    { "id": "repay-30", "value": "30", "top": "30", "bottom": "days" },
+    { "id": "repay-60", "value": "60", "top": "60", "bottom": "days" },
+    { "id": "repay-90", "value": "90", "top": "90", "bottom": "days" }
+  ]
+}