wickes-css2 2.96.0-develop.1 → 2.96.0-develop.2

package/build/js/tradePro-rewards.min.js

@@ -0,0 +1 @@
+!function o(n,a,i){function d(t,e){if(!a[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(c)return c(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=a[t]={exports:{}},n[t][0].call(r.exports,function(e){return d(n[t][1][e]||e)},r,r.exports,o,n,a,i)}return a[t].exports}for(var c="function"==typeof require&&require,e=0;e<i.length;e++)d(i[e]);return d}({1:[function(e,t,r){"use strict";var o=e("./utils/copy-to-clipboard"),n=window.Wick||{};n.TradeProRewards={el:{$tradeProRewards:$(".page_tradePro-rewards"),buttonSelector:".copy-tradePro-barcode"},message:"Code copied to clipboard",copyToClipboardInit:function(){n.SnackBar.init(),$(n.TradeProRewards.el.buttonSelector).on("click",function(e){e.preventDefault(),e.stopPropagation();var t=$(this).parent().find("input"),r=t.val().trim();return t.removeAttr("disabled").attr("readonly","readonly"),(0,o.copyToClipboard)(r,e.currentTarget),t.attr("disabled","disabled").removeAttr("readonly"),window.getSelection().removeAllRanges(),n.SnackBar.show({text:n.TradeProRewards.message,type:n.SnackBar.types.SUCCESS,withCloseButton:!1,autoClose:!0,delayBeforeClose:3e3}),!1})},init:function(){n.TradeProRewards.copyToClipboardInit()}},$(document).ready(function(){n.TradeProRewards.el.$tradeProRewards.length&&n.TradeProRewards.init()})},{"./utils/copy-to-clipboard":2}],2:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.copyToClipboard=function(e,t){var r=$("<textarea>").css({position:"absolute",top:0,left:0,opacity:0});$(t).parent().append(r);t=e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()}).split(" ").filter(function(e){return""!==e}).join(" ");r.val(t),navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)?function(e){var e=e.get(0),t=e.contentEditable,r=e.readOnly,o=document.createRange(),n=window.getSelection();e.contentEditable=!0,e.readOnly=!1,o.selectNodeContents(e),n.removeAllRanges(),n.addRange(o),e.setSelectionRange(0,999999),e.contentEditable=t,e.readOnly=r}(r):navigator.userAgent.match(/ipad|ipod|iphone/i)?(r.select(),r[0].setSelectionRange(0,999999)):r.select();document.execCommand("copy"),r.remove()}},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.96.0-develop.1",
+  "version": "2.96.0-develop.2",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/cards-slider.hbs

@@ -0,0 +1,35 @@
+<div class="cards-slider-boundary {{#if secondary}}cards-slider-boundary--secondary{{/if}}">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="cards-slider">
+          <div class="cards-slider__header">
+            {{#if secondary}}
+              <h3 class="cards-slider__title">{{title}}</h3>
+            {{else}}
+              <h1 class="cards-slider__title">{{title}}</h1>
+            {{/if}}
+            <div class="cards-slider__controls">
+              <div class="cards-slider__btn cards-slider__prev-btn">
+                <span class="icon">
+                  <i class="fas fa-chevron-left"></i>
+                </span>
+              </div>
+              <div class="cards-slider__btn cards-slider__next-btn">
+                <span class="icon">
+                  <i class="fas fa-chevron-right"></i>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-container">
+            <div class="cards-swiper-wrapper swiper-wrapper">
+              {{#block "cards"}}{{/block}}
+            </div>
+            <div class="swiper-pagination swiper-pagination-bullets"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/my-account/mobile-nav.hbs

@@ -15,6 +15,13 @@
         {{/if}}
       {{/each}}
       <span class="accordion__header-text">{{page-name}}</span>
+      {{#each menu}}
+        {{#if (eq @index ../active-index)}}
+          {{#if total}}
+            <span class="rewards">{{total}}</span>
+          {{/if}}
+        {{/if}}
+      {{/each}}
       <span class="icon accordion__header-icon">
         <i class="fas fa-angle-up"></i>
       </span>

package/src/components/reward_card.hbs

@@ -0,0 +1,10 @@
+<div class="reward-card {{modificator}}">
+    <img src="{{imgSrc}}" alt="Trade Pro Reward" class="reward-card__img">
+    <div class="reward-card__content">
+        <p class="reward-card__title">{{title}}</p>
+        {{#if description}}
+            <p class="reward-card__description">{{description}}</p>
+        {{/if}}
+        <a href="{{btnUrl}}" class="btn btn-secondary">{{btnText}}</a>
+    </div>
+</div>

package/src/components/voucher.hbs

@@ -1,174 +1,76 @@
-<div class="voucher {{modificator}} {{mod}}">
-  {{#if voucher-title}}
-    <h2 class="{{modificator}}-title">{{title}}</h2>
-  {{/if}}
-  {{#if voucher-info}}
-    <div class="{{modificator}}-info">
-      <div class="row">
-        <div class="{{modificator}}-placeholder">
-          <div class="{{modificator}}-placeholder-wrap">
-            {{#if discount}}
-              <span class="{{modificator}}-placeholder-discount">
-            10% off
-          </span>
-            {{/if}}
-            <img src="{{imgPlaceholder}}" alt="">
-          </div>
-        </div>
-        <div class="{{modificator}}-description">
-          {{#if sub-header}}
-            {{#each subheader-data}}
-              <h{{subheaderIndex}} class="{{modificator}}-subheader">{{subheader}}</h{{subheaderIndex}}>
-            {{/each}}
-          {{/if}}
-          <p>{{description}}</p>
-          <p>{{description2}}</p>
-          {{#if description-button}}
-            <div class="{{modificator}}-code-actions {{button-mod}}">
-              <a href="#" class="btn btn-primary">
-                {{buttonValue}}
-              </a>
-            </div>
-          {{/if}}
-        </div>
+<div class="voucher">
+  <div class="voucher__grid">
+    <div class="voucher__cell">
+      {{!-- image --}}
+      <div class="voucher__image-wrap">
+        <img src="{{img}}" alt="{{imgAlt}}">
       </div>
+      {{!-- /image --}}
     </div>
-  {{/if}}
-  {{#if hasBanner}}
-    <div class="{{modificator}}-banner-wrap">
-      <div class="{{modificator}}-banner-info">{{{bannerInfo}}}</div>
-      <div class="{{modificator}}-banner-expiry-date">{{bannerExpiryDate}}</div>
-    </div>
-  {{/if}}
-  {{#if voucher-code}}
-    <div class="{{modificator}}-wrap {{modificator}}-wrap{{button-mod}}">
-      <div class="row">
-        {{#if hasBarcode}}
-          <div class="{{modificator}}-barcode">
-            <div class="{{modificator}}-barcode-container">
-              <div class="{{modificator}}-barcode-title">
-                <h5>{{barcodeTitle}}</h5>
-              </div>
-              <div class="{{modificator}}-barcode-info">
-                {{#unless targetedVoucher}}
-                  <span class="name">{{barcodeName}}</span>
-                  <span class="date">{{barcodeDate}}</span>
-                {{/unless}}
-                <span class="hint">{{barcodeHint}}</span>
-              </div>
-              <div class="{{modificator}}-barcode-img">
-                <svg id="barcode" jsbarcode-value="00010931000118010" jsbarcode-width="3" jsbarcode-height="119" jsbarcode-displayvalue="false" jsbarcode-margin="0" width="435px" height="119px" x="0px" y="0px" viewBox="0 0 435 119" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0px, 0px);"><rect x="0" y="0" width="435" height="119" style="fill:#ffffff;"></rect><g transform="translate(0, 0)" style="fill:#000000;"><rect x="0" y="0" width="6" height="119"></rect><rect x="9" y="0" width="3" height="119"></rect><rect x="18" y="0" width="9" height="119"></rect><rect x="33" y="0" width="6" height="119"></rect><rect x="42" y="0" width="6" height="119"></rect><rect x="54" y="0" width="6" height="119"></rect><rect x="66" y="0" width="6" height="119"></rect><rect x="78" y="0" width="6" height="119"></rect><rect x="87" y="0" width="6" height="119"></rect><rect x="99" y="0" width="6" height="119"></rect><rect x="111" y="0" width="3" height="119"></rect><rect x="120" y="0" width="3" height="119"></rect><rect x="132" y="0" width="6" height="119"></rect><rect x="141" y="0" width="6" height="119"></rect><rect x="156" y="0" width="6" height="119"></rect><rect x="165" y="0" width="6" height="119"></rect><rect x="174" y="0" width="6" height="119"></rect><rect x="186" y="0" width="6" height="119"></rect><rect x="198" y="0" width="6" height="119"></rect><rect x="210" y="0" width="6" height="119"></rect><rect x="219" y="0" width="6" height="119"></rect><rect x="231" y="0" width="6" height="119"></rect><rect x="243" y="0" width="9" height="119"></rect><rect x="258" y="0" width="3" height="119"></rect><rect x="264" y="0" width="6" height="119"></rect><rect x="276" y="0" width="6" height="119"></rect><rect x="285" y="0" width="6" height="119"></rect><rect x="297" y="0" width="9" height="119"></rect><rect x="309" y="0" width="3" height="119"></rect><rect x="315" y="0" width="12" height="119"></rect><rect x="330" y="0" width="3" height="119"></rect><rect x="339" y="0" width="9" height="119"></rect><rect x="351" y="0" width="6" height="119"></rect><rect x="363" y="0" width="9" height="119"></rect><rect x="378" y="0" width="3" height="119"></rect><rect x="384" y="0" width="6" height="119"></rect><rect x="396" y="0" width="6" height="119"></rect><rect x="411" y="0" width="9" height="119"></rect><rect x="423" y="0" width="3" height="119"></rect><rect x="429" y="0" width="6" height="119"></rect></g></svg>
+    {{#ifCond isOnline '||' isInstore}}
+      <div class="voucher__column">
+        {{#if isInstore}}
+          <div class="voucher__cell d-flex flex-column">
+            {{!-- instore --}}
+            <span class="voucher__label">{{instore.label}}</span>
+            <div class="voucher__content">
+              <div>
+                <h4 class="mb-0">{{title}}</h4>
+                <p class="mt-1 mb-0">{{instore.name}}</p>
+                <p class="mt-1 mb-0">{{instore.expiration}}</p>
               </div>
-              <div class="{{modificator}}-barcode-number">{{barcodeNumber}}</div>
-              <div class="{{modificator}}-barcode-warning">{{barcodeWarning}}</div>
-              {{#if barcode-expand}}
-                <div class="barcode__footer_expand">
-                  <a href="#" class="icon" data-toggle="modal" data-target="#modal-barcode">
-                    <i class="far fa-expand-arrows"></i>
-                    <a href="#" data-toggle="modal" data-target="#modal-barcode">Use barcode</a>
-                  </a>
+              <div class="mt-3">
+                <div class="voucher__barcode-img">
+                  <svg id="barcode" jsbarcode-value="00010931000118010" jsbarcode-width="3" jsbarcode-height="119" jsbarcode-displayvalue="false" jsbarcode-margin="0" width="435px" height="119px" x="0px" y="0px" viewBox="0 0 435 119" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0px, 0px);"><rect x="0" y="0" width="435" height="119" style="fill:#ffffff;"></rect><g transform="translate(0, 0)" style="fill:#000000;"><rect x="0" y="0" width="6" height="119"></rect><rect x="9" y="0" width="3" height="119"></rect><rect x="18" y="0" width="9" height="119"></rect><rect x="33" y="0" width="6" height="119"></rect><rect x="42" y="0" width="6" height="119"></rect><rect x="54" y="0" width="6" height="119"></rect><rect x="66" y="0" width="6" height="119"></rect><rect x="78" y="0" width="6" height="119"></rect><rect x="87" y="0" width="6" height="119"></rect><rect x="99" y="0" width="6" height="119"></rect><rect x="111" y="0" width="3" height="119"></rect><rect x="120" y="0" width="3" height="119"></rect><rect x="132" y="0" width="6" height="119"></rect><rect x="141" y="0" width="6" height="119"></rect><rect x="156" y="0" width="6" height="119"></rect><rect x="165" y="0" width="6" height="119"></rect><rect x="174" y="0" width="6" height="119"></rect><rect x="186" y="0" width="6" height="119"></rect><rect x="198" y="0" width="6" height="119"></rect><rect x="210" y="0" width="6" height="119"></rect><rect x="219" y="0" width="6" height="119"></rect><rect x="231" y="0" width="6" height="119"></rect><rect x="243" y="0" width="9" height="119"></rect><rect x="258" y="0" width="3" height="119"></rect><rect x="264" y="0" width="6" height="119"></rect><rect x="276" y="0" width="6" height="119"></rect><rect x="285" y="0" width="6" height="119"></rect><rect x="297" y="0" width="9" height="119"></rect><rect x="309" y="0" width="3" height="119"></rect><rect x="315" y="0" width="12" height="119"></rect><rect x="330" y="0" width="3" height="119"></rect><rect x="339" y="0" width="9" height="119"></rect><rect x="351" y="0" width="6" height="119"></rect><rect x="363" y="0" width="9" height="119"></rect><rect x="378" y="0" width="3" height="119"></rect><rect x="384" y="0" width="6" height="119"></rect><rect x="396" y="0" width="6" height="119"></rect><rect x="411" y="0" width="9" height="119"></rect><rect x="423" y="0" width="3" height="119"></rect><rect x="429" y="0" width="6" height="119"></rect></g></svg>
                 </div>
-              {{else if barcode-targeted-expand}}
-                <div class="barcode__footer_expand">
-                  <a href="#" class="icon" data-toggle="modal" data-target="#modal-barcode-targeted">
-                    <i class="far fa-expand-arrows"></i>
-                    <a href="#" data-toggle="modal" data-target="#modal-barcode-targeted">Use barcode</a>
-                  </a>
-                </div>
-              {{/if}}
-            </div>
-          </div>
-        {{/if}}
-        {{#if hasCode}}
-          <div class="{{modificator}}-code">
-            <div class="{{modificator}}-code-container">
-              <div class="{{modificator}}-code-title">
-                <h3>{{codeTitle}}</h3>
+                <div class="voucher__barcode-number">{{instore.barcodeNumber}}</div>
               </div>
-              {{#unless copy-absent}}
-                <div class="{{modificator}}-code-field">
-                  <input type="text" value="{{inputValue}}" disabled>
-                  <a href="#" class="copy-barcode">
-                    <span class="icon">
-                      <i class="fas fa-copy"></i>
-                    </span>
-                    <span>Copy</span>
-                  </a>
-                </div>
-                <div class="copy-barcode_notification">
-
-                </div>
-              {{/unless}}
-              {{#if button-present}}
-                <div class="{{modificator}}-code-actions">
-                  <a href="#" class="btn btn-primary">
-                    {{buttonValue}}
-                  </a>
-                </div>
-              {{/if}}
-              {{#if warning-present}}
-                <div class="{{modificator}}-code-warning">{{codeWarning}}</div>
-              {{/if}}
             </div>
+            {{!-- /instore --}}
           </div>
         {{/if}}
-        {{#if hasTargetedCode}}
-          <div class="{{modificator}}-code">
-            <div class="{{modificator}}-code-container">
-              <div class="{{modificator}}-code-title">
-                <h5>{{codeTitle}}</h5>
+        {{#if isOnline}}
+          <div class="voucher__cell d-flex flex-column">
+            {{!-- online --}}
+            <span class="voucher__label">{{online.label}}</span>
+            <div class="voucher__content">
+              <div>
+                {{#if online.title}}
+                  <h4 class="mb-0">{{online.title}}</h4>
+                {{/if}}
+                <p class="mt-1 mb-0">{{online.note}}</p>
               </div>
-                <div class="{{modificator}}-code-info">
-                  <span class="hint">{{codeHint}}</span>
-                </div>
-                <div class="{{modificator}}-code-field">
-                  <span>{{codeHeading}}</span>
-                  <div class="{{modificator}}-code-wrap">
-                    <input class="{{modificator}}-code-value" type="text" value="{{codeValue}}" disabled>
-                  </div>
+              <div class="my-3">
+                <div class="voucher__code-field copy-tradePro-barcode">
+                  <input type="text" value="{{online.code}}" disabled>
+                  <span class="icon">
+                    <i class="fas fa-copy"></i>
+                  </span>
                 </div>
-                <a href="#" class="copy-barcode">
-                    <span class="icon">
-                      <i class="far fa-copy"></i>
-                    </span>
-                    <span>Copy code</span>
+              </div>
+              {{#ifCond online.buttonLink "&&" online.buttonText}}
+                <a href="{{online.buttonLink}}" class="btn btn-primary">
+                  <span class="btn__text">{{online.buttonText}}</span>
                 </a>
-                <div class="copy-barcode_notification"></div>
-                {{#if notification}}
-                  <div class="copy-barcode_notification"></div>
-                {{/if}}
-              {{#if button-present}}
-                <div class="{{modificator}}-code-actions">
-                  <a href="#" class="btn btn-primary">
-                    {{buttonValue}}
-                  </a>
-                </div>
-              {{/if}}
-              {{#if warning-present}}
-                <div class="{{modificator}}-code-warning">{{codeWarning}}</div>
-              {{/if}}
+              {{/ifCond}}
             </div>
+            {{!-- /online --}}
           </div>
         {{/if}}
       </div>
+    {{/ifCond}}
+    <div class="voucher__cell voucher__description">
+      {{!-- description --}}
+      {{#if description.short}}
+        <p class="voucher__description-title mb-2">{{description.short}}</p>
+      {{/if}}
+      <p class="voucher__description-text mb-0">{{description.long}}</p>
+      {{#ifCond description.buttonLink "&&" description.buttonText}}
+        <a href="{{description.buttonLink}}" class="btn btn-primary voucher__description-button">
+          <span class="btn__text">{{description.buttonText}}</span>
+        </a>
+      {{/ifCond}}
+      {{!-- /description --}}
     </div>
-    {{#if termsAndConditions}}
-      <div class="terms">
-        <div class="terms__btn-accordion">
-        <span class="icon">
-          <i class="fas fa-angle-down"></i>
-        </span>
-          Terms & Conditions
-        </div>
-        <div class="terms__content">
-          Terms, conditions and exclusions apply. Credit subject to status. Over 18’s only. Offer ends 21st February 2018. Ask your design consultant for more information and
-          terms and conditions. 24 month term. Equal monthly payments commence after delivery. Wickes Building Supplies Limited is registered in England and Wales with
-          registration number 1840419 and is authorised and regulated by the Financial Conduct Authority to carry on credit-broking. Registered office; Lodge Way House,
-          Harlestone Road, Northampton, NN5 7UG. Credit is exclusively provided by Hitachi Capital (UK) PLC, with whom Wickes have a commercial relationship. Hitachi Capital
-          (UK) PLC is registered in England and Wales with registration number 1630491 and is authorised and regulated by the Financial Conduct Authority. Registered office;
-          Hitachi Capital House, Thorpe Road, Staines-upon-Thames, Surrey, TW18 3HP. Excludes non showroom Kitchen and Bathroom products.
-        </div>
-      </div>
-    {{/if}}
-  {{/if}}
-</div>
+  </div>
+</div>

package/src/data/data_tradePro_cards.json

@@ -141,6 +141,66 @@
         "src": "./img/placeholders/[e-img-4to3].jpg",
         "price": "£2,009.00"
       }
+    ],
+    "reward_cards": [
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro Active 15% off",
+        "description": "Short description",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro wit short description and long title that takes more lines",
+        "description": "Short description",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro with short description",
+        "description": "Short description that long and takes two lines of content",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro without short description",
+        "description": "",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro with short description",
+        "description": "Short description",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro without short description",
+        "description": "",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro without short description",
+        "description": "",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      }
+    ],
+    "reward_card": [
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro Active 15% off",
+        "description": "Short description",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      }
     ]
   }
 }