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

package/src/js/emulation/tracking-emulation.js

@@ -0,0 +1,38 @@
+const TRACKING_WIDGET_SELECTOR = '[data-complete-widget], [data-why-not-add-widget]';
+const TRACKED_EVENT_NAMES = [
+    'brRecommendationWidgetView',
+    'brRecommendationWidgetClick',
+    'brRecommendationWidgetAddToCart',
+];
+
+function initializeTrackingEmulation() {
+    if (
+        !document.querySelector(TRACKING_WIDGET_SELECTOR) ||
+        window.__trackingEmulationInitialized
+    ) {
+        return;
+    }
+
+    window.__trackingEmulationInitialized = true;
+    window.dataLayer = window.dataLayer || [];
+
+    const originalPush = window.dataLayer.push;
+
+    window.dataLayer.push = function () {
+        const entries = Array.prototype.slice.call(arguments);
+        const result = originalPush.apply(window.dataLayer, entries);
+
+        entries.forEach(function (entry) {
+            if (!entry || TRACKED_EVENT_NAMES.indexOf(entry.event) === -1) {
+                return;
+            }
+
+            console.log('[TRACKING EMULATION]', entry.event, entry);
+            console.log('[DATA LAYER]', window.dataLayer.slice());
+        });
+
+        return result;
+    };
+}
+
+$(document).ready(initializeTrackingEmulation);

package/src/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/src/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/src/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/src/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/src/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/src/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/src/page_payment-details-billie-registered-only.html

@@ -0,0 +1,76 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Billie" isAsideSticky="true" clearPayIcon=true billieIcon=true}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+
+<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
+{{/content}}
+{{#content "notification"}}
+{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
+{{/content}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="2"}}
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true hideDeliveryCostMessage=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+  <h3 class="delivery-block__heading">Delivery Information</h3>
+  <div class="delivery-block__wrapper">
+    {{#with checkoutOrder.deliveryPayments.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="click-collect-block">
+  <h3 class="click-collect-block__heading">Click & Collect</h3>
+  <div class="click-collect-block__wrapper">
+    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="billing-payment-block">
+  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+  <div class="billing-payment-block__wrapper">
+    {{> checkout-payment-details-v2
+      apple-pay=true
+      google-pay=true
+      clear-pay=true
+      billie=true
+      edit-bill-mod=true
+      billie-form=true
+      open-delivery-block=true
+      billie-business-type="REGISTERED_SOLE_TRADER_BUSINESS"
+    }}
+  </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script
+    async
+    src="https://pay.google.com/gp/p/js/pay.js">
+</script>
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+<script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
+<script defer src="./js/page/billie-business-type.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
+{{/content}}
+{{/extend}}

package/src/page_payment-details-billie-unregistered-only.html

@@ -0,0 +1,76 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Billie" isAsideSticky="true" clearPayIcon=true billieIcon=true}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+
+<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
+{{/content}}
+{{#content "notification"}}
+{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
+{{/content}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="2"}}
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true hideDeliveryCostMessage=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+  <h3 class="delivery-block__heading">Delivery Information</h3>
+  <div class="delivery-block__wrapper">
+    {{#with checkoutOrder.deliveryPayments.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="click-collect-block">
+  <h3 class="click-collect-block__heading">Click & Collect</h3>
+  <div class="click-collect-block__wrapper">
+    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="billing-payment-block">
+  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+  <div class="billing-payment-block__wrapper">
+    {{> checkout-payment-details-v2
+      apple-pay=true
+      google-pay=true
+      clear-pay=true
+      billie=true
+      edit-bill-mod=true
+      billie-form=true
+      open-delivery-block=true
+      billie-business-type="UNREGISTERED_SOLE_TRADER_BUSINESS"
+    }}
+  </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script
+    async
+    src="https://pay.google.com/gp/p/js/pay.js">
+</script>
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+<script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
+<script defer src="./js/page/billie-business-type.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
+{{/content}}
+{{/extend}}

package/src/sitemap.html

@@ -992,6 +992,18 @@
                                 Billie Basket
                             </a>
                         </li>
+                        <li>
+                            <span class="page-id">5</span>
+                            <a href="page_payment-details-billie-unregistered-only.html" target="_blank">
+                                Billie - Payment details with unregistered business type only
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">6</span>
+                            <a href="page_payment-details-billie-registered-only.html" target="_blank">
+                                Billie - Payment details with registered business type only
+                            </a>
+                        </li>
                     </ul>
                     <h3>
                         Pages with Gift Cards