wickes-css2 2.93.0 → 2.94.0-develop.1

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

@@ -0,0 +1,91 @@
+{{#extend
+  "my-account-v2"
+  iconUserClass=my_account.tradepro.icons.tradeproID
+  dataBreadcrumbs=my_account.tradepro.breadcrumbs
+  pageClass="page_my-account_new"
+  title=my_account.tradepro.title
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "heading"}}
+{{> notifications
+    notification-page.info-message
+    text=my_account.tradepro.bannerText
+    }}
+{{/content}}
+{{#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">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+          {{> my-account/discount
+              discountSrc=my_account.tradepro.discount
+              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>
+        {{> 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="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.html

@@ -1,60 +1,57 @@
-{{#extend "my-account" pageClass="page_my-account_your-account" title="My account" pageMyAcc=true}}
-  {{#content "heading"}}
-    {{> account-heading title="My account"}}
-  {{/content}}
-  {{#content "aside"}}
-    {{> aside-nav2 my-account-menu page-name="My account"}}
-  {{/content}}
-  {{#content "main"}}
-    <div class="my-account">
-        <div class="my-account-data">
-            <div class="my-account-data__heading">
-                <div class="my-account-data__icon">
-                    <span class="fas fa-user-alt"></span>
-                </div>
-                <h4>Profile</h4>
-            </div>
-            <ul class="my-account-data__list">
-                <li class="my-account-data__list-item"><a href="./page_my-account_personal-details.html" class="link-secondary">Update personal details</a></li>
-                <li class="my-account-data__list-item"><a href="./page_my-account_change-password.html" class="link-secondary">Change your password</a></li>
-            </ul>
-        </div>
-        <div class="my-account-data">
-            <div class="my-account-data__heading">
-                <div class="my-account-data__icon">
-                    <span class="fas fa-calendar-edit"></span>
-                </div>
-                <h4>Order history</h4>
-            </div>
-            <ul class="my-account-data__list">
-                <li class="my-account-data__list-item"><a href="./page_my-account_order-history.html" class="link-secondary">View order history</a></li>
-                <li class="my-account-data__list-item"><a href="./page_shopping-cart.html" class="link-secondary">View your basket</a></li>
-            </ul>
-        </div>
-        <div class="my-account-data">
-            <div class="my-account-data__heading">
-                <div class="my-account-data__icon">
-                    <span class="fas fa-credit-card-front"></span>
-                </div>
-                <h4>Payment details</h4>
-            </div>
-            <ul class="my-account-data__list">
-                <li class="my-account-data__list-item"><a href="./page_my-account_payment-details.html" class="link-secondary">Manage your payment details</a></li>
-                <li class="my-account-data__list-item"><a href="./page_my-account_payment-details.html" class="link-secondary">Set default payment details</a></li>
-            </ul>
-        </div>
-        <div class="my-account-data">
-            <div class="my-account-data__heading">
-                <div class="my-account-data__icon">
-                    <span class="fas fa-book"></span>
-                </div>
-                <h4>Address book</h4>
-            </div>
-            <ul class="my-account-data__list">
-                <li class="my-account-data__list-item"><a href="./page_my-account_address-book.html" class="link-secondary">Manage your delivery address</a></li>
-                <li class="my-account-data__list-item"><a href="./page_my-account_address-book.html" class="link-secondary">Set default delivery address</a></li>
-            </ul>
-        </div>
+{{#extend "my-account-v2" dataBreadcrumbs=my_account.diy.breadcrumbs pageClass="page_my-account_new" title="My Account DIY" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="my-account"}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.diy.menu
+          active-index=0
+          page-name=my_account.diy.menu.[0].title
+      }}
     </div>
-  {{/content}}
-{{/extend}}
+  </div>
+</div>
+
+<div class="account-summary">
+  <div class="container">
+   <div class="row">
+    <div class="col-12">
+     <div class="account-summary__wrapper">
+      {{> my-account/greetings
+          name=my_account.user.name
+          subtitle=my_account.user.email
+      }}
+     </div>
+      {{> my-account/active-orders/list-orders
+          title=my_account.diy.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.diy.activeOrders.orderList
+      }}
+    </div>
+   </div>
+  </div>
+ </div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.diy.menu
+      }}
+    </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_address-book.html

@@ -3,7 +3,13 @@
     {{> account-heading title="Address book" subtitle="Manage your address book" btnLink="page_my-account_address-details.html" btnTitle="Add new address"}}
   {{/content}}
   {{#content "aside"}}
-    {{> aside-nav2 my-account-menu active-index="4" page-name="Address book"}}
+    {{> aside-nav2 my-account-menu active-index="4" page-name="Address book" mod="d-none d-lg-block"}}
+    {{> my-account/mobile-nav
+        mod="account-nav--old-pages"
+        menu=my_account.diy.menu
+        active-index=3
+        page-name="Address Book"
+        }}
   {{/content}}
   {{#content "main"}}
 
@@ -18,4 +24,4 @@
     </div>
 
   {{/content}}
-{{/extend}}
+{{/extend}}

package/src/page_my-account_order-history.html

@@ -1,12 +1,17 @@
-{{#extend "my-account" pageClass="" title="Order history"  pageMyAcc=true}}
+{{#extend "my-account" pageClass="" title="Order history" pageMyAcc=true}}
   {{#content "heading"}}
     {{> account-heading title="Order History"}}
   {{/content}}
   {{#content "aside"}}
-    {{> aside-nav2 my-account-menu active-index="6" page-name="Order History"}}
+    {{> aside-nav2 my-account-menu active-index="6" page-name="Order History" mod="d-none d-lg-block"}}
+    {{> my-account/mobile-nav
+        mod="account-nav--old-pages"
+        menu=my_account.diy.menu
+        active-index=1
+        page-name="My Orders"
+        }}
   {{/content}}
   {{#content "main"}}
-
     {{> form-row row-mod="sort-order-by" dropdown="true" label="Sort orders by" id="d1" placeholder="Date"}}
     {{#each page_my-account_order-history.orders }}
       {{> table_order-history }}

package/src/page_my-account_personal-details.html

@@ -4,7 +4,13 @@
     {{> account-heading title="Update Personal Details"}}
   {{/content}}
     {{#content "aside"}}
-        {{> aside-nav2 my-account-menu active-index="0" page-name="Update Personal Details"}}
+        {{> aside-nav2 my-account-menu active-index="0" page-name="Update Personal Details" mod="d-none d-lg-block"}}
+        {{> my-account/mobile-nav
+            mod="account-nav--old-pages"
+            menu=my_account.diy.menu
+            active-index=2
+            page-name="Personal Details"
+            }}
     {{/content}}
   {{#content "main"}}
     <form action="#" class="form-bg form-personal-details">

package/src/page_personal-details-installer.html

@@ -0,0 +1,52 @@
+{{#extend "my-account-v2" dataBreadcrumbs=personal_details.installer.breadcrumbs pageClass="page_my-account_new" title="My Account DIY" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="personal-details"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
+{{/content}}
+{{#content "notification"}}
+<div class="globalMessages container">
+  <div class="row">
+    <div class="col-12">
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      mod
+      menu=my_account.diy.menu
+      active-index=2
+      page-name="Personal Details"
+      }}
+      <div class="personal-details__header">
+        <h1 class="personal-details__title">Personal Details</h1>
+        <a href="./page_my-account_change-password.html" class="btn btn_full btn-outline-primary btn__change-password">
+          <i class="fas fa-key icon"></i>
+          Change Password
+        </a>
+      </div>
+    </div>
+    <div class="col-12">
+      {{> my-account/personal-details
+          details=personal_details.installer.currentData
+      }}
+      {{> my-account/personal-details-form
+          fields=personal_details.installer.fields
+          buttons=personal_details.buttons
+      }}
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+{{> my-account/leave-modal
+personal_details.leave-popup
+id="leave-popup"
+}}
+<script defer src="./js/my-account.min.js"></script>
+<script defer src="./js/personal-details.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_personal-details.html

@@ -0,0 +1,52 @@
+{{#extend "my-account-v2" dataBreadcrumbs=personal_details.diy.breadcrumbs pageClass="page_my-account_new" title="My Account DIY" pageMyAcc=true myAccV2=true isLoggedIn=true mainClass="personal-details"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
+{{/content}}
+{{#content "notification"}}
+<div class="globalMessages container">
+  <div class="row">
+    <div class="col-12">
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          mod
+          menu=my_account.diy.menu
+          active-index=2
+          page-name="Personal Details"
+          }}
+      <div class="personal-details__header">
+        <h1 class="personal-details__title">Personal Details</h1>
+        <a href="./page_my-account_change-password.html" class="btn btn_full btn-outline-primary btn__change-password">
+          <i class="fas fa-key icon"></i>
+          Change Password
+        </a>
+      </div>
+    </div>
+    <div class="col-12">
+      {{> my-account/personal-details
+          details=personal_details.diy.currentData
+      }}
+      {{> my-account/personal-details-form
+          fields=personal_details.diy.fields
+          buttons=personal_details.buttons
+      }}
+    </div>
+  </div>
+</div>
+
+{{/content}}
+{{#content "foot" mode="append"}}
+{{> my-account/leave-modal
+    personal_details.leave-popup
+    id="leave-popup"
+}}
+<script defer src="./js/my-account.min.js"></script>
+<script defer src="./js/personal-details.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_discount.html

@@ -6,7 +6,13 @@
 {{> account-heading title="TradePro Discount"}}
 {{/content}}
 {{#content "aside"}}
-{{> aside-nav2 my-account-tradePro-menu-new active-index="6" page-name="TradePro Discount" tradePro="true"}}
+  {{> aside-nav2 my-account-tradePro-menu-new active-index="6" page-name="TradePro Discount" tradePro="true" mod="d-none d-lg-block"}}
+  {{> my-account/mobile-nav
+      mod="account-nav--old-pages"
+      menu=my_account.tradepro.menu
+      active-index=3
+      page-name="TradePro Discount"
+      }}
 {{/content}}
 {{#content "main"}}
 <div class="page-header">
@@ -72,4 +78,4 @@
 {{> already-installed-app }}
 {{/content}}
 {{/extend}}
-{{> barcode-modal}}
+{{> barcode-modal}}

package/src/page_tradePro_rewards.html

@@ -6,7 +6,13 @@
 {{> account-heading title="TradePro Rewards"}}
 {{/content}}
 {{#content "aside"}}
-{{> aside-nav2 my-account-tradePro-menu-new active-index="7" page-name="TradePro Rewards" tradePro="true"}}
+  {{> aside-nav2 my-account-tradePro-menu-new active-index="7" page-name="TradePro Rewards" tradePro="true" mod="d-none d-lg-block"}}
+  {{> my-account/mobile-nav
+      mod="account-nav--old-pages"
+      menu=my_account.tradepro.menu
+      active-index=4
+      page-name="TradePro Rewards"
+      }}
 {{/content}}
 {{#content "main"}}
   {{#each page_tradePro_vouchers.voucher_content}}

package/src/partials/breadcrumbs.hbs

@@ -1,12 +1,31 @@
 <div class="breadcrumbs">
   <ul class="breadcrumbs__container">
-    {{#each breadcrumbs}}
-      <li class="breadcrumbs__item">
-        <a href="{{url}}" class="breadcrumbs__link">{{text}}</a>
-        <span class="breadcrumbs__icon icon">
-          <i class="far fa-angle-right"></i>
-        </span>
-      </li>
-    {{/each}}
+    {{#if dataBreadcrumbs}}
+      {{#each dataBreadcrumbs}}
+        <li class="breadcrumbs__item">
+          {{#if @last}}
+            <span class="breadcrumbs__text">{{text}}</span>
+          {{else}}
+            <a href="{{url}}" class="breadcrumbs__link">{{text}}</a>
+          {{/if}}
+          <span class="breadcrumbs__icon icon">
+            <i class="far fa-angle-right"></i>
+          </span>
+        </li>
+      {{/each}}
+    {{else}}
+      {{#each breadcrumbs}}
+        <li class="breadcrumbs__item">
+          {{#if @last}}
+            <span class="breadcrumbs__text">{{text}}</span>
+          {{else}}
+            <a href="{{url}}" class="breadcrumbs__link">{{text}}</a>
+          {{/if}}
+          <span class="breadcrumbs__icon icon">
+            <i class="far fa-angle-right"></i>
+          </span>
+        </li>
+      {{/each}}
+    {{/if}}
   </ul>
 </div>

package/src/partials/head.hbs

@@ -20,7 +20,11 @@
     <script async src="https://js-sandbox.squarecdn.com/square-marketplace.js"></script>
     <noscript><link rel="stylesheet" href="./css/pdp-main-non-critical.css"></noscript>
 {{else if pageMyAcc}}
-    <link type="text/css" rel="stylesheet" href="./css/my-account-main.css">
+    {{# if myAccV2 }}
+      <link type="text/css" rel="stylesheet" href="./css/my-account-main-v2.css">
+    {{else}}
+      <link type="text/css" rel="stylesheet" href="./css/my-account-main.css">
+    {{/if}}
 {{else if shoppingListPDF}}
   <link type="text/css" rel="stylesheet" href="./css/shopping-list-pdf.css">
 {{else}}

package/src/partials/header.hbs

@@ -10,52 +10,55 @@
 
       <ul class="header-top-line">
         <li class="header-top-line__item header-top-line_shop-list">
-          <a href="./page_login.html" class="header-top-line__link" data-logged-in="false">
-            <span class="btn__text">
-                <i class="fas fa-user fa-lg"></i>
-            </span>
-            <span class="header-top-line__link-title">Sign-in / Register</span>
-          </a>
-          <div class="user user_desktop" data-logged-in="true">
-            <a href="./page_my-account.html" class="header-top-line__link user__name truncate">
-              <span class="btn__text">
-                  <i class="fas fa-user fa-lg"></i>
-              </span>
-              <span class="header-top-line__link-title">Hi, Christopher</span>
-            </a>
-            {{#if tradepro-nav}}
-              <div class="user__popover">
-                <div class="user__popover-content user__popover-content_extended">
-                  <a href="#" class="user__action">My TradePro Account</a>
-                  <a href="#" class="user__action">Address Book</a>
-                  <a href="#" class="user__action">Payment Details</a>
-                  <a href="#" class="user__action">Order History</a>
-                  <a href="#" class="user__action">TradePro Discount Code</a>
-                  <a href="#" class="user__action">TradePro Rewards<span class="rewards-counter">3</span></a>
-                  <div class="user__logout">
-                    <a href="" class="user__action link-logout">
-                      Log out<span class="icon icon-logout"><i class="fas fa-sign-out"></i></span>
-                    </a>
+          {{#if isLoggedIn}}
+            <div class="user user_desktop" data-logged-in="true">
+              <a href="./page_my-account.html" class="header-top-line__link user__name truncate">
+                {{#ifCond iconUserClass '||' customIconUserClass}}
+                  {{#if customIconUserClass}}
+                    {{{customIconUserClass}}}
+                  {{else}}
+                    <i class="{{iconUserClass}} icon-user"></i>
+                  {{/if}}
+                {{else}}
+                  <span class="btn__text">
+                    <i class="fas fa-user fa-lg"></i>
+                  </span>
+                {{/ifCond}}
+                <span class="header-top-line__link-title">Hi Christopher</span>
+              </a>
+              {{#if tradepro-nav}}
+                <div class="user__popover">
+                  <div class="user__popover-content user__popover-content_extended">
+                    <a href="#" class="user__action">My TradePro Account</a>
+                    <a href="#" class="user__action">Address Book</a>
+                    <a href="#" class="user__action">Payment Details</a>
+                    <a href="#" class="user__action">Order History</a>
+                    <a href="#" class="user__action">TradePro Discount Code</a>
+                    <a href="#" class="user__action">TradePro Rewards<span class="rewards-counter">3</span></a>
+                    <div class="user__logout">
+                      <a href="" class="user__action link-logout">
+                        Log out<span class="icon icon-logout"><i class="fas fa-sign-out"></i></span>
+                      </a>
+                    </div>
                   </div>
                 </div>
-              </div>
-            {{else if installer-nav}}
-              <div class="user__popover">
-                <div class="user__popover-content user__popover-content_extended">
-                  <a href="#" class="user__action">My Installer Account</a>
-                  <a href="#" class="user__action">Address Book</a>
-                  <a href="#" class="user__action">Payment Details</a>
-                  <a href="#" class="user__action">Order History</a>
-                  <a href="#" class="user__action">Installer Discount Code</a>
-                  <div class="user__logout">
-                    <a href="" class="user__action link-logout">
-                      Log out<span class="icon icon-logout"><i class="fas fa-sign-out"></i></span>
-                    </a>
+              {{else if installer-nav}}
+                <div class="user__popover">
+                  <div class="user__popover-content user__popover-content_extended">
+                    <a href="#" class="user__action">My Installer Account</a>
+                    <a href="#" class="user__action">Address Book</a>
+                    <a href="#" class="user__action">Payment Details</a>
+                    <a href="#" class="user__action">Order History</a>
+                    <a href="#" class="user__action">Installer Discount Code</a>
+                    <div class="user__logout">
+                      <a href="" class="user__action link-logout">
+                        Log out<span class="icon icon-logout"><i class="fas fa-sign-out"></i></span>
+                      </a>
+                    </div>
                   </div>
                 </div>
-              </div>
-            {{else}}
-              <div class="user__popover">
+              {{else}}
+                <div class="user__popover">
                   <div class="user__popover-content">
                     <a href="./page_my-account.html" class="user__action">Your account</a>
                     <a href="./page_my-account_order-history.html" class="user__action">Your orders</a>
@@ -65,9 +68,17 @@
                       </a>
                     </div>
                   </div>
-              </div>
-            {{/if}}
-          </div>
+                </div>
+              {{/if}}
+            </div>
+          {{else}}
+            <a href="./page_login.html" class="header-top-line__link" data-logged-in="false">
+              <span class="btn__text">
+                  <i class="fas fa-user fa-lg"></i>
+              </span>
+              <span class="header-top-line__link-title">Sign-in / Register</span>
+            </a>
+          {{/if}}
         </li>
         <li class="header-top-line__item header-top-line_shop-list">
           <a href="./page_track_your_order.html" class="header-top-line__link">
@@ -171,9 +182,17 @@
         </div>
         <a href="./page_login.html">
           <div class="btn btn-primary header-shop-list">
-            <span class="icon">
-              <span class="fas fa-user fa-lg"></span>
-            </span>
+            {{#ifCond iconUserClass '||' customIconUserClass}}
+              {{#if customIconUserClass}}
+                {{{customIconUserClass}}}
+              {{else}}
+                <i class="{{iconUserClass}} icon-user"></i>
+              {{/if}}
+            {{else}}
+              <span class="icon">
+                <i class="fas fa-user fa-lg"></i>
+              </span>
+            {{/ifCond}}
           </div>
         </a>
         <a href="./page_store-locator.html">
@@ -202,5 +221,5 @@
 <!-- /.header-wrapper -->
 {{> main-nav }}
 {{#unless hideBreadcrumbs }}
-  {{> breadcrumbs }}
+  {{> breadcrumbs}}
 {{/unless}}