wickes-css2 2.109.0-develop.6 → 2.109.0-develop.8

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,10 +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'),
-        $billieInfo: $('.checkout-payment-details__billie .billie-info'),
+        $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
         $wrapperPaymentInput: $('.checkout-payment-details__row'),
         paymentInputName: '[name=payment-method]',
         $cardDetails: $('.checkout-payment-details__card-details'),
@@ -27,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;
@@ -55,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;
@@ -102,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.$billieInfo.toggleClass(elements.hiddenClass, !isReady);
     }
 
     function resetBillieRepaymentSelection() {
@@ -130,13 +192,34 @@ 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 showBillingAddressDataCardFields() {
+        const dataCardFields = elements.$billingAddress.find('[data-card]');
+        if (dataCardFields) {
+            dataCardFields.show();
+        }
     }
 
     function changeDetailsBlock(checkedMethod) {
         if (checkedMethod !== 'billie') {
+            resetBillieUi();
             setBillingDetailsRowVisibility(true);
+            hideBillieBusiness();
+        }
+
+        if (checkedMethod === 'klarna') {
+            initKlarnaPayment().catch(() => {});
+        }
+
+        if (checkedMethod === 'billie' && getBillieRepaymentTermsLength() === 1) {
+            initBilliePayment().catch(() => {});
         }
 
         switch (checkedMethod) {
@@ -158,7 +241,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 };
                 changeLabelText(detailsLabel);
 
-                setBillieStepVisibility(false);
+                setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
                 break;
@@ -172,15 +255,16 @@ Wick.CheckoutPaymentDetails = (function () {
                 prevClearableMethod === 'card' && clearInputFields();
                 changeLabelText(detailsLabel);
                 prevClearableMethod = checkedMethod;
+                showBillingAddressDataCardFields();
                 break;
 
-            case 'apple':
+            case 'apple-pay':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
                 break;
 
-            case 'google':
+            case 'google-pay':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
@@ -256,7 +340,7 @@ Wick.CheckoutPaymentDetails = (function () {
             if (currentMethod !== 'billie') return;
 
             requestAnimationFrame(() => {
-                forceReflow(elements.$billieInfoBlock);
+                forceReflow(elements.$billieWidget);
             });
 
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;

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/components/store-locator-cards.js

@@ -0,0 +1,76 @@
+var Wick = window.Wick || (window.Wick = {});
+
+Wick.StoreCardsAlign = (function () {
+    const SELECTORS = {
+        card: '.card-store',
+        info: '.card-store__info',
+        accordionHeader: '.opening-times-accordion__header',
+    };
+
+    let resizeTimeout;
+
+    function alignCardInfoHeights() {
+        const rows = [];
+
+        $(SELECTORS.card).each(function () {
+            const $card = $(this);
+            const top = $card.offset().top;
+
+            let row = rows.find((r) => Math.abs(r.top - top) < 5);
+
+            if (!row) {
+                row = { top: top, items: [] };
+                rows.push(row);
+            }
+
+            row.items.push($card);
+        });
+
+        rows.forEach((row) => {
+            let maxHeight = 0;
+
+            // reset
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', '');
+            });
+
+            // find max
+            row.items.forEach(($card) => {
+                const h = $card.find(SELECTORS.info).outerHeight();
+                if (h > maxHeight) maxHeight = h;
+            });
+
+            // apply
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', maxHeight + 'px');
+            });
+        });
+    }
+
+    function bindEvents() {
+        // load
+        $(window).on('load', alignCardInfoHeights);
+
+        // resize
+        $(window).on('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(alignCardInfoHeights, 100);
+        });
+
+        // accordion
+        $(document).on('click', SELECTORS.accordionHeader, () => {
+            setTimeout(alignCardInfoHeights, 0);
+        });
+    }
+
+    function init() {
+        bindEvents();
+    }
+
+    init();
+
+    return {
+        init: init,
+        align: alignCardInfoHeights,
+    };
+})();