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

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "wickes-css2",
-  "version": "2.103.0-develop.4",
+  "version": "2.103.0-develop.6",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
     "lint:fix": "sass-lint-auto-fix",
-    "build": "gulp build"
+    "build": "gulp build",
+    "prepare": "husky install",
+    "setup:husky": "yarn prepare && npx husky add .husky/pre-commit \"yarn lint-staged\" && git add .husky/pre-commit"
+  },
+  "lint-staged": {
+    "src/js/**/*.js": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "src/scss/**/*.{scss,css}": [
+      "prettier --write",
+      "sass-lint-auto-fix"
+    ]
   },
   "keywords": [
     "css",
@@ -48,11 +60,14 @@
     "gulp-uglify": "^3.0.2",
     "gulp-watch": "^5.0.0",
     "handlebars-layouts": "^3.1.4",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.3",
     "mocha": "^6.2.2",
     "node-sass": "^4.0.0",
     "postcss": "^8.4.16",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-combine-media-query": "^1.0.1",
+    "prettier": "^3.7.4",
     "pug": "2.0.4",
     "sass": "^1.54.9",
     "sass-lint-auto-fix": "^0.21.2",
@@ -108,7 +123,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/0.3.0-legends",
+        "name": "develop",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/mini-basket/mini-basket-empty.hbs

@@ -1,7 +1,17 @@
-<div class="custom-slider__empty">
+<div class="custom-slider mini-basket d-none">
+  <div class="custom-slider__wrap">
+    <div class="custom-slider__header">
+      <span class="custom-slider__count">Your basket (0)</span>
+      <a href="#" type="button" class="icon-wrap close-popup">
+        <i class="far fa-times icon"></i>
+      </a>
+    </div>
+    <div class="custom-slider__empty">
       <span class="icon-wrap icon-wrap--xl">
         <i class="fas fa-shopping-basket"></i>
       </span>
-  <p class="text">Your basket is currently empty.</p>
-  <button class="btn btn-primary close-popup">Continue Shopping</button>
+      <p class="text">Your basket is currently empty.</p>
+      <button class="btn btn-primary close-popup">Continue Shopping</button>
+    </div>
+  </div>
 </div>

package/src/components/mini-basket/mini-basket.hbs

@@ -1,58 +1,39 @@
-<div class="custom-slider mini-basket popover-mini-basket d-none">
+<div class="custom-slider mini-basket d-none">
   <div class="custom-slider__wrap">
     <div class="custom-slider__header">
-      <span class="custom-slider__count">Your basket</span>
+      <span class="custom-slider__count">Your basket (1)</span>
       <button type="button" class="icon-wrap close-popup">
         <i class="far fa-times icon"></i>
       </button>
     </div>
-    <div class="custom-slider__notifications"></div>
-    <div class="products popover-mini-basket__cards-holder"></div>
+    <div class="products popover-mini-basket__cards-holder">
+      {{#each mini-basket.products}}
+        {{> mini-basket/product-item this switch-vat=true}}
+      {{/each}}
+    </div>
   </div>
   <div class="custom-slider__footer footer-fixed">
     <div class="mini-basket__total">
-      <button class="btn mini-basket__total-toggle collapsed" type="button" data-toggle="collapse" data-target="#checkout-details-accordion-3" aria-expanded="false" aria-controls="checkout-details-accordion-3">
+      <button class="btn mini-basket__total-toggle" type="button" data-toggle="collapse" data-target="#checkout-details-accordion-3" aria-expanded="false" aria-controls="checkout-details-accordion-3">
           <span class="mini-basket__wrap-total">
             <span class="icon-wrap">
               <i class="fas fa-chevron-down arrow-icon"></i>
             </span>
             <span class="text">Total:</span>
           </span>
-        <span class="mini-basket__total-toggle-value"></span>
+        <span class="value">{{mini-basket.total.totalPrice.formattedValue}}</span>
       </button>
 
-      <div class="checkout-widget checkout-widget_order-summary">
-        <ul class="checkout-widget__details checkout-info-wrap collapse" id="checkout-details-accordion-3">
-          <li class="checkout-widget__accordion-wrap checkout-widget__details-discount" style="display: none">
-            <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse" data-target="#acheckout-widget-accordion-3">
-              Discount(s):
-              <span class="icon accordion__header-icon-small">
-                <i class="fas fa-angle-up"></i>
-              </span>
-            </span>
-            <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-3"></ul>
-            <span class="checkout-widget__detail-value checkout-widget__item-value">£0.00</span>
-          </li>
-        </ul>
-      </div>
+      {{> checkout_order-summary-new confirmationSummary=true head=true mod=true id=3 mobile=true hideApplyVoucher=true}}
     </div>
     <div class="custom-slider__ctas">
-      <a href="/cart" class="btn btn_full btn-secondary btn-view-basket-cta">View Basket</a>
-      <a id="addToCartPopupCheckoutButton" href="/cart/checkout" class="btn btn-action btn_full btn-checkout">
+      <a href="page_shopping-cart.html" class="btn btn_full btn-secondary">View Basket</a>
+      <button class="btn btn-action btn_full btn-checkout">
         Checkout
         <span class="icon-wrap ml-2">
           <i class="fas fa-arrow-right"></i>
         </span>
-      </a>
-    </div>
-  </div>
-
-  <div class="loader-wrapper basket-loader d-none">
-    <div class="loader-spinner">
-      <svg class="circular-loader" viewBox="25 25 50 50">
-        <circle class="loader-path" cx="50" cy="50" r="20" fill="none"></circle>
-      </svg>
+      </button>
     </div>
-    <h2>Updating basket…</h2>
   </div>
 </div>

package/src/components/mini-basket/product-item.hbs

@@ -1,45 +1,24 @@
-<div class="card product-card-preview" data-id="{{id}}">
+<div class="card product-card-preview">
   <div class="products__item card__inner">
     <a class="card__img-wrap card__img-wrap_link products__image" href="page_product-details-with-global-search-v2.html">
       <img class="product-img" src="{{src}}" alt="">
     </a>
     <div class="products__details product-card__content">
-      <div class="products__details-header">
-        <a href="#" class="title product-card__title product-card__title_link">{{title}}</a>
-        <button class="btn btn--remove" data-action="remove">
-          <i class="fas fa-trash remove-icon"></i>
-        </button>
-      </div>
-      <div class="products__details-body">
-        {{#if CC}}
-          <p class="item">Click &amp; Collect: <span class="value">{{CC}}</span></p>
-        {{/if}}
-      </div>
-      <div class="products__details-footer">
-        <div class="products__quantity-control">
-          <button class="btn btn--quantity" data-action="minus" {{#ifCond quantity.value '<=' 1}}disabled{{/ifCond}}>
-            <i class="fal fa-minus quantity-cta-icon"></i>
-          </button>
-          <label class="quantity product-card__quantity-label">
-            <span class="product-card__quantity-value">{{quantity.value}}</span>
-          </label>
-          <button class="btn btn--quantity" data-action="plus">
-            <i class="fal fa-plus quantity-cta-icon"></i>
-          </button>
-        </div>
-        {{#if switch-vat}}
-          <p class="price including-vat-inherit">
-            <span class="value">{{incVatPrice}}</span>
-            <span class="inc">Inc.VAT</span>
-          </p>
-          <p class="price excluding-vat-inherit">
-            <span class="value">{{excVatPrice}}</span>
-            <span class="inc">Exc.VAT</span>
-          </p>
-        {{else}}
-          <p class="price">{{price}}</p>
-        {{/if}}
-      </div>
+      <a href="#" class="title product-card__title product-card__title_link">{{title}}</a>
+      <p class="item">Click &amp; Collect: <span class="value">{{CC}}</span></p>
+      <p class="item">Qty: <span class="value">{{quantity.value}}</span></p>
+      {{#if switch-vat}}
+        <p class="price including-vat-inherit">
+          {{incVatPrice}}
+          <span class="inc">Inc.VAT</span>
+        </p>
+        <p class="price excluding-vat-inherit">
+          {{excVatPrice}}
+          <span class="inc">Exc.VAT</span>
+        </p>
+      {{else}}
+        <p class="price">{{price}}</p>
+      {{/if}}
     </div>
   </div>
 </div>

package/src/components/srp-injected.hbs

@@ -1,19 +1,9 @@
 <div class="srp-injected">
   <div class="srp-injected__content clamped-text">
     <p>
-      <span style="font-size:12pt; font-variant:normal; white-space:pre-wrap">
-          <span style="font-family:'Helvetica Neue',sans-serif">
-              <span style="color:#000000">
-                  <span style="font-weight:400">
-                      <span style="font-style:normal">
-                          <span style="text-decoration:none">
-                              The right lighting can turn your bathroom into a sanctuary, blending style and practicality. From sleek ceiling lights to illuminated and elegant wall fixtures, each of our options is designed to elevate your space. Create a warm, inviting glow that turns your bathroom into a haven of comfort and style.
-                          </span>
-                      </span>
-                  </span>
-              </span>
-          </span>
-      </span>
+      The right lighting can turn your bathroom into a sanctuary, blending style and practicality. From sleek ceiling
+      lights to illuminated and elegant wall fixtures, each of our options is designed to elevate your space. Create a
+      warm, inviting glow that turns your bathroom into a haven of comfort and style.
     </p>
   </div>
 </div>

package/src/data/data_confirmation-summary.json

@@ -13,8 +13,7 @@
       },
       {
         "title": "Click & Collect:",
-        "value": "Free",
-        "mod": "cc"
+        "value": "Free"
       },
       {
         "title": "Delivery:",
@@ -23,8 +22,7 @@
       },
       {
         "title": "Charity donation:",
-        "value": "£1.00",
-        "mod": "charity"
+        "value": "£1.00"
       }
     ],
     "total": {

package/src/data/data_mini-basket.json

@@ -3,7 +3,6 @@
     "number": 0,
     "products": [
       {
-        "id": 1,
         "quantity": {
           "value": "1"
         },
@@ -16,9 +15,87 @@
         "CC": "East Grinstead"
       },
       {
-        "id": 2,
         "quantity": {
-          "value": "5"
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/tap.jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£30.00",
+        "excVatPrice": "£10.00",
+        "lower-quantity": true,
+        "CC": "East Grinstead"
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/tap.jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£30.00",
+        "excVatPrice": "£10.00",
+        "lower-quantity": true,
+        "CC": "East Grinstead"
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
         },
         "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
         "src": "img/placeholders/[e-img-4to3].jpg",
@@ -48,4 +125,3 @@
     }
   }
 }
-

package/src/js/components/banner-placement-manager.js

@@ -212,7 +212,16 @@ Wick.BannerPlacementManager = {
   },
   getListSlots() {
     return $(Wick.BannerPlacementManager.el.productsWrap)
-      .children(Wick.BannerPlacementManager.el.allListSlots);
+      .children(Wick.BannerPlacementManager.el.allListSlots)
+      .filter(function() {
+        if ($(this).hasClass(Wick.BannerPlacementManager.classes.productBanners)) {
+          const position = Wick.BannerPlacementManager.getBannerPosition(this);
+          const productsCount = Wick.BannerPlacementManager.getListLength();
+          return position <= productsCount;
+        }
+
+        return true;
+      });
   },
   getBannerPriority(banner) {
     if ($(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorProducts)) {

package/src/js/components/general/cart-slider.js

@@ -13,7 +13,4 @@ createPopupSlider({
     showSlider();
     $(el.sliderWrap).on('scroll', _.debounce(() => handleScroll(el.sliderWrap), 100));
   },
-  onClose: function () {
-    Wick.MiniBasketSliderFE.cartEntries = [];
-  }
 });

package/src/js/components/general/create-popup-slider.js

@@ -8,7 +8,7 @@ function createEvent(eventName, payload, eventDetail) {
   });
 }
 
-function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend, onClose }) {
+function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend }) {
   const events = {
     CLOSE_JUST_ADDED: 'CLOSE_JUST_ADDED',
     CLOSE_MINI_BASKET: 'CLOSE_MINI_BASKET'
@@ -119,9 +119,6 @@ function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend, onCl
       .finally(() => {
         hideSlider();
         Wick.Backdrop.hide();
-        if (typeof onClose === 'function') {
-          onClose();
-        }
       })
   }
 
@@ -170,7 +167,7 @@ function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend, onCl
     bindClosePopup();
 
     if (onAppendEvent && onAppend) {
-      window.addEventListener(onAppendEvent, (event) => {
+      document.addEventListener(onAppendEvent, (event) => {
         onAppend(event, { showSlider, handleScroll, el });
       });
     }

package/src/js/components/general/mini-basket-slider.js

@@ -0,0 +1,8 @@
+createPopupSlider({
+  type: 'miniBasket',
+  sliderSelector: '.custom-slider.mini-basket',
+  onAppendEvent: 'showMiniBasket',
+  onAppend: function (event, { showSlider }) {
+    showSlider();
+  },
+});

package/src/js/emulation/account-hub.js

@@ -1,49 +1,49 @@
 function returnMembers() {
-  return {
-    canLoadMore: true,
-    members: [
-      {
-        'id': 'john.doe@wickes.co.uk',
-        'name': 'John Doe',
-        'email': 'john.doe@wickes.co.uk',
-        'date': '24/02/2022',
-        'order-history-url': 'page_tradePro_order-history.html',
-        "status": "PENDING",
-        "card-label": "Pending"
-      },
-      {
-        'id': 'john.doe2@wickes.co.uk',
-        'name': 'John Doe2',
-        'email': 'john.doe2@wickes.co.uk',
-        'date': '24/02/2022',
-        'order-history-url': 'page_tradePro_order-history.html',
-        'card-label': 'Other label'
-      },
-      {
-        'id': 'john.doe3@wickes.co.uk',
-        'name': 'John Doe3',
-        'email': 'john.doe3@wickes.co.uk',
-        'date': '24/02/2022',
-        'order-history-url': 'page_tradePro_order-history.html',
-      }
-    ],
-  };
+    return {
+        canLoadMore: true,
+        members: [
+            {
+                id: 'john.doe@wickes.co.uk',
+                name: 'John Doe',
+                email: 'john.doe@wickes.co.uk',
+                date: '24/02/2022',
+                'order-history-url': 'page_tradePro_order-history.html',
+                status: 'PENDING',
+                'card-label': 'Pending',
+            },
+            {
+                id: 'john.doe2@wickes.co.uk',
+                name: 'John Doe2',
+                email: 'john.doe2@wickes.co.uk',
+                date: '24/02/2022',
+                'order-history-url': 'page_tradePro_order-history.html',
+                'card-label': 'Other label',
+            },
+            {
+                id: 'john.doe3@wickes.co.uk',
+                name: 'John Doe3',
+                email: 'john.doe3@wickes.co.uk',
+                date: '24/02/2022',
+                'order-history-url': 'page_tradePro_order-history.html',
+            },
+        ],
+    };
 }
 
 function initAccountHubFunctionality() {
-  Wick.AccountHub.initAccountHub();
-  Wick.AccountHub.initAccountHubRemove();
+    Wick.AccountHub.initAccountHub();
+    Wick.AccountHub.initAccountHubRemove();
 
-  $(window).on(Wick.AccountHub.LOAD_MORE_EVENT, function (e) {
-    setTimeout(() => {
-      e.detail.resolve(returnMembers());
-    }, 1000);
-  });
+    $(window).on(Wick.AccountHub.LOAD_MORE_EVENT, function (e) {
+        setTimeout(() => {
+            e.detail.resolve(returnMembers());
+        }, 1000);
+    });
 }
 
 $(document).ready(function () {
-  if (!$('.account-hub').length) {
-    return;
-  }
-  initAccountHubFunctionality();
+    if (!$('.account-hub').length) {
+        return;
+    }
+    initAccountHubFunctionality();
 });

package/src/js/emulation/custom-slider-emulation.js

@@ -7,16 +7,22 @@ function simulateHybrisSendingHtml() {
   document.dispatchEvent(event);
 }
 
-function bindResolveEvent(events) {
-  $(window).on(events.join(' '), function ({ detail: { resolve } }) {
+function initCloseJustAddedDiff() {
+  $(window).on('CLOSE_JUST_ADDED CLOSE_MINI_BASKET', function ({ detail: { resolve }}) {
     setTimeout(() => {
-      resolve();
+      return resolve();
     }, 200);
   });
+};
+
+function simulateShowMiniBasket() {
+  const event = new CustomEvent('showMiniBasket', {});
+  document.dispatchEvent(event);
 }
 
 $(document).ready(function () {
   $('.btn-add-to-basket').on('click', simulateHybrisSendingHtml);
+  $('.header-minicart__btn').on('click', simulateShowMiniBasket);
 
-  bindResolveEvent(['CLOSE_JUST_ADDED', 'CLOSE_MINI_BASKET', 'MINI_BASKET_CHECKOUT', 'MINI_BASKET_VIEW_BASKET']);
+  initCloseJustAddedDiff();
 });