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

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/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/src/page_my-account-installer-carousel.html

@@ -0,0 +1,131 @@
+{{#extend "my-account-v2"
+  customIconUserClass=header_menu.installer.[0].items.[0].icon
+  dataBreadcrumbs=my_account.installer.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Installer Carousel"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  installer-nav=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav my-account-menu-new
+          customIcon=true
+          menu=my_account.installer.menu
+          active-index=0
+          page-name=my_account.installer.menu.[0].title
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-summary">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="account-summary__wrapper d-none d-sm-grid mb-3">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+        </div>
+        {{#extend "my-account/cards-swap"}}
+          {{#content "card1"}}
+            <div class="account-summary__wrapper account-summary__wrapper--secondary">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  secondary=true
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  secondary=true
+                  discountText=my_account.installer.discountText
+                  installer=true
+                  title="In-store discount"
+                  code=my_account.discount
+                  customIcon=my_account.installer.icons.installer
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="trade-pro-id"
+                  customIcon=my_account.installer.icons.installer
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.installer.discountCode
+              }}
+            </div>
+          {{/content}}
+          {{#content "card2"}}
+            <div class="account-summary__wrapper">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  discountText=my_account.installer.discountText
+                  installer=true
+                  title="In-store discount"
+                  code=my_account.discount
+                  customIcon=my_account.installer.icons.installer
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="trade-pro-id"
+                  customIcon=my_account.installer.icons.installer
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.installer.discountCode
+              }}
+            </div>
+          {{/content}}
+        {{/extend}}
+        {{> my-account/active-orders/list-orders
+          switch-vat=true
+          title=my_account.installer.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.installer.activeOrders.orderList
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.installer.menu
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-actions">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> my-account/user-account-actions mod="d-sm-none"}}
+        {{> my-account/contact-us contacts=my_account.contacts}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_shopping-cart-v2-vat.html

@@ -12,7 +12,7 @@
     </div>
     <div class="checkout-header__promo">
       {{#each shopping-cart-v2.potentialOrderPromotions}}
-        {{> potential-promotion}}
+        {{> potential-promotion switch-vat=true}}
       {{/each}}
     </div>
     {{> checkout-header shopping-cart-v2.header}}
@@ -20,6 +20,7 @@
 {{#content "aside"}}
   {{> order-summary
     shopping-cart-v2.checkout
+    switch-vat=true
     id=1
     title="Order Summary"
     basket=true

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;
+      }
+    }
   }
 }
 

package/src/scss/components/my-account/_clipboard-code.scss

@@ -81,5 +81,9 @@
     .icon {
       color: $gray;
     }
+
+    .custom-icon path {
+      fill: $gray;
+    }
   }
 }

package/src/sitemap.html

@@ -527,6 +527,7 @@
                         <li><h5 class="mb-0">Account Pages Redesign</h5></li>
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
+                        <li><a href="page_my-account-installer-carousel.html" target="_blank">My Account Installer Carousel</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
                         <li><a href="page_my-account-trade-pro-carousel.html" target="_blank">My Account TradePro Carousel</a></li>
                         <li><a href="page_my-account-trade-pro-carousel-double.html" target="_blank">My Account TradePro Carousel Double</a></li>