wickes-css2 2.102.0-lg-788-improve-mini-basket.6 → 2.103.0-gift-cards.1

package/build/js/toggle-password-visibility.min.js

@@ -0,0 +1 @@
+!function i(o,r,s){function u(t,e){if(!r[t]){if(!o[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(a)return a(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}n=r[t]={exports:{}},o[t][0].call(n.exports,function(e){return u(o[t][1][e]||e)},n,n.exports,i,o,r,s)}return r[t].exports}for(var a="function"==typeof require&&require,e=0;e<s.length;e++)u(s[e]);return u}({1:[function(e,t,n){"use strict";var i=e("../utils/show-hide-input"),o=window.Wick||{};o.TogglePasswordVisibility={el:{$containers:$(".form-row[data-show-content] .input-wrap")},init:function(){this.el.$containers.length&&this.el.$containers.each(function(){(0,i.initializeInputToggle)($(this))})}},$(document).ready(function(){o.TogglePasswordVisibility.init()})},{"../utils/show-hide-input":2}],2:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.initializeInputToggle=function(e){var n=e.find("input"),i=e.find(".toggle-show");n.length&&i.length&&(e=function(){i.toggle(0<(n.val()||"").length)},i.off("click.passwordToggle mousedown.passwordToggle").on("mousedown.passwordToggle",function(e){e.preventDefault();var e="password"===String(n.attr("type")),t=(n.attr("type",e?"text":"password"),i.find("svg, i").first());t.length&&t.removeClass("fa-eye fa-eye-slash").addClass(e?"fa-eye":"fa-eye-slash")}),n.off("input.passwordToggle").on("input.passwordToggle",e),e())}},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.102.0-lg-788-improve-mini-basket.6",
+  "version": "2.103.0-gift-cards.1",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -108,7 +108,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/lg-788-improve-mini-basket",
+        "name": "custom-tag/gift-cards",
         "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,11 +48,6 @@
                     </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/checkout-payment-details-v2.hbs

@@ -120,7 +120,7 @@
             </div>
           {{/if}}
           <div class="form-row">
-            <div class="form-row__field">
+            <div class="form-row__field form-row__field-paypal">
               <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>
@@ -128,6 +128,7 @@
               </label>
             </div>
           </div>
+          {{> gift-cards }}
         </div>
       </div>
 

package/src/components/gift-cards-hint.hbs

@@ -0,0 +1,9 @@
+<p class="{{hintClass}}">
+  {{#if canAdd}}
+    <span class="giftcard-summary__add js-giftcard-add">Add another Gift Card</span>
+    or pay the remaining balance with a Credit/Debit card.
+  {{else}}
+    Maximum number of Gift Cards added, please pay remaining balance with a Credit/Debit card.
+  {{/if}}
+  {{> info-icon title="If you’d like to pay with a different payment method, please remove any / all applied Gift Cards." data-placement="top"}}
+</p>

package/src/components/gift-cards.hbs

@@ -0,0 +1,89 @@
+<div class="form-row giftcard-row">
+  <div class="giftcard">
+    <div class="giftcard__wrapper">
+      <span
+          class="giftcard-add"
+          id="giftcard-toggle"
+          role="button"
+          tabindex="0"
+          aria-controls="giftcard-inline"
+          aria-expanded="false"
+      >
+        <span class="icon">
+          <i class="fas fa-plus giftcard-add__icon" aria-hidden="true"></i>
+        </span>
+        <span class="giftcard-add__text">Add Wickes Gift Card</span>
+      </span>
+      <span class="giftcard-hint">Combine with Credit/Debit card</span>
+    </div>
+
+    <div class="giftcard__container">
+      {{> loader hidden=true}}
+      <div class="giftcard-inline" id="giftcard-inline" hidden>
+        <div class="giftcard-inline__header">
+          <span class="giftcard-inline__title">Add Wickes Gift Card</span>
+            <a href="https://www.showmybalance.com/" target="_blank" class="giftcard-inline__balance">Check balance</a>
+          <span class="giftcard-inline__close">
+            <i class="fal fa-times" aria-hidden="true"></i>
+          </span>
+        </div>
+
+        <form class="giftcard-inline__form">
+          <div class="giftcard-inline__fields">
+            {{> form-row
+                id="giftcard-number"
+                label="Gift Card number"
+                required="true"
+                placeholder="0000-0000-0000-0000"
+                row-mod="giftcard__field giftcard__field--number"
+                name="giftcard-number"
+                maxlength="19"
+                inputmode="numeric"
+                type="tel"
+                autocomplete="off"
+                input-mod="giftcard__input"
+                skipGlobalValidation=true
+            }}
+
+            {{> form-row
+                id="giftcard-pin"
+                label="Gift Card PIN"
+                required="true"
+                placeholder="00000000"
+                row-mod="giftcard__field giftcard__field--pin"
+                name="giftcard-pin"
+                maxlength="8"
+                type="password"
+                inputmode="numeric"
+                autocomplete="off"
+                input-mod="giftcard__input"
+                skipGlobalValidation=true
+                showContent=(hash
+                    idToggleIcon="giftcard-pin-toggle"
+                    classCustomIcon="fas fa-eye-slash"
+                    idCustomIcon="giftcard-pin-eye"
+                )
+            }}
+
+            <div class="giftcard__actions">
+              {{> button text="Add" modification="giftcard__btn" }}
+            </div>
+          </div>
+        </form>
+      </div>
+
+    </div>
+
+  </div>
+
+  <div class="giftcard-applied" id="giftcard-applied" hidden>
+    <div class="giftcard-applied__inner" role="status" aria-live="polite">
+      <span class="giftcard-applied__icon" aria-hidden="true">
+        <i class="fas fa-check-circle"></i>
+      </span>
+      <p class="giftcard-applied__text">
+        Gift Card added successfully, basket total updated
+      </p>
+    </div>
+  </div>
+</div>

package/src/components/giftcard-chip.hbs

@@ -0,0 +1,23 @@
+<div class="giftcard-chip" data-giftcard-id="{{id}}">
+  <div class="giftcard-chip__icon" aria-hidden="true">
+    <img src="./img/giftcard.svg" alt="" />
+  </div>
+
+  <div class="giftcard-chip__content">
+    <div class="giftcard-chip__line">
+      <span
+          class="giftcard-chip__number"
+          aria-label="Gift card ending {{last5}}">
+        ***********{{last5}}
+      </span>
+    </div>
+
+    <div class="giftcard-chip__line">
+      <span class="giftcard-chip__applied">{{currency}}{{amount}} applied</span>
+    </div>
+  </div>
+
+  <span class="giftcard-chip__close">
+    <i class="fal fa-times" aria-hidden="true"></i>
+  </span>
+</div>

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,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/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 @@
     }
   }
 }
-