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

package/build/js/page/bloomreach-widget/complete-your-project/model.js

@@ -0,0 +1,140 @@
+import { COMPLETE_YOUR_PROJECT_EL as EL } from './config';
+
+export function createCompleteYourProjectModel() {
+    let recommendations = [];
+
+    function setRecommendations(payloadData) {
+        recommendations = Wick.BloomreachWidget.normalizePayload(payloadData);
+    }
+
+    function getRecommendations() {
+        return recommendations;
+    }
+
+    function getRecommendationIndex($card) {
+        return Number($card.attr(EL.recommendationIndexAttr));
+    }
+
+    function getRecommendation($card) {
+        return recommendations[getRecommendationIndex($card)];
+    }
+
+    function findVariantProduct(recommendation, selectedValue) {
+        if (
+            !recommendation ||
+            !recommendation.variantProducts ||
+            !recommendation.variantProducts.length
+        ) {
+            return null;
+        }
+
+        return recommendation.variantProducts.find(function (variantProduct) {
+            return `${variantProduct.code}` === `${selectedValue}`;
+        });
+    }
+
+    function getCardQuantity($card) {
+        const quantity = parseInt($card.find(EL.quantityInput).val(), 10);
+
+        return Number.isNaN(quantity) ? 1 : quantity;
+    }
+
+    function getCardProduct($card) {
+        const recommendation = getRecommendation($card);
+
+        if (!recommendation) {
+            return null;
+        }
+
+        const $dropdown = $card.find(EL.dropdownRoot);
+        const selectedValue = $dropdown.length ? $dropdown.data(EL.selectedValueData) : '';
+
+        if (selectedValue) {
+            return findVariantProduct(recommendation, selectedValue) || recommendation.baseProduct;
+        }
+
+        return recommendation.baseProduct;
+    }
+
+    function getSelectedItems($root) {
+        const items = [];
+
+        $root.find(EL.completeCard).each(function () {
+            const $card = $(this);
+
+            if (!$card.find(EL.cardCheckbox).prop('checked')) {
+                return;
+            }
+
+            const product = getCardProduct($card);
+
+            if (!product) {
+                return;
+            }
+
+            const recommendationIndex = getRecommendationIndex($card);
+            const recommendation = recommendations[recommendationIndex];
+
+            items.push({
+                recommendationIndex,
+                baseProduct: recommendation && recommendation.baseProduct,
+                product,
+                quantity: getCardQuantity($card),
+            });
+        });
+
+        return items;
+    }
+
+    function toSelectedEntries(items) {
+        return items.map(function (item) {
+            return {
+                product: item.product,
+                quantity: item.quantity,
+            };
+        });
+    }
+
+    function toAddToCartEntries(items) {
+        return items.map(function (item) {
+            return {
+                productCode: item.product.code,
+                quantity: item.quantity,
+            };
+        });
+    }
+
+    function toTrackingItems(items) {
+        return items
+            .filter(function (item) {
+                return item.recommendationIndex !== 0;
+            })
+            .map(function (item) {
+                if (
+                    !item.baseProduct ||
+                    !item.baseProduct.code ||
+                    !item.product ||
+                    !item.product.code
+                ) {
+                    return null;
+                }
+
+                return {
+                    item_id: item.baseProduct.code,
+                    sku: item.product.code,
+                };
+            })
+            .filter(Boolean);
+    }
+
+    return {
+        setRecommendations,
+        getRecommendations,
+        getRecommendationIndex,
+        findVariantProduct,
+        getSelectedItems,
+        toSelectedEntries,
+        toAddToCartEntries,
+        toTrackingItems,
+    };
+}

package/build/js/page/bloomreach-widget/complete-your-project/presenter.js

@@ -0,0 +1,69 @@
+export function createCompleteYourProjectPresenter() {
+    function getDropdownOptions(product) {
+        if (!product.variantOptions || !product.variantOptions.length) {
+            return [];
+        }
+
+        return product.variantOptions.map(function (variantOption) {
+            const qualifiers = variantOption.variantOptionQualifiers || [];
+
+            return {
+                label: qualifiers
+                    .map(function (qualifier) {
+                        return qualifier.value;
+                    })
+                    .join(', '),
+                value: variantOption.code,
+            };
+        });
+    }
+
+    function getSelectedDropdownLabel(options, selectedValue) {
+        const selectedOption = options.find(function (option) {
+            return option.value === selectedValue;
+        });
+
+        return selectedOption ? selectedOption.label : '';
+    }
+
+    function getProductRenderData(product, index, options = {}) {
+        const shouldShowDropdown = index !== 0;
+        const dropdownOptions = shouldShowDropdown ? getDropdownOptions(product) : [];
+        const selectedDropdownValue = options.selectedDropdownValue || '';
+        const selectedDropdownLabel = getSelectedDropdownLabel(
+            dropdownOptions,
+            selectedDropdownValue
+        );
+        const renderData = Wick.BloomreachWidget.getProductRenderData(product, {
+            image: options.image,
+            fallbackProduct: options.fallbackProduct,
+            fallbackExcVat: true,
+        });
+        const showFromPrice = Boolean(
+            index !== 0 &&
+                !selectedDropdownValue &&
+                renderData.price &&
+                renderData.price.priceType === 'FROM'
+        );
+
+        return {
+            ...renderData,
+            showFromPrice,
+            dropdownOptions: dropdownOptions.map(function (option) {
+                return {
+                    ...option,
+                    selected: option.value === selectedDropdownValue,
+                };
+            }),
+            checkboxId: `${product.code}-${index}`,
+            dropdownError: options.dropdownError || false,
+            checked: options.checked || false,
+            selectedDropdownValue,
+            selectedDropdownLabel,
+        };
+    }
+
+    return {
+        getProductRenderData,
+    };
+}

package/build/js/page/bloomreach-widget/complete-your-project/quantity.js

@@ -0,0 +1,80 @@
+import { createCountStepper } from '../../utils/create-count-stepper';
+import { COMPLETE_YOUR_PROJECT_EL as EL } from './config';
+
+export function createCompleteYourProjectQuantity({ validateCardDropdown, calculateTotal }) {
+    function resetCardQuantity($card) {
+        $card
+            .find(EL.quantityInput)
+            .val(1)
+            .data(EL.previousQuantityData, 1)
+            .removeData(EL.quantityReadyData)
+            .removeData(EL.countStepperInitializedData);
+    }
+
+    function initQuantityField($root, inputSel) {
+        const stepper = createCountStepper({
+            inputSel,
+            min: 1,
+            onChange(qty, inputEl) {
+                const $input = $(inputEl);
+                const $card = $input.closest(EL.completeCard);
+                const $completeWidget = $input.closest(EL.completeWidget);
+                const $checkbox = $card.find(EL.cardCheckbox);
+                const previousQuantity = $input.data(EL.previousQuantityData) || 1;
+
+                if (!$input.data(EL.quantityReadyData)) {
+                    $input.data(EL.previousQuantityData, qty || 1);
+                    return;
+                }
+
+                if (!validateCardDropdown($card)) {
+                    $input.val(previousQuantity);
+
+                    if (previousQuantity <= 1) {
+                        $card.find(EL.countMinusBtn).prop('disabled', true);
+                    }
+
+                    return;
+                }
+
+                $checkbox.prop('checked', true);
+                $card.addClass(EL.selectedClass);
+                $input.data(EL.previousQuantityData, qty);
+                $input.trigger('change');
+
+                if ($completeWidget.length) {
+                    calculateTotal($completeWidget);
+                }
+            },
+        });
+
+        stepper.init($root);
+        $root.find(inputSel).data(EL.quantityReadyData, true);
+    }
+
+    function initQuantityFields($root) {
+        $root.find(EL.quantityInput).each(function () {
+            const $input = $(this);
+
+            if ($input.data(EL.countStepperInitializedData)) {
+                return;
+            }
+
+            const inputId = $input.attr('id');
+
+            if (!inputId) {
+                return;
+            }
+
+            $input.data(EL.countStepperInitializedData, true);
+            $input.data(EL.previousQuantityData, parseInt($input.val(), 10) || 1);
+
+            initQuantityField($input.closest(EL.countStepperRoot), `#${inputId}`);
+        });
+    }
+
+    return {
+        resetCardQuantity,
+        initQuantityFields,
+    };
+}

package/build/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/build/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/build/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;