wickes-css2 2.107.0-develop.4 → 2.107.0-develop.6

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

@@ -1,6 +1,4 @@
 var Wick = Wick || {};
-window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
-window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
 Wick.CheckoutPaymentDetails = (function () {
     const $modal = $('#modal-terms-and-conditions');
 
@@ -12,11 +10,10 @@ Wick.CheckoutPaymentDetails = (function () {
         buttonName: 'btn-enter-details',
     };
 
-    const toggleBillieRepaymentTermsClass = 'js-billie-repayment-terms--has-selection';
-
     const elements = {
         $billieRepaymentTerms: $('.js-billie-repayment-terms'),
-        $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
+        $billieInfoBlock: $('.checkout-payment-details__billie'),
+        $billieInfo: $('.checkout-payment-details__billie .billie-info'),
         $wrapperPaymentInput: $('.checkout-payment-details__row'),
         paymentInputName: '[name=payment-method]',
         $cardDetails: $('.checkout-payment-details__card-details'),
@@ -30,52 +27,6 @@ Wick.CheckoutPaymentDetails = (function () {
         hiddenClass: 'd-none',
     };
 
-    let klarnaInited = false;
-    let billieInited = false;
-
-    function initKlarnaPayment() {
-        if (klarnaInited) return Promise.resolve({ ok: true, cached: true });
-
-        return new Promise((resolve, reject) => {
-            const payload = {};
-            const detail = {
-                resolve: (data) => {
-                    klarnaInited = true;
-                    resolve(data);
-                },
-                reject,
-            };
-
-            const evt = createEvent(window.INIT_KLARNA_PAYMENT, payload, detail);
-            window.dispatchEvent(evt);
-        });
-    }
-
-    function initBilliePayment() {
-        if (billieInited) return Promise.resolve({ ok: true, cached: true });
-
-        return new Promise((resolve, reject) => {
-            const payload = {};
-            const detail = {
-                resolve: (data) => {
-                    billieInited = true;
-                    resolve(data);
-                },
-                reject,
-            };
-
-            const evt = createEvent(window.INIT_BILLIE_PAYMENT, payload, detail);
-            window.dispatchEvent(evt);
-        });
-    }
-
-    function getBillieRepaymentTermsLength() {
-        const billieRepaymentTerms =
-            (window.Wick && window.Wick?.BillieData?.billiePaymentTerms) || [];
-
-        return Array.isArray(billieRepaymentTerms) ? billieRepaymentTerms.length : 0;
-    }
-
     function preparePage() {
         var modalOpened = $('.modal.show').length;
         if (!modalOpened) return;
@@ -104,14 +55,10 @@ Wick.CheckoutPaymentDetails = (function () {
 
     function togglePaymentBlocks(paymentMethods, checkedMethod) {
         paymentMethods.forEach((method) => {
-            $(`[data-${method}]`).hide();
+            $(`[data-${method}]`).toggle(checkedMethod === method);
         });
-
-        const $selected = $(`[data-${checkedMethod}]`);
-        if ($selected.length) {
-            $selected.show();
-        }
     }
+
     function resetAllCheckoutForms(keepPaymentMethod) {
         const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
         if (!$container.length) return;
@@ -155,18 +102,9 @@ Wick.CheckoutPaymentDetails = (function () {
         $row.find(':input').prop('disabled', !isVisible);
     }
 
-    function _syncBillieUI(isReady) {
-        elements.$billieWidget.toggle(isReady);
-        elements.$billieRepaymentTerms.toggleClass(toggleBillieRepaymentTermsClass, isReady);
-    }
-
-    function resetBillieUi() {
-        _syncBillieUI(false);
-    }
-
     function setBillieStepVisibility(isReady) {
-        _syncBillieUI(isReady);
         setBillingDetailsRowVisibility(isReady);
+        elements.$billieInfo.toggleClass(elements.hiddenClass, !isReady);
     }
 
     function resetBillieRepaymentSelection() {
@@ -192,27 +130,13 @@ Wick.CheckoutPaymentDetails = (function () {
         const isUnregistered = type === 'unregistered';
         const isRegistered = type === 'registered';
 
-        elements.$unregisteredFields
-            .toggleClass(elements.hiddenClass, !isUnregistered)
-            .removeAttr('style');
-        elements.$registeredFields
-            .toggleClass(elements.hiddenClass, !isRegistered)
-            .removeAttr('style');
+        elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
+        elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
     }
 
     function changeDetailsBlock(checkedMethod) {
         if (checkedMethod !== 'billie') {
-            resetBillieUi();
             setBillingDetailsRowVisibility(true);
-            hideBillieBusiness();
-        }
-
-        if (checkedMethod === 'klarna') {
-            initKlarnaPayment().catch(() => {});
-        }
-
-        if (checkedMethod === 'billie' && getBillieRepaymentTermsLength() === 1) {
-            initBilliePayment().catch(() => {});
         }
 
         switch (checkedMethod) {
@@ -234,7 +158,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 };
                 changeLabelText(detailsLabel);
 
-                setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
+                setBillieStepVisibility(false);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
                 break;
@@ -250,13 +174,13 @@ Wick.CheckoutPaymentDetails = (function () {
                 prevClearableMethod = checkedMethod;
                 break;
 
-            case 'apple-pay':
+            case 'apple':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
                 break;
 
-            case 'google-pay':
+            case 'google':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
@@ -332,7 +256,7 @@ Wick.CheckoutPaymentDetails = (function () {
             if (currentMethod !== 'billie') return;
 
             requestAnimationFrame(() => {
-                forceReflow(elements.$billieWidget);
+                forceReflow(elements.$billieInfoBlock);
             });
 
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;

package/build/js/page/components/gift-cards.js

@@ -111,7 +111,7 @@ Wick.GiftCard = {
         klarnaInfo: '.checkout-payment-details__klarna',
         billingAddress: '.billing-address',
         altPaymentRowsAttr:
-            '[data-apple-pay],[data-google-pay],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
+            '[data-apple],[data-google],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
         hiddenCard: 'checkout-payment-details__card-details_hidden',
         cardDetails: '.checkout-payment-details__card-details',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.107.0-develop.4",
+  "version": "2.107.0-develop.6",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

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

@@ -25,7 +25,7 @@
                       type="radio"
                       id="checkout-payment-details-apple"
                       name="payment-method"
-                      value="apple-pay">
+                      value="apple">
                   <ins></ins>
                   <div class="apple-logo">
                     <img src="img/apple-pay.svg" alt="apple pay">
@@ -44,7 +44,7 @@
                       type="radio"
                       id="checkout-payment-details-google"
                       name="payment-method"
-                      value="google-pay">
+                      value="google">
                   <ins></ins>
                   <div class="google-logo">
                     <img src="img/google-pay-mark.svg" alt="google pay">
@@ -134,7 +134,7 @@
         </div>
       </div>
 
-      <div data-apple-pay class="form-row form-row__action form-row__save apple-wrap" style="display: none;">
+      <div data-apple class="form-row form-row__action form-row__save apple-wrap" style="display: none;">
         <div class="form-row__col-btn">
           <apple-pay-button class="apple__button" buttonstyle="black" type="pay" locale="en-GB"></apple-pay-button>
         </div>
@@ -146,7 +146,7 @@
         </div>
       </div>
 
-      <div data-google-pay class="form-row form-row__action form-row__save google-wrap" style="display: none;">
+      <div data-google class="form-row form-row__action form-row__save google-wrap" style="display: none;">
         <div class="form-row__col-btn">
           <div class="google__button" id="google-pay-btn">
             <button type="button" aria-label="Pay with GPay" class="gpay-button black pay en"></button>

package/src/components/checkout-payment-info-block.hbs

@@ -1,5 +1,5 @@
 <div {{#if dataAttr}}{{dataAttr}}{{/if}} class="{{blockClass}}" style="display: none;">
-  <div class="{{infoClass}}" style="display: none;">
+  <div class="{{infoClass}}">
     <div class="{{infoClass}}__header">
       <h4 class="{{infoClass}}__header_title">{{{heading}}}</h4>
       <div class="{{infoClass}}__logo-img-big">

package/src/data/data_quick-filter.json

@@ -6,7 +6,7 @@
       "values": [
         {
           "text": null,
-          "additionalData": "./img/quick-filters/bath1.svg",
+          "additionalData": "./img/quick-filters/bath4.svg",
           "url": "?filter=icon1",
           "selected": false
         },
@@ -221,8 +221,8 @@
       "displayText": "Select Size",
       "values": [
         {
-          "text": "Double ended baths",
-          "additionalData": "./img/quick-filters/bath1.svg",
+          "text": "15 minute Click & Collect",
+          "additionalData": "./img/quick-filters/bath4.svg",
           "url": "?size=double",
           "selected": false
         },

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

@@ -1,16 +1,9 @@
-window.Wick = window.Wick || {};
-window.Wick.BillieData = window.Wick.BillieData || {};
-window.Wick.BillieData.billiePaymentTerms = ['30', '60', '90'];
-window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
-window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
+var Wick = Wick || {};
 
 Wick.PaymentDetails = (function () {
     var $btnEnterDetails = $('.btn-enter-details'),
         isGuestPage = $('.page_checkout-payment-details_guest').length;
 
-    const $billieInfo = $('.checkout-payment-details__billie .billie-info');
-    const $klarnaInfo = $('.checkout-payment-details__klarna .klarna-info');
-
     function bindEvents() {
         $btnEnterDetails.on('click', function (e) {
             e.preventDefault();
@@ -56,32 +49,6 @@ Wick.PaymentDetails = (function () {
             Wick.Forms.showValidationErrors(this);
             return false;
         });
-
-        $(window).on(window.INIT_BILLIE_PAYMENT, function (e) {
-            const detail = e.detail || (e.originalEvent && e.originalEvent.detail) || {};
-
-            if (detail && detail.resolve) {
-                $billieInfo.show();
-                detail.resolve();
-            }
-        });
-
-        $(window).on(window.INIT_KLARNA_PAYMENT, function (e) {
-            const detail = e.detail || (e.originalEvent && e.originalEvent.detail) || {};
-
-            if (detail && detail.resolve) {
-                $klarnaInfo.show();
-                detail.resolve();
-            }
-        });
-
-        $(document).on('change', 'input[name="repaymentTerms"]', function () {
-            const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
-
-            if (hasSelection) {
-                $billieInfo.show();
-            }
-        });
     }
 
     bindEvents();

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

@@ -1,6 +1,4 @@
 var Wick = Wick || {};
-window.INIT_KLARNA_PAYMENT = window.INIT_KLARNA_PAYMENT || 'INIT_KLARNA_PAYMENT';
-window.INIT_BILLIE_PAYMENT = window.INIT_BILLIE_PAYMENT || 'INIT_BILLIE_PAYMENT';
 Wick.CheckoutPaymentDetails = (function () {
     const $modal = $('#modal-terms-and-conditions');
 
@@ -12,11 +10,10 @@ Wick.CheckoutPaymentDetails = (function () {
         buttonName: 'btn-enter-details',
     };
 
-    const toggleBillieRepaymentTermsClass = 'js-billie-repayment-terms--has-selection';
-
     const elements = {
         $billieRepaymentTerms: $('.js-billie-repayment-terms'),
-        $billieWidget: $('.checkout-payment-details__billie[data-billie]'),
+        $billieInfoBlock: $('.checkout-payment-details__billie'),
+        $billieInfo: $('.checkout-payment-details__billie .billie-info'),
         $wrapperPaymentInput: $('.checkout-payment-details__row'),
         paymentInputName: '[name=payment-method]',
         $cardDetails: $('.checkout-payment-details__card-details'),
@@ -30,52 +27,6 @@ Wick.CheckoutPaymentDetails = (function () {
         hiddenClass: 'd-none',
     };
 
-    let klarnaInited = false;
-    let billieInited = false;
-
-    function initKlarnaPayment() {
-        if (klarnaInited) return Promise.resolve({ ok: true, cached: true });
-
-        return new Promise((resolve, reject) => {
-            const payload = {};
-            const detail = {
-                resolve: (data) => {
-                    klarnaInited = true;
-                    resolve(data);
-                },
-                reject,
-            };
-
-            const evt = createEvent(window.INIT_KLARNA_PAYMENT, payload, detail);
-            window.dispatchEvent(evt);
-        });
-    }
-
-    function initBilliePayment() {
-        if (billieInited) return Promise.resolve({ ok: true, cached: true });
-
-        return new Promise((resolve, reject) => {
-            const payload = {};
-            const detail = {
-                resolve: (data) => {
-                    billieInited = true;
-                    resolve(data);
-                },
-                reject,
-            };
-
-            const evt = createEvent(window.INIT_BILLIE_PAYMENT, payload, detail);
-            window.dispatchEvent(evt);
-        });
-    }
-
-    function getBillieRepaymentTermsLength() {
-        const billieRepaymentTerms =
-            (window.Wick && window.Wick?.BillieData?.billiePaymentTerms) || [];
-
-        return Array.isArray(billieRepaymentTerms) ? billieRepaymentTerms.length : 0;
-    }
-
     function preparePage() {
         var modalOpened = $('.modal.show').length;
         if (!modalOpened) return;
@@ -104,14 +55,10 @@ Wick.CheckoutPaymentDetails = (function () {
 
     function togglePaymentBlocks(paymentMethods, checkedMethod) {
         paymentMethods.forEach((method) => {
-            $(`[data-${method}]`).hide();
+            $(`[data-${method}]`).toggle(checkedMethod === method);
         });
-
-        const $selected = $(`[data-${checkedMethod}]`);
-        if ($selected.length) {
-            $selected.show();
-        }
     }
+
     function resetAllCheckoutForms(keepPaymentMethod) {
         const $container = elements.$wrapperPaymentInput.closest('.checkout-payment-details');
         if (!$container.length) return;
@@ -155,18 +102,9 @@ Wick.CheckoutPaymentDetails = (function () {
         $row.find(':input').prop('disabled', !isVisible);
     }
 
-    function _syncBillieUI(isReady) {
-        elements.$billieWidget.toggle(isReady);
-        elements.$billieRepaymentTerms.toggleClass(toggleBillieRepaymentTermsClass, isReady);
-    }
-
-    function resetBillieUi() {
-        _syncBillieUI(false);
-    }
-
     function setBillieStepVisibility(isReady) {
-        _syncBillieUI(isReady);
         setBillingDetailsRowVisibility(isReady);
+        elements.$billieInfo.toggleClass(elements.hiddenClass, !isReady);
     }
 
     function resetBillieRepaymentSelection() {
@@ -192,27 +130,13 @@ Wick.CheckoutPaymentDetails = (function () {
         const isUnregistered = type === 'unregistered';
         const isRegistered = type === 'registered';
 
-        elements.$unregisteredFields
-            .toggleClass(elements.hiddenClass, !isUnregistered)
-            .removeAttr('style');
-        elements.$registeredFields
-            .toggleClass(elements.hiddenClass, !isRegistered)
-            .removeAttr('style');
+        elements.$unregisteredFields.toggleClass(elements.hiddenClass, !isUnregistered);
+        elements.$registeredFields.toggleClass(elements.hiddenClass, !isRegistered);
     }
 
     function changeDetailsBlock(checkedMethod) {
         if (checkedMethod !== 'billie') {
-            resetBillieUi();
             setBillingDetailsRowVisibility(true);
-            hideBillieBusiness();
-        }
-
-        if (checkedMethod === 'klarna') {
-            initKlarnaPayment().catch(() => {});
-        }
-
-        if (checkedMethod === 'billie' && getBillieRepaymentTermsLength() === 1) {
-            initBilliePayment().catch(() => {});
         }
 
         switch (checkedMethod) {
@@ -234,7 +158,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 };
                 changeLabelText(detailsLabel);
 
-                setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
+                setBillieStepVisibility(false);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
                 break;
@@ -250,13 +174,13 @@ Wick.CheckoutPaymentDetails = (function () {
                 prevClearableMethod = checkedMethod;
                 break;
 
-            case 'apple-pay':
+            case 'apple':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
                 break;
 
-            case 'google-pay':
+            case 'google':
                 hideCardDetails();
                 hidePlaceOrder();
                 hideBillingAddres();
@@ -332,7 +256,7 @@ Wick.CheckoutPaymentDetails = (function () {
             if (currentMethod !== 'billie') return;
 
             requestAnimationFrame(() => {
-                forceReflow(elements.$billieWidget);
+                forceReflow(elements.$billieInfoBlock);
             });
 
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;

package/src/js/page/components/gift-cards.js

@@ -111,7 +111,7 @@ Wick.GiftCard = {
         klarnaInfo: '.checkout-payment-details__klarna',
         billingAddress: '.billing-address',
         altPaymentRowsAttr:
-            '[data-apple-pay],[data-google-pay],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
+            '[data-apple],[data-google],[data-paypal],[data-klarna],[data-billie],[data-clearpay],[data-existing-card]',
         hiddenCard: 'checkout-payment-details__card-details_hidden',
         cardDetails: '.checkout-payment-details__card-details',
     },

package/src/scss/components/_plp-filters.scss

@@ -261,6 +261,15 @@
   }
 }
 
+@include media-breakpoint-only(sm) {
+  .products-list-page {
+    .plp-filters {
+      width: 100vw;
+      margin-left: calc(50% - 50vw);
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .plp-filters {
     background: $gray-bg;

package/src/scss/components/_quick-filter.scss

@@ -43,16 +43,24 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       border-radius: 8px;
     }
 
-    &--selected {
-      color: $blue;
-      border-color: $blue;
-    }
-
     &:hover,
     &:focus,
     &:active {
       text-decoration: none;
       border-color: $blue;
+      color: $gray-dark;
+    }
+
+    &--selected {
+      color: $blue;
+      border-color: $blue;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $blue-darker;
+        border-color: $blue-darker;
+      }
     }
   }
 
@@ -151,11 +159,23 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       img {
         width: 58px;
         height: 58px;
+        border-radius: 0;
       }
 
-      &--selected img {
-        // prettier-ignore
-        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+      &--selected {
+        img {
+          // prettier-ignore
+          filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          img {
+            // prettier-ignore
+            filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(1900%) hue-rotate(190deg) brightness(85%) contrast(105%);
+          }
+        }
       }
     }
   }
@@ -167,11 +187,23 @@ $quick-filter-shadow: rgba(0, 0, 0, 0.12);
       img {
         width: 58px;
         height: 58px;
+        border-radius: 0;
       }
 
-      &--selected img {
-        // prettier-ignore
-        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+      &--selected {
+        img {
+          // prettier-ignore
+          filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          img {
+            // prettier-ignore
+            filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(1900%) hue-rotate(190deg) brightness(85%) contrast(105%);
+          }
+        }
       }
     }
   }

package/src/scss/components/_search-filter.scss

@@ -3,6 +3,12 @@
     padding: 20px 0 0;
   }
 
+  &.accordion {
+    &:first-child {
+      border-top: 1px solid $gray;
+    }
+  }
+
   &__facet-cta {
     background: transparent;
     border: 0;

package/src/scss/components/card-product-banner.scss

@@ -13,15 +13,6 @@
     padding: 0 5px;
     margin-bottom: 20px;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: -20px;
-      left: 5px;
-      width: calc(100% - 10px);
-      border-bottom: 1px solid #ccc;
-    }
-
     &::after {
       content: '';
       position: absolute;
@@ -107,7 +98,7 @@
   }
 
   .products-list-v2 {
-    .card-sponsor-product:nth-of-type(n+3) {
+    .card-sponsor-product:nth-of-type(n + 3) {
       .card {
         &:before {
           content: none;

package/src/scss/pages/page_product_search.scss

@@ -300,7 +300,7 @@
     margin-right: -5px;
     margin-left: -5px;
     margin-top: 0;
-    padding-top: 40px;
+    padding-top: 20px;
     overflow-x: hidden;
 
     &__badges {
@@ -312,16 +312,6 @@
       padding-left: 5px;
       padding-right: 5px;
       position: relative;
-
-      &:nth-of-type(1)::before,
-      &:nth-of-type(2)::before {
-        content: '';
-        position: absolute;
-        top: -20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
     }
   }
 }
@@ -344,8 +334,8 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
-      color: black;
-      border: none;
+      color: #000000;
+      border: 0;
 
       > .form-row {
         margin-bottom: 0;