wickes-css2 2.94.0-develop.13 → 2.94.0-develop.15

package/build/js/page/basket/summary-mobile.js

@@ -0,0 +1,22 @@
+const summaryMobileEl = {
+  summaryAside: '.summary__aside',
+  backToTop : '#back-to-top',
+  canDisplayPayPal: '#canDisplayPayPalOnBasketPage',
+};
+
+export function addClassToSummaryAside(data) {
+  const payPalEnabled = data?.paymentInfos?.payPalEnabled;
+  const clickAndCollectOnly = data.clickAndCollectOnly;
+  const canDisplayPayPal = $(summaryMobileEl.canDisplayPayPal).val() === 'true';
+  const isPayPalAllowed = payPalEnabled && clickAndCollectOnly && canDisplayPayPal;
+  const $aside = $(summaryMobileEl.summaryAside);
+  const $backToTop = $(summaryMobileEl.backToTop);
+
+  if (isPayPalAllowed === false) {
+    $aside.addClass('single-button');
+    $backToTop.addClass('single-button');
+  } else {
+    $aside.removeClass('single-button');
+    $backToTop.removeClass('single-button');
+  }
+}

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

@@ -29,6 +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';
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -384,6 +386,7 @@ Wick.BasketPage = {
         } else {
             if (initial) {
                 Wick.BasketPage.getCartEntries(Wick.BasketData.updateCart);
+                addClassToSummaryAside(Wick.BasketData.updateCart);
                 const initialTotalPrice = Wick.BasketData.updateCart.totalPrice.value;
                 updateClearpayVisibility(initialTotalPrice);
             } else {
@@ -405,6 +408,7 @@ Wick.BasketPage = {
                 updateClearpayPlacements(Wick.BasketData.updateCart.totalPrice.value);
                 updateClearpayVisibility(Wick.BasketData.updateCart.totalPrice.value);
                 Wick.BasketPage.addPotentialPromo(Wick.BasketData.updateCart);
+                addClassToSummaryAside(Wick.BasketData.updateCart);
                 Wick.BasketPage.getCartEntries(Wick.BasketData.updateCart);
                 Wick.BasketPage.checkProductArrays(Wick.BasketData.updateCart) || Wick.BasketPage.removeOrderItem(repaintData);
                 updateBasketSession();
@@ -415,6 +419,7 @@ Wick.BasketPage = {
     },
     updateCartAction: function (response, info) {
         updateClearpayVisibility(response.totalPrice.value)
+        addClassToSummaryAside(response)
         if (info.initial) {
             Wick.BasketPage.getCartEntries(response);
         } else {
@@ -1257,6 +1262,9 @@ Wick.BasketPage = {
         $(Wick.BasketPage.el.content).find(quantityButton).prop('disabled', false);
     }
 };
+
+$(document).on('cartUpdate', initStickyObserver);
+
 $(document).ready(function () {
     function init() {
 
@@ -1291,6 +1299,11 @@ $(document).ready(function () {
 
         $(Wick.BasketPage.el.voucherRemove).unbind('click');
         Wick.BasketPage.paintActionButton();
+        initStickyObserver(
+            $('[data-sticky-observe]'),
+            $('[data-sticky-element]'),
+            '.summary__aside.collapse.show'
+        );
         Wick.BasketPage.updateCart(...Array(3), true);
         setDefaultCharityValue();
         if (!$(Wick.BasketPage.el.loader).length) {

package/build/js/page/components/order-summary.js

@@ -1,4 +1,5 @@
 import {updateDiscount} from "./discounts";
+import {addClassToSummaryAside} from "../basket/summary-mobile";
 
 const osEl = {
     $summarySection: $('.summary'),
@@ -9,9 +10,9 @@ const osEl = {
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
     summaryDelivery: '.checkout-widget__item-delivery',
+    summaryMobileTotal: '.summary__mobile-bar-total',
 }
 
-
 export function updateOrderSummary(data, equalMap, isVoucher) {
     equalMap.forEach((obj) => {
         if ($(obj.item).length) {
@@ -32,9 +33,12 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
         }
     })
 
+    const value = data.totalPrice?.formattedValue || data.total;
+
     updateDiscount(data, isVoucher);
     hideUnusedDeliveryTypeCost(data, isVoucher);
     calculateFreeDelivery(data);
+    updateSummaryMobileBarTotal(value);
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -97,3 +101,6 @@ function calculateFreeDelivery(data) {
     })
 }
 
+function updateSummaryMobileBarTotal(formattedValue) {
+    $(osEl.summaryMobileTotal).text(formattedValue);
+}

package/build/js/page/components/sticky-order-observer.js

@@ -0,0 +1,49 @@
+export function initStickyObserver(observedElements, stickyElements, collapseSelector) {
+  let io;
+
+  const $observed = observedElements instanceof jQuery
+    ? observedElements
+    : $(observedElements);
+
+  const $sticky = stickyElements instanceof jQuery
+    ? stickyElements
+    : $(stickyElements);
+
+  if (!$observed.length || !$sticky.length) return;
+
+  function toggle(hide) {
+    $sticky.toggleClass('is-hidden', hide);
+    $('body').toggleClass('summary-hidden', hide);
+    if (hide) {
+      $(collapseSelector).collapse('hide');
+    }
+  }
+
+  if ('IntersectionObserver' in window) {
+    io = new IntersectionObserver(
+      entries => {
+        const anyInView = entries.some(e => e.isIntersecting);
+        toggle(anyInView);
+      },
+      { rootMargin: '0px 0px -20% 0px', threshold: 0 }
+    );
+    $observed.each((_, el) => io.observe(el));
+  } else {
+    // Fallback for older browsers
+    function check() {
+      let anyInView = false;
+      $observed.each(function () {
+        const r = this.getBoundingClientRect();
+        if (r.top < window.innerHeight * 0.8 && r.bottom > 0) {
+          anyInView = true;
+          return false; // break
+        }
+      });
+      toggle(anyInView);
+    }
+    $(window)
+      .off('scroll.sticky resize.sticky')
+      .on('scroll.sticky resize.sticky', check);
+    check();
+  }
+}

package/build/js/page/components/voucher.js

@@ -15,7 +15,7 @@ const voucherEl = {
     formInvalid: 'form_invalid',
     fieldRow: '.form-row[data-row-required]',
     rowValidationError: 'form-row_validation-error',
-    voucherHide: '.checkout-voucher-hide',
+    voucherHide: 'checkout-voucher-hide',
     fieldError: '.form-row__error',
     subtotal: '.checkout-widget__item-bold',
     vat: '.checkout-widget__item-vat',