wickes-css2 2.94.0-develop.6 → 2.94.0-ic-298-mega-nav.1

package/src/page_tradePro_delivery-details.html

@@ -0,0 +1,243 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-details page_tradePro-delivery-details" title="Checkout - Delivery details" logout=true isAsideSticky="true" logo-tp=true}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-delivery-details.css">
+{{/content}}
+{{#content "steps"}}
+    {{> steps active-step-index="2" }}
+    {{> notifications notification-page.reminder withCloseBtn="true"}}
+    <div class="checkout-heading">
+      <h3>Products delivered by Wickes</h3>
+    </div>
+  {{/content}}
+  {{#content "main"}}
+    <div class="component component-date-selection">
+      {{> date-selection}}
+    </div>
+    <a href="./page_checkout_payment-details.html" class="btn btn-action delivery-details__payment-details_mobile">Continue to payment details</a>
+    {{> checkout_delivery modal="modal-edit-delivery-address" }}
+    {{#extend "lines-group" name="Products delivered by Wickes" id=136589003 collapsed=true}}
+      {{#content "content"}}
+        {{#each page_shopping-cart.linesCollection}}
+          {{>order-line mod="order-line_shrink"}}
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+
+
+<div class="delivery-details-option">
+  {{>checkout-supply-info checkout-components.supply-info.[0]}}
+</div>
+
+{{#extend "lines-group" name="Products delivered by our supplier expected within 7 working days" id=136589004 collapsed=false}}
+{{#content "content"}}
+{{#each page_shopping-cart.linesCollection}}
+{{>order-line mod="order-line_shrink"}}
+{{/each}}
+{{/content}}
+{{/extend}}
+
+{{#extend "lines-group" name="Products delivered by our supplier expected within 14 working days" id=136589005 collapsed=false}}
+{{#content "content"}}
+{{#each page_shopping-cart.linesCollection}}
+{{>order-line mod="order-line_shrink"}}
+{{/each}}
+{{/content}}
+{{/extend}}
+
+{{#extend "lines-group" name="Products delivered by our supplier expected within 21 working days" id=136589006 collapsed=false}}
+{{#content "content"}}
+{{#each page_shopping-cart.linesCollection}}
+{{>order-line mod="order-line_shrink"}}
+{{/each}}
+{{/content}}
+{{/extend}}
+
+
+
+  <div class="delivery-details-option__contact-details">
+    {{>checkout-supply-info checkout-components.supply-info.[1]}}
+    <form class="form-wrapper your-contact-details form-bg">
+      <div class="your-contact-details__row">
+        <div class="your-contact-details__descr">
+          <h3>Your contact details</h3>
+          <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>
+          <div class="warning-required">
+            Required fields
+          </div>
+          {{> form-row type="tel" id="mobile" label="Mobile phone" required="true"}}
+          {{> form-row type="tel" id="home-phone" label="Home phone" row-mod="row-tel"}}
+          <h3>Simplify your collection</h3>
+          <p>All the Click & Collect items in your order are currently available at the following stores. Select
+            one of the store to collect all your items from the same location.
+          </p>
+          <div class="your-contact-details__checkbox-wrap">
+            <div class="your-contact-details__checkbox">
+              {{#extend "radiobutton" id="oldham" name="store" label="Oldham" checked="true"}}
+              {{#content "html"}}
+              <span class="distance">6.2 Miles</span>
+              <div class="store-address">
+                <div class="store-address__street">Wickes Larch Street,</div>
+                <div class="store-address__town">Oldham</div>
+                <div class="store-address__city">Greater Manchester,</div>
+                <div class="store-address__postcode">OL8 1TA</div>
+                <div class="store-address__country">United Kingdom</div>
+              </div>
+              {{/content}}
+              {{/extend}}
+            </div>
+            <div class="your-contact-details__checkbox">
+              {{#extend "radiobutton" id="clifton" name="store" label="Clifton"}}
+              {{#content "html"}}
+              <span class="distance">4.9 Miles</span>
+              <div class="store-address">
+                <div class="store-address__street">Wickes Wynne Avenue,</div>
+                <div class="store-address__town"> Clifton, Swinton</div>
+                <div class="store-address__city">Greater Manchester,</div>
+                <div class="store-address__postcode">M27 8FU</div>
+                <div class="store-address__country">United Kingdom</div>
+              </div>
+              {{/content}}
+              {{/extend}}
+            </div>
+          </div>
+          <p class="order-update">I would like to update my order to collect all my items from one store.</p>
+        </div>
+      </div>
+      <div class="form-row form-row__action">
+        <div class="form-row__col-btn">
+          <button class="btn btn-primary">
+            <span class="btn__text">Simplify collection</span>
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+
+
+
+<div class="delivery-details-option delivery-details-option_time-slot">
+  <h4>Collection from Oldham store <span class="checkout__text-highlighted">1 Item</span></h4>
+  <div class="delivery-details-option__delivery-info">
+    <div class="delivery-details-option__delivery-info-left">
+      {{>checkout-address-time  time=true within=true}}
+    </div>
+    <div class="delivery-details-option__delivery-info-right">
+      {{>schedule}}
+    </div>
+  </div>
+</div>
+
+{{#extend "lines-group" name="Products for Click & Collect from Oldham" id=132583005 collapsed=true}}
+{{#content "content"}}
+{{#each page_shopping-cart.linesCollection}}
+{{>order-line mod="order-line_shrink"}}
+{{/each}}
+{{/content}}
+{{/extend}}
+
+
+
+<div class="delivery-details-option delivery-details-option_time-slot">
+  <h4>Collection from Oldham store <span class="checkout__text-highlighted">1 Item</span></h4>
+  <div class="delivery-details-option__delivery-info">
+    <div class="delivery-details-option__delivery-info-left">
+      {{>checkout-address-time  time=true within=true}}
+    </div>
+    <div class="delivery-details-option__delivery-info-right">
+      {{>schedule}}
+    </div>
+  </div>
+</div>
+
+{{#extend "lines-group" name="Products for Click & Collect from Oldham" id=136589506 collapsed=true}}
+{{#content "content"}}
+{{#each page_shopping-cart.linesCollection}}
+{{>order-line mod="order-line_shrink"}}
+{{/each}}
+{{/content}}
+{{/extend}}
+
+
+<a href="./page_checkout_payment-details.html" class="btn btn-action delivery-details__payment-details">Continue to payment details</a>
+
+  {{/content}}
+  {{#content "aside"}}
+      {{> checkout_order-summary label="Subtotal: " action='./page_checkout_payment-details.html'}}
+      {{> checkout_voucher }}
+      {{> checkout_delivery modal="modal-edit-delivery-address" }}
+      {{> checkout_supplier-delivery edit="true" }}
+      {{> checkout_click-and-collect invisibleForMobile="true" }}
+      <a href="./page_checkout_payment-details.html" class="btn btn-action delivery-details__payment-details_mobile">Continue to payment details</a>
+  {{/content}}
+  {{#content "foot" mode="append"}}
+  <script defer src="js/page/checkout-edit-address.js"></script>
+
+    {{#extend "modal" classMod="edit-delivery-address" id="modal-edit-delivery-address" title="Edit delivery address" fullWidth=true}}
+      {{#content "body"}}
+        <div class="component">
+          {{> notifications
+          classModifier="notification_warning"
+          text="<strong>Please note:</strong> Changing your delivery address may impact our ability
+          to deliver your order on the date you have selected.<br />
+          You may have to re-select your delivery date and slot after changing your delivery address."
+          warning=true
+          }}
+        </div>
+        {{> checkout-edit-user-address editUrl="page_checkout_delivery-address.html" radioName="checkout-edit-delivery-details" mod="js-selectable"}}
+        <div class="edit-delivery-address__actions row">
+          <div class="edit-delivery-address__add-btn">
+            <a href="page_checkout_delivery-address.html" class="btn btn-secondary">
+              <span class="btn__text">Add new address</span>
+            </a>
+          </div>
+          <div class="edit-delivery-address__delivery-btn">
+            <button class="btn btn-action">
+              <span class="btn__text">Continue to delivery details</span>
+            </button>
+          </div>
+        </div>
+      {{/content}}
+    {{/extend}}
+
+  {{/content}}
+{{/extend}}
+
+<script>
+    $(document).ready(function() {
+        if ($(window).width() > 767 && $(window).width() < 1024 ) {
+            $(".calendar__cell").on("click", function () {
+                $(this).closest('.date-selection').addClass('date-selection_time-visible');
+            });
+
+            $(".delivery-time__show-calendar-link").on("click", function(e) {
+                e.preventDefault();
+                $(this).closest('.date-selection').removeClass('date-selection_time-visible');
+            })
+        } else if ($(window).width() < 767) {
+            $(".calendar__cell").on("click", function() {
+
+                var hiddenBlock = $('.calendar__row_extended');
+                console.log(hiddenBlock.height());
+                if(hiddenBlock.height() < 215) {
+                    hiddenBlock.css('overflow-y', 'inherit')
+                }
+                else {
+                    hiddenBlock.css('overflow-y', 'scroll')
+                }
+
+                var isCellSelected = $(this).hasClass("calendar__cell_selected");
+                var rowExtendedBlock = $(this).parent().next('.calendar__row_extended');
+                var isBlockHidden = rowExtendedBlock.is(':hidden');
+                if (isCellSelected) {
+                    rowExtendedBlock.slideToggle();
+                    $(".delivery-selection").toggle();
+                }
+                else if (isBlockHidden) {
+                    $(".calendar__row_extended").slideUp();
+                    $(this).parent().next().slideDown();
+                    $(".delivery-selection").show();
+                }
+            })
+        }
+    })
+</script>

package/src/page_tradePro_discount.html

@@ -6,13 +6,7 @@
 {{> account-heading title="TradePro Discount"}}
 {{/content}}
 {{#content "aside"}}
-  {{> 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"
-      }}
+{{> aside-nav2 my-account-tradePro-menu-new active-index="6" page-name="TradePro Discount" tradePro="true"}}
 {{/content}}
 {{#content "main"}}
 <div class="page-header">
@@ -78,4 +72,4 @@
 {{> already-installed-app }}
 {{/content}}
 {{/extend}}
-{{> barcode-modal}}
+{{> barcode-modal}}

package/src/page_tradePro_rewards.html

@@ -6,13 +6,7 @@
 {{> account-heading title="TradePro Rewards"}}
 {{/content}}
 {{#content "aside"}}
-  {{> 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"
-      }}
+{{> aside-nav2 my-account-tradePro-menu-new active-index="7" page-name="TradePro Rewards" tradePro="true"}}
 {{/content}}
 {{#content "main"}}
   {{#each page_tradePro_vouchers.voucher_content}}

package/src/page_wismo-order-history-loadmore.html

@@ -1,4 +1,4 @@
-{{#extend "my-account" pageClass="wismo-hist" title="Wismo Order history" switch-vat=true}}
+{{#extend "my-account" pageClass="wismo-hist" title="Wismo Order history" }}
 {{#content "head" mode="append"}}
 <link type="text/css" rel="stylesheet" href="./css/pages/page_wismo-order-history.css">
 {{/content}}
@@ -12,7 +12,7 @@
 
     {{> form-row row-mod="sort-order-by" dropdown="true" label="Sort by" id="d1" placeholder="Date"}}
     {{#each page_wismo-order-history.orders }}
-      {{> table_wismo-history switch-vat=true }}
+      {{> table_wismo-history }}
     {{/each }}
     <div class="load-more-wrap" id="loadmorewrap">
       <button class="btn btn-primary load-more" id="loadmore">Load more</button>
@@ -21,4 +21,4 @@
       </div>
     </div>
   {{/content}}
-{{/extend}}
+{{/extend}}

package/src/partials/breadcrumbs.hbs

@@ -1,31 +1,12 @@
 <div class="breadcrumbs">
   <ul class="breadcrumbs__container">
-    {{#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}}
+    {{#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}}
   </ul>
 </div>

package/src/partials/head.hbs

@@ -20,11 +20,7 @@
     <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}}
-    {{# 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}}
+    <link type="text/css" rel="stylesheet" href="./css/my-account-main.css">
 {{else if shoppingListPDF}}
   <link type="text/css" rel="stylesheet" href="./css/shopping-list-pdf.css">
 {{else}}

package/src/partials/header.hbs

@@ -10,55 +10,52 @@
 
       <ul class="header-top-line">
         <li class="header-top-line__item header-top-line_shop-list">
-          {{#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>
+          <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>
                   </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>
+            {{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>
-              {{else}}
-                <div class="user__popover">
+              </div>
+            {{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>
@@ -68,17 +65,9 @@
                       </a>
                     </div>
                   </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}}
+              </div>
+            {{/if}}
+          </div>
         </li>
         <li class="header-top-line__item header-top-line_shop-list">
           <a href="./page_track_your_order.html" class="header-top-line__link">
@@ -182,17 +171,9 @@
         </div>
         <a href="./page_login.html">
           <div class="btn btn-primary header-shop-list">
-            {{#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}}
+            <span class="icon">
+              <span class="fas fa-user fa-lg"></span>
+            </span>
           </div>
         </a>
         <a href="./page_store-locator.html">
@@ -221,5 +202,5 @@
 <!-- /.header-wrapper -->
 {{> main-nav }}
 {{#unless hideBreadcrumbs }}
-  {{> breadcrumbs}}
+  {{> breadcrumbs }}
 {{/unless}}

package/src/partials/main-nav.hbs

@@ -1,6 +1,10 @@
 <a id="skip-to-navigation"></a>
-<nav class="main-nav" id="main-nav">
-  {{>skeleton-nav}}
+<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">
@@ -15,17 +19,9 @@
       <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>
+          <span class="nav-button__text">Hi, Christopher</span>
         </a>
       </div>
       <div class="main-nav__button">
@@ -34,13 +30,13 @@
           <span class="nav-button__text">My Account</span>
           <span class="rewards-counter">0</span>
         </a>
-      </div>
+      </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> 
       <div class="main-nav__button">
         <a href="./page_my-account_order-history.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -71,7 +67,7 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">My TradePro Account</span>
         </a>
-      </div>
+      </div> 
       <div class="main-nav__button">
         <a href="./page_my-account_order-history.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -89,13 +85,13 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">Order History</span>
         </a>
-      </div>
+      </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> 
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -124,7 +120,7 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">My TradePro Account</span>
         </a>
-      </div>
+      </div> 
       <div class="main-nav__button">
         <a href="./page_my-account_order-history.html" class="nav-button">
           <span class="nav-button__icon"></span>
@@ -142,13 +138,13 @@
           <span class="nav-button__icon"></span>
           <span class="nav-button__text">Order History</span>
         </a>
-      </div>
+      </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> 
       <div class="main-nav__button">
         <a href="./page_my-account.html" class="nav-button">
           <span class="nav-button__icon"></span>