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

package/src/page_product-details-bloomreach.html

@@ -70,7 +70,7 @@ switch-vat=true
       <div
           class="pdp__widget"
           data-complete-widget
-          data-mock-key="completeYourProject2Recomendations"
+          data-context-key="completeYourProject2Recomendations"
       >
         {{> bloomreach/complete-your-project title="Complete your project"}}
       </div>

package/src/page_product-details-with-global-search-v2.html

@@ -63,7 +63,6 @@ switch-vat=true
         sample=true
         cc=true
         delivery=true
-        mockDataKey="whyNotAddRecommendations"
         }}
       </div>
       <div class="pdp__description">
@@ -72,7 +71,7 @@ switch-vat=true
       <div
           class="pdp__widget"
           data-complete-widget
-          data-mock-key="completeYourProject3Recomendations"
+          data-context-key="completeYourProject3Recomendations"
       >
         {{> bloomreach/complete-your-project title="Complete your project"}}
       </div>

package/src/scss/components/bloomreach/_bloomreach.scss

@@ -1,6 +1,3 @@
 @import 'complete-your-project';
 @import 'complete-card';
 @import 'complete-card-dropdown';
-@import 'why-not-add';
-@import 'why-not-add-card';
-@import 'reviews';

package/src/scss/components/bloomreach/_complete-card.scss

@@ -92,6 +92,44 @@
     }
   }
 
+  &__reviews {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
+    margin-bottom: 8px;
+
+    &-count {
+      display: inline-block;
+      margin-left: 6px;
+    }
+
+    .rating-bg {
+      color: $gray;
+      position: relative;
+
+      .fa-star {
+        margin-right: 0;
+      }
+    }
+
+    .rating-overlay {
+      color: $yellow;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+    }
+
+    .star-overlay {
+      display: inline-block;
+      overflow: hidden;
+
+      & + .star-overlay {
+        margin-left: 3.3px;
+      }
+    }
+  }
+
   &__count-stepper {
     margin-top: 0;
     margin-bottom: 12px;

package/src/scss/components/kitchen/_colour-swatches.scss

@@ -61,13 +61,19 @@
 }
 
 .colour-wheel {
-  width: 24px;
+  width: 100%;
+  max-width: 184px;
   height: 24px;
-  border-radius: 50%;
   overflow: hidden;
 
   img {
     width: 100%;
-    object-fit: cover;
+    height: 16px;
+
+    &[src*='Color_Wheel.svg'] {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+    }
   }
 }

package/src/sitemap.html

@@ -230,36 +230,30 @@
                         </li>
                         <li>
                             <span class="page-id">2.27</span>
-                            <a href="page_product-details-with-why-not-add-single.html" target="_blank">
-                                Product details page - With Why Not Add single widget
-                            </a>
-                        </li>
-                        <li>
-                            <span class="page-id">2.28</span>
                             <a href="page_product-details-mfe-calculator.html" target="_blank">
                                 Product details page - With MFE calculator
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.29</span>
+                            <span class="page-id">2.28</span>
                             <a href="page_product-details-cnc-success-notification.html" target="_blank">
                                 Product details page - C&C success notifications
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.30</span>
+                            <span class="page-id">2.29</span>
                             <a href="page_product-details-cnc-error-notification.html" target="_blank">
                                 Product details page - C&C error notifications
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.31</span>
+                            <span class="page-id">2.30</span>
                             <a href="page_product-details-cnc-success-notification-vat.html" target="_blank">
                                 Product details page VAT
                             </a>
                         </li>
                         <li>
-                            <span class="page-id">2.32</span>
+                            <span class="page-id">2.31</span>
                             <a href="page_product-details-paint-mixing.html" target="_blank">
                                 Product details page - Paint Mixing
                             </a>

package/build/js/page/bloomreach-widget/bloomreach-widget.js

@@ -1,241 +0,0 @@
-var Wick = window.Wick || {};
-
-import { createEvent } from '../utils/create-event';
-import CompleteYourProjectWidget from './complete-your-project-widget';
-import WhyNotAddWidget from './why-not-add-widget';
-
-Wick.BloomreachWidget = {
-    widgets: {},
-
-    el: {
-        loadingButtonText: '.loading-button__text',
-        loadingButtonLoader: '.loading-button__loader',
-        ratingOverlay: '.rating-overlay',
-        starOverlay: '.star-overlay',
-        vatInc: '.including-vat-inherit',
-        vatExc: '.excluding-vat-inherit',
-    },
-
-    registerWidgets(widgetList) {
-        widgetList.forEach(function ({ type, widget }) {
-            Wick.BloomreachWidget.widgets[type] = widget;
-        });
-    },
-
-    getWidget(type) {
-        return Wick.BloomreachWidget.widgets[type];
-    },
-
-    init(type, payloadData) {
-        const widget = Wick.BloomreachWidget.getWidget(type);
-
-        if (!widget || typeof widget.init !== 'function') {
-            return;
-        }
-
-        widget.init(payloadData, Wick.BloomreachWidget);
-    },
-
-    normalizePayload(payloadData) {
-        if (Array.isArray(payloadData)) {
-            return payloadData;
-        }
-
-        if (payloadData && Array.isArray(payloadData.recommendedProducts)) {
-            return payloadData.recommendedProducts;
-        }
-
-        return [];
-    },
-
-    hasRecommendations(payloadData) {
-        return Wick.BloomreachWidget.normalizePayload(payloadData).length > 0;
-    },
-
-    getDisplayPrice(product) {
-        return product.displayPrice || product.price || {};
-    },
-
-    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 '';
-    },
-
-    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 '';
-    },
-
-    getExcVatWasPrice(product) {
-        const priceExclusiveVat = product.priceExclusiveVat || null;
-        const displayPriceExclusiveVat = product.displayPriceExclusiveVat || null;
-        const wasPrice =
-            (displayPriceExclusiveVat && displayPriceExclusiveVat.wasPrice) ||
-            (priceExclusiveVat && priceExclusiveVat.wasPrice);
-
-        if (wasPrice && wasPrice.formattedValue) {
-            return wasPrice.formattedValue;
-        }
-
-        if (typeof wasPrice === 'number') {
-            return Wick.BloomreachWidget.formatPrice(wasPrice);
-        }
-
-        return wasPrice || '';
-    },
-
-    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] ||
-            {}
-        );
-    },
-
-    getProductRenderData(product, options = {}) {
-        const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
-        const displayPriceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
-        const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
-        const excVatWasPriceFormatted = Wick.BloomreachWidget.getExcVatWasPrice(product);
-        const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
-
-        return {
-            ...product,
-            price: displayPrice,
-            image:
-                options.image ||
-                Wick.BloomreachWidget.getProductImage(product, options.fallbackProduct),
-            wasPriceFormatted,
-            'switch-vat': isSwitchVat,
-            incVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice),
-            incVatValue: Wick.BloomreachWidget.getPriceValue(displayPrice),
-            excVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPriceExcVat),
-            excVatValue: Wick.BloomreachWidget.getPriceValue(displayPriceExcVat),
-            incVatWasPriceFormatted: wasPriceFormatted,
-            excVatWasPriceFormatted: Wick.BloomreachWidget.getExcVatWasPrice(product),
-        };
-    },
-
-    drawRating($root) {
-        const { ratingOverlay, starOverlay } = Wick.BloomreachWidget.el;
-
-        $root.find(ratingOverlay).each(function () {
-            let rating = parseFloat($(this).attr('data-rating')) || 0;
-            const $stars = $(this).children(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');
-                }
-            });
-        });
-    },
-
-    dispatchWidgetEvent(eventName, payload) {
-        return new Promise(function (resolve, reject) {
-            const eventDetail = { resolve, reject };
-            const event = createEvent(eventName, payload, eventDetail);
-
-            window.dispatchEvent(event);
-        });
-    },
-
-    reapplyVatDisplay() {
-        if (!Wick.VatToggle || typeof Wick.VatToggle.isActive !== 'function') {
-            return;
-        }
-
-        const { vatInc, vatExc } = Wick.BloomreachWidget.el;
-        const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME || 'd-none';
-        const isExcVatActive = Wick.VatToggle.isActive();
-
-        $(vatInc).toggleClass(hiddenClassName, isExcVatActive);
-        $(vatExc).toggleClass(hiddenClassName, !isExcVatActive);
-    },
-
-    bindVatToggle(namespace) {
-        if (!Wick.VatToggle || !Wick.VatToggle.TOGGLE_VAT_EVENT_NAME) {
-            return;
-        }
-
-        const eventName = `${Wick.VatToggle.TOGGLE_VAT_EVENT_NAME}.${namespace}`;
-
-        $(window).off(eventName).on(eventName, Wick.BloomreachWidget.reapplyVatDisplay);
-    },
-
-    formatPrice(value) {
-        return new Intl.NumberFormat('en-GB', {
-            style: 'currency',
-            currency: 'GBP',
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        }).format(value);
-    },
-};
-
-Wick.BloomreachWidget.registerWidgets([
-    {
-        type: 'completeYourProject',
-        widget: CompleteYourProjectWidget,
-    },
-    {
-        type: 'whyNotAdd',
-        widget: WhyNotAddWidget,
-    },
-]);

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

@@ -1,196 +0,0 @@
-var Wick = window.Wick || {};
-
-import { createLoadingButton } from '../utils/create-loading-button';
-
-const Handlebars = require('hbsfy/runtime');
-
-Handlebars.registerPartial('loader', require('../../../elements/loader.hbs'));
-Handlebars.registerPartial('button', require('../../../components/base/button.hbs'));
-Handlebars.registerPartial(
-    'bloomreach/why-not-add',
-    require('../../../components/bloomreach/why-not-add.hbs')
-);
-Handlebars.registerPartial(
-    'bloomreach/why-not-add-skeleton',
-    require('../../../components/bloomreach/why-not-add-skeleton.hbs')
-);
-Handlebars.registerPartial(
-    'bloomreach/why-not-add-card-skeleton',
-    require('../../../components/bloomreach/why-not-add-card-skeleton.hbs')
-);
-Handlebars.registerPartial(
-    'bloomreach/why-not-add-card',
-    require('../../../components/bloomreach/why-not-add-card.hbs')
-);
-Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
-
-const whyNotAddTemplate = require('../../../components/bloomreach/why-not-add-content.hbs');
-
-const WhyNotAddWidget = {
-    ADD_TO_CART_EVENT: 'addToCart',
-
-    products: [],
-    sliders: [],
-    loadingButton: null,
-
-    el: {
-        cta: '.why-not-add-card__cta',
-        next: '[data-why-not-add-next]',
-        pagination: '[data-why-not-add-pagination]',
-        prev: '[data-why-not-add-prev]',
-        root: '[data-why-not-add]',
-        slider: '[data-why-not-add-slider]',
-        widgetContainer: '[data-why-not-add-widget]',
-    },
-
-    normalizeProducts(payloadData) {
-        return Wick.BloomreachWidget.normalizePayload(payloadData)
-            .map(function (item) {
-                return item.baseProduct || item;
-            })
-            .slice(0, 5);
-    },
-
-    renderWidget($container, payloadData) {
-        const products = WhyNotAddWidget.normalizeProducts(payloadData);
-
-        if (!products.length) {
-            $container.empty().hide();
-            return;
-        }
-
-        WhyNotAddWidget.products = products;
-
-        $container
-            .html(
-                whyNotAddTemplate({
-                    products: products.map(Wick.BloomreachWidget.getProductRenderData),
-                    isSingleProduct: products.length === 1,
-                })
-            )
-            .show();
-    },
-
-    destroySliders() {
-        WhyNotAddWidget.sliders.forEach(function (slider) {
-            if (slider && slider.destroy) {
-                slider.destroy(true, true);
-            }
-        });
-
-        WhyNotAddWidget.sliders = [];
-    },
-
-    initSliders($root) {
-        WhyNotAddWidget.destroySliders();
-
-        $root.find(WhyNotAddWidget.el.slider).each(function () {
-            const $slider = $(this);
-            const $widget = $slider.closest(WhyNotAddWidget.el.root);
-            const slidesCount = $slider.find('.swiper-slide').length;
-
-            if (slidesCount <= 1) {
-                return;
-            }
-
-            const slider = new Swiper(this, {
-                roundLengths: true,
-                slidesPerView: 1,
-                spaceBetween: 12,
-                watchOverflow: true,
-                navigation: {
-                    nextEl: $widget.find(WhyNotAddWidget.el.next)[0],
-                    prevEl: $widget.find(WhyNotAddWidget.el.prev)[0],
-                    disabledClass: 'why-not-add__arrow--disabled',
-                },
-                pagination: {
-                    el: $widget.find(WhyNotAddWidget.el.pagination)[0],
-                    clickable: true,
-                    renderBullet(index, className) {
-                        return `<button class="${className}" type="button" aria-label="Go to slide ${
-                            index + 1
-                        }"></button>`;
-                    },
-                    bulletClass: 'why-not-add__pagination-item',
-                    bulletActiveClass: 'why-not-add__pagination-item--active',
-                },
-            });
-
-            WhyNotAddWidget.sliders.push(slider);
-        });
-    },
-    bindAddToCart($root) {
-        $root.off('click.whyNotAdd', WhyNotAddWidget.el.cta);
-        $root.on('click.whyNotAdd', WhyNotAddWidget.el.cta, function (event) {
-            event.preventDefault();
-
-            const $button = $(this);
-            const $card = $button.closest('.why-not-add-card');
-            const productCode = $card.attr('data-product-code');
-
-            if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
-                return;
-            }
-
-            const payload = {
-                productCode,
-            };
-
-            WhyNotAddWidget.loadingButton.start($button);
-
-            Wick.BloomreachWidget.dispatchWidgetEvent(WhyNotAddWidget.ADD_TO_CART_EVENT, payload)
-                .then(function () {
-                    WhyNotAddWidget.loadingButton.stop($button);
-                    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-                })
-                .catch(function () {
-                    WhyNotAddWidget.loadingButton.stop($button);
-                });
-        });
-    },
-
-    bindVatToggle() {
-        if (Wick.BloomreachWidget.bindVatToggle) {
-            Wick.BloomreachWidget.bindVatToggle('whyNotAddVatToggle');
-        }
-    },
-
-    initRenderedWidget($container) {
-        const $root = $container.find(WhyNotAddWidget.el.root);
-
-        if (!$root.length) {
-            return;
-        }
-
-        if (!WhyNotAddWidget.loadingButton) {
-            WhyNotAddWidget.loadingButton = createLoadingButton({
-                text: Wick.BloomreachWidget.el.loadingButtonText,
-                loader: Wick.BloomreachWidget.el.loadingButtonLoader,
-            });
-        }
-
-        Wick.BloomreachWidget.drawRating($root);
-        WhyNotAddWidget.initSliders($root);
-        WhyNotAddWidget.bindAddToCart($root);
-        WhyNotAddWidget.bindVatToggle();
-        Wick.BloomreachWidget.reapplyVatDisplay();
-    },
-
-    init(payloadData) {
-        const $containers = $(WhyNotAddWidget.el.widgetContainer);
-
-        if (!payloadData) {
-            $containers.empty().hide();
-            return;
-        }
-
-        $containers.each(function () {
-            const $container = $(this);
-
-            WhyNotAddWidget.renderWidget($container, payloadData);
-            WhyNotAddWidget.initRenderedWidget($container);
-        });
-    },
-};
-
-export default WhyNotAddWidget;

package/src/components/bloomreach/why-not-add-card-skeleton.hbs

@@ -1,14 +0,0 @@
-<div class="why-not-add-card why-not-add-card--skeleton ssc">
-  <div class="ssc-square why-not-add-card__image"></div>
-
-  <div class="ssc-line why-not-add-card__skeleton-title"></div>
-  <div class="ssc-line why-not-add-card__skeleton-title-short"></div>
-
-  <div class="ssc-line why-not-add-card__skeleton-reviews"></div>
-
-  <div class="ssc-line why-not-add-card__skeleton-price"></div>
-
-  <div class="ssc-line why-not-add-card__skeleton-delivery"></div>
-
-  <div class="ssc-square why-not-add-card__skeleton-cta"></div>
-</div>

package/src/components/bloomreach/why-not-add-card.hbs

@@ -1,73 +0,0 @@
-<div class="why-not-add-card" data-product-code="{{code}}">
-  {{#if image.url}}
-    <img
-        class="why-not-add-card__image"
-        src="{{image.url}}"
-        alt="{{image.altText}}"
-    >
-  {{/if}}
-
-  <div class="why-not-add-card__content">
-    <a href="{{url}}" target="_blank" class="why-not-add-card__title">
-      {{name}}
-    </a>
-
-    {{> reviews-rating
-        externalAverageRating=externalAverageRating
-        externalReviewCount=externalReviewCount
-    }}
-
-    <div class="why-not-add-card__bottom">
-      <div class="why-not-add-card__price-wrap">
-        <div class="why-not-add-card__price {{#if wasPriceFormatted}}why-not-add-card__price--sale{{/if}}">
-          {{#if wasPriceFormatted}}
-            <span class="why-not-add-card__was-price">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{incVatWasPriceFormatted}}</span>
-                <span class="excluding-vat-inherit">{{excVatWasPriceFormatted}}</span>
-              {{else}}
-                {{wasPriceFormatted}}
-              {{/if}}
-            </span>
-
-            <span class="why-not-add-card__sale-price">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{incVatFormattedValue}}</span>
-                <span class="excluding-vat-inherit">{{excVatFormattedValue}}</span>
-              {{else}}
-                {{price.formattedValue}}
-              {{/if}}
-            </span>
-          {{else}}
-            <span class="why-not-add-card__regular-price">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{incVatFormattedValue}}</span>
-                <span class="excluding-vat-inherit">{{excVatFormattedValue}}</span>
-              {{else}}
-                {{price.formattedValue}}
-              {{/if}}
-            </span>
-          {{/if}}
-        </div>
-
-        {{#if switch-vat}}
-          <div class="why-not-add-card__vat-label">
-            <span class="including-vat-inherit">Inc.VAT</span>
-            <span class="excluding-vat-inherit">Exc.VAT</span>
-          </div>
-        {{/if}}
-
-        <div class="why-not-add-card__delivery">Excluding delivery</div>
-      </div>
-
-      {{> button
-          type="button"
-          action=true
-          icon="fas fa-shopping-basket"
-          showLoader=true
-          loaderModifier="why-not-add-card__loader"
-          modification="why-not-add-card__cta"
-      }}
-    </div>
-  </div>
-</div>