wickes-css2 2.111.0-why-not-add-refactor-fix.2 → 2.111.0

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

@@ -1,29 +1,29 @@
 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 { createCountStepper } from './utils/create-count-stepper';
+import { createEvent } from './utils/create-event';
+import { createDropdown } from './utils/custom-dropdown';
+import { createLoadingButton } from './utils/create-loading-button';
+import { createToast } from './utils/create-toast';
 
 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('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')
+    require('../../components/bloomreach/complete-card-dropdown.hbs')
 );
-Handlebars.registerPartial('notifications', require('../../../elements/notifications.hbs'));
-Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
+Handlebars.registerPartial('notifications', require('../../elements/notifications.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 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 = {
+Wick.BloomreachWidget = {
     CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT: 'calculateProductBundleTotal',
     ADD_PRODUCT_BUNDLE_TO_CART_EVENT: 'bulkAddToCart',
 
@@ -43,8 +43,14 @@ const CompleteYourProjectWidget = {
         countStepperInitializedData: 'count-stepper-initialized',
         countStepperRoot: '.count-stepper',
         ctaButton: '.complete-widget__cta .btn',
+        ctaButtonText: '.loading-button__text',
+        ctaButtonLoader: '.loading-button__loader',
         summaryPriceValue: '.complete-widget__price-value',
         summarySalePrice: '.complete-widget__sale-price',
+        summaryPriceInc: '.including-vat-inherit',
+        summaryPriceExc: '.excluding-vat-inherit',
+        summarySalePriceInc: '.including-vat-inherit',
+        summarySalePriceExc: '.excluding-vat-inherit',
 
         dropdownErrorClass: 'complete-card-dropdown--error',
         dropdownOpenClass: 'complete-card-dropdown--open',
@@ -62,6 +68,8 @@ const CompleteYourProjectWidget = {
         recommendationIndexAttr: 'data-recommendation-index',
         selectedClass: 'complete-card--selected',
         selectedValueData: 'selected-value',
+        starOverlay: '.star-overlay',
+
         titleEl: '.complete-card__title',
 
         widgetContainer: '[data-complete-widget]',
@@ -86,7 +94,8 @@ const CompleteYourProjectWidget = {
     },
 
     setCtaText($button, text) {
-        const $text = $button.find(Wick.BloomreachWidget.el.loadingButtonText);
+        const { ctaButtonText } = Wick.BloomreachWidget.el;
+        const $text = $button.find(ctaButtonText);
 
         if ($text.length) {
             $text.text(text);
@@ -97,7 +106,61 @@ const CompleteYourProjectWidget = {
     },
 
     getBadgeColor(color) {
-        return CompleteYourProjectWidget.badgeColorMap[color] || color;
+        return Wick.BloomreachWidget.badgeColorMap[color] || color;
+    },
+
+    hasRecommendations(payloadData) {
+        if (Array.isArray(payloadData)) {
+            return payloadData.length > 0;
+        }
+
+        return Boolean(
+            payloadData &&
+            Array.isArray(payloadData.recommendedProducts) &&
+            payloadData.recommendedProducts.length
+        );
+    },
+
+    normalizePayload(payloadData) {
+        if (Array.isArray(payloadData)) {
+            return payloadData;
+        }
+
+        if (payloadData && Array.isArray(payloadData.recommendedProducts)) {
+            return payloadData.recommendedProducts;
+        }
+
+        return [];
+    },
+
+    getDisplayPrice(product) {
+        return product.displayPrice || product.price || {};
+    },
+
+    dispatchWidgetEvent(eventName, payload) {
+        return new Promise(function (resolve, reject) {
+            const eventDetail = { resolve, reject };
+            const event = createEvent(eventName, payload, eventDetail);
+
+            window.dispatchEvent(event);
+        });
+    },
+
+    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] ||
+            {}
+        );
     },
 
     getDropdownOptions(product) {
@@ -136,7 +199,7 @@ const CompleteYourProjectWidget = {
             return;
         }
 
-        CompleteYourProjectWidget.toast.show({
+        Wick.BloomreachWidget.toast.show({
             type: bulkData.messageType,
             text: bulkData.messageText,
         });
@@ -149,10 +212,10 @@ const CompleteYourProjectWidget = {
         if (promotionAttributes && promotionAttributes.overlayText) {
             return {
                 text: promotionAttributes.overlayText,
-                textColor: CompleteYourProjectWidget.getBadgeColor(
+                textColor: Wick.BloomreachWidget.getBadgeColor(
                     promotionAttributes.overlayTextColor
                 ),
-                color: CompleteYourProjectWidget.getBadgeColor(
+                color: Wick.BloomreachWidget.getBadgeColor(
                     promotionAttributes.overlayBackgroundColor
                 ),
             };
@@ -161,6 +224,70 @@ const CompleteYourProjectWidget = {
         return product.badge;
     },
 
+    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 '';
+    },
+
+    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 '';
+    },
+
+    getExcVatWasPrice(product) {
+        const displayPriceExclusiveVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
+        const wasPrice = displayPriceExclusiveVat && displayPriceExclusiveVat.wasPrice;
+
+        if (wasPrice && wasPrice.formattedValue) {
+            return wasPrice.formattedValue;
+        }
+
+        if (typeof wasPrice === 'number') {
+            return Wick.BloomreachWidget.formatPrice(wasPrice);
+        }
+
+        return wasPrice || '';
+    },
+
     getExcVatFormattedValue(displayPrice, product) {
         const excVat = product ? Wick.BloomreachWidget.getDisplayPriceExcVat(product) : null;
         if (excVat && excVat.formattedValue) {
@@ -176,10 +303,10 @@ const CompleteYourProjectWidget = {
     getProductRenderData(product, index, options = {}) {
         const shouldShowDropdown = index !== 0;
         const dropdownOptions = shouldShowDropdown
-            ? CompleteYourProjectWidget.getDropdownOptions(product)
+            ? Wick.BloomreachWidget.getDropdownOptions(product)
             : [];
         const selectedDropdownValue = options.selectedDropdownValue || '';
-        const selectedDropdownLabel = CompleteYourProjectWidget.getSelectedDropdownLabel(
+        const selectedDropdownLabel = Wick.BloomreachWidget.getSelectedDropdownLabel(
             dropdownOptions,
             selectedDropdownValue
         );
@@ -192,17 +319,19 @@ const CompleteYourProjectWidget = {
         );
 
         const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
-        const excVatFormattedValue = CompleteYourProjectWidget.getExcVatFormattedValue(
+        const excVatFormattedValue = Wick.BloomreachWidget.getExcVatFormattedValue(
             displayPrice,
             product
         );
         const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
 
-        const excVatWasPriceFormatted = Wick.BloomreachWidget.getExcVatWasPrice(product);
+        const excVatWasPriceFormatted = wasPriceFormatted
+            ? Wick.BloomreachWidget.getExcVatWasPrice(product)
+            : '';
 
         return {
             ...product,
-            badge: CompleteYourProjectWidget.getBadge(product),
+            badge: Wick.BloomreachWidget.getBadge(product),
             price: displayPrice,
             wasPriceFormatted,
             'switch-vat': isSwitchVat,
@@ -213,11 +342,7 @@ const CompleteYourProjectWidget = {
                 Wick.BloomreachWidget.getDisplayPriceExcVat(product)
             ),
             incVatWasPriceFormatted: wasPriceFormatted,
-            wasPriceIncVatFormattedValue: wasPriceFormatted,
-            incVatWasPriceFormattedValue: wasPriceFormatted,
             excVatWasPriceFormatted,
-            wasPriceExcVatFormattedValue: excVatWasPriceFormatted,
-            excVatWasPriceFormattedValue: excVatWasPriceFormatted,
             showFromPrice,
             image:
                 options.image ||
@@ -238,7 +363,7 @@ const CompleteYourProjectWidget = {
 
     renderWidget($container, context) {
         const { widgetContent, widgetWrapper, completeCard, recommendationIndexAttr } =
-            CompleteYourProjectWidget.el;
+            Wick.BloomreachWidget.el;
 
         const $content = $container.find(widgetContent);
         const recommendations = Wick.BloomreachWidget.normalizePayload(context);
@@ -247,16 +372,16 @@ const CompleteYourProjectWidget = {
             return;
         }
 
-        CompleteYourProjectWidget.recommendations = recommendations;
+        Wick.BloomreachWidget.recommendations = recommendations;
 
         $content.html(completeWrapperTemplate());
 
         const $wrapper = $content.find(widgetWrapper);
 
-        CompleteYourProjectWidget.dropdownCurrent = {};
+        Wick.BloomreachWidget.dropdownCurrent = {};
 
         recommendations.forEach(function (recommendation, index) {
-            const product = CompleteYourProjectWidget.getProductRenderData(
+            const product = Wick.BloomreachWidget.getProductRenderData(
                 recommendation.baseProduct,
                 index
             );
@@ -277,7 +402,7 @@ const CompleteYourProjectWidget = {
     },
 
     renderWidgetFromPayload(payloadData) {
-        const { widgetContainer, completeWidget } = CompleteYourProjectWidget.el;
+        const { widgetContainer, completeWidget } = Wick.BloomreachWidget.el;
         const $containers = $(widgetContainer);
 
         if (!$containers.length) {
@@ -292,23 +417,46 @@ const CompleteYourProjectWidget = {
         $containers.each(function () {
             const $container = $(this);
 
-            CompleteYourProjectWidget.renderWidget($container, payloadData);
-            CompleteYourProjectWidget.initRenderedWidget($container);
+            Wick.BloomreachWidget.renderWidget($container, payloadData);
+            Wick.BloomreachWidget.initRenderedWidget($container);
+        });
+    },
+
+    drawRating($root) {
+        const $ratingOverlay = $root.find('.rating-overlay');
+
+        $ratingOverlay.each(function () {
+            let rating = parseFloat($(this).attr('data-rating')) || 0;
+            const $stars = $(this).children(Wick.BloomreachWidget.el.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');
+                }
+            });
         });
     },
 
     getDropdownCard($dropdown) {
-        return $dropdown.closest(CompleteYourProjectWidget.el.completeCard);
+        return $dropdown.closest(Wick.BloomreachWidget.el.completeCard);
     },
 
     getDropdownCheckbox($dropdown) {
-        return CompleteYourProjectWidget.getDropdownCard($dropdown).find(
-            CompleteYourProjectWidget.el.cardCheckbox
+        return Wick.BloomreachWidget.getDropdownCard($dropdown).find(
+            Wick.BloomreachWidget.el.cardCheckbox
         );
     },
 
     setDropdownCheckboxState($dropdown, isChecked, shouldTriggerChange = true) {
-        const $checkbox = CompleteYourProjectWidget.getDropdownCheckbox($dropdown);
+        const $checkbox = Wick.BloomreachWidget.getDropdownCheckbox($dropdown);
 
         if (!$checkbox.length) {
             return;
@@ -322,18 +470,18 @@ const CompleteYourProjectWidget = {
     },
 
     setDropdownError($dropdown, hasError) {
-        $dropdown.toggleClass(CompleteYourProjectWidget.el.dropdownErrorClass, hasError);
+        $dropdown.toggleClass(Wick.BloomreachWidget.el.dropdownErrorClass, hasError);
     },
 
     validateDropdown($dropdown, options = {}) {
-        const isValid = Boolean($dropdown.data(CompleteYourProjectWidget.el.selectedValueData));
+        const isValid = Boolean($dropdown.data(Wick.BloomreachWidget.el.selectedValueData));
 
-        CompleteYourProjectWidget.setDropdownError($dropdown, !isValid);
+        Wick.BloomreachWidget.setDropdownError($dropdown, !isValid);
 
         if (!isValid && options.uncheck) {
-            CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, false, false);
-            CompleteYourProjectWidget.getDropdownCard($dropdown).removeClass(
-                CompleteYourProjectWidget.el.selectedClass
+            Wick.BloomreachWidget.setDropdownCheckboxState($dropdown, false, false);
+            Wick.BloomreachWidget.getDropdownCard($dropdown).removeClass(
+                Wick.BloomreachWidget.el.selectedClass
             );
         }
 
@@ -341,13 +489,13 @@ const CompleteYourProjectWidget = {
     },
 
     validateCardDropdown($card, options = {}) {
-        const $dropdown = $card.find(CompleteYourProjectWidget.el.dropdownRoot);
+        const $dropdown = $card.find(Wick.BloomreachWidget.el.dropdownRoot);
 
         if (!$dropdown.length) {
             return true;
         }
 
-        return CompleteYourProjectWidget.validateDropdown($dropdown, options);
+        return Wick.BloomreachWidget.validateDropdown($dropdown, options);
     },
 
     findVariantProduct(recommendation, selectedValue) {
@@ -361,7 +509,7 @@ const CompleteYourProjectWidget = {
     },
 
     getCardQuantity($card) {
-        const $input = $card.find(CompleteYourProjectWidget.el.quantityInput);
+        const $input = $card.find(Wick.BloomreachWidget.el.quantityInput);
         const quantity = parseInt($input.val(), 10);
 
         return Number.isNaN(quantity) ? 1 : quantity;
@@ -369,10 +517,10 @@ const CompleteYourProjectWidget = {
 
     getCardProduct($card) {
         const { recommendationIndexAttr, dropdownRoot, selectedValueData } =
-            CompleteYourProjectWidget.el;
+            Wick.BloomreachWidget.el;
 
         const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+        const recommendation = Wick.BloomreachWidget.recommendations[recommendationIndex];
 
         if (!recommendation) {
             return null;
@@ -383,7 +531,7 @@ const CompleteYourProjectWidget = {
 
         if (selectedValue) {
             return (
-                CompleteYourProjectWidget.findVariantProduct(recommendation, selectedValue) ||
+                Wick.BloomreachWidget.findVariantProduct(recommendation, selectedValue) ||
                 recommendation.baseProduct
             );
         }
@@ -392,7 +540,7 @@ const CompleteYourProjectWidget = {
     },
 
     getSelectedEntries($root) {
-        const { completeCard, cardCheckbox } = CompleteYourProjectWidget.el;
+        const { completeCard, cardCheckbox } = Wick.BloomreachWidget.el;
         const entries = [];
 
         $root.find(completeCard).each(function () {
@@ -403,7 +551,7 @@ const CompleteYourProjectWidget = {
                 return;
             }
 
-            const product = CompleteYourProjectWidget.getCardProduct($card);
+            const product = Wick.BloomreachWidget.getCardProduct($card);
 
             if (!product) {
                 return;
@@ -411,7 +559,7 @@ const CompleteYourProjectWidget = {
 
             entries.push({
                 product,
-                quantity: CompleteYourProjectWidget.getCardQuantity($card),
+                quantity: Wick.BloomreachWidget.getCardQuantity($card),
             });
         });
 
@@ -419,7 +567,7 @@ const CompleteYourProjectWidget = {
     },
 
     getAddToCartEntries($root) {
-        return CompleteYourProjectWidget.getSelectedEntries($root).map(function (entry) {
+        return Wick.BloomreachWidget.getSelectedEntries($root).map(function (entry) {
             return {
                 productCode: entry.product.code,
                 quantity: entry.quantity,
@@ -433,10 +581,16 @@ const CompleteYourProjectWidget = {
         const totalWasPriceExclusiveVat =
             response.totalWasPriceExclusiveVat || response.totalExcVatWasPrice;
 
-        const { summaryPriceValue, summarySalePrice } = CompleteYourProjectWidget.el;
-        const { vatInc, vatExc } = Wick.BloomreachWidget.el;
+        const {
+            summaryPriceValue,
+            summarySalePrice,
+            summaryPriceInc,
+            summaryPriceExc,
+            summarySalePriceInc,
+            summarySalePriceExc,
+        } = Wick.BloomreachWidget.el;
 
-        CompleteYourProjectWidget.lastCalculationResponse = response;
+        Wick.BloomreachWidget.lastCalculationResponse = response;
 
         const $price = $root.find(summaryPriceValue);
         const $salePrice = $root.find(summarySalePrice);
@@ -448,43 +602,46 @@ const CompleteYourProjectWidget = {
 
         if (response.totalWasPrice) {
             $total.addClass('complete-widget__total-sale');
-            const $priceInc = $price.find(vatInc);
+            const $priceInc = $price.find(summaryPriceInc);
 
             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 || '');
+                $price
+                    .find(summaryPriceExc)
+                    .text(totalWasPriceExclusiveVat || response.totalWasPrice);
+
+                $salePrice.find(summarySalePriceInc).text(response.totalPrice || '');
+                $salePrice
+                    .find(summarySalePriceExc)
+                    .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);
+        const $priceInc = $price.find(summaryPriceInc);
         if ($priceInc.length) {
             $priceInc.text(response.totalPrice || '£0.00');
-            $price.find(vatExc).text(totalPriceExclusiveVat || response.totalPrice || '£0.00');
+            $price
+                .find(summaryPriceExc)
+                .text(totalPriceExclusiveVat || response.totalPrice || '£0.00');
 
-            $salePrice.find(vatInc).text('');
-            $salePrice.find(vatExc).text('');
+            $salePrice.find(summarySalePriceInc).text('');
+            $salePrice.find(summarySalePriceExc).text('');
             $salePrice.hide();
         } else {
             $price.text(response.totalPrice || '£0.00');
             $salePrice.text('').hide();
         }
-
-        Wick.BloomreachWidget.reapplyVatDisplay();
     },
 
     updateCta($root) {
-        const { ctaButton, cardCheckbox } = CompleteYourProjectWidget.el;
+        const { ctaButton, cardCheckbox } = Wick.BloomreachWidget.el;
         const selectedCount = $root.find(cardCheckbox).filter(':checked').length;
         const $cta = $root.find(ctaButton);
 
@@ -493,43 +650,44 @@ const CompleteYourProjectWidget = {
         }
 
         $cta.prop('disabled', !selectedCount);
-        CompleteYourProjectWidget.setCtaText(
-            $cta,
-            CompleteYourProjectWidget.getCtaText(selectedCount)
-        );
+        Wick.BloomreachWidget.setCtaText($cta, Wick.BloomreachWidget.getCtaText(selectedCount));
     },
 
     dispatchCalculateTotal($root) {
-        CompleteYourProjectWidget.updateCta($root);
+        Wick.BloomreachWidget.updateCta($root);
 
         return Wick.BloomreachWidget.dispatchWidgetEvent(
-            CompleteYourProjectWidget.CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT,
+            Wick.BloomreachWidget.CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT,
             {
-                entries: CompleteYourProjectWidget.getSelectedEntries($root),
+                entries: Wick.BloomreachWidget.getSelectedEntries($root),
             }
         ).then(function (response) {
-            CompleteYourProjectWidget.updateSummary($root, response);
+            Wick.BloomreachWidget.updateSummary($root, response);
         });
     },
 
     dispatchAddToCart($root, $button) {
-        CompleteYourProjectWidget.loadingButton.start($button);
+        Wick.BloomreachWidget.loadingButton.start($button);
+
+        return new Promise(function (resolve, reject) {
+            const eventDetail = { resolve, reject };
+            const event = createEvent(
+                Wick.BloomreachWidget.ADD_PRODUCT_BUNDLE_TO_CART_EVENT,
+                {
+                    entries: Wick.BloomreachWidget.getAddToCartEntries($root),
+                },
+                eventDetail
+            );
 
-        return Wick.BloomreachWidget.dispatchWidgetEvent(
-            CompleteYourProjectWidget.ADD_PRODUCT_BUNDLE_TO_CART_EVENT,
-            {
-                entries: CompleteYourProjectWidget.getAddToCartEntries($root),
-            }
-        )
+            window.dispatchEvent(event);
+        })
             .then(function (response) {
-                CompleteYourProjectWidget.handleBulkAddToCartResponse(response);
+                Wick.BloomreachWidget.handleBulkAddToCartResponse(response);
 
-                if (Wick.MiniBasketSliderFE) {
-                    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-                }
+                Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
             })
             .catch(function () {
-                CompleteYourProjectWidget.handleBulkAddToCartResponse({
+                Wick.BloomreachWidget.handleBulkAddToCartResponse({
                     bulkAddToCartData: {
                         messageType: 'error',
                         messageText: 'Selected product(s) were not added to basket',
@@ -537,20 +695,19 @@ const CompleteYourProjectWidget = {
                 });
             })
             .finally(function () {
-                CompleteYourProjectWidget.loadingButton.stop($button);
-                CompleteYourProjectWidget.updateCta($root);
+                Wick.BloomreachWidget.loadingButton.stop($button);
+                Wick.BloomreachWidget.updateCta($root);
             });
     },
 
     reinitCard($card) {
-        const { countBtn, completeWidget } = CompleteYourProjectWidget.el;
+        const { countBtn, completeWidget } = Wick.BloomreachWidget.el;
 
         $card.find(countBtn).remove();
 
-        CompleteYourProjectWidget.initQuantityFields($card);
+        Wick.BloomreachWidget.initQuantityFields($card);
         Wick.BloomreachWidget.drawRating($card);
-        CompleteYourProjectWidget.alignCardBlocks($card.closest(completeWidget));
-        Wick.BloomreachWidget.reapplyVatDisplay();
+        Wick.BloomreachWidget.alignCardBlocks($card.closest(completeWidget));
     },
 
     replaceCardWithBaseProduct($dropdown, options = {}) {
@@ -560,17 +717,17 @@ const CompleteYourProjectWidget = {
             dropdownRoot,
             dropdownErrorClass,
             cardCheckbox,
-        } = CompleteYourProjectWidget.el;
+        } = Wick.BloomreachWidget.el;
 
         const $card = $dropdown.closest(completeCard);
         const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+        const recommendation = Wick.BloomreachWidget.recommendations[recommendationIndex];
 
         if (!recommendation || !recommendation.baseProduct) {
             return null;
         }
 
-        const productData = CompleteYourProjectWidget.getProductRenderData(
+        const productData = Wick.BloomreachWidget.getProductRenderData(
             recommendation.baseProduct,
             recommendationIndex,
             {
@@ -593,13 +750,13 @@ const CompleteYourProjectWidget = {
         $newCard.find(cardCheckbox).prop('checked', false);
 
         $newCard
-            .find(CompleteYourProjectWidget.el.quantityInput)
+            .find(Wick.BloomreachWidget.el.quantityInput)
             .val(1)
-            .data(CompleteYourProjectWidget.el.previousQuantityData, 1)
-            .removeData(CompleteYourProjectWidget.el.quantityReadyData)
-            .removeData(CompleteYourProjectWidget.el.countStepperInitializedData);
+            .data(Wick.BloomreachWidget.el.previousQuantityData, 1)
+            .removeData(Wick.BloomreachWidget.el.quantityReadyData)
+            .removeData(Wick.BloomreachWidget.el.countStepperInitializedData);
 
-        CompleteYourProjectWidget.reinitCard($newCard);
+        Wick.BloomreachWidget.reinitCard($newCard);
 
         return $newCard;
     },
@@ -612,17 +769,17 @@ const CompleteYourProjectWidget = {
             dropdownRoot,
             selectedValueData,
             cardCheckbox,
-        } = CompleteYourProjectWidget.el;
+        } = Wick.BloomreachWidget.el;
 
         const $card = $dropdown.closest(completeCard);
         const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+        const recommendation = Wick.BloomreachWidget.recommendations[recommendationIndex];
 
         if (!recommendation) {
             return null;
         }
 
-        const variantProduct = CompleteYourProjectWidget.findVariantProduct(
+        const variantProduct = Wick.BloomreachWidget.findVariantProduct(
             recommendation,
             selectedValue
         );
@@ -631,7 +788,7 @@ const CompleteYourProjectWidget = {
             return null;
         }
 
-        const productData = CompleteYourProjectWidget.getProductRenderData(
+        const productData = Wick.BloomreachWidget.getProductRenderData(
             {
                 ...variantProduct,
                 variantOptions: recommendation.baseProduct.variantOptions,
@@ -661,53 +818,51 @@ const CompleteYourProjectWidget = {
         $newCard.find(cardCheckbox).prop('checked', true);
 
         $newCard
-            .find(CompleteYourProjectWidget.el.quantityInput)
+            .find(Wick.BloomreachWidget.el.quantityInput)
             .val(1)
-            .data(CompleteYourProjectWidget.el.previousQuantityData, 1)
-            .removeData(CompleteYourProjectWidget.el.quantityReadyData)
-            .removeData(CompleteYourProjectWidget.el.countStepperInitializedData);
+            .data(Wick.BloomreachWidget.el.previousQuantityData, 1)
+            .removeData(Wick.BloomreachWidget.el.quantityReadyData)
+            .removeData(Wick.BloomreachWidget.el.countStepperInitializedData);
 
-        CompleteYourProjectWidget.reinitCard($newCard);
+        Wick.BloomreachWidget.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];
+        const $card = $dropdown.closest(Wick.BloomreachWidget.el.completeCard);
+        const recommendationIndex = $card.attr(Wick.BloomreachWidget.el.recommendationIndexAttr);
+        const currentValue = Wick.BloomreachWidget.dropdownCurrent[recommendationIndex];
 
         if (`${currentValue}` === `${selectedValue}`) {
             return;
         }
 
-        CompleteYourProjectWidget.dropdownCurrent[recommendationIndex] = selectedValue;
+        Wick.BloomreachWidget.dropdownCurrent[recommendationIndex] = selectedValue;
 
-        const $completeWidget = $dropdown.closest(CompleteYourProjectWidget.el.completeWidget);
+        const $completeWidget = $dropdown.closest(Wick.BloomreachWidget.el.completeWidget);
         const isPlaceholder = !selectedValue;
 
         if (isPlaceholder) {
-            CompleteYourProjectWidget.setDropdownError($dropdown, true);
-            CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, false, false);
-            CompleteYourProjectWidget.replaceCardWithBaseProduct($dropdown, {
+            Wick.BloomreachWidget.setDropdownError($dropdown, true);
+            Wick.BloomreachWidget.setDropdownCheckboxState($dropdown, false, false);
+            Wick.BloomreachWidget.replaceCardWithBaseProduct($dropdown, {
                 dropdownError: true,
             });
 
             if ($completeWidget.length) {
-                CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
+                Wick.BloomreachWidget.dispatchCalculateTotal($completeWidget);
             }
 
             return;
         }
 
-        CompleteYourProjectWidget.setDropdownError($dropdown, false);
-        CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, true, false);
-        CompleteYourProjectWidget.replaceCardWithVariant($dropdown, selectedValue);
+        Wick.BloomreachWidget.setDropdownError($dropdown, false);
+        Wick.BloomreachWidget.setDropdownCheckboxState($dropdown, true, false);
+        Wick.BloomreachWidget.replaceCardWithVariant($dropdown, selectedValue);
 
         if ($completeWidget.length) {
-            CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
+            Wick.BloomreachWidget.dispatchCalculateTotal($completeWidget);
         }
     },
 
@@ -719,9 +874,9 @@ const CompleteYourProjectWidget = {
             dropdownOption,
             dropdownOpenClass,
             dropdownOptionSelectedClass,
-        } = CompleteYourProjectWidget.el;
+        } = Wick.BloomreachWidget.el;
 
-        CompleteYourProjectWidget.dropdown = createDropdown({
+        Wick.BloomreachWidget.dropdown = createDropdown({
             root: dropdownRoot,
             toggle: dropdownToggle,
             value: dropdownValue,
@@ -730,15 +885,15 @@ const CompleteYourProjectWidget = {
             selectedClass: dropdownOptionSelectedClass,
             namespace: 'bloomreachDropdown',
             onSelect($dropdown, $option, selectedValue) {
-                CompleteYourProjectWidget.handleDropdownSelect($dropdown, selectedValue);
+                Wick.BloomreachWidget.handleDropdownSelect($dropdown, selectedValue);
             },
         });
 
-        CompleteYourProjectWidget.dropdown.bind();
+        Wick.BloomreachWidget.dropdown.bind();
     },
 
     bindCardSelection($root) {
-        const { completeCard, cardCheckbox, selectedClass } = CompleteYourProjectWidget.el;
+        const { completeCard, cardCheckbox, selectedClass } = Wick.BloomreachWidget.el;
 
         const $firstCard = $root.find(completeCard).first();
 
@@ -749,11 +904,11 @@ const CompleteYourProjectWidget = {
         $root.on('change.bloomreachCardSelection', cardCheckbox, function () {
             const $checkbox = $(this);
             const $card = $checkbox.closest(completeCard);
-            const $dropdown = $card.find(CompleteYourProjectWidget.el.dropdownRoot);
+            const $dropdown = $card.find(Wick.BloomreachWidget.el.dropdownRoot);
 
             if (
                 !$checkbox.prop('checked') &&
-                $dropdown.hasClass(CompleteYourProjectWidget.el.dropdownErrorClass)
+                $dropdown.hasClass(Wick.BloomreachWidget.el.dropdownErrorClass)
             ) {
                 $card.removeClass(selectedClass);
                 return;
@@ -761,7 +916,7 @@ const CompleteYourProjectWidget = {
 
             if (
                 $checkbox.prop('checked') &&
-                !CompleteYourProjectWidget.validateCardDropdown($card, {
+                !Wick.BloomreachWidget.validateCardDropdown($card, {
                     uncheck: true,
                 })
             ) {
@@ -772,12 +927,12 @@ const CompleteYourProjectWidget = {
 
             $card.toggleClass(selectedClass, this.checked);
 
-            CompleteYourProjectWidget.dispatchCalculateTotal($root);
+            Wick.BloomreachWidget.dispatchCalculateTotal($root);
         });
     },
 
     bindDropdownValidation($root) {
-        const { cardCheckbox, completeCard } = CompleteYourProjectWidget.el;
+        const { cardCheckbox, completeCard } = Wick.BloomreachWidget.el;
 
         $root.off('click.bloomreachDropdownValidation', cardCheckbox);
         $root.on('click.bloomreachDropdownValidation', cardCheckbox, function () {
@@ -786,24 +941,18 @@ const CompleteYourProjectWidget = {
 
             if (
                 $checkbox.prop('checked') &&
-                !CompleteYourProjectWidget.validateCardDropdown($card, {
+                !Wick.BloomreachWidget.validateCardDropdown($card, {
                     uncheck: true,
                 })
             ) {
                 $checkbox.prop('checked', false);
-                $card.removeClass(CompleteYourProjectWidget.el.selectedClass);
+                $card.removeClass(Wick.BloomreachWidget.el.selectedClass);
             }
         });
     },
 
-    bindVatToggle() {
-        if (Wick.BloomreachWidget.bindVatToggle) {
-            Wick.BloomreachWidget.bindVatToggle('completeYourProjectVatToggle');
-        }
-    },
-
     bindAddToCart($root) {
-        const { ctaButton } = CompleteYourProjectWidget.el;
+        const { ctaButton } = Wick.BloomreachWidget.el;
 
         $root.off('click.bloomreachAddToCart', ctaButton);
         $root.on('click.bloomreachAddToCart', ctaButton, function (event) {
@@ -813,12 +962,12 @@ const CompleteYourProjectWidget = {
 
             if (
                 $button.prop('disabled') ||
-                CompleteYourProjectWidget.loadingButton.isLoading($button)
+                Wick.BloomreachWidget.loadingButton.isLoading($button)
             ) {
                 return;
             }
 
-            CompleteYourProjectWidget.dispatchAddToCart($root, $button);
+            Wick.BloomreachWidget.dispatchAddToCart($root, $button);
         });
     },
 
@@ -843,14 +992,14 @@ const CompleteYourProjectWidget = {
     },
 
     alignCardBlocks($root) {
-        const { titleEl, optionsEl } = CompleteYourProjectWidget.el;
+        const { titleEl, optionsEl } = Wick.BloomreachWidget.el;
 
-        CompleteYourProjectWidget.alignBlock(titleEl, $root);
-        CompleteYourProjectWidget.alignBlock(optionsEl, $root);
+        Wick.BloomreachWidget.alignBlock(titleEl, $root);
+        Wick.BloomreachWidget.alignBlock(optionsEl, $root);
     },
 
     setInitialSummary($root) {
-        const entries = CompleteYourProjectWidget.getSelectedEntries($root);
+        const entries = Wick.BloomreachWidget.getSelectedEntries($root);
         const firstEntry = entries[0];
 
         if (!firstEntry || !firstEntry.product) {
@@ -862,7 +1011,7 @@ const CompleteYourProjectWidget = {
         const priceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
         const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
 
-        CompleteYourProjectWidget.updateSummary($root, {
+        Wick.BloomreachWidget.updateSummary($root, {
             totalPrice: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice) || '£0.00',
             totalWasPrice: wasPriceFormatted || null,
             totalPriceExclusiveVat: Wick.BloomreachWidget.getPriceFormattedValue(priceExcVat),
@@ -876,18 +1025,18 @@ const CompleteYourProjectWidget = {
             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 $card = $input.closest(Wick.BloomreachWidget.el.completeCard);
+                const $completeWidget = $input.closest(Wick.BloomreachWidget.el.completeWidget);
+                const $checkbox = $card.find(Wick.BloomreachWidget.el.cardCheckbox);
                 const previousQuantity =
-                    $input.data(CompleteYourProjectWidget.el.previousQuantityData) || 1;
+                    $input.data(Wick.BloomreachWidget.el.previousQuantityData) || 1;
 
-                if (!$input.data(CompleteYourProjectWidget.el.quantityReadyData)) {
-                    $input.data(CompleteYourProjectWidget.el.previousQuantityData, qty || 1);
+                if (!$input.data(Wick.BloomreachWidget.el.quantityReadyData)) {
+                    $input.data(Wick.BloomreachWidget.el.previousQuantityData, qty || 1);
                     return;
                 }
 
-                if (!CompleteYourProjectWidget.validateCardDropdown($card)) {
+                if (!Wick.BloomreachWidget.validateCardDropdown($card)) {
                     $input.val(previousQuantity);
 
                     const $minus = $card.find('.count-btn--minus');
@@ -900,22 +1049,22 @@ const CompleteYourProjectWidget = {
                 }
 
                 $checkbox.prop('checked', true);
-                $card.addClass(CompleteYourProjectWidget.el.selectedClass);
+                $card.addClass(Wick.BloomreachWidget.el.selectedClass);
 
-                $input.data(CompleteYourProjectWidget.el.previousQuantityData, qty);
+                $input.data(Wick.BloomreachWidget.el.previousQuantityData, qty);
                 $input.trigger('change');
 
                 if ($completeWidget.length) {
-                    CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
+                    Wick.BloomreachWidget.dispatchCalculateTotal($completeWidget);
                 }
             },
         });
 
         stepper.init($root);
 
-        $root.find(inputSel).data(CompleteYourProjectWidget.el.quantityReadyData, true);
+        $root.find(inputSel).data(Wick.BloomreachWidget.el.quantityReadyData, true);
 
-        CompleteYourProjectWidget.steppers.push(stepper);
+        Wick.BloomreachWidget.steppers.push(stepper);
     },
 
     initQuantityFields($root) {
@@ -924,7 +1073,7 @@ const CompleteYourProjectWidget = {
             countStepperInitializedData,
             countStepperRoot,
             previousQuantityData,
-        } = CompleteYourProjectWidget.el;
+        } = Wick.BloomreachWidget.el;
 
         $root.find(quantityInput).each(function () {
             const $input = $(this);
@@ -942,94 +1091,99 @@ const CompleteYourProjectWidget = {
             $input.data(countStepperInitializedData, true);
             $input.data(previousQuantityData, parseInt($input.val(), 10) || 1);
 
-            CompleteYourProjectWidget.initQuantityField(
+            Wick.BloomreachWidget.initQuantityField(
                 $input.closest(countStepperRoot),
                 `#${inputId}`
             );
         });
     },
 
+    formatPrice(value) {
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency: 'GBP',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(value);
+    },
+
     resetWidgetState($root) {
-        $root.find(CompleteYourProjectWidget.el.cardCheckbox).prop('checked', false);
+        $root.find(Wick.BloomreachWidget.el.cardCheckbox).prop('checked', false);
 
         $root
-            .find(CompleteYourProjectWidget.el.completeCard)
-            .removeClass(CompleteYourProjectWidget.el.selectedClass);
+            .find(Wick.BloomreachWidget.el.completeCard)
+            .removeClass(Wick.BloomreachWidget.el.selectedClass);
 
         $root
-            .find(CompleteYourProjectWidget.el.quantityInput)
+            .find(Wick.BloomreachWidget.el.quantityInput)
             .val(1)
-            .data(CompleteYourProjectWidget.el.previousQuantityData, 1);
+            .data(Wick.BloomreachWidget.el.previousQuantityData, 1);
     },
 
     resetBackForwardState() {
-        $(CompleteYourProjectWidget.el.completeWidget).each(function () {
+        $(Wick.BloomreachWidget.el.completeWidget).each(function () {
             const $widget = $(this);
 
-            CompleteYourProjectWidget.resetWidgetState($widget);
-            CompleteYourProjectWidget.bindCardSelection($widget);
+            Wick.BloomreachWidget.resetWidgetState($widget);
+            Wick.BloomreachWidget.bindCardSelection($widget);
         });
     },
 
     initRenderedWidget($container) {
-        if (!CompleteYourProjectWidget.toast) {
-            CompleteYourProjectWidget.toast = createToast({
+        if (!Wick.BloomreachWidget.toast) {
+            Wick.BloomreachWidget.toast = createToast({
                 template: notificationTemplate,
             });
         }
-        if (!CompleteYourProjectWidget.loadingButton) {
-            CompleteYourProjectWidget.loadingButton = createLoadingButton();
+        if (!Wick.BloomreachWidget.loadingButton) {
+            Wick.BloomreachWidget.loadingButton = createLoadingButton();
         }
-        const $completeWidget = $container.find(CompleteYourProjectWidget.el.completeWidget);
+        const $completeWidget = $container.find(Wick.BloomreachWidget.el.completeWidget);
 
         if (!$completeWidget.length) {
             return;
         }
 
         Wick.BloomreachWidget.drawRating($completeWidget);
-        CompleteYourProjectWidget.bindCardSelection($completeWidget);
-        CompleteYourProjectWidget.bindDropdowns();
-        CompleteYourProjectWidget.bindDropdownValidation($completeWidget);
-        CompleteYourProjectWidget.bindAddToCart($completeWidget);
-        CompleteYourProjectWidget.bindVatToggle();
-        CompleteYourProjectWidget.initQuantityFields($completeWidget);
+        Wick.BloomreachWidget.bindCardSelection($completeWidget);
+        Wick.BloomreachWidget.bindDropdowns();
+        Wick.BloomreachWidget.bindDropdownValidation($completeWidget);
+        Wick.BloomreachWidget.bindAddToCart($completeWidget);
+        Wick.BloomreachWidget.initQuantityFields($completeWidget);
 
         $completeWidget
-            .find(CompleteYourProjectWidget.el.dropdownRoot)
-            .removeClass(CompleteYourProjectWidget.el.dropdownErrorClass);
+            .find(Wick.BloomreachWidget.el.dropdownRoot)
+            .removeClass(Wick.BloomreachWidget.el.dropdownErrorClass);
 
-        CompleteYourProjectWidget.alignCardBlocks($completeWidget);
-        CompleteYourProjectWidget.updateCta($completeWidget);
-        CompleteYourProjectWidget.setInitialSummary($completeWidget);
-        Wick.BloomreachWidget.reapplyVatDisplay();
+        Wick.BloomreachWidget.alignCardBlocks($completeWidget);
+        Wick.BloomreachWidget.updateCta($completeWidget);
+        Wick.BloomreachWidget.setInitialSummary($completeWidget);
     },
 
     init(payloadData) {
-        const $containers = $(CompleteYourProjectWidget.el.widgetContainer);
+        const $containers = $(Wick.BloomreachWidget.el.widgetContainer);
 
         if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
-            $containers.find(CompleteYourProjectWidget.el.completeWidget).hide();
+            $containers.find(Wick.BloomreachWidget.el.completeWidget).hide();
             return;
         }
 
-        CompleteYourProjectWidget.renderWidgetFromPayload(payloadData);
+        Wick.BloomreachWidget.renderWidgetFromPayload(payloadData);
     },
 };
 
 $(document).ready(function () {
     Wick.Responsive.onResize(function () {
-        $(CompleteYourProjectWidget.el.widgetContainer).each(function () {
-            const $completeWidget = $(this).find(CompleteYourProjectWidget.el.completeWidget);
+        $(Wick.BloomreachWidget.el.widgetContainer).each(function () {
+            const $completeWidget = $(this).find(Wick.BloomreachWidget.el.completeWidget);
 
             if ($completeWidget.length) {
-                CompleteYourProjectWidget.alignCardBlocks($completeWidget);
+                Wick.BloomreachWidget.alignCardBlocks($completeWidget);
             }
         });
     });
 });
 
 window.addEventListener('pagehide', function () {
-    CompleteYourProjectWidget.resetBackForwardState();
+    Wick.BloomreachWidget.resetBackForwardState();
 });
-
-export default CompleteYourProjectWidget;