wickes-css2 2.111.0-develop.5 → 2.111.0-dont-forget-widget.2

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

@@ -1,29 +1,41 @@
 var Wick = window.Wick || {};
 
-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';
+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';
 
 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(
+    'bloomreach/complete-card-skeleton',
+    require('../../../components/bloomreach/complete-card-skeleton.hbs')
+);
+Handlebars.registerPartial(
+    'bloomreach/complete-summary-skeleton',
+    require('../../../components/bloomreach/complete-summary-skeleton.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 completeYourProjectSkeletonTemplate = require(
+    '../../../components/bloomreach/complete-your-project-skeleton.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');
 
-Wick.BloomreachWidget = {
+const CompleteYourProjectWidget = {
+    skeletonTemplate: completeYourProjectSkeletonTemplate,
     CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT: 'calculateProductBundleTotal',
     ADD_PRODUCT_BUNDLE_TO_CART_EVENT: 'bulkAddToCart',
 
@@ -43,14 +55,8 @@ Wick.BloomreachWidget = {
         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',
@@ -68,8 +74,6 @@ Wick.BloomreachWidget = {
         recommendationIndexAttr: 'data-recommendation-index',
         selectedClass: 'complete-card--selected',
         selectedValueData: 'selected-value',
-        starOverlay: '.star-overlay',
-
         titleEl: '.complete-card__title',
 
         widgetContainer: '[data-complete-widget]',
@@ -77,14 +81,6 @@ Wick.BloomreachWidget = {
         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';
@@ -94,8 +90,7 @@ Wick.BloomreachWidget = {
     },
 
     setCtaText($button, text) {
-        const { ctaButtonText } = Wick.BloomreachWidget.el;
-        const $text = $button.find(ctaButtonText);
+        const $text = $button.find(Wick.BloomreachWidget.el.loadingButtonText);
 
         if ($text.length) {
             $text.text(text);
@@ -105,64 +100,6 @@ Wick.BloomreachWidget = {
         $button.text(text);
     },
 
-    getBadgeColor(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) {
         if (!product.variantOptions || !product.variantOptions.length) {
             return [];
@@ -199,95 +136,12 @@ Wick.BloomreachWidget = {
             return;
         }
 
-        Wick.BloomreachWidget.toast.show({
+        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: Wick.BloomreachWidget.getBadgeColor(
-                    promotionAttributes.overlayTextColor
-                ),
-                color: Wick.BloomreachWidget.getBadgeColor(
-                    promotionAttributes.overlayBackgroundColor
-                ),
-            };
-        }
-
-        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) {
@@ -303,10 +157,10 @@ Wick.BloomreachWidget = {
     getProductRenderData(product, index, options = {}) {
         const shouldShowDropdown = index !== 0;
         const dropdownOptions = shouldShowDropdown
-            ? Wick.BloomreachWidget.getDropdownOptions(product)
+            ? CompleteYourProjectWidget.getDropdownOptions(product)
             : [];
         const selectedDropdownValue = options.selectedDropdownValue || '';
-        const selectedDropdownLabel = Wick.BloomreachWidget.getSelectedDropdownLabel(
+        const selectedDropdownLabel = CompleteYourProjectWidget.getSelectedDropdownLabel(
             dropdownOptions,
             selectedDropdownValue
         );
@@ -319,15 +173,13 @@ Wick.BloomreachWidget = {
         );
 
         const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
-        const excVatFormattedValue = Wick.BloomreachWidget.getExcVatFormattedValue(
+        const excVatFormattedValue = CompleteYourProjectWidget.getExcVatFormattedValue(
             displayPrice,
             product
         );
         const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
 
-        const excVatWasPriceFormatted = wasPriceFormatted
-            ? Wick.BloomreachWidget.getExcVatWasPrice(product)
-            : '';
+        const excVatWasPriceFormatted = Wick.BloomreachWidget.getExcVatWasPrice(product);
 
         return {
             ...product,
@@ -342,7 +194,11 @@ Wick.BloomreachWidget = {
                 Wick.BloomreachWidget.getDisplayPriceExcVat(product)
             ),
             incVatWasPriceFormatted: wasPriceFormatted,
+            wasPriceIncVatFormattedValue: wasPriceFormatted,
+            incVatWasPriceFormattedValue: wasPriceFormatted,
             excVatWasPriceFormatted,
+            wasPriceExcVatFormattedValue: excVatWasPriceFormatted,
+            excVatWasPriceFormattedValue: excVatWasPriceFormatted,
             showFromPrice,
             image:
                 options.image ||
@@ -363,7 +219,7 @@ Wick.BloomreachWidget = {
 
     renderWidget($container, context) {
         const { widgetContent, widgetWrapper, completeCard, recommendationIndexAttr } =
-            Wick.BloomreachWidget.el;
+            CompleteYourProjectWidget.el;
 
         const $content = $container.find(widgetContent);
         const recommendations = Wick.BloomreachWidget.normalizePayload(context);
@@ -372,16 +228,16 @@ Wick.BloomreachWidget = {
             return;
         }
 
-        Wick.BloomreachWidget.recommendations = recommendations;
+        CompleteYourProjectWidget.recommendations = recommendations;
 
         $content.html(completeWrapperTemplate());
 
         const $wrapper = $content.find(widgetWrapper);
 
-        Wick.BloomreachWidget.dropdownCurrent = {};
+        CompleteYourProjectWidget.dropdownCurrent = {};
 
         recommendations.forEach(function (recommendation, index) {
-            const product = Wick.BloomreachWidget.getProductRenderData(
+            const product = CompleteYourProjectWidget.getProductRenderData(
                 recommendation.baseProduct,
                 index
             );
@@ -402,7 +258,7 @@ Wick.BloomreachWidget = {
     },
 
     renderWidgetFromPayload(payloadData) {
-        const { widgetContainer, completeWidget } = Wick.BloomreachWidget.el;
+        const { widgetContainer, completeWidget } = CompleteYourProjectWidget.el;
         const $containers = $(widgetContainer);
 
         if (!$containers.length) {
@@ -417,46 +273,23 @@ Wick.BloomreachWidget = {
         $containers.each(function () {
             const $container = $(this);
 
-            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');
-                }
-            });
+            CompleteYourProjectWidget.renderWidget($container, payloadData);
+            CompleteYourProjectWidget.initRenderedWidget($container);
         });
     },
 
     getDropdownCard($dropdown) {
-        return $dropdown.closest(Wick.BloomreachWidget.el.completeCard);
+        return $dropdown.closest(CompleteYourProjectWidget.el.completeCard);
     },
 
     getDropdownCheckbox($dropdown) {
-        return Wick.BloomreachWidget.getDropdownCard($dropdown).find(
-            Wick.BloomreachWidget.el.cardCheckbox
+        return CompleteYourProjectWidget.getDropdownCard($dropdown).find(
+            CompleteYourProjectWidget.el.cardCheckbox
         );
     },
 
     setDropdownCheckboxState($dropdown, isChecked, shouldTriggerChange = true) {
-        const $checkbox = Wick.BloomreachWidget.getDropdownCheckbox($dropdown);
+        const $checkbox = CompleteYourProjectWidget.getDropdownCheckbox($dropdown);
 
         if (!$checkbox.length) {
             return;
@@ -470,18 +303,18 @@ Wick.BloomreachWidget = {
     },
 
     setDropdownError($dropdown, hasError) {
-        $dropdown.toggleClass(Wick.BloomreachWidget.el.dropdownErrorClass, hasError);
+        $dropdown.toggleClass(CompleteYourProjectWidget.el.dropdownErrorClass, hasError);
     },
 
     validateDropdown($dropdown, options = {}) {
-        const isValid = Boolean($dropdown.data(Wick.BloomreachWidget.el.selectedValueData));
+        const isValid = Boolean($dropdown.data(CompleteYourProjectWidget.el.selectedValueData));
 
-        Wick.BloomreachWidget.setDropdownError($dropdown, !isValid);
+        CompleteYourProjectWidget.setDropdownError($dropdown, !isValid);
 
         if (!isValid && options.uncheck) {
-            Wick.BloomreachWidget.setDropdownCheckboxState($dropdown, false, false);
-            Wick.BloomreachWidget.getDropdownCard($dropdown).removeClass(
-                Wick.BloomreachWidget.el.selectedClass
+            CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, false, false);
+            CompleteYourProjectWidget.getDropdownCard($dropdown).removeClass(
+                CompleteYourProjectWidget.el.selectedClass
             );
         }
 
@@ -489,13 +322,13 @@ Wick.BloomreachWidget = {
     },
 
     validateCardDropdown($card, options = {}) {
-        const $dropdown = $card.find(Wick.BloomreachWidget.el.dropdownRoot);
+        const $dropdown = $card.find(CompleteYourProjectWidget.el.dropdownRoot);
 
         if (!$dropdown.length) {
             return true;
         }
 
-        return Wick.BloomreachWidget.validateDropdown($dropdown, options);
+        return CompleteYourProjectWidget.validateDropdown($dropdown, options);
     },
 
     findVariantProduct(recommendation, selectedValue) {
@@ -509,7 +342,7 @@ Wick.BloomreachWidget = {
     },
 
     getCardQuantity($card) {
-        const $input = $card.find(Wick.BloomreachWidget.el.quantityInput);
+        const $input = $card.find(CompleteYourProjectWidget.el.quantityInput);
         const quantity = parseInt($input.val(), 10);
 
         return Number.isNaN(quantity) ? 1 : quantity;
@@ -517,10 +350,10 @@ Wick.BloomreachWidget = {
 
     getCardProduct($card) {
         const { recommendationIndexAttr, dropdownRoot, selectedValueData } =
-            Wick.BloomreachWidget.el;
+            CompleteYourProjectWidget.el;
 
         const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = Wick.BloomreachWidget.recommendations[recommendationIndex];
+        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
 
         if (!recommendation) {
             return null;
@@ -531,7 +364,7 @@ Wick.BloomreachWidget = {
 
         if (selectedValue) {
             return (
-                Wick.BloomreachWidget.findVariantProduct(recommendation, selectedValue) ||
+                CompleteYourProjectWidget.findVariantProduct(recommendation, selectedValue) ||
                 recommendation.baseProduct
             );
         }
@@ -540,7 +373,7 @@ Wick.BloomreachWidget = {
     },
 
     getSelectedEntries($root) {
-        const { completeCard, cardCheckbox } = Wick.BloomreachWidget.el;
+        const { completeCard, cardCheckbox } = CompleteYourProjectWidget.el;
         const entries = [];
 
         $root.find(completeCard).each(function () {
@@ -551,7 +384,7 @@ Wick.BloomreachWidget = {
                 return;
             }
 
-            const product = Wick.BloomreachWidget.getCardProduct($card);
+            const product = CompleteYourProjectWidget.getCardProduct($card);
 
             if (!product) {
                 return;
@@ -559,7 +392,7 @@ Wick.BloomreachWidget = {
 
             entries.push({
                 product,
-                quantity: Wick.BloomreachWidget.getCardQuantity($card),
+                quantity: CompleteYourProjectWidget.getCardQuantity($card),
             });
         });
 
@@ -567,7 +400,7 @@ Wick.BloomreachWidget = {
     },
 
     getAddToCartEntries($root) {
-        return Wick.BloomreachWidget.getSelectedEntries($root).map(function (entry) {
+        return CompleteYourProjectWidget.getSelectedEntries($root).map(function (entry) {
             return {
                 productCode: entry.product.code,
                 quantity: entry.quantity,
@@ -581,16 +414,10 @@ Wick.BloomreachWidget = {
         const totalWasPriceExclusiveVat =
             response.totalWasPriceExclusiveVat || response.totalExcVatWasPrice;
 
-        const {
-            summaryPriceValue,
-            summarySalePrice,
-            summaryPriceInc,
-            summaryPriceExc,
-            summarySalePriceInc,
-            summarySalePriceExc,
-        } = Wick.BloomreachWidget.el;
+        const { summaryPriceValue, summarySalePrice } = CompleteYourProjectWidget.el;
+        const { vatInc, vatExc } = Wick.BloomreachWidget.el;
 
-        Wick.BloomreachWidget.lastCalculationResponse = response;
+        CompleteYourProjectWidget.lastCalculationResponse = response;
 
         const $price = $root.find(summaryPriceValue);
         const $salePrice = $root.find(summarySalePrice);
@@ -602,46 +429,43 @@ Wick.BloomreachWidget = {
 
         if (response.totalWasPrice) {
             $total.addClass('complete-widget__total-sale');
-            const $priceInc = $price.find(summaryPriceInc);
+            const $priceInc = $price.find(vatInc);
 
             if ($priceInc.length) {
                 $priceInc.text(response.totalWasPrice);
-                $price
-                    .find(summaryPriceExc)
-                    .text(totalWasPriceExclusiveVat || response.totalWasPrice);
-
-                $salePrice.find(summarySalePriceInc).text(response.totalPrice || '');
-                $salePrice
-                    .find(summarySalePriceExc)
-                    .text(totalPriceExclusiveVat || response.totalPrice || '');
+                $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(summaryPriceInc);
+        const $priceInc = $price.find(vatInc);
         if ($priceInc.length) {
             $priceInc.text(response.totalPrice || '£0.00');
-            $price
-                .find(summaryPriceExc)
-                .text(totalPriceExclusiveVat || response.totalPrice || '£0.00');
+            $price.find(vatExc).text(totalPriceExclusiveVat || response.totalPrice || '£0.00');
 
-            $salePrice.find(summarySalePriceInc).text('');
-            $salePrice.find(summarySalePriceExc).text('');
+            $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 } = Wick.BloomreachWidget.el;
+        const { ctaButton, cardCheckbox } = CompleteYourProjectWidget.el;
         const selectedCount = $root.find(cardCheckbox).filter(':checked').length;
         const $cta = $root.find(ctaButton);
 
@@ -650,44 +474,43 @@ Wick.BloomreachWidget = {
         }
 
         $cta.prop('disabled', !selectedCount);
-        Wick.BloomreachWidget.setCtaText($cta, Wick.BloomreachWidget.getCtaText(selectedCount));
+        CompleteYourProjectWidget.setCtaText(
+            $cta,
+            CompleteYourProjectWidget.getCtaText(selectedCount)
+        );
     },
 
     dispatchCalculateTotal($root) {
-        Wick.BloomreachWidget.updateCta($root);
+        CompleteYourProjectWidget.updateCta($root);
 
         return Wick.BloomreachWidget.dispatchWidgetEvent(
-            Wick.BloomreachWidget.CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT,
+            CompleteYourProjectWidget.CALCULATE_PRODUCT_BUNDLE_TOTAL_EVENT,
             {
-                entries: Wick.BloomreachWidget.getSelectedEntries($root),
+                entries: CompleteYourProjectWidget.getSelectedEntries($root),
             }
         ).then(function (response) {
-            Wick.BloomreachWidget.updateSummary($root, response);
+            CompleteYourProjectWidget.updateSummary($root, response);
         });
     },
 
     dispatchAddToCart($root, $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
-            );
+        CompleteYourProjectWidget.loadingButton.start($button);
 
-            window.dispatchEvent(event);
-        })
+        return Wick.BloomreachWidget.dispatchWidgetEvent(
+            CompleteYourProjectWidget.ADD_PRODUCT_BUNDLE_TO_CART_EVENT,
+            {
+                entries: CompleteYourProjectWidget.getAddToCartEntries($root),
+            }
+        )
             .then(function (response) {
-                Wick.BloomreachWidget.handleBulkAddToCartResponse(response);
+                CompleteYourProjectWidget.handleBulkAddToCartResponse(response);
 
-                Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+                if (Wick.MiniBasketSliderFE) {
+                    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+                }
             })
             .catch(function () {
-                Wick.BloomreachWidget.handleBulkAddToCartResponse({
+                CompleteYourProjectWidget.handleBulkAddToCartResponse({
                     bulkAddToCartData: {
                         messageType: 'error',
                         messageText: 'Selected product(s) were not added to basket',
@@ -695,19 +518,20 @@ Wick.BloomreachWidget = {
                 });
             })
             .finally(function () {
-                Wick.BloomreachWidget.loadingButton.stop($button);
-                Wick.BloomreachWidget.updateCta($root);
+                CompleteYourProjectWidget.loadingButton.stop($button);
+                CompleteYourProjectWidget.updateCta($root);
             });
     },
 
     reinitCard($card) {
-        const { countBtn, completeWidget } = Wick.BloomreachWidget.el;
+        const { countBtn, completeWidget } = CompleteYourProjectWidget.el;
 
         $card.find(countBtn).remove();
 
-        Wick.BloomreachWidget.initQuantityFields($card);
+        CompleteYourProjectWidget.initQuantityFields($card);
         Wick.BloomreachWidget.drawRating($card);
-        Wick.BloomreachWidget.alignCardBlocks($card.closest(completeWidget));
+        CompleteYourProjectWidget.alignCardBlocks($card.closest(completeWidget));
+        Wick.BloomreachWidget.reapplyVatDisplay();
     },
 
     replaceCardWithBaseProduct($dropdown, options = {}) {
@@ -717,17 +541,17 @@ Wick.BloomreachWidget = {
             dropdownRoot,
             dropdownErrorClass,
             cardCheckbox,
-        } = Wick.BloomreachWidget.el;
+        } = CompleteYourProjectWidget.el;
 
         const $card = $dropdown.closest(completeCard);
         const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = Wick.BloomreachWidget.recommendations[recommendationIndex];
+        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
 
         if (!recommendation || !recommendation.baseProduct) {
             return null;
         }
 
-        const productData = Wick.BloomreachWidget.getProductRenderData(
+        const productData = CompleteYourProjectWidget.getProductRenderData(
             recommendation.baseProduct,
             recommendationIndex,
             {
@@ -750,13 +574,13 @@ Wick.BloomreachWidget = {
         $newCard.find(cardCheckbox).prop('checked', false);
 
         $newCard
-            .find(Wick.BloomreachWidget.el.quantityInput)
+            .find(CompleteYourProjectWidget.el.quantityInput)
             .val(1)
-            .data(Wick.BloomreachWidget.el.previousQuantityData, 1)
-            .removeData(Wick.BloomreachWidget.el.quantityReadyData)
-            .removeData(Wick.BloomreachWidget.el.countStepperInitializedData);
+            .data(CompleteYourProjectWidget.el.previousQuantityData, 1)
+            .removeData(CompleteYourProjectWidget.el.quantityReadyData)
+            .removeData(CompleteYourProjectWidget.el.countStepperInitializedData);
 
-        Wick.BloomreachWidget.reinitCard($newCard);
+        CompleteYourProjectWidget.reinitCard($newCard);
 
         return $newCard;
     },
@@ -769,17 +593,17 @@ Wick.BloomreachWidget = {
             dropdownRoot,
             selectedValueData,
             cardCheckbox,
-        } = Wick.BloomreachWidget.el;
+        } = CompleteYourProjectWidget.el;
 
         const $card = $dropdown.closest(completeCard);
         const recommendationIndex = Number($card.attr(recommendationIndexAttr));
-        const recommendation = Wick.BloomreachWidget.recommendations[recommendationIndex];
+        const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
 
         if (!recommendation) {
             return null;
         }
 
-        const variantProduct = Wick.BloomreachWidget.findVariantProduct(
+        const variantProduct = CompleteYourProjectWidget.findVariantProduct(
             recommendation,
             selectedValue
         );
@@ -788,7 +612,7 @@ Wick.BloomreachWidget = {
             return null;
         }
 
-        const productData = Wick.BloomreachWidget.getProductRenderData(
+        const productData = CompleteYourProjectWidget.getProductRenderData(
             {
                 ...variantProduct,
                 variantOptions: recommendation.baseProduct.variantOptions,
@@ -818,51 +642,53 @@ Wick.BloomreachWidget = {
         $newCard.find(cardCheckbox).prop('checked', true);
 
         $newCard
-            .find(Wick.BloomreachWidget.el.quantityInput)
+            .find(CompleteYourProjectWidget.el.quantityInput)
             .val(1)
-            .data(Wick.BloomreachWidget.el.previousQuantityData, 1)
-            .removeData(Wick.BloomreachWidget.el.quantityReadyData)
-            .removeData(Wick.BloomreachWidget.el.countStepperInitializedData);
+            .data(CompleteYourProjectWidget.el.previousQuantityData, 1)
+            .removeData(CompleteYourProjectWidget.el.quantityReadyData)
+            .removeData(CompleteYourProjectWidget.el.countStepperInitializedData);
 
-        Wick.BloomreachWidget.reinitCard($newCard);
+        CompleteYourProjectWidget.reinitCard($newCard);
 
         return $newCard;
     },
 
     handleDropdownSelect($dropdown, selectedValue) {
-        const $card = $dropdown.closest(Wick.BloomreachWidget.el.completeCard);
-        const recommendationIndex = $card.attr(Wick.BloomreachWidget.el.recommendationIndexAttr);
-        const currentValue = Wick.BloomreachWidget.dropdownCurrent[recommendationIndex];
+        const $card = $dropdown.closest(CompleteYourProjectWidget.el.completeCard);
+        const recommendationIndex = $card.attr(
+            CompleteYourProjectWidget.el.recommendationIndexAttr
+        );
+        const currentValue = CompleteYourProjectWidget.dropdownCurrent[recommendationIndex];
 
         if (`${currentValue}` === `${selectedValue}`) {
             return;
         }
 
-        Wick.BloomreachWidget.dropdownCurrent[recommendationIndex] = selectedValue;
+        CompleteYourProjectWidget.dropdownCurrent[recommendationIndex] = selectedValue;
 
-        const $completeWidget = $dropdown.closest(Wick.BloomreachWidget.el.completeWidget);
+        const $completeWidget = $dropdown.closest(CompleteYourProjectWidget.el.completeWidget);
         const isPlaceholder = !selectedValue;
 
         if (isPlaceholder) {
-            Wick.BloomreachWidget.setDropdownError($dropdown, true);
-            Wick.BloomreachWidget.setDropdownCheckboxState($dropdown, false, false);
-            Wick.BloomreachWidget.replaceCardWithBaseProduct($dropdown, {
+            CompleteYourProjectWidget.setDropdownError($dropdown, true);
+            CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, false, false);
+            CompleteYourProjectWidget.replaceCardWithBaseProduct($dropdown, {
                 dropdownError: true,
             });
 
             if ($completeWidget.length) {
-                Wick.BloomreachWidget.dispatchCalculateTotal($completeWidget);
+                CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
             }
 
             return;
         }
 
-        Wick.BloomreachWidget.setDropdownError($dropdown, false);
-        Wick.BloomreachWidget.setDropdownCheckboxState($dropdown, true, false);
-        Wick.BloomreachWidget.replaceCardWithVariant($dropdown, selectedValue);
+        CompleteYourProjectWidget.setDropdownError($dropdown, false);
+        CompleteYourProjectWidget.setDropdownCheckboxState($dropdown, true, false);
+        CompleteYourProjectWidget.replaceCardWithVariant($dropdown, selectedValue);
 
         if ($completeWidget.length) {
-            Wick.BloomreachWidget.dispatchCalculateTotal($completeWidget);
+            CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
         }
     },
 
@@ -874,9 +700,9 @@ Wick.BloomreachWidget = {
             dropdownOption,
             dropdownOpenClass,
             dropdownOptionSelectedClass,
-        } = Wick.BloomreachWidget.el;
+        } = CompleteYourProjectWidget.el;
 
-        Wick.BloomreachWidget.dropdown = createDropdown({
+        CompleteYourProjectWidget.dropdown = createDropdown({
             root: dropdownRoot,
             toggle: dropdownToggle,
             value: dropdownValue,
@@ -885,15 +711,15 @@ Wick.BloomreachWidget = {
             selectedClass: dropdownOptionSelectedClass,
             namespace: 'bloomreachDropdown',
             onSelect($dropdown, $option, selectedValue) {
-                Wick.BloomreachWidget.handleDropdownSelect($dropdown, selectedValue);
+                CompleteYourProjectWidget.handleDropdownSelect($dropdown, selectedValue);
             },
         });
 
-        Wick.BloomreachWidget.dropdown.bind();
+        CompleteYourProjectWidget.dropdown.bind();
     },
 
     bindCardSelection($root) {
-        const { completeCard, cardCheckbox, selectedClass } = Wick.BloomreachWidget.el;
+        const { completeCard, cardCheckbox, selectedClass } = CompleteYourProjectWidget.el;
 
         const $firstCard = $root.find(completeCard).first();
 
@@ -904,11 +730,11 @@ Wick.BloomreachWidget = {
         $root.on('change.bloomreachCardSelection', cardCheckbox, function () {
             const $checkbox = $(this);
             const $card = $checkbox.closest(completeCard);
-            const $dropdown = $card.find(Wick.BloomreachWidget.el.dropdownRoot);
+            const $dropdown = $card.find(CompleteYourProjectWidget.el.dropdownRoot);
 
             if (
                 !$checkbox.prop('checked') &&
-                $dropdown.hasClass(Wick.BloomreachWidget.el.dropdownErrorClass)
+                $dropdown.hasClass(CompleteYourProjectWidget.el.dropdownErrorClass)
             ) {
                 $card.removeClass(selectedClass);
                 return;
@@ -916,7 +742,7 @@ Wick.BloomreachWidget = {
 
             if (
                 $checkbox.prop('checked') &&
-                !Wick.BloomreachWidget.validateCardDropdown($card, {
+                !CompleteYourProjectWidget.validateCardDropdown($card, {
                     uncheck: true,
                 })
             ) {
@@ -927,12 +753,12 @@ Wick.BloomreachWidget = {
 
             $card.toggleClass(selectedClass, this.checked);
 
-            Wick.BloomreachWidget.dispatchCalculateTotal($root);
+            CompleteYourProjectWidget.dispatchCalculateTotal($root);
         });
     },
 
     bindDropdownValidation($root) {
-        const { cardCheckbox, completeCard } = Wick.BloomreachWidget.el;
+        const { cardCheckbox, completeCard } = CompleteYourProjectWidget.el;
 
         $root.off('click.bloomreachDropdownValidation', cardCheckbox);
         $root.on('click.bloomreachDropdownValidation', cardCheckbox, function () {
@@ -941,18 +767,24 @@ Wick.BloomreachWidget = {
 
             if (
                 $checkbox.prop('checked') &&
-                !Wick.BloomreachWidget.validateCardDropdown($card, {
+                !CompleteYourProjectWidget.validateCardDropdown($card, {
                     uncheck: true,
                 })
             ) {
                 $checkbox.prop('checked', false);
-                $card.removeClass(Wick.BloomreachWidget.el.selectedClass);
+                $card.removeClass(CompleteYourProjectWidget.el.selectedClass);
             }
         });
     },
 
+    bindVatToggle() {
+        if (Wick.BloomreachWidget.bindVatToggle) {
+            Wick.BloomreachWidget.bindVatToggle('completeYourProjectVatToggle');
+        }
+    },
+
     bindAddToCart($root) {
-        const { ctaButton } = Wick.BloomreachWidget.el;
+        const { ctaButton } = CompleteYourProjectWidget.el;
 
         $root.off('click.bloomreachAddToCart', ctaButton);
         $root.on('click.bloomreachAddToCart', ctaButton, function (event) {
@@ -962,12 +794,12 @@ Wick.BloomreachWidget = {
 
             if (
                 $button.prop('disabled') ||
-                Wick.BloomreachWidget.loadingButton.isLoading($button)
+                CompleteYourProjectWidget.loadingButton.isLoading($button)
             ) {
                 return;
             }
 
-            Wick.BloomreachWidget.dispatchAddToCart($root, $button);
+            CompleteYourProjectWidget.dispatchAddToCart($root, $button);
         });
     },
 
@@ -992,14 +824,14 @@ Wick.BloomreachWidget = {
     },
 
     alignCardBlocks($root) {
-        const { titleEl, optionsEl } = Wick.BloomreachWidget.el;
+        const { titleEl, optionsEl } = CompleteYourProjectWidget.el;
 
-        Wick.BloomreachWidget.alignBlock(titleEl, $root);
-        Wick.BloomreachWidget.alignBlock(optionsEl, $root);
+        CompleteYourProjectWidget.alignBlock(titleEl, $root);
+        CompleteYourProjectWidget.alignBlock(optionsEl, $root);
     },
 
     setInitialSummary($root) {
-        const entries = Wick.BloomreachWidget.getSelectedEntries($root);
+        const entries = CompleteYourProjectWidget.getSelectedEntries($root);
         const firstEntry = entries[0];
 
         if (!firstEntry || !firstEntry.product) {
@@ -1011,7 +843,7 @@ Wick.BloomreachWidget = {
         const priceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
         const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
 
-        Wick.BloomreachWidget.updateSummary($root, {
+        CompleteYourProjectWidget.updateSummary($root, {
             totalPrice: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice) || '£0.00',
             totalWasPrice: wasPriceFormatted || null,
             totalPriceExclusiveVat: Wick.BloomreachWidget.getPriceFormattedValue(priceExcVat),
@@ -1025,18 +857,18 @@ Wick.BloomreachWidget = {
             min: 1,
             onChange(qty, inputEl) {
                 const $input = $(inputEl);
-                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 $card = $input.closest(CompleteYourProjectWidget.el.completeCard);
+                const $completeWidget = $input.closest(CompleteYourProjectWidget.el.completeWidget);
+                const $checkbox = $card.find(CompleteYourProjectWidget.el.cardCheckbox);
                 const previousQuantity =
-                    $input.data(Wick.BloomreachWidget.el.previousQuantityData) || 1;
+                    $input.data(CompleteYourProjectWidget.el.previousQuantityData) || 1;
 
-                if (!$input.data(Wick.BloomreachWidget.el.quantityReadyData)) {
-                    $input.data(Wick.BloomreachWidget.el.previousQuantityData, qty || 1);
+                if (!$input.data(CompleteYourProjectWidget.el.quantityReadyData)) {
+                    $input.data(CompleteYourProjectWidget.el.previousQuantityData, qty || 1);
                     return;
                 }
 
-                if (!Wick.BloomreachWidget.validateCardDropdown($card)) {
+                if (!CompleteYourProjectWidget.validateCardDropdown($card)) {
                     $input.val(previousQuantity);
 
                     const $minus = $card.find('.count-btn--minus');
@@ -1049,22 +881,22 @@ Wick.BloomreachWidget = {
                 }
 
                 $checkbox.prop('checked', true);
-                $card.addClass(Wick.BloomreachWidget.el.selectedClass);
+                $card.addClass(CompleteYourProjectWidget.el.selectedClass);
 
-                $input.data(Wick.BloomreachWidget.el.previousQuantityData, qty);
+                $input.data(CompleteYourProjectWidget.el.previousQuantityData, qty);
                 $input.trigger('change');
 
                 if ($completeWidget.length) {
-                    Wick.BloomreachWidget.dispatchCalculateTotal($completeWidget);
+                    CompleteYourProjectWidget.dispatchCalculateTotal($completeWidget);
                 }
             },
         });
 
         stepper.init($root);
 
-        $root.find(inputSel).data(Wick.BloomreachWidget.el.quantityReadyData, true);
+        $root.find(inputSel).data(CompleteYourProjectWidget.el.quantityReadyData, true);
 
-        Wick.BloomreachWidget.steppers.push(stepper);
+        CompleteYourProjectWidget.steppers.push(stepper);
     },
 
     initQuantityFields($root) {
@@ -1073,7 +905,7 @@ Wick.BloomreachWidget = {
             countStepperInitializedData,
             countStepperRoot,
             previousQuantityData,
-        } = Wick.BloomreachWidget.el;
+        } = CompleteYourProjectWidget.el;
 
         $root.find(quantityInput).each(function () {
             const $input = $(this);
@@ -1091,99 +923,94 @@ Wick.BloomreachWidget = {
             $input.data(countStepperInitializedData, true);
             $input.data(previousQuantityData, parseInt($input.val(), 10) || 1);
 
-            Wick.BloomreachWidget.initQuantityField(
+            CompleteYourProjectWidget.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(Wick.BloomreachWidget.el.cardCheckbox).prop('checked', false);
+        $root.find(CompleteYourProjectWidget.el.cardCheckbox).prop('checked', false);
 
         $root
-            .find(Wick.BloomreachWidget.el.completeCard)
-            .removeClass(Wick.BloomreachWidget.el.selectedClass);
+            .find(CompleteYourProjectWidget.el.completeCard)
+            .removeClass(CompleteYourProjectWidget.el.selectedClass);
 
         $root
-            .find(Wick.BloomreachWidget.el.quantityInput)
+            .find(CompleteYourProjectWidget.el.quantityInput)
             .val(1)
-            .data(Wick.BloomreachWidget.el.previousQuantityData, 1);
+            .data(CompleteYourProjectWidget.el.previousQuantityData, 1);
     },
 
     resetBackForwardState() {
-        $(Wick.BloomreachWidget.el.completeWidget).each(function () {
+        $(CompleteYourProjectWidget.el.completeWidget).each(function () {
             const $widget = $(this);
 
-            Wick.BloomreachWidget.resetWidgetState($widget);
-            Wick.BloomreachWidget.bindCardSelection($widget);
+            CompleteYourProjectWidget.resetWidgetState($widget);
+            CompleteYourProjectWidget.bindCardSelection($widget);
         });
     },
 
     initRenderedWidget($container) {
-        if (!Wick.BloomreachWidget.toast) {
-            Wick.BloomreachWidget.toast = createToast({
+        if (!CompleteYourProjectWidget.toast) {
+            CompleteYourProjectWidget.toast = createToast({
                 template: notificationTemplate,
             });
         }
-        if (!Wick.BloomreachWidget.loadingButton) {
-            Wick.BloomreachWidget.loadingButton = createLoadingButton();
+        if (!CompleteYourProjectWidget.loadingButton) {
+            CompleteYourProjectWidget.loadingButton = createLoadingButton();
         }
-        const $completeWidget = $container.find(Wick.BloomreachWidget.el.completeWidget);
+        const $completeWidget = $container.find(CompleteYourProjectWidget.el.completeWidget);
 
         if (!$completeWidget.length) {
             return;
         }
 
         Wick.BloomreachWidget.drawRating($completeWidget);
-        Wick.BloomreachWidget.bindCardSelection($completeWidget);
-        Wick.BloomreachWidget.bindDropdowns();
-        Wick.BloomreachWidget.bindDropdownValidation($completeWidget);
-        Wick.BloomreachWidget.bindAddToCart($completeWidget);
-        Wick.BloomreachWidget.initQuantityFields($completeWidget);
+        CompleteYourProjectWidget.bindCardSelection($completeWidget);
+        CompleteYourProjectWidget.bindDropdowns();
+        CompleteYourProjectWidget.bindDropdownValidation($completeWidget);
+        CompleteYourProjectWidget.bindAddToCart($completeWidget);
+        CompleteYourProjectWidget.bindVatToggle();
+        CompleteYourProjectWidget.initQuantityFields($completeWidget);
 
         $completeWidget
-            .find(Wick.BloomreachWidget.el.dropdownRoot)
-            .removeClass(Wick.BloomreachWidget.el.dropdownErrorClass);
+            .find(CompleteYourProjectWidget.el.dropdownRoot)
+            .removeClass(CompleteYourProjectWidget.el.dropdownErrorClass);
 
-        Wick.BloomreachWidget.alignCardBlocks($completeWidget);
-        Wick.BloomreachWidget.updateCta($completeWidget);
-        Wick.BloomreachWidget.setInitialSummary($completeWidget);
+        CompleteYourProjectWidget.alignCardBlocks($completeWidget);
+        CompleteYourProjectWidget.updateCta($completeWidget);
+        CompleteYourProjectWidget.setInitialSummary($completeWidget);
+        Wick.BloomreachWidget.reapplyVatDisplay();
     },
 
     init(payloadData) {
-        const $containers = $(Wick.BloomreachWidget.el.widgetContainer);
+        const $containers = $(CompleteYourProjectWidget.el.widgetContainer);
 
         if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
-            $containers.find(Wick.BloomreachWidget.el.completeWidget).hide();
+            $containers.find(CompleteYourProjectWidget.el.completeWidget).hide();
             return;
         }
 
-        Wick.BloomreachWidget.renderWidgetFromPayload(payloadData);
+        CompleteYourProjectWidget.renderWidgetFromPayload(payloadData);
     },
 };
 
 $(document).ready(function () {
     Wick.Responsive.onResize(function () {
-        $(Wick.BloomreachWidget.el.widgetContainer).each(function () {
-            const $completeWidget = $(this).find(Wick.BloomreachWidget.el.completeWidget);
+        $(CompleteYourProjectWidget.el.widgetContainer).each(function () {
+            const $completeWidget = $(this).find(CompleteYourProjectWidget.el.completeWidget);
 
             if ($completeWidget.length) {
-                Wick.BloomreachWidget.alignCardBlocks($completeWidget);
+                CompleteYourProjectWidget.alignCardBlocks($completeWidget);
             }
         });
     });
 });
 
 window.addEventListener('pagehide', function () {
-    Wick.BloomreachWidget.resetBackForwardState();
+    CompleteYourProjectWidget.resetBackForwardState();
 });
+
+export default CompleteYourProjectWidget;