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

package/build/js/share-project-list.min.js

@@ -0,0 +1 @@
+!function t(r,i,c){function l(n,e){if(!i[n]){if(!r[n]){var o="function"==typeof require&&require;if(!e&&o)return o(n,!0);if(a)return a(n,!0);throw(e=new Error("Cannot find module '"+n+"'")).code="MODULE_NOT_FOUND",e}o=i[n]={exports:{}},r[n][0].call(o.exports,function(e){return l(r[n][1][e]||e)},o,o.exports,t,r,i,c)}return i[n].exports}for(var a="function"==typeof require&&require,e=0;e<c.length;e++)l(c[e]);return l}({1:[function(e,n,o){"use strict";var t,r,i,c,l=e("./utils/copy-to-clipboard");function a(){var e,n;t.length&&(e=t.get(0),t.removeAttr("disabled"),e.focus(),n=(e.value||"").length,"function"==typeof e.setSelectionRange?e.setSelectionRange(0,n):"function"==typeof e.select&&e.select())}t=$("#share-list-modal #shopping-list-link"),r=$("#copy-link"),i=r.find("a"),c="copy-link_hovered",i.on("click",function(e){e.preventDefault()}),r.on("click",function(e){e.preventDefault(),a();e=(t.val()||"").trim();e&&(0,l.copyToClipboard)(e,r[0],{noUpperCase:!0}).then(function(){i.addClass(c)}).catch(function(e){console.error(e)})}),t.on("click",function(e){e.preventDefault(),a(),i.removeClass(c)})},{"./utils/copy-to-clipboard":2}],2:[function(e,n,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.copyToClipboard=function(e,n){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},e=function(e,n){e=null==e?"":e+"";return(n.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()})).split(" ").filter(function(e){return""!==e}).join(" ").trim()}(e,o);if(!e)return Promise.reject(new Error("Empty text"));if(null!=(o=window.webkit)&&null!=(o=o.messageHandlers)&&o.copy)try{return window.webkit.messageHandlers.copy.postMessage(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=window.Android)&&o.copyToClipboard&&"function"==typeof window.Android.copyToClipboard)try{return window.Android.copyToClipboard(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=navigator.clipboard)&&o.writeText)return navigator.clipboard.writeText(e).then(function(){return!0});return function(a,u){return new Promise(function(e,n){try{var o,t=$(u).parent(),r=$("<textarea>").val(a).attr("readonly","readonly").css({position:"fixed",top:0,left:"-9999px",opacity:0,width:"1px",height:"1px",padding:0,border:0,margin:0}),i=(t.append(r),r.get(0)),c=(i.focus(),(i.value||"").length),l=("function"==typeof i.setSelectionRange?i.setSelectionRange(0,c):r.select(),document.execCommand("copy"));r.remove(),window.getSelection&&(o=window.getSelection())&&o.removeAllRanges&&o.removeAllRanges(),l?e(!0):n(new Error("execCommand failed"))}catch(e){n(e)}})}(e,n)}},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.7",
+  "version": "2.105.0-develop.9",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -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/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/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,74 @@
+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);
+    });
+});

package/src/js/components/share-project-list.js

@@ -0,0 +1,56 @@
+// this file should be delete after <script defer="defer" src="./js/share-project-list.min.js"></script>
+// implementation on backend (IC-1182 comment https://wickesit.atlassian.net/browse/IC-1182?focusedCommentId=312018)
+
+var Wick = Wick || {};
+
+Wick.ShareProjectList = (function () {
+    function init() {
+        var shoppingListLinkInput = $('#share-list-modal #shopping-list-link'),
+            shoppingListLinkEl = shoppingListLinkInput[0],
+            linkContainer = $('#copy-link'),
+            actualLink = linkContainer.find('a'),
+            copyClass = 'copy-link_hovered';
+
+        actualLink.click(function (e) {
+            e.preventDefault();
+        });
+
+        linkContainer.click(function () {
+            if (navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)) {
+                iosCopyToClipboard(shoppingListLinkInput);
+            } else if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
+                shoppingListLinkEl.select();
+                shoppingListLinkEl.setSelectionRange(0, 999999);
+            } else {
+                shoppingListLinkEl.select();
+            }
+
+            document.execCommand('copy');
+            actualLink.addClass(copyClass);
+        });
+
+        shoppingListLinkInput.click(function () {
+            linkContainer.click();
+            actualLink.removeClass(copyClass);
+        });
+    }
+
+    function iosCopyToClipboard($input) {
+        var el = $input.get(0);
+        var editable = el.contentEditable;
+        var readOnly = el.readOnly;
+
+        el.contentEditable = true;
+        el.readOnly = false;
+        var range = document.createRange();
+        range.selectNodeContents(el);
+        var sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+        el.setSelectionRange(0, 999999);
+        el.contentEditable = editable;
+        el.readOnly = readOnly;
+    }
+
+    init();
+})();

package/src/js/page/my-account.js

@@ -1,58 +1,43 @@
-import {copyToClipboard} from "./utils/copy-to-clipboard";
-import {isApp} from "./utils/helpers";
+import { copyToClipboard } from './utils/copy-to-clipboard';
+import { isApp } from './utils/helpers';
 
 var Wick = window.Wick || {};
 
 Wick.MyAccount = {
-  el: {
-    $clipboardCode: $('.clipboard-code'),
-    appInfo: '.app-info',
-    hideAppInfo: 'app-info--hide'
-  },
-  clipboardCodes: {
-    tradeProId: {
-      titleEl: '.clipboard-code.trade-pro-id .title',
-      subtitleEl: '.clipboard-code.trade-pro-id .subtitle',
-      btnCopy: '.btn--trade-pro-id',
+    el: {
+        $clipboardCode: $('.clipboard-code'),
+        appInfo: '.app-info',
+        hideAppInfo: 'app-info--hide',
     },
-    discountCode: {
-      titleEl: '.clipboard-code.discount-code .title',
-      subtitleEl: '.clipboard-code.discount-code .subtitle',
-      btnCopy: '.btn--discount-code',
-    },
-  },
-  copyCode(codeType) {
-    const { titleEl, subtitleEl, btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
-    const value = $(subtitleEl).text().trim();
-    const title = $(titleEl).text().trim();
+    copyCode($btn) {
+        const $container = $btn.closest('.clipboard-code');
+        const value = $container.find('.subtitle').text().trim();
+        const title = $container.find('.title').text().trim();
 
-    copyToClipboard(value, btnCopy);
-    Wick.SnackBar.show(
-      {
-        text: `${title} copied to clipboard`,
-        type: Wick.SnackBar.types.SUCCESS,
-        withCloseButton: false,
-        autoClose: true,
-        delayBeforeClose: 1500
-      }
-    );
-  },
-  init() {
-    Object.keys(Wick.MyAccount.clipboardCodes).forEach((codeType) => {
-      const { btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
-      $(btnCopy).on('click', () => Wick.MyAccount.copyCode(codeType));
-    });
+        copyToClipboard(value, $btn);
+        Wick.SnackBar.show({
+            text: `${title} copied to clipboard`,
+            type: Wick.SnackBar.types.SUCCESS,
+            withCloseButton: false,
+            autoClose: true,
+            delayBeforeClose: 1500,
+        });
+    },
+    init() {
+        Wick.MyAccount.el.$clipboardCode.find('.copy-code').on('click', function () {
+            Wick.MyAccount.copyCode($(this));
+        });
 
-    if($(Wick.MyAccount.el.appInfo).length && isApp()) {
-      $(Wick.MyAccount.el.appInfo).addClass(Wick.MyAccount.el.hideAppInfo);
-    }
-  }
-}
+        if ($(Wick.MyAccount.el.appInfo).length && isApp()) {
+            $(Wick.MyAccount.el.appInfo).addClass(Wick.MyAccount.el.hideAppInfo);
+        }
+    },
+};
 
 $(document).ready(function () {
-  if (!Wick.MyAccount.el.$clipboardCode.length) {
-    return;
-  }
+    if (!Wick.MyAccount.el.$clipboardCode.length) {
+        return;
+    }
 
-  Wick.MyAccount.init();
+    Wick.MyAccount.init();
 });

package/src/page_my-account-installer.html

@@ -33,7 +33,7 @@
               subtitle=my_account.user.email
           }}
           {{> my-account/discount
-              discountSrc=my_account.installer.discount
+              discountText=my_account.installer.discountText
               installer=true
               title="In-store discount"
               code=my_account.discount

package/src/page_my-account-trade-pro-carousel-double.html

@@ -0,0 +1,127 @@
+{{#extend
+  "my-account-v2"
+  iconUserClass=my_account.tradepro.icons.tradeproID
+  dataBreadcrumbs=my_account.tradepro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Trade Pro Carousel Double"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  tradepro-nav=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav my-account-menu-new
+          menu=my_account.tradepro.menu
+          active-index=0
+          page-name=my_account.tradepro.menu.[0].title
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-summary">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="account-summary__wrapper d-none d-sm-grid mb-3">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+        </div>
+        {{#extend "my-account/cards-swap"}}
+          {{#content "card1"}}
+            <div class="account-summary__wrapper account-summary__wrapper--secondary account-summary__wrapper--double">
+              {{> my-account/greetings
+                  secondary=true
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  secondary=true
+                  discountText=my_account.tradepro2.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+            </div>
+          {{/content}}
+          {{#content "card2"}}
+            <div class="account-summary__wrapper">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  discountText=my_account.tradepro.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.tradepro.discountCode
+              }}
+            </div>
+          {{/content}}
+        {{/extend}}
+        {{> my-account/active-orders/list-orders
+          switch-vat=true
+          title=my_account.tradepro.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.tradepro.activeOrders.orderList
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.tradepro.menu
+          }}
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/saving-totaliser this-last-year=true}}
+    </div>
+  </div>
+</div>
+<div class="account-actions">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> my-account/user-account-actions mod="d-sm-none"}}
+        {{> my-account/contact-us contacts=my_account.contacts}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_my-account-trade-pro-carousel.html

@@ -0,0 +1,134 @@
+{{#extend
+  "my-account-v2"
+  iconUserClass=my_account.tradepro.icons.tradeproID
+  dataBreadcrumbs=my_account.tradepro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Trade Pro Carousel"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  tradepro-nav=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav my-account-menu-new
+          menu=my_account.tradepro.menu
+          active-index=0
+          page-name=my_account.tradepro.menu.[0].title
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-summary">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="account-summary__wrapper d-none d-sm-grid mb-3">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+        </div>
+        {{#extend "my-account/cards-swap"}}
+          {{#content "card1"}}
+            <div class="account-summary__wrapper account-summary__wrapper--secondary">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  secondary=true
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  secondary=true
+                  discountText=my_account.tradepro2.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.tradepro.discountCode
+              }}
+            </div>
+          {{/content}}
+          {{#content "card2"}}
+            <div class="account-summary__wrapper">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  discountText=my_account.tradepro.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.tradepro.discountCode
+              }}
+            </div>
+          {{/content}}
+        {{/extend}}
+        {{> my-account/active-orders/list-orders
+          switch-vat=true
+          title=my_account.tradepro.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.tradepro.activeOrders.orderList
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.tradepro.menu
+          }}
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/saving-totaliser this-last-year=true}}
+    </div>
+  </div>
+</div>
+<div class="account-actions">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> my-account/user-account-actions mod="d-sm-none"}}
+        {{> my-account/contact-us contacts=my_account.contacts}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_my-account-trade-pro.html

@@ -33,7 +33,7 @@
               subtitle=my_account.user.email
           }}
           {{> my-account/discount
-              discountSrc=my_account.tradepro.discount
+              discountText=my_account.tradepro.discountText
               title="In-store discount"
               code=my_account.discount
           }}

package/src/page_tradepro-discount-app.html

@@ -32,7 +32,7 @@ mainClass="discount-offer"
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-        discountSrc=my_account.tradepro.discount
+        discountText=my_account.tradepro.discountText
         title="In-store discount"
         code=my_account.discount
         }}