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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.113.0-develop.2",
+  "version": "2.113.0-develop.5",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/base/button.hbs

@@ -15,6 +15,13 @@
     <span class="loading-button__loader d-none">
       {{> loader modifier=loaderModifier}}
     </span>
+
+
+    {{#if successIcon}}
+      <span class="icon button__icon button__icon--success d-none">
+        <i class="{{successIcon}}"></i>
+      </span>
+    {{/if}}
   {{else}}
     {{#if icon}}
       <i class="{{icon}}"></i>

package/src/components/bloomreach/complete-your-project-skeleton.hbs

@@ -0,0 +1,21 @@
+<div class="complete-widget">
+  <h3 class="complete-widget__title text-center">
+    {{#if title}}{{title}}{{else}}Complete your project{{/if}}
+  </h3>
+
+  <div class="complete-widget__content" data-complete-widget-content>
+    <div class="complete-widget__wrapper">
+      {{> bloomreach/complete-card-skeleton}}
+
+      <div class="complete-widget__divider">
+        <i class="fal fa-plus"></i>
+      </div>
+
+      {{> bloomreach/complete-card-skeleton}}
+      {{> bloomreach/complete-card-skeleton}}
+      {{> bloomreach/complete-card-skeleton}}
+    </div>
+
+    {{> bloomreach/complete-summary-skeleton}}
+  </div>
+</div>

package/src/components/bloomreach/complete-your-project.hbs

@@ -1,21 +1,6 @@
-<div class="complete-widget">
-  <h3 class="complete-widget__title text-center">
-    {{#if title}}{{title}}{{else}}Complete your project{{/if}}
-  </h3>
-
-  <div class="complete-widget__content" data-complete-widget-content>
-    <div class="complete-widget__wrapper">
-      {{> bloomreach/complete-card-skeleton}}
-
-      <div class="complete-widget__divider">
-        <i class="fal fa-plus"></i>
-      </div>
-
-      {{> bloomreach/complete-card-skeleton}}
-      {{> bloomreach/complete-card-skeleton}}
-      {{> bloomreach/complete-card-skeleton}}
-    </div>
-
-    {{> bloomreach/complete-summary-skeleton}}
-  </div>
-</div>
+<div
+    data-complete-widget
+    {{#if context}}data-mock-key="{{context}}"{{/if}}
+>
+  {{> bloomreach/complete-your-project-skeleton}}
+</div>

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

@@ -1,4 +1,4 @@
-<div class="why-not-add-card why-not-add-card--skeleton ssc">
+<div class="why-not-add-card-wrapper 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>
@@ -11,4 +11,4 @@
   <div class="ssc-line why-not-add-card__skeleton-delivery"></div>
 
   <div class="ssc-square why-not-add-card__skeleton-cta"></div>
-</div>
+</div>

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

@@ -1,73 +1,92 @@
-<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-wrapper">
+  <div class="why-not-add-card" data-product-code="{{code}}">
+    {{#if showBadge}}
+      {{#if badge.text}}
+        <div
+            class="why-not-add-card__badge"
+            style="background-color: {{badge.color}}; color: {{badge.textColor}};"
+        >
+          {{badge.text}}
+        </div>
+      {{/if}}
+    {{/if}}
+    {{#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>
+    <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
-    }}
+      {{> 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>
+      <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>
+                {{else}}
+                  {{wasPriceFormatted}}
+                {{/if}}
+              </span>
 
-            <span class="why-not-add-card__sale-price">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{incVatFormattedValue}}</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>
+                {{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>
+                {{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>
 
-        {{#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>
 
-        <div class="why-not-add-card__delivery">Excluding delivery</div>
+        {{> button
+            type="button"
+            action=true
+            icon="fas fa-shopping-basket"
+            successIcon="fas fa-check"
+            showLoader=true
+            loaderModifier="why-not-add-card__loader"
+            modification="why-not-add-card__cta"
+        }}
       </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>
+  {{#if addToCartError}}
+    <div class="why-not-add-card__error d-none">
+      <i class="icon fas fa-times-circle fa-w-16"></i>
+      <span data-add-to-cart-error>{{addToCartError}}</span>
+    </div>
+  {{/if}}
+</div>

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

@@ -1,6 +1,6 @@
-<div class="why-not-add {{#if isSingleProduct}}why-not-add--single{{/if}}" data-why-not-add>
+<div class="why-not-add {{modifier}} {{#if isSingleProduct}}why-not-add--single{{/if}}" data-why-not-add>
   <div class="why-not-add__header">
-    <h3 class="why-not-add__title">Why not add</h3>
+    <h3 class="why-not-add__title">{{title}}</h3>
 
     {{#unless isSingleProduct}}
       <div class="why-not-add__arrows">
@@ -38,4 +38,4 @@
   {{#unless isSingleProduct}}
     <div class="why-not-add__pagination" data-why-not-add-pagination></div>
   {{/unless}}
-</div>
+</div>

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

@@ -1,6 +1,6 @@
 <div
     data-why-not-add-widget
-    data-mock-key="{{context}}"
+    {{#if context}}data-mock-key="{{context}}"{{/if}}
 >
   {{> bloomreach/why-not-add-skeleton}}
 </div>

package/src/js/components/general/cart-slider.js

@@ -1,5 +1,30 @@
 const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
 
+function waitUntilVisible($element, callback) {
+    if (!$element.length) {
+        return;
+    }
+
+    const element = $element[0];
+    const rect = element.getBoundingClientRect();
+
+    if (rect.width > 0 && rect.height > 0) {
+        callback();
+        return;
+    }
+
+    const observer = new ResizeObserver(function (entries) {
+        const { width, height } = entries[0].contentRect;
+
+        if (width > 0 && height > 0) {
+            observer.disconnect();
+            callback();
+        }
+    });
+
+    observer.observe(element);
+}
+
 createPopupSlider({
     type: 'cart',
     sliderSelector: '.custom-slider.just-added',
@@ -15,16 +40,28 @@ createPopupSlider({
             $('body').append(cartSliderHTML);
         }
 
-        const htmlContent = event.detail.html;
+        const $slider = $('.custom-slider.just-added').last();
+        const htmlContent = event.detail.cartPopupHtml || event.detail.html;
 
         if (htmlContent) {
-            $(el.slider).append(htmlContent);
+            $slider.append(htmlContent);
         }
 
+        const $sliderWrap = $slider.find('.custom-slider__wrap').last();
+        const dontForgetPayload = event.detail.recommendationWidget;
+
         showSlider();
 
-        if ($(el.sliderWrap).length) {
-            $(el.sliderWrap).on(
+        if ($sliderWrap.length && Wick.BloomreachWidget?.hasRecommendations(dontForgetPayload)) {
+            waitUntilVisible($slider, function () {
+                Wick.BloomreachWidget.init('dontForget', dontForgetPayload, {
+                    container: $sliderWrap,
+                });
+            });
+        }
+
+        if ($sliderWrap.length) {
+            $sliderWrap.on(
                 'scroll',
                 _.debounce(() => handleScroll(el.sliderWrap), 100)
             );

package/src/js/emulation/complete-your-project-loading.js

@@ -0,0 +1,16 @@
+var Wick = window.Wick || {};
+
+$(document).ready(function () {
+    const $container = $('[data-complete-widget]');
+
+    if (!$container.length) {
+        return;
+    }
+
+    window.setTimeout(function () {
+        const mockDataKey = $container.data('mock-key');
+        const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
+
+        Wick.BloomreachWidget.init('completeYourProject', payloadData);
+    }, 3000);
+});

package/src/js/emulation/custom-slider-emulation.js

@@ -1,21 +1,34 @@
-function simulateHybrisSendingHtml() {
-    const htmlFromHybris = Wick.FEMock.cartPDP;
-    const event = new CustomEvent('productAddedToCart', {
-        detail: { html: htmlFromHybris },
-    });
-    window.dispatchEvent(event);
+var Wick = window.Wick || {};
+
+import { getNextCartAddScenario, dispatchCartScenario } from './just-added-scenarios-emulation';
+
+function getCartMock() {
+    const cartMockKey = $('.pdp__main').data('cart-mock-key') || 'cartPDP';
+
+    return Wick.FEMock[cartMockKey];
+}
+
+function simulateHybrisSendingHtml(event) {
+    event.preventDefault();
+
+    const scenario = getNextCartAddScenario();
+    const cartMock = getCartMock();
+
+    dispatchCartScenario(cartMock, scenario);
 }
 
 function bindResolveEvent(events) {
     $(window).on(events.join(' '), function ({ detail: { resolve } }) {
-        setTimeout(() => {
+        setTimeout(function () {
             resolve();
         }, 200);
     });
 }
 
 $(document).ready(function () {
-    $('.btn-add-to-basket').on('click', simulateHybrisSendingHtml);
+    $(document)
+        .off('click.customSliderEmulation', '.btn-add-to-basket')
+        .on('click.customSliderEmulation', '.btn-add-to-basket', simulateHybrisSendingHtml);
 
     bindResolveEvent([
         'CLOSE_JUST_ADDED',

package/src/js/emulation/dont-forget-loading.js

@@ -0,0 +1,36 @@
+var Wick = window.Wick || {};
+
+let shouldFailNext = false;
+
+const RESPONSE_MESSAGES = {
+    success: {
+        messageType: 'success',
+        messageText: 'Item added to cart',
+    },
+    error: {
+        messageType: 'error',
+        messageText: 'Product has not been added to basket',
+    },
+};
+
+function bindDontForgetAddToCartEvent() {
+    $(window)
+        .off('addToCart.dontForgetEmulation')
+        .on('addToCart.dontForgetEmulation', function ({ detail = {} }) {
+            const { payload, resolve } = detail;
+
+            if (!payload || payload.doNotShowAddedProductPopup !== true) {
+                return;
+            }
+
+            shouldFailNext = !shouldFailNext;
+
+            window.setTimeout(function () {
+                resolve(shouldFailNext ? RESPONSE_MESSAGES.error : RESPONSE_MESSAGES.success);
+            }, 2000);
+        });
+}
+
+$(document).ready(function () {
+    bindDontForgetAddToCartEvent();
+});

package/src/js/emulation/just-added-scenarios-emulation.js

@@ -0,0 +1,131 @@
+var Wick = window.Wick || {};
+
+const cartAddScenarios = [
+    {
+        status: 'SUCCESS',
+        icon: 'fas fa-check-circle',
+        iconClass: 'success',
+        message: "You've just added",
+        description: 'Excluding items already in basket',
+        showDontForget: true,
+    },
+    {
+        status: 'PARTIAL_INSUFFICIENT_STOCK',
+        icon: 'fas fa-exclamation-circle',
+        iconClass: 'warning',
+        message:
+            'A lower quantity of this product has been added to your Basket due to insufficient stock',
+        description: '',
+        showDontForget: true,
+    },
+    {
+        status: 'PARTIAL_MAX_QTY',
+        icon: 'fas fa-exclamation-circle',
+        iconClass: 'warning',
+        message: 'A lower quantity of product(s) was added to the basket',
+        description:
+            'We are only able to fulfil a maximum of 30 Blue Circle Ready To Use Postcrete - 20kg per order',
+        showDontForget: true,
+    },
+    {
+        status: 'MAX_QTY_ERROR',
+        icon: 'fas fa-times-circle',
+        iconClass: 'error',
+        message: 'Maximum of 30 Blue Circle Ready To Use Postcrete - 20kg per order',
+        description: '',
+        showDontForget: true,
+    },
+    {
+        status: 'MIN_QTY_ERROR',
+        icon: 'fas fa-times-circle',
+        iconClass: 'error',
+        message: 'Minimum of 2 Blue Circle Ready To Use Postcrete - 20kg per order',
+        description: '',
+        showDontForget: true,
+    },
+    {
+        status: 'PRODUCT_NOT_FOUND',
+        icon: 'fas fa-times-circle',
+        iconClass: 'error',
+        message: 'Unable to add to basket',
+        description: 'An error occurred when adding to basket',
+        showDontForget: false,
+    },
+    {
+        status: 'INSUFFICIENT_STOCK_ERROR',
+        icon: 'fas fa-times-circle',
+        iconClass: 'error',
+        message: 'Not added to basket due to insufficient stock',
+        description: '',
+        showDontForget: false,
+    },
+];
+
+let currentScenarioIndex = 0;
+
+export function getNextCartAddScenario() {
+    const scenario = cartAddScenarios[currentScenarioIndex];
+
+    currentScenarioIndex = (currentScenarioIndex + 1) % cartAddScenarios.length;
+
+    return scenario;
+}
+
+function getMockRecommendationWidget(html) {
+    if (!html || !Wick.FEMock || !Wick.FEMock.dataBloomreach) {
+        return null;
+    }
+
+    const $html = $(html);
+    const $sliderWrap = $html
+        .filter('.custom-slider__wrap')
+        .add($html.find('.custom-slider__wrap'))
+        .first();
+
+    const mockDataKey = $sliderWrap.attr('data-mock-key');
+
+    return mockDataKey ? Wick.FEMock.dataBloomreach[mockDataKey] : null;
+}
+
+export function createCartScenarioHtml(baseHtml, scenario) {
+    const $root = $('<div>').html(baseHtml);
+    const $message = $root.find('.custom-slider__message');
+    const $notice = $message.find('.messages__notice');
+
+    $message.find('.icon-wrap').first().replaceWith(`
+        <span class="icon-wrap ${scenario.iconClass}">
+            <i class="${scenario.icon}"></i>
+        </span>
+    `);
+
+    $message.find('.messages__text span').text(scenario.message);
+
+    if (scenario.description) {
+        $notice.text(scenario.description);
+    } else {
+        $notice.remove();
+    }
+
+    if (!scenario.showDontForget) {
+        $root.find('.custom-slider__wrap').removeAttr('data-mock-key');
+    }
+
+    return $root.html();
+}
+
+export function dispatchCartScenario(baseHtml, scenario) {
+    const html = createCartScenarioHtml(baseHtml, scenario);
+    const recommendationWidget = scenario.showDontForget ? getMockRecommendationWidget(html) : null;
+
+    window.dispatchEvent(
+        new CustomEvent('productAddedToCart', {
+            detail: {
+                html,
+                cartPopupHtml: html,
+                addToCartStatus: scenario.status,
+                showDontForget: scenario.showDontForget,
+                recommendationWidget,
+            },
+        })
+    );
+}

package/src/js/emulation/mini-basket.js

@@ -1,39 +1,39 @@
 var Wick = Wick || {};
-Wick.ShoppingCart = (function(){
-  var $btn = $('.header-minicart__switcher');
-
-  function isEmpty() {
-    return localStorage.isEmpty === 'true';
-  }
-
-  function clear() {
-    localStorage.isEmpty = true;
-    $btn.find('.header-minicart__counter').removeClass('_is-visible');
-    Wick.MiniBasket.disableRollover();
-  }
-
-  function add() {
-    localStorage.isEmpty = false;
-    $btn.find('.header-minicart__counter').addClass('_is-visible');
-  }
-
-  function bindEvents() {
-    $('.btn-add-to-basket, .page-product-details .card-store-collect__btn').on('click', add);
-  }
-
-  var init = function () {
-    bindEvents();
-
-    if(isEmpty()){
-      clear();
-    } else {
-      $btn.find('.header-minicart__counter').addClass('_is-visible');
+Wick.ShoppingCart = (function () {
+    var $btn = $('.header-minicart__switcher');
+
+    function isEmpty() {
+        return localStorage.isEmpty === 'true';
+    }
+
+    function clear() {
+        localStorage.isEmpty = true;
+        $btn.find('.header-minicart__counter').removeClass('_is-visible');
+        Wick.MiniBasket.disableRollover();
+    }
+
+    function add() {
+        localStorage.isEmpty = false;
+        $btn.find('.header-minicart__counter').addClass('_is-visible');
     }
-  };
 
-  $(document).ready(init);
+    function bindEvents() {
+        $('.btn-add-to-basket, .page-product-details .card-store-collect__btn').on('click', add);
+    }
+
+    var init = function () {
+        bindEvents();
+
+        if (isEmpty()) {
+            clear();
+        } else {
+            $btn.find('.header-minicart__counter').addClass('_is-visible');
+        }
+    };
+
+    $(document).ready(init);
 
-  return {
-    clear: clear
-  };
+    return {
+        clear: clear,
+    };
 })();