wickes-css2 2.113.0-develop.3 → 2.113.0-develop.6

package/src/js/emulation/why-not-add-loading.js

@@ -2,9 +2,20 @@ var Wick = window.Wick || {};
 
 $(document).ready(function () {
     window.setTimeout(function () {
-        const $container = $('[data-why-not-add-widget]');
-        const mockDataKey = $container.data('mock-key');
-        const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
+        const $container = $('[data-why-not-add-widget]').first();
+
+        if (!$container.length) {
+            return;
+        }
+
+        const mockDataKey = $container.attr('data-mock-key');
+        const payloadData =
+            Wick.FEMock && Wick.FEMock.dataBloomreach && Wick.FEMock.dataBloomreach[mockDataKey];
+
+        if (!payloadData) {
+            $container.empty().hide();
+            return;
+        }
 
         Wick.BloomreachWidget.init('whyNotAdd', payloadData);
     }, 3000);

package/src/js/emulation/why-not-add.js

@@ -1,24 +1,22 @@
 var Wick = window.Wick || {};
 
-function simulateHybrisSendingHtml() {
-    const htmlFromHybris = Wick.FEMock.cartPDP;
-
-    window.dispatchEvent(
-        new CustomEvent('productAddedToCart', {
-            detail: {
-                html: htmlFromHybris,
-            },
-        })
-    );
-}
+import { getNextCartAddScenario, dispatchCartScenario } from './just-added-scenarios-emulation';
 
 function bindWhyNotAddToCartEvent() {
     $(window)
         .off('addToCart.whyNotAddEmulation')
-        .on('addToCart.whyNotAddEmulation', function ({ detail: { resolve } }) {
-            setTimeout(function () {
+        .on('addToCart.whyNotAddEmulation', function ({ detail }) {
+            const { payload, resolve } = detail;
+
+            if (payload && payload.doNotShowAddedProductPopup === true) {
+                return;
+            }
+
+            const scenario = getNextCartAddScenario();
+
+            window.setTimeout(function () {
                 resolve();
-                simulateHybrisSendingHtml();
+                dispatchCartScenario(Wick.FEMock.cartPDP, scenario);
             }, 3000);
         });
 }

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

@@ -0,0 +1,318 @@
+import { createLoadingButton } from '../utils/create-loading-button';
+import { createBloomreachWidget } from './bloomreach-widget-core';
+
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('loader', require('../../../elements/loader.hbs'));
+Handlebars.registerPartial('button', require('../../../components/base/button.hbs'));
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card',
+    require('../../../components/bloomreach/why-not-add-card.hbs')
+);
+Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
+
+const recommendationCarouselTemplate = require('../../../components/bloomreach/why-not-add-content.hbs');
+
+const DEFAULT_EL = {
+    addToCartError: '[data-add-to-cart-error]',
+    card: '.why-not-add-card',
+    cardWrapper: '.why-not-add-card-wrapper',
+    cta: '.why-not-add-card__cta',
+    next: '[data-why-not-add-next]',
+    pagination: '[data-why-not-add-pagination]',
+    productLink: '.why-not-add-card__title',
+    prev: '[data-why-not-add-prev]',
+    root: '[data-why-not-add]',
+    slider: '[data-why-not-add-slider]',
+    productCodeAttribute: 'data-product-code',
+};
+
+export function createBloomreachRecommendationCarouselWidget(config) {
+    const state = {
+        sliders: [],
+        loadingButton: null,
+    };
+    const el = {
+        ...DEFAULT_EL,
+        widgetContainer: config.widgetContainer,
+    };
+    const addToCartEvent = config.addToCartEvent || 'addToCart';
+    let widget = null;
+
+    function getRenderedRoots($container) {
+        let $roots = $container.find(el.root);
+
+        if (config.modifier) {
+            $roots = $roots.filter(`.${config.modifier}`);
+        }
+
+        return $roots;
+    }
+
+    function removeRenderedWidget($container) {
+        getRenderedRoots($container).remove();
+    }
+
+    function normalizeProducts(payloadData) {
+        return Wick.BloomreachWidget.normalizePayload(payloadData)
+            .map(function (item) {
+                return item.baseProduct || item;
+            })
+            .filter(function (product) {
+                return config.isEligibleProduct ? config.isEligibleProduct(product) : true;
+            })
+            .slice(0, 5);
+    }
+
+    function renderWidget($container, payloadData) {
+        const products = normalizeProducts(payloadData);
+
+        if (!products.length) {
+            if (config.appendToContainer) {
+                removeRenderedWidget($container);
+            } else {
+                $container.empty().hide();
+            }
+
+            return;
+        }
+
+        const html = recommendationCarouselTemplate({
+            title: config.title,
+            modifier: config.modifier,
+            products: products.map(function (product) {
+                return {
+                    ...Wick.BloomreachWidget.getProductRenderData(product),
+                    addToCartError: config.addToCartError,
+                    showBadge: !config.hideBadge,
+                };
+            }),
+            isSingleProduct: products.length === 1,
+        });
+
+        if (config.appendToContainer) {
+            removeRenderedWidget($container);
+            $container.append(html);
+            return;
+        }
+
+        $container.html(html).show();
+    }
+
+    function destroySliders() {
+        state.sliders.forEach(function (slider) {
+            if (slider && slider.destroy) {
+                slider.destroy(true, true);
+            }
+        });
+
+        state.sliders = [];
+    }
+
+    function initSliders($root) {
+        destroySliders();
+
+        $root.find(el.slider).each(function () {
+            const sliderEl = this;
+            const $slider = $(sliderEl);
+            const $widget = $slider.closest(el.root);
+            const slidesCount = $slider.find('.swiper-slide').length;
+
+            if (slidesCount <= 1) {
+                return;
+            }
+
+            const slider = new Swiper(sliderEl, {
+                roundLengths: true,
+                slidesPerView: 1,
+                spaceBetween: 12,
+                watchOverflow: true,
+                navigation: {
+                    nextEl: $widget.find(el.next)[0],
+                    prevEl: $widget.find(el.prev)[0],
+                    disabledClass: 'why-not-add__arrow--disabled',
+                },
+                pagination: {
+                    el: $widget.find(el.pagination)[0],
+                    clickable: true,
+                    renderBullet(index, className) {
+                        return `<button class="${className}" type="button" aria-label="Go to slide ${
+                            index + 1
+                        }"></button>`;
+                    },
+                    bulletClass: 'why-not-add__pagination-item',
+                    bulletActiveClass: 'why-not-add__pagination-item--active',
+                },
+            });
+
+            state.sliders.push(slider);
+        });
+    }
+
+    function setCardAdded($card) {
+        const $button = $card.find(el.cta);
+
+        $card.removeClass('why-not-add-card--failed').addClass('why-not-add-card--added');
+        $card.find('.why-not-add-card__error').addClass('d-none');
+
+        $button.prop('disabled', true).attr('aria-label', 'Added to basket');
+        $button.find('.loading-button__text').addClass('d-none');
+        $button.find('.button__icon--success').removeClass('d-none');
+    }
+
+    function setCardFailed($card, messageText) {
+        const $button = $card.find(el.cta);
+        const errorText = messageText || config.addToCartError;
+
+        $card.removeClass('why-not-add-card--added').addClass('why-not-add-card--failed');
+
+        $button
+            .prop('disabled', true)
+            .attr('aria-label', errorText || 'Product has not been added to basket');
+
+        if (errorText) {
+            $card.find(el.addToCartError).text(errorText);
+        }
+
+        $card.find('.why-not-add-card__error').removeClass('d-none');
+    }
+
+    function handleAddToCartResponse($card, response) {
+        const messageType = response && response.messageType;
+        const isSuccess = !messageType || messageType === 'success';
+
+        if (isSuccess) {
+            if (config.disableAfterSuccess) {
+                setCardAdded($card);
+            }
+
+            return;
+        }
+
+        if (config.disableAfterFailure) {
+            setCardFailed($card, response && response.messageText);
+        }
+    }
+
+    function getAddToCartPayload(productCode) {
+        const payload = { productCode };
+
+        if (config.doNotShowAddedProductPopup) {
+            payload.doNotShowAddedProductPopup = true;
+        }
+
+        return payload;
+    }
+
+    function bindProductTracking($root) {
+        $root.off(`click.${config.namespace}Tracking`, el.productLink);
+        $root.on(`click.${config.namespace}Tracking`, el.productLink, function (event) {
+            const productCode = $(event.currentTarget)
+                .closest(el.card)
+                .attr(el.productCodeAttribute);
+
+            widget.tracking.trackClick(productCode);
+        });
+    }
+
+    function bindAddToCart($root) {
+        $root.off(`click.${config.namespace}`, el.cta);
+        $root.on(`click.${config.namespace}`, el.cta, function (event) {
+            event.preventDefault();
+
+            const $button = $(event.currentTarget);
+            const $card = $button.closest(el.cardWrapper);
+            const productCode = $card.find(el.card).attr(el.productCodeAttribute);
+
+            if (
+                !productCode ||
+                $button.prop('disabled') ||
+                state.loadingButton.isLoading($button)
+            ) {
+                return;
+            }
+
+            widget.tracking.trackAddToCart([
+                {
+                    item_id: productCode,
+                    sku: productCode,
+                },
+            ]);
+
+            state.loadingButton.start($button);
+
+            Wick.BloomreachWidget.dispatchWidgetEvent(
+                addToCartEvent,
+                getAddToCartPayload(productCode)
+            )
+                .then(function (response) {
+                    state.loadingButton.stop($button);
+
+                    if (config.doNotShowAddedProductPopup) {
+                        handleAddToCartResponse($card, response);
+                        return;
+                    }
+
+                    if (Wick.MiniBasketSliderFE) {
+                        Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+                    }
+                })
+                .catch(function (error) {
+                    state.loadingButton.stop($button);
+
+                    if (config.disableAfterFailure) {
+                        setCardFailed($card, error && (error.messageText || error.message));
+                    }
+                });
+        });
+    }
+
+    function bindVatToggle() {
+        if (Wick.BloomreachWidget.bindVatToggle) {
+            Wick.BloomreachWidget.bindVatToggle(`${config.namespace}VatToggle`);
+        }
+    }
+
+    function initRenderedWidget($container) {
+        const $root = getRenderedRoots($container).last();
+
+        if (!$root.length) {
+            return;
+        }
+
+        if (!state.loadingButton) {
+            state.loadingButton = createLoadingButton({
+                text: Wick.BloomreachWidget.el.loadingButtonText,
+                loader: Wick.BloomreachWidget.el.loadingButtonLoader,
+            });
+        }
+
+        Wick.BloomreachWidget.drawRating($root);
+        initSliders($root);
+        bindProductTracking($root);
+        bindAddToCart($root);
+        bindVatToggle();
+        Wick.BloomreachWidget.reapplyVatDisplay();
+    }
+
+    widget = createBloomreachWidget({
+        el,
+        hide($containers) {
+            if (config.appendToContainer) {
+                $containers.each(function () {
+                    removeRenderedWidget($(this));
+                });
+                return;
+            }
+
+            $containers.empty().hide();
+        },
+        renderWidget,
+        initRenderedWidget,
+        getViewTargets($containers) {
+            return [$containers.find(el.productLink).get(0), $containers.find(el.cta).get(0)];
+        },
+    });
+
+    return widget;
+}