wickes-css2 2.107.0-develop.2 → 2.107.0-develop.4

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

@@ -1,4 +1,6 @@
 var Wick = Wick || {};
+window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
+window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
 Wick.CheckoutPaymentDetails = (function () {
     const $modal = $('#modal-terms-and-conditions');
 
@@ -10,9 +12,11 @@ Wick.CheckoutPaymentDetails = (function () {
         buttonName: 'btn-enter-details',
     };
 
+    const toggleBillieRepaymentTermsClass = 'js-billie-repayment-terms--has-selection';
+
     const elements = {
         $billieRepaymentTerms: $('.js-billie-repayment-terms'),
-        $billieInfoBlock: $('.checkout-payment-details__billie'),
+        $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
         $wrapperPaymentInput: $('.checkout-payment-details__row'),
         paymentInputName: '[name=payment-method]',
         $cardDetails: $('.checkout-payment-details__card-details'),
@@ -26,6 +30,52 @@ Wick.CheckoutPaymentDetails = (function () {
         hiddenClass: 'd-none',
     };
 
+    let klarnaInited = false;
+    let billieInited = false;
+
+    function initKlarnaPayment() {
+        if (klarnaInited) return Promise.resolve({ ok: true, cached: true });
+
+        return new Promise((resolve, reject) => {
+            const payload = {};
+            const detail = {
+                resolve: (data) => {
+                    klarnaInited = true;
+                    resolve(data);
+                },
+                reject,
+            };
+
+            const evt = createEvent(window.INIT_KLARNA_PAYMENT, payload, detail);
+            window.dispatchEvent(evt);
+        });
+    }
+
+    function initBilliePayment() {
+        if (billieInited) return Promise.resolve({ ok: true, cached: true });
+
+        return new Promise((resolve, reject) => {
+            const payload = {};
+            const detail = {
+                resolve: (data) => {
+                    billieInited = true;
+                    resolve(data);
+                },
+                reject,
+            };
+
+            const evt = createEvent(window.INIT_BILLIE_PAYMENT, payload, detail);
+            window.dispatchEvent(evt);
+        });
+    }
+
+    function getBillieRepaymentTermsLength() {
+        const billieRepaymentTerms =
+            (window.Wick && window.Wick?.BillieData?.billiePaymentTerms) || [];
+
+        return Array.isArray(billieRepaymentTerms) ? billieRepaymentTerms.length : 0;
+    }
+
     function preparePage() {
         var modalOpened = $('.modal.show').length;
         if (!modalOpened) return;
@@ -54,10 +104,14 @@ Wick.CheckoutPaymentDetails = (function () {
 
     function togglePaymentBlocks(paymentMethods, checkedMethod) {
         paymentMethods.forEach((method) => {
-            $(`[data-${method}]`).toggle(checkedMethod === method);
+            $(`[data-${method}]`).hide();
         });
-    }
 
+        const $selected = $(`[data-${checkedMethod}]`);
+        if ($selected.length) {
+            $selected.show();
+        }
+    }
     function resetAllCheckoutForms(keepPaymentMethod) {
         const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
         if (!$container.length) return;
@@ -101,9 +155,18 @@ Wick.CheckoutPaymentDetails = (function () {
         $row.find(':input').prop('disabled', !isVisible);
     }
 
+    function _syncBillieUI(isReady) {
+        elements.$billieWidget.toggle(isReady);
+        elements.$billieRepaymentTerms.toggleClass(toggleBillieRepaymentTermsClass, isReady);
+    }
+
+    function resetBillieUi() {
+        _syncBillieUI(false);
+    }
+
     function setBillieStepVisibility(isReady) {
+        _syncBillieUI(isReady);
         setBillingDetailsRowVisibility(isReady);
-        elements.$billieInfoBlock.toggle(isReady);
     }
 
     function resetBillieRepaymentSelection() {
@@ -129,13 +192,27 @@ Wick.CheckoutPaymentDetails = (function () {
         const isUnregistered = type === 'unregistered';
         const isRegistered = type === 'registered';
 
-        elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
-        elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
+        elements.$unregisteredFields
+            .toggleClass(elements.hiddenClass, !isUnregistered)
+            .removeAttr('style');
+        elements.$registeredFields
+            .toggleClass(elements.hiddenClass, !isRegistered)
+            .removeAttr('style');
     }
 
     function changeDetailsBlock(checkedMethod) {
         if (checkedMethod !== 'billie') {
+            resetBillieUi();
             setBillingDetailsRowVisibility(true);
+            hideBillieBusiness();
+        }
+
+        if (checkedMethod === 'klarna') {
+            initKlarnaPayment().catch(() => {});
+        }
+
+        if (checkedMethod === 'billie' && getBillieRepaymentTermsLength() === 1) {
+            initBilliePayment().catch(() => {});
         }
 
         switch (checkedMethod) {
@@ -157,7 +234,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 };
                 changeLabelText(detailsLabel);
 
-                setBillieStepVisibility(false);
+                setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
                 break;
@@ -173,13 +250,13 @@ Wick.CheckoutPaymentDetails = (function () {
                 prevClearableMethod = checkedMethod;
                 break;
 
-            case 'apple':
+            case 'apple-pay':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
                 break;
 
-            case 'google':
+            case 'google-pay':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
@@ -239,6 +316,12 @@ Wick.CheckoutPaymentDetails = (function () {
         });
     }
 
+    function forceReflow($element) {
+        if (!$element.length) return;
+        void $element[0].offsetHeight;
+        $(window).trigger('resize');
+    }
+
     function init() {
         const paymentMethods = getPaymentMethods();
         initBillieBusinessTypeToggle();
@@ -248,6 +331,10 @@ Wick.CheckoutPaymentDetails = (function () {
             const currentMethod = $(elements.paymentInputName + ':checked').val();
             if (currentMethod !== 'billie') return;
 
+            requestAnimationFrame(() => {
+                forceReflow(elements.$billieWidget);
+            });
+
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
             setBillieStepVisibility(hasSelection);
 

package/build/js/page/checkout.js

@@ -1,4 +1,4 @@
-import {checkVoucherCode, voucherRemove} from './components/voucher';
+import { checkVoucherCode, voucherRemove } from './components/voucher';
 
 var Wick = window.Wick || {};
 Wick.Checkout = {

package/build/js/page/components/gift-cards.js

@@ -111,7 +111,7 @@ Wick.GiftCard = {
         klarnaInfo: '.checkout-payment-details__klarna',
         billingAddress: '.billing-address',
         altPaymentRowsAttr:
-            '[data-apple],[data-google],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
+            '[data-apple-pay],[data-google-pay],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
         hiddenCard: 'checkout-payment-details__card-details_hidden',
         cardDetails: '.checkout-payment-details__card-details',
     },

package/build/js/page/kitchen/card-carousel.js

@@ -3,30 +3,30 @@ var Wick = Wick || {};
 Wick.PLPCardSwiper = {};
 
 $(document).ready(function () {
-  const SELECTORS = {
-    kitchenCard: '.kitchen-card',
-    swiperContainer: '.swiper-container-main',
-    nextButton: '.kitchen-card__next-btn',
-    prevButton: '.kitchen-card__prev-btn',
-  };
+    const SELECTORS = {
+        kitchenCard: '.kitchen-card',
+        swiperContainer: '.swiper-container-main',
+        nextButton: '.kitchen-card__next-btn',
+        prevButton: '.kitchen-card__prev-btn',
+    };
 
-  $(SELECTORS.kitchenCard).each(function (index, container) {
-    const $container = $(container);
-    const id = $container.data('id');
+    $(SELECTORS.kitchenCard).each(function (index, container) {
+        const $container = $(container);
+        const id = $container.data('id');
 
-    const sliderElement = $container.find(SELECTORS.swiperContainer)[0];
-    const nextButtonElement = $container.find(SELECTORS.nextButton)[0];
-    const prevButtonElement = $container.find(SELECTORS.prevButton)[0];
+        const sliderElement = $container.find(SELECTORS.swiperContainer)[0];
+        const nextButtonElement = $container.find(SELECTORS.nextButton)[0];
+        const prevButtonElement = $container.find(SELECTORS.prevButton)[0];
 
-    const swiper = new Swiper(sliderElement, {
-      speed: 400,
-      navigation: {
-          nextEl: nextButtonElement,
-          prevEl: prevButtonElement,
-      },
-      simulateTouch: false,
-    });
+        const swiper = new Swiper(sliderElement, {
+            speed: 400,
+            navigation: {
+                nextEl: nextButtonElement,
+                prevEl: prevButtonElement,
+            },
+            simulateTouch: false,
+        });
 
-    Wick.PLPCardSwiper[id] = swiper;
-  });
+        Wick.PLPCardSwiper[id] = swiper;
+    });
 });

package/package.json

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

package/src/components/cart-voucher.hbs

@@ -1,5 +1,14 @@
 <li>
-  {{{text}}}
+  {{#ifCond switch-vat '&&' textExcVat}}
+    <span class="including-vat">
+      {{{text}}}
+    </span>
+    <span class="excluding-vat d-none">
+      {{{textExcVat}}}
+    </span>
+  {{else}}
+    {{{text}}}
+  {{/ifCond}}
   {{#if isDeletable}}
     <span class="icon checkout-widget__voucher-remove">
       <span class="fas fa-times"></span>

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

@@ -25,7 +25,7 @@
                       type="radio"
                       id="checkout-payment-details-apple"
                       name="payment-method"
-                      value="apple">
+                      value="apple-pay">
                   <ins></ins>
                   <div class="apple-logo">
                     <img src="img/apple-pay.svg" alt="apple pay">
@@ -44,7 +44,7 @@
                       type="radio"
                       id="checkout-payment-details-google"
                       name="payment-method"
-                      value="google">
+                      value="google-pay">
                   <ins></ins>
                   <div class="google-logo">
                     <img src="img/google-pay-mark.svg" alt="google pay">
@@ -134,7 +134,7 @@
         </div>
       </div>
 
-      <div data-apple class="form-row form-row__action form-row__save apple-wrap" style="display: none;">
+      <div data-apple-pay class="form-row form-row__action form-row__save apple-wrap" style="display: none;">
         <div class="form-row__col-btn">
           <apple-pay-button class="apple__button" buttonstyle="black" type="pay" locale="en-GB"></apple-pay-button>
         </div>
@@ -146,7 +146,7 @@
         </div>
       </div>
 
-      <div data-google class="form-row form-row__action form-row__save google-wrap" style="display: none;">
+      <div data-google-pay class="form-row form-row__action form-row__save google-wrap" style="display: none;">
         <div class="form-row__col-btn">
           <div class="google__button" id="google-pay-btn">
             <button type="button" aria-label="Pay with GPay" class="gpay-button black pay en"></button>

package/src/components/checkout-payment-info-block.hbs

@@ -1,5 +1,5 @@
 <div {{#if dataAttr}}{{dataAttr}}{{/if}} class="{{blockClass}}" style="display: none;">
-  <div class="{{infoClass}}">
+  <div class="{{infoClass}}" style="display: none;">
     <div class="{{infoClass}}__header">
       <h4 class="{{infoClass}}__header_title">{{{heading}}}</h4>
       <div class="{{infoClass}}__logo-img-big">

package/src/components/checkout_order-summary-new.hbs

@@ -34,7 +34,7 @@
               </span>
               <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
                   {{#each discounts}}
-                      {{> cart-voucher}}
+                      {{> cart-voucher switch-vat=../switch-vat}}
                   {{/each}}
               </ul>
               <span class="checkout-widget__detail-value">£0.00</span>

package/src/components/order-item.hbs

@@ -37,11 +37,24 @@
                 </div>
             </div>
             {{#if offers}}
-                <div class="order-item__offers">
-                    {{#each offers}}
-                        <div class="order-item__promo">{{this}}</div>
-                    {{/each}}
-                </div>
+                {{#ifCond switch-vat '&&' offersExcVat}}
+                    <div class="order-item__offers including-vat">
+                        {{#each offers}}
+                            <div class="order-item__promo">{{this}}</div>
+                        {{/each}}
+                    </div>
+                    <div class="order-item__offers excluding-vat d-none">
+                        {{#each offersExcVat}}
+                            <div class="order-item__promo">{{this}}</div>
+                        {{/each}}
+                    </div>
+                {{else}}
+                    <div class="order-item__offers">
+                        {{#each offers}}
+                            <div class="order-item__promo">{{this}}</div>
+                        {{/each}}
+                    </div>
+                {{/ifCond}}
             {{/if}}
         </div>
         <div class="order-item__cost">

package/src/components/order-summary.hbs

@@ -47,7 +47,7 @@
     </div>
   {{/if}}
   <div class="summary__aside">
-    {{> checkout_order-summary-new head=title mod=mod id=id}}
+    {{> checkout_order-summary-new head=title mod=mod id=id switch-vat=switch-vat}}
 
     {{#if klarna-placement}}
       <div class="summary__klarna">

package/src/components/potential-promotion.hbs

@@ -2,9 +2,18 @@
     <div class="p-promotion__icon">
         <i class="icon fas fa-gift"></i>
     </div>
-    <div class="p-promotion__description">
-        {{description}}
-    </div>
+    {{#ifCond switch-vat '&&' descriptionExcVat}}
+        <div class="p-promotion__description including-vat">
+            {{description}}
+        </div>
+        <div class="p-promotion__description excluding-vat d-none">
+            {{descriptionExcVat}}
+        </div>
+    {{else}}
+        <div class="p-promotion__description">
+            {{description}}
+        </div>
+    {{/ifCond}}
     <div class="p-promotion__close">
         <i class="icon fas fa-times"></i>
     </div>

package/src/data/data_shopping-cart-v2.json

@@ -8,10 +8,12 @@
     },
     "potentialOrderPromotions": [
       {
-        "description": "Spend over £200 on Bathroom Lighting and save £10.0"
+        "description": "Spend over £200 on Bathroom Lighting and save £10.0",
+        "descriptionExcVat": "Spend over £150 on Bathroom Lighting and save £10.0"
       },
       {
-        "description": "Spend over 2500 pound and get £2500 discount"
+        "description": "Spend over 2500 pound and get £2500 discount",
+        "descriptionExcVat": "Spend over 2000 pound and get £2000 discount"
       }
     ],
     "checkout": {
@@ -43,23 +45,28 @@
       "discounts": [
         {
           "text": "Voucher abcd applies and giving 20% off",
+          "textExcVat": "Voucher abcd applies and giving 18% off",
           "isDeletable": true
         },
         {
           "text": "Voucher 20% off",
+          "textExcVat": "Voucher 18% off",
           "isDeletable": true
         },
         {
-          "text": "Buy 4 for 3"
+          "text": "Buy 4 for 3",
+          "textExcVat": "Buy 5 for 3"
         },
         {
           "text": "Online only offer"
         },
         {
-          "text": "2 for £35"
+          "text": "2 for £35",
+          "textExcVat": "2 for £30"
         },
         {
-          "text": "Offer price equivalent to £17.50 per item"
+          "text": "Offer price equivalent to £17.50 per item",
+          "textExcVat": "Offer price equivalent to £15.50 per item"
         }
       ],
       "total": {
@@ -86,6 +93,10 @@
               "Buy 2 for 3 — Add 1 to qualify",
               "Buy 2 for 3 — Add 1 to qualify"
             ],
+            "offersExcVat": [
+              "Buy 2 for 4 — Add 2 to qualify",
+              "Buy 2 for 4 — Add 2 to qualify"
+            ],
             "pricePerSQM": {
               "value": "12"
             },
@@ -1049,6 +1060,10 @@
               "Buy 2 for 3 — Add 1 to qualify",
               "Buy 2 for 3 — Add 1 to qualify"
             ],
+            "offersExcVat": [
+              "Buy 2 for 4 — Add 2 to qualify",
+              "Buy 2 for 4 — Add 2 to qualify"
+            ],
             "message": "Purchased 12 times since your last visit 1 day ago",
             "infoTimeHead": "Available for Collection",
             "address": "Watford",
@@ -1109,6 +1124,9 @@
             "totalMobile": "16",
             "offers": [
               "Buy 2 Wickes Romano Bathroom Door Handle - Polished Chrome 1 Pair, Wickes Romano Locking Door Handle - Satin Nickel 1 Pair, Wickes Passage Door Knob Set - Brass 1 Pair for £8 - Add 1 to qualify"
+            ],
+            "offersExcVat": [
+              "Buy 2 Wickes Romano Bathroom Door Handle - Polished Chrome 1 Pair, Wickes Romano Locking Door Handle - Satin Nickel 1 Pair, Wickes Passage Door Knob Set - Brass 1 Pair for £7 - Add 1 to qualify"
             ]
           },
           {

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

@@ -1,9 +1,16 @@
-var Wick = Wick || {};
+window.Wick = window.Wick || {};
+window.Wick.BillieData = window.Wick.BillieData || {};
+window.Wick.BillieData.billiePaymentTerms = ['30', '60', '90'];
+window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
+window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
 
 Wick.PaymentDetails = (function () {
     var $btnEnterDetails = $('.btn-enter-details'),
         isGuestPage = $('.page_checkout-payment-details_guest').length;
 
+    const $billieInfo = $('.checkout-payment-details__billie .billie-info');
+    const $klarnaInfo = $('.checkout-payment-details__klarna .klarna-info');
+
     function bindEvents() {
         $btnEnterDetails.on('click', function (e) {
             e.preventDefault();
@@ -49,6 +56,32 @@ Wick.PaymentDetails = (function () {
             Wick.Forms.showValidationErrors(this);
             return false;
         });
+
+        $(window).on(window.INIT_BILLIE_PAYMENT, function (e) {
+            const detail = e.detail || (e.originalEvent && e.originalEvent.detail) || {};
+
+            if (detail && detail.resolve) {
+                $billieInfo.show();
+                detail.resolve();
+            }
+        });
+
+        $(window).on(window.INIT_KLARNA_PAYMENT, function (e) {
+            const detail = e.detail || (e.originalEvent && e.originalEvent.detail) || {};
+
+            if (detail && detail.resolve) {
+                $klarnaInfo.show();
+                detail.resolve();
+            }
+        });
+
+        $(document).on('change', 'input[name="repaymentTerms"]', function () {
+            const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
+
+            if (hasSelection) {
+                $billieInfo.show();
+            }
+        });
     }
 
     bindEvents();