wickes-css2 2.111.0-develop.2 → 2.111.0-why-not-add.2

package/src/js/page/components/discounts.js

@@ -17,10 +17,10 @@ export function updateDiscount(data, isVoucher) {
     if (isVoucher) {
         promotions.forEach((discountItem) => {
             osEl.$discountList().append(() => {
-                if (discountItem.usedCouponCode && discountItem.displayDescription) {
+                if (discountItem.usedCouponCode && discountItem.description) {
                     return `
             <li data-coupon-code="${discountItem.usedCouponCode}">
-              ${buildDescriptionHtml(discountItem)}
+              ${discountItem.description}
               <span class="icon checkout-widget__voucher-remove">
                 <span class="fas fa-times"></span>
               </span>
@@ -28,8 +28,8 @@ export function updateDiscount(data, isVoucher) {
           `;
                 }
 
-                if (discountItem.displayDescription) {
-                    return `<li>${buildDescriptionHtml(discountItem)}</li>`;
+                if (discountItem.description) {
+                    return `<li>${discountItem.description}</li>`;
                 }
 
                 return '';
@@ -46,27 +46,20 @@ export function updateDiscount(data, isVoucher) {
 
 function appendOrderPromotions(discountObj) {
     if (!_.isEmpty(discountObj)) {
-        if (discountObj.usedCouponCode && discountObj.displayDescription) {
+        if (discountObj.usedCouponCode && discountObj.description) {
             osEl.$discountList().append(createRemoveCouponItem(discountObj));
-        } else if (discountObj.displayDescription) {
+        } else if (discountObj.description) {
             osEl.$discountList().append(function () {
-                return `<li>${buildDescriptionHtml(discountObj)}</li>`;
+                return `<li>${discountObj.description}</li>`;
             });
         }
     }
 }
 
-function buildDescriptionHtml(obj) {
-    if (Wick.VatToggle.isToggleVatAvailable() && obj.displayDescriptionExclusiveVat) {
-        return `<span class="including-vat-inherit">${obj.displayDescription}</span><span class="excluding-vat-inherit">${obj.displayDescriptionExclusiveVat}</span>`;
-    }
-    return obj.displayDescription;
-}
-
 function createRemoveCouponItem(obj) {
     return `
     <li data-coupon-code="${obj.usedCouponCode}">
-      ${buildDescriptionHtml(obj)}
+      ${obj.description}
       <span class="icon checkout-widget__voucher-remove">
         <span class="fas fa-times"></span>
       </span>

package/src/js/page/components/mini-basket-slider.js

@@ -33,7 +33,7 @@ Handlebars.registerHelper('removeFirst', function (str, remove) {
 });
 
 Handlebars.registerHelper('isToggleVatAvailable', function () {
-    return !!window.ACC?.app?.isVatToggleAvailable;
+    return Wick.checkLocalEnv ? false : window.ACC?.app?.isVatToggleAvailable;
 });
 
 var Wick = window.Wick || {};
@@ -439,15 +439,6 @@ Wick.MiniBasketSliderFE = {
             Wick.MiniBasketSliderFE.addPromotions
         );
     },
-    buildPromoHtml: function (entry) {
-        const desc = entry.displayDescription;
-        const descExc = entry.displayDescriptionExclusiveVat;
-        const isVatAvailable = !!window.ACC?.app?.isVatToggleAvailable;
-        if (isVatAvailable && descExc) {
-            return `<div class="products__promo"><span class="including-vat-inherit">${desc}</span><span class="excluding-vat-inherit">${descExc}</span></div>`;
-        }
-        return `<div class="products__promo">${desc}</div>`;
-    },
     addPromotions: function (item, data) {
         let arr = [];
 
@@ -455,9 +446,17 @@ Wick.MiniBasketSliderFE = {
             data.potentialProductPromotions.forEach((entry) => {
                 entry.consumedEntries.forEach((promo) => {
                     if (promo.orderEntryNumber === item.entryNumber) {
-                        const html = Wick.MiniBasketSliderFE.buildPromoHtml(entry);
-                        if (!arr.includes(html)) {
-                            arr.push(html);
+                        if (arr.length) {
+                            let duplicate = arr.every((el) => {
+                                return (
+                                    el !== `<div class="products__promo">${entry.description}</div>`
+                                );
+                            });
+
+                            !duplicate ||
+                                arr.push(`<div class="products__promo">${entry.description}</div>`);
+                        } else {
+                            arr.push(`<div class="products__promo">${entry.description}</div>`);
                         }
                     }
                 });
@@ -466,10 +465,18 @@ Wick.MiniBasketSliderFE = {
         data.appliedProductPromotions &&
             data.appliedProductPromotions.forEach((entry) => {
                 entry.consumedEntries.forEach((promo) => {
-                    if (promo.orderEntryNumber === item.entryNumber && entry.displayDescription) {
-                        const html = Wick.MiniBasketSliderFE.buildPromoHtml(entry);
-                        if (!arr.includes(html)) {
-                            arr.push(html);
+                    if (promo.orderEntryNumber === item.entryNumber && entry.description) {
+                        if (arr.length) {
+                            let duplicate = arr.every((el) => {
+                                return (
+                                    el !== `<div class="products__promo">${entry.description}</div>`
+                                );
+                            });
+
+                            !duplicate ||
+                                arr.push(`<div class="products__promo">${entry.description}</div>`);
+                        } else {
+                            arr.push(`<div class="products__promo">${entry.description}</div>`);
                         }
                     }
                 });
@@ -543,7 +550,6 @@ Wick.MiniBasketSliderFE = {
             Wick.MiniBasketSliderFE.showMiniBasketEvent();
             setTimeout(() => {
                 Wick.MiniBasketSliderFE.isInitial = false;
-                Wick.MiniBasketSliderFE.isMiniBasketLoaded = true;
             }, 100);
             return;
         }

package/src/js/page/components/voucher.js

@@ -77,49 +77,9 @@ function executionVoucherApplying(value, context) {
     }
 }
 
-let pendingVoucherRemoval = null;
-
 export function voucherRemove() {
-    const voucher = $(this).parent();
-    const voucherCode = voucher.attr('data-coupon-code');
-    const couponName = getVoucherDisplayName(voucher) || voucherCode;
-    const $modal = $('#voucher-remove-popup');
-
-    if ($modal.length) {
-        $modal.find('.modal-box__title').text(`Remove ${couponName} discount?`);
-        $modal
-            .find('.description')
-            .html(
-                `Are you sure you want to remove your <span class='voucher-remove-modal__coupon-name'>${couponName} discount</span> from this order? The total cost of your order will increase.`
-            );
-        pendingVoucherRemoval = { voucherCode, voucher };
-
-        const scrollPos = $(window).scrollTop();
-        if (Wick.Responsive.isTouchDevice()) {
-            $modal.one('show.bs.modal', function (e) {
-                e.stopPropagation();
-                $('body').css({ position: 'fixed', top: -scrollPos, width: '100%' });
-            });
-            $modal.one('hidden.bs.modal', function () {
-                $('body').css({ position: '', top: '', width: '' });
-                window.requestAnimationFrame(function () {
-                    window.scrollTo(0, scrollPos);
-                });
-            });
-        }
-
-        $modal.modal('show');
-    } else {
-        voucher.addClass('checkout-widget__voucher-removed').text('Voucher removed');
-        voucherRemoveAction(voucherCode, voucher);
-    }
-}
-
-function confirmVoucherRemove() {
-    if (!pendingVoucherRemoval) return;
-    const { voucherCode, voucher } = pendingVoucherRemoval;
-    pendingVoucherRemoval = null;
-    $('#voucher-remove-popup').modal('hide');
+    let voucher = $(this).parent(),
+        voucherCode = voucher.attr('data-coupon-code');
     voucher.addClass('checkout-widget__voucher-removed').text('Voucher removed');
     voucherRemoveAction(voucherCode, voucher);
 }
@@ -155,7 +115,6 @@ function executionVoucherRemoving(data) {
     );
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
-    Wick.BasketPage && Wick.BasketPage.updateCart(true);
 }
 
 function applyVoucher(data, context) {
@@ -172,7 +131,6 @@ function applyVoucher(data, context) {
     );
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
-    Wick.BasketPage && Wick.BasketPage.updateCart(true);
     setTimeout(function () {
         voucherButton.attr('disabled', false);
         $voucherFormInput.val('');
@@ -238,16 +196,6 @@ function getNotAppliedVoucher() {
     }
 }
 
-function getVoucherDisplayName($voucher) {
-    if (Wick.VatToggle.isToggleVatAvailable()) {
-        const selector = Wick.VatToggle.isActive()
-            ? '.excluding-vat, .excluding-vat-inherit'
-            : '.including-vat, .including-vat-inherit';
-        return $voucher.find(selector).first().text().trim();
-    }
-    return $voucher.text().trim();
-}
-
 function clearValidationErrors(form) {
     var $form = $(form);
     if ($form.hasClass(voucherEl.formInvalid)) {
@@ -313,7 +261,5 @@ $(document).ready(function () {
         getCSRFToken();
     }
 
-    $(document).on('click', '[data-action="confirm-voucher-remove"]', confirmVoucherRemove);
-
     init();
 });

package/src/js/page/utils/create-count-stepper.js

@@ -18,7 +18,8 @@ function normalizeOptions(options) {
 }
 
 function toInt(value) {
-    const n = parseInt(String(value || '').trim(), 10);
+    const n = parseInt(`${value || ''}`.trim(), 10);
+
     return Number.isFinite(n) ? n : NaN;
 }
 
@@ -28,6 +29,7 @@ function clampMin(n, min) {
 
 function ensureQty(value, fallback) {
     const n = toInt(value);
+
     return Number.isFinite(n) ? n : fallback;
 }
 
@@ -58,12 +60,15 @@ function updateButtons($input, opt) {
 
     const $minus = getMinusBtn($wrap);
 
-    if ($minus.length) $minus.prop('disabled', qty <= opt.min);
+    if ($minus.length) {
+        $minus.prop('disabled', qty <= opt.min);
+    }
 }
 
 function setQty($input, opt, qty) {
     const next = clampMin(qty, opt.min);
-    $input.val(String(next));
+
+    $input.val(`${next}`);
     updateButtons($input, opt);
 
     if (typeof opt.onChange === 'function') {
@@ -83,11 +88,13 @@ function ensureButtons($input, opt) {
     if (!hasMinus) {
         $input.before(buildBtn('minus', true));
     }
+
     if (!hasPlus) {
         $input.after(buildBtn('plus', false));
     }
 
     const initial = ensureQty($input.val(), opt.min);
+
     setQty($input, opt, initial);
 }
 
@@ -95,16 +102,24 @@ function getInputs($root, inputSel) {
     const $scope = $root && $root.length ? $root : $(document);
     const $self = $scope.is(inputSel) ? $scope : $();
     const $found = $scope.find(inputSel);
+
     return $self.add($found);
 }
 
+function getNamespace(inputSel) {
+    return `.countStepper_${inputSel.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+}
+
 // ===== FACTORY =====
 
 export function createCountStepper(options = {}) {
     const OPT = normalizeOptions(options);
-    if (!OPT.inputSel) throw new Error('[createCountStepper] Missing inputSel');
 
-    const NS = `.cnt_${Math.random().toString(16).slice(2)}`;
+    if (!OPT.inputSel) {
+        throw new Error('[createCountStepper] Missing inputSel');
+    }
+
+    const NS = getNamespace(OPT.inputSel);
 
     function init($root) {
         getInputs($root, OPT.inputSel).each(function () {
@@ -112,7 +127,6 @@ export function createCountStepper(options = {}) {
         });
     }
 
-    // +/- click
     $(document)
         .off(`click${NS}`, '[data-count-btn]')
         .on(`click${NS}`, '[data-count-btn]', function (e) {
@@ -120,15 +134,22 @@ export function createCountStepper(options = {}) {
             const $parent = $btn.parent();
             const $input = $parent.find(OPT.inputSel).first();
 
-            if (!$input.length) return;
+            if (!$input.length) {
+                return;
+            }
 
             e.preventDefault();
 
             const type = ($btn.attr('data-count-type') || '').toLowerCase();
             const current = ensureQty($input.val(), OPT.min);
 
-            if (type === 'plus') setQty($input, OPT, current + 1);
-            if (type === 'minus') setQty($input, OPT, current - 1);
+            if (type === 'plus') {
+                setQty($input, OPT, current + 1);
+            }
+
+            if (type === 'minus') {
+                setQty($input, OPT, current - 1);
+            }
         });
 
     $(document)

package/src/js/page/utils/create-loading-button.js

@@ -0,0 +1,37 @@
+export function createLoadingButton(config = {}) {
+    const settings = {
+        text: '.loading-button__text',
+        loader: '.loading-button__loader',
+        loadingClass: 'loading-button--loading',
+        ...config,
+    };
+
+    function setLoading($button, isLoading) {
+        if (!$button.length) {
+            return;
+        }
+
+        $button.toggleClass(settings.loadingClass, isLoading);
+        $button.find(settings.text).toggleClass('d-none', isLoading);
+        $button.find(settings.loader).toggleClass('d-none', !isLoading);
+    }
+
+    function start($button) {
+        setLoading($button, true);
+    }
+
+    function stop($button) {
+        setLoading($button, false);
+    }
+
+    function isLoading($button) {
+        return $button.hasClass(settings.loadingClass);
+    }
+
+    return {
+        setLoading,
+        start,
+        stop,
+        isLoading,
+    };
+}

package/src/js/page/utils/create-toast.js

@@ -0,0 +1,79 @@
+export function createToast(config = {}) {
+    const settings = {
+        containerClass: 'toast-container',
+        toastClass: 'toast',
+        closeSelector: '.notification__close',
+        backdropClass: 'modal-backdrop--toast',
+        duration: 3000,
+        template: null,
+        getData(type, text) {
+            return {
+                text,
+                classModifier: `${settings.toastClass} notification_${type}`,
+                success: type === 'success',
+                warning: type === 'warning',
+                error: type === 'error',
+            };
+        },
+        ...config,
+    };
+
+    let closeTimer = null;
+
+    function clearCloseTimer() {
+        if (closeTimer) {
+            window.clearTimeout(closeTimer);
+            closeTimer = null;
+        }
+    }
+
+    function hide() {
+        clearCloseTimer();
+
+        $(`.${settings.containerClass}`).remove();
+        $(`.${settings.backdropClass}`).removeClass(settings.backdropClass);
+
+        if (window.Wick && Wick.Backdrop) {
+            Wick.Backdrop.hide();
+        }
+
+        $(document).off('click.toast');
+    }
+
+    function show({ type = 'success', text = '' }) {
+        if (!settings.template) {
+            return;
+        }
+
+        hide();
+
+        const toastHtml = settings.template(settings.getData(type, text));
+
+        if (window.Wick && Wick.Backdrop) {
+            Wick.Backdrop.show();
+            $('.modal-backdrop').addClass(settings.backdropClass);
+        }
+
+        $('body').append(`<div class="${settings.containerClass}">${toastHtml}</div>`);
+
+        $(`.${settings.containerClass}`)
+            .off('click.toastClose', settings.closeSelector)
+            .on('click.toastClose', settings.closeSelector, function (event) {
+                event.preventDefault();
+                hide();
+            });
+
+        $(document)
+            .off('click.toast')
+            .on('click.toast', `.${settings.backdropClass}`, function () {
+                hide();
+            });
+
+        closeTimer = window.setTimeout(hide, settings.duration);
+    }
+
+    return {
+        show,
+        hide,
+    };
+}

package/src/js/page/utils/custom-dropdown.js

@@ -0,0 +1,80 @@
+export function createDropdown(config) {
+    const settings = {
+        root: '[data-dropdown]',
+        toggle: '[data-dropdown-toggle]',
+        value: '[data-dropdown-value]',
+        option: '[data-dropdown-option]',
+        openClass: 'dropdown--open',
+        selectedClass: 'dropdown__option--selected',
+        selectedValueData: 'selected-value',
+        ariaExpandedAttr: 'aria-expanded',
+        ariaSelectedAttr: 'aria-selected',
+        namespace: 'customDropdown',
+        onSelect: function () {},
+        ...config,
+    };
+
+    function closeAll() {
+        $(settings.root).each(function () {
+            const $dropdown = $(this);
+            const $toggle = $dropdown.find(settings.toggle);
+
+            $dropdown.removeClass(settings.openClass);
+            $toggle.attr(settings.ariaExpandedAttr, 'false');
+        });
+    }
+
+    function selectOption($dropdown, $option) {
+        const $value = $dropdown.find(settings.value);
+        const $options = $dropdown.find(settings.option);
+        const selectedValue = $option.attr('data-value') || '';
+
+        $options.removeClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'false');
+        $option.addClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'true');
+
+        if ($value.length) {
+            $value.text($option.text().trim());
+        }
+
+        $dropdown.data(settings.selectedValueData, selectedValue);
+
+        settings.onSelect($dropdown, $option, selectedValue);
+    }
+
+    function bind() {
+        $(document).off(`click.${settings.namespace}`);
+        $(document).on(`click.${settings.namespace}`, function (event) {
+            const $target = $(event.target);
+            const $toggle = $target.closest(settings.toggle);
+            const $option = $target.closest(settings.option);
+            const $dropdown = $target.closest(settings.root);
+
+            if (!$dropdown.length) {
+                closeAll();
+                return;
+            }
+
+            if ($toggle.length) {
+                const isOpen = $dropdown.hasClass(settings.openClass);
+
+                closeAll();
+
+                $dropdown.toggleClass(settings.openClass, !isOpen);
+                $toggle.attr(settings.ariaExpandedAttr, String(!isOpen));
+
+                return;
+            }
+
+            if ($option.length) {
+                selectOption($dropdown, $option);
+                closeAll();
+            }
+        });
+    }
+
+    return {
+        bind,
+        closeAll,
+        selectOption,
+    };
+}

package/src/layouts/checkout.hbs

@@ -21,7 +21,6 @@
       {{> header_checkout }}
     {{/block}}
     <a id="skip-to-content"></a>
-    {{#block "banner"}}{{/block}}
     <main {{#if fullWidth}}class="full-width-content"{{/if}}>
       <div class="container">
         <div class="row">

package/src/page_basket-energy-efficiency.html

@@ -58,10 +58,6 @@
             <div class="modal-images"></div>
         {{/content}}
     {{/extend}}
-    {{> checkout-voucher-remove-modal
-        shopping-cart-v2.checkout.voucher-remove-popup
-        id="voucher-remove-popup"
-    }}
         <script defer src="./js/energy-efficiency.min.js"></script>
         <script defer src="./js/basket.min.js"></script>
     {{/content}}

package/src/page_checkout_confirmation-new-marketing-consent-error.html

@@ -66,11 +66,4 @@
   </div>
 </div>
 {{/content}}
-
-{{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
-{{/content}}
 {{/extend}}

package/src/page_checkout_confirmation-new-marketing-consent.html

@@ -38,10 +38,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
 <script defer src="./js/page/checkout-confirmation-new.js"></script>
 {{/content}}
 

package/src/page_checkout_delivery-address-v2.html

@@ -39,10 +39,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
 <script defer src="./js/page/checkout-confirmation-new.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_checkout_delivery-details-v2-asm.html

@@ -12,9 +12,7 @@
     {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true}}
   {{/content}}
 
-{{#content "banner"}}
-{{>tradepro-discount-banner}}
-{{/content}}
+
 {{#content "main"}}
     <div class="delivery-block">
         <h3 class="delivery-block__heading">Delivery Information</h3>
@@ -126,10 +124,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_checkout_delivery-details-v2-calendar-message.html

@@ -127,10 +127,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_checkout_delivery-details-v2-oos.html

@@ -151,10 +151,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_checkout_delivery-details-v2-wisdom-not-available.html

@@ -133,10 +133,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_checkout_delivery-details-v2-wisdom.html

@@ -130,10 +130,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-{{> checkout-voucher-remove-modal
-    shopping-cart-v2.checkout.voucher-remove-popup
-    id="voucher-remove-popup"
-}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_checkout_delivery-details-with-loader-v2.html

@@ -126,10 +126,6 @@
 {{/content}}
 
 {{#content "foot" mode="append"}}
-    {{> checkout-voucher-remove-modal
-        shopping-cart-v2.checkout.voucher-remove-popup
-        id="voucher-remove-popup"
-    }}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>