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

package/src/scss/components/my-account/_saving-totaliser.scss

@@ -0,0 +1,175 @@
+.saving-totaliser {
+  background: $blue-dark;
+  padding: 16px;
+  color: $white;
+  margin-bottom: 40px;
+
+  .heading-1, .heading-2 {
+    text-align: left;
+  }
+
+  &__encourage {
+    margin-top: 8px;
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      margin-top: 16px;
+    }
+  }
+
+  &__saving-icon.icon {
+    position: absolute;
+    top: 30px;
+    right: 26px;
+    width: 60px;
+    height: auto;
+    color: $blue-satin;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__saving-title {
+    @include heading-6;
+  }
+
+  &__cell {
+    background: rgba($white, .08);
+    padding: 16px;
+    flex: 1;
+    position: relative;
+
+    &-title {
+      margin-bottom: 4px;
+      color: rgba($white, .8);
+    }
+  }
+
+  &__title {
+    margin-bottom: 16px;
+  }
+
+  &__attencion {
+    margin-bottom: 4px;
+  }
+
+  &__wrapper, &__wrapper2 {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__wrapper {
+    margin-bottom: 16px;
+  }
+
+  &__divider {
+    width: 1px;
+    background: rgba($white, .8);
+  }
+
+  &__split-cell {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+  }
+
+  &__semi-cell {
+    flex: 1;
+  }
+
+  &__center-cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__note {
+    @include additional-text;
+    color: rgba($white, .8);
+  }
+}
+
+@include media-breakpoint-only(xs) {
+  .saving-totaliser {
+    &__saved {
+      width: 180px;
+    }
+
+    &--this-year-only {
+      .saving-totaliser__wrapper2 {
+        flex-direction: row;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .saving-totaliser {
+    padding: 24px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .saving-totaliser {
+    &__saving-title {
+      @include heading-5;
+    }
+  }
+}
+
+@include media-breakpoint-between(sm, md) {
+  .saving-totaliser {
+    &__saved,
+    &__attencion {
+      margin-right: 130px;
+    }
+
+    &__wrapper2 {
+      flex-direction: row;
+    }
+
+    &--this-last-year {
+      .saving-totaliser__split-cell {
+        flex: 2.3;
+      }
+    }
+
+    &__saving-icon.icon {
+      position: absolute;
+      top: 37px;
+      right: 32px;
+      width: 93px;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .saving-totaliser {
+    &__saved,
+    &__attencion {
+      margin-right: 170px;
+    }
+
+    &__wrapper {
+      flex-direction: row;
+    }
+
+    &__wrapper2 {
+      flex-direction: column;
+      width: 364px;
+    }
+
+    &__saving-icon.icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 36px;
+      width: 123px;
+    }
+  }
+}
+

package/src/scss/components/price-block-v2-critical.scss

@@ -19,6 +19,10 @@
       border: 1px solid $gray;
       margin-bottom: 8px;
     }
+
+    &__billie-payment {
+      margin-bottom: 8px;
+    }
   }
 
   .pdp-price__price,

package/src/scss/components/price-block-v2.scss

@@ -20,6 +20,10 @@
       margin-bottom: 8px;
     }
 
+    &__billie-payment {
+      margin-bottom: 8px;
+    }
+
     &_bw {
       outline: 4px solid $warm-grey;
       border-left: 0;

package/src/scss/globals/_global-components.scss

@@ -5,6 +5,5 @@
 @import '../components/payments';
 @import '../components/popover-mini-basket';
 @import '../components/autocomplete';
-@import '../components/google_banner';
 @import '../components/smart-banner';
 @import '../components/snack-bar';

package/src/scss/main.scss

@@ -77,7 +77,6 @@
 @import 'components/checkout-header'; //checkout
 @import 'components/order-item'; //checkout
 @import 'components/potential-promotion'; //checkout
-@import 'components/google_banner';
 @import 'components/smart-banner';
 @import 'components/wisdom';
 @import 'components/card-product-banner';

package/src/scss/pages/_checkout-confirmation-new.scss

@@ -253,7 +253,8 @@
         &__klarna,
         &__apple,
         &__google,
-        &__clearpay {
+        &__clearpay,
+        &__billie {
           display: flex;
           flex-direction: column;
         }
@@ -273,7 +274,8 @@
         }
 
         &__klarna,
-        &__clearpay {
+        &__clearpay,
+        &__billie {
           margin-bottom: 0;
         }
       }
@@ -325,11 +327,16 @@
           &__klarna,
           &__apple,
           &__google,
-          &__clearpay {
+          &__clearpay,
+          &__billie {
             flex-direction: row;
             justify-content: space-between;
           }
 
+          &__billie {
+            align-items: center;
+          }
+
           &__paypal,
           &__apple,
           &__google {

package/src/scss/pages/checkout-new.scss

@@ -6,7 +6,10 @@
 @import 'checkout-confirmation-new';
 @import '../components/checkout_order';
 @import '../components/payments-checkout';
+@import "../components/donation-cart-new";
 @import 'checkout-tradepro';
+@import '../components/billie-online-messaging';
+@import '../components/billie-modal';
 
 @import 'checkout-sign-in';
 @import 'checkout_delivery-details';

package/src/scss/pages/my-account-v2.scss

@@ -5,10 +5,13 @@
 @import '../components/my-account/contacts';
 @import '../components/my-account/mobile-nav';
 @import '../components/my-account/active-orders';
+@import '../components/my-account/saving-totaliser';
 @import '../components/my-account/barcode';
 @import '../components/my-account/discount';
 @import '../components/my-account/clipboard-code';
+@import '../components/my-account/payment-status';
 @import '../libs/font-awesome-icons';
+@import '../components/my-account/payment-status';
 
 .my-account {
   margin: 0;

package/src/scss/pages/page_wismo-details.scss

@@ -1,4 +1,5 @@
 @import '../helpers/helpers';
+@import '../components/my-account/payment-status';
 
 .page_wismo-details {
   .layout_right-aside .page-header::before {

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>
@@ -926,6 +917,35 @@
                             </a>
                         </li>
                     </ul>
+                    <h3>
+                        Pages with Billie payment
+                    </h3>
+                    <ul>
+                        <li>
+                            <span class="page-id">1</span>
+                            <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>
                     <h3>
                         Old Navigation
                     </h3>
@@ -937,6 +957,8 @@
                             </a>
                         </li>
                     </ul>
+
+
                 </div>
                 <div class="col">
                     <h3>Basket</h3>
@@ -949,8 +971,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 +1144,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/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}}