wickes-css2 2.102.0 → 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",
+  "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": "alt-master",
+        "name": "custom-tag/gift-cards",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

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/elements/form-row.hbs

@@ -1,4 +1,4 @@
-<div class="form-row {{#if clearInput}}form-row--clear-input{{/if}} {{#if error}}form-row_validation-error{{/if}} {{#if locked}}form-row--locked{{/if}} {{row-mod}}" {{#if required}}data-row-required{{/if}} {{#if clearInput}}data-clearable{{/if}} {{#if showContent}}data-show-content{{/if}} data-form-field>
+<div class="form-row {{#if clearInput}}form-row--clear-input{{/if}} {{#if error}}form-row_validation-error{{/if}} {{#if locked}}form-row--locked{{/if}} {{row-mod}}" {{#if required}}data-row-required{{/if}} {{#if clearInput}}data-clearable{{/if}} {{#if showContent}}data-show-content{{/if}} {{#if skipGlobalValidation}}data-no-global-validation{{/if}} data-form-field>
   <label class="form-row__label {{#if required}}form-row__label_required{{/if}} {{#if label-hidden}}sr-only{{/if}}" for="{{id}}">
     {{label}}
     {{#if tooltip}}

package/src/elements/input.hbs

@@ -1,7 +1,36 @@
 {{#if textarea}}
   <textarea class="tbx {{#if textarea}}tbx_textarea{{/if}} {{#if error}}tbx_error{{/if}}" rows="{{textareaRows}}" cols="{{textareaCols}}" value="{{value}}" maxlength="{{maxlength}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" {{#if disabled}}disabled{{/if}}></textarea>
 {{else if type}}
-  <input type="{{type}}" class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" placeholder="{{placeholder}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}} {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}>
+  <input
+      type="{{type}}"
+      class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}"
+      value="{{value}}"
+      id="{{id}}"
+      name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}"
+      placeholder="{{placeholder}}"
+      {{#if (or locked disabled)}}disabled{{/if}}
+      {{#if need-pattern}}pattern=""{{/if}}
+      {{#if readonly}}readonly{{/if}}
+      {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}
+      {{#if maxlength}}maxlength="{{maxlength}}"{{/if}}
+      {{#if inputmode}}inputmode="{{inputmode}}"{{/if}}
+      {{#if autocomplete}}autocomplete="{{autocomplete}}"{{/if}}
+  >
 {{else}}
-  <input type="text" class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}" value="{{value}}" id="{{id}}" name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}" placeholder="{{placeholder}}" {{#if (or locked disabled)}}disabled{{/if}} {{#if need-pattern}}pattern=""{{/if}} {{#if readonly}}readonly{{/if}} {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}>
+  <input
+      type="text"
+      class="tbx {{#if error}}tbx_error{{/if}} {{input-mod}}"
+      value="{{value}}"
+      id="{{id}}"
+      name="{{#if name}}{{name}}{{else}}{{id}}{{/if}}"
+      placeholder="{{placeholder}}"
+      {{#if (or locked disabled)}}disabled{{/if}}
+      {{#if need-pattern}}pattern=""{{/if}}
+      {{#if readonly}}readonly{{/if}}
+      {{#if data-tag}}data-tag="{{data-tag}}"{{/if}}
+      {{#if error}}aria-invalid="true"{{/if}}
+      {{#if maxlength}}maxlength="{{maxlength}}"{{/if}}
+      {{#if inputmode}}inputmode="{{inputmode}}"{{/if}}
+      {{#if autocomplete}}autocomplete="{{autocomplete}}"{{/if}}
+    >
 {{/if}}

package/src/img/giftcard.svg

@@ -0,0 +1,28 @@
+<svg width="48" height="31" viewBox="0 0 48 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9507_79257)">
+<rect y="0.207031" width="48" height="30" rx="3" fill="white"/>
+<path d="M42.5 26.207C39.5 25.707 36.5 21.207 36.5 21.207C36.5 21.207 34 25.207 31 26.207" stroke="#004587" stroke-width="1.8"/>
+<path d="M29.7862 18.5774C30.7643 19.8755 32.9202 20.2323 35.2567 20.6584C35.2241 18.7373 34.7506 16.8572 33.7724 15.5591C32.7942 14.261 31.3287 13.7129 30.0307 14.691C28.7326 15.6692 28.808 17.2793 29.7862 18.5774Z" fill="white" stroke="#004587" stroke-width="1.8"/>
+<path d="M43.164 18.5774C42.1859 19.8755 40.03 20.2323 37.6935 20.6584C37.7261 18.7373 38.1996 16.8572 39.1778 15.5591C40.1559 14.261 41.6215 13.7129 42.9195 14.691C44.2176 15.6692 44.1422 17.2793 43.164 18.5774Z" fill="white" stroke="#004587" stroke-width="1.8"/>
+<g clip-path="url(#clip1_9507_79257)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0.207031V12.4151L16.5154 15.1785L30.0427 12.3838V0.207031H3Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.90234 1.08984V11.6893L16.5155 14.2625L29.1463 11.6881V1.08984H3.90234Z" fill="#004587"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7783 7.92572C15.7696 7.62779 15.5026 7.41921 15.207 7.41921C14.5493 7.41921 14.4462 7.96811 14.4462 8.45635C14.4462 8.91044 14.6458 9.37843 15.1424 9.37843C15.5498 9.37843 15.7562 9.14851 15.8118 8.77483H16.9531C16.8474 9.71885 16.1003 10.2603 15.1504 10.2603C14.0724 10.2603 13.2715 9.53599 13.2715 8.45635C13.2715 7.33602 13.9969 6.53516 15.1504 6.53516C16.0389 6.53516 16.8342 6.99838 16.9153 7.92572H15.7783Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1543 5.31641H18.3288V7.81242L19.4004 6.63986H20.7594L19.4483 7.96917L20.9249 10.16H19.5089L18.6344 8.74224L18.3288 9.03322V10.16H17.1543V5.31641Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7333 8.67923C21.7536 9.16013 22.0363 9.47999 22.535 9.47999C22.8166 9.47999 23.0924 9.35193 23.2046 9.09401H24.3016C24.0876 9.90917 23.32 10.2602 22.5192 10.2602C21.3542 10.2602 20.5586 9.56984 20.5586 8.38984C20.5586 7.30951 21.4374 6.53516 22.4916 6.53516C23.7754 6.53516 24.4182 7.48632 24.3632 8.67923H21.7333ZM23.189 8.03592C23.169 7.64149 22.8853 7.31607 22.4916 7.31607C22.0778 7.31607 21.8021 7.60794 21.7333 8.03592H23.189Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5842 8.99642C25.5842 9.17551 25.6574 9.30418 25.7769 9.39104C25.8863 9.47275 26.0451 9.51434 26.2117 9.51434C26.4397 9.51434 26.7649 9.42043 26.7649 9.13997C26.7649 8.86835 26.3976 8.81603 26.1918 8.76798C25.4513 8.58432 24.5267 8.56159 24.5267 7.61548C24.5267 6.76836 25.4589 6.53516 26.1636 6.53516C26.9515 6.53516 27.7712 6.76041 27.8136 7.67723H26.7287C26.7287 7.52613 26.6751 7.43222 26.5773 7.36908C26.4792 7.30941 26.3507 7.28013 26.2052 7.28013C26.0108 7.28013 25.7017 7.30207 25.7017 7.54688C25.7017 7.87886 26.4881 7.93992 27.0274 8.05399C27.75 8.19744 27.9381 8.71249 27.9381 9.00545C27.9381 9.94987 27.0274 10.2602 26.2187 10.2602C25.3684 10.2602 24.4986 9.98342 24.4639 8.99642H25.5842Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3756 10.16H9.08877L8.41406 6.82332H8.3981L7.72329 10.16H6.41975L5.08691 5.31641H6.36913L7.0693 8.85571H7.08112L7.80504 5.31641H9.01268L9.73841 8.85571H9.75195L10.4494 5.31641H11.7329L10.3756 10.16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8215 6.19887H12.9972V5.31641H11.8215V6.19887ZM11.8213 10.1601H12.997V6.63986H11.8213V10.1601Z" fill="white"/>
+</g>
+<path d="M36.5 0.207031V21.707M36.5 30.207V21.707M36.5 21.707H47.5M36.5 21.707H1" stroke="#004587" stroke-width="1.8"/>
+</g>
+<rect x="0.5" y="0.707031" width="47" height="29" rx="2.5" stroke="#CCCCCC"/>
+<defs>
+<clipPath id="clip0_9507_79257">
+<rect y="0.207031" width="48" height="30" rx="3" fill="white"/>
+</clipPath>
+<clipPath id="clip1_9507_79257">
+<rect width="27" height="14.9703" fill="white" transform="translate(3 0.207031)"/>
+</clipPath>
+</defs>
+</svg>

package/src/js/emulation/checkout-data.js

@@ -0,0 +1,35 @@
+var Wick = Wick || {};
+Wick.CheckoutData = (function () {
+  return {
+    //TODO: update after BE confirmation
+    successGiftCardData: {
+      "subTotal": "£85.00",
+      "deliveryCost": "£4.00",
+      "freeDelivery": false,
+      "clickAndCollectCost": "FREE",
+      "totalForDelivery": "£69.00",
+      "totalForClickAndCollect": "FREE",
+      "total": "£67.00",
+      "vat": "£11.17",
+      "deliveryOrder": true,
+      "clickAndCollectOrder": false,
+      "discountTotal": "£2.00",
+      "giftCardApplied": "-£100.00",
+      "discounts": [
+        "Spend over £10 and get £2 fixed discount"
+      ],
+      "promotionsInfo": [
+        {
+          "description": "Spend over £10 and get £2 fixed discount",
+          "usedCouponCode": "RT_02"
+        }
+      ],
+      "subTotalWithDeliveryCost": "£69.00",
+      "net": false,
+      "subtotalWithDeliveryAndDiscounts": "£67.00",
+      "discountAmounts": [],
+      "goodsTotalWithoutDiscount": "£65.00",
+      "charityPrice": ""
+    },
+  }
+})();

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

@@ -2,24 +2,33 @@ var Wick = Wick || {};
 
 Wick.PaymentDetails = (function () {
   var $btnEnterDetails = $('.btn-enter-details'),
-    $form = $btnEnterDetails.parents('form'),
     isGuestPage = $('.page_checkout-payment-details_guest').length;
 
   function bindEvents () {
-    $btnEnterDetails.on('click', function(){
-      if ($form.find('#card-name').val().length &&
-        $form.find('#first-line-address').val().length &&
-        $form.find('#address-line-1').val().length &&
-        $form.find('#town-city').val().length &&
-        $form.find('#postcode_additional').val().length){
-        $('.checkout-payment-details__card-details').removeClass('checkout-payment-details__card-details_hidden');
-        $('html, body').animate({
-          scrollTop: $('.checkout-payment-details__card-details').offset().top - 15
-        }, 700);
-        return false;
+    $btnEnterDetails.on('click', function (e) {
+      e.preventDefault();
+      var $scope = $(this).closest('form');
+      if (!$scope.length) $scope = $(this).closest('.billing-address');
+      if (!$scope.length) $scope = $('.billing-address');
+      var nameVal= ($scope.find('#card-name').val() || '').trim();
+      var finderVal= ($scope.find('#first-line-address').val() || '').trim();
+      var manualLine1= ($scope.find('#address-line-1').val() || '').trim();
+      var manualTown= ($scope.find('#town-city').val() || '').trim();
+      var manualPost= ($scope.find('#postcode_additional').val() || '').trim();
+      var addressFinderOk = finderVal.length > 0;
+      var addressManualOk = manualLine1 && manualTown && manualPost;
+
+      if (nameVal && (addressFinderOk || addressManualOk)) {
+        var $details = $('.checkout-payment-details__card-details');
+        $details.removeClass('checkout-payment-details__card-details_hidden');
+        $('html, body').animate({ scrollTop: $details.offset().top - 15 }, 700);
+        return;
+      }
+
+      var formEl = $scope.closest('form').get(0) || $scope.get(0);
+      if (formEl && Wick.Forms && Wick.Forms.showValidationErrors) {
+        Wick.Forms.showValidationErrors(formEl);
       }
-      Wick.Forms.showValidationErrors($form[0]);
-      return false;
     });
 
     $('.checkout-payment-details__card-details').on('submit', function(){

package/src/js/emulation/forms.js

@@ -60,11 +60,16 @@ Wick.Forms = (function(){
 
   var showValidationErrors = function (form, errorMsg) {
     var $form = $(form);
+    var $rows = $form.find(fieldRow).not('[data-no-global-validation]');
+    if (!$rows.length) return;
+    $rows.find('.form-row__error').remove();
+
     if (!$form.hasClass(formInvalid)) {
-      $form.find('.form-row__error').remove();
-      $form.addClass(formInvalid).find(fieldRow).append(validationError(errorMsg)).addClass(rowValidationError);
+      $form.addClass(formInvalid);
     }
 
+    $rows.append(validationError(errorMsg)).addClass(rowValidationError);
+
     var $firstMsg = $form.find(fieldRow).first();
     if($firstMsg.length && !isElementInViewport($firstMsg)){
       var inModal = $firstMsg.closest('.modal').length,