wickes-css2 2.107.0-develop.3 → 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/package.json

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

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/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();

package/src/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/src/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/src/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/src/scss/components/checkout-chip.scss

@@ -40,6 +40,7 @@
     user-select: none;
     transition: border-color 0.2s;
     width: 78px;
+    margin-bottom: 0;
   }
 
   &__label-top {

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

@@ -405,6 +405,18 @@
         }
       }
     }
+
+    .js-billie-repayment-terms {
+      margin-bottom: 20px;
+
+      &--has-selection {
+        margin-bottom: 0;
+      }
+
+      .form-row__error {
+        margin-top: 16px;
+      }
+    }
   }
 }