wickes-css2 2.113.0-develop.2 → 2.113.0-develop.5

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,
+    },
 ]);

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

@@ -0,0 +1,308 @@
+import { createDropdown } from '../../utils/custom-dropdown';
+import {
+    COMPLETE_YOUR_PROJECT_EL as EL,
+    COMPLETE_YOUR_PROJECT_TEMPLATES as TEMPLATES,
+} from './config';
+import { createCompleteYourProjectQuantity } from './quantity';
+
+export function createCompleteYourProjectCards({
+    model,
+    presenter,
+    view,
+    tracking,
+    calculateTotal,
+}) {
+    let dropdownCurrent = {};
+
+    function resetDropdownState() {
+        dropdownCurrent = {};
+    }
+
+    function getDropdownCard($dropdown) {
+        return $dropdown.closest(EL.completeCard);
+    }
+
+    function getDropdownCheckbox($dropdown) {
+        return getDropdownCard($dropdown).find(EL.cardCheckbox);
+    }
+
+    function setDropdownCheckboxState($dropdown, isChecked, shouldTriggerChange = true) {
+        const $checkbox = getDropdownCheckbox($dropdown);
+
+        if (!$checkbox.length) {
+            return;
+        }
+
+        $checkbox.prop('checked', isChecked);
+
+        if (shouldTriggerChange) {
+            $checkbox.trigger('change');
+        }
+    }
+
+    function setDropdownError($dropdown, hasError) {
+        $dropdown.toggleClass(EL.dropdownErrorClass, hasError);
+    }
+
+    function validateDropdown($dropdown, options = {}) {
+        const isValid = Boolean($dropdown.data(EL.selectedValueData));
+
+        setDropdownError($dropdown, !isValid);
+
+        if (!isValid && options.uncheck) {
+            setDropdownCheckboxState($dropdown, false, false);
+            getDropdownCard($dropdown).removeClass(EL.selectedClass);
+        }
+
+        return isValid;
+    }
+
+    function validateCardDropdown($card, options = {}) {
+        const $dropdown = $card.find(EL.dropdownRoot);
+
+        if (!$dropdown.length) {
+            return true;
+        }
+
+        return validateDropdown($dropdown, options);
+    }
+
+    function reinitCard($card) {
+        $card.find(EL.countBtn).remove();
+        quantity.initQuantityFields($card);
+        Wick.BloomreachWidget.drawRating($card);
+        view.alignCardBlocks($card.closest(EL.completeWidget));
+        Wick.BloomreachWidget.reapplyVatDisplay();
+    }
+
+    function replaceCard($card, recommendationIndex, product, renderOptions = {}, state = {}) {
+        const productData = presenter.getProductRenderData(
+            product,
+            recommendationIndex,
+            renderOptions
+        );
+        const $newCard = $(TEMPLATES.card(productData));
+
+        $newCard.attr(EL.recommendationIndexAttr, recommendationIndex);
+        $newCard.toggleClass(EL.selectedClass, Boolean(state.checked));
+
+        const $newDropdown = $newCard.find(EL.dropdownRoot);
+
+        if ($newDropdown.length && state.selectedValue) {
+            $newDropdown.data(EL.selectedValueData, state.selectedValue);
+        }
+
+        if (state.dropdownError) {
+            $newDropdown.addClass(EL.dropdownErrorClass);
+        }
+
+        $card.replaceWith($newCard);
+        $newCard.find(EL.cardCheckbox).prop('checked', Boolean(state.checked));
+        quantity.resetCardQuantity($newCard);
+        reinitCard($newCard);
+
+        return $newCard;
+    }
+
+    function replaceCardWithBaseProduct($dropdown, options = {}) {
+        const $card = getDropdownCard($dropdown);
+        const recommendationIndex = model.getRecommendationIndex($card);
+        const recommendation = model.getRecommendations()[recommendationIndex];
+
+        if (!recommendation || !recommendation.baseProduct) {
+            return null;
+        }
+
+        return replaceCard(
+            $card,
+            recommendationIndex,
+            recommendation.baseProduct,
+            {
+                dropdownError: options.dropdownError || false,
+                checked: false,
+            },
+            {
+                checked: false,
+                dropdownError: options.dropdownError || false,
+            }
+        );
+    }
+
+    function replaceCardWithVariant($dropdown, selectedValue) {
+        const $card = getDropdownCard($dropdown);
+        const recommendationIndex = model.getRecommendationIndex($card);
+        const recommendation = model.getRecommendations()[recommendationIndex];
+
+        if (!recommendation) {
+            return null;
+        }
+
+        const variantProduct = model.findVariantProduct(recommendation, selectedValue);
+
+        if (!variantProduct) {
+            return null;
+        }
+
+        return replaceCard(
+            $card,
+            recommendationIndex,
+            {
+                ...variantProduct,
+                variantOptions: recommendation.baseProduct.variantOptions,
+            },
+            {
+                fallbackProduct: recommendation.baseProduct,
+                checked: true,
+                selectedDropdownValue: selectedValue,
+            },
+            {
+                checked: true,
+                selectedValue,
+            }
+        );
+    }
+
+    function handleDropdownSelect($dropdown, selectedValue) {
+        const $card = getDropdownCard($dropdown);
+        const recommendationIndex = $card.attr(EL.recommendationIndexAttr);
+        const currentValue = dropdownCurrent[recommendationIndex];
+
+        if (`${currentValue}` === `${selectedValue}`) {
+            return;
+        }
+
+        dropdownCurrent[recommendationIndex] = selectedValue;
+
+        const $completeWidget = $dropdown.closest(EL.completeWidget);
+        const isPlaceholder = !selectedValue;
+
+        if (isPlaceholder) {
+            setDropdownError($dropdown, true);
+            setDropdownCheckboxState($dropdown, false, false);
+            replaceCardWithBaseProduct($dropdown, { dropdownError: true });
+
+            if ($completeWidget.length) {
+                calculateTotal($completeWidget);
+            }
+
+            return;
+        }
+
+        setDropdownError($dropdown, false);
+        setDropdownCheckboxState($dropdown, true, false);
+        replaceCardWithVariant($dropdown, selectedValue);
+
+        if ($completeWidget.length) {
+            calculateTotal($completeWidget);
+        }
+    }
+
+    function bindDropdowns() {
+        const dropdown = createDropdown({
+            root: EL.dropdownRoot,
+            toggle: EL.dropdownToggle,
+            value: EL.dropdownValue,
+            option: EL.dropdownOption,
+            openClass: EL.dropdownOpenClass,
+            selectedClass: EL.dropdownOptionSelectedClass,
+            namespace: 'bloomreachDropdown',
+            onSelect($dropdown, $option, selectedValue) {
+                handleDropdownSelect($dropdown, selectedValue);
+            },
+        });
+
+        dropdown.bind();
+    }
+
+    function bindCardSelection($root) {
+        const $firstCard = $root.find(EL.completeCard).first();
+
+        $firstCard.find(EL.cardCheckbox).prop('checked', true);
+        $firstCard.addClass(EL.selectedClass);
+
+        $root.off('change.bloomreachCardSelection', EL.cardCheckbox);
+        $root.on('change.bloomreachCardSelection', EL.cardCheckbox, function () {
+            const $checkbox = $(this);
+            const $card = $checkbox.closest(EL.completeCard);
+            const $dropdown = $card.find(EL.dropdownRoot);
+
+            if (!$checkbox.prop('checked') && $dropdown.hasClass(EL.dropdownErrorClass)) {
+                $card.removeClass(EL.selectedClass);
+                return;
+            }
+
+            if (
+                $checkbox.prop('checked') &&
+                !validateCardDropdown($card, {
+                    uncheck: true,
+                })
+            ) {
+                $checkbox.prop('checked', false);
+                $card.removeClass(EL.selectedClass);
+                return;
+            }
+
+            $card.toggleClass(EL.selectedClass, this.checked);
+            calculateTotal($root);
+        });
+    }
+
+    function bindDropdownValidation($root) {
+        $root.off('click.bloomreachDropdownValidation', EL.cardCheckbox);
+        $root.on('click.bloomreachDropdownValidation', EL.cardCheckbox, function () {
+            const $checkbox = $(this);
+            const $card = $checkbox.closest(EL.completeCard);
+
+            if (
+                $checkbox.prop('checked') &&
+                !validateCardDropdown($card, {
+                    uncheck: true,
+                })
+            ) {
+                $checkbox.prop('checked', false);
+                $card.removeClass(EL.selectedClass);
+            }
+        });
+    }
+
+    function bindProductTracking($root) {
+        $root.off('click.bloomreachWidgetTracking', EL.titleEl);
+        $root.on('click.bloomreachWidgetTracking', EL.titleEl, function () {
+            const $card = $(this).closest(EL.completeCard);
+            const recommendationIndex = model.getRecommendationIndex($card);
+
+            if (recommendationIndex === 0) {
+                return;
+            }
+
+            const recommendation = model.getRecommendations()[recommendationIndex];
+            const baseProduct = recommendation && recommendation.baseProduct;
+
+            tracking.trackClick(baseProduct && baseProduct.code);
+        });
+    }
+
+    function resetBackForwardState() {
+        $(EL.completeWidget).each(function () {
+            const $widget = $(this);
+
+            view.resetWidgetState($widget);
+            bindCardSelection($widget);
+        });
+    }
+
+    const quantity = createCompleteYourProjectQuantity({
+        validateCardDropdown,
+        calculateTotal,
+    });
+
+    return {
+        resetDropdownState,
+        bindDropdowns,
+        bindCardSelection,
+        bindDropdownValidation,
+        bindProductTracking,
+        initQuantityFields: quantity.initQuantityFields,
+        resetBackForwardState,
+    };
+}

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

@@ -0,0 +1,60 @@
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('checkbox', require('../../../../elements/checkbox.hbs'));
+Handlebars.registerPartial('loader', require('../../../../elements/loader.hbs'));
+Handlebars.registerPartial('button', require('../../../../components/base/button.hbs'));
+Handlebars.registerPartial(
+    'bloomreach/complete-card-dropdown',
+    require('../../../../components/bloomreach/complete-card-dropdown.hbs')
+);
+Handlebars.registerPartial('notifications', require('../../../../elements/notifications.hbs'));
+Handlebars.registerPartial('reviews-rating', require('../../../../components/reviews-rating.hbs'));
+
+export const COMPLETE_YOUR_PROJECT_EVENTS = {
+    calculateTotal: 'calculateProductBundleTotal',
+    addToCart: 'bulkAddToCart',
+};
+
+export const COMPLETE_YOUR_PROJECT_EL = {
+    cardCheckbox: '.complete-card__select input[type="checkbox"]',
+    completeCard: '.complete-card',
+    completeWidget: '.complete-widget',
+    countBtn: '.count-btn',
+    countMinusBtn: '.count-btn--minus',
+    countStepperInitializedData: 'count-stepper-initialized',
+    countStepperRoot: '.count-stepper',
+    ctaButton: '.complete-widget__cta .btn',
+    summaryPriceValue: '.complete-widget__price-value',
+    summarySalePrice: '.complete-widget__sale-price',
+    summaryTotal: '.complete-widget__total',
+
+    dropdownErrorClass: 'complete-card-dropdown--error',
+    dropdownOpenClass: 'complete-card-dropdown--open',
+    dropdownOption: '[data-complete-card-dropdown-option]',
+    dropdownOptionSelectedClass: 'complete-card-dropdown__option--selected',
+    dropdownRoot: '[data-complete-card-dropdown]',
+    dropdownToggle: '[data-complete-card-dropdown-toggle]',
+    dropdownValue: '[data-complete-card-dropdown-value]',
+
+    optionsEl: '.complete-card__options',
+    previousQuantityData: 'previous-quantity',
+    quantityInput: '.tbx_quantity',
+    quantityReadyData: 'quantity-ready',
+
+    recommendationIndexAttr: 'data-recommendation-index',
+    selectedClass: 'complete-card--selected',
+    selectedValueData: 'selected-value',
+    titleEl: '.complete-card__title',
+
+    widgetContainer: '[data-complete-widget]',
+    widgetContent: '[data-complete-widget-content]',
+    widgetWrapper: '[data-complete-widget-wrapper]',
+};
+
+export const COMPLETE_YOUR_PROJECT_TEMPLATES = {
+    notification: require('../../../../elements/notifications.hbs'),
+    wrapper: require('../../../../components/bloomreach/complete-wrapper.hbs'),
+    divider: require('../../../../components/bloomreach/complete-divider.hbs'),
+    card: require('../../../../components/bloomreach/complete-card.hbs'),
+    summary: require('../../../../components/bloomreach/complete-summary.hbs'),
+};