wickes-css2 2.103.0-RG-1742-billie-30-60-90-days.3 → 2.103.0-develop.10

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "wickes-css2",
-  "version": "2.103.0-RG-1742-billie-30-60-90-days.3",
+  "version": "2.103.0-develop.10",
   "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/RG-1742-billie-30-60-90-days",
+        "name": "develop",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/card_product_v2.hbs

@@ -19,11 +19,11 @@
                     <div class="product-card__reviews product-card__reviews-v2">
                         <div class="product-rating product-rating-v2">
                             <div class="rating-bg">
-                                    <i class="fa fa-star star-in" aria-hidden="true"></i>
-                                    <i class="fa fa-star star-in" aria-hidden="true"></i>
-                                    <i class="fa fa-star star-in" aria-hidden="true"></i>
-                                    <i class="fa fa-star star-in" aria-hidden="true"></i>
-                                    <i class="fa fa-star star-in" aria-hidden="true"></i>
+                                <i class="fa fa-star star-in" aria-hidden="true"></i>
+                                <i class="fa fa-star star-in" aria-hidden="true"></i>
+                                <i class="fa fa-star star-in" aria-hidden="true"></i>
+                                <i class="fa fa-star star-in" aria-hidden="true"></i>
+                                <i class="fa fa-star star-in" aria-hidden="true"></i>
 
                                 <div class="rating-overlay" data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
                                     <span class="star-overlay">
@@ -48,6 +48,11 @@
                     </div>
                 {{/if}}
             </div>
+            {{#if isSponsor}}
+              <div class="product-card__sponsored">Sponsored</div>
+            {{else}}
+              <div class="product-card__sponsored product-card__sponsored--empty">&nbsp;</div>
+            {{/if}}
             {{#if switch-vat}}
                 <div class="including-vat product-card__price {{#if sale}} product-card__price_sale {{/if}} {{#if
                         recommended}}product-card__min-height{{/if}}">

package/src/components/card_sponsor_banner.hbs

@@ -0,0 +1,8 @@
+<div class="card-sponsor-banner {{#unless show}}d-none{{/unless}}"
+  {{#if desktop-position}}data-desktop-position="{{desktop-position}}"{{/if}}
+  {{#if mobile-position}}data-mobile-position="{{mobile-position}}"{{/if}}
+>
+  <a class="card-sponsor-banner__link" href="{{href}}">
+    <img class="card-sponsor-banner__image" src="{{src}}" alt="banner">
+  </a>
+</div>

package/src/components/card_sponsor_product.hbs

@@ -0,0 +1,6 @@
+<div class="card-sponsor-product {{#unless show}}d-none{{/unless}}"
+     {{#if desktop-position}}data-desktop-position="{{desktop-position}}"{{/if}}
+  {{#if mobile-position}}data-mobile-position="{{mobile-position}}"{{/if}}
+>
+  {{>card_product_v2}}
+</div>

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

@@ -66,13 +66,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-clearpay">
                 <label
-                    class="rbn rbn_align clearpay-label__rbn"
-                    for="checkout-payment-details-clearpay">
+                  class="rbn rbn_align clearpay-label__rbn"
+                  for="checkout-payment-details-clearpay">
                   <input
-                      type="radio"
-                      id="checkout-payment-details-clearpay"
-                      name="payment-method"
-                      value="clearpay">
+                    type="radio"
+                    id="checkout-payment-details-clearpay"
+                    name="payment-method"
+                    value="clearpay">
                   <ins></ins>
                   <div class="clearpay-logo">
                     <img class="payments-checkout__image" src="./img/payment/checkout/clearpay.svg" alt="clearpay">
@@ -85,13 +85,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-apple">
                 <label
-                    class="rbn rbn_align apple-label__rbn"
-                    for="checkout-payment-details-apple">
+                  class="rbn rbn_align apple-label__rbn"
+                  for="checkout-payment-details-apple">
                   <input
-                      type="radio"
-                      id="checkout-payment-details-apple"
-                      name="payment-method"
-                      value="apple">
+                    type="radio"
+                    id="checkout-payment-details-apple"
+                    name="payment-method"
+                    value="apple">
                   <ins></ins>
                   <div class="apple-logo">
                     <img src="img/apple-pay.svg" alt="apple pay">
@@ -104,13 +104,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-google">
                 <label
-                    class="rbn rbn_align google-label__rbn"
-                    for="checkout-payment-details-google">
+                  class="rbn rbn_align google-label__rbn"
+                  for="checkout-payment-details-google">
                   <input
-                      type="radio"
-                      id="checkout-payment-details-google"
-                      name="payment-method"
-                      value="google">
+                    type="radio"
+                    id="checkout-payment-details-google"
+                    name="payment-method"
+                    value="google">
                   <ins></ins>
                   <div class="google-logo">
                     <img src="img/google-pay-mark.png" alt="google pay">
@@ -124,8 +124,7 @@
               <label class="rbn rbn_align" for="checkout-payment-details-paypal">
                 <input type="radio" id="checkout-payment-details-paypal" name="payment-method" value="paypal">
                 <ins></ins>
-                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24"
-                     alt="paypal">
+                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24" alt="paypal">
               </label>
             </div>
           </div>
@@ -164,18 +163,7 @@
         </div>
       </div>
 
-      <div class="form-row js-billie-repayment-terms" style="display: none" data-billie data-row-required data-message="Please select repayment terms">
-        <div class="form-row__field">
-          {{> checkout-payment-repayment-terms
-              name="repaymentTerms"
-              title="Select repayment terms"
-              repaymentTerms=billieTerms
-          }}
-        </div>
-      </div>
-
       {{> checkout-payment-info-block
-          showRepaymentTerms=false
           dataAttr="data-klarna"
           blockClass="checkout-payment-details__klarna"
           infoClass="klarna-info"
@@ -212,11 +200,10 @@
 
       {{> checkout-payment-info-block
           dataAttr="data-billie"
-          showRepaymentTerms=true
           blockClass="checkout-payment-details__billie"
           infoClass="billie-info"
 
-          heading="Get first. Pay later <br> Pay <span class='term'>30</span> days after shipment"
+          heading="Get first. Pay later <br> Pay 30 days after shipment"
           brandLogoHtml="<img
             src='https://static.billie.io/badges/Billie_Checkout_Default.svg'
             alt='Billie Pay Later'
@@ -239,11 +226,12 @@
           <img class="clearpay-widget__image" src="./img/payment/checkout/clearpay-widget.png" alt="clearpay widget">
         </div>
       </div>
+
+
       <div class="billing-address">
         {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
       </div>
-      <div data-existing-card
-           class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
+      <div data-existing-card class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
         <div class="form-row__col-btn" data-paypal style="display: none;">
           <a class="pay-pal_wrap" href="./page_checkout_confirmation-new.html">
             <div class="buttons-container">

package/src/components/injected-content.hbs

@@ -10,4 +10,4 @@
             </div>
         {{/if}}
     {{/each}}
-</div>
+</div>

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

@@ -1,17 +1,7 @@
-<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">
+<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>
-    </div>
-  </div>
+  <p class="text">Your basket is currently empty.</p>
+  <button class="btn btn-primary close-popup">Continue Shopping</button>
 </div>

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

@@ -0,0 +1,73 @@
+<div class="card product-card-preview" data-id="{{item.entryNumber}}">
+  <div
+    class="products__item card__inner"
+    data-name="{{item.product.name}}"
+    data-id="{{item.product.code}}"
+    data-price="{{item.product.price.formattedPriceWithoutCurrencySymbol}}"
+    data-brand="{{item.product.brandName}}"
+    data-category="{{removeFirst item.product.categoryPath 'Products/'}}"
+    data-position="{{position}}"
+    data-quantity="{{item.quantity}}"
+  >
+    <a href="{{item.product.url}}" class="card__img-wrap card__img-wrap_link products__image">
+      <img
+        class="product-img"
+        src="{{item.product.image.url}}"
+        alt="{{item.product.image.altText}}">
+    </a>
+    <div class="products__details product-card__content">
+      <div class="products__details-header">
+        <a href="{{item.product.url}}" class="title product-card__title product-card__title_link">
+          {{item.product.name}}
+        </a>
+        <button class="btn btn--remove {{#unless item.updateable}}d-none{{/unless}}" data-action="remove">
+          <i class="fas fa-trash remove-icon"></i>
+        </button>
+      </div>
+      <div class="products__details-body">
+        {{#if item.deliveryPointOfService.name}}
+          <p class="item">Click &amp; Collect: <span class="value">{{item.deliveryPointOfService.description}}</span></p>
+        {{else}}
+          <p class="item">Added for delivery</p>
+        {{/if}}
+      </div>
+
+      {{{promotionsHtml}}}
+
+      <div class="products__details-footer">
+        <div class="products__quantity-control">
+          <button class="btn btn--quantity" data-action="minus"
+            {{#unless item.updateable}}disabled{{/unless}} {{#if (eq item.quantity 1)}}disabled{{/if}}>
+            <i class="fal fa-minus quantity-cta-icon"></i>
+          </button>
+          <div class="quantity product-card__quantity-label">
+            <span class="value product-card__quantity-value" value="{{item.quantity}}">{{item.quantity}}</span>
+          </div>
+          <button class="btn btn--quantity" data-action="plus" {{#unless item.updateable}}disabled{{/unless}}>
+            <i class="fal fa-plus quantity-cta-icon"></i>
+          </button>
+        </div>
+        {{#if (eq item.basePrice.value 0)}}
+          <span class="order-item__value product-card__price-value">FREE</span>
+        {{else}}
+          {{#if (isToggleVatAvailable)}}
+            <div class="price including-vat-inherit">
+              <span class="product-card__price-value">
+                <span class="order-item__value">{{item.basePrice.formattedValue}}</span>
+                <span class="inc">Inc.VAT</span>
+              </span>
+            </div>
+            <div class="price excluding-vat-inherit">
+              <span class="product-card__price-value">
+                <span class="order-item__value">{{item.basePriceExcVat.formattedValue}}</span>
+                <span class="inc">Exc.VAT</span>
+              </span>
+            </div>
+          {{else}}
+            <span class="price product-card__price-value">{{item.basePrice.formattedValue}}</span>
+          {{/if}}
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,39 +1,58 @@
-<div class="custom-slider mini-basket d-none">
+<div class="custom-slider mini-basket popover-mini-basket d-none">
   <div class="custom-slider__wrap">
     <div class="custom-slider__header">
-      <span class="custom-slider__count">Your basket (1)</span>
+      <span class="custom-slider__count">Your basket</span>
       <button type="button" class="icon-wrap close-popup">
         <i class="far fa-times icon"></i>
       </button>
     </div>
-    <div class="products popover-mini-basket__cards-holder">
-      {{#each mini-basket.products}}
-        {{> mini-basket/product-item this switch-vat=true}}
-      {{/each}}
-    </div>
+    <div class="custom-slider__notifications"></div>
+    <div class="products popover-mini-basket__cards-holder"></div>
   </div>
   <div class="custom-slider__footer footer-fixed">
     <div class="mini-basket__total">
-      <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">
+      <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">
           <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="value">{{mini-basket.total.totalPrice.formattedValue}}</span>
+        <span class="mini-basket__total-toggle-value"></span>
       </button>
 
-      {{> checkout_order-summary-new confirmationSummary=true head=true mod=true id=3 mobile=true hideApplyVoucher=true}}
+      <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>
     </div>
     <div class="custom-slider__ctas">
-      <a href="page_shopping-cart.html" class="btn btn_full btn-secondary">View Basket</a>
-      <button class="btn btn-action btn_full btn-checkout">
+      <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">
         Checkout
         <span class="icon-wrap ml-2">
           <i class="fas fa-arrow-right"></i>
         </span>
-      </button>
+      </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>
     </div>
+    <h2>Updating basket…</h2>
   </div>
 </div>

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

@@ -1,24 +1,45 @@
-<div class="card product-card-preview">
+<div class="card product-card-preview" data-id="{{id}}">
   <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">
-      <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 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>
     </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,7 +13,8 @@
       },
       {
         "title": "Click & Collect:",
-        "value": "Free"
+        "value": "Free",
+        "mod": "cc"
       },
       {
         "title": "Delivery:",
@@ -22,7 +23,8 @@
       },
       {
         "title": "Charity donation:",
-        "value": "£1.00"
+        "value": "£1.00",
+        "mod": "charity"
       }
     ],
     "total": {

package/src/data/data_mini-basket.json

@@ -3,6 +3,7 @@
     "number": 0,
     "products": [
       {
+        "id": 1,
         "quantity": {
           "value": "1"
         },
@@ -15,87 +16,9 @@
         "CC": "East Grinstead"
       },
       {
+        "id": 2,
         "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",
-        "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"
+          "value": "5"
         },
         "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
         "src": "img/placeholders/[e-img-4to3].jpg",
@@ -125,3 +48,4 @@
     }
   }
 }
+