wickes-css2 2.109.0-develop.3 → 2.109.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.109.0-develop.3",
+  "version": "2.109.0-gift-cards.1",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -51,12 +51,14 @@
     "gulp-htmlmin": "^5.0.1",
     "gulp-json-concat": "^0.2.0",
     "gulp-json-refs": "^0.1.1",
+    "gulp-livereload": "^3.8.1",
     "gulp-purgecss": "4.0.3",
     "gulp-sass": "^4.0.0",
     "gulp-sass-lint": "^1.4.0",
     "gulp-sitemap": "^5.1.0",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-uglify": "^3.0.2",
+    "gulp-watch": "^5.0.0",
     "handlebars-layouts": "^3.1.4",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",

package/src/components/base/button.hbs

@@ -1,4 +1,4 @@
-<button class="btn {{#if full}}btn_full{{/if}} {{#if icon}}btn--icon{{/if}} {{modification}}" type="{{type}}">
+<button class="btn btn-primary {{#if full}}btn_full{{/if}} {{#if icon}}btn--icon{{/if}} {{modification}}">
   {{#if icon}}
     <i class="{{icon}}"></i>
   {{/if}}

package/src/components/card_product_banner_v2.hbs

@@ -5,9 +5,6 @@
      {{#if required-amount-desktop}}data-required-amount-desktop="{{required-amount-desktop}}"{{/if}}
 >
     <a class="card-product-banner__link" href="{{href}}">
-        <picture class="card-product-banner__picture">
-            <source class="card-product-banner__image" srcset="{{#if mobile-src}}{{mobile-src}}{{else}}{{src}}{{/if}}" media="(max-width: 768px)">
-            <img class="card-product-banner__image" src="{{src}}" alt="banner">
-        </picture>
+        <img class="card-product-banner__image" src="{{src}}" alt="banner">
     </a>
 </div>

package/src/components/card_sponsor_banner.hbs

@@ -3,9 +3,6 @@
   {{#if mobile-position}}data-mobile-position="{{mobile-position}}"{{/if}}
 >
   <a class="card-sponsor-banner__link" href="{{href}}">
-    <picture class="card-sponsor-banner__picture">
-      <source class="card-sponsor-banner__image" srcset="{{#if mobile-src}}{{mobile-src}}{{else}}{{src}}{{/if}}" media="(max-width: 768px)">
-      <img class="card-sponsor-banner__image" src="{{src}}" alt="banner">
-    </picture>
+    <img class="card-sponsor-banner__image" src="{{src}}" alt="banner">
   </a>
 </div>

package/src/components/checkout_order-summary-new.hbs

@@ -1,4 +1,4 @@
-<div class="checkout-widget checkout-widget_order-summary {{#if mod}}checkout-widget-{{mod}}{{/if}}"{{#if hideDeliveryCostMessage}} data-hide-delivery-cost-message="true"{{/if}}>
+<div class="checkout-widget checkout-widget_order-summary {{#if mod}}checkout-widget-{{mod}}{{/if}}">
     {{#unless head}}
         <h3 class="heading-3 checkout-widget__header">Order Summary</h3>
     {{/unless}}
@@ -16,15 +16,6 @@
                     <span>{{title}}</span>
                     <span class="checkout-widget__item-value">{{value}}</span>
                 </li>
-                {{#ifCond (lookup this "mod") "==" "delivery"}}
-                {{#unless ../hideDeliveryCostMessage}}
-                <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
-                    <span class="checkout-widget__item-value" id="order-delivery-cost-message">
-                        Final delivery cost confirmed at checkout
-                    </span>
-                </li>
-                {{/unless}}
-                {{/ifCond}}
             {{/each}}
         {{/if}}
         {{#unless hideApplyVoucher}}
@@ -49,6 +40,12 @@
               <span class="checkout-widget__detail-value">£0.00</span>
             </li>
         {{/if}}
+        {{#if giftCardDiscount}}
+            <li class="checkout-widget__item checkout-widget__item-bold checkout-widget__gift-card">
+                <span>Gift Card:</span>
+                <span class="checkout-widget__item-value">-£300.00</span>
+            </li>
+        {{/if}}
     </ul>
   {{#unless mobile}}
     <div class="checkout-widget__total" data-sticky-observe>

package/src/components/checkout_payment-new.hbs

@@ -59,19 +59,42 @@
           <img src="./img/clearpay-logo.svg" alt="clearpay">
         </div>
       </div>
-    {{else}}
-        <ul class="checkout-widget__details">
+    {{else if giftcard}}
+        <div class="checkout-widget__details checkout-payment__giftcard">
+            <div class="checkout-widget__details__item checkout-payment__giftcard-header">
+                <div>Gift Card:</div>
+
+                <div class="checkout-payment__giftcard-logo">
+                    <img src="./img/giftcard.svg" alt="giftcard">
+                </div>
+            </div>
+            <div class="checkout-payment__giftcard-list">
+                {{#each giftcards}}
+                    <div class="checkout-widget__details__item">
+                        <div class="checkout-payment__giftcard-label">Gift card number:</div>
+                        <div class="checkout-payment__giftcard-value">{{this}}</div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    {{/if}}
+    {{#if (or giftcard (not (anyOf paypal klarna billie apple google clearpay)))}}
+        <ul class="checkout-widget__details checkout-payment__card-details">
+            <li class="checkout-widget__details__item">
+                <span class="checkout-payment__card-label">Card type:</span>
+                <span class="checkout-payment__card-value">Visa</span>
+            </li>
             <li class="checkout-widget__details__item">
-                <span>Card type:</span>
-                <span>Visa</span>
+                <span class="checkout-payment__card-label">Card number:</span>
+                <span class="checkout-payment__card-value">456000*******0053</span>
             </li>
             <li class="checkout-widget__details__item">
-                <span>Card number:</span>
-                <span>**** **** **** 1234</span>
+                <span class="checkout-payment__card-label">Expiry date:</span>
+                <span class="checkout-payment__card-value">07/2023</span>
             </li>
             <li class="checkout-widget__details__item">
-                <span>Expiry date:</span>
-                <span>07/2023</span>
+                <span class="checkout-payment__card-label">Name on card:</span>
+                <span class="checkout-payment__card-value">James Smith</span>
             </li>
         </ul>
     {{/if}}

package/src/components/click-and-collect-modal.hbs

@@ -10,6 +10,20 @@
                     <div class="click-and-collect__locator">
                         <form action="#" class="click-and-collect__locator-form">
 
+                            <!--
+                            <div class="form-row" data-row-required>
+                                <div class="click-and-collect__locator-town form-row__field">
+                                    <input class="tbx" placeholder="Enter a town/city or postcode"
+                                           id="click-and-collect-town" type="text"
+                                           aria-label="Enter a town/city or postcode">
+                                </div>
+                                <div class="click-and-collect__locator-btn">
+                                    <button class="btn btn_full btn-primary" id="click-and-collect-submit">
+                                        <span class="btn__text">Find store</span>
+                                    </button>
+                                </div>
+                            </div>-->
+
                             <div class="form-row" data-row-required>
                                 <div class="click-and-collect__locator-town form-row__field">
                                         <div class="input-group">

package/src/components/date-selection.hbs

@@ -69,7 +69,7 @@
               <i class="fas fa-shipping-fast icon"></i>
             </span>
           <p class="description">
-            Select todays’ day on the calendar to get Rapid delivery.
+            Select todays’ day on the calendar to get Wickes Rapid delivery
           </p>
         </div>
           {{> delivery-types

package/src/components/delivery-types.hbs

@@ -3,17 +3,9 @@
     <button class="btn btn_full delivery-btn">
       {{#if title}}
         <span class="delivery-btn__content">
-          <span class="title">{{title}}</span>
-          <span class="subtitle">
-            {{subtitle}}
-            {{> info-icon
-                modification="rapid-info-icon d-none"
-                title="This is an estimated time provided by our third party courier and is subject to change"
-                data-placement="bottom"
-                data-container="body"
-            }}
-          </span>
-        </span>
+              <span class="title">{{title}}</span>
+              <span class="subtitle">{{subtitle}}</span>
+            </span>
         {{#if classImg}}
           <span class="delivery-btn__image">
             <i class="{{classImg}}"></i>

package/src/components/gift-cards.hbs

@@ -1,27 +1,20 @@
 <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>
+      <span class="giftcard-add" id="giftcard-toggle" role="button" tabindex="0">
+  <span class="giftcard-add__icon-wrap" aria-hidden="true">
+    <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">Available with Credit/Debit card only</span>
     </div>
 
     <div class="giftcard__container">
       <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>
+            <a href="https://wickes.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>

package/src/components/injected-content.hbs

@@ -2,12 +2,7 @@
     {{#each srp_injected_content.items}}
         {{#if banner}}
             <div class="srp-injected__image">
-                <a class="srp-injected__link" href="{{banner.href}}">
-                    <picture class="srp-injected__picture">
-                        <source class="srp-injected__img" srcset="{{#if banner.mobile-src}}{{banner.mobile-src}}{{else}}{{banner.src}}{{/if}}" media="(max-width: 768px)">
-                        <img class="srp-injected__img" src="{{banner.src}}" alt="{{banner.alt}}">
-                    </picture>
-                </a>
+                {{{banner.htmlText}}}
             </div>
         {{else}}
             <div class="srp-injected__content">

package/src/components/modal.hbs

@@ -1,6 +1,6 @@
 <!-- Bootstrap 4 modal dialog markup https://getbootstrap.com/docs/4.1/components/modal/ -->
 
-<div class="modal  modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}} {{classMod}}"
+<div class="modal  modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
      id="{{id}}" role="dialog" tabindex="-1" data-backdrop="{{backdrop}}" data-keyboard={{#if keyboard}}{{keyboard}}{{else}}false{{/if}}
 >
   <div class="modal-dialog modal-box__container {{#if centered}}modal-dialog-centered{{/if}}" role="document">

package/src/components/order-summary.hbs

@@ -3,7 +3,7 @@
   {{> summary-mobile-bar}}
   <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}" data-sticky-element>
 
-    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true" hideDeliveryCostMessage=hideDeliveryCostMessage}}
+    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
     {{#unless (or basket checkout)}}
       <div class="summary__payment footer-checkout">
         {{#unless merged}}
@@ -47,7 +47,7 @@
     </div>
   {{/if}}
   <div class="summary__aside">
-    {{> checkout_order-summary-new head=title mod=mod id=id switch-vat=switch-vat hideDeliveryCostMessage=hideDeliveryCostMessage}}
+    {{> checkout_order-summary-new head=title mod=mod id=id switch-vat=switch-vat}}
 
     {{#if klarna-placement}}
       <div class="summary__klarna">

package/src/components/payments.hbs

@@ -1,16 +1,17 @@
 <div class="payways">
   <p class="payways__title">Ways to Pay</p>
   <ul class="payways__list">
-    {{#if billieIcon}}
-      <li class="payways__item">
-        <img class="payways__image" src="./img/payment/footer/billie.svg" alt="Billie">
-      </li>
-    {{else}}
+    {{#if klarnaIcon}}
       <li class="payways__item">
         <img class="payways__image" src="./img/payment/footer/klarna.svg" alt="klarna">
       </span>
       </li>
     {{/if}}
+    {{#if billieIcon}}
+      <li class="payways__item">
+        <img class="payways__image" src="./img/payment/footer/billie.svg" alt="Billie">
+      </li>
+    {{/if}}
     {{#each payments-list}}
       <li class="payways__item">
         <img class="payways__image" src="{{src}}" alt="{{payment}}">