wickes-css2 2.111.0-develop.5 → 2.111.0-dont-forget-widget.2

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

@@ -0,0 +1,223 @@
+import { createLoadingButton } from '../utils/create-loading-button';
+
+export function createBloomreachRecommendationCarouselWidget(config) {
+    const state = {
+        products: [],
+        sliders: [],
+        loadingButton: null,
+    };
+
+    return {
+        ADD_TO_CART_EVENT: config.addToCartEvent || 'addToCart',
+
+        el: {
+            cta: '.why-not-add-card__cta',
+            next: '[data-why-not-add-next]',
+            pagination: '[data-why-not-add-pagination]',
+            prev: '[data-why-not-add-prev]',
+            root: '[data-why-not-add]',
+            slider: '[data-why-not-add-slider]',
+            widgetContainer: config.widgetContainer,
+        },
+
+        skeletonTemplate: config.skeletonTemplate,
+
+        getContainers() {
+            return $(this.el.widgetContainer);
+        },
+
+        hide() {
+            this.getContainers().empty().hide();
+        },
+
+        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);
+        },
+
+        renderWidget($container, payloadData) {
+            const products = this.normalizeProducts(payloadData);
+
+            if (!products.length) {
+                $container.empty().hide();
+                return;
+            }
+
+            state.products = products;
+
+            $container
+                .html(
+                    config.template({
+                        title: config.title,
+                        modifier: config.modifier,
+                        products: products.map(function (product) {
+                            return {
+                                ...Wick.BloomreachWidget.getProductRenderData(product),
+                                addToCartError: config.addToCartError,
+                            };
+                        }),
+                        isSingleProduct: products.length === 1,
+                    })
+                )
+                .show();
+        },
+
+        destroySliders() {
+            state.sliders.forEach(function (slider) {
+                if (slider && slider.destroy) {
+                    slider.destroy(true, true);
+                }
+            });
+
+            state.sliders = [];
+        },
+
+        initSliders($root) {
+            this.destroySliders();
+
+            $root.find(this.el.slider).each((index, sliderEl) => {
+                const $slider = $(sliderEl);
+                const $widget = $slider.closest(this.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(this.el.next)[0],
+                        prevEl: $widget.find(this.el.prev)[0],
+                        disabledClass: 'why-not-add__arrow--disabled',
+                    },
+                    pagination: {
+                        el: $widget.find(this.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);
+            });
+        },
+
+        setCardAdded($card) {
+            const $button = $card.find(this.el.cta);
+
+            $card.addClass('why-not-add-card--added');
+            $button.prop('disabled', true);
+            $button.find('i').attr('class', config.successIcon || 'fas fa-check');
+        },
+
+        setCardFailed($card) {
+            const $button = $card.find(this.el.cta);
+
+            $card.addClass('why-not-add-card--failed');
+            $button.prop('disabled', true);
+            $button.find('i').attr('class', config.failureIcon || 'fas fa-shopping-basket');
+            $card.find('.why-not-add-card__error').removeClass('d-none');
+        },
+
+        bindAddToCart($root) {
+            $root.off(`click.${config.namespace}`, this.el.cta);
+            $root.on(`click.${config.namespace}`, this.el.cta, event => {
+                event.preventDefault();
+
+                const $button = $(event.currentTarget);
+                const $card = $button.closest('.why-not-add-card');
+                const productCode = $card.attr('data-product-code');
+
+                if (
+                    !productCode ||
+                    $button.prop('disabled') ||
+                    state.loadingButton.isLoading($button)
+                ) {
+                    return;
+                }
+
+                state.loadingButton.start($button);
+
+                Wick.BloomreachWidget.dispatchWidgetEvent(this.ADD_TO_CART_EVENT, {
+                    productCode,
+                })
+                    .then(() => {
+                        state.loadingButton.stop($button);
+
+                        if (config.disableAfterSuccess) {
+                            this.setCardAdded($card);
+                        }
+
+                        if (Wick.MiniBasketSliderFE) {
+                            Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+                        }
+                    })
+                    .catch(() => {
+                        state.loadingButton.stop($button);
+
+                        if (config.disableAfterFailure) {
+                            this.setCardFailed($card);
+                        }
+                    });
+            });
+        },
+
+        bindVatToggle() {
+            if (Wick.BloomreachWidget.bindVatToggle) {
+                Wick.BloomreachWidget.bindVatToggle(`${config.namespace}VatToggle`);
+            }
+        },
+
+        initRenderedWidget($container) {
+            const $root = $container.find(this.el.root);
+
+            if (!$root.length) {
+                return;
+            }
+
+            if (!state.loadingButton) {
+                state.loadingButton = createLoadingButton({
+                    text: Wick.BloomreachWidget.el.loadingButtonText,
+                    loader: Wick.BloomreachWidget.el.loadingButtonLoader,
+                });
+            }
+
+            Wick.BloomreachWidget.drawRating($root);
+            this.initSliders($root);
+            this.bindAddToCart($root);
+            this.bindVatToggle();
+            Wick.BloomreachWidget.reapplyVatDisplay();
+        },
+
+        init(payloadData) {
+            const $containers = this.getContainers();
+
+            if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
+                this.hide();
+                return;
+            }
+
+            $containers.each((index, container) => {
+                const $container = $(container);
+
+                this.renderWidget($container, payloadData);
+                this.initRenderedWidget($container);
+            });
+        },
+    };
+}

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

@@ -0,0 +1,319 @@
+var Wick = window.Wick || {};
+
+import { createEvent } from '../utils/create-event';
+import CompleteYourProjectWidget from './complete-your-project-widget';
+import WhyNotAddWidget from './why-not-add-widget';
+import DontForgetWidget from './dont-forget-widget';
+
+Wick.BloomreachWidget = {
+    widgets: {},
+
+    el: {
+        loadingButtonText: '.loading-button__text',
+        loadingButtonLoader: '.loading-button__loader',
+        ratingOverlay: '.rating-overlay',
+        starOverlay: '.star-overlay',
+        vatInc: '.including-vat-inherit',
+        vatExc: '.excluding-vat-inherit',
+    },
+
+    badgeColorMap: {
+        blue: '#019ee3',
+        gray: '#3e3e3e',
+        green: '#9acd32',
+        red: '#cf000f',
+        yellow: '#f7ca18',
+    },
+
+    getBadgeColor(color) {
+        if (!color) {
+            return '';
+        }
+
+        return Wick.BloomreachWidget.badgeColorMap[color] || color;
+    },
+
+    getBadge(product) {
+        if (!product) {
+            return null;
+        }
+
+        const promotion = product.potentialPromotions && product.potentialPromotions[0];
+        const promotionAttributes = promotion && promotion.customAttributes;
+
+        if (promotionAttributes && promotionAttributes.overlayText) {
+            return {
+                text: promotionAttributes.overlayText,
+                textColor: Wick.BloomreachWidget.getBadgeColor(
+                    promotionAttributes.overlayTextColor
+                ),
+                color: Wick.BloomreachWidget.getBadgeColor(
+                    promotionAttributes.overlayBackgroundColor
+                ),
+            };
+        }
+
+        if (product.badge && product.badge.text) {
+            return {
+                ...product.badge,
+                textColor: Wick.BloomreachWidget.getBadgeColor(product.badge.textColor),
+                color: Wick.BloomreachWidget.getBadgeColor(product.badge.color),
+            };
+        }
+
+        return product.badge || null;
+    },
+
+    registerWidgets(widgetList) {
+        widgetList.forEach(function ({ type, widget }) {
+            Wick.BloomreachWidget.widgets[type] = widget;
+        });
+    },
+
+    getWidget(type) {
+        return Wick.BloomreachWidget.widgets[type];
+    },
+
+    getWidgetContainers(type) {
+        const widget = Wick.BloomreachWidget.getWidget(type);
+        const selector = widget && widget.el && widget.el.widgetContainer;
+
+        return selector ? $(selector) : $();
+    },
+
+    showSkeleton(type) {
+        const widget = Wick.BloomreachWidget.getWidget(type);
+        const $containers = Wick.BloomreachWidget.getWidgetContainers(type);
+
+        if (!widget || typeof widget.skeletonTemplate !== 'function' || !$containers.length) {
+            return;
+        }
+
+        $containers.each(function () {
+            $(this).html(widget.skeletonTemplate()).show();
+        });
+    },
+
+    init(type, payloadData) {
+        const widget = Wick.BloomreachWidget.getWidget(type);
+
+        if (!widget || typeof widget.init !== 'function') {
+            return;
+        }
+
+        widget.init(payloadData, Wick.BloomreachWidget);
+    },
+
+    normalizePayload(payloadData) {
+        if (Array.isArray(payloadData)) {
+            return payloadData;
+        }
+
+        if (payloadData && Array.isArray(payloadData.recommendedProducts)) {
+            return payloadData.recommendedProducts;
+        }
+
+        return [];
+    },
+
+    hasRecommendations(payloadData) {
+        return Wick.BloomreachWidget.normalizePayload(payloadData).length > 0;
+    },
+
+    getDisplayPrice(product) {
+        return product.displayPrice || product.price || {};
+    },
+
+    getDisplayPriceExcVat(product) {
+        return product.displayPriceExclusiveVat || product.priceExclusiveVat || null;
+    },
+
+    getPriceValue(price) {
+        return price && typeof price.value === 'number' ? price.value : 0;
+    },
+
+    getPriceFormattedValue(price) {
+        if (!price) {
+            return '';
+        }
+
+        if (price.formattedValue) {
+            return price.formattedValue;
+        }
+
+        if (typeof price.value === 'number') {
+            return Wick.BloomreachWidget.formatPrice(price.value);
+        }
+
+        return '';
+    },
+
+    getWasPrice(product) {
+        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
+
+        return displayPrice && displayPrice.wasPrice ? displayPrice.wasPrice : null;
+    },
+
+    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 '';
+    },
+
+    getExcVatWasPrice(product) {
+        const priceExclusiveVat = product.priceExclusiveVat || null;
+        const displayPriceExclusiveVat = product.displayPriceExclusiveVat || null;
+        const wasPrice =
+            (displayPriceExclusiveVat && displayPriceExclusiveVat.wasPrice) ||
+            (priceExclusiveVat && priceExclusiveVat.wasPrice);
+
+        if (wasPrice && wasPrice.formattedValue) {
+            return wasPrice.formattedValue;
+        }
+
+        if (typeof wasPrice === 'number') {
+            return Wick.BloomreachWidget.formatPrice(wasPrice);
+        }
+
+        return wasPrice || '';
+    },
+
+    getProductImage(product, fallbackProduct) {
+        const productImages = product.images || [];
+        const fallbackImages = fallbackProduct ? fallbackProduct.images || [] : [];
+        const images = productImages.length ? productImages : fallbackImages;
+
+        return (
+            images.find(function (item) {
+                return item.format === 'product';
+            }) ||
+            images.find(function (item) {
+                return item.imageType === 'PRIMARY';
+            }) ||
+            images[0] ||
+            {}
+        );
+    },
+
+    getProductRenderData(product, options = {}) {
+        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
+        const displayPriceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
+        const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
+        const excVatWasPriceFormatted = Wick.BloomreachWidget.getExcVatWasPrice(product);
+        const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
+
+        return {
+            ...product,
+            badge: Wick.BloomreachWidget.getBadge(product),
+            price: displayPrice,
+            image:
+                options.image ||
+                Wick.BloomreachWidget.getProductImage(product, options.fallbackProduct),
+            wasPriceFormatted,
+            'switch-vat': isSwitchVat,
+            incVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice),
+            incVatValue: Wick.BloomreachWidget.getPriceValue(displayPrice),
+            excVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPriceExcVat),
+            excVatValue: Wick.BloomreachWidget.getPriceValue(displayPriceExcVat),
+            incVatWasPriceFormatted: wasPriceFormatted,
+            excVatWasPriceFormatted: Wick.BloomreachWidget.getExcVatWasPrice(product),
+        };
+    },
+
+    drawRating($root) {
+        const { ratingOverlay, starOverlay } = Wick.BloomreachWidget.el;
+
+        $root.find(ratingOverlay).each(function () {
+            let rating = parseFloat($(this).attr('data-rating')) || 0;
+            const $stars = $(this).children(starOverlay);
+
+            $stars.each(function () {
+                const $star = $(this);
+
+                if (rating >= 1) {
+                    rating--;
+                } else if (rating > 0) {
+                    const width = Math.asin(2 * rating - 1) / Math.PI + 0.5;
+                    $star.css('width', width + 'rem');
+                    rating = 0;
+                } else {
+                    $star.css('width', '0rem');
+                }
+            });
+        });
+    },
+
+    dispatchWidgetEvent(eventName, payload) {
+        return new Promise(function (resolve, reject) {
+            const eventDetail = { resolve, reject };
+            const event = createEvent(eventName, payload, eventDetail);
+
+            window.dispatchEvent(event);
+        });
+    },
+
+    reapplyVatDisplay() {
+        if (!Wick.VatToggle || typeof Wick.VatToggle.isActive !== 'function') {
+            return;
+        }
+
+        const { vatInc, vatExc } = Wick.BloomreachWidget.el;
+        const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME || 'd-none';
+        const isExcVatActive = Wick.VatToggle.isActive();
+
+        $(vatInc).toggleClass(hiddenClassName, isExcVatActive);
+        $(vatExc).toggleClass(hiddenClassName, !isExcVatActive);
+    },
+
+    bindVatToggle(namespace) {
+        if (!Wick.VatToggle || !Wick.VatToggle.TOGGLE_VAT_EVENT_NAME) {
+            return;
+        }
+
+        const eventName = `${Wick.VatToggle.TOGGLE_VAT_EVENT_NAME}.${namespace}`;
+
+        $(window).off(eventName).on(eventName, Wick.BloomreachWidget.reapplyVatDisplay);
+    },
+
+    formatPrice(value) {
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency: 'GBP',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(value);
+    },
+};
+
+Wick.BloomreachWidget.registerWidgets([
+    {
+        type: 'completeYourProject',
+        widget: CompleteYourProjectWidget,
+    },
+    {
+        type: 'whyNotAdd',
+        widget: WhyNotAddWidget,
+    },
+    {
+        type: 'dontForget',
+        widget: DontForgetWidget,
+    },
+]);
+
+$(document).ready(function () {
+    Wick.BloomreachWidget.showSkeleton('completeYourProject');
+    Wick.BloomreachWidget.showSkeleton('whyNotAdd');
+});