wickes-css2 2.117.0-develop.1 → 2.117.0-develop.2

package/src/components/find-a-store.hbs

@@ -1,42 +1,58 @@
 <div class="locator">
-  <div class="locator__header-wrapper">
-    {{#if another-store}}
-      <h2>Choose another store</h2>
-    {{else}}
-      <h2>Find a store</h2>
-    {{/if}}
-    <p>There are now more than 230 Wickes stores throughout the UK.</p>
-  </div>
   <div class="form-locator-wrapper">
     <div class="form-bg forms-locator">
-      <form action="#" class="form-locator">
-        {{> form-row dropdown="true" id="store-id" label="Select a store" placeholder="Please select" required="true"}}
-        <div class="form-row">
-          <div class="form-row__field">
-            <div class="form-row__col-btn">
-              <button class="btn btn-primary btn_full">
-                <span class="btn__text">Display store details</span>
+      <div class="locator__header-wrapper">
+        {{#if another-store}}
+          <h2>Choose another store</h2>
+        {{else}}
+          <h2>Find a store</h2>
+        {{/if}}
+        <p>There are now more than 230 Wickes stores throughout the UK.</p>
+      </div>
+
+      <div class="locator__form-wrapper">
+        <form action="#" class="form-locator-list" data-action="{{data-action}}">
+          <div class="form-row" data-row-required data-message="Check that you entered a valid postcode or place name.">
+            <label class="form-row__label" for="postcode-town">Postcode/Town</label>
+            <div class="form-row__field">
+              <input class="tbx form-locator__search-inp" value="" id="postcode-town" name="postcode-town" type="text">
+              <button class="header-search__submit" type="submit">
+                <span class="header-search__submit-icon">
+                  <span class="fas fa-search"></span>
+                </span>
+                <span class="header-search__submit-label">
+                  <span class="btn__text">Search</span>
+                </span>
               </button>
             </div>
           </div>
-        </div>
-      </form>
-      <form action="#" class="form-locator-list" data-action="{{data-action}}">
-        <div class="form-row">
-          <label class="form-row__label" for="postcode-town">Postcode/Town</label>
-          <div class="form-row__field">
-            <input class="tbx form-locator__search-inp" value="" id="postcode-town" name="postcode-town" type="text">
-            <button class="header-search__submit">
-              <span class="header-search__submit-icon">
-                <span class="fas fa-search"></span>
-              </span>
-              <span class="header-search__submit-label">
-                <span class="btn__text">Search</span>
-              </span>
+        </form>
+
+        <button class="locator__near-me" type="button">
+          <span class="locator__near-me-icon">
+            <span class="fas fa-map-pin"></span>
+          </span>
+          <span class="locator__near-me-text">Find a store near me</span>
+        </button>
+
+        <div class="locator__divider"></div>
+
+        <form action="#" class="form-locator">
+          <div class="locator__select-store">
+            {{> form-row dropdown="true" id="store-id" label="Select a store" placeholder="Please select" required="true" row-mod="locator__select-row"}}
+            <button class="btn btn-primary locator__details-button" type="submit">
+              <span class="btn__text">Display store details</span>
             </button>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   </div>
-</div>
+
+  <button class="locator__open-search" type="button">
+    <span class="locator__open-search-icon">
+      <span class="fas fa-search"></span>
+    </span>
+    <span class="locator__open-search-text">Open search</span>
+  </button>
+</div>

package/src/js/emulation/bloomreach-widget-loading.js

@@ -6,6 +6,6 @@ $(document).ready(function () {
         const contextKey = $container.data('mock-key');
         const payloadData = Wick.FEMock.dataBloomreach[contextKey];
 
-        Wick.BloomreachWidget.init('completeYourProject', payloadData);
+        Wick.BloomreachWidget?.init('completeYourProject', payloadData);
     }, 3000);
 });

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

@@ -11,6 +11,6 @@ $(document).ready(function () {
         const mockDataKey = $container.data('mock-key');
         const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
 
-        Wick.BloomreachWidget.init('completeYourProject', payloadData);
+        Wick.BloomreachWidget?.init('completeYourProject', payloadData);
     }, 3000);
 });

package/src/js/emulation/forms.js

@@ -1,4 +1,4 @@
-var Wick = Wick || {};
+var Wick = window.Wick || (window.Wick = {});
 Wick.Forms = (function () {
     var fieldRow = '.form-row[data-row-required]',
         field = '.form-row__field',
@@ -73,27 +73,39 @@ Wick.Forms = (function () {
     var showValidationErrors = function (form, errorMsg) {
         $form = $(form);
         var $rows = $form.find(fieldRow).not('[data-no-global-validation]');
+
         if (!$rows.length) return;
-        $rows.find('.form-row__error').remove();
+
+        $rows.find(fieldError).remove();
 
         if (!$form.hasClass(formInvalid)) {
-            $form.find('.form-row__error').remove();
+            $form.find(fieldError).remove();
+
             $rows = $form.find(fieldRow).filter(function () {
                 return $(this).is(':visible');
             });
 
-            $rows.append(validationError(errorMsg)).addClass(rowValidationError);
+            if ($form.is('.form-locator, .form-locator-list')) {
+                $rows.each(function () {
+                    var $row = $(this);
+                    var message = errorMsg || $row.data('message') || 'Error message here';
+
+                    $row.addClass(rowValidationError).append(validationError(message));
+                });
+            } else {
+                $rows.append(validationError(errorMsg)).addClass(rowValidationError);
+            }
+
             $form.addClass(formInvalid);
         }
 
-        $rows.append(validationError(errorMsg)).addClass(rowValidationError);
-
         var $firstMsg = $form
             .find(fieldRow)
             .filter(function () {
                 return $(this).is(':visible');
             })
             .first();
+
         if ($firstMsg.length && !isElementInViewport($firstMsg)) {
             var inModal = $firstMsg.closest('.modal').length,
                 $scrollableEl = inModal ? $firstMsg.closest('.modal') : $('html, body'),
@@ -229,19 +241,76 @@ Wick.Forms = (function () {
                 window.location.href = './page_store-locator-details.html';
                 return false;
             }
+
+            clearValidationErrors(this);
+
+            if (Wick.StoreLocator && Wick.StoreLocator.showStoreSelectionError) {
+                Wick.StoreLocator.showStoreSelectionError();
+            } else {
+                showValidationErrors(this, 'Please choose a store.');
+            }
+
+            return false;
         }
 
         if ($(form).is('.form-locator-list')) {
-            if ($(form).find('#postcode-town').val().length) {
-                var actionAfterSubmit = $(form).attr('data-action');
-                if (actionAfterSubmit === 'scroll-to-list') {
-                    clearValidationErrors(this);
-                    handleSmoothScroll();
+            var searchValue = $.trim($(form).find('#postcode-town').val()),
+                actionAfterSubmit;
+
+            clearValidationErrors(this);
+
+            if (!searchValue.length) {
+                if (
+                    Wick.StoreLocatorGeoEmulation &&
+                    Wick.StoreLocatorGeoEmulation.handleEmptySearch
+                ) {
+                    Wick.StoreLocatorGeoEmulation.handleEmptySearch();
+                }
+
+                return false;
+            }
+
+            if (
+                Wick.StoreLocatorGeoEmulation &&
+                Wick.StoreLocatorGeoEmulation.isValidSearch &&
+                !Wick.StoreLocatorGeoEmulation.isValidSearch(searchValue)
+            ) {
+                if (Wick.StoreLocator && Wick.StoreLocator.showPostcodeError) {
+                    Wick.StoreLocator.showPostcodeError();
                 } else {
-                    window.location.href = actionAfterSubmit;
+                    showValidationErrors(
+                        this,
+                        'Check that you entered a valid postcode or place name.'
+                    );
                 }
+
                 return false;
             }
+
+            actionAfterSubmit = $(form).attr('data-action');
+
+            if (actionAfterSubmit === 'scroll-to-list') {
+                if (
+                    Wick.StoreLocatorGeoEmulation &&
+                    Wick.StoreLocatorGeoEmulation.showResults
+                ) {
+                    Wick.StoreLocatorGeoEmulation.showResults();
+                } else {
+                    if (Wick.StoreLocator && Wick.StoreLocator.showResults) {
+                        Wick.StoreLocator.showResults();
+                    }
+
+                    handleSmoothScroll();
+                }
+            } else {
+                window.location.href =
+                    Wick.StoreLocatorGeoEmulation &&
+                    Wick.StoreLocatorGeoEmulation.withGeoState
+                        ? Wick.StoreLocatorGeoEmulation.withGeoState(actionAfterSubmit)
+                        : actionAfterSubmit;
+            }
+
+            return false;
         }
 
         if ($(form).is('#form-mini-basket')) {

package/src/js/emulation/gift-cards.js

@@ -1,3 +1,4 @@
+var Wick = Wick || {};
 (function () {
     if (!window.Wick) return;
 

package/src/js/emulation/store-locator-geo-emulation.js

@@ -0,0 +1,185 @@
+var Wick = window.Wick || (window.Wick = {});
+
+Wick.StoreLocatorGeoEmulation = (function () {
+    var GEO_ON_CLASS = 'store-locator_geo-on',
+        GEO_OFF_CLASS = 'store-locator_geo-off',
+        SELECTORS = {
+            page: 'body.store-locator',
+            nearMe: '.locator__near-me',
+            cardsHolder: '.cards-store-holder',
+            cards: '.cards-store-list',
+            storeSelect: '#store-id',
+            storeCard: '.card-store',
+        },
+        UK_POSTCODE_PATTERN = /^(GIR\s?0AA|[A-Z]{1,2}\d[A-Z\d]?\s?\d[A-Z]{2})$/i;
+
+    function normalize(value) {
+        return $.trim(value || '').toLowerCase();
+    }
+
+    function isGeoOn() {
+        return $(SELECTORS.page).hasClass(GEO_ON_CLASS);
+    }
+
+    function isKnownLocation(value) {
+        var normalizedValue = normalize(value),
+            isMatch = false;
+
+        if (!normalizedValue) {
+            return false;
+        }
+
+        $(SELECTORS.storeSelect)
+            .find('option')
+            .each(function () {
+                var optionText = normalize($(this).text());
+
+                if (
+                    optionText &&
+                    optionText !== 'please select' &&
+                    optionText.indexOf(normalizedValue) !== -1
+                ) {
+                    isMatch = true;
+                    return false;
+                }
+            });
+
+        if (isMatch) {
+            return true;
+        }
+
+        $(SELECTORS.storeCard).each(function () {
+            if (normalize($(this).text()).indexOf(normalizedValue) !== -1) {
+                isMatch = true;
+                return false;
+            }
+        });
+
+        return isMatch;
+    }
+
+    function isValidSearch(value) {
+        var normalizedValue = $.trim(value || '');
+
+        return (
+            !!normalizedValue &&
+            (UK_POSTCODE_PATTERN.test(normalizedValue) || isKnownLocation(normalizedValue))
+        );
+    }
+
+    function hideResults() {
+        $(SELECTORS.cardsHolder).hide();
+    }
+
+    function scrollToResults() {
+        var $firstCard = $(SELECTORS.cards).first();
+
+        if (!$firstCard.length) {
+            return;
+        }
+
+        $('html, body').animate(
+            {
+                scrollTop: $firstCard.offset().top - 60,
+            },
+            300
+        );
+    }
+
+    function withGeoState(url) {
+        var parts = url.split('#'),
+            base = parts[0],
+            hash = parts[1] ? '#' + parts[1] : '',
+            separator;
+
+        base = base.replace(/([?&])geo=[^&#]*&?/g, function (match, prefix) {
+            return prefix === '?' ? '?' : '';
+        });
+        base = base.replace(/[?&]$/, '');
+        separator = base.indexOf('?') === -1 ? '?' : '&';
+
+        return base + separator + 'geo=' + (isGeoOn() ? 'on' : 'off') + hash;
+    }
+
+    function showResults() {
+        var $holder = $(SELECTORS.cardsHolder);
+
+        if (!$holder.length) {
+            window.location.href = withGeoState(
+                './page_store-locator-list.html?searched=true#stores-list'
+            );
+            return;
+        }
+
+        $holder.show();
+
+        if (Wick.StoreLocatorLoadMore && Wick.StoreLocatorLoadMore.reset) {
+            Wick.StoreLocatorLoadMore.reset();
+        }
+
+        if (Wick.StoreLocator && Wick.StoreLocator.showResults) {
+            Wick.StoreLocator.showResults();
+        }
+
+        scrollToResults();
+    }
+
+    function handleEmptySearch() {
+        if (isGeoOn()) {
+            showResults();
+            return;
+        }
+
+        if (Wick.StoreLocator && Wick.StoreLocator.showGeolocationWarning) {
+            Wick.StoreLocator.showGeolocationWarning();
+        }
+    }
+
+    function handleNearMeClick(event) {
+        event.preventDefault();
+
+        if (!isGeoOn()) {
+            hideResults();
+
+            if (Wick.StoreLocator && Wick.StoreLocator.showGeolocationWarning) {
+                Wick.StoreLocator.showGeolocationWarning();
+            }
+
+            return;
+        }
+
+        showResults();
+    }
+
+    function bindEvents() {
+        $(document)
+            .off('click.storeLocatorGeoEmulation', SELECTORS.nearMe)
+            .on('click.storeLocatorGeoEmulation', SELECTORS.nearMe, handleNearMeClick);
+    }
+
+    function init() {
+        var $page = $(SELECTORS.page);
+
+        if (!$page.length) {
+            return;
+        }
+
+        var geo = new URLSearchParams(window.location.search).get('geo'),
+            isGeoEnabled = geo !== 'off';
+
+        $page.toggleClass(GEO_ON_CLASS, isGeoEnabled);
+        $page.toggleClass(GEO_OFF_CLASS, !isGeoEnabled);
+
+        bindEvents();
+    }
+
+    init();
+
+    return {
+        init: init,
+        isValidSearch: isValidSearch,
+        handleEmptySearch: handleEmptySearch,
+        showResults: showResults,
+        withGeoState: withGeoState,
+    };
+})();

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

@@ -58,9 +58,17 @@ function initStoreLocatorLoadMore() {
 
         updateVisibility();
 
-        $btnMore.on('click', loadMore);
+        $btnMore.off('click.storeLocatorLoadMore').on('click.storeLocatorLoadMore', loadMore);
     }
 
+    window.Wick = window.Wick || {};
+    Wick.StoreLocatorLoadMore = {
+        reset: function () {
+            visibleCount = PAGE_SIZE;
+            updateVisibility();
+        },
+    };
+
     init();
 }
 

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

@@ -2,7 +2,7 @@ import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recom
 
 const WhyNotAddWidget = createBloomreachRecommendationCarouselWidget({
     namespace: 'whyNotAdd',
-    title: 'Why not add',
+    title: 'You might also like',
     widgetContainer: '[data-why-not-add-widget]',
     disableAfterSuccess: false,
     disableAfterFailure: false,

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

@@ -0,0 +1,165 @@
+var Wick = window.Wick || (window.Wick = {});
+
+Wick.StoreLocator = {
+    el: {
+        wrapper: '.store-locator-wrapper',
+        openSearch: '.locator__open-search',
+        formRow: '.form-row',
+        formRowError: '.form-row__error',
+        pageContainer: 'body.store-locator main.container',
+        postcode: '#postcode-town',
+        store: '#store-id',
+    },
+
+    classes: {
+        collapsed: 'store-locator_search-collapsed',
+        notification: 'store-locator__notification',
+        rowError: 'form-row_validation-error',
+    },
+
+    messages: {
+        postcode: 'Check that you entered a valid postcode or place name.',
+        geolocation:
+            'To search for the stores nearest you, please enable geolocation services on your device.',
+        store: 'Please choose a store.',
+    },
+
+    isDesktopLayout() {
+        return Wick.Responsive.getCurrentBreakpoint() === 'up-lg';
+    },
+
+    collapseSearch() {
+        if (!Wick.StoreLocator.isDesktopLayout()) {
+            return;
+        }
+
+        $(Wick.StoreLocator.el.wrapper).addClass(Wick.StoreLocator.classes.collapsed);
+    },
+
+    openSearch() {
+        $(Wick.StoreLocator.el.wrapper).removeClass(Wick.StoreLocator.classes.collapsed);
+    },
+
+    removeTopMessage() {
+        $(Wick.StoreLocator.el.pageContainer)
+            .children('.' + Wick.StoreLocator.classes.notification)
+            .remove();
+    },
+
+    removeFieldError(selector) {
+        const $field = $(selector);
+
+        if (!$field.length) {
+            return;
+        }
+
+        if (Wick.Validation && Wick.Validation.removeValidationError) {
+            Wick.Validation.removeValidationError($field);
+            return;
+        }
+
+        $field
+            .closest(Wick.StoreLocator.el.formRow)
+            .removeClass(Wick.StoreLocator.classes.rowError)
+            .find(Wick.StoreLocator.el.formRowError)
+            .remove();
+    },
+
+    showFieldError(selector, message) {
+        let $field = $(selector),
+            $row;
+
+        if (!$field.length) {
+            return;
+        }
+
+        Wick.StoreLocator.removeFieldError(selector);
+
+        if (Wick.Validation && Wick.Validation.displayValidationError) {
+            Wick.Validation.displayValidationError($field, message);
+            return;
+        }
+
+        $row = $field.closest(Wick.StoreLocator.el.formRow);
+        $row.addClass(Wick.StoreLocator.classes.rowError).append(
+            $('<div/>', {
+                class: 'form-row__error',
+                text: message,
+            })
+        );
+    },
+
+    showTopMessage(type, message, closeBtn) {
+        let notification;
+
+        Wick.StoreLocator.removeTopMessage();
+
+        if (!Wick.Notification || !Wick.Notification.show) {
+            return;
+        }
+
+        notification = Wick.Notification.show({
+            container: Wick.StoreLocator.el.pageContainer,
+            type: type,
+            text: message,
+            closeBtn: closeBtn,
+        });
+
+        if (notification && notification.$self) {
+            notification.$self.addClass(Wick.StoreLocator.classes.notification);
+        }
+    },
+
+    clearFeedback() {
+        Wick.StoreLocator.removeTopMessage();
+        Wick.StoreLocator.removeFieldError(Wick.StoreLocator.el.postcode);
+        Wick.StoreLocator.removeFieldError(Wick.StoreLocator.el.store);
+    },
+
+    showPostcodeError() {
+        Wick.StoreLocator.openSearch();
+        Wick.StoreLocator.clearFeedback();
+        Wick.StoreLocator.showTopMessage('error', Wick.StoreLocator.messages.postcode, false);
+        Wick.StoreLocator.showFieldError(
+            Wick.StoreLocator.el.postcode,
+            Wick.StoreLocator.messages.postcode
+        );
+    },
+
+    showGeolocationWarning() {
+        Wick.StoreLocator.openSearch();
+        Wick.StoreLocator.clearFeedback();
+        Wick.StoreLocator.showTopMessage('warning', Wick.StoreLocator.messages.geolocation, true);
+    },
+
+    showStoreSelectionError() {
+        Wick.StoreLocator.openSearch();
+        Wick.StoreLocator.clearFeedback();
+        Wick.StoreLocator.showTopMessage('error', Wick.StoreLocator.messages.store, false);
+        Wick.StoreLocator.showFieldError(
+            Wick.StoreLocator.el.store,
+            Wick.StoreLocator.messages.store
+        );
+    },
+
+    showResults() {
+        Wick.StoreLocator.clearFeedback();
+        Wick.StoreLocator.collapseSearch();
+    },
+
+    bindEvents() {
+        $(document).on('click', Wick.StoreLocator.el.openSearch, Wick.StoreLocator.openSearch);
+    },
+
+    init() {
+        Wick.StoreLocator.bindEvents();
+
+        var searched = new URLSearchParams(window.location.search).get('searched');
+
+        if (searched === 'true') {
+            Wick.StoreLocator.collapseSearch();
+        }
+    },
+};
+
+Wick.StoreLocator.init();

package/src/page_product-details-bloomreach.html

@@ -72,7 +72,7 @@ switch-vat=true
           data-complete-widget
           data-mock-key="completeYourProject2Recomendations"
       >
-        {{> bloomreach/complete-your-project title="Complete your project"}}
+        {{> bloomreach/complete-your-project titleWidget="Customers also bought"}}
       </div>
       {{> fulfilment-accordions }}
     </div>

package/src/page_product-details-with-why-not-add-single.html

@@ -74,7 +74,7 @@ isWhyNotAdd=true
           data-complete-widget
           data-mock-key="completeYourProject3Recomendations"
       >
-        {{> bloomreach/complete-your-project title="Complete your project"}}
+        {{> bloomreach/complete-your-project titleWidget="Customers also bought"}}
       </div>
       {{> fulfilment-accordions }}
     </div>