wickes-css2 2.98.0-develop.8 → 2.98.0-develop.9

package/build/js/emulation.min.js

@@ -6192,20 +6192,32 @@ $(document).ready(function () {
   initMyOrdersEvent();
 });
 
-const paymentLoader = '.payment-loader';
-const paymentLoaderHideClass = 'payment-loader--hidden';
-const applePayButton = '.apple__button';
-const googlePayButton = '.google__button';
-const clearPayRadioButton = '#checkout-payment-details-clearpay';
+const paymentLoader= '.payment-loader';
+const paymentLoaderHideClass= 'payment-loader--hidden';
+const paymentLoaderModal = '.payment-loader__modal'
+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'
+};
 
-const showPaymentLoader = () => {
+function showPaymentLoader(paymentType) {
+  $(paymentLoader).find(`${paymentLoaderModal} > div`).hide();
+  $(`.${paymentType}-checkout-logo`).show();
+  $(`${paymentLoader} .spinner`).show();
   $(paymentLoader).removeClass(paymentLoaderHideClass);
-  setTimeout(() => $(paymentLoader).addClass(paymentLoaderHideClass), 1000);
-};
 
-$(document).on('click', applePayButton, showPaymentLoader);
-$(document).on('click', googlePayButton, showPaymentLoader);
-$(document).on('click', clearPayRadioButton, showPaymentLoader);
+  setTimeout(() => {
+    $(paymentLoader).addClass(paymentLoaderHideClass);
+  }, 1000);
+}
+
+Object.entries(paymentTypeSelectors).forEach(([type, triggerSelector]) => {
+  $(document).on('click', triggerSelector, () => showPaymentLoader(type));
+});
+
 var Wick = Wick || {};
 
 Wick.pdfFileLoader = {

package/build/js/page/basket-v2.js

@@ -16,8 +16,8 @@ import {checkPayPalAvailability} from './basket/paypal';
 import {
     updateCharity,
     changeCharityPrice,
-    toggleCharityElements,
-    setDefaultCharityValue
+    setDefaultCharityValue,
+    initCharityInteractions,
 } from './components/charity';
 import {callAction} from './utils/http-action';
 import {ROUTES} from './utils/routes';
@@ -29,8 +29,8 @@ import {
 } from './basket/session-sync'
 import {displayEnergyEfficiency} from "./basket/display-energy-efficiency";
 import {appendLoader, hideLoader, showLoader} from "./utils/loader";
-import {addClassToSummaryAside} from "./basket/summary-mobile";
 import { initStickyObserver } from './components/sticky-order-observer';
+import {addClassToSummaryAside} from "./basket/summary-mobile";
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -80,7 +80,7 @@ Wick.BasketPage = {
         orderItemInfoOffers: 'order-item__info-offers',
         charityInput: '#donation',
         charityItem: '.charity-new',
-        donationCartBtn: '.donation-cart__btn',
+        donationCartBtn: '.donation-cart__btn, .donation-cart-new__btn',
         checkoutWidgetDetails: '.checkout-widget__details',
         checkoutWidgetDetailsFlex: 'checkout-widget__details-flex',
         subtotal: '.checkout-widget__item-bold',
@@ -311,7 +311,6 @@ Wick.BasketPage = {
         } else {
             if (charity) {
                 Wick.BasketPage.updateCart();
-                quantityToUpdate === 0 && toggleCharityElements();
             } else {
                 if (maxValue > 1 || minValue > 1) {
                     if (quantityToUpdate > maxValue || quantityToUpdate < minValue) {
@@ -1282,8 +1281,16 @@ $(document).ready(function () {
         $(Wick.BasketPage.el.content).on('focusout', Wick.BasketPage.el.quantityValue, Wick.BasketPage.changeOnBlur);
         $(Wick.BasketPage.el.content).on('click', Wick.BasketPage.el.deliveryButtonInCC, Wick.BasketPage.changeMethodToDelivery);
         $(Wick.BasketPage.el.content).on('click', Wick.BasketPage.el.updateStoreButton, Wick.BasketPage.changeMethodToCC);
-        $(Wick.BasketPage.el.charityInput).on('click', updateCharity);
-        $(Wick.BasketPage.el.donationCartBtn).on('click', changeCharityPrice);
+        $(Wick.BasketPage.el.donationCartBtn).on('click', function(e) {
+            e.preventDefault();
+            const context = $(this).closest(Wick.BasketPage.el.charityItem);
+            if (!context.hasClass('charity-added')) {
+                updateCharity(this);
+                context.addClass('charity-added');
+            } else {
+                changeCharityPrice.call(this);
+            }
+        });
         $(Wick.BasketPage.el.charityItem).on('click', Wick.BasketPage.el.removeButton, updateCharity);
         $(Wick.BasketPage.el.orderSummary).on('click', Wick.BasketPage.el.voucherRemove, voucherRemove);
         $(Wick.BasketPage.el.promoWrapper).on('click', Wick.BasketPage.el.promoClose, Wick.BasketPage.removePromotion);
@@ -1305,7 +1312,9 @@ $(document).ready(function () {
             '.summary__aside.collapse.show'
         );
         Wick.BasketPage.updateCart(...Array(3), true);
+
         setDefaultCharityValue();
+        initCharityInteractions();
         if (!$(Wick.BasketPage.el.loader).length) {
             appendLoader(Wick.BasketPage.loaderPayload);
         }

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

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

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

@@ -62,6 +62,14 @@ Wick.CheckoutPaymentDetails = (function() {
       case 'klarna':
         hideBillingAddres();
         break;
+      case 'billie':
+        detailsLabel = {
+          ...detailsLabel,
+          labelText: 'Name on Billie account',
+          buttonText: 'Pay with Billie'
+        }
+        changeLabelText(detailsLabel);
+        break;
       case 'clearpay':
         detailsLabel = {
           ...detailsLabel,

package/build/js/page/components/charity.js

@@ -8,34 +8,47 @@ const charityEl = {
   charityInput: '#donation',
   charityTitleWrap: '.title-wrap',
   donationCart: '.donation-cart',
-  donationCartBtn: '.donation-cart__btn',
-  donationCartHolder: '.donation-cart__holder',
   donationCartHide: 'donation-cart__hide',
-  donationCartValue: '.donation-cart__value',
+  donationCartBtn: '.donation-cart__btn, .donation-cart-new__btn',
+  donationCartBtnSelected: '.donation-cart-new__btn.btn-selected',
+  donationCartHolder: '.donation-cart__holder, .donation-cart-new__holder',
+  donationCartValue: '.donation-cart__value, .donation-cart-new__value',
   charityAdded: 'charity-added',
+  donationCartCostBlock: '.donation-cart-new__cost',
+  donationCartCostBlockHide: 'donation-cart-new__cost-hide',
+  donationCartRemove: '.donation-cart-new__cost .order-item__remove',
 }
 
-export function updateCharity() {
-  //checkbox action
+export function updateCharity(button) {
   if ($('#donation').attr('disabled') === 'disabled') {
-    $('#donation').removeAttr('disabled')
+    $('#donation').removeAttr('disabled');
   } else {
     $('#donation').prop('disabled', (_, value) => !value);
   }
 
-  const context = getCurrentCharityItem(this);
+  const context = getCurrentCharityItem(button);
   const productCode = getCurrentProductCode(context);
+  const quantity = getSelectedCharityAmount(button);
 
   showLoader('.basket-loader');
 
   if (context.hasClass(charityEl.charityAdded)) {
-    $(this).removeAttr('checked');
+    $(button).removeAttr('checked');
   } else {
-    $(this).attr('checked', 'checked');
-    charityActionForAdd(productCode);
+    $(button).attr('checked', 'checked');
+    repaintCharityButton(button);
+    context
+      .find(charityEl.donationCartValue)
+      .text(quantity);
+    showDonationCostBlock(context);
+    charityActionForAdd(productCode, quantity);
   }
 }
 
+function getSelectedCharityAmount(context) {
+  return $(context).data('value');
+}
+
 function getCurrentCharityItem(context) {
   return $(context).closest(charityEl.charityItem);
 }
@@ -44,13 +57,13 @@ function getCurrentProductCode(context) {
   return context.find('input[name="productCode"]').val();
 }
 
-export function charityActionForAdd(value) {
+export function charityActionForAdd(value, quantity) {
   if (!Wick.checkLocalEnv) {
     const payload = {
       url: ROUTES.CHARITY_ADD,
       queries: {
         productCodePost: value,
-        qty: getDefaultCharityAmount(),
+        qty: quantity,
       },
       type: 'POST',
     };
@@ -61,19 +74,10 @@ export function charityActionForAdd(value) {
 
     callAction(payload, executeCharityAction, productInfo);
   } else {
-    toggleCharityElements();
     Wick.BasketPage.updateCart(...Array(2), true);
   }
 }
 
-export function toggleCharityElements() {
-  if ($(charityEl.charityItem).hasClass(charityEl.charityAdded)) {
-    $(charityEl.charityInput).prop('checked', false);
-  }
-  $(charityEl.charityItem).toggleClass(charityEl.charityAdded);
-  $(charityEl.charityItem).hasClass(charityEl.charityMultiple) && toggleMultipleCharityChoose($(charityEl.charityItem));
-}
-
 function executeCharityAction(response, productInfo) {
   if (response.addedProducts && response.addedProducts[0]) {
     productInfo.quantity = response.addedProducts[0].qty;
@@ -81,7 +85,6 @@ function executeCharityAction(response, productInfo) {
   }
 
   Wick.BasketPage.updateCart(...Array(2), true);
-  toggleCharityElements();
 }
 
 export function changeCharityPrice() {
@@ -95,6 +98,7 @@ export function changeCharityPrice() {
 
   repaintCharityButton(this);
   $(charityEl.donationCartValue).text(charityValue);
+  showDonationCostBlock(context);
   charityActionForChangePrice(this);
 }
 
@@ -119,35 +123,46 @@ function repaintCharityButton(context) {
   $(context).removeClass(btnSecondary).addClass(btnSelected);
 }
 
-function resetCharityButton(context) {
-  const donationButtons = $(context).find(charityEl.donationCartBtn);
-  const btnSelected = 'btn-selected';
-  const btnSecondary = 'btn-secondary';
-  const defaultAmount = getDefaultCharityAmount();
-
-  donationButtons.each((i, btn) => {
-    $(btn).attr('data-value') === defaultAmount
-      ? $(btn).removeClass(btnSecondary).addClass(btnSelected)
-      : $(btn).removeClass(btnSelected).addClass(btnSecondary);
-  })
-}
-
 function getDefaultCharityAmount() {
   const donationButtons = $(charityEl.charityItem).find(charityEl.donationCartBtn);
   return donationButtons.first().attr('data-value');
 }
 
+export function setDefaultCharityValue() {
+  $(charityEl.donationCartBtnSelected).each(function() {
+    const $btn   = $(this);
+    const $item  = $btn.closest(charityEl.charityItem);
+    const value  = $btn.data('value');
+
+    $item.find(charityEl.donationCartValue).text(value);
+    $item.find(charityEl.donationCartCostBlock)
+      .removeClass(charityEl.donationCartCostBlockHide);
+  });
+}
+
+function showDonationCostBlock($charity) {
+  $charity.find(charityEl.donationCartCostBlock)
+    .removeClass(charityEl.donationCartCostBlockHide);
+}
+
 function resetCharityValue() {
   const defaultValue = getDefaultCharityAmount();
   $(charityEl.donationCartValue).text(defaultValue);
 }
 
-export function toggleMultipleCharityChoose(context) {
-  context.find(charityEl.donationCart).toggleClass(charityEl.donationCartHide);
-  resetCharityButton(context);
-  resetCharityValue();
-}
-
-export function setDefaultCharityValue() {
-  $(charityEl.charityItem).hasClass(charityEl.charityMultiple) && resetCharityValue();
+export function initCharityInteractions() {
+  $(document).on('click', charityEl.donationCartRemove, function(e) {
+    e.preventDefault();
+
+    const $item = $(this).closest(charityEl.charityItem);
+    $item.removeClass(charityEl.charityAdded);
+    $item
+      .find(charityEl.donationCartCostBlock)
+      .addClass(charityEl.donationCartCostBlockHide);
+    $item
+      .find(charityEl.donationCartBtn)
+      .removeClass('btn-selected')
+      .addClass('btn-secondary');
+    resetCharityValue();
+  });
 }

package/build/js/page/components/modal-observer.js

@@ -0,0 +1,51 @@
+var Wick = Wick || {};
+
+Wick.ModalObserver = (function () {
+  const modal = $('.modal-scroll-observer');
+    modalContent = modal.find('.modal-content'),
+    modalBody = modal.find('.modal-body');
+
+  $(document).ready(function () {
+    if (!modal.length) {
+      return;
+    }
+
+    function updateScrollFades() {
+      const tolerance = 5;
+      const scrollTop = modalBody.scrollTop();
+      const scrollHeight = modalBody.prop('scrollHeight');
+      const visibleHeight = modalBody.outerHeight();
+
+      const isAtTop = scrollTop <= tolerance;
+      const isAtBottom = scrollTop + visibleHeight >= scrollHeight - tolerance;
+
+      let state;
+
+      if (isAtTop && isAtBottom) {
+        state = 'full';
+      } else if (isAtTop) {
+        state = 'top';
+      } else if (isAtBottom) {
+        state = 'bottom';
+      } else {
+        state = 'middle';
+      }
+
+      modalContent.attr('data-scroll-state', state);
+    }
+
+    modalBody.on('scroll', updateScrollFades);
+
+    modal.on('shown.bs.modal', function() {
+      updateScrollFades();
+    });
+
+    $(window).on('resize', function() {
+      if (modal.is(':visible')) {
+        updateScrollFades();
+      }
+    });
+
+  });
+
+})();

package/package.json

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

package/src/components/address-billie.hbs

@@ -0,0 +1,42 @@
+<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>
+  </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>
+  </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="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>

package/src/components/address-postcode-look-up.hbs

@@ -3,9 +3,9 @@
         {{> form-row id="first-line-address" label="Type first line of the address" required="true"}}
     </div>
     <div>
-        {{> form-row id="address-line-1" label="Address line 1" required="true"}}
+        {{> form-row id="address-line-1" label="Address line 1" required="true" info="Eg house number/name, street name"}}
         {{> form-row id="address-line-2" label="Address line 2"}}
-        {{> form-row id="town-city" label="Town / City" required="true"}}
+        {{> form-row id="town-city" label="Town/City" required="true"}}
         {{> form-row id="postcode_additional" label="Postcode" required="true"}}
     </div>
 {{else}}

package/src/components/basket-charity-donations-new.hbs

@@ -0,0 +1,40 @@
+{{#if title}}
+  {{> checkout-section-title}}
+{{/if}}
+<div class="charity-new charity-donation-new">
+  {{#with checkoutOrder.charity}}
+
+    <div class="charity-donation-new__wrapper">
+      <div class="charity-donation-new__top">
+        <div class="charity-donation-new__header">
+          <div class="charity-donation-new__title">{{title}}</div>
+          <div class="charity-donation-new__right">
+            <img
+                class="charity-donation-new__image"
+                src="{{img}}"
+                alt="{{title}}"
+                title="{{title}}"
+            />
+          </div>
+        </div>
+
+        <div class="charity-donation-new__description">
+          {{descr}}
+          <span class="charity-donation-new__message">
+              {{message}}
+            <a
+                class="charity-donation-new__subtitle-link"
+                href="{{subLink}}"
+            >
+              click here</a>.
+            </span>
+        </div>
+      </div>
+
+      <div class="charity-donation-new__body">
+        {{> donation-cart-new}}
+      </div>
+    </div>
+
+  {{/with}}
+</div>

package/src/components/billie-modal.hbs

@@ -0,0 +1,41 @@
+{{#extend "modal" id="billieLearnMoreModal" classMod="billie-modal modal-scroll-observer" title="" showCloseBtn=true centered=true backdrop=true fullWidth=true}}
+{{#content "header"}}
+  <img src="./img/billie-modal.svg" alt="billie header logo" class="modal-header-logo">
+{{/content}}
+{{#content "body"}}
+  <div class="billie-modal__content">
+    <h4 class="billie-modal__heading">Benefits for Tradespeople and Small Businesses</h4>
+    <ul class="billie-modal__list">
+      <li>Potential for a higher credit limit*</li>
+      <li>Increased flexibility thanks to extended payment terms</li>
+      <li>Settle outstanding payments via Bank Transfer</li>
+      <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>
+    <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>Billie will send you the invoice document via email and remind you when it is time to pay</li>
+    </ol>
+
+    <p class="billie-modal__disclaimer">
+      *Available credit limits can differ between customers and are dependent on results of a credit check
+    </p>
+
+    <a href="https://www.wickes.co.uk/payments" class="billie-modal__read-more">Read more</a> about Billie
+  </div>
+{{/content}}
+
+{{#content "footer"}}
+  <div class="modal-box__inner-row justify-content-center modal-box__footer-row">
+    <div class="modal-box__inner-columns">
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+    </div>
+  </div>
+{{/content}}
+
+{{/extend}}

package/src/components/billie-online-messaging.hbs

@@ -0,0 +1,14 @@
+<div class="billie {{#if basketStyles}}billie-basket{{/if}}">
+  <span class="billie__logo">
+    <img class="billie__image" src="./img/billie-pdp.svg" alt="Billie">
+  </span>
+  <div class="billie__content">
+    <span class="billie__title">
+      Buy Now Pay Later for Trade.
+      <a href="#" class="billie__link" data-toggle="modal" data-target="#billieLearnMoreModal">Learn more</a>
+    </span>
+    <span class="billie__subtitle">
+      Interest free
+    </span>
+  </div>
+</div>

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

@@ -1,18 +1,32 @@
 <div class="checkout-payment-details__row" {{attr}}>
   <div class="checkout-payment-details__descr{{descrModifier}}">
     <h3 class="checkout-payment-details__title">Billing address</h3>
+    {{#if billie-form}}
+      <div class="checkout-payment-details__populated-address">
+        <span>
+          <span class="checkout-payment-details__populated-text">Populated from your business address in your TradePro account.</span>
+          {{> info-icon title="If the pre-populated address is incorrect, please amend it before proceeding. To update it permanently, review and amend your Business Address in My TradePro (or Installer) Account > Address Book." data-placement="top" }}
+        </span>
+      </div>
+    {{/if}}
     <div class="warning-required">Required fields</div>
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> checkbox id="chb-payment-details-card" label="Use my delivery address" }}
+    {{#unless billie-form}}
+      <div class="form-row">
+        <div class="form-row__field">
+          {{> checkbox id="chb-payment-details-card" label="Use my delivery address"}}
+        </div>
       </div>
-    </div>
+    {{/unless}}
     {{#unless edit-bill-mod}}
       {{> form-row id="card-name" label="Name on card" required="true"}}
     {{/unless}}
 
-     {{> address-postcode-look-up}}
-
+    <div class="address-postcode">
+      {{> address-postcode-look-up}}
+      {{#if billie-form}}
+        {{> address-billie}}
+      {{/if}}
+    </div>
 
     {{#unless no-set-card}}
       <div class="form-row">