wickes-css2 2.109.0-test.1 → 2.110.0

package/src/js/emulation/store-locator-load-more.js

@@ -0,0 +1,69 @@
+import { appendLoader, showLoader, hideLoader } from '../page/utils/loader';
+
+function initStoreLocatorLoadMore() {
+    const PAGE_SIZE = 8;
+
+    const SELECTORS = {
+        cards: '.cards-store-list',
+        btnMore: '.store-locator__load-button_more',
+        loader: '.store-locator-loader',
+    };
+
+    const loaderPayload = {
+        wrapper: 'body',
+        hidden: true,
+        modifier: 'store-locator-loader',
+    };
+
+    const $cards = $(SELECTORS.cards);
+    const $btnMore = $(SELECTORS.btnMore);
+
+    let visibleCount = PAGE_SIZE;
+
+    function updateVisibility() {
+        $cards.each(function (index) {
+            $(this).toggle(index < visibleCount);
+        });
+
+        if (visibleCount >= $cards.length) {
+            $btnMore.hide();
+        } else {
+            $btnMore.show();
+        }
+
+        Wick.StoreCardsAlign?.align();
+    }
+
+    function loadMore() {
+        showLoader(SELECTORS.loader);
+        $btnMore.prop('disabled', true);
+
+        setTimeout(() => {
+            visibleCount += PAGE_SIZE;
+            updateVisibility();
+
+            hideLoader(SELECTORS.loader);
+            $btnMore.prop('disabled', false).blur();
+        }, 1000);
+    }
+
+    function init() {
+        if (!$cards.length || !$btnMore.length) {
+            return;
+        }
+
+        if (!$(SELECTORS.loader).length) {
+            appendLoader(loaderPayload);
+        }
+
+        updateVisibility();
+
+        $btnMore.on('click', loadMore);
+    }
+
+    init();
+}
+
+$(document).ready(function () {
+    initStoreLocatorLoadMore();
+});

package/src/js/emulation/switchCalendar.js

@@ -16,20 +16,21 @@ Wick.Calendar = {
         if ($(this).hasClass(Wick.Calendar.el.switchBtnEarlier)) {
             $currentCalendar = $currentCalendar.prev();
             $currentCalendar.removeClass(Wick.Calendar.el.dateSectionHidden);
-
         } else if ($(this).hasClass(Wick.Calendar.el.switchBtnLatest)) {
             $currentCalendar = $currentCalendar.next(Wick.Calendar.el.dateSection);
             $currentCalendar.removeClass(Wick.Calendar.el.dateSectionHidden);
         }
     },
-
 };
 
 $(document).ready(function () {
     function init() {
-
         if (Wick.checkLocalEnv) {
-            $(Wick.Calendar.el.componentDateSection).on('click', Wick.Calendar.el.switchBtn, Wick.Calendar.SwitchCalendar);
+            $(Wick.Calendar.el.componentDateSection).on(
+                'click',
+                Wick.Calendar.el.switchBtn,
+                Wick.Calendar.SwitchCalendar
+            );
         }
     }
 
@@ -39,8 +40,11 @@ $(document).ready(function () {
 
     init();
 
-    $(window).on('resize', _.debounce(function () {
-        unbind();
-        init();
-    }, 250));
+    $(window).on(
+        'resize',
+        _.debounce(function () {
+            unbind();
+            init();
+        }, 250)
+    );
 });

package/src/js/page/basket/mini-basket-total.js

@@ -1,10 +1,11 @@
 import { updateDiscount } from '../components/discounts';
 
 const osEl = {
-    $totalSection: $('.mini-basket__total'),
+    totalSection: '.mini-basket__total',
     checkoutWidgetDetailsDiscount: '.checkout-widget__details-discount',
     checkoutWidgetDetails: '.checkout-widget__details',
     delivery: '.checkout-widget__item-delivery',
+    deliveryCostMessage: '.checkout-widget__item-delivery-cost-message',
     cc: '.checkout-widget__item-cc',
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
@@ -37,26 +38,40 @@ export function updateTotal(data, equalMap, isVoucher) {
 }
 
 function createCheckoutWidgetItem(obj) {
+    const isDelivery = obj.item === osEl.delivery;
     return `
       <li class="checkout-widget__item ${obj.item.substr(1)}">
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
+      ${
+          isDelivery
+              ? `
+      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+          Final delivery cost confirmed at checkout
+        </span>
+      </li>`
+              : ''
+      }
     `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show();
+    $(osEl.deliveryCostMessage).show();
     $(osEl.cc).show();
     if (isVoucher) {
         if (!data.deliveryOrder) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (!data.clickAndCollectOrder) {
             $(osEl.cc).hide();
         }
     } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
             $(osEl.cc).hide();
         }
@@ -64,7 +79,7 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
 }
 
 function calculateFreeDelivery(data) {
-    osEl.$totalSection.each(function () {
+    $(osEl.totalSection).each(function () {
         let $free = $(this).find(osEl.itemFree);
         let $deficit = $(this).find(osEl.itemDeficit);
 

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

@@ -200,6 +200,13 @@ Wick.CheckoutPaymentDetails = (function () {
             .removeAttr('style');
     }
 
+    function showBillingAddressDataCardFields() {
+        const dataCardFields = elements.$billingAddress.find('[data-card]');
+        if (dataCardFields) {
+            dataCardFields.show();
+        }
+    }
+
     function changeDetailsBlock(checkedMethod) {
         if (checkedMethod !== 'billie') {
             resetBillieUi();
@@ -248,6 +255,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 prevClearableMethod === 'card' && clearInputFields();
                 changeLabelText(detailsLabel);
                 prevClearableMethod = checkedMethod;
+                showBillingAddressDataCardFields();
                 break;
 
             case 'apple-pay':

package/src/js/page/components/notify-me.js

@@ -0,0 +1,99 @@
+import { showValidationErrors, clearValidationErrors, isValidEmail } from '../utils/validation';
+
+var Wick = window.Wick || {};
+
+Wick.NotifyMeSubscription = {
+    NOTIFY_ME_EVENT: 'NOTIFY_ME',
+    HIDDEN_CLASS_NAME: 'd-none',
+    el: {
+        notifyMePopup: '#modal-notify-me',
+        notifyMeBtn: '.btn--notify-open',
+
+        form: '#modal-notify-me .notify-me-form',
+        emailInput: '#modal-notify-me #notify-me-email',
+        stateForm: '#modal-notify-me [data-notify-state="form"]',
+        stateSuccess: '#modal-notify-me [data-notify-state="success"]',
+        headerForm: '#modal-notify-me [data-notify-header="form"]',
+        headerSuccess: '#modal-notify-me [data-notify-header="success"]',
+        productId: '#product-code-val',
+    },
+    defaultErrorMessage: 'Something went wrong',
+    invalidEmailMessage: 'Please enter a valid email address',
+    showCustomModal() {
+        $(Wick.NotifyMeSubscription.el.notifyMePopup).modal('show');
+    },
+    getEmail() {
+        return ($(Wick.NotifyMeSubscription.el.emailInput).val() || '').toString().trim();
+    },
+    isEmailValid() {
+        const email = Wick.NotifyMeSubscription.getEmail();
+
+        return isValidEmail(email);
+    },
+    showFormState() {
+        $(Wick.NotifyMeSubscription.el.stateSuccess).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.stateForm).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+
+        $(Wick.NotifyMeSubscription.el.headerSuccess).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.headerForm).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+    },
+    showSuccessState() {
+        $(Wick.NotifyMeSubscription.el.stateForm).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.stateSuccess).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+
+        $(Wick.NotifyMeSubscription.el.headerForm).addClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+        $(Wick.NotifyMeSubscription.el.headerSuccess).removeClass(
+            Wick.NotifyMeSubscription.HIDDEN_CLASS_NAME
+        );
+    },
+    resetValidation() {
+        clearValidationErrors(Wick.NotifyMeSubscription.el.form);
+    },
+    validateForm() {
+        Wick.NotifyMeSubscription.resetValidation();
+
+        if (!Wick.NotifyMeSubscription.isEmailValid()) {
+            showValidationErrors(
+                Wick.NotifyMeSubscription.el.form,
+                Wick.NotifyMeSubscription.invalidEmailMessage
+            );
+            return false;
+        }
+
+        return true;
+    },
+    showError(err = {}) {
+        const msg = err.errMsg || err.errorMessage || Wick.NotifyMeSubscription.defaultErrorMessage;
+
+        showValidationErrors(Wick.NotifyMeSubscription.el.form, msg);
+    },
+    init() {
+        $(document).on('click', Wick.NotifyMeSubscription.el.notifyMeBtn, function (e) {
+            e.preventDefault();
+            Wick.NotifyMeSubscription.showCustomModal();
+        });
+
+        $(Wick.NotifyMeSubscription.el.notifyMePopup).on('hidden.bs.modal', function () {
+            Wick.NotifyMeSubscription.showFormState();
+            clearValidationErrors(Wick.NotifyMeSubscription.el.form);
+        });
+    },
+};
+
+$(document).ready(function () {
+    Wick.NotifyMeSubscription.init();
+});

package/src/js/page/components/order-summary.js

@@ -5,6 +5,7 @@ const osEl = {
     checkoutWidgetDetailsDiscount: '.checkout-widget__details-discount',
     checkoutWidgetDetails: '.checkout-widget__details',
     delivery: '.checkout-widget__item-delivery',
+    deliveryCostMessage: '.checkout-widget__item-delivery-cost-message',
     cc: '.checkout-widget__item-cc',
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
@@ -26,6 +27,22 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
             }
         }
 
+        if (obj.item === osEl.delivery) {
+            $(osEl.delivery).each(function () {
+                if (
+                    !$(this).siblings(osEl.deliveryCostMessage).length &&
+                    !$(this).closest('[data-hide-delivery-cost-message]').length
+                ) {
+                    $(this).after(`
+                      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+                        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+                          Final delivery cost confirmed at checkout
+                        </span>
+                      </li>`);
+                }
+            });
+        }
+
         $(obj.item).find(obj.itemValue).text(obj.dataValue);
         if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
             $(obj.item).find(obj.itemValue).show();
@@ -64,20 +81,37 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
 }
 
 function createCheckoutWidgetItem(obj) {
+    const isDelivery = obj.item === osEl.delivery;
+    const hideMessage = $(osEl.checkoutWidgetDetails).closest(
+        '[data-hide-delivery-cost-message]'
+    ).length;
+    const costMessageExists = $(osEl.deliveryCostMessage).length > 0;
     return `
       <li class="checkout-widget__item ${obj.item.substr(1)}">
         <span>${obj.title}</span>
           <span class="checkout-widget__item-value">${obj.dataValue}</span>
       </li>
+      ${
+          isDelivery && !hideMessage && !costMessageExists
+              ? `
+      <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+        <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+          Final delivery cost confirmed at checkout
+        </span>
+      </li>`
+              : ''
+      }
     `;
 }
 
 function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show();
+    $(osEl.deliveryCostMessage).show();
     $(osEl.cc).show();
     if (isVoucher) {
         if ('deliveryOrder' in data && data.deliveryOrder === false) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         }
 
         if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
@@ -86,6 +120,7 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
     } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide();
+            $(osEl.deliveryCostMessage).hide();
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
             $(osEl.cc).hide();
         }

package/src/js/page/components/store-locator-cards.js

@@ -0,0 +1,76 @@
+var Wick = window.Wick || (window.Wick = {});
+
+Wick.StoreCardsAlign = (function () {
+    const SELECTORS = {
+        card: '.card-store',
+        info: '.card-store__info',
+        accordionHeader: '.opening-times-accordion__header',
+    };
+
+    let resizeTimeout;
+
+    function alignCardInfoHeights() {
+        const rows = [];
+
+        $(SELECTORS.card).each(function () {
+            const $card = $(this);
+            const top = $card.offset().top;
+
+            let row = rows.find((r) => Math.abs(r.top - top) < 5);
+
+            if (!row) {
+                row = { top: top, items: [] };
+                rows.push(row);
+            }
+
+            row.items.push($card);
+        });
+
+        rows.forEach((row) => {
+            let maxHeight = 0;
+
+            // reset
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', '');
+            });
+
+            // find max
+            row.items.forEach(($card) => {
+                const h = $card.find(SELECTORS.info).outerHeight();
+                if (h > maxHeight) maxHeight = h;
+            });
+
+            // apply
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', maxHeight + 'px');
+            });
+        });
+    }
+
+    function bindEvents() {
+        // load
+        $(window).on('load', alignCardInfoHeights);
+
+        // resize
+        $(window).on('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(alignCardInfoHeights, 100);
+        });
+
+        // accordion
+        $(document).on('click', SELECTORS.accordionHeader, () => {
+            setTimeout(alignCardInfoHeights, 0);
+        });
+    }
+
+    function init() {
+        bindEvents();
+    }
+
+    init();
+
+    return {
+        init: init,
+        align: alignCardInfoHeights,
+    };
+})();

package/src/page_checkout_next-day-delivery-details.html

@@ -23,7 +23,7 @@
         Please choose a date for delivery from the calendar below.
       </p>
       <p class="date-selection__info-block">
-        Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
+        Our delivery slots are currently available up to 8 days in advance.<br> We release additional delivery slots daily.
       </p>
       <p class="date-selection__annotation">
         *Individual couriers will provide more information on delivery times, closer to your chosen delivery date.
@@ -32,7 +32,7 @@
 
     <div class="component component-date-selection">
       {{> date-selection
-          titleDelivery="Next and Named day delivery"
+          titleDelivery="Next or Named day delivery"
           subtitleDelivery="Delivery between 7am - 7pm for £7*"
           wisdom=true
       }}

package/src/page_checkout_payment-details-v2-asm.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details-v2.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2="true"}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2="true" hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details_with-card-loader.html

@@ -11,7 +11,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_checkout_payment-details_with-klarna-loader.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_payment-details_with-loader-v2.html

@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_checkout_rapid-delivery-details.html

@@ -17,7 +17,7 @@
     <div class="delivery-block">
         <h3 class="delivery-block__heading">Delivery Information</h3>
         {{> banner-news
-            description="<b>Your order qualifies for Wickes Rapid delivery.</b></br>Alternative delivery options are available."
+            description="<b>Your order qualifies for Rapid delivery.</b></br>Alternative delivery options are available."
             classImg="fas fa-shipping-fast"
         }}
         <div class="delivery-block__wrapper">
@@ -27,14 +27,15 @@
                     Please choose a date for delivery from the calendar below.
                 </p>
                 <p class="date-selection__info-block">
-                    Our delivery slots are currently available up to 8 days in advance. We release additional delivery slots daily.
+                    Our delivery slots are currently available up to 8 days in advance.<br> We release additional delivery slots daily.
                 </p>
+                <p>*Individual couriers will provide more information on delivery times, closer to your chosen delivery date.</p>
             </div>
 
             <div class="component component-date-selection">
                 {{> date-selection
-                    titleDelivery="Wickes Rapid delivery"
-                    subtitleDelivery="Delivery within 3 hours for £12"
+                    titleDelivery="Next or Named day delivery"
+                    subtitleDelivery="Delivery between 7am - 7pm for £12.00"
                     imgDelivery="fas fa-shipping-fast"
                     wisdom=true
                 }}
@@ -131,10 +132,11 @@
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
-
 {{/content}}
 
 {{#content "foot" mode="append"}}
+    {{> loader titleLoader="Loading Rapid delivery..." hidden=true modifier="basket-loader rapid-loader"}}
+
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
 

package/src/page_klarna_payment-details_with-klarna.html

@@ -13,7 +13,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_payment-details-with-billie.html

@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_payment-details-with-clearpay.html

@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_payment-details-with-gift-card.html

@@ -18,7 +18,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true hideDeliveryCostMessage=true}}
 {{/content}}
 
 

package/src/page_payment-details_with_apple-pay.html

@@ -13,7 +13,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true basket="true"}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true basket="true" hideDeliveryCostMessage=true}}
   {{/content}}
 
 

package/src/page_payment-details_with_google-pay.html

@@ -13,7 +13,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true hideDeliveryCostMessage=true}}
 {{/content}}