wickes-css2 2.112.0-develop.1 → 2.112.0-develop.11

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

@@ -0,0 +1,230 @@
+var Wick = window.Wick || {};
+
+import { createLoadingButton } from '../utils/create-loading-button';
+import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
+
+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,
+    tracking: createBloomreachWidgetTracking(),
+
+    el: {
+        cta: '.why-not-add-card__cta',
+        next: '[data-why-not-add-next]',
+        pagination: '[data-why-not-add-pagination]',
+        productCard: '.why-not-add-card',
+        productCodeAttr: 'data-product-code',
+        productLink: '.why-not-add-card__title',
+        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);
+        });
+    },
+
+    bindProductTracking($root) {
+        $root.off('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink);
+        $root.on('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink, function () {
+            const productCode = $(this)
+                .closest(WhyNotAddWidget.el.productCard)
+                .attr(WhyNotAddWidget.el.productCodeAttr);
+
+            WhyNotAddWidget.tracking.trackClick(productCode);
+        });
+    },
+
+    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(WhyNotAddWidget.el.productCard);
+            const productCode = $card.attr(WhyNotAddWidget.el.productCodeAttr);
+
+            if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
+                return;
+            }
+
+            const payload = {
+                productCode,
+            };
+
+            WhyNotAddWidget.tracking.trackAddToCart([
+                {
+                    item_id: productCode,
+                    sku: 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.removeBlankTargets($root);
+
+        Wick.BloomreachWidget.drawRating($root);
+        WhyNotAddWidget.initSliders($root);
+        WhyNotAddWidget.bindAddToCart($root);
+        WhyNotAddWidget.bindProductTracking($root);
+        WhyNotAddWidget.bindVatToggle();
+        Wick.BloomreachWidget.reapplyVatDisplay();
+    },
+
+    init(payloadData) {
+        const $containers = $(WhyNotAddWidget.el.widgetContainer);
+
+        WhyNotAddWidget.tracking.setPayload(payloadData);
+
+        if (!payloadData) {
+            $containers.empty().hide();
+            return;
+        }
+
+        $containers.each(function () {
+            const $container = $(this);
+
+            WhyNotAddWidget.renderWidget($container, payloadData);
+            WhyNotAddWidget.initRenderedWidget($container);
+        });
+
+        WhyNotAddWidget.tracking.observeView([
+            $containers.find(WhyNotAddWidget.el.productLink).get(0),
+            $containers.find(WhyNotAddWidget.el.cta).get(0),
+        ]);
+    },
+};
+
+export default WhyNotAddWidget;

package/build/js/page/checkout-payment-details.js

@@ -244,6 +244,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
+                initBillieBusinessType();
                 break;
 
             case 'clearpay':
@@ -324,6 +325,14 @@ Wick.CheckoutPaymentDetails = (function () {
         });
     }
 
+    function initBillieBusinessType() {
+        const $radios = elements.$billieBusiness.find(`input${elements.businessTypeName}`);
+        if ($radios.length === 1) {
+            $radios.prop('checked', true);
+            toggleBusinessTypeFields($radios.val());
+        }
+    }
+
     function forceReflow($element) {
         if (!$element.length) return;
         void $element[0].offsetHeight;
@@ -345,6 +354,7 @@ Wick.CheckoutPaymentDetails = (function () {
 
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
             setBillieStepVisibility(hasSelection);
+            initBillieBusinessType();
 
             const $row = $(this).closest('.form-row[data-row-required]');
             $row.removeClass('form-row_validation-error').find('.form-row__error').remove();

package/build/js/page/utils/data-layer.js

@@ -0,0 +1,9 @@
+export function pushDataLayerEvent(eventName, data) {
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+        event: eventName,
+        data,
+    });
+
+    return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.112.0-develop.1",
+  "version": "2.112.0-develop.11",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,6 @@
     ],
     "src/scss/**/*.{scss,css}": [
       "sass-lint-auto-fix",
-      "prettier --write",
       "sass-lint -c .sasslintrc --"
     ]
   },
@@ -52,7 +51,7 @@
     "gulp-json-concat": "^0.2.0",
     "gulp-json-refs": "^0.1.1",
     "gulp-purgecss": "4.0.3",
-    "gulp-sass": "^4.0.0",
+    "gulp-sass": "^5.0.0",
     "gulp-sass-lint": "^1.4.0",
     "gulp-sitemap": "^5.1.0",
     "gulp-sourcemaps": "^2.6.4",
@@ -60,8 +59,7 @@
     "handlebars-layouts": "^3.1.4",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
-    "mocha": "^6.2.2",
-    "node-sass": "^4.0.0",
+    "mocha": "^10.0.0",
     "postcss": "^8.4.16",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-combine-media-query": "^1.0.1",
@@ -125,10 +123,6 @@
       {
         "name": "develop",
         "prerelease": true
-      },
-      {
-        "name": "custom-tag/*",
-        "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],
     "plugins": [

package/src/components/address-billie.hbs

@@ -4,26 +4,30 @@
       Select your business type
     </label>
 
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> radiobutton
-            id="businessTypeUnregistered"
-            name="businessType"
-            value="unregistered"
-            label="Unregistered Sole Trader / Business"}}
+    {{#unless (eq billie-business-type "REGISTERED_SOLE_TRADER_BUSINESS")}}
+      <div class="form-row">
+        <div class="form-row__field">
+          {{> radiobutton
+              id="businessTypeUnregistered"
+              name="businessType"
+              value="unregistered"
+              label="Unregistered Sole Trader / Business"}}
+        </div>
       </div>
-    </div>
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> radiobutton
-            id="businessTypeRegistered"
-            name="businessType"
-            value="registered"
-            labelClass="registered-label"
-            label="Registered Sole Trader / Business"
-            tooltip="A Registered Business is one that has undergone the official process of being recognised and registered with Companies House, establishing its legal identity and enabling it to operate within a specific jurisdiction, such as a limited company. A Registered Business will have been issued a Company Registration Number (CRN) from Companies House."}}
+    {{/unless}}
+    {{#unless (eq billie-business-type "UNREGISTERED_SOLE_TRADER_BUSINESS")}}
+      <div class="form-row">
+        <div class="form-row__field">
+          {{> radiobutton
+              id="businessTypeRegistered"
+              name="businessType"
+              value="registered"
+              labelClass="registered-label"
+              label="Registered Sole Trader / Business"
+              tooltip="A Registered Business is one that has undergone the official process of being recognised and registered with Companies House, establishing its legal identity and enabling it to operate within a specific jurisdiction, such as a limited company. A Registered Business will have been issued a Company Registration Number (CRN) from Companies House."}}
+        </div>
       </div>
-    </div>
+    {{/unless}}
   </div>
   <div
       id="unregistered-fields"

package/src/components/bloomreach/complete-card.hbs

@@ -25,38 +25,10 @@
           {{name}}
         </a>
 
-        <div class="complete-card__reviews">
-          <div class="rating-bg">
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-
-            <div class="rating-overlay"
-                 data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}">
-                                <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-            </div>
-
-            <span class="complete-card__reviews-count">
-                (<span class="complete-card__reviews-count-value">{{externalReviewCount}}</span>)
-            </span>
-          </div>
-        </div>
+        {{> reviews-rating
+            externalAverageRating=externalAverageRating
+            externalReviewCount=externalReviewCount
+        }}
       </div>
       <div class="complete-card__options">
         {{#if dropdownOptions.length}}
@@ -125,8 +97,8 @@
 
           {{#if switch-vat}}
             <span class="complete-card__vat-label">
-              <span class="including-vat-inherit">Inc. VAT</span>
-              <span class="excluding-vat-inherit">Exc. VAT</span>
+              <span class="including-vat-inherit">Inc.VAT</span>
+              <span class="excluding-vat-inherit">Exc.VAT</span>
             </span>
           {{/if}}
         </div>

package/src/components/bloomreach/complete-summary.hbs

@@ -19,8 +19,8 @@
           {{/if}}
         </div>
         {{#if switch-vat}}
-          <span class="complete-widget__vat-label including-vat-inherit">Inc. VAT</span>
-          <span class="complete-widget__vat-label excluding-vat-inherit">Exc. VAT</span>
+          <span class="complete-widget__vat-label including-vat-inherit">Inc.VAT</span>
+          <span class="complete-widget__vat-label excluding-vat-inherit">Exc.VAT</span>
         {{/if}}
       </div>
     </div>

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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,73 @@
+<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>

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

@@ -0,0 +1,41 @@
+<div class="why-not-add {{#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>
+
+    {{#unless isSingleProduct}}
+      <div class="why-not-add__arrows">
+        <button
+            class="why-not-add__arrow why-not-add__arrow-prev"
+            type="button"
+            aria-label="Previous slide"
+            data-why-not-add-prev
+        >
+          <i class="fas fa-chevron-left"></i>
+        </button>
+
+        <button
+            class="why-not-add__arrow why-not-add__arrow-next"
+            type="button"
+            aria-label="Next slide"
+            data-why-not-add-next
+        >
+          <i class="fas fa-chevron-right"></i>
+        </button>
+      </div>
+    {{/unless}}
+  </div>
+
+  <div class="swiper-container why-not-add__slider" data-why-not-add-slider>
+    <div class="swiper-wrapper">
+      {{#each products}}
+        <div class="swiper-slide why-not-add__slide">
+          {{> bloomreach/why-not-add-card this}}
+        </div>
+      {{/each}}
+    </div>
+  </div>
+
+  {{#unless isSingleProduct}}
+    <div class="why-not-add__pagination" data-why-not-add-pagination></div>
+  {{/unless}}
+</div>

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

@@ -0,0 +1,9 @@
+<div class="why-not-add why-not-add--skeleton ssc">
+  <div class="why-not-add__header">
+    <div class="ssc-line why-not-add__skeleton-title"></div>
+  </div>
+
+  <div class="why-not-add__skeleton-cards">
+    {{> bloomreach/why-not-add-card-skeleton}}
+  </div>
+</div>

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

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

package/src/components/checkout-edit-billing-address.hbs

@@ -23,7 +23,7 @@
 
     <div class="address-postcode">
       {{> address-postcode-look-up}}
-      {{> address-billie}}
+      {{> address-billie billie-business-type=billie-business-type}}
     </div>
 
     {{#unless no-set-card}}

package/src/components/checkout-payment-details-v2.hbs

@@ -239,7 +239,12 @@
         </div>
       </div>
       <div class="billing-address">
-        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
+        {{> checkout-edit-billing-address
+          actionBlock="true"
+          no-set-card="true"
+          billie-form=billie-form
+          billie-business-type=billie-business-type
+        }}
       </div>
       <div data-existing-card
            class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">

package/src/components/my-account/order.hbs

@@ -2,7 +2,12 @@
   <div class="order__header">
     <h3 class="order__title">{{title}}</h3>
     <div class="order__subtotal-wrap">
-      <p class="order__subtotal">Item(s) subtotal: <b>{{subtotal}}</b></p>
+      {{#if switchVat}}
+        <p class="order__subtotal including-vat">Item(s) subtotal: <b>{{subtotal}}</b></p>
+        <p class="order__subtotal excluding-vat d-none">Item(s) subtotal: <b>{{subtotalExcVat}}</b></p>
+      {{else}}
+        <p class="order__subtotal">Item(s) subtotal: <b>{{subtotal}}</b></p>
+      {{/if}}
       {{> info-icon
           modification="icon-info"
           title=subtotalTooltip

package/src/components/order-item.hbs

@@ -91,20 +91,20 @@
             <div class="order-item__price">
                 <div class="order-item__price-title">Item price:</div>
                 <div class="order-item__price-value">
-                    {{#ifvalue price value='0'}}
+                    {{#ifvalue displayBasePrice value='0'}}
                         <span class="order-item__value">FREE</span>
                     {{else}}
                         {{#if switch-vat}}
                             <div class="including-vat">
-                                <span class="order-item__value">£{{price}}</span>
+                                <span class="order-item__value">£{{displayBasePrice}}</span>
                                 <div class="price-vat">Inc.VAT</div>
                             </div>
                             <div class="excluding-vat d-none">
-                                <span class="order-item__value">£{{priceExcVat}}</span>
+                                <span class="order-item__value">£{{displayBasePriceExclusiveVat}}</span>
                                 <div class="price-vat">Exc.VAT</div>
                             </div>
                         {{else}}
-                            <span class="order-item__value">£{{price}}</span>
+                            <span class="order-item__value">£{{displayBasePrice}}</span>
                         {{/if}}
                     {{/ifvalue}}
                 </div>
@@ -136,15 +136,15 @@
                     {{else}}
                         {{#if switch-vat}}
                             <div class="including-vat">
-                                <span class="order-item__value">£{{total}}</span>
+                                <span class="order-item__value">£{{displayItemTotalWithoutDiscount}}</span>
                                 <div class="price-vat">Inc.VAT</div>
                             </div>
                             <div class="excluding-vat d-none">
-                                <span class="order-item__value">£{{totalExcVat}}</span>
+                                <span class="order-item__value">£{{displayItemTotalWithoutDiscountExclusiveVat}}</span>
                                 <div class="price-vat">Exc.VAT</div>
                             </div>
                         {{else}}
-                            <span class="order-item__value">£{{total}}</span>
+                            <span class="order-item__value">£{{displayItemTotalWithoutDiscount}}</span>
                         {{/if}}
                     {{/ifvalue}}
                 </div>