wickes-css2 2.112.0-why-not-add.4 → 2.112.0

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

@@ -0,0 +1,87 @@
+import { pushDataLayerEvent } from '../utils/data-layer';
+
+const EVENT_NAMES = {
+    view: 'brRecommendationWidgetView',
+    click: 'brRecommendationWidgetClick',
+    addToCart: 'brRecommendationWidgetAddToCart',
+};
+
+function disconnectViewObserver(state) {
+    if (!state.viewObserver) {
+        return;
+    }
+
+    state.viewObserver.disconnect();
+    state.viewObserver = null;
+}
+
+function observeView(state, elements) {
+    if (!window.IntersectionObserver) {
+        return;
+    }
+
+    elements = Array.isArray(elements) ? elements : [elements];
+
+    state.viewObserver = new IntersectionObserver(function (entries) {
+        if (
+            entries.some(function (entry) {
+                return entry.isIntersecting;
+            })
+        ) {
+            pushDataLayerEvent(EVENT_NAMES.view, state.widgetData);
+            disconnectViewObserver(state);
+        }
+    });
+
+    elements.forEach(function (element) {
+        if (element) {
+            state.viewObserver.observe(element);
+        }
+    });
+}
+
+function trackClick(state, itemId) {
+    pushDataLayerEvent(EVENT_NAMES.click, {
+        ...state.widgetData,
+        item_id: itemId,
+    });
+}
+
+function trackAddToCart(state, items) {
+    pushDataLayerEvent(EVENT_NAMES.addToCart, {
+        ...state.widgetData,
+        items,
+    });
+}
+
+export function createBloomreachWidgetTracking() {
+    const state = {
+        initWidgetPayload: null,
+        viewObserver: null,
+    };
+
+    return {
+        setPayload(payloadData) {
+            disconnectViewObserver(state);
+            const metadata = payloadData.widgetMetadata;
+
+            state.widgetData = {
+                wrid: metadata.responseId,
+                wid: metadata.id,
+                wty: metadata.type,
+            };
+        },
+
+        observeView(element) {
+            observeView(state, element);
+        },
+
+        trackClick(itemId) {
+            trackClick(state, itemId);
+        },
+
+        trackAddToCart(items) {
+            trackAddToCart(state, items);
+        },
+    };
+}

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

@@ -1,5 +1,6 @@
 var Wick = window.Wick || {};
 
+import { isApp } from '../utils/helpers';
 import { createEvent } from '../utils/create-event';
 import CompleteYourProjectWidget from './complete-your-project-widget';
 import WhyNotAddWidget from './why-not-add-widget';
@@ -80,6 +81,14 @@ Wick.BloomreachWidget = {
         return '';
     },
 
+    removeBlankTargets($root) {
+        if (!isApp()) {
+            return;
+        }
+
+        $root.find('a[target="_blank"]').removeAttr('target');
+    },
+
     getWasPrice(product) {
         const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
 

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

@@ -4,6 +4,7 @@ import { createCountStepper } from '../utils/create-count-stepper';
 import { createDropdown } from '../utils/custom-dropdown';
 import { createLoadingButton } from '../utils/create-loading-button';
 import { createToast } from '../utils/create-toast';
+import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
 
 const Handlebars = require('hbsfy/runtime');
 
@@ -34,6 +35,7 @@ const CompleteYourProjectWidget = {
     lastCalculationResponse: null,
     dropdownCurrent: {},
     toast: null,
+    tracking: createBloomreachWidgetTracking(),
 
     el: {
         cardCheckbox: '.complete-card__select input[type="checkbox"]',
@@ -427,6 +429,55 @@ const CompleteYourProjectWidget = {
         });
     },
 
+    getSelectedTrackingItems($root) {
+        const { completeCard, cardCheckbox, recommendationIndexAttr } =
+            CompleteYourProjectWidget.el;
+        const items = [];
+
+        $root.find(completeCard).each(function () {
+            const $card = $(this);
+            const recommendationIndex = Number($card.attr(recommendationIndexAttr));
+
+            if (recommendationIndex === 0 || !$card.find(cardCheckbox).prop('checked')) {
+                return;
+            }
+
+            const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+            const baseProduct = recommendation && recommendation.baseProduct;
+            const selectedProduct = CompleteYourProjectWidget.getCardProduct($card);
+
+            if (!baseProduct || !baseProduct.code || !selectedProduct || !selectedProduct.code) {
+                return;
+            }
+
+            items.push({
+                item_id: baseProduct.code,
+                sku: selectedProduct.code,
+            });
+        });
+
+        return items;
+    },
+
+    bindProductTracking($root) {
+        const { completeCard, recommendationIndexAttr, titleEl } = CompleteYourProjectWidget.el;
+
+        $root.off('click.bloomreachWidgetTracking', titleEl);
+        $root.on('click.bloomreachWidgetTracking', titleEl, function () {
+            const $card = $(this).closest(completeCard);
+            const recommendationIndex = Number($card.attr(recommendationIndexAttr));
+
+            if (recommendationIndex === 0) {
+                return;
+            }
+
+            const recommendation = CompleteYourProjectWidget.recommendations[recommendationIndex];
+            const baseProduct = recommendation && recommendation.baseProduct;
+
+            CompleteYourProjectWidget.tracking.trackClick(baseProduct && baseProduct.code);
+        });
+    },
+
     updateSummary($root, response = {}) {
         const totalPriceExclusiveVat = response.totalPriceExclusiveVat || response.totalExcVatPrice;
 
@@ -818,6 +869,12 @@ const CompleteYourProjectWidget = {
                 return;
             }
 
+            const trackingItems = CompleteYourProjectWidget.getSelectedTrackingItems($root);
+
+            if (trackingItems.length) {
+                CompleteYourProjectWidget.tracking.trackAddToCart(trackingItems);
+            }
+
             CompleteYourProjectWidget.dispatchAddToCart($root, $button);
         });
     },
@@ -991,6 +1048,7 @@ const CompleteYourProjectWidget = {
         CompleteYourProjectWidget.bindDropdowns();
         CompleteYourProjectWidget.bindDropdownValidation($completeWidget);
         CompleteYourProjectWidget.bindAddToCart($completeWidget);
+        CompleteYourProjectWidget.bindProductTracking($completeWidget);
         CompleteYourProjectWidget.bindVatToggle();
         CompleteYourProjectWidget.initQuantityFields($completeWidget);
 
@@ -1007,12 +1065,19 @@ const CompleteYourProjectWidget = {
     init(payloadData) {
         const $containers = $(CompleteYourProjectWidget.el.widgetContainer);
 
+        CompleteYourProjectWidget.tracking.setPayload(payloadData);
+
         if (!payloadData || !Wick.BloomreachWidget.hasRecommendations(payloadData)) {
             $containers.find(CompleteYourProjectWidget.el.completeWidget).hide();
             return;
         }
 
         CompleteYourProjectWidget.renderWidgetFromPayload(payloadData);
+
+        CompleteYourProjectWidget.tracking.observeView([
+            $containers.find(CompleteYourProjectWidget.el.titleEl).get(0),
+            $containers.find(CompleteYourProjectWidget.el.ctaButton).get(0),
+        ]);
     },
 };
 

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

@@ -1,6 +1,7 @@
 var Wick = window.Wick || {};
 
 import { createLoadingButton } from '../utils/create-loading-button';
+import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
 
 const Handlebars = require('hbsfy/runtime');
 
@@ -32,11 +33,15 @@ const WhyNotAddWidget = {
     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]',
@@ -119,14 +124,26 @@ const WhyNotAddWidget = {
             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('.why-not-add-card');
-            const productCode = $card.attr('data-product-code');
+            const $card = $button.closest(WhyNotAddWidget.el.productCard);
+            const productCode = $card.attr(WhyNotAddWidget.el.productCodeAttr);
 
             if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
                 return;
@@ -136,6 +153,13 @@ const WhyNotAddWidget = {
                 productCode,
             };
 
+            WhyNotAddWidget.tracking.trackAddToCart([
+                {
+                    item_id: productCode,
+                    sku: productCode,
+                },
+            ]);
+
             WhyNotAddWidget.loadingButton.start($button);
 
             Wick.BloomreachWidget.dispatchWidgetEvent(WhyNotAddWidget.ADD_TO_CART_EVENT, payload)
@@ -169,9 +193,12 @@ const WhyNotAddWidget = {
             });
         }
 
+        Wick.BloomreachWidget.removeBlankTargets($root);
+
         Wick.BloomreachWidget.drawRating($root);
         WhyNotAddWidget.initSliders($root);
         WhyNotAddWidget.bindAddToCart($root);
+        WhyNotAddWidget.bindProductTracking($root);
         WhyNotAddWidget.bindVatToggle();
         Wick.BloomreachWidget.reapplyVatDisplay();
     },
@@ -179,6 +206,8 @@ const WhyNotAddWidget = {
     init(payloadData) {
         const $containers = $(WhyNotAddWidget.el.widgetContainer);
 
+        WhyNotAddWidget.tracking.setPayload(payloadData);
+
         if (!payloadData) {
             $containers.empty().hide();
             return;
@@ -190,6 +219,11 @@ const WhyNotAddWidget = {
             WhyNotAddWidget.renderWidget($container, payloadData);
             WhyNotAddWidget.initRenderedWidget($container);
         });
+
+        WhyNotAddWidget.tracking.observeView([
+            $containers.find(WhyNotAddWidget.el.productLink).get(0),
+            $containers.find(WhyNotAddWidget.el.cta).get(0),
+        ]);
     },
 };
 

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-why-not-add.4",
+  "version": "2.112.0",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -123,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/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/share-list-modal-without-social-icons.hbs

@@ -18,7 +18,7 @@
 
         <form class="share-list__form" action="#" id="share-list-form">
 
-          {{> form-row type="text" id="share-via-email" label="Share via email" info="Enter email addresses separated by space:"}}
+          {{> form-row type="text" id="share-via-email" label="Share via email"}}
 
           <div class="share-via-email-box">
             {{> form-row type="text"}}

package/src/components/share-list-modal.hbs

@@ -18,7 +18,7 @@
 
             <form class="share-list__form" action="#" id="share-list-form">
 
-                {{> form-row type="text" id="share-via-email" label="Share via email" info="Enter email addresses separated by space:"}}
+                {{> form-row type="text" id="share-via-email" label="Share via email"}}
 
                 <div class="share-via-email-box">
                     {{> form-row type="text"}}