wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/build/js/page/checkout-payment-details.js

@@ -13,6 +13,7 @@ Wick.CheckoutPaymentDetails = (function () {
     const elements = {
         $billieRepaymentTerms: $('.js-billie-repayment-terms'),
         $billieInfoBlock: $('.checkout-payment-details__billie'),
+        $billieInfo: $('.checkout-payment-details__billie .billie-info'),
         $wrapperPaymentInput: $('.checkout-payment-details__row'),
         paymentInputName: '[name=payment-method]',
         $cardDetails: $('.checkout-payment-details__card-details'),
@@ -103,7 +104,7 @@ Wick.CheckoutPaymentDetails = (function () {
 
     function setBillieStepVisibility(isReady) {
         setBillingDetailsRowVisibility(isReady);
-        elements.$billieInfoBlock.toggle(isReady);
+        elements.$billieInfo.toggleClass(elements.hiddenClass, !isReady);
     }
 
     function resetBillieRepaymentSelection() {
@@ -239,6 +240,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 +255,10 @@ Wick.CheckoutPaymentDetails = (function () {
             const currentMethod = $(elements.paymentInputName + ':checked').val();
             if (currentMethod !== 'billie') return;
 
+            requestAnimationFrame(() => {
+                forceReflow(elements.$billieInfoBlock);
+            });
+
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
             setBillieStepVisibility(hasSelection);
 

package/build/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/build/js/page/components/notify-me.js

@@ -0,0 +1,99 @@
+import { showValidationErrors, clearValidationErrors, isValidEmail } from '../utils/validation';
+
+var Wick = window.Wick || {};
+
+Wick.NotifyMeSubscription = {
+    NOTIFY_ME_EVENT: 'NOTIFY_ME',
+    HIDDEN_CLASS_NAME: 'd-none',
+    el: {
+        notifyMePopup: '#modal-notify-me',
+        notifyMeBtn: '.btn--notify-open',
+
+        form: '#modal-notify-me .notify-me-form',
+        emailInput: '#modal-notify-me #notify-me-email',
+        stateForm: '#modal-notify-me [data-notify-state="form"]',
+        stateSuccess: '#modal-notify-me [data-notify-state="success"]',
+        headerForm: '#modal-notify-me [data-notify-header="form"]',
+        headerSuccess: '#modal-notify-me [data-notify-header="success"]',
+        productId: '#product-code-val',
+    },
+    defaultErrorMessage: 'Something went wrong',
+    invalidEmailMessage: 'Please enter a valid email address',
+    showCustomModal() {
+        $(Wick.NotifyMeSubscription.el.notifyMePopup).modal('show');
+    },
+    getEmail() {
+        return ($(Wick.NotifyMeSubscription.el.emailInput).val() || '').toString().trim();
+    },
+    isEmailValid() {
+        const email = Wick.NotifyMeSubscription.getEmail();
+
+        return isValidEmail(email);
+    },
+    showFormState() {
+        $(Wick.NotifyMeSubscription.el.stateSuccess).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.stateForm).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+
+        $(Wick.NotifyMeSubscription.el.headerSuccess).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.headerForm).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+    },
+    showSuccessState() {
+        $(Wick.NotifyMeSubscription.el.stateForm).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.stateSuccess).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+
+        $(Wick.NotifyMeSubscription.el.headerForm).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.headerSuccess).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+    },
+    resetValidation() {
+        clearValidationErrors(Wick.NotifyMeSubscription.el.form);
+    },
+    validateForm() {
+        Wick.NotifyMeSubscription.resetValidation();
+
+        if (!Wick.NotifyMeSubscription.isEmailValid()) {
+            showValidationErrors(
+                Wick.NotifyMeSubscription.el.form,
+                Wick.NotifyMeSubscription.invalidEmailMessage
+            );
+            return false;
+        }
+
+        return true;
+    },
+    showError(err = {}) {
+        const msg = err.errMsg || err.errorMessage || Wick.NotifyMeSubscription.defaultErrorMessage;
+
+        showValidationErrors(Wick.NotifyMeSubscription.el.form, msg);
+    },
+    init() {
+        $(document).on('click', Wick.NotifyMeSubscription.el.notifyMeBtn, function (e) {
+            e.preventDefault();
+            Wick.NotifyMeSubscription.showCustomModal();
+        });
+
+        $(Wick.NotifyMeSubscription.el.notifyMePopup).on('hidden.bs.modal', function () {
+            Wick.NotifyMeSubscription.showFormState();
+            clearValidationErrors(Wick.NotifyMeSubscription.el.form);
+        });
+    },
+};
+
+$(document).ready(function () {
+    Wick.NotifyMeSubscription.init();
+});

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

@@ -5,6 +5,7 @@ const osEl = {
     checkoutWidgetDetailsDiscount: '.checkout-widget__details-discount',
     checkoutWidgetDetails: '.checkout-widget__details',
     delivery: '.checkout-widget__item-delivery',
+    deliveryCostMessage: '.checkout-widget__item-delivery-cost-message',
     cc: '.checkout-widget__item-cc',
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
@@ -26,6 +27,22 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
             }
         }
 
+        if (obj.item === osEl.delivery) {
+            $(osEl.delivery).each(function () {
+                if (
+                    !$(this).siblings(osEl.deliveryCostMessage).length &&
+                    !$(this).closest('[data-hide-delivery-cost-message]').length
+                ) {
+                    $(this).after(`
+                      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+                        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+                          Final delivery cost confirmed at checkout
+                        </span>
+                      </li>`);
+                }
+            });
+        }
+
         $(obj.item).find(obj.itemValue).text(obj.dataValue);
         if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
             $(obj.item).find(obj.itemValue).show();
@@ -64,20 +81,37 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
 }
 
 function createCheckoutWidgetItem(obj) {
+    const isDelivery = obj.item === osEl.delivery;
+    const hideMessage = $(osEl.checkoutWidgetDetails).closest(
+        '[data-hide-delivery-cost-message]'
+    ).length;
+    const costMessageExists = $(osEl.deliveryCostMessage).length > 0;
     return `
       <li class="checkout-widget__item ${obj.item.substr(1)}">
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
+      ${
+          isDelivery && !hideMessage && !costMessageExists
+              ? `
+      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+          Final delivery cost confirmed at checkout
+        </span>
+      </li>`
+              : ''
+      }
     `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show();
+    $(osEl.deliveryCostMessage).show();
     $(osEl.cc).show();
     if (isVoucher) {
         if ('deliveryOrder' in data && data.deliveryOrder === false) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         }
 
         if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
@@ -86,6 +120,7 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
     } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
             $(osEl.cc).hide();
         }

package/build/js/page/plp-load-more.js

@@ -1,77 +1,92 @@
-import {createEvent} from "./utils/create-event";
-import {appendLoader, showLoader, hideLoader} from "./utils/loader";
+import { createEvent } from './utils/create-event';
+import { appendLoader, showLoader, hideLoader } from './utils/loader';
 
 var Wick = window.Wick || {};
 
 Wick.PLPLoadMore = {
-  PLP_LOAD_MORE_EVENT: 'loadMore',
-  HIDDEN_CLASS_NAME: 'd-none',
-  initialPageNumber: 0,
-  el: {
-    $loadMoreBtn: $('.btn-load-more'),
-    loader: '.loader-wrapper',
-    $sortOptions: $('#sort_form1'),
-    productsList: '.products-list'
-  },
-  numberOfPagesPLP: $('#numberOfPagesPLP').val(),
-  loaderPayload: {
-    wrapper: 'body',
-    hidden: true,
-    modifier: 'basket-loader',
-  },
-  loadMore () {
-    showLoader(Wick.PLPLoadMore.el.loader);
+    PLP_LOAD_MORE_EVENT: 'loadMore',
+    HIDDEN_CLASS_NAME: 'd-none',
+    MAX_PRODUCTS_PER_PAGE: 32,
+    initialPageNumber: 0,
+    el: {
+        $loadMoreBtn: $('.btn-load-more'),
+        loader: '.loader-wrapper',
+        $sortOptions: $('#sort_form1'),
+        productsList: $('.package-plp__cards').length ? '.package-plp__cards' : '.products-list',
+        $packageContent: $('.package-plp__content'),
+    },
+    numberOfPagesPLP: $('#numberOfPagesPLP').val(),
+    loaderPayload: {
+        wrapper: 'body',
+        hidden: true,
+        modifier: 'basket-loader',
+    },
+    loadMore() {
+        showLoader(Wick.PLPLoadMore.el.loader);
 
-    return new Promise((resolve, reject) => {
-      const eventDetail = {resolve, reject};
-      const payload = {
-        currentPage: ++Wick.PLPLoadMore.initialPageNumber,
-        sort: Wick.PLPLoadMore.el.$sortOptions.val() || '',
-      };
-      const event = createEvent(Wick.PLPLoadMore.PLP_LOAD_MORE_EVENT, payload, eventDetail);
-      window.dispatchEvent(event);
-    })
-      .then((response) => {
-        if (!response.length) {
-          return;
+        return new Promise((resolve, reject) => {
+            const eventDetail = { resolve, reject };
+            const payload = {
+                currentPage: ++Wick.PLPLoadMore.initialPageNumber,
+                sort: Wick.PLPLoadMore.el.$sortOptions.val() || '',
+                isRippleData: Wick.PLPLoadMore.el.$packageContent.length,
+            };
+            const event = createEvent(Wick.PLPLoadMore.PLP_LOAD_MORE_EVENT, payload, eventDetail);
+            window.dispatchEvent(event);
+        })
+            .then((response) => {
+                if (!response.length) {
+                    return;
+                }
+
+                Wick.PLPLoadMore.showNewCards(response);
+                Wick.PLPLoadMore.toggleLoadMoreBtn();
+                Wick.VatToggle.reapplyDisplayClass();
+            })
+            .finally(() => {
+                hideLoader(Wick.PLPLoadMore.el.loader);
+                Wick.PLPLoadMore.el.$loadMoreBtn.blur();
+                Wick.BannerPlacementManager.checkProductsInColumn();
+                $(window).trigger('productBannerPositionChanged');
+                Wick.EnergyEfficiency.drawEnergyLabels();
+                Wick.PLP?.bindEvents();
+            });
+    },
+    showNewCards(newProductsHtml) {
+        const $newProductsHtml = $(newProductsHtml);
+        $(Wick.PLPLoadMore.el.productsList).append($newProductsHtml);
+        Wick.PackageCards.alignGridRows();
+    },
+    toggleLoadMoreBtn(checkCardsAmount = false) {
+        const isLastPage =
+            Wick.PLPLoadMore.initialPageNumber + 1 >= +Wick.PLPLoadMore.numberOfPagesPLP;
+        let shouldHide = isLastPage;
+
+        if (checkCardsAmount) {
+            const cardsCount = $(Wick.PLPLoadMore.el.productsList).children().length;
+            shouldHide = cardsCount <= Wick.PLPLoadMore.MAX_PRODUCTS_PER_PAGE && isLastPage;
         }
 
-        Wick.PLPLoadMore.showNewCards(response);
-        Wick.PLPLoadMore.toggleLoadMoreBtn();
-        Wick.VatToggle.reapplyDisplayClass();
-      })
-      .finally(() => {
-        hideLoader(Wick.PLPLoadMore.el.loader);
-        Wick.PLPLoadMore.el.$loadMoreBtn.blur();
-        Wick.BannerPlacementManager.checkProductsInColumn();
-        $(window).trigger('productBannerPositionChanged');
-        Wick.EnergyEfficiency.drawEnergyLabels();
-        Wick.PLP?.bindEvents();
-      })
-  },
-  showNewCards (newProductsHtml) {
-    const $newProductsHtml = $(newProductsHtml);
-    $(Wick.PLPLoadMore.el.productsList).append($newProductsHtml);
-  },
-  toggleLoadMoreBtn() {
-    if (Wick.PLPLoadMore.initialPageNumber + 1 >= +Wick.PLPLoadMore.numberOfPagesPLP) {
-      Wick.PLPLoadMore.el.$loadMoreBtn.addClass(Wick.PLPLoadMore.HIDDEN_CLASS_NAME);
-    }
-  },
-  init () {
-    if (!Wick.PLPLoadMore.el.$loadMoreBtn.length) {
-      return;
-    }
-    appendLoader(Wick.PLPLoadMore.loaderPayload);
+        Wick.PLPLoadMore.el.$loadMoreBtn.toggleClass(
+            Wick.PLPLoadMore.HIDDEN_CLASS_NAME,
+            shouldHide
+        );
+    },
+    init() {
+        if (!Wick.PLPLoadMore.el.$loadMoreBtn.length) {
+            return;
+        }
 
-    Wick.PLPLoadMore.el.$loadMoreBtn.on('click', Wick.PLPLoadMore.loadMore);
-  }
-}
+        if (Wick.PLPLoadMore.el.$packageContent.length) {
+            Wick.PLPLoadMore.toggleLoadMoreBtn(true);
+        }
 
-$(document).ready(function () {
-  if (!Wick.PLPLoadMore.el.$loadMoreBtn.length) {
-    return;
-  }
+        appendLoader(Wick.PLPLoadMore.loaderPayload);
+
+        Wick.PLPLoadMore.el.$loadMoreBtn.on('click', Wick.PLPLoadMore.loadMore);
+    },
+};
 
-  Wick.PLPLoadMore.init();
+$(document).ready(function () {
+    Wick.PLPLoadMore.init();
 });

package/build/js/page/ripple/bulk-add.js

@@ -0,0 +1,63 @@
+import { createToast } from '../utils/create-toast';
+import { createLoadingButton } from '../utils/create-loading-button';
+import { createEvent } from '../utils/create-event';
+const notificationTemplate = require('../../../elements/notifications.hbs');
+
+const BULK_ADD_EVENT = 'bulkAddToCart';
+const QUANTITY = 1;
+
+const bulkAddFailedResponse = {
+    bulkAddToCartData: {
+        messageType: 'error',
+        messageText: 'Product was not added to basket',
+    },
+};
+
+export function dispatchWindowEvent(eventName, payload) {
+    return new Promise(function (resolve, reject) {
+        window.dispatchEvent(createEvent(eventName, payload, { resolve, reject }));
+    });
+}
+
+export function createBulkAddHelper({ productCodeSelector }) {
+    let toast = null;
+    let loadingButton = null;
+
+    function getProductCode() {
+        return $(productCodeSelector).val();
+    }
+
+    function addProductToCart() {
+        const payload = [{ productCode: getProductCode(), quantity: QUANTITY }];
+
+        return dispatchWindowEvent(BULK_ADD_EVENT, payload);
+    }
+
+    function showBulkAddResult(response) {
+        const bulkData = response && response.bulkAddToCartData;
+
+        if (bulkData) {
+            toast.show({ type: bulkData.messageType, text: bulkData.messageText });
+        }
+    }
+
+    function init() {
+        if (!toast) {
+            toast = createToast({ template: notificationTemplate });
+        }
+        if (!loadingButton) {
+            loadingButton = createLoadingButton();
+        }
+    }
+
+    return {
+        init,
+        getProductCode,
+        addProductToCart,
+        showBulkAddResult,
+        showBulkAddFailed: () => showBulkAddResult(bulkAddFailedResponse),
+        get loadingButton() {
+            return loadingButton;
+        },
+    };
+}

package/build/js/page/ripple/package-bulk-add.js

@@ -0,0 +1,43 @@
+import { createBulkAddHelper } from './bulk-add';
+
+var Wick = window.Wick || {};
+
+Wick.PackageBulkAdd = (function () {
+    const selectors = {
+        button: '.package-bulk-add',
+        productCodeInput: '.pdp-price input[name=productCodePost]',
+    };
+
+    const bulkAdd = createBulkAddHelper({ productCodeSelector: selectors.productCodeInput });
+
+    async function handleButtonClick(e) {
+        e.preventDefault();
+
+        const $buttons = $(selectors.button);
+
+        if (bulkAdd.loadingButton.isLoading($buttons)) {
+            return;
+        }
+
+        bulkAdd.loadingButton.start($buttons);
+
+        try {
+            bulkAdd.showBulkAddResult(await bulkAdd.addProductToCart());
+            Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        } catch {
+            bulkAdd.showBulkAddFailed();
+        } finally {
+            bulkAdd.loadingButton.stop($buttons);
+        }
+    }
+
+    function init() {
+        bulkAdd.init();
+
+        $(selectors.button).on('click', handleButtonClick);
+    }
+
+    return { init };
+})();
+
+$(document).ready(Wick.PackageBulkAdd.init);

package/build/js/page/ripple/postcode-checker.js

@@ -0,0 +1,83 @@
+import { isValidPostcodeField } from '../utils/validation';
+import { createBulkAddHelper, dispatchWindowEvent } from './bulk-add';
+
+var Wick = window.Wick || {};
+
+Wick.PostcodeChecker = (function () {
+    const POSTCODE_CHECK_AVAILABILITY_EVENT = 'postcodeCheckAviability';
+    const QUANTITY = 1;
+
+    const selectors = {
+        root: '.postcode-checker',
+        input: '.postcode-checker__input',
+        button: '.postcode-checker__button',
+        productCodeInput: '.pdp-price input[name=productCodePost]',
+    };
+
+    const modifiers = {
+        hasError: 'postcode-checker--error',
+    };
+
+    const bulkAdd = createBulkAddHelper({ productCodeSelector: selectors.productCodeInput });
+
+    function checkPostcodeAvailability(postcode) {
+        const payload = { postcode, productCode: bulkAdd.getProductCode(), quantity: QUANTITY };
+
+        return dispatchWindowEvent(POSTCODE_CHECK_AVAILABILITY_EVENT, payload);
+    }
+
+    async function bulkAddForPostcode(postcode) {
+        try {
+            await checkPostcodeAvailability(postcode);
+            bulkAdd.showBulkAddResult(await bulkAdd.addProductToCart());
+            Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        } catch {
+            bulkAdd.showBulkAddFailed();
+        }
+    }
+
+    function isPostcodeValid($component, $postcodeInput) {
+        const isValid = isValidPostcodeField($postcodeInput.val());
+        $component.toggleClass(modifiers.hasError, !isValid);
+
+        return isValid;
+    }
+
+    function handleSubmitClick($component, $postcodeInput, $submitButton) {
+        if (
+            bulkAdd.loadingButton.isLoading($submitButton) ||
+            !isPostcodeValid($component, $postcodeInput)
+        ) {
+            return;
+        }
+
+        bulkAdd.loadingButton.start($submitButton);
+
+        const postcode = $postcodeInput.val();
+
+        bulkAddForPostcode(postcode).finally(function () {
+            bulkAdd.loadingButton.stop($submitButton);
+        });
+    }
+
+    function init() {
+        bulkAdd.init();
+
+        $(selectors.root).each(function () {
+            const $component = $(this);
+            const $postcodeInput = $component.find(selectors.input);
+            const $submitButton = $component.find(selectors.button);
+
+            $component.removeClass(modifiers.hasError);
+
+            $submitButton.on('click', function (e) {
+                e.preventDefault();
+                handleSubmitClick($component, $postcodeInput, $submitButton);
+            });
+        });
+    }
+
+    return { init };
+})();
+
+$(document).ready(Wick.PostcodeChecker.init);