wickes-css2 2.106.0-develop.1 → 2.106.0-develop.10

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

@@ -1,4 +1,4 @@
-import {updateDiscount} from "./discounts";
+import { updateDiscount } from './discounts';
 
 const osEl = {
     $summarySection: $('.summary'),
@@ -10,17 +10,19 @@ const osEl = {
     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 (typeof obj.dataValue === 'undefined') return;
+
         if ($(obj.item).length) {
             $(obj.item).show();
         } else {
             if ($(osEl.checkoutWidgetDetailsDiscount).length) {
-                $(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj))
+                $(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj));
             } else {
-                $(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj))
+                $(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj));
             }
         }
 
@@ -30,14 +32,35 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
         } else {
             $(obj.item).hide();
         }
-    })
+    });
+
+    const keys = new Set(Object.keys(data || {}));
+    const hasAny = (...arr) => arr.some((k) => keys.has(k));
 
     const value = data.totalPrice?.formattedValue || data.total;
+    if (typeof value !== 'undefined' && hasAny('total', 'totalPrice')) {
+        updateSummaryMobileBarTotal(value);
+    }
+
+    if (hasAny('promotionsInfo')) {
+        updateDiscount(data, isVoucher);
+    }
 
-    updateDiscount(data, isVoucher);
-    hideUnusedDeliveryTypeCost(data, isVoucher);
-    calculateFreeDelivery(data);
-    updateSummaryMobileBarTotal(value);
+    if (
+        hasAny(
+            'deliveryOrder',
+            'clickAndCollectOrder',
+            'clickAndCollectOnly',
+            'deliveryItemsQuantity',
+            'pickupItemsQuantity'
+        )
+    ) {
+        hideUnusedDeliveryTypeCost(data, isVoucher);
+    }
+
+    if (hasAny('freeDelivery', 'messageForFreeDelivery', 'clickAndCollectOnly')) {
+        calculateFreeDelivery(data);
+    }
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -46,23 +69,25 @@ function createCheckoutWidgetItem(obj) {
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
-    `
+    `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
-    $(osEl.delivery).show()
-    $(osEl.cc).show()
+    $(osEl.delivery).show();
+    $(osEl.cc).show();
     if (isVoucher) {
-        if (!data.deliveryOrder) {
-            $(osEl.delivery).hide()
-        } else if (!data.clickAndCollectOrder) {
-            $(osEl.cc).hide()
+        if ('deliveryOrder' in data && data.deliveryOrder === false) {
+            $(osEl.delivery).hide();
+        }
+
+        if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
+            $(osEl.cc).hide();
         }
     } else {
         if (data.clickAndCollectOnly) {
-            $(osEl.delivery).hide()
+            $(osEl.delivery).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
-            $(osEl.cc).hide()
+            $(osEl.cc).hide();
         }
     }
 }
@@ -73,31 +98,35 @@ function calculateFreeDelivery(data) {
         let $deficit = $(this).find(osEl.itemDeficit);
 
         !$free.length || $free.remove();
-        !$deficit.length || $deficit.remove()
+        !$deficit.length || $deficit.remove();
 
         if (!data.clickAndCollectOnly) {
             if (data.freeDelivery && data.messageForFreeDelivery) {
-                $(this).find(osEl.summaryDelivery).before(function () {
-                    return `
+                $(this)
+                    .find(osEl.summaryDelivery)
+                    .before(function () {
+                        return `
                         <div class="checkout-widget__item checkout-widget__item-free">
                             <span class="checkout-widget__text">
                                ${data.messageForFreeDelivery}
                             </span>
                         </div>
-                    `
-                })
+                    `;
+                    });
                 $(this).find(osEl.summaryDelivery).hide();
             } else if (!data.freeDelivery && data.messageForFreeDelivery) {
-                $(this).find(osEl.summaryDelivery).before(function () {
-                    return `
+                $(this)
+                    .find(osEl.summaryDelivery)
+                    .before(function () {
+                        return `
                         <div class="checkout-widget__item checkout-widget__item-deficit">
                             ${data.messageForFreeDelivery}
                         </div>
-                    `
-                })
+                    `;
+                    });
             }
         }
-    })
+    });
 }
 
 function updateSummaryMobileBarTotal(formattedValue) {

package/build/js/page/components/toggle-password-visibility.js

@@ -0,0 +1,22 @@
+import { initializeInputToggle } from '../utils/show-hide-input';
+
+var Wick = window.Wick || {};
+
+Wick.TogglePasswordVisibility = {
+    el: {
+        $containers: $('.form-row[data-show-content] .input-wrap'),
+    },
+
+    init() {
+        if (!this.el.$containers.length) {
+            return;
+        }
+        this.el.$containers.each(function () {
+            initializeInputToggle($(this));
+        });
+    },
+};
+
+$(document).ready(function () {
+    Wick.TogglePasswordVisibility.init();
+});

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

@@ -1,11 +1,11 @@
-import {updateOrderSummary} from './order-summary';
-import {callAction} from '../utils/http-action';
-import {retryAction, retryHelpers} from "./retry-action";
-import {showValidationErrors} from '../utils/validation'
-import {updateKlarnaPlacements} from '../basket/klarna';
-import {getCSRFToken, CSRF} from "./csrf";
-import {ROUTES} from '../utils/routes';
-import {updateClearpayPlacements, updateClearpayVisibility} from '../basket/clearpay';
+import { updateOrderSummary } from './order-summary';
+import { callAction } from '../utils/http-action';
+import { retryAction, retryHelpers } from './retry-action';
+import { showValidationErrors } from '../utils/validation';
+import { updateKlarnaPlacements } from '../basket/klarna';
+import { getCSRFToken, CSRF } from './csrf';
+import { ROUTES } from '../utils/routes';
+import { updateClearpayPlacements, updateClearpayVisibility } from '../basket/clearpay';
 
 const voucherEl = {
     $basketVoucher: $('.checkout-voucher'),
@@ -30,8 +30,10 @@ const voucherEl = {
 };
 
 export function checkVoucherCode(e, current) {
-    e && e.preventDefault()
-    const context = current ? $(current).closest(voucherEl.voucher) : $(this).closest(voucherEl.voucher),
+    e && e.preventDefault();
+    const context = current
+            ? $(current).closest(voucherEl.voucher)
+            : $(this).closest(voucherEl.voucher),
         value = context.find('input').val().trim(),
         encodedValue = encodeURIComponent(value),
         errorMsg = {
@@ -39,8 +41,8 @@ export function checkVoucherCode(e, current) {
             responseJSON: {
                 globalMessage: {
                     message: 'Please enter a voucher code',
-                }
-            }
+                },
+            },
         };
 
     if (value && value.length) {
@@ -59,7 +61,7 @@ function executionVoucherApplying(value, context) {
             url: `${ROUTES.VOUCHER_UPDATE}/${value}`,
             type: 'POST',
             headers: {
-                'CSRFToken': CSRF.getToken(),
+                CSRFToken: CSRF.getToken(),
             },
             retryLimit: retryHelpers.retryLimit,
             error: notApplyVoucher,
@@ -79,7 +81,7 @@ export function voucherRemove() {
     let voucher = $(this).parent(),
         voucherCode = voucher.attr('data-coupon-code');
     voucher.addClass('checkout-widget__voucher-removed').text('Voucher removed');
-    voucherRemoveAction(voucherCode, voucher)
+    voucherRemoveAction(voucherCode, voucher);
 }
 
 function voucherRemoveAction(code) {
@@ -90,7 +92,7 @@ function voucherRemoveAction(code) {
             type: 'DELETE',
             headers: {
                 'Content-Type': 'application/json',
-                'CSRFToken': CSRF.getToken(),
+                CSRFToken: CSRF.getToken(),
             },
             error: handleVoucherRemovingError,
         };
@@ -106,12 +108,11 @@ function formattedTotalPriceWithoutSymbol(val) {
 }
 
 function executionVoucherRemoving(data) {
-    updateOrderSummary(
-        data,
-        getEqualMapForVoucherUpdate(data),
-        true
+    updateOrderSummary(data, getEqualMapForVoucherUpdate(data), true);
+    updateKlarnaPlacements(
+        formattedTotalPriceWithoutSymbol(data.total),
+        data.paymentInfos.klarnaPaymentInfo.customPaymentMethodIds
     );
-    updateKlarnaPlacements(formattedTotalPriceWithoutSymbol(data.total));
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
 }
@@ -123,19 +124,18 @@ function applyVoucher(data, context) {
 
     clearValidationErrors($voucherForm);
     voucherEl.$basketVoucher.toggle(voucherEl.voucherHide);
-    updateOrderSummary(
-        data,
-        getEqualMapForVoucherUpdate(data),
-        true
+    updateOrderSummary(data, getEqualMapForVoucherUpdate(data), true);
+    updateKlarnaPlacements(
+        formattedTotalPriceWithoutSymbol(data.total),
+        data.paymentInfos.klarnaPaymentInfo.customPaymentMethodIds
     );
-    updateKlarnaPlacements(formattedTotalPriceWithoutSymbol(data.total));
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
     setTimeout(function () {
         voucherButton.attr('disabled', false);
         $voucherFormInput.val('');
         voucherEl.$basketVoucher.toggle(voucherEl.voucherHide);
-    }, 5000)
+    }, 5000);
 }
 
 function notApplyVoucher(xhr, context) {
@@ -158,21 +158,25 @@ function notApplyVoucher(xhr, context) {
 function retryVoucherAction(voucherForm) {
     return new Promise((resolve) => {
         getCSRFToken(resolve);
-    }).then(() => {
-        retryAction(checkVoucherCode, retryHelpers.retryLimit, ...Array(1), voucherForm)
-    }).catch(() => {
-        showDefaultError();
     })
+        .then(() => {
+            retryAction(checkVoucherCode, retryHelpers.retryLimit, ...Array(1), voucherForm);
+        })
+        .catch(() => {
+            showDefaultError();
+        });
 }
 
 function retryVoucherRemoving(code) {
     return new Promise((resolve) => {
         getCSRFToken(resolve);
-    }).then(() => {
-        retryAction(voucherRemoveAction, retryHelpers.retryLimit, code);
-    }).catch(() => {
-        console.log('remove failed');
     })
+        .then(() => {
+            retryAction(voucherRemoveAction, retryHelpers.retryLimit, code);
+        })
+        .catch(() => {
+            console.log('remove failed');
+        });
 }
 
 function handleVoucherRemovingError(xhr, code) {
@@ -182,7 +186,7 @@ function handleVoucherRemovingError(xhr, code) {
 }
 
 function showDefaultError(error = retryHelpers.errorMsg) {
-    const voucher = getNotAppliedVoucher()
+    const voucher = getNotAppliedVoucher();
     showValidationErrors(voucher.find('form'), error);
 }
 
@@ -195,9 +199,12 @@ function getNotAppliedVoucher() {
 function clearValidationErrors(form) {
     var $form = $(form);
     if ($form.hasClass(voucherEl.formInvalid)) {
-        $form.removeClass(voucherEl.formInvalid)
-            .find(voucherEl.fieldRow).removeClass(voucherEl.rowValidationError)
-            .find(voucherEl.fieldError).remove();
+        $form
+            .removeClass(voucherEl.formInvalid)
+            .find(voucherEl.fieldRow)
+            .removeClass(voucherEl.rowValidationError)
+            .find(voucherEl.fieldError)
+            .remove();
     }
 }
 
@@ -207,48 +214,46 @@ function getEqualMapForVoucherUpdate(data) {
             item: voucherEl.subtotal,
             itemValue: voucherEl.value,
             dataValue: data.subTotal,
-            title: 'Items subtotal:'
-
+            title: 'Items subtotal:',
         },
         {
             item: voucherEl.vat,
             itemValue: voucherEl.value,
             dataValue: data.vat,
-            title: 'VAT:'
+            title: 'VAT:',
         },
         {
             item: voucherEl.cc,
             itemValue: voucherEl.value,
             dataValue: data.clickAndCollectCost,
-            title: 'Click & Collect:'
+            title: 'Click & Collect:',
         },
         {
             item: voucherEl.delivery,
             itemValue: voucherEl.value,
             dataValue: data.deliveryCost,
-            title: 'Delivery:'
+            title: 'Delivery:',
         },
         {
             item: voucherEl.charity,
             itemValue: voucherEl.value,
             dataValue: data.charityPrice,
-            title: 'Charity donation:'
+            title: 'Charity donation:',
         },
         {
             item: voucherEl.discountItem,
             itemValue: voucherEl.discountValue,
-            dataValue: data.discountTotal
+            dataValue: data.discountTotal,
         },
         {
             item: voucherEl.orderTotal,
             itemValue: voucherEl.orderTotalValue,
-            dataValue: data.total
+            dataValue: data.total,
         },
     ];
 }
 
 $(document).ready(function () {
-
     function init() {
         if (!$('.checkout-voucher').length) {
             return;

package/build/js/page/count-stepper/pdp-count-stepper.js

@@ -0,0 +1,29 @@
+import { createCountStepper } from '../utils/create-count-stepper';
+
+var Wick = window.Wick || {};
+
+Wick.PDPCountStepper = {
+    el: {
+        input: '#quantity-field',
+    },
+
+    stepper: null,
+
+    init() {
+        Wick.PDPCountStepper.stepper = createCountStepper({
+            inputSel: Wick.PDPCountStepper.el.input,
+            min: 1,
+            max: 99,
+            onChange(qty, inputEl) {
+                $(inputEl).trigger('change');
+            },
+        });
+
+        Wick.PDPCountStepper.stepper.init($(document));
+    },
+};
+
+$(document).ready(function () {
+    if (!$(Wick.PDPCountStepper.el.input).length) return;
+    Wick.PDPCountStepper.init();
+});

package/build/js/page/filters/plp-filters-mobile.js

@@ -65,11 +65,6 @@ Wick.PLPFiltersMobile = {
         $btn.text(total > 0 ? `View results (${total})` : 'View results');
     },
 
-    hideAccordions() {
-        $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
-        $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
-    },
-
     init() {
         // two-way binding for input between desktop and modal
         $(document)
@@ -86,13 +81,14 @@ Wick.PLPFiltersMobile = {
         $(document)
             .off('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
+                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.draftState);
             });
 
         $(document)
             .off('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFiltersMobile.hideAccordions();
+                const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(this));
+                Wick.PLPFilters.draftState = Wick.PLPFilters.collectStateFromDOM(scope);
             });
 
         // mobile "View results" button in modal
@@ -126,6 +122,7 @@ Wick.PLPFiltersMobile = {
 
                 e.preventDefault();
 
+                Wick.PLPFilters.draftState = {};
                 Wick.PLPFilters.appliedState = {};
                 Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
 

package/build/js/page/filters/plp-filters-utils.js

@@ -1,6 +1,14 @@
 var Wick = window.Wick || {};
 
 Wick.PLPUtils = (function () {
+    function cloneState(state) {
+        const out = {};
+        Object.keys(state).forEach((k) => {
+            out[k] = new Set(state[k]);
+        });
+        return out;
+    }
+
     function syncTwinInputsByName(name, checked, source) {
         const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input').filter(
             function () {
@@ -57,6 +65,7 @@ Wick.PLPUtils = (function () {
     }
 
     return {
+        cloneState,
         syncTwinInputsByName,
         getPanelType,
         countItems,

package/build/js/page/filters/plp-filters.js

@@ -6,6 +6,7 @@ Wick.PLPFilters = {
     ROOT: '.plp-filters',
     GROUP: '.plp-filters__group',
     APPLY_BTN: '.plp-filters__apply',
+    draftState: null,
 
     INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
 
@@ -24,6 +25,7 @@ Wick.PLPFilters = {
         }
 
         Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+        Wick.PLPFilters.draftState = Wick.PLPUtils.cloneState(Wick.PLPFilters.appliedState);
         Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
 
         // 3) chips
@@ -34,17 +36,20 @@ Wick.PLPFilters = {
 
         // 5) primary render
         Wick.PLPFilters.updateSelectedUI(rootWrapper);
-        
+
         // 6) handle browser back/forward navigation
         Wick.PLPFilters.handlePageShow();
     },
 
     // Handle bfcache (back/forward cache)
     handlePageShow() {
-        window.addEventListener('pageshow', function(event) {
+        window.addEventListener('pageshow', function () {
             const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
-            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
-            Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
+            const stateScope = rootWrapper.add($(Wick.PLPFiltersMobile.MODAL_SEL));
+
+            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(stateScope);
+            Wick.PLPFilters.draftState = Wick.PLPFilters.appliedState;
+            Wick.PLPFilters.setDOMFromState(stateScope, Wick.PLPFilters.appliedState);
         });
     },
 
@@ -187,7 +192,10 @@ Wick.PLPFilters = {
 
     // ===== APPLY
     applyFromScopes(scopeForCollect, push) {
-        Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
+        const nextState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
+
+        Wick.PLPFilters.draftState = nextState;
+        Wick.PLPFilters.appliedState = nextState;
         Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
     },