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

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

@@ -0,0 +1,179 @@
+import {
+    COMPLETE_YOUR_PROJECT_EL as EL,
+    COMPLETE_YOUR_PROJECT_TEMPLATES as TEMPLATES,
+} from './config';
+
+export function createCompleteYourProjectView(model, presenter) {
+    function getCtaText(selectedCount) {
+        if (!selectedCount) {
+            return 'Add product(s) to basket';
+        }
+
+        return `Add ${selectedCount} product${selectedCount > 1 ? 's' : ''} to basket`;
+    }
+
+    function setCtaText($button, text) {
+        const $text = $button.find(Wick.BloomreachWidget.el.loadingButtonText);
+
+        if ($text.length) {
+            $text.text(text);
+            return;
+        }
+
+        $button.text(text);
+    }
+
+    function renderWidget($container) {
+        const $content = $container.children(EL.widgetContent).first().length
+            ? $container.children(EL.widgetContent).first()
+            : $container.find(EL.widgetContent).first();
+        const recommendations = model.getRecommendations();
+
+        if (!$content.length || !recommendations.length) {
+            return;
+        }
+
+        $content.html(TEMPLATES.wrapper());
+
+        const $wrapper = $content.find(EL.widgetWrapper);
+
+        recommendations.forEach(function (recommendation, index) {
+            const product = presenter.getProductRenderData(recommendation.baseProduct, index);
+
+            $wrapper.append(TEMPLATES.card(product));
+            $wrapper.children(EL.completeCard).last().attr(EL.recommendationIndexAttr, index);
+
+            if (index === 0 && recommendations.length > 1) {
+                $wrapper.append(TEMPLATES.divider());
+            }
+        });
+
+        const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
+
+        $content.append(TEMPLATES.summary({ 'switch-vat': isSwitchVat }));
+        $container.show();
+    }
+
+    function updateSummary($root, response = {}) {
+        const totalPriceExclusiveVat = response.totalPriceExclusiveVat || response.totalExcVatPrice;
+        const totalWasPriceExclusiveVat =
+            response.totalWasPriceExclusiveVat || response.totalExcVatWasPrice;
+        const { vatInc, vatExc } = Wick.BloomreachWidget.el;
+        const $price = $root.find(EL.summaryPriceValue);
+        const $salePrice = $root.find(EL.summarySalePrice);
+        const $total = $root.find(EL.summaryTotal);
+
+        if (!$price.length) {
+            return;
+        }
+
+        if (response.totalWasPrice) {
+            $total.addClass('complete-widget__total-sale');
+
+            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 || '');
+            } else {
+                $price.text(response.totalWasPrice);
+                $salePrice.text(response.totalPrice || '');
+            }
+
+            $salePrice.show();
+            Wick.BloomreachWidget.reapplyVatDisplay();
+            return;
+        }
+
+        $total.removeClass('complete-widget__total-sale');
+
+        const $priceInc = $price.find(vatInc);
+
+        if ($priceInc.length) {
+            $priceInc.text(response.totalPrice || '£0.00');
+            $price.find(vatExc).text(totalPriceExclusiveVat || response.totalPrice || '£0.00');
+            $salePrice.find(vatInc).text('');
+            $salePrice.find(vatExc).text('');
+            $salePrice.hide();
+        } else {
+            $price.text(response.totalPrice || '£0.00');
+            $salePrice.text('').hide();
+        }
+
+        Wick.BloomreachWidget.reapplyVatDisplay();
+    }
+
+    function updateCta($root) {
+        const selectedCount = $root.find(EL.cardCheckbox).filter(':checked').length;
+        const $cta = $root.find(EL.ctaButton);
+
+        if (!$cta.length) {
+            return;
+        }
+
+        $cta.prop('disabled', !selectedCount);
+        setCtaText($cta, getCtaText(selectedCount));
+    }
+
+    function setInitialSummary($root) {
+        const firstItem = model.getSelectedItems($root)[0];
+
+        if (!firstItem || !firstItem.product) {
+            return;
+        }
+
+        const product = firstItem.product;
+        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
+        const priceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
+        const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
+
+        updateSummary($root, {
+            totalPrice: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice) || '£0.00',
+            totalWasPrice: wasPriceFormatted || null,
+            totalPriceExclusiveVat: Wick.BloomreachWidget.getPriceFormattedValue(priceExcVat),
+            totalWasPriceExclusiveVat: Wick.BloomreachWidget.getExcVatWasPrice(product) || null,
+        });
+    }
+
+    function alignBlock(selector, $root) {
+        const $els = $root.find(selector);
+
+        $els.css('min-height', '');
+
+        if (!$els.length || Wick.Responsive.getCurrentBreakpoint() !== 'up-lg') {
+            return;
+        }
+
+        let maxHeight = 0;
+
+        $els.each(function () {
+            maxHeight = Math.max(maxHeight, $(this).height());
+        });
+
+        if (maxHeight > 0) {
+            $els.css('min-height', maxHeight + 'px');
+        }
+    }
+
+    function alignCardBlocks($root) {
+        alignBlock(EL.titleEl, $root);
+        alignBlock(EL.optionsEl, $root);
+    }
+
+    function resetWidgetState($root) {
+        $root.find(EL.cardCheckbox).prop('checked', false);
+        $root.find(EL.completeCard).removeClass(EL.selectedClass);
+        $root.find(EL.quantityInput).val(1).data(EL.previousQuantityData, 1);
+    }
+
+    return {
+        renderWidget,
+        updateSummary,
+        updateCta,
+        setInitialSummary,
+        alignCardBlocks,
+        resetWidgetState,
+    };
+}

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

@@ -0,0 +1,185 @@
+var Wick = window.Wick || {};
+
+import { createLoadingButton } from '../../utils/create-loading-button';
+import { createToast } from '../../utils/create-toast';
+import { createBloomreachWidget } from '../bloomreach-widget-core';
+import { createBloomreachWidgetTracking } from '../bloomreach-widget-tracking';
+import {
+    COMPLETE_YOUR_PROJECT_EL as EL,
+    COMPLETE_YOUR_PROJECT_EVENTS as EVENTS,
+    COMPLETE_YOUR_PROJECT_TEMPLATES as TEMPLATES,
+} from './config';
+import { createCompleteYourProjectModel } from './model';
+import { createCompleteYourProjectPresenter } from './presenter';
+import { createCompleteYourProjectView } from './view';
+import { createCompleteYourProjectCards } from './cards';
+
+const model = createCompleteYourProjectModel();
+const presenter = createCompleteYourProjectPresenter();
+const view = createCompleteYourProjectView(model, presenter);
+const tracking = createBloomreachWidgetTracking();
+
+let loadingButton = null;
+let toast = null;
+let cards = null;
+
+function ensureServices() {
+    if (!toast) {
+        toast = createToast({
+            template: TEMPLATES.notification,
+        });
+    }
+
+    if (!loadingButton) {
+        loadingButton = createLoadingButton();
+    }
+}
+
+function handleBulkAddToCartResponse(response) {
+    const bulkData = response && response.bulkAddToCartData;
+
+    if (!bulkData) {
+        return;
+    }
+
+    toast.show({
+        type: bulkData.messageType,
+        text: bulkData.messageText,
+    });
+}
+
+function dispatchCalculateTotal($root) {
+    view.updateCta($root);
+
+    const selectedItems = model.getSelectedItems($root);
+
+    return Wick.BloomreachWidget.dispatchWidgetEvent(EVENTS.calculateTotal, {
+        entries: model.toSelectedEntries(selectedItems),
+    }).then(function (response) {
+        view.updateSummary($root, response);
+    });
+}
+
+function dispatchAddToCart($root, $button, selectedItems) {
+    loadingButton.start($button);
+
+    return Wick.BloomreachWidget.dispatchWidgetEvent(EVENTS.addToCart, {
+        entries: model.toAddToCartEntries(selectedItems),
+    })
+        .then(function (response) {
+            handleBulkAddToCartResponse(response);
+
+            if (Wick.MiniBasketSliderFE) {
+                Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+            }
+        })
+        .catch(function () {
+            handleBulkAddToCartResponse({
+                bulkAddToCartData: {
+                    messageType: 'error',
+                    messageText: 'Selected product(s) were not added to basket',
+                },
+            });
+        })
+        .finally(function () {
+            loadingButton.stop($button);
+            view.updateCta($root);
+        });
+}
+
+function bindAddToCart($root) {
+    $root.off('click.bloomreachAddToCart', EL.ctaButton);
+    $root.on('click.bloomreachAddToCart', EL.ctaButton, function (event) {
+        event.preventDefault();
+
+        const $button = $(this);
+
+        if ($button.prop('disabled') || loadingButton.isLoading($button)) {
+            return;
+        }
+
+        const selectedItems = model.getSelectedItems($root);
+        const trackingItems = model.toTrackingItems(selectedItems);
+
+        if (trackingItems.length) {
+            tracking.trackAddToCart(trackingItems);
+        }
+
+        dispatchAddToCart($root, $button, selectedItems);
+    });
+}
+
+function bindVatToggle() {
+    if (Wick.BloomreachWidget.bindVatToggle) {
+        Wick.BloomreachWidget.bindVatToggle('completeYourProjectVatToggle');
+    }
+}
+
+function initRenderedWidget($container) {
+    ensureServices();
+
+    const $completeWidget = $container.find(EL.completeWidget).first();
+
+    if (!$completeWidget.length) {
+        return;
+    }
+
+    Wick.BloomreachWidget.removeBlankTargets($completeWidget);
+    Wick.BloomreachWidget.drawRating($completeWidget);
+    cards.bindCardSelection($completeWidget);
+    cards.bindDropdowns();
+    cards.bindDropdownValidation($completeWidget);
+    bindAddToCart($completeWidget);
+    cards.bindProductTracking($completeWidget);
+    bindVatToggle();
+    cards.initQuantityFields($completeWidget);
+
+    $completeWidget.find(EL.dropdownRoot).removeClass(EL.dropdownErrorClass);
+
+    view.alignCardBlocks($completeWidget);
+    view.updateCta($completeWidget);
+    view.setInitialSummary($completeWidget);
+    Wick.BloomreachWidget.reapplyVatDisplay();
+}
+
+cards = createCompleteYourProjectCards({
+    model,
+    presenter,
+    view,
+    tracking,
+    calculateTotal: dispatchCalculateTotal,
+});
+
+const Widget = createBloomreachWidget({
+    el: EL,
+    tracking,
+    setPayload(payloadData) {
+        model.setRecommendations(payloadData);
+    },
+    renderWidget($container) {
+        cards.resetDropdownState();
+        view.renderWidget($container);
+    },
+    initRenderedWidget,
+    getViewTargets($containers) {
+        return [$containers.find(EL.titleEl).get(0), $containers.find(EL.ctaButton).get(-1)];
+    },
+});
+
+$(document).ready(function () {
+    Wick.Responsive.onResize(function () {
+        $(EL.widgetContainer).each(function () {
+            const $completeWidget = $(this).find(EL.completeWidget);
+
+            if ($completeWidget.length) {
+                view.alignCardBlocks($completeWidget);
+            }
+        });
+    });
+});
+
+window.addEventListener('pagehide', function () {
+    cards.resetBackForwardState();
+});
+
+export default Widget;

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

@@ -0,0 +1,15 @@
+import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recommendation-carousel-widget';
+
+const DontForgetWidget = createBloomreachRecommendationCarouselWidget({
+    namespace: 'dontForget',
+    title: 'Don’t forget',
+    modifier: 'why-not-add--dont-forget',
+    widgetContainer: '.custom-slider.just-added .custom-slider__wrap',
+    appendToContainer: true,
+    doNotShowAddedProductPopup: true,
+    disableAfterSuccess: true,
+    disableAfterFailure: true,
+    addToCartError: 'Product has not been added to basket',
+});
+
+export default DontForgetWidget;

package/src/js/page/bloomreach-widget/why-not-add-widget.js

@@ -1,230 +1,12 @@
-var Wick = window.Wick || {};
-
-import { createLoadingButton } from '../utils/create-loading-button';
-import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
-
-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',
-    require('../../../components/bloomreach/why-not-add.hbs')
-);
-Handlebars.registerPartial(
-    'bloomreach/why-not-add-skeleton',
-    require('../../../components/bloomreach/why-not-add-skeleton.hbs')
-);
-Handlebars.registerPartial(
-    'bloomreach/why-not-add-card-skeleton',
-    require('../../../components/bloomreach/why-not-add-card-skeleton.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 whyNotAddTemplate = require('../../../components/bloomreach/why-not-add-content.hbs');
-
-const WhyNotAddWidget = {
-    ADD_TO_CART_EVENT: 'addToCart',
-
-    products: [],
-    sliders: [],
-    loadingButton: null,
-    tracking: createBloomreachWidgetTracking(),
-
-    el: {
-        cta: '.why-not-add-card__cta',
-        next: '[data-why-not-add-next]',
-        pagination: '[data-why-not-add-pagination]',
-        productCard: '.why-not-add-card',
-        productCodeAttr: 'data-product-code',
-        productLink: '.why-not-add-card__title',
-        prev: '[data-why-not-add-prev]',
-        root: '[data-why-not-add]',
-        slider: '[data-why-not-add-slider]',
-        widgetContainer: '[data-why-not-add-widget]',
-    },
-
-    normalizeProducts(payloadData) {
-        return Wick.BloomreachWidget.normalizePayload(payloadData)
-            .map(function (item) {
-                return item.baseProduct || item;
-            })
-            .slice(0, 5);
-    },
-
-    renderWidget($container, payloadData) {
-        const products = WhyNotAddWidget.normalizeProducts(payloadData);
-
-        if (!products.length) {
-            $container.empty().hide();
-            return;
-        }
-
-        WhyNotAddWidget.products = products;
-
-        $container
-            .html(
-                whyNotAddTemplate({
-                    products: products.map(Wick.BloomreachWidget.getProductRenderData),
-                    isSingleProduct: products.length === 1,
-                })
-            )
-            .show();
-    },
-
-    destroySliders() {
-        WhyNotAddWidget.sliders.forEach(function (slider) {
-            if (slider && slider.destroy) {
-                slider.destroy(true, true);
-            }
-        });
-
-        WhyNotAddWidget.sliders = [];
-    },
-
-    initSliders($root) {
-        WhyNotAddWidget.destroySliders();
-
-        $root.find(WhyNotAddWidget.el.slider).each(function () {
-            const $slider = $(this);
-            const $widget = $slider.closest(WhyNotAddWidget.el.root);
-            const slidesCount = $slider.find('.swiper-slide').length;
-
-            if (slidesCount <= 1) {
-                return;
-            }
-
-            const slider = new Swiper(this, {
-                roundLengths: true,
-                slidesPerView: 1,
-                spaceBetween: 12,
-                watchOverflow: true,
-                navigation: {
-                    nextEl: $widget.find(WhyNotAddWidget.el.next)[0],
-                    prevEl: $widget.find(WhyNotAddWidget.el.prev)[0],
-                    disabledClass: 'why-not-add__arrow--disabled',
-                },
-                pagination: {
-                    el: $widget.find(WhyNotAddWidget.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',
-                },
-            });
-
-            WhyNotAddWidget.sliders.push(slider);
-        });
-    },
-
-    bindProductTracking($root) {
-        $root.off('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink);
-        $root.on('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink, function () {
-            const productCode = $(this)
-                .closest(WhyNotAddWidget.el.productCard)
-                .attr(WhyNotAddWidget.el.productCodeAttr);
-
-            WhyNotAddWidget.tracking.trackClick(productCode);
-        });
-    },
-
-    bindAddToCart($root) {
-        $root.off('click.whyNotAdd', WhyNotAddWidget.el.cta);
-        $root.on('click.whyNotAdd', WhyNotAddWidget.el.cta, function (event) {
-            event.preventDefault();
-
-            const $button = $(this);
-            const $card = $button.closest(WhyNotAddWidget.el.productCard);
-            const productCode = $card.attr(WhyNotAddWidget.el.productCodeAttr);
-
-            if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
-                return;
-            }
-
-            const payload = {
-                productCode,
-            };
-
-            WhyNotAddWidget.tracking.trackAddToCart([
-                {
-                    item_id: productCode,
-                    sku: productCode,
-                },
-            ]);
-
-            WhyNotAddWidget.loadingButton.start($button);
-
-            Wick.BloomreachWidget.dispatchWidgetEvent(WhyNotAddWidget.ADD_TO_CART_EVENT, payload)
-                .then(function () {
-                    WhyNotAddWidget.loadingButton.stop($button);
-                    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-                })
-                .catch(function () {
-                    WhyNotAddWidget.loadingButton.stop($button);
-                });
-        });
-    },
-
-    bindVatToggle() {
-        if (Wick.BloomreachWidget.bindVatToggle) {
-            Wick.BloomreachWidget.bindVatToggle('whyNotAddVatToggle');
-        }
-    },
-
-    initRenderedWidget($container) {
-        const $root = $container.find(WhyNotAddWidget.el.root);
-
-        if (!$root.length) {
-            return;
-        }
-
-        if (!WhyNotAddWidget.loadingButton) {
-            WhyNotAddWidget.loadingButton = createLoadingButton({
-                text: Wick.BloomreachWidget.el.loadingButtonText,
-                loader: Wick.BloomreachWidget.el.loadingButtonLoader,
-            });
-        }
-
-        Wick.BloomreachWidget.removeBlankTargets($root);
-
-        Wick.BloomreachWidget.drawRating($root);
-        WhyNotAddWidget.initSliders($root);
-        WhyNotAddWidget.bindAddToCart($root);
-        WhyNotAddWidget.bindProductTracking($root);
-        WhyNotAddWidget.bindVatToggle();
-        Wick.BloomreachWidget.reapplyVatDisplay();
-    },
-
-    init(payloadData) {
-        const $containers = $(WhyNotAddWidget.el.widgetContainer);
-
-        WhyNotAddWidget.tracking.setPayload(payloadData);
-
-        if (!payloadData) {
-            $containers.empty().hide();
-            return;
-        }
-
-        $containers.each(function () {
-            const $container = $(this);
-
-            WhyNotAddWidget.renderWidget($container, payloadData);
-            WhyNotAddWidget.initRenderedWidget($container);
-        });
-
-        WhyNotAddWidget.tracking.observeView([
-            $containers.find(WhyNotAddWidget.el.productLink).get(0),
-            $containers.find(WhyNotAddWidget.el.cta).get(0),
-        ]);
-    },
-};
+import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recommendation-carousel-widget';
+
+const WhyNotAddWidget = createBloomreachRecommendationCarouselWidget({
+    namespace: 'whyNotAdd',
+    title: 'Why not add',
+    widgetContainer: '[data-why-not-add-widget]',
+    disableAfterSuccess: false,
+    disableAfterFailure: false,
+    hideBadge: true,
+});
 
 export default WhyNotAddWidget;