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

package/src/page_checkout_delivery-address-customer-journey.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery address Customer Journey" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery address Customer Journey" isAsideSticky="true" billieIcon=true}}
 {{#content "steps"}}
 {{> steps active-step-index="1" }}
 {{/content}}
@@ -9,7 +9,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true billieIcon=true}}
   {{/content}}
 
 

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

@@ -0,0 +1,27 @@
+{{#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 "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/saving-totaliser this-last-year=true}}
+      {{> my-account/saving-totaliser this-year-only=true}}
+      {{> my-account/saving-totaliser no-savings=true}}
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

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

@@ -69,6 +69,13 @@
     </div>
   </div>
 </div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/saving-totaliser this-last-year=true}}
+    </div>
+  </div>
+</div>
 <div class="account-actions">
   <div class="container">
     <div class="row">

package/src/page_my-account.html

@@ -35,6 +35,7 @@
           title=my_account.diy.activeOrders.sectionTitle
           linkText='View all orders'
           orders=my_account.diy.activeOrders.orderList
+          billieText="Payment due 30 days from Dispatch or Collection Date"
       }}
     </div>
    </div>

package/src/page_my-order.html

@@ -61,7 +61,7 @@
     <div class="col-12 col-lg-3">
       <div class="wismo">
         {{> my-account/wismo_order-summary my_order.wismo-order-summary }}
-        {{> wismo-payment }}
+        {{> wismo-payment payment-billie=true}}
       </div>
     </div>
   </div>

package/src/page_payment-details-with-billie.html

@@ -0,0 +1,67 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Billie" isAsideSticky="true" clearPayIcon=true billieIcon=true}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+
+<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
+{{/content}}
+{{#content "notification"}}
+{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
+{{/content}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="2"}}
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+  <h3 class="delivery-block__heading">Delivery Information</h3>
+  <div class="delivery-block__wrapper">
+    {{#with checkoutOrder.deliveryPayments.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="click-collect-block">
+  <h3 class="click-collect-block__heading">Click & Collect</h3>
+  <div class="click-collect-block__wrapper">
+    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="billing-payment-block">
+  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+  <div class="billing-payment-block__wrapper">
+    {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true billie=true edit-bill-mod=true billie-form=true open-delivery-block=true}}
+  </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script
+    async
+    src="https://pay.google.com/gp/p/js/pay.js">
+</script>
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+<script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
+<script defer src="./js/page/billie-business-type.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
+{{/content}}
+{{/extend}}

package/src/page_product-details-billie.html

@@ -0,0 +1,87 @@
+{{#extend "base" pageClass="page-product-details" title="Product details page new with Billie"
+isDiscount=true
+isSQM=true
+isDescription=true
+isCashback=false
+isSize=true
+hourly-delivery=true
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
+step3=true
+currentlyInStock=true
+pagePdp=true
+}}
+{{#content "body"}}
+
+
+<main class="pdp__main">
+  <div class="container">
+    <div class="pdp">
+      <div class="pdp__title">
+        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
+          title in two rows
+        </h1>
+        <div class="pdp__reviews_small">
+          <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
+          <div class="product-card__reviews review-star">
+            <div class="product-rating product-rating-v2">
+              <div class="rating-bg">
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <div class="rating-overlay"
+                     data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                </div>
+              </div>
+            </div>
+            <span class="review-star-average review-star-average-v2">(4.6)</span>
+          </div>
+          <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
+        </div>
+      </div>
+
+      <div class="pdp__gallery">
+        {{> gallery-pdp-v2 }}
+      </div>
+      <div class="pdp__aside">
+        {{> price-block-v2
+        isProductSaved=false
+        isUserLogedOut=true
+        install=true
+        sample=true
+        big-wins=true
+        stock-accordion="stock-accordion"
+        cc=false
+        nearestAmount=12
+        isUserNonRegistered=true
+        delivery=true
+        nearest-purchase=true
+        clearpay-placement=true
+        billie-placement=true
+        }}
+        {{> fulfilment-accordions }}
+      </div>
+      <div class="pdp__description">
+        {{> product-main-info-v2 isAdvice=true}}
+      </div>
+    </div>
+  </div>
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script type="text/html" id="mini-basket-popup">
+  {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
+</script>
+<script defer src="./js/page/pdp.js"></script>
+<script defer src="./js/page/components/modal-observer.js"></script>
+{{> billie-modal }}
+{{/content}}
+{{/extend}}

package/src/page_shopping-cart-v2.html

@@ -1,4 +1,4 @@
-{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket"}}
+{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=true}}
   {{#content "head" mode="append"}}
     <link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
     <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
@@ -23,10 +23,11 @@
   id=1
   title="Order Summary"
   basket=true
+  billie=true
   }}
   {{> checkout-action  mod="mounted"}}
   {{> checkout-action  mod="mounted" view="mobile"}}
-  {{> summary-payment paymentsCheckoutV2=true}}
+  {{> summary-payment paymentsCheckoutV2=true billieIcon=true}}
 {{/content}}
 {{#content "main"}}
   <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
@@ -40,7 +41,7 @@
       {{/each}}
     </section>
   {{/each}}
-{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
+{{> basket-charity-donations-new   shopping-cart-v2.charityDonationNew }}
 {{/content}}
 {{#content "foot" mode="append"}}
   <script defer src="./js/basket.min.js"></script>

package/src/page_wismo-details.html

@@ -38,7 +38,7 @@
                                             <svg class="svg-inline--fa fa-info-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg><!-- <i class="fas fa-info-circle"></i> -->
                                         </span>
                                         <span class="ref-msg">
-                                            The total refund issued for your recent order cancellation or amendments was 
+                                            The total refund issued for your recent order cancellation or amendments was
                                             £20.00
                                         </span>
                                     </div>
@@ -49,7 +49,7 @@
                 </div>
                 <aside class="right-aside">
                     {{> wismo_order-summary }}
-                    {{> wismo-payment }}
+                    {{> wismo-payment payment-billie=true}}
                 </aside>
             </div>
         </div>

package/src/partials/head.hbs

@@ -32,11 +32,7 @@
 {{/if}}
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
-<script
-    async
-    src="https://eu-library.playground.klarnaservices.com/lib.js"
-    data-client-id="63bb2358-8698-5b0d-b6c0-e8dd2b49d915"
-></script>
+<script async="" src="https://js.klarna.com/web-sdk/v1/klarna.js" data-client-id="63bb2358-8698-5b0d-b6c0-e8dd2b49d915" data-environment="playground"></script>
 {{#if pageBasket}}
     <script async src="https://js-sandbox.squarecdn.com/square-marketplace.js"></script>
 {{/if}}

package/src/partials/main-nav.hbs

@@ -1,6 +1,5 @@
 <a id="skip-to-navigation"></a>
 <nav class="main-nav" id="main-nav">
-  {{>skeleton-nav}}
 
   {{#if isLoggedIn}}
     <div class="nav-button-wrap" data-logged-in="true">

package/src/scss/common/_app.scss

@@ -56,4 +56,3 @@
     }
   }
 }
-

package/src/scss/common/_elements.scss

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

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

@@ -0,0 +1,181 @@
+.modal.billie-modal {
+  .modal-header,
+  .modal-footer {
+    position: sticky;
+    background-color: $white;
+    z-index: 10;
+    box-shadow: none;
+    border-bottom: 0;
+    transition: box-shadow .3s ease;
+    padding: 0;
+  }
+
+  .modal-dialog {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .modal-content {
+    width: 100%;
+  }
+
+  .modal-box__content {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+  }
+
+  .modal-box__header::after {
+    border: 0;
+  }
+
+  .modal-header {
+    top: 0;
+    border-bottom: 1px solid $gray-200;
+    margin-right: -15px;
+  }
+
+  .billie-modal__heading {
+    margin-bottom: 8px;
+  }
+
+  .modal-box__footer-row {
+    width: 100%;
+  }
+
+  ul.billie-modal__list,
+  ol.billie-modal__list {
+    padding-left: 20px;
+  }
+
+  .modal-footer {
+    justify-content: center;
+    bottom: 0;
+    border-top: 0;
+
+    .modal-box__inner-columns {
+      margin: 0;
+    }
+  }
+
+  .modal-box__container {
+    padding: 0;
+  }
+
+  .modal-box__inner-columns {
+    padding: 16px;
+    margin: 0 16px;
+  }
+
+  .modal-box__header .close  {
+    right: 23px;
+    top: 8px;
+  }
+
+  .modal-box__inner-columns .btn {
+    width: 100%;
+  }
+
+  .modal-body {
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .modal-box__inner-columns {
+      padding: 16px 16px 24px;
+    }
+  }
+
+  .modal-content {
+    &[data-scroll-state="middle"],
+    &[data-scroll-state="bottom"] {
+      .modal-header {
+        box-shadow: 0 0 15px rgba(0, 0, 0, .2);
+        border-bottom: 0;
+      }
+    }
+
+    &[data-scroll-state="middle"],
+    &[data-scroll-state="top"] {
+      .modal-footer {
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, .05);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .modal.billie-modal {
+    .modal-content {
+      width: 476px;
+      height: 628px;
+    }
+
+    .modal-dialog {
+      margin: 0 auto;
+      justify-content: center;
+      max-width: 100%;
+      height: auto;
+    }
+
+    .modal-box__header .close  {
+      right: 8px;
+      top: 8px;
+    }
+
+    .modal-body {
+      margin-right: 0;
+
+      .modal-box__inner-columns {
+        margin: 0;
+      }
+    }
+
+    .modal-header {
+      margin-right: 0;
+
+      .modal-box__inner-columns {
+        margin: 0;
+      }
+    }
+
+    .modal-footer {
+      margin-right: 0;
+    }
+
+    .modal-box__container {
+      margin: 0 auto;
+    }
+  }
+
+  .modal.billie-modal.modal-box_full {
+    background: transparent;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .modal.billie-modal {
+    .modal-content {
+      height: auto;
+    }
+
+    .modal-dialog {
+      justify-content: center;
+    }
+
+    .modal-box__inner-row {
+      margin: 0;
+    }
+
+    .modal-box__columns,
+    .modal-box__inner-columns {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+
+    .modal-box__inner-columns .btn {
+      width: auto;
+    }
+  }
+}

package/src/scss/components/_billie-online-messaging.scss

@@ -0,0 +1,46 @@
+.billie {
+  display: flex;
+  align-items: center;
+  border: 1px solid $gray;
+  background-color: $white;
+  padding: 8px;
+  gap: 8px;
+
+  &__logo {
+    height: 25px;
+  }
+
+  &.billie-basket {
+    margin: -20px -20px 0;
+  }
+
+  .billie__logo {
+    height: 25px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    font-size: .75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    color: $gray-dark;
+  }
+
+  &__link {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: 400;
+    white-space: nowrap;
+  }
+
+  &__subtitle {
+    font-size: .75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    color: $squant;
+  }
+}