wickes-css2 2.113.0-develop.1 → 2.113.0-develop.10

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

@@ -1,1100 +0,0 @@
-var Wick = window.Wick || {};
-
-import { createCountStepper } from '../utils/create-count-stepper';
-import { createDropdown } from '../utils/custom-dropdown';
-import { createLoadingButton } from '../utils/create-loading-button';
-import { createToast } from '../utils/create-toast';
-import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
-
-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'));
-
-const notificationTemplate = require('../../../elements/notifications.hbs');
-const completeWrapperTemplate = require('../../../components/bloomreach/complete-wrapper.hbs');
-const completeDividerTemplate = require('../../../components/bloomreach/complete-divider.hbs');
-const completeCardTemplate = require('../../../components/bloomreach/complete-card.hbs');
-const completeSummaryTemplate = require('../../../components/bloomreach/complete-summary.hbs');
-
-const CompleteYourProjectWidget = {
-    CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT: 'calculateProductBundleTotal',
-    ADD_PRODUCT_BUNDLE_TO_CART_EVENT: 'bulkAddToCart',
-
-    steppers: [],
-    recommendations: [],
-    dropdown: null,
-    loadingButton: null,
-    lastCalculationResponse: null,
-    dropdownCurrent: {},
-    toast: null,
-    tracking: createBloomreachWidgetTracking(),
-
-    el: {
-        cardCheckbox: '.complete-card__select input[type="checkbox"]',
-        completeCard: '.complete-card',
-        completeWidget: '.complete-widget',
-        countBtn: '.count-btn',
-        countStepperInitializedData: 'count-stepper-initialized',
-        countStepperRoot: '.count-stepper',
-        ctaButton: '.complete-widget__cta .btn',
-        summaryPriceValue: '.complete-widget__price-value',
-        summarySalePrice: '.complete-widget__sale-price',
-
-        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]',
-    },
-
-    badgeColorMap: {
-        blue: '#019ee3',
-        gray: '#3e3e3e',
-        green: '#9acd32',
-        red: '#cf000f',
-        yellow: '#f7ca18',
-    },
-
-    getCtaText(selectedCount) {
-        if (!selectedCount) {
-            return 'Add product(s) to basket';
-        }
-
-        return `Add ${selectedCount} product${selectedCount > 1 ? 's' : ''} to basket`;
-    },
-
-    setCtaText($button, text) {
-        const $text = $button.find(Wick.BloomreachWidget.el.loadingButtonText);
-
-        if ($text.length) {
-            $text.text(text);
-            return;
-        }
-
-        $button.text(text);
-    },
-
-    getBadgeColor(color) {
-        return CompleteYourProjectWidget.badgeColorMap[color] || color;
-    },
-
-    getDropdownOptions(product) {
-        if (!product.variantOptions || !product.variantOptions.length) {
-            return [];
-        }
-
-        return product.variantOptions.map(function (variantOption) {
-            const qualifiers = variantOption.variantOptionQualifiers || [];
-
-            const label = qualifiers
-                .map(function (qualifier) {
-                    return qualifier.value;
-                })
-                .join(', ');
-
-            return {
-                label,
-                value: variantOption.code,
-            };
-        });
-    },
-
-    getSelectedDropdownLabel(options, selectedValue) {
-        const selectedOption = options.find(function (option) {
-            return option.value === selectedValue;
-        });
-
-        return selectedOption ? selectedOption.label : '';
-    },
-
-    handleBulkAddToCartResponse(response) {
-        const bulkData = response && response.bulkAddToCartData;
-
-        if (!bulkData) {
-            return;
-        }
-
-        CompleteYourProjectWidget.toast.show({
-            type: bulkData.messageType,
-            text: bulkData.messageText,
-        });
-    },
-
-    getBadge(product) {
-        const promotion = product.potentialPromotions && product.potentialPromotions[0];
-        const promotionAttributes = promotion && promotion.customAttributes;
-
-        if (promotionAttributes && promotionAttributes.overlayText) {
-            return {
-                text: promotionAttributes.overlayText,
-                textColor: CompleteYourProjectWidget.getBadgeColor(
-                    promotionAttributes.overlayTextColor
-                ),
-                color: CompleteYourProjectWidget.getBadgeColor(
-                    promotionAttributes.overlayBackgroundColor
-                ),
-            };
-        }
-
-        return product.badge;
-    },
-
-    getExcVatFormattedValue(displayPrice, product) {
-        const excVat = product ? Wick.BloomreachWidget.getDisplayPriceExcVat(product) : null;
-        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));
-    },
-
-    getProductRenderData(product, index, options = {}) {
-        const shouldShowDropdown = index !== 0;
-        const dropdownOptions = shouldShowDropdown
-            ? CompleteYourProjectWidget.getDropdownOptions(product)
-            : [];
-        const selectedDropdownValue = options.selectedDropdownValue || '';
-        const selectedDropdownLabel = CompleteYourProjectWidget.getSelectedDropdownLabel(
-            dropdownOptions,
-            selectedDropdownValue
-        );
-        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
-        const showFromPrice = Boolean(
-            index !== 0 &&
-            !selectedDropdownValue &&
-            displayPrice &&
-            displayPrice.priceType === 'FROM'
-        );
-
-        const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
-        const excVatFormattedValue = CompleteYourProjectWidget.getExcVatFormattedValue(
-            displayPrice,
-            product
-        );
-        const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
-
-        const excVatWasPriceFormatted = Wick.BloomreachWidget.getExcVatWasPrice(product);
-
-        return {
-            ...product,
-            badge: CompleteYourProjectWidget.getBadge(product),
-            price: displayPrice,
-            wasPriceFormatted,
-            'switch-vat': isSwitchVat,
-            incVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice),
-            incVatValue: Wick.BloomreachWidget.getPriceValue(displayPrice),
-            excVatFormattedValue,
-            excVatValue: Wick.BloomreachWidget.getPriceValue(
-                Wick.BloomreachWidget.getDisplayPriceExcVat(product)
-            ),
-            incVatWasPriceFormatted: wasPriceFormatted,
-            wasPriceIncVatFormattedValue: wasPriceFormatted,
-            incVatWasPriceFormattedValue: wasPriceFormatted,
-            excVatWasPriceFormatted,
-            wasPriceExcVatFormattedValue: excVatWasPriceFormatted,
-            excVatWasPriceFormattedValue: excVatWasPriceFormatted,
-            showFromPrice,
-            image:
-                options.image ||
-                Wick.BloomreachWidget.getProductImage(product, options.fallbackProduct),
-            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,
-        };
-    },
-
-    renderWidget($container, context) {
-        const { widgetContent, widgetWrapper, completeCard, recommendationIndexAttr } =
-            CompleteYourProjectWidget.el;
-
-        const $content = $container.find(widgetContent);
-        const recommendations = Wick.BloomreachWidget.normalizePayload(context);
-
-        if (!$content.length || !recommendations.length) {
-            return;
-        }
-
-        CompleteYourProjectWidget.recommendations = recommendations;
-
-        $content.html(completeWrapperTemplate());
-
-        const $wrapper = $content.find(widgetWrapper);
-
-        CompleteYourProjectWidget.dropdownCurrent = {};
-
-        recommendations.forEach(function (recommendation, index) {
-            const product = CompleteYourProjectWidget.getProductRenderData(
-                recommendation.baseProduct,
-                index
-            );
-
-            $wrapper.append(completeCardTemplate(product));
-
-            const $card = $wrapper.children(completeCard).last();
-
-            $card.attr(recommendationIndexAttr, index);
-
-            if (index === 0 && recommendations.length > 1) {
-                $wrapper.append(completeDividerTemplate());
-            }
-        });
-
-        const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
-        $content.append(completeSummaryTemplate({ 'switch-vat': isSwitchVat }));
-    },
-
-    renderWidgetFromPayload(payloadData) {
-        const { widgetContainer, completeWidget } = CompleteYourProjectWidget.el;
-        const $containers = $(widgetContainer);
-
-        if (!$containers.length) {
-            return;
-        }
-
-        if (!Wick.BloomreachWidget.hasRecommendations(payloadData)) {
-            $containers.find(completeWidget).hide();
-            return;
-        }
-
-        $containers.each(function () {
-            const $container = $(this);
-
-            CompleteYourProjectWidget.renderWidget($container, payloadData);
-            CompleteYourProjectWidget.initRenderedWidget($container);
-        });
-    },
-
-    getDropdownCard($dropdown) {
-        return $dropdown.closest(CompleteYourProjectWidget.el.completeCard);
-    },
-
-    getDropdownCheckbox($dropdown) {
-        return CompleteYourProjectWidget.getDropdownCard($dropdown).find(
-            CompleteYourProjectWidget.el.cardCheckbox
-        );
-    },
-
-    setDropdownCheckboxState($dropdown, isChecked, shouldTriggerChange = true) {
-        const $checkbox = CompleteYourProjectWidget.getDropdownCheckbox($dropdown);
-
-        if (!$checkbox.length) {
-            return;
-        }
-
-        $checkbox.prop('checked', isChecked);
-
-        if (shouldTriggerChange) {
-            $checkbox.trigger('change');
-        }
-    },
-
-    setDropdownError($dropdown, hasError) {
-        $dropdown.toggleClass(CompleteYourProjectWidget.el.dropdownErrorClass, hasError);
-    },
-
-    validateDropdown($dropdown, options = {}) {
-        const isValid = Boolean($dropdown.data(CompleteYourProjectWidget.el.selectedValueData));
-
-        CompleteYourProjectWidget.setDropdownError($dropdown, !isValid);
-
-        if (!isValid && options.uncheck) {
-            CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, false, false);
-            CompleteYourProjectWidget.getDropdownCard($dropdown).removeClass(
-                CompleteYourProjectWidget.el.selectedClass
-            );
-        }
-
-        return isValid;
-    },
-
-    validateCardDropdown($card, options = {}) {
-        const $dropdown = $card.find(CompleteYourProjectWidget.el.dropdownRoot);
-
-        if (!$dropdown.length) {
-            return true;
-        }
-
-        return CompleteYourProjectWidget.validateDropdown($dropdown, options);
-    },
-
-    findVariantProduct(recommendation, selectedValue) {
-        if (!recommendation.variantProducts || !recommendation.variantProducts.length) {
-            return null;
-        }
-
-        return recommendation.variantProducts.find(function (variantProduct) {
-            return String(variantProduct.code) === String(selectedValue);
-        });
-    },
-
-    getCardQuantity($card) {
-        const $input = $card.find(CompleteYourProjectWidget.el.quantityInput);
-        const quantity = parseInt($input.val(), 10);
-
-        return Number.isNaN(quantity) ? 1 : quantity;
-    },
-
-    getCardProduct($card) {
-        const { recommendationIndexAttr, dropdownRoot, selectedValueData } =
-            CompleteYourProjectWidget.el;
-
-        const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
-
-        if (!recommendation) {
-            return null;
-        }
-
-        const $dropdown = $card.find(dropdownRoot);
-        const selectedValue = $dropdown.length ? $dropdown.data(selectedValueData) : '';
-
-        if (selectedValue) {
-            return (
-                CompleteYourProjectWidget.findVariantProduct(recommendation, selectedValue) ||
-                recommendation.baseProduct
-            );
-        }
-
-        return recommendation.baseProduct;
-    },
-
-    getSelectedEntries($root) {
-        const { completeCard, cardCheckbox } = CompleteYourProjectWidget.el;
-        const entries = [];
-
-        $root.find(completeCard).each(function () {
-            const $card = $(this);
-            const $checkbox = $card.find(cardCheckbox);
-
-            if (!$checkbox.prop('checked')) {
-                return;
-            }
-
-            const product = CompleteYourProjectWidget.getCardProduct($card);
-
-            if (!product) {
-                return;
-            }
-
-            entries.push({
-                product,
-                quantity: CompleteYourProjectWidget.getCardQuantity($card),
-            });
-        });
-
-        return entries;
-    },
-
-    getAddToCartEntries($root) {
-        return CompleteYourProjectWidget.getSelectedEntries($root).map(function (entry) {
-            return {
-                productCode: entry.product.code,
-                quantity: entry.quantity,
-            };
-        });
-    },
-
-    getSelectedTrackingItems($root) {
-        const { completeCard, cardCheckbox, recommendationIndexAttr } =
-            CompleteYourProjectWidget.el;
-        const items = [];
-
-        $root.find(completeCard).each(function () {
-            const $card = $(this);
-            const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-
-            if (recommendationIndex === 0 || !$card.find(cardCheckbox).prop('checked')) {
-                return;
-            }
-
-            const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
-            const baseProduct = recommendation && recommendation.baseProduct;
-            const selectedProduct = CompleteYourProjectWidget.getCardProduct($card);
-
-            if (!baseProduct || !baseProduct.code || !selectedProduct || !selectedProduct.code) {
-                return;
-            }
-
-            items.push({
-                item_id: baseProduct.code,
-                sku: selectedProduct.code,
-            });
-        });
-
-        return items;
-    },
-
-    bindProductTracking($root) {
-        const { completeCard, recommendationIndexAttr, titleEl } = CompleteYourProjectWidget.el;
-
-        $root.off('click.bloomreachWidgetTracking', titleEl);
-        $root.on('click.bloomreachWidgetTracking', titleEl, function () {
-            const $card = $(this).closest(completeCard);
-            const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-
-            if (recommendationIndex === 0) {
-                return;
-            }
-
-            const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
-            const baseProduct = recommendation && recommendation.baseProduct;
-
-            CompleteYourProjectWidget.tracking.trackClick(baseProduct && baseProduct.code);
-        });
-    },
-
-    updateSummary($root, response = {}) {
-        const totalPriceExclusiveVat = response.totalPriceExclusiveVat || response.totalExcVatPrice;
-
-        const totalWasPriceExclusiveVat =
-            response.totalWasPriceExclusiveVat || response.totalExcVatWasPrice;
-
-        const { summaryPriceValue, summarySalePrice } = CompleteYourProjectWidget.el;
-        const { vatInc, vatExc } = Wick.BloomreachWidget.el;
-
-        CompleteYourProjectWidget.lastCalculationResponse = response;
-
-        const $price = $root.find(summaryPriceValue);
-        const $salePrice = $root.find(summarySalePrice);
-        const $total = $root.find('.complete-widget__total');
-
-        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();
-    },
-
-    updateCta($root) {
-        const { ctaButton, cardCheckbox } = CompleteYourProjectWidget.el;
-        const selectedCount = $root.find(cardCheckbox).filter(':checked').length;
-        const $cta = $root.find(ctaButton);
-
-        if (!$cta.length) {
-            return;
-        }
-
-        $cta.prop('disabled', !selectedCount);
-        CompleteYourProjectWidget.setCtaText(
-            $cta,
-            CompleteYourProjectWidget.getCtaText(selectedCount)
-        );
-    },
-
-    dispatchCalculateTotal($root) {
-        CompleteYourProjectWidget.updateCta($root);
-
-        return Wick.BloomreachWidget.dispatchWidgetEvent(
-            CompleteYourProjectWidget.CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT,
-            {
-                entries: CompleteYourProjectWidget.getSelectedEntries($root),
-            }
-        ).then(function (response) {
-            CompleteYourProjectWidget.updateSummary($root, response);
-        });
-    },
-
-    dispatchAddToCart($root, $button) {
-        CompleteYourProjectWidget.loadingButton.start($button);
-
-        return Wick.BloomreachWidget.dispatchWidgetEvent(
-            CompleteYourProjectWidget.ADD_PRODUCT_BUNDLE_TO_CART_EVENT,
-            {
-                entries: CompleteYourProjectWidget.getAddToCartEntries($root),
-            }
-        )
-            .then(function (response) {
-                CompleteYourProjectWidget.handleBulkAddToCartResponse(response);
-
-                if (Wick.MiniBasketSliderFE) {
-                    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-                }
-            })
-            .catch(function () {
-                CompleteYourProjectWidget.handleBulkAddToCartResponse({
-                    bulkAddToCartData: {
-                        messageType: 'error',
-                        messageText: 'Selected product(s) were not added to basket',
-                    },
-                });
-            })
-            .finally(function () {
-                CompleteYourProjectWidget.loadingButton.stop($button);
-                CompleteYourProjectWidget.updateCta($root);
-            });
-    },
-
-    reinitCard($card) {
-        const { countBtn, completeWidget } = CompleteYourProjectWidget.el;
-
-        $card.find(countBtn).remove();
-
-        CompleteYourProjectWidget.initQuantityFields($card);
-        Wick.BloomreachWidget.drawRating($card);
-        CompleteYourProjectWidget.alignCardBlocks($card.closest(completeWidget));
-        Wick.BloomreachWidget.reapplyVatDisplay();
-    },
-
-    replaceCardWithBaseProduct($dropdown, options = {}) {
-        const {
-            completeCard,
-            recommendationIndexAttr,
-            dropdownRoot,
-            dropdownErrorClass,
-            cardCheckbox,
-        } = CompleteYourProjectWidget.el;
-
-        const $card = $dropdown.closest(completeCard);
-        const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
-
-        if (!recommendation || !recommendation.baseProduct) {
-            return null;
-        }
-
-        const productData = CompleteYourProjectWidget.getProductRenderData(
-            recommendation.baseProduct,
-            recommendationIndex,
-            {
-                dropdownError: options.dropdownError || false,
-                checked: false,
-            }
-        );
-
-        const newCardHtml = completeCardTemplate(productData);
-        const $newCard = $(newCardHtml);
-
-        $newCard.attr(recommendationIndexAttr, recommendationIndex);
-
-        if (options.dropdownError) {
-            $newCard.find(dropdownRoot).addClass(dropdownErrorClass);
-        }
-
-        $card.replaceWith($newCard);
-
-        $newCard.find(cardCheckbox).prop('checked', false);
-
-        $newCard
-            .find(CompleteYourProjectWidget.el.quantityInput)
-            .val(1)
-            .data(CompleteYourProjectWidget.el.previousQuantityData, 1)
-            .removeData(CompleteYourProjectWidget.el.quantityReadyData)
-            .removeData(CompleteYourProjectWidget.el.countStepperInitializedData);
-
-        CompleteYourProjectWidget.reinitCard($newCard);
-
-        return $newCard;
-    },
-
-    replaceCardWithVariant($dropdown, selectedValue) {
-        const {
-            completeCard,
-            recommendationIndexAttr,
-            selectedClass,
-            dropdownRoot,
-            selectedValueData,
-            cardCheckbox,
-        } = CompleteYourProjectWidget.el;
-
-        const $card = $dropdown.closest(completeCard);
-        const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
-
-        if (!recommendation) {
-            return null;
-        }
-
-        const variantProduct = CompleteYourProjectWidget.findVariantProduct(
-            recommendation,
-            selectedValue
-        );
-
-        if (!variantProduct) {
-            return null;
-        }
-
-        const productData = CompleteYourProjectWidget.getProductRenderData(
-            {
-                ...variantProduct,
-                variantOptions: recommendation.baseProduct.variantOptions,
-            },
-            recommendationIndex,
-            {
-                fallbackProduct: recommendation.baseProduct,
-                checked: true,
-                selectedDropdownValue: selectedValue,
-            }
-        );
-
-        const newCardHtml = completeCardTemplate(productData);
-        const $newCard = $(newCardHtml);
-
-        $newCard.attr(recommendationIndexAttr, recommendationIndex);
-        $newCard.addClass(selectedClass);
-
-        const $newDropdown = $newCard.find(dropdownRoot);
-
-        if ($newDropdown.length) {
-            $newDropdown.data(selectedValueData, selectedValue);
-        }
-
-        $card.replaceWith($newCard);
-
-        $newCard.find(cardCheckbox).prop('checked', true);
-
-        $newCard
-            .find(CompleteYourProjectWidget.el.quantityInput)
-            .val(1)
-            .data(CompleteYourProjectWidget.el.previousQuantityData, 1)
-            .removeData(CompleteYourProjectWidget.el.quantityReadyData)
-            .removeData(CompleteYourProjectWidget.el.countStepperInitializedData);
-
-        CompleteYourProjectWidget.reinitCard($newCard);
-
-        return $newCard;
-    },
-
-    handleDropdownSelect($dropdown, selectedValue) {
-        const $card = $dropdown.closest(CompleteYourProjectWidget.el.completeCard);
-        const recommendationIndex = $card.attr(
-            CompleteYourProjectWidget.el.recommendationIndexAttr
-        );
-        const currentValue = CompleteYourProjectWidget.dropdownCurrent[recommendationIndex];
-
-        if (`${currentValue}` === `${selectedValue}`) {
-            return;
-        }
-
-        CompleteYourProjectWidget.dropdownCurrent[recommendationIndex] = selectedValue;
-
-        const $completeWidget = $dropdown.closest(CompleteYourProjectWidget.el.completeWidget);
-        const isPlaceholder = !selectedValue;
-
-        if (isPlaceholder) {
-            CompleteYourProjectWidget.setDropdownError($dropdown, true);
-            CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, false, false);
-            CompleteYourProjectWidget.replaceCardWithBaseProduct($dropdown, {
-                dropdownError: true,
-            });
-
-            if ($completeWidget.length) {
-                CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
-            }
-
-            return;
-        }
-
-        CompleteYourProjectWidget.setDropdownError($dropdown, false);
-        CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, true, false);
-        CompleteYourProjectWidget.replaceCardWithVariant($dropdown, selectedValue);
-
-        if ($completeWidget.length) {
-            CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
-        }
-    },
-
-    bindDropdowns() {
-        const {
-            dropdownRoot,
-            dropdownToggle,
-            dropdownValue,
-            dropdownOption,
-            dropdownOpenClass,
-            dropdownOptionSelectedClass,
-        } = CompleteYourProjectWidget.el;
-
-        CompleteYourProjectWidget.dropdown = createDropdown({
-            root: dropdownRoot,
-            toggle: dropdownToggle,
-            value: dropdownValue,
-            option: dropdownOption,
-            openClass: dropdownOpenClass,
-            selectedClass: dropdownOptionSelectedClass,
-            namespace: 'bloomreachDropdown',
-            onSelect($dropdown, $option, selectedValue) {
-                CompleteYourProjectWidget.handleDropdownSelect($dropdown, selectedValue);
-            },
-        });
-
-        CompleteYourProjectWidget.dropdown.bind();
-    },
-
-    bindCardSelection($root) {
-        const { completeCard, cardCheckbox, selectedClass } = CompleteYourProjectWidget.el;
-
-        const $firstCard = $root.find(completeCard).first();
-
-        $firstCard.find(cardCheckbox).prop('checked', true);
-        $firstCard.addClass(selectedClass);
-
-        $root.off('change.bloomreachCardSelection', cardCheckbox);
-        $root.on('change.bloomreachCardSelection', cardCheckbox, function () {
-            const $checkbox = $(this);
-            const $card = $checkbox.closest(completeCard);
-            const $dropdown = $card.find(CompleteYourProjectWidget.el.dropdownRoot);
-
-            if (
-                !$checkbox.prop('checked') &&
-                $dropdown.hasClass(CompleteYourProjectWidget.el.dropdownErrorClass)
-            ) {
-                $card.removeClass(selectedClass);
-                return;
-            }
-
-            if (
-                $checkbox.prop('checked') &&
-                !CompleteYourProjectWidget.validateCardDropdown($card, {
-                    uncheck: true,
-                })
-            ) {
-                $checkbox.prop('checked', false);
-                $card.removeClass(selectedClass);
-                return;
-            }
-
-            $card.toggleClass(selectedClass, this.checked);
-
-            CompleteYourProjectWidget.dispatchCalculateTotal($root);
-        });
-    },
-
-    bindDropdownValidation($root) {
-        const { cardCheckbox, completeCard } = CompleteYourProjectWidget.el;
-
-        $root.off('click.bloomreachDropdownValidation', cardCheckbox);
-        $root.on('click.bloomreachDropdownValidation', cardCheckbox, function () {
-            const $checkbox = $(this);
-            const $card = $checkbox.closest(completeCard);
-
-            if (
-                $checkbox.prop('checked') &&
-                !CompleteYourProjectWidget.validateCardDropdown($card, {
-                    uncheck: true,
-                })
-            ) {
-                $checkbox.prop('checked', false);
-                $card.removeClass(CompleteYourProjectWidget.el.selectedClass);
-            }
-        });
-    },
-
-    bindVatToggle() {
-        if (Wick.BloomreachWidget.bindVatToggle) {
-            Wick.BloomreachWidget.bindVatToggle('completeYourProjectVatToggle');
-        }
-    },
-
-    bindAddToCart($root) {
-        const { ctaButton } = CompleteYourProjectWidget.el;
-
-        $root.off('click.bloomreachAddToCart', ctaButton);
-        $root.on('click.bloomreachAddToCart', ctaButton, function (event) {
-            event.preventDefault();
-
-            const $button = $(this);
-
-            if (
-                $button.prop('disabled') ||
-                CompleteYourProjectWidget.loadingButton.isLoading($button)
-            ) {
-                return;
-            }
-
-            const trackingItems = CompleteYourProjectWidget.getSelectedTrackingItems($root);
-
-            if (trackingItems.length) {
-                CompleteYourProjectWidget.tracking.trackAddToCart(trackingItems);
-            }
-
-            CompleteYourProjectWidget.dispatchAddToCart($root, $button);
-        });
-    },
-
-    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');
-        }
-    },
-
-    alignCardBlocks($root) {
-        const { titleEl, optionsEl } = CompleteYourProjectWidget.el;
-
-        CompleteYourProjectWidget.alignBlock(titleEl, $root);
-        CompleteYourProjectWidget.alignBlock(optionsEl, $root);
-    },
-
-    setInitialSummary($root) {
-        const entries = CompleteYourProjectWidget.getSelectedEntries($root);
-        const firstEntry = entries[0];
-
-        if (!firstEntry || !firstEntry.product) {
-            return;
-        }
-
-        const product = firstEntry.product;
-        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
-        const priceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
-        const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
-
-        CompleteYourProjectWidget.updateSummary($root, {
-            totalPrice: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice) || '£0.00',
-            totalWasPrice: wasPriceFormatted || null,
-            totalPriceExclusiveVat: Wick.BloomreachWidget.getPriceFormattedValue(priceExcVat),
-            totalWasPriceExclusiveVat: Wick.BloomreachWidget.getExcVatWasPrice(product) || null,
-        });
-    },
-
-    initQuantityField($root, inputSel) {
-        const stepper = createCountStepper({
-            inputSel,
-            min: 1,
-            onChange(qty, inputEl) {
-                const $input = $(inputEl);
-                const $card = $input.closest(CompleteYourProjectWidget.el.completeCard);
-                const $completeWidget = $input.closest(CompleteYourProjectWidget.el.completeWidget);
-                const $checkbox = $card.find(CompleteYourProjectWidget.el.cardCheckbox);
-                const previousQuantity =
-                    $input.data(CompleteYourProjectWidget.el.previousQuantityData) || 1;
-
-                if (!$input.data(CompleteYourProjectWidget.el.quantityReadyData)) {
-                    $input.data(CompleteYourProjectWidget.el.previousQuantityData, qty || 1);
-                    return;
-                }
-
-                if (!CompleteYourProjectWidget.validateCardDropdown($card)) {
-                    $input.val(previousQuantity);
-
-                    const $minus = $card.find('.count-btn--minus');
-
-                    if (previousQuantity <= 1) {
-                        $minus.prop('disabled', true);
-                    }
-
-                    return;
-                }
-
-                $checkbox.prop('checked', true);
-                $card.addClass(CompleteYourProjectWidget.el.selectedClass);
-
-                $input.data(CompleteYourProjectWidget.el.previousQuantityData, qty);
-                $input.trigger('change');
-
-                if ($completeWidget.length) {
-                    CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
-                }
-            },
-        });
-
-        stepper.init($root);
-
-        $root.find(inputSel).data(CompleteYourProjectWidget.el.quantityReadyData, true);
-
-        CompleteYourProjectWidget.steppers.push(stepper);
-    },
-
-    initQuantityFields($root) {
-        const {
-            quantityInput,
-            countStepperInitializedData,
-            countStepperRoot,
-            previousQuantityData,
-        } = CompleteYourProjectWidget.el;
-
-        $root.find(quantityInput).each(function () {
-            const $input = $(this);
-
-            if ($input.data(countStepperInitializedData)) {
-                return;
-            }
-
-            const inputId = $input.attr('id');
-
-            if (!inputId) {
-                return;
-            }
-
-            $input.data(countStepperInitializedData, true);
-            $input.data(previousQuantityData, parseInt($input.val(), 10) || 1);
-
-            CompleteYourProjectWidget.initQuantityField(
-                $input.closest(countStepperRoot),
-                `#${inputId}`
-            );
-        });
-    },
-
-    resetWidgetState($root) {
-        $root.find(CompleteYourProjectWidget.el.cardCheckbox).prop('checked', false);
-
-        $root
-            .find(CompleteYourProjectWidget.el.completeCard)
-            .removeClass(CompleteYourProjectWidget.el.selectedClass);
-
-        $root
-            .find(CompleteYourProjectWidget.el.quantityInput)
-            .val(1)
-            .data(CompleteYourProjectWidget.el.previousQuantityData, 1);
-    },
-
-    resetBackForwardState() {
-        $(CompleteYourProjectWidget.el.completeWidget).each(function () {
-            const $widget = $(this);
-
-            CompleteYourProjectWidget.resetWidgetState($widget);
-            CompleteYourProjectWidget.bindCardSelection($widget);
-        });
-    },
-
-    initRenderedWidget($container) {
-        if (!CompleteYourProjectWidget.toast) {
-            CompleteYourProjectWidget.toast = createToast({
-                template: notificationTemplate,
-            });
-        }
-        if (!CompleteYourProjectWidget.loadingButton) {
-            CompleteYourProjectWidget.loadingButton = createLoadingButton();
-        }
-        const $completeWidget = $container.find(CompleteYourProjectWidget.el.completeWidget);
-
-        if (!$completeWidget.length) {
-            return;
-        }
-
-        Wick.BloomreachWidget.drawRating($completeWidget);
-        CompleteYourProjectWidget.bindCardSelection($completeWidget);
-        CompleteYourProjectWidget.bindDropdowns();
-        CompleteYourProjectWidget.bindDropdownValidation($completeWidget);
-        CompleteYourProjectWidget.bindAddToCart($completeWidget);
-        CompleteYourProjectWidget.bindProductTracking($completeWidget);
-        CompleteYourProjectWidget.bindVatToggle();
-        CompleteYourProjectWidget.initQuantityFields($completeWidget);
-
-        $completeWidget
-            .find(CompleteYourProjectWidget.el.dropdownRoot)
-            .removeClass(CompleteYourProjectWidget.el.dropdownErrorClass);
-
-        CompleteYourProjectWidget.alignCardBlocks($completeWidget);
-        CompleteYourProjectWidget.updateCta($completeWidget);
-        CompleteYourProjectWidget.setInitialSummary($completeWidget);
-        Wick.BloomreachWidget.reapplyVatDisplay();
-    },
-
-    init(payloadData) {
-        const $containers = $(CompleteYourProjectWidget.el.widgetContainer);
-
-        CompleteYourProjectWidget.tracking.setPayload(payloadData);
-
-        if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
-            $containers.find(CompleteYourProjectWidget.el.completeWidget).hide();
-            return;
-        }
-
-        CompleteYourProjectWidget.renderWidgetFromPayload(payloadData);
-
-        CompleteYourProjectWidget.tracking.observeView([
-            $containers.find(CompleteYourProjectWidget.el.titleEl).get(0),
-            $containers.find(CompleteYourProjectWidget.el.ctaButton).get(0),
-        ]);
-    },
-};
-
-$(document).ready(function () {
-    Wick.Responsive.onResize(function () {
-        $(CompleteYourProjectWidget.el.widgetContainer).each(function () {
-            const $completeWidget = $(this).find(CompleteYourProjectWidget.el.completeWidget);
-
-            if ($completeWidget.length) {
-                CompleteYourProjectWidget.alignCardBlocks($completeWidget);
-            }
-        });
-    });
-});
-
-window.addEventListener('pagehide', function () {
-    CompleteYourProjectWidget.resetBackForwardState();
-});
-
-export default CompleteYourProjectWidget;