wickes-css2 2.98.0-develop.1 → 2.98.0-develop.11

package/src/scss/partials/_main-nav.scss

@@ -5,33 +5,6 @@
   font-weight: 500;
   background: $white;
 
-  .ssc {
-    &-nav {
-      @include make-container;
-      @include make-container-max-widths;
-      display: flex;
-      gap: 5px;
-      padding: 3px 15px;
-    }
-
-    &-line {
-      height: 63px;
-      border-radius: 10px;
-
-      &:first-child {
-        flex: 0 0 34px;
-      }
-
-      &:last-child {
-        flex: 0 0 50px;
-      }
-    }
-  }
-
-  &__section + .ssc-nav {
-    display: none;
-  }
-
   &__top-offers {
     display: none;
   }
@@ -354,10 +327,6 @@
       }
     }
 
-    .ssc-nav {
-      display: none;
-    }
-
     &.js-visible {
       display: block;
     }

package/src/scss/pdp-main-critical.scss

@@ -39,10 +39,10 @@
 @import 'components/saving-shopping-list-critical';
 @import 'components/price-block-critical';
 @import 'components/price-block-v2-critical';
-@import 'components/google_banner-critical';
 @import 'components/wisdom-critical';
 @import 'components/pdp-action-v2';
 @import 'components/clearpay';
+@import 'components/billie-online-messaging';
 
 // Pages
 @import 'pages/page_product-details-critical';

package/src/scss/pdp-main.scss

@@ -78,6 +78,8 @@
 @import 'components/wisdom';
 @import 'components/long-banner';
 @import 'components/clearpay';
+@import 'components/billie-online-messaging';
+@import 'components/billie-modal';
 
 // Pages
 @import 'pages/page_ti';

package/src/sitemap.html

@@ -143,12 +143,6 @@
                                 Product details page - no previous default
                             </a>
                         </li>
-                        <li>
-                            <span class="page-id">2.14</span>
-                            <a href="page_product-details_google-banner.html" target="_blank">
-                                Product details page - google banner
-                            </a>
-                        </li>
                         <li>
                             <span class="page-id">2.15</span>
                             <a href="page_product-details-wisdom.html" target="_blank">
@@ -534,6 +528,7 @@
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
+                        <li><a href="page_my-account-trade-pro-components.html" target="_blank">My Account TradePro Components</a></li>
                         <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
                         <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
                         <li><a href="page_default-store-page-empty.html" target="_blank">Default Store Page Empty</a></li>
@@ -674,10 +669,6 @@
                             <span class="page-id">10.6</span>
                             <a href="page_my-account_tradePro.html" target="_blank">TradePro MyAccount</a>
                         </li>
-                        <li>
-                            <span class="page-id">10.7</span>
-                            <a href="page_my-account_tradePro-with-google-banner.html" target="_blank">TradePro MyAccount - with google banner</a>
-                        </li>
                         <li>
                             <span class="page-id">10.8</span>
                             <a href="page_tradePro_address-book.html" target="_blank">TradePro Address Book</a>
@@ -927,16 +918,36 @@
                         </li>
                     </ul>
                     <h3>
-                        Old Navigation
+                        Pages with Billie payment
                     </h3>
                     <ul>
                         <li>
                             <span class="page-id">1</span>
-                            <a href="page_old-navigation.html" target="_blank">
-                                Page with old navigation
+                            <a href="page_payment-details-with-billie.html" target="_blank">
+                                Billie - Payment details
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">2</span>
+                            <a href="page_product-details-billie.html" target="_blank">
+                                Billie PDP
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">3</span>
+                            <a href="page_checkout_confirmation-billie.html" target="_blank">
+                                Billie Checkout - Confirmation new
+                            </a>
+                        </li>
+                        <li>
+                            <span class="page-id">4</span>
+                            <a href="page_basket-billie.html" target="_blank">
+                                Billie Basket
                             </a>
                         </li>
                     </ul>
+
+
                 </div>
                 <div class="col">
                     <h3>Basket</h3>
@@ -949,8 +960,6 @@
                             Basket</a></li>
                         <li><span class="page-id">8.6</span><a href="page_checkout_merge-basket.html" target="_blank">Merged
                             basket</a></li>
-                        <li><span class="page-id">8.7</span><a href="page_shopping-cart-charity.html" target="_blank">Basket Charity Donation</a>
-                        </li>
                         <li><span class="page-id">8.8</span><a href="page_shopping-cart-v2.html" target="_blank">Basket NEW</a>
                         </li>
                         <li><span class="page-id">8.9</span><a href="page_shopping-cart-registered-v2.html" target="_blank">Basket Registered NEW</a>
@@ -1124,10 +1133,6 @@
                             <span class="page-id">10.3</span>
                             <a href="page_app_sticky_headers-wickes-logo.html" target="_blank">Sticky Wickes Logo Header</a>
                         </li>
-                        <li>
-                            <span class="page-id">10.4</span>
-                            <a href="page_app_google_banner.html" target="_blank">DIY APP Google banner</a>
-                        </li>
                         <li>
                             <span class="page-id">10.4</span>
                             <a href="page_app_diy_google_ios_banner.html" target="_blank">DIY APP Google iOS banner</a>

package/src/components/google-banner.hbs

@@ -1,29 +0,0 @@
-<div class="google_banner">
-
-    <div class="banner">
-        <div class="banner-wrapper">
-            <div class="banner-wrapper-inner">
-
-                <div class="banner-wrapper-inner__logo">
-                    <img src="https://eu-images.contentstack.com/v3/assets/blt066259863543a0d2/bltd3f31eb168092e78/609b9a50996bf2507755257b/tradePro-logo_desk.png?width=60&height=60" alt="Logo Wickes">
-                </div>
-
-                <div class="banner-wrapper-inner__head">
-                    <div class="header-text">Wickes TradePro</div>
-                    <div class="google-play-logo">
-                        <img src="https://eu-images.contentstack.com/v3/assets/blt066259863543a0d2/blt42ead587a25413e0/609b9a50821a2750878acb3c/download.png?width=90&height=21" alt="Google play">
-                    </div>
-                </div>
-
-                <div class="banner-wrapper-inner__action">
-                    <button class="close notification__close banner-wrapper-inner__action-close" type="button">
-                        <span class="icon"><i class="far fa-times"></i></span>
-                    </button>
-
-                    <button class="btn btn_install">INSTALL</button>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</div>

package/src/js/emulation/main-nav-local.js

@@ -1,21 +0,0 @@
-var Wick = Wick || {};
-
-Wick.MainNavLocal = function(){
-    function init() {
-        var localOptions = {
-            local: true,
-            mockData: Wick.MainNavData.returnData()
-        };
-
-        if (!$('#main-nav').length || !$('.ssc-nav').length) {
-            return;
-        }
-        
-
-        setTimeout(()=> {
-            Wick.MainNav.createMainNav(localOptions);
-        }, 2000)
-    }
-
-    init()
-}();

package/src/page_app_google_banner.html

@@ -1,176 +0,0 @@
-{{#extend "base" pageClass="home-page" title="Home" hideBreadcrumbs=true hideBanner="true" pageHome="true" googleBanner="true"}}
-{{#content "head" mode="append" pageHome="true"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_home.css">
-<style>
-    .hero {
-        position: relative;
-        height: 400px;
-        overflow: hidden;
-        max-width: 1397px;
-        margin: 0 auto;
-    }
-
-    @media screen and (max-width: 992px) {
-        .hero {
-            height: 290px;
-        }
-    }
-
-    @media screen and (max-width: 600px) {
-        .hero {
-            height: 500px;
-        }
-    }
-
-    .hero__image-container .hero__image {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    @media screen and (max-width: 768px) {
-        .hero__image-container {
-            height: 290px;
-            overflow: hidden;
-            position: relative;
-        }
-    }
-
-    @media screen and (max-width: 600px) {
-        .hero__image-container {
-            height: 290px;
-            overflow: hidden;
-            position: relative;
-        }
-    }
-
-    .hero__banner {
-        position: absolute;
-        width: 380px;
-        top: 0;
-        left: 10%;
-        margin: 0 auto;
-        height: 100%;
-    }
-
-    @media screen and (max-width: 900px) {
-        .hero__banner {
-            max-width: 240px;
-        }
-    }
-
-    @media screen and (max-width: 600px) {
-        .hero__banner {
-            max-width: 100%;
-            width: 100%;
-            position: relative;
-            left: 0;
-        }
-    }
-
-    .hero__banner .banner-info_large {
-        position: relative;
-    }
-    .hero__banner .banner-info__offer {
-        font-size: 3rem;
-        margin-bottom: 20px;
-        width: 100%;
-        max-width: 100%;
-    }
-</style>
-{{/content}}
-{{#content "body"}}
-<div class="modal modal-box modal-box_full" id="modal-newsletter-signup" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-box__container" role="document">
-        <div class="modal-box__row justify-content-center">
-            <div class="modal-box__columns">
-                <div class="modal-content modal-box__content">
-                    <div class="modal-header modal-box__header">
-                        <div class="justify-content-center">
-                            <div class="container">
-                                <div class="row">
-                                    <div class="col-12">
-                                        <h3 class="modal-title modal-box__title">Sign up for regular news and offers direct to your inbox</h3>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <button class="close modal-box__btn-close d-print-none" type="button" data-dismiss="modal"
-                                aria-label="Close">
-                            <span class="icon" aria-hidden="true"><span class="far fa-times"></span></span>
-                        </button>
-                    </div>
-                    <div class="modal-body modal-box__body popup-content">
-                        <div class="component container">
-                            <div class="row">
-                                <div class="col-12">
-                                    <p class="email-title"><strong>Enter your email address</strong></p>
-                                    <form class="mb-3" action="#">
-                                        <div class="form-row__field newsletter-email">
-                                            <input type="email" class="tbx " value="" id="postcode" name="postcode">
-                                        </div>
-                                        <div class="form-row__col-btn">
-                                            <button class="btn green-btn btn-primary btn_full">
-                                                <span class="btn__text">Submit</span>
-                                            </button>
-                                        </div>
-                                    </form>
-                                    <p class="mb-0">By signing up you accept our <a href="./termsAndconditions">Terms &amp; Conditions</a> including our <a href="./privacy">Privacy Policy</a></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="modal-body modal-box__body popup-content popup-content__thank_you_message">
-                        <div class="component container">
-                            <div class="row">
-                                <div class="col-10">
-                                    <div class="sign-up-popup__thank-you-msg">
-                                        <span class="fas fa-check" aria-hidden="true"></span>
-                                        Thank you for signing up for emails
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<main class="banner-inside">
-    {{>offer-banner}}
-    <div class="hero">
-        <img class="hero__image" src="./img/placeholders/hero.jpg" alt="hero">
-    </div>
-
-    <div class="proposition">
-        <div class="proposition__inner">
-            <a href="#" class="proposition__link  proposition__link_click-collect">
-                <span class="proposition__icon  proposition__icon_click-collect"><i
-                        class="fas fa-mouse-pointer icon"></i></span>
-                FREE Click &amp; Collect<span
-                    class="proposition__link_click-collect-short-text"> from store in 1 hour</span>
-            </a>
-            <a href="#" class="proposition__link  proposition__link_delivery">
-                <span class="proposition__icon  proposition__icon_delivery"><i class="fas fa-truck icon"></i></span>FREE
-                delivery *
-            </a>
-            <a href="#" class="proposition__link  proposition__link_returns">
-                <span class="proposition__icon  proposition__icon_returns"><i class="fas fa-reply-all icon"></i></span>FREE
-                returns
-            </a>
-            <a href="#" class="proposition__link  proposition__link_price-promise">
-                <span class="proposition__icon  proposition__icon_price-promise"><i class="fas fa-pound-sign icon"></i></span>Price
-                match promise
-            </a>
-        </div>
-    </div>
-
-    {{> home-offers }}
-    {{> popular-categories }}
-
-</main>
-{{/content}}
-{{/extend}}

package/src/page_my-account_tradePro-with-google-banner.html

@@ -1,147 +0,0 @@
-{{#extend "my-account" pageClass="page_my-account_new page_my-account_tradePro" title="My TradePro Account" 
-  logo-tp=true
-  tradepro-nav=true
-  googleBanner=true
-  pageMyAcc=true
-}}
-{{#content "head" mode="append"}}
-<link type="text/css" rel="stylesheet" href="./css/pages/page_my-account_tradePro.css">
-{{/content}}
-{{#content "heading"}}
-{{> notifications notification-page.updated classModifier="personal-update-warning  notification_success" withCloseBtn="true"}}
-{{> account-heading title="My TradePro Account"}}
-{{/content}}
-{{#content "aside"}}
-{{> aside-nav2 my-account-tradePro-menu-new active-index="0" page-name="MY TRADEPRO ACCOUNT" tradePro="true"}}
-{{/content}}
-{{#content "main"}}
-<div class="table table_profile my-account-section_details my-account_new_order">
-  <div class="table__content">
-    <div class="row">
-      <div class="acc-icon">
-        <i class="fas fa-box-open"></i>
-      </div>
-      <div class="table__content-heading">Order history</div>
-    </div>
-  </div>
-  <div class="table__actions">
-    <a href="page_tradePro_order-history.html" class="btn btn-secondary">View orders</a>
-  </div>
-</div>
-<div class="table table_profile my-account-section_details my-account_mp">
-  <div class="table__content">
-    <div class="row">
-      <div class="acc-icon">
-        <i class="far fa-sliders-h"></i>
-      </div>
-      <div class="table__content-heading">Marketing Preferences</div>
-    </div>
-    <div class="row">
-      <div class="acc-icon pt-3"></div>
-      <div class="col opted">
-        <div class="table__content-heading opted__quest">Opted in</div>
-        <span class="table__content-info table__content-info-mob">Yes</span>
-      </div>
-      <div class="col opted opted-desk">
-        <div class="table__content-info table__content-info-desk opted__value">Yes</div>
-      </div>
-    </div>
-  </div>
-  <div class="table__actions">
-    <a href="page_marketing-preferences.html" class="btn btn-secondary">Update marketing preferences</a>
-  </div>
-</div>
-{{> table_profile please-email=true icon=true mod="my-account_new_name" tradePro=true}}
-<div class="table table_profile my-account-section_details my-account_new_email">
-  <div class="table__content">
-    <div class="row">
-      <div class="acc-icon">
-        <i class="fas fa-envelope"></i>
-      </div>
-      <div class="table__content-heading">Email</div>
-    </div>
-    <div class="row">
-      <div class="acc-icon"></div>
-      <div class="col table__content-info">Test@Test.com</div>
-    </div>
-  </div>
-  <div class="table__actions">
-    <a href="page_my-account_change-email_tradePro.html" class="btn btn-secondary">Change email address</a>
-    <a href="page_my-account_change-password_tradePro.html" class="btn btn-secondary">Change your password</a>
-  </div>
-</div>
-<div class="table table_profile my-account-section_details my-account_new_address">
-  <div class="table__content">
-    <div class="row">
-      <div class="acc-icon">
-        <i class="fas fa-book"></i>
-      </div>
-      <div class="table__content-heading">Address</div>
-      <div class="col table__content-address">
-        <span>1 Test road, testington, TES T10</span>
-      </div>
-    </div>
-    <div class="row my-tradePro-acc_business-address">
-      <div class="acc-icon">
-        <i class="fas fa-hard-hat"></i>
-      </div>
-      <div class="table__content-heading">Business Address</div>
-      <div class="col table__content-address">
-        <span>1 Test road, testington, TES T10</span>
-      </div>
-    </div>
-  </div>
-  <div class="table__actions">
-    <a href="page_my-account_address-book_tradePro.html" class="btn btn-secondary">Manage address book</a>
-  </div>
-</div>
-<div class="table table_profile my-account-section_details my-account_new_payment">
-  <div class="table__content">
-    <div class="row">
-      <div class="acc-icon">
-        <i class="fas fa-credit-card-front"></i>
-      </div>
-      <div class="table__content-heading">Payment details</div>
-      <div class="col">41111*****11111</div>
-    </div>
-    <div class="row">
-      <div class="acc-icon"></div>
-      <div class="table__content-heading">Billing address</div>
-      <div class="col table__content-address">1 Test road, testington, TES T10</div>
-    </div>
-  </div>
-  <div class="table__actions">
-    <a href="page_my-account_payment-details_tradePro.html" class="btn btn-secondary">Manage payment details</a>
-  </div>
-</div>
-<div class="table table_profile my-account-section_details my-account_new_tradepro">
-  <div class="table__content">
-    <div class="row">
-      <div class="acc-icon">
-        <i class="fas fa-hard-hat"></i>
-      </div>
-      <div class="table__content-heading">TradePro Discount</div>
-      <div class="col table__content-address">
-        <span>In-store & online discount code</span>
-      </div>
-    </div>
-    <div class="row">
-      <div class="acc-icon">
-        <i class="fas fa-gift"></i>
-      </div>
-      <div class="table__content-heading">TradePro Rewards</div>
-      <div class="col table__content-address">
-        <span>Rewards & competitions</span>
-      </div>
-    </div>
-  </div>
-  <div class="table__actions">
-    <a href="page_tradePro_discount.html" class="btn btn-secondary">View TradePro Discount</a>
-    <a href="page_tradePro_rewards.html" class="btn btn-secondary">View TradePro Reward
-      <span class="rewards-counter">0</span>
-    </a>
-  </div>
-</div>
-<!-- /.my-account-section -->
-{{/content}}
-{{/extend}}

package/src/page_old-navigation.html

@@ -1,10 +0,0 @@
-{{#extend "base" pageClass="" title="Old navigation" oldNav=true hideBreadcrumbs=true pageBasket=true}}
-{{#content "body"}}
-  <main>
-    <div class="container">
-      <h1 class="page-header__title">That example old navigation</h1>
-      <p class="page-header__intro">Must be skeleton and after loading navigation</p>
-    </div>
-  </main>
-{{/content}}
-{{/extend}}