wickes-css2 2.113.0 → 2.117.0-develop.1

package/src/js/page/bloomreach-widget/bloomreach-recommendation-carousel-widget.js

@@ -34,6 +34,7 @@ export function createBloomreachRecommendationCarouselWidget(config) {
     };
     const el = {
         ...DEFAULT_EL,
+        ...(config.el || {}),
         widgetContainer: config.widgetContainer,
     };
     const addToCartEvent = config.addToCartEvent || 'addToCart';
@@ -58,9 +59,6 @@ export function createBloomreachRecommendationCarouselWidget(config) {
             .map(function (item) {
                 return item.baseProduct || item;
             })
-            .filter(function (product) {
-                return config.isEligibleProduct ? config.isEligibleProduct(product) : true;
-            })
             .slice(0, 5);
     }
 
@@ -85,6 +83,8 @@ export function createBloomreachRecommendationCarouselWidget(config) {
                     ...Wick.BloomreachWidget.getProductRenderData(product),
                     addToCartError: config.addToCartError,
                     showBadge: !config.hideBadge,
+                    sameTab: Boolean(config.sameTab),
+                    linkImage: Boolean(config.linkImage),
                 };
             }),
             isSingleProduct: products.length === 1,
@@ -130,7 +130,7 @@ export function createBloomreachRecommendationCarouselWidget(config) {
                 navigation: {
                     nextEl: $widget.find(el.next)[0],
                     prevEl: $widget.find(el.prev)[0],
-                    disabledClass: 'why-not-add__arrow--disabled',
+                    disabledClass: config.arrowDisabledClass || 'why-not-add__arrow--disabled',
                 },
                 pagination: {
                     el: $widget.find(el.pagination)[0],
@@ -140,8 +140,9 @@ export function createBloomreachRecommendationCarouselWidget(config) {
                             index + 1
                         }"></button>`;
                     },
-                    bulletClass: 'why-not-add__pagination-item',
-                    bulletActiveClass: 'why-not-add__pagination-item--active',
+                    bulletClass: config.paginationItemClass || 'why-not-add__pagination-item',
+                    bulletActiveClass:
+                        config.paginationActiveItemClass || 'why-not-add__pagination-item--active',
                 },
             });
 

package/src/js/page/bloomreach-widget/bloomreach-widget-core.js

@@ -56,6 +56,8 @@ export function createBloomreachWidget(config) {
                     config.renderWidget($container, payloadData, widget);
                 }
 
+                Wick.BloomreachWidget.removeBlankTargets($container);
+
                 if (config.initRenderedWidget) {
                     config.initRenderedWidget($container, widget);
                 }
@@ -224,22 +226,9 @@ Wick.BloomreachWidget = {
     },
 
     getWasPriceFormatted(product) {
-        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
-        const wasPrice = Wick.BloomreachWidget.getWasPrice(product);
-
-        if (wasPrice && wasPrice.formattedValue) {
-            return wasPrice.formattedValue;
-        }
-
-        if (typeof wasPrice === 'number') {
-            return Wick.BloomreachWidget.formatPrice(wasPrice);
-        }
-
-        if (wasPrice) {
-            return `${displayPrice.currencySymbol || '£'}${wasPrice}`;
-        }
-
-        return '';
+        return Wick.BloomreachWidget.formatPromotionalPrice(
+            Wick.BloomreachWidget.getWasPrice(product)
+        );
     },
 
     getExcVatWasPrice(product) {
@@ -249,15 +238,7 @@ Wick.BloomreachWidget = {
             (displayPriceExclusiveVat && displayPriceExclusiveVat.wasPrice) ||
             (priceExclusiveVat && priceExclusiveVat.wasPrice);
 
-        if (wasPrice && wasPrice.formattedValue) {
-            return wasPrice.formattedValue;
-        }
-
-        if (typeof wasPrice === 'number') {
-            return Wick.BloomreachWidget.formatPrice(wasPrice);
-        }
-
-        return wasPrice || '';
+        return Wick.BloomreachWidget.formatPromotionalPrice(wasPrice);
     },
 
     getProductImage(product, fallbackProduct) {
@@ -282,9 +263,15 @@ Wick.BloomreachWidget = {
         const displayPriceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
         const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
         const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
-        const excVatFormattedValue = options.fallbackExcVat
+        const incVatFormattedValue = wasPriceFormatted
+            ? Wick.BloomreachWidget.formatPromotionalPrice(displayPrice)
+            : Wick.BloomreachWidget.getPriceFormattedValue(displayPrice);
+        const excVatValue = options.fallbackExcVat
             ? Wick.BloomreachWidget.getExcVatFormattedValue(product, displayPrice)
             : Wick.BloomreachWidget.getPriceFormattedValue(displayPriceExcVat);
+        const excVatFormattedValue = wasPriceFormatted
+            ? Wick.BloomreachWidget.formatPromotionalPrice(displayPriceExcVat || excVatValue)
+            : excVatValue;
 
         return {
             ...product,
@@ -295,7 +282,7 @@ Wick.BloomreachWidget = {
                 Wick.BloomreachWidget.getProductImage(product, options.fallbackProduct),
             wasPriceFormatted,
             'switch-vat': isSwitchVat,
-            incVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice),
+            incVatFormattedValue,
             incVatValue: Wick.BloomreachWidget.getPriceValue(displayPrice),
             excVatFormattedValue,
             excVatValue: Wick.BloomreachWidget.getPriceValue(displayPriceExcVat),
@@ -359,6 +346,39 @@ Wick.BloomreachWidget = {
         $(window).off(eventName).on(eventName, Wick.BloomreachWidget.reapplyVatDisplay);
     },
 
+    formatPromotionalPrice(price) {
+        if (price === null || price === undefined) {
+            return '';
+        }
+
+        const rawValue =
+            typeof price === 'object'
+                ? typeof price.value === 'number'
+                    ? price.value
+                    : price.formattedValue
+                : price;
+
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            return '';
+        }
+
+        const value =
+            typeof rawValue === 'number'
+                ? rawValue
+                : Number(`${rawValue}`.replace(/[,£\s]/g, ''));
+
+        if (!Number.isFinite(value)) {
+            return typeof rawValue === 'string' ? rawValue : '';
+        }
+
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency: 'GBP',
+            minimumFractionDigits: Math.round(Math.abs(value) * 100) % 100 === 0 ? 0 : 2,
+            maximumFractionDigits: 2,
+        }).format(value);
+    },
+
     formatPrice(value) {
         return new Intl.NumberFormat('en-GB', {
             style: 'currency',

package/src/js/page/bloomreach-widget/bloomreach-widget.js

@@ -4,6 +4,7 @@ import './bloomreach-widget-core';
 import Widget from './complete-your-project/widget';
 import WhyNotAddWidget from './why-not-add-widget';
 import DontForgetWidget from './dont-forget-widget';
+import SimilarProductsWidget from './similar-products-widget';
 
 Wick.BloomreachWidget.registerWidgets([
     {
@@ -18,4 +19,8 @@ Wick.BloomreachWidget.registerWidgets([
         type: 'dontForget',
         widget: DontForgetWidget,
     },
+    {
+        type: 'similarProducts',
+        widget: SimilarProductsWidget,
+    },
 ]);

package/src/js/page/bloomreach-widget/complete-your-project/view.js

@@ -70,16 +70,21 @@ export function createCompleteYourProjectView(model, presenter) {
         if (response.totalWasPrice) {
             $total.addClass('complete-widget__total-sale');
 
+            const formatPrice = Wick.BloomreachWidget.formatPromotionalPrice;
+            const wasPrice = formatPrice(response.totalWasPrice);
+            const salePrice = formatPrice(response.totalPrice);
+            const excVatWasPrice = formatPrice(totalWasPriceExclusiveVat || response.totalWasPrice);
+            const excVatSalePrice = formatPrice(totalPriceExclusiveVat || response.totalPrice);
             const $priceInc = $price.find(vatInc);
 
             if ($priceInc.length) {
-                $priceInc.text(response.totalWasPrice);
-                $price.find(vatExc).text(totalWasPriceExclusiveVat || response.totalWasPrice);
-                $salePrice.find(vatInc).text(response.totalPrice || '');
-                $salePrice.find(vatExc).text(totalPriceExclusiveVat || response.totalPrice || '');
+                $priceInc.text(wasPrice);
+                $price.find(vatExc).text(excVatWasPrice);
+                $salePrice.find(vatInc).text(salePrice);
+                $salePrice.find(vatExc).text(excVatSalePrice);
             } else {
-                $price.text(response.totalWasPrice);
-                $salePrice.text(response.totalPrice || '');
+                $price.text(wasPrice);
+                $salePrice.text(salePrice);
             }
 
             $salePrice.show();

package/src/js/page/bloomreach-widget/complete-your-project/widget.js

@@ -124,7 +124,6 @@ function initRenderedWidget($container) {
         return;
     }
 
-    Wick.BloomreachWidget.removeBlankTargets($completeWidget);
     Wick.BloomreachWidget.drawRating($completeWidget);
     cards.bindCardSelection($completeWidget);
     cards.bindDropdowns();

package/src/js/page/bloomreach-widget/similar-products-widget.js

@@ -0,0 +1,17 @@
+import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recommendation-carousel-widget';
+
+const SimilarProductsWidget = createBloomreachRecommendationCarouselWidget({
+    namespace: 'similarProducts',
+    title: 'Similar products',
+    widgetContainer: '[data-similar-products-widget]',
+    disableAfterSuccess: false,
+    disableAfterFailure: false,
+    hideBadge: true,
+    sameTab: true,
+    linkImage: true,
+    el: {
+        productLink: '.why-not-add-card__title, .why-not-add-card__image-link',
+    },
+});
+
+export default SimilarProductsWidget;

package/src/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/src/js/page/ripple/bulk-add.js

@@ -0,0 +1,71 @@
+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(postcode) {
+        const item = { productCode: getProductCode(), quantity: QUANTITY };
+        
+        const payload = {
+            entries: [item]
+        };
+
+        if (postcode) {
+            payload.postCode = postcode;
+        }
+
+        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/src/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/src/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(postcode));
+            Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        } catch {
+            bulkAdd.showBulkAddFailed();
+        }
+    }
+
+    function isPostcodeValid($component, $postcodeInput) {
+        const isValid = isValidPostcodeField($postcodeInput.val());
+        $component.toggleClass(modifiers.hasError, !isValid);
+        console.log({ isValid, val: $postcodeInput.val() });
+        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);