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

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

@@ -0,0 +1,370 @@
+import { isApp } from '../utils/helpers';
+import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
+
+var Wick = window.Wick || {};
+
+import { createEvent } from '../utils/create-event';
+
+export function createBloomreachWidget(config) {
+    const tracking = config.tracking || createBloomreachWidgetTracking();
+
+    const widget = {
+        el: config.el || {},
+        tracking,
+
+        getContainers(options = {}) {
+            if (options.container) {
+                return $(options.container);
+            }
+
+            return $(widget.el.widgetContainer);
+        },
+
+        hide(options = {}) {
+            const $containers = widget.getContainers(options);
+
+            if (config.hide) {
+                config.hide($containers, options, widget);
+                return;
+            }
+
+            $containers.empty().hide();
+        },
+
+        init(payloadData, options = {}) {
+            const $containers = widget.getContainers(options);
+
+            if (!$containers.length) {
+                return;
+            }
+
+            if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
+                widget.hide(options);
+                return;
+            }
+
+            tracking.setPayload(payloadData);
+
+            if (config.setPayload) {
+                config.setPayload(payloadData, widget);
+            }
+
+            $containers.each(function () {
+                const $container = $(this);
+
+                if (config.renderWidget) {
+                    config.renderWidget($container, payloadData, widget);
+                }
+
+                if (config.initRenderedWidget) {
+                    config.initRenderedWidget($container, widget);
+                }
+            });
+
+            if (config.getViewTargets) {
+                tracking.observeView(config.getViewTargets($containers, widget));
+            }
+        },
+    };
+
+    return 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];
+    },
+
+    init(type, payloadData, options = {}) {
+        const widget = Wick.BloomreachWidget.getWidget(type);
+
+        if (!widget || typeof widget.init !== 'function') {
+            return;
+        }
+
+        widget.init(payloadData, options, 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;
+    },
+
+    removeBlankTargets($root) {
+        if (!isApp()) {
+            return;
+        }
+
+        $root.find('a[target="_blank"]').removeAttr('target');
+    },
+
+    getDisplayPrice(product) {
+        return product.displayPrice || product.price || {};
+    },
+
+    getDisplayPriceExcVat(product) {
+        return product.displayPriceExclusiveVat || product.priceExclusiveVat || null;
+    },
+
+    getExcVatFormattedValue(product, displayPrice) {
+        const excVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
+
+        if (excVat && excVat.formattedValue) {
+            return excVat.formattedValue;
+        }
+
+        if (!displayPrice || typeof displayPrice.value !== 'number') {
+            return displayPrice ? displayPrice.formattedValue || '' : '';
+        }
+
+        const vatRate = displayPrice.vatRatePercentage || 20;
+
+        return Wick.BloomreachWidget.formatPrice(displayPrice.value / (1 + vatRate / 100));
+    },
+
+    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 isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
+        const excVatFormattedValue = options.fallbackExcVat
+            ? Wick.BloomreachWidget.getExcVatFormattedValue(product, displayPrice)
+            : Wick.BloomreachWidget.getPriceFormattedValue(displayPriceExcVat);
+
+        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,
+            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);
+    },
+};

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

@@ -15,22 +15,24 @@ function disconnectViewObserver(state) {
     state.viewObserver = null;
 }
 
-function observeView(state, elements) {
-    if (!window.IntersectionObserver) {
+function observeView(state, target) {
+    if (!target || !window.IntersectionObserver) {
         return;
     }
 
-    elements = Array.isArray(elements) ? elements : [elements];
+    const elements = Array.isArray(target) ? target : [target];
 
     state.viewObserver = new IntersectionObserver(function (entries) {
-        if (
-            entries.some(function (entry) {
-                return entry.isIntersecting;
-            })
-        ) {
-            pushDataLayerEvent(EVENT_NAMES.view, state.widgetData);
-            disconnectViewObserver(state);
+        const isVisible = entries.some(function (entry) {
+            return entry.isIntersecting;
+        });
+
+        if (!isVisible) {
+            return;
         }
+
+        pushDataLayerEvent(EVENT_NAMES.view, state.widgetData);
+        disconnectViewObserver(state);
     });
 
     elements.forEach(function (element) {
@@ -56,13 +58,14 @@ function trackAddToCart(state, items) {
 
 export function createBloomreachWidgetTracking() {
     const state = {
-        initWidgetPayload: null,
+        widgetData: null,
         viewObserver: null,
     };
 
     return {
         setPayload(payloadData) {
             disconnectViewObserver(state);
+
             const metadata = payloadData.widgetMetadata;
 
             state.widgetData = {
@@ -72,8 +75,8 @@ export function createBloomreachWidgetTracking() {
             };
         },
 
-        observeView(element) {
-            observeView(state, element);
+        observeView(target) {
+            observeView(state, target);
         },
 
         trackClick(itemId) {

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

@@ -1,250 +1,21 @@
 var Wick = window.Wick || {};
 
-import { isApp } from '../utils/helpers';
-import { createEvent } from '../utils/create-event';
-import CompleteYourProjectWidget from './complete-your-project-widget';
+import './bloomreach-widget-core';
+import Widget from './complete-your-project/widget';
 import WhyNotAddWidget from './why-not-add-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',
-    },
-
-    registerWidgets(widgetList) {
-        widgetList.forEach(function ({ type, widget }) {
-            Wick.BloomreachWidget.widgets[type] = widget;
-        });
-    },
-
-    getWidget(type) {
-        return Wick.BloomreachWidget.widgets[type];
-    },
-
-    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 '';
-    },
-
-    removeBlankTargets($root) {
-        if (!isApp()) {
-            return;
-        }
-
-        $root.find('a[target="_blank"]').removeAttr('target');
-    },
-
-    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,
-            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);
-    },
-};
+import DontForgetWidget from './dont-forget-widget';
 
 Wick.BloomreachWidget.registerWidgets([
     {
         type: 'completeYourProject',
-        widget: CompleteYourProjectWidget,
+        widget: Widget,
     },
     {
         type: 'whyNotAdd',
         widget: WhyNotAddWidget,
     },
+    {
+        type: 'dontForget',
+        widget: DontForgetWidget,
+    },
 ]);