wickes-css2 2.98.0-billie.4 → 2.98.0-develop.1

package/src/page_tradepro-discount-app.html

@@ -0,0 +1,82 @@
+{{#extend
+"my-account-v2"
+dataBreadcrumbs=discount.tradePro.breadcrumbs
+pageClass="page_my-account_new"
+title="My Account DIY"
+pageMyAcc=true
+myAccV2=true
+isLoggedIn=true
+mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      menu=discount.menu
+      active-index=7
+      page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> 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
+        description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+        mod="discount-code"
+        icon="fas fa-badge-percent"
+        title="Online discount code"
+        code=my_account.tradepro.discountCode
+        description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info app-info--hide">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount.html

@@ -0,0 +1,82 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=discount.tradePro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account DIY"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+  <link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=discount.menu
+          active-index=7
+          page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> 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
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/partials/header.hbs

@@ -26,50 +26,49 @@
                 {{/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>
-              {{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>
-              {{else}}
-                <div class="user__popover">
+              <div class="user__popover">
+                <div class="user__popover-wrap">
                   <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>
-                    <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>
+                    {{#if tradepro-nav}}
+                      {{#each header_menu.tradepro}}
+                        {{#if (eq type "userActions")}}
+                          {{> header-menu/user-actions items=items}}
+                        {{/if}}
+                        {{#if (eq type "popoverActions")}}
+                          {{> header-menu/popover-actions items=items}}
+                        {{/if}}
+                        {{#if (eq type "logoutAction")}}
+                          {{> header-menu/logout-action items=items}}
+                        {{/if}}
+                      {{/each}}
+                    {{else if installer-nav}}
+                      {{#each header_menu.installer}}
+                        {{#if (eq type "userActions")}}
+                          {{> header-menu/user-actions items=items}}
+                        {{/if}}
+                        {{#if (eq type "popoverActions")}}
+                          {{> header-menu/popover-actions items=items}}
+                        {{/if}}
+                        {{#if (eq type "logoutAction")}}
+                          {{> header-menu/logout-action items=items}}
+                        {{/if}}
+                      {{/each}}
+                    {{else}}
+                      {{#each header_menu.diy}}
+                        {{#if (eq type "userActions")}}
+                          {{> header-menu/user-actions items=items}}
+                        {{/if}}
+                        {{#if (eq type "popoverActions")}}
+                          {{> header-menu/popover-actions items=items}}
+                        {{/if}}
+                        {{#if (eq type "logoutAction")}}
+                          {{> header-menu/logout-action items=items}}
+                        {{/if}}
+                      {{/each}}
+                    {{/if}}
                   </div>
                 </div>
-              {{/if}}
+              </div>
             </div>
           {{else}}
             <a href="./page_login.html" class="header-top-line__link" data-logged-in="false">

package/src/partials/main-nav.hbs

@@ -1,111 +1,38 @@
 <a id="skip-to-navigation"></a>
-<nav class="main-nav" id="main-nav" data-ssr="{{#unless oldNav}}true{{/unless}}">
-  {{#if oldNav}}
-    {{> skeleton-nav}}
-  {{else}}
-    {{> navigation/nav-wrapper }}
-  {{/if }}
-  {{#unless tradepro-nav}}
-    <div class="main-nav__button" data-logged-in="false">
-      <a href="/login.html" class="nav-button">
-        <span class="nav-button__icon">
-            <i class="fas fa-user"></i>
-        </span>
-        <span class="nav-button__text">Log In / Register</span>
-      </a>
-    </div>
+<nav class="main-nav" id="main-nav">
+  {{>skeleton-nav}}
 
+  {{#if isLoggedIn}}
     <div class="nav-button-wrap" data-logged-in="true">
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon">
-            {{#ifCond iconUserClass '||' customIconUserClass}}
-              {{#if customIconUserClass}}
-                {{{customIconUserClass}}}
-              {{else}}
-                <i class="{{iconUserClass}} icon"></i>
-              {{/if}}
-            {{else}}
-              <i class="fas fa-user"></i>
-            {{/ifCond}}
-          </span>
-          <span class="nav-button__text">Hi Christopher</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">My Account</span>
-          <span class="rewards-counter">0</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Address Book</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account_order-history.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Order History</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Log Out</span>
-        </a>
-      </div>
-    </div>
-  {{/unless}}
+      {{#if tradepro-nav}}
+        {{#each header_menu.tradepro}}
+          {{#if (eq type "userActions")}}
+            {{> header-menu/user-actions-mob items=items}}
+          {{/if}}
+          {{#if (eq type "popoverActions")}}
+            {{> header-menu/popover-actions-mob items=items}}
+          {{/if}}
+        {{/each}}
+      {{else if installer-nav}}
+        {{#each header_menu.installer}}
+          {{#if (eq type "userActions")}}
+            {{> header-menu/user-actions-mob items=items}}
+          {{/if}}
+          {{#if (eq type "popoverActions")}}
+            {{> header-menu/popover-actions-mob items=items}}
+          {{/if}}
+        {{/each}}
+      {{else}}
+        {{#each header_menu.diy}}
+          {{#if (eq type "userActions")}}
+            {{> header-menu/user-actions-mob items=items}}
+          {{/if}}
+          {{#if (eq type "popoverActions")}}
+            {{> header-menu/popover-actions-mob items=items}}
+          {{/if}}
+        {{/each}}
+      {{/if}}
 
-  {{#if tradepro-nav}}
-    <div class="nav-button-wrap" data-logged-in="false">
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon">
-              <i class="fas fa-user"></i>
-          </span>
-          <span class="nav-button__text">Hi, Test</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">My TradePro Account</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account_order-history.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Address Book</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Payment Details</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Order History</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">TradePro Discount Code</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">TradePro Rewards</span>
-        </a>
-      </div>
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -113,58 +40,14 @@
         </a>
       </div>
     </div>
-
-    <div class="nav-button-wrap" data-logged-in="true">
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon">
-              <i class="fas fa-user"></i>
-          </span>
-          <span class="nav-button__text">Hi, Christopher</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">My TradePro Account</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account_order-history.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Address Book</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Payment Details</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Order History</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">TradePro Discount Code</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">TradePro Rewards</span>
-        </a>
-      </div>
-      <div class="main-nav__button">
-        <a href="./page_my-account.html" class="nav-button">
-          <span class="nav-button__icon"></span>
-          <span class="nav-button__text">Log Out</span>
-        </a>
-      </div>
+  {{else}}
+    <div class="main-nav__button main-nav__button--not-logged-in" data-logged-in="false">
+      <a href="/login.html" class="nav-button">
+        <span class="nav-button__icon">
+            <i class="fas fa-user"></i>
+        </span>
+        <span class="nav-button__text">Log In / Register</span>
+      </a>
     </div>
   {{/if}}
 
@@ -185,21 +68,18 @@
     </a>
   </div>
   <div class="main-nav__button">
-    {{#if shopListEmpty}}
-      <a href="./page_my-shopping-list.html" class="nav-button">
-        <span class="nav-button__icon">
-            <i class="fas fa-clipboard"></i>
-        </span>
-        <span class="nav-button__text">Project List</span>
-      </a>
-    {{else}}
-      <a href="./page_my-shopping-list.html" class="nav-button">
-        <span class="nav-button__icon">
-            <i class="fas fa-clipboard-list"></i>
-        </span>
-        <span class="nav-button__text">Project List</span>
-      </a>
-    {{/if}}
+    <a href="./page_my-shopping-list.html" class="nav-button">
+      <span class="nav-button__icon">
+        <i class="fas {{#if shopListEmpty}}fa-clipboard{{else}}fa-clipboard-list{{/if}}"></i>
+      </span>
+      <span class="nav-button__text">
+        {{#if isLoggedIn}}
+          Project Lists
+        {{else}}
+          Project List
+        {{/if}}
+      </span>
+    </a>
   </div>
 </nav>
 <div class="main-nav__overlay"></div>

package/src/scss/common/_elements.scss

@@ -38,10 +38,6 @@
     .ddn > select {
       @include field-error;
     }
-
-    .rbn ins {
-      @include field-error;
-    }
   }
 
   .icon-info {

package/src/scss/common/_rewards-counter.scss

@@ -3,7 +3,7 @@
   display: inline-block;
   min-width: 24px;
   border-radius: 13px;
-  background-color: $red;
+  background-color: $blue-dark;
   color: $white;
   font-size: .725rem;
   font-weight: 700;

package/src/scss/components/_leave-modal.scss

@@ -30,7 +30,7 @@
 
     .modal-title {
       @include font-size(18);
-      @include line-height(32);
+      @include line-height(24);
       margin-left: 15px;
       font-weight: 500;
     }
@@ -41,9 +41,13 @@
 
     .description {
       @include font-size(16);
-      @include line-height(32);
+      @include line-height(24);
       margin-bottom: 0;
       font-weight: 400;
+
+      .new-email {
+        font-weight: 700;
+      }
     }
 
     .actions {

package/src/scss/components/_payments-v2.scss

@@ -52,14 +52,6 @@
 }
 
 @include media-breakpoint-up(sm) {
-  .payways {
-    max-width: 100%;
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
-@include media-breakpoint-up(md) {
   .payways {
     max-width: 100%;
     flex-direction: row;

package/src/scss/components/_price-block-critical.scss

@@ -14,14 +14,14 @@
     }
   }
 
-  .pdp-price__value,
   .pdp-price__oos,
   .pdp-price__in-store-only {
     border-bottom: 1px solid $gray;
   }
 
-  .pdp-price__value {
-    padding-bottom: 10px;
+  .pdp-price__oos {
+    border-top: 1px solid $gray;
+    margin-bottom: 8px;
   }
 
   .pdp-price__value_extended,

package/src/scss/components/_price-block.scss

@@ -25,14 +25,19 @@
     background: $gray-bg;
   }
 
-  .pdp-price__value,
   .pdp-price__oos,
   .pdp-price__in-store-only {
     border-bottom: 1px solid $gray;
   }
 
-  .pdp-price__value {
-    padding-bottom: 10px;
+  .pdp-price__oos {
+    border-top: 1px solid $gray;
+    margin-bottom: 8px;
+
+    & + .pdp-price__controls,
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .pdp-price__value_extended,