wickes-css2 2.105.0-develop.7 → 2.105.0-develop.8

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

@@ -1 +1 @@
-!function n(o,i,a){function c(e,t){if(!i[e]){if(!o[e]){var r="function"==typeof require&&require;if(!t&&r)return r(e,!0);if(u)return u(e,!0);throw(t=new Error("Cannot find module '"+e+"'")).code="MODULE_NOT_FOUND",t}r=i[e]={exports:{}},o[e][0].call(r.exports,function(t){return c(o[e][1][t]||t)},r,r.exports,n,o,i,a)}return i[e].exports}for(var u="function"==typeof require&&require,t=0;t<a.length;t++)c(a[t]);return c}({1:[function(t,e,r){"use strict";function L(t){return(L="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var u=t("./utils/copy-to-clipboard");function S(){S=function(){return a};var a={},t=Object.prototype,u=t.hasOwnProperty,l=Object.defineProperty||function(t,e,r){t[e]=r.value},e="function"==typeof Symbol?Symbol:{},n=e.iterator||"@@iterator",r=e.asyncIterator||"@@asyncIterator",o=e.toStringTag||"@@toStringTag";function i(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{i({},"")}catch(t){i=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o,i,a,c,e=e&&e.prototype instanceof p?e:p,e=Object.create(e.prototype),n=new x(n||[]);return l(e,"_invoke",{value:(o=t,i=r,a=n,c="suspendedStart",function(t,e){if("executing"===c)throw new Error("Generator is already running");if("completed"===c){if("throw"===t)throw e;return{value:void 0,done:!0}}for(a.method=t,a.arg=e;;){var r=a.delegate;if(r){r=function t(e,r){var n=r.method,o=e.iterator[n];if(void 0===o)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=void 0,t(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),f;n=s(o,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,f;o=n.arg;return o?o.done?(r[e.resultName]=o.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=void 0),r.delegate=null,f):o:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,f)}(r,a);if(r){if(r===f)continue;return r}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if("suspendedStart"===c)throw c="completed",a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);c="executing";r=s(o,i,a);if("normal"===r.type){if(c=a.done?"completed":"suspendedYield",r.arg===f)continue;return{value:r.arg,done:a.done}}"throw"===r.type&&(c="completed",a.method="throw",a.arg=r.arg)}})}),e}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}a.wrap=c;var f={};function p(){}function d(){}function h(){}var e={},y=(i(e,n,function(){return this}),Object.getPrototypeOf),y=y&&y(y(E([]))),v=(y&&y!==t&&u.call(y,n)&&(e=y),h.prototype=p.prototype=Object.create(e));function g(t){["next","throw","return"].forEach(function(e){i(t,e,function(t){return this._invoke(e,t)})})}function w(a,c){var e;l(this,"_invoke",{value:function(r,n){function t(){return new c(function(t,e){!function e(t,r,n,o){var i,t=s(a[t],a,r);if("throw"!==t.type)return(r=(i=t.arg).value)&&"object"==L(r)&&u.call(r,"__await")?c.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):c.resolve(r).then(function(t){i.value=t,n(i)},function(t){return e("throw",t,n,o)});o(t.arg)}(r,n,t,e)})}return e=e?e.then(t,t):t()}})}function m(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function b(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function x(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(m,this),this.reset(!0)}function E(e){if(e||""===e){var r,t=e[n];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length))return r=-1,(t=function t(){for(;++r<e.length;)if(u.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t}).next=t}throw new TypeError(L(e)+" is not iterable")}return l(v,"constructor",{value:d.prototype=h,configurable:!0}),l(h,"constructor",{value:d,configurable:!0}),d.displayName=i(h,o,"GeneratorFunction"),a.isGeneratorFunction=function(t){t="function"==typeof t&&t.constructor;return!!t&&(t===d||"GeneratorFunction"===(t.displayName||t.name))},a.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,i(t,o,"GeneratorFunction")),t.prototype=Object.create(v),t},a.awrap=function(t){return{__await:t}},g(w.prototype),i(w.prototype,r,function(){return this}),a.AsyncIterator=w,a.async=function(t,e,r,n,o){void 0===o&&(o=Promise);var i=new w(c(t,e,r,n),o);return a.isGeneratorFunction(e)?i:i.next().then(function(t){return t.done?t.value:i.next()})},g(v),i(v,o,"Generator"),i(v,n,function(){return this}),i(v,"toString",function(){return"[object Generator]"}),a.keys=function(t){var e,r=Object(t),n=[];for(e in r)n.push(e);return n.reverse(),function t(){for(;n.length;){var e=n.pop();if(e in r)return t.value=e,t.done=!1,t}return t.done=!0,t}},a.values=E,x.prototype={constructor:x,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(b),!t)for(var e in this)"t"===e.charAt(0)&&u.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var n=this;function t(t,e){return i.type="throw",i.arg=r,n.next=t,e&&(n.method="next",n.arg=void 0),!!e}for(var e=this.tryEntries.length-1;0<=e;--e){var o=this.tryEntries[e],i=o.completion;if("root"===o.tryLoc)return t("end");if(o.tryLoc<=this.prev){var a=u.call(o,"catchLoc"),c=u.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return t(o.catchLoc,!0);if(this.prev<o.finallyLoc)return t(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return t(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return t(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;0<=r;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&u.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}var i=(o=o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc?null:o)?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,f):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),f},finish:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),b(r),f}},catch:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r,n,o=this.tryEntries[e];if(o.tryLoc===t)return"throw"===(r=o.completion).type&&(n=r.arg,b(o)),n}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:E(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),f}},a}function l(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}var s=window.Wick||{};s.TradeProRewards={el:{$tradeProRewards:$(".page_tradePro-rewards"),buttonSelector:".copy-tradePro-barcode"},message:"Code copied to clipboard",errorMessage:"Unable to copy. Please copy manually",copyToClipboardInit:function(){s.SnackBar.init(),$(document).on("click",s.TradeProRewards.el.buttonSelector,function(){c=S().mark(function t(e){var r,n,o,i,a;return S().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(e.preventDefault(),e.stopPropagation(),o=$(this),(o=o.parent().find("input")).length){t.next=6;break}return t.abrupt("return",!1);case 6:if(i=(o.val()||"").trim()){t.next=9;break}return t.abrupt("return",!1);case 9:return o.removeAttr("disabled").attr("readonly","readonly"),t.prev=10,t.next=13,(0,u.copyToClipboard)(i,e.currentTarget,{noUpperCase:!0});case 13:s.SnackBar.show({text:s.TradeProRewards.message,type:s.SnackBar.types.SUCCESS,withCloseButton:!1,autoClose:!0,delayBeforeClose:3e3}),t.next=20;break;case 16:t.prev=16,t.t0=t.catch(10);try{(a=o.get(0)).focus(),a.select(),a.setSelectionRange(0,999999)}catch(t){console.error(t)}s.SnackBar.show({text:s.TradeProRewards.errorMessage,type:s.SnackBar.types.ERROR,withCloseButton:!1,autoClose:!0,delayBeforeClose:4e3});case 20:return o.attr("disabled","disabled").removeAttr("readonly"),null!=(r=window.getSelection())&&null!=(n=r.removeAllRanges)&&n.call(r),t.abrupt("return",!1);case 23:case"end":return t.stop()}},t,this,[[10,16]])});var c,e=function(){var t=this,a=arguments;return new Promise(function(e,r){var n=c.apply(t,a);function o(t){l(n,e,r,o,i,"next",t)}function i(t){l(n,e,r,o,i,"throw",t)}o(void 0)})};return function(t){return e.apply(this,arguments)}}())},init:function(){s.TradeProRewards.copyToClipboardInit()}},$(document).ready(function(){s.TradeProRewards.el.$tradeProRewards.length&&s.TradeProRewards.init()})},{"./utils/copy-to-clipboard":2}],2:[function(t,e,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.copyToClipboard=function(t,e){var r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},t=function(t,e){t=null==t?"":t+"";return(e.noUpperCase?t:t.replace(/(^\w|\s\w)/g,function(t){return t.toUpperCase()})).split(" ").filter(function(t){return""!==t}).join(" ").trim()}(t,r);if(!t)return Promise.reject(new Error("Empty text"));if(null!=(r=window.webkit)&&null!=(r=r.messageHandlers)&&r.copy)try{return window.webkit.messageHandlers.copy.postMessage(t),Promise.resolve(!0)}catch(t){console.error(t)}if(null!=(r=window.Android)&&r.copyToClipboard&&"function"==typeof window.Android.copyToClipboard)try{return window.Android.copyToClipboard(t),Promise.resolve(!0)}catch(t){console.error(t)}if(null!=(r=navigator.clipboard)&&r.writeText)return navigator.clipboard.writeText(t).then(function(){return!0});return function(u,l){return new Promise(function(t,e){try{var r,n=$(l).parent(),o=$("<textarea>").val(u).attr("readonly","readonly").css({position:"fixed",top:0,left:"-9999px",opacity:0,width:"1px",height:"1px",padding:0,border:0,margin:0}),i=(n.append(o),o.get(0)),a=(i.focus(),(i.value||"").length),c=("function"==typeof i.setSelectionRange?i.setSelectionRange(0,a):o.select(),document.execCommand("copy"));o.remove(),window.getSelection&&(r=window.getSelection())&&r.removeAllRanges&&r.removeAllRanges(),c?t(!0):e(new Error("execCommand failed"))}catch(t){e(t)}})}(t,e)}},{}]},{},[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,{noUpperCase:!0}),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=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},o=$("<textarea>").css({position:"absolute",top:0,left:0,opacity:0});$(t).parent().append(o),t=r.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()});r=t.split(" ").filter(function(e){return""!==e}).join(" ");o.val(r),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}(o):navigator.userAgent.match(/ipad|ipod|iphone/i)?(o.select(),o[0].setSelectionRange(0,999999)):o.select();document.execCommand("copy"),o.remove()}},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.7",
+  "version": "2.105.0-develop.8",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "src/scss/**/*.{scss,css}": [
       "sass-lint-auto-fix",
       "prettier --write",
-      "sass-lint -c .sasslintrc --"
+      "sass-lint -c .sasslintrc"
     ]
   },
   "keywords": [
@@ -125,7 +125,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/0.5.0-icons",
+        "name": "develop",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/accordion.hbs

@@ -1,7 +1,7 @@
-<div class="accordion {{mod}} {{collapsed}}" {{#if facetStep}}data-facet-step="{{facetStep}}"{{/if}}>
+<div class="accordion {{mod}} {{collapsed}}">
   <h5 class="accordion__header">
     {{#unless hide-chevron}}
-      <span class="icon accordion__header-icon">
+    <span class="icon accordion__header-icon">
       <i class="fas fa-angle-up"></i>
     </span>
     {{/unless}}

package/src/components/kitchen/dropdown.hbs

@@ -1,16 +1,13 @@
 <div class="sort-dd" role="menu" aria-label="Sort options" hidden>
-  <button class="sort-opt" type="button" data-value="relevance"
-          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
+  <button class="sort-opt" type="button" data-value="relevance">
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Relevance</span>
   </button>
-  <button class="sort-opt" type="button" data-value="priceLow"
-          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
+  <button class="sort-opt" type="button" data-value="priceLow">
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Price (lowest first)</span>
   </button>
-  <button class="sort-opt" type="button" data-value="priceHigh"
-          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
+  <button class="sort-opt" type="button" data-value="priceHigh">
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Price (highest first)</span>
   </button>

package/src/components/kitchen/filter-modal.hbs

@@ -1,26 +1,29 @@
 {{#extend "modal" id="filterModal" classMod="filter-modal modal-scroll-observer" title="" showCloseBtn=true centered=true backdrop=true fullWidth=true}}
   {{#content "header"}}
     <h4 class="filter-modal__title">
-      {{ modalTitle }}
+      Filter kitchens
     </h4>
   {{/content}}
   {{#content "body"}}
     <div class="filter-modal__content">
-      {{#if isKitchenMode}}
-        {{> kitchen/filter-modal-content-kitchen }}
-      {{else}}
-        {{> search-filter-modal-content }}
-      {{/if}}
+    {{#with kitchen-plp}}
+      {{> kitchen/chips mod="mobile"}}
+      {{#each filters}}
+        {{#extend "accordion" header=name collapsed="accordion_collapsed" hidden="hidden-state"}}
+          {{#content "content"}}
+            {{> kitchen/filter-option }}
+          {{/content}}
+        {{/extend}}
+      {{/each}}
+    {{/with}}
     </div>
   {{/content}}
 
   {{#content "footer"}}
     <div class="modal-box__inner-row justify-content-center modal-box__footer-row">
       <div class="modal-box__inner-columns">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal"
-                {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}} >Clear all</button>
-        <button type="button" class="btn btn-primary" data-dismiss="modal"
-                {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>View results</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Clear all</button>
+        <button type="button" class="btn btn-primary" data-dismiss="modal">View results</button>
       </div>
     </div>
   {{/content}}

package/src/components/kitchen/plp-filters.hbs

@@ -3,15 +3,13 @@
     <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
       {{> kitchen/mobile-nav-item
               icon="fas fa-filter"
-              title="Filter by"
+              title="Filter"
               modalId="filterModal"
       }}
       {{> kitchen/mobile-nav-item
               icon="fas fa-sort-alt"
               title="Sort by"
-              info="Relevance"
               dropdown=true
-              isKitchenMode=true
       }}
     </div>
     <div class="container">

package/src/components/kitchen/sort-by.hbs

@@ -2,7 +2,7 @@
   <label class="sort__label">Sort by</label>
 
   <button class="sort-button" type="button" aria-haspopup="menu" aria-expanded="false">
-    <span class="js-sort-info">Relevance</span>
+    <span class="js-sort-info"></span>
     <i class="sort__chevron fa fa-chevron-down" aria-hidden="true"></i>
   </button>
 

package/src/components/my-account/barcode.hbs

@@ -1,7 +1,5 @@
 <div class="barcode">
-  <div class="barcode__discount">
-    <img src="{{discountSrc}}" />
-  </div>
+  <div class="barcode__discount barcode__discount--text">{{discountText}}</div>
   <div class="barcode__content">
     {{#if customIcon}}
       {{{customIcon}}}

package/src/components/my-account/cards-swap.hbs

@@ -0,0 +1,10 @@
+<div class="cards-swap">
+  <div class="cards-swap__card cards-swap__card1 active static">
+    <div class="cards-swap__toggle">2</div>
+    {{#block "card1"}}{{/block}}
+  </div>
+  <div class="cards-swap__card cards-swap__card2">
+    <div class="cards-swap__toggle">1</div>
+    {{#block "card2"}}{{/block}}
+  </div>
+</div>

package/src/components/my-account/clipboard-code-card.hbs

@@ -1,4 +1,4 @@
-<div class="clipboard-code {{mod}}">
+<div class="clipboard-code {{mod}} {{#if secondary}}clipboard-code--secondary{{/if}}">
   <span class="icon-wrap">
     {{#if customIcon}}
       {{{customIcon}}}
@@ -10,14 +10,14 @@
     <p class="title">{{title}}</p>
     <div class="clipboard-code__cta">
       <span class="subtitle">{{code}}</span>
-      <button class="btn btn--icon btn--{{mod}}">
+      <button class="btn btn--icon copy-code btn--{{mod}}">
         <i class="fas fa-copy icon-copy"></i>
       </button>
     </div>
   </div>
   {{#if description}}
     <div class="clipboard-code__description">
-      <p>{{description.text}} <a class="link" href="{{{description.link}}}">{{description.link}}</a></p>
+      <p>{{{description.text}}} <a class="link" href="{{{description.link}}}">{{description.link}}</a></p>
     </div>
   {{/if}}
 </div>

package/src/components/my-account/discount.hbs

@@ -1,4 +1,4 @@
-<div class="discount">
+<div class="discount {{mod}} {{#if secondary}}discount--secondary{{/if}}">
   <div class="discount__content">
     <span class="icon-wrap">
       <i class="icon fas fa-barcode-alt"></i>

package/src/components/my-account/greetings.hbs

@@ -1,4 +1,4 @@
-<div class="greetings">
+<div class="greetings {{mod}} {{#if secondary}}greetings--secondary{{/if}}">
   <div>
     <h2 class="title">Hi {{name}}!</h2>
     <p class="subtitle">{{subtitle}}</p>

package/src/components/search-filter.hbs

@@ -1,143 +1,134 @@
 <form class="filter-results filter-results_desktop">
   <div class="filter-results__heading">
-    <div class="flex">
-      <span class="heading-4">{{#unless filterTitle}}Filter by{{/unless}}{{filterTitle}}</span>
-      <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
-    </div>
-    {{#unless filterTitle}}
-      <div class="sort-products-list__total">
-        <span class="product-count">{{plp_load-more.pagination.totalNumberOfResults}}</span> <span>results</span>
-      </div>
-    {{/unless}}
+    <span class="heading-4">Filter results</span>
+    <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
   </div>
-  <div class="accordions">
-    {{#extend "accordion" header="Color Family" mod="filter" facetStep="5"}}
+  {{#extend "accordion" header="Color Family" mod="filter"}}
+    {{#content "content"}}
+      {{#each filters.colors}}
+        <div class="filter__item">
+          <label for="{{id}}" class="chb chb-color">
+            <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
+            <ins><i class="fas fa-check"></i></ins>
+            <span>{{label}}</span>
+          </label>
+        </div>
+      {{/each}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
+    {{#content "content"}}
+      {{>category-tree filters}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by pack quantity" mod="filter"}}
+    {{#content "content"}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by type" mod="filter"}}
+    {{#content "content"}}
+      {{#each filters.type-list}}
+        <div class="filter__item">
+          <label for="{{id}}" class="chb chb-{{classForGtm}}">
+            <input type="checkbox" value="{{value}}" id="{{id}}"
+                    name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+            <ins><i class="fas fa-check"></i></ins>
+            <span>{{label}}</span>
+            <span class="filter-quantity">({{quantity}})</span>
+          </label>
+        </div>
+      {{/each}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by type 2" mod="filter"}}
       {{#content "content"}}
-        {{#each filters.colors}}
-          <div class="filter__item">
-            <label for="{{id}}" class="chb chb-color">
-              <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
-              <ins><i class="fas fa-check"></i></ins>
-              <span>{{label}}</span>
-            </label>
-          </div>
-        {{/each}}
+          {{#each filters.type-list2}}
+              <div class="filter__item">
+                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
+                      <input type="checkbox" value="{{value}}" id="{{id}}"
+                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                      <ins><i class="fas fa-check"></i></ins>
+                      <span>{{label}}</span>
+                      <span class="filter-quantity">({{quantity}})</span>
+                  </label>
+              </div>
+          {{/each}}
       {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by type 3" mod="filter"}}
       {{#content "content"}}
-        {{>category-tree filters}}
+          {{#each filters.type-list3}}
+              <div class="filter__item">
+                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
+                      <input type="checkbox" value="{{value}}" id="{{id}}"
+                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                      <ins><i class="fas fa-check"></i></ins>
+                      <span>{{label}}</span>
+                      <span class="filter-quantity">({{quantity}})</span>
+                  </label>
+              </div>
+          {{/each}}
       {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by pack quantity" mod="filter" facetStep="5"}}
+  {{/extend}}
+  {{#extend "accordion" header="Customer Rating" mod="filter"}}
       {{#content "content"}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by type" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-        {{#each filters.type-list}}
-          <div class="filter__item">
-            <label for="{{id}}" class="chb chb-{{classForGtm}}">
-              <input type="checkbox" value="{{value}}" id="{{id}}"
-                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-              <ins><i class="fas fa-check"></i></ins>
-              <span>{{label}}</span>
-              <span class="filter-quantity">({{quantity}})</span>
-            </label>
-          </div>
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by type 2" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-        {{#each filters.type-list2}}
-          <div class="filter__item">
-            <label for="{{id}}" class="chb chb-{{classForGtm}}">
-              <input type="checkbox" value="{{value}}" id="{{id}}"
-                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-              <ins><i class="fas fa-check"></i></ins>
-              <span>{{label}}</span>
-              <span class="filter-quantity">({{quantity}})</span>
-            </label>
-          </div>
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by type 3" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-        {{#each filters.type-list3}}
-          <div class="filter__item">
-            <label for="{{id}}" class="chb chb-{{classForGtm}}">
-              <input type="checkbox" value="{{value}}" id="{{id}}"
-                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-              <ins><i class="fas fa-check"></i></ins>
-              <span>{{label}}</span>
-              <span class="filter-quantity">({{quantity}})</span>
-            </label>
-          </div>
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Customer Rating" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-        {{#each filters.rated}}
-          <div class="filter__item">
-            {{#ifvalue quantity value='0'}}
-            {{else}}
-              <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                <input type="checkbox" value="{{value}}" id="{{id}}"
-                       name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                <ins><i class="fas fa-check"></i></ins>
-                <div class="filter__reviews">
-                  <div class="product-rating">
-                    <div class="rating-bg">
-                      <i class="fa fa-star" aria-hidden="true"></i>
-                      <i class="fa fa-star" aria-hidden="true"></i>
-                      <i class="fa fa-star" aria-hidden="true"></i>
-                      <i class="fa fa-star" aria-hidden="true"></i>
-                      <i class="fa fa-star" aria-hidden="true"></i>
-                      <div class="rating-overlay" data-rating="{{#if rating}}{{rating}}{{else}}0{{/if}}">
+          {{#each filters.rated}}
+              <div class="filter__item">
+                {{#ifvalue quantity value='0'}}
+                {{else}}
+                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
+                      <input type="checkbox" value="{{value}}" id="{{id}}"
+                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                      <ins><i class="fas fa-check"></i></ins>
+                      <div class="filter__reviews">
+                        <div class="product-rating">
+                          <div class="rating-bg">
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <div class="rating-overlay" data-rating="{{#if rating}}{{rating}}{{else}}0{{/if}}">
                               <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                        <span class="star-overlay">
+                              <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                        <span class="star-overlay">
+                              <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                        <span class="star-overlay">
+                              <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                        <span class="star-overlay">
+                              <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
+                            </div>
+                          </div>
+                          ({{quantity}})
+                        </div>
                       </div>
-                    </div>
-                    ({{quantity}})
-                  </div>
-                </div>
-              </label>
-            {{/ifvalue}}
-          </div>
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by bulb shape" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by number of gangs" mod="filter" facetStep="5"}}
-      {{#content "content"}}
+                  </label>
+                {{/ifvalue}}
+              </div>
+          {{/each}}
       {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" header="Shop by wattage" mod="filter" facetStep="5"}}
-      {{#content "content"}}
-      {{/content}}
-    {{/extend}}
-  </div>
+  {{/extend}}
+  {{#extend "accordion" header="Shop by bulb shape" mod="filter"}}
+    {{#content "content"}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by number of gangs" mod="filter"}}
+    {{#content "content"}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by bulb fitting" mod="filter"}}
+    {{#content "content"}}
+    {{/content}}
+  {{/extend}}
+  {{#extend "accordion" header="Shop by wattage" mod="filter"}}
+    {{#content "content"}}
+    {{/content}}
+  {{/extend}}
 </form>

package/src/data/data_plp_load-more.json

@@ -381,7 +381,7 @@
       "currentPage": 0,
       "sort": null,
       "numberOfPages": 3,
-      "totalNumberOfResults": 1818,
+      "totalNumberOfResults": 65,
       "startPageItem": 1,
       "endPageItem": 0,
       "offset": 0,

package/src/data/my-account/data_my-account.json

@@ -388,6 +388,7 @@
         }
       ],
       "discount": "img/placeholders/discount-sm.png",
+      "discountText": "10% off",
       "discountCode": "TRADEPRO",
       "icons": {
         "tradeproID": "fas fa-user-hard-hat"
@@ -529,6 +530,13 @@
         }
       ]
     },
+    "tradepro2": {
+      "discount": "img/placeholders/discount-sm-15.jpg",
+      "discountText": "15% off",
+      "onlineDiscountText": {
+        "text": "We're giving our TradePro members <b>15% off everything</b> online and in-store, <b>on top of our existing offers</b>, as a thank you for being a TradePro member. Discount will be automatically applied at checkout when you shop online or via the TradePro app from 5PM Sunday 4th January until 11:59PM Tuesday 6th January. You can also use your barcode in-store from Monday 5th January to Tuesday 6th January."
+      }
+    },
     "tradeProRewards": {
       "breadcrumbsHomePage": [
         {
@@ -576,6 +584,7 @@
         }
       ],
       "discount": "img/placeholders/discount-sm-15.jpg",
+      "discountText": "10% off",
       "discountCode": "TRADEPROINSTALL",
       "icons": {
         "installer": "<svg class=\"icon custom-icon\" width=\"18\" height=\"19\" viewBox=\"0 0 18 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 0.75C6 0.334375 6.33437 0 6.75 0H7.25C7.66563 0 8 0.334375 8 0.75V2.5L8.8875 0.721875C10.075 1.35938 10.9062 2.58125 10.9937 4H11C11.4156 4 11.75 4.33437 11.75 4.75C11.75 5.16563 11.4156 5.5 11 5.5H3C2.58437 5.5 2.25 5.16563 2.25 4.75C2.25 4.33437 2.58437 4 3 4H3.00625C3.09375 2.58125 3.925 1.35938 5.1125 0.721875L6 2.5V0.75Z\" fill=\"#3E3E3E\"/>\n<path d=\"M10.9688 6.5C10.7219 8.47188 9.04062 10 7 10C4.95937 10 3.27813 8.47188 3.03125 6.5H10.9688Z\" fill=\"#3E3E3E\"/>\n<path d=\"M0 15.2C0 12.8813 1.88125 11 4.2 11H9.8C10.2255 11 10.6362 11.0633 11.0233 11.1811C10.927 11.8173 11.002 12.421 11.1001 12.7031L7.90625 16H0.8C0.359375 16 0 15.6406 0 15.2Z\" fill=\"#3E3E3E\"/>\n<path d=\"M14.875 15.25C16.6016 15.25 18 13.8516 18 12.125C18 11.8262 17.957 11.5371 17.8789 11.2617C17.8184 11.0508 17.5586 11.0039 17.4043 11.1582L15.9043 12.6582C15.8457 12.7168 15.7656 12.75 15.6836 12.75H14.5625C14.3906 12.75 14.25 12.6094 14.25 12.4375V11.3164C14.25 11.2344 14.2832 11.1543 14.3418 11.0957L15.8418 9.5957C15.9961 9.44141 15.9473 9.18164 15.7383 9.12109C15.4629 9.04297 15.1738 9 14.875 9C13.1484 9 11.75 10.3984 11.75 12.125C11.75 12.498 11.8164 12.8574 11.9355 13.1895L8.38867 16.7363C8.14062 16.9844 8 17.3223 8 17.6738C8 18.4062 8.59375 19 9.32617 19C9.67773 19 10.0156 18.8594 10.2637 18.6113L13.8105 15.0645C14.1426 15.1855 14.502 15.25 14.875 15.25ZM9.5625 16.9688C9.68682 16.9688 9.80605 17.0181 9.89396 17.106C9.98186 17.194 10.0312 17.3132 10.0312 17.4375C10.0312 17.5618 9.98186 17.681 9.89396 17.769C9.80605 17.8569 9.68682 17.9062 9.5625 17.9062C9.43818 17.9062 9.31895 17.8569 9.23104 17.769C9.14314 17.681 9.09375 17.5618 9.09375 17.4375C9.09375 17.3132 9.14314 17.194 9.23104 17.106C9.31895 17.0181 9.43818 16.9688 9.5625 16.9688Z\" fill=\"#3E3E3E\"/>\n</svg>\n"

package/src/js/components/cards-swap.js

@@ -0,0 +1,72 @@
+class CardsSwap {
+  static selectors = {
+    root: '.cards-swap',
+    card: '.cards-swap__card',
+    toggle: '.cards-swap__toggle',
+    activeCard: '.cards-swap__card.active',
+  };
+
+  static classes = {
+    static: 'static',
+    active: 'active',
+  };
+
+  constructor(element) {
+    this.element = element;
+    this.cards = this.element.querySelectorAll(CardsSwap.selectors.card);
+    this.toggles = this.element.querySelectorAll(CardsSwap.selectors.toggle);
+    this.init();
+  }
+
+  init() {
+    if (this.cards.length !== 2 || this.toggles.length !== 2) return;
+    this.cards.forEach((card) => {
+      card.classList.remove(CardsSwap.classes.static);
+    });
+    this.attachToggleListeners();
+    this.updateHeight();
+
+    window.addEventListener('resize', _.debounce(() => {
+      this.updateHeight();
+    }, 250));
+  }
+
+  attachToggleListeners() {
+    this.toggles.forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        this.toggleCards();
+      });
+    });
+  }
+
+  toggleCards() {
+    this.cards.forEach((card) => {
+      card.classList.toggle(CardsSwap.classes.active);
+    });
+    this.animateHeight();
+  }
+
+  updateHeight() {
+    const activeCard = this.element.querySelector(CardsSwap.selectors.activeCard);
+    if (activeCard) {
+      this.element.style.transition = 'none';
+      this.element.style.height = activeCard.offsetHeight + 'px';
+    }
+  }
+
+  animateHeight() {
+    const activeCard = this.element.querySelector(CardsSwap.selectors.activeCard);
+    if (activeCard) {
+      this.element.style.transition = 'height 0.5s linear';
+      this.element.style.height = activeCard.offsetHeight + 'px';
+    }
+  }
+}
+
+
+$(document).ready(function () {
+  const cardsSwapElements = document.querySelectorAll(CardsSwap.selectors.root);
+  cardsSwapElements.forEach(element => {
+    new CardsSwap(element);
+  });
+})