wickes-css2 2.103.0-RG-1587-replace-klarna-logo-with-svg-image.1 → 2.103.0-RG-1742-billie-30-60-90-days.2

package/src/js/page/checkout-payment-details.js

@@ -8,6 +8,8 @@ Wick.CheckoutPaymentDetails = (function() {
   };
 
   const elements = {
+    $billieRepaymentTerms: $('.js-billie-repayment-terms'),
+    $billieInfoBlock: $('.checkout-payment-details__billie'),
     $wrapperPaymentInput: $('.checkout-payment-details__row'),
     paymentInputName: '[name=payment-method]',
     $cardDetails: $('.checkout-payment-details__card-details'),
@@ -15,45 +17,81 @@ Wick.CheckoutPaymentDetails = (function() {
     $billingAddress: $('.billing-address'),
     hiddenCardDetailsClass: 'checkout-payment-details__card-details_hidden',
     hiddenClass: 'd-none',
-  }
+  };
 
   function preparePage() {
-    var modalOpened = $(".modal.show").length;
+    var modalOpened = $('.modal.show').length;
     if (!modalOpened) {
       return;
     }
     var modalContent = $modal.find('.modal-content').clone();
-    $modal.modal("hide");
-    modalContent.addClass("print-area");
-    $("body")
-      .addClass("print-mode")
+    $modal.modal('hide');
+    modalContent.addClass('print-area');
+    $('body')
+      .addClass('print-mode')
       .append(modalContent);
   }
 
   function resetPage() {
-    var modalPrintModeActive = $("body.print-mode").length;
+    var modalPrintModeActive = $('body.print-mode').length;
     if (!modalPrintModeActive) {
       return;
     }
-    $("body").removeClass("print-mode");
-    $(".print-area").remove();
-    $modal.modal("show");
+    $('body').removeClass('print-mode');
+    $('.print-area').remove();
+    $modal.modal('show');
   }
 
   function getPaymentMethods() {
     return $(elements.paymentInputName)
       .map((_, item) => $(item).val())
-      .get()
+      .get();
+  }
+
+  function setBillieStepVisibility(isReady) {
+    setBillingDetailsRowVisibility(isReady);
+
+    elements.$billieInfoBlock.toggle(isReady);
   }
 
   function togglePaymentBlocks(paymentMethods, checkedMethod) {
     paymentMethods.forEach(method => {
-      $(`[data-${method}]`).toggle(checkedMethod === method)
-    })
+      $(`[data-${method}]`).toggle(checkedMethod === method);
+    });
+  }
+
+  function setBillingDetailsRowVisibility(isVisible) {
+    const $row = elements.$billingAddress.find('.checkout-payment-details__row');
+
+    $row.toggle(isVisible);
+
+    $row.find(':input').prop('disabled', !isVisible);
+  }
+
+
+  function resetBillieRepaymentSelection() {
+    elements.$billieRepaymentTerms.find('input[name="repaymentTerms"]').prop('checked', false);
+  }
+
+  function bindBillieRepaymentGate() {
+    $(document).on('change', 'input[name="repaymentTerms"]', function() {
+      const currentMethod = $(elements.paymentInputName + ':checked').val();
+      if (currentMethod !== 'billie') return;
+
+      const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
+      setBillingDetailsRowVisibility(hasSelection);
+
+      const $row = $(this).closest('.form-row[data-row-required]');
+      $row.removeClass('form-row_validation-error').find('.form-row__error').remove();
+    });
   }
 
   function changeDetailsBlock(checkedMethod) {
-    switch(checkedMethod) {
+    if (checkedMethod !== 'billie') {
+      setBillingDetailsRowVisibility(true);
+    }
+
+    switch (checkedMethod) {
       case 'paypal':
         hideCardDetails();
         showPlaceOrder();
@@ -66,42 +104,48 @@ Wick.CheckoutPaymentDetails = (function() {
         detailsLabel = {
           ...detailsLabel,
           labelText: 'Name on Billie account',
-          buttonText: 'Pay with Billie'
-        }
+          buttonText: 'Pay with Billie',
+        };
         changeLabelText(detailsLabel);
+
+        setBillieStepVisibility(false);
+
+        resetBillieRepaymentSelection();
         break;
+
+
       case 'clearpay':
         detailsLabel = {
           ...detailsLabel,
           labelText: 'Name on Clearpay account',
-          buttonText: 'Pay with Clearpay'
-        }
+          buttonText: 'Pay with Clearpay',
+        };
         prevClearableMethod === 'card' && clearInputFields();
         changeLabelText(detailsLabel);
         prevClearableMethod = checkedMethod;
         break;
       case 'apple':
-        hideCardDetails()
-        hidePlaceOrder()
-        hideBillingAddres()
+        hideCardDetails();
+        hidePlaceOrder();
+        hideBillingAddres();
         break;
       case 'google':
-        hideCardDetails()
-        hidePlaceOrder()
-        hideBillingAddres()
+        hideCardDetails();
+        hidePlaceOrder();
+        hideBillingAddres();
         break;
       case 'card':
         detailsLabel = {
           ...detailsLabel,
           labelText: 'Name on card',
-          buttonText: 'Enter card details'
-        }
+          buttonText: 'Enter card details',
+        };
         prevClearableMethod === 'clearpay' && clearInputFields();
         changeLabelText(detailsLabel);
         prevClearableMethod = checkedMethod;
         break;
       default:
-        showPlaceOrder()
+        showPlaceOrder();
     }
   }
 
@@ -117,7 +161,7 @@ Wick.CheckoutPaymentDetails = (function() {
     const { inputName, labelText, buttonName, buttonText } = params;
     elements.$billingAddress.removeClass(elements.hiddenClass);
     let labelElement = elements.$billingAddress.find('[for="' + inputName + '"]');
-    let buttonElement = elements.$billingAddress.find("." + buttonName + " .btn__text");
+    let buttonElement = elements.$billingAddress.find('.' + buttonName + ' .btn__text');
 
     labelElement && labelElement.text(labelText);
     buttonElement && buttonElement.text(buttonText);
@@ -138,11 +182,27 @@ Wick.CheckoutPaymentDetails = (function() {
   function init() {
     const paymentMethods = getPaymentMethods();
 
+    $(document).on('change', 'input[name="repaymentTerms"]', function() {
+      const currentMethod = $(elements.paymentInputName + ':checked').val();
+      if (currentMethod !== 'billie') return;
+
+      const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
+
+      setBillieStepVisibility(hasSelection);
+
+      const $row = $(this).closest('.form-row[data-row-required]');
+      $row.removeClass('form-row_validation-error')
+        .find('.form-row__error').remove();
+    });
+
+
     elements.$wrapperPaymentInput.on('change', elements.paymentInputName, function() {
-      const checkedMethod = $(this).val();
+      const form = $(this).closest('form')[0];
+      form && Wick.Forms.clearValidationErrors(form);
 
-      togglePaymentBlocks(paymentMethods, checkedMethod)
-      changeDetailsBlock(checkedMethod)
+      const checkedMethod = $(this).val();
+      togglePaymentBlocks(paymentMethods, checkedMethod);
+      changeDetailsBlock(checkedMethod);
     });
 
     $('.btn-new-card').on('click', function() {
@@ -157,27 +217,20 @@ Wick.CheckoutPaymentDetails = (function() {
       return false;
     });
 
-    // do not subscribe if no T&C modal on a current page
-    if (!$modal.length) {
-      return;
-    }
+    if (!$modal.length) return;
 
-    if (typeof(window.onbeforeprint) !== 'undefined') {
-      // subscriptions for browsers
+    if (typeof (window.onbeforeprint) !== 'undefined') {
       window.onbeforeprint = preparePage;
       window.onafterprint = resetPage;
     } else if (window.matchMedia) {
-      // subscriptions for iOS devices
       var mediaQueryList = window.matchMedia('print');
       mediaQueryList.addListener(function(mql) {
-        if (mql.matches) {
-          preparePage();
-        } else {
-          resetPage();
-        }
+        if (mql.matches) preparePage();
+        else resetPage();
       });
     }
   }
 
+
   init();
 })();

package/src/js/page/plp-cards-v2.js

@@ -6,9 +6,7 @@ $(document).ready(function () {
     }
 
     function cardsContent(itemsInRow) {
-        let card = $('.content .product-card, .content .card-product-banner, .content .card-sponsor-banner, .content .card-sponsor-product').filter(function() {
-            return $(this).parents('.product-card, .card-product-banner, .card-sponsor-banner, .card-sponsor-product').length === 0;
-        });
+        let card = $('.content .product-card, .content .card-product-banner');
         let priceSelectors = [
             '.including-vat .product-card__price__old-price',
             '.excluding-vat .product-card__price__old-price',
@@ -19,7 +17,6 @@ $(document).ready(function () {
         revealAll(card, ['.product-card__price__old-price',
                                     '.product-card__price-sqm',
                                     '.product-card__price-value',
-                                    '.product-card__sponsored',
                                     '.energy-efficiency',
                                     '.energy-efficiency__link']);
 
@@ -36,8 +33,6 @@ $(document).ready(function () {
                 hideEmptiness(currentRow, '.product-card__price-sqm');
             }
             hideEmptiness(currentRow, '.product-card__price-value');
-            hideEmptiness(currentRow, '.product-card__sponsored');
-            hideEmptiness(currentRow, '.product-card__price__old-price');
             hideEmptiness(currentRow, '.energy-efficiency');
             hideEmptiness(currentRow, '.energy-efficiency__link');
 
@@ -48,15 +43,11 @@ $(document).ready(function () {
     function hideEmptiness(query, className) {
         let currentQuery = query.find(className);
         let rowContent = currentQuery.text();
-        const classEmptyCheckMap = {
-            '.energy-efficiency': 'energy-efficiency--empty',
-            '.product-card__sponsored': 'product-card__sponsored--empty',
-            '.product-card__price__old-price': 'product-card__price_empty'
-        };
-
-        if (classEmptyCheckMap[className]) {
-            let isClassEmpty = isClassPresentInQuery(currentQuery, classEmptyCheckMap[className]);
-            if (isClassEmpty) {
+
+        if (className === '.energy-efficiency') {
+            let isEnergyQueryEmpty = isClassPresentInQuery(currentQuery, "energy-efficiency--empty");
+
+            if (isEnergyQueryEmpty) {
                 currentQuery.hide();
             }
             return;

package/src/js/page/plp-load-more.js

@@ -43,7 +43,7 @@ Wick.PLPLoadMore = {
       .finally(() => {
         hideLoader(Wick.PLPLoadMore.el.loader);
         Wick.PLPLoadMore.el.$loadMoreBtn.blur();
-        Wick.BannerPlacementManager.checkProductsInColumn();
+        Wick.ProductBanner.checkProductsInColumn();
         $(window).trigger('productBannerPositionChanged');
         Wick.EnergyEfficiency.drawEnergyLabels();
         Wick.PLP?.bindEvents();

package/src/page_checkout_payment-details_guest-with-checkout-journey.html

@@ -9,7 +9,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true paymentsCheckoutV2=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
 {{/content}}
 
 {{#content "main"}}

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 payment-klarna=true}}
+        {{> wismo-payment payment-billie=true}}
       </div>
     </div>
   </div>

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

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true checkout=true}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true}}
 
 {{#content "head" mode="append"}}
 <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
@@ -16,7 +16,7 @@
 {{/content}}
 
 {{#content "aside"}}
-{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon}}
 {{/content}}
 
 

package/src/page_plp_v2.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media" title="Products list" globalSearchV2="true" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" globalSearchV2="true" pagePlp=true}}
 {{#content "head" mode="append" pagePlp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
@@ -32,23 +32,13 @@
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#each search-result_v2.products}}
-                                {{>card_product_v2}}
+                            {{#each plp_load-more.results}}
+                            {{>card_product_v2}}
                             {{/each}}
                             {{#if search-result_v2.product-banner}}
-                                {{#each search-result_v2.product-banner}}
-                                    {{>card_product_banner_v2}}
-                                {{/each}}
-                            {{/if}}
-                            {{#if search-result_v2.sponsor-banner}}
-                                {{#each search-result_v2.sponsor-banner}}
-                                    {{>card_sponsor_banner}}
-                                {{/each}}
-                            {{/if}}
-                            {{#if search-result_v2.sponsor-product}}
-                                {{#each search-result_v2.sponsor-product}}
-                                    {{>card_sponsor_product}}
-                                {{/each}}
+                            {{#each search-result_v2.product-banner}}
+                            {{>card_product_banner_v2}}
+                            {{/each}}
                             {{/if}}
                         </div>
                         <div class="load-more-wrap">

package/src/page_search-results.html

@@ -42,19 +42,9 @@
         </div>
 
         <div class="products-list products-list-v2">
-          {{#each search-result_v2.products}}
-            {{>card_product_v2}}
+          {{#each plp_energy-efficiency.products}}
+            {{> card_product_v2}}
           {{/each}}
-          {{#if search-result_v2.sponsor-banner}}
-            {{#each search-result_v2.sponsor-banner}}
-              {{>card_sponsor_banner}}
-            {{/each}}
-          {{/if}}
-          {{#if search-result_v2.sponsor-product}}
-            {{#each search-result_v2.sponsor-product}}
-              {{>card_sponsor_product}}
-            {{/each}}
-          {{/if}}
         </div>
 
         <div class="sort-products-list">

package/src/page_shopping-cart-v2.html

@@ -1,4 +1,4 @@
-{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=false}}
+{{#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">
@@ -27,7 +27,7 @@
   }}
   {{> checkout-action  mod="mounted"}}
   {{> checkout-action  mod="mounted" view="mobile"}}
-  {{> summary-payment paymentsCheckoutV2=true billieIcon=false}}
+  {{> 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">

package/src/page_split-orders-klarna.html

@@ -0,0 +1,106 @@
+{{#extend "checkout" pageClass="page_checkout page_checkout-confirmation page_split-orders" title="Split Orders"
+logout=true}}
+{{#content "steps"}}
+<div class="page-header">
+    <h1 class="page-header__title">Thank You, Your Order Has Been Placed</h1>
+    <p class="page-header__order-number">Order number: <span class="page-header__order-number_strong">143402004</span>
+    </p>
+    <p class="page-header__intro">We have emailed your order confirmation to <a href="#">michael.michael@gmail.com</a>
+        with details of when your order will be delivered.
+        This email will also contain our contact details should you wish to get in touch with us.</p>
+</div>
+{{/content}}
+{{#content "main"}}
+
+<div>
+    <h3>Products delivered by Wickes</h3>
+    <p>The product listed below will be delivered to you by Wickes. This order 
+    may be split into several parts, if so you will be notified by email. The 
+    date, time slot and address for this delivery are listed below: </p>
+</div>
+
+<div class="product-delivery-table">
+    <div class="product-delivery-table__delivery-info">
+        <div class="row">
+            <div class="product-delivery-table__date">
+                <h4>Delivery date</h4>
+                <div class="product-delivery-table__date-inner">
+                    <div class="checkout-address-time__time-regular">MAR</div>
+                    <div class="checkout-address-time__time-primary">15</div>
+                    <div class="checkout-address-time__time-additional">8:00am - 6:00pm</div>
+                </div>
+            </div>
+            <div class="product-delivery-table__time">
+                <h4>Delivery time</h4>
+                <div class="product-delivery-table__content">
+                    Beetween<br />8:00AM - 6:00PM
+                </div>
+            </div>
+            <div class="product-delivery-table__address">
+                <h4>Delivery address</h4>
+                <div class="product-delivery-table__content">
+                    459 Acasia way<br/>
+                    Wimbledon<br/>
+                    London<br/>
+                    S7 7ET
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="shopping-card-container">
+        {{#each page_shopping-cart.linesCollection}}
+        {{>order-line mod="order-line_shrink"}}
+        {{/each}}
+    </div>
+</div>
+
+{{>checkout-supply-info checkout-components.supply-info.[2]}}
+<div class="checkout-confirmation-shopping-cards">
+    {{#each page_shopping-cart.linesCollection}}
+    <div class="checkout-confirmation-shopping-card">
+        <h4>Collection from Oldham store <span class="checkout__text-highlighted">1 Item</span></h4>
+        <span class="checkout__text-highlighted">Your order will be ready for collection within 1 store hour.</span>
+        <div class="shopping-card-container shopping-card-container_bordered">
+            <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>
+            {{>order-line mod="order-line_shrink"}}
+        </div>
+    </div>
+    {{/each}}
+</div>
+
+<div>
+    <h3>Products delivered by suppliers</h3>
+    <p>The following products will be delivered by our suppliers. They will be contacting you to arrange a delivery
+        date.</p>
+</div>
+
+<div class="product-supplier-delivery-wrap">
+    <div class="product-delivery-table product-supplier-delivery">
+        <h4 class="shopping-card-heading">Products delivered by our supplier expected within <span>14</span> days <span class="checkout__text-highlighted">2 Items</span></h4>
+        <div class="shopping-card-container">
+            {{#each page_shopping-cart.linesCollection}}
+            {{>order-line mod="order-line_shrink"}}
+            {{/each}}
+        </div>
+    </div>
+</div>
+
+
+<a href="./" class="btn btn-secondary checkout-continue-shopping">Return to shopping</a>
+{{/content}}
+{{#content "aside"}}
+{{> checkout_order-summary label="Total: "}}
+{{> checkout_payment-other-methods klarna="true"}}
+{{> checkout_information }}
+
+<a href="./" class="btn btn-secondary checkout-continue-shopping_mobile">Return to shopping</a>
+{{/content}}
+{{/extend}}

package/src/scss/components/card-product-banner.scss

@@ -4,7 +4,7 @@
   @include make-col(4);
   margin-bottom: 30px;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(md) { 
     @include make-col(6);
   }
 
@@ -39,7 +39,7 @@
     padding: 0 15px;
 
     @include media-breakpoint-down(sm) {
-      display: inline-block;
+      display: inline-block; 
       padding: 0;
       width: 100%;
     }
@@ -49,92 +49,4 @@
     display: inline-block;
     width: 100%;
   }
-}
-
-.products-list {
-  .card-sponsor-product,
-  .card-sponsor-banner {
-    @include make-col(4);
-    margin-bottom: 0;
-  }
-
-  .card-sponsor-banner {
-    &__link {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-      padding: 0 15px;
-    }
-
-    &__image {
-      display: inline-block;
-      width: 100%;
-    }
-  }
-
-  .card-sponsor-product {
-    .product-card {
-      max-width: 100%;
-    }
-  }
-
-  .product-card__sponsored {
-    @include font-size(12);
-    @include line-height(16);
-    color: $squant;
-    font-weight: 400;
-    margin-top: -3px;
-    margin-bottom: 15px;
-    padding: 2px 4px;
-
-    &:not(.product-card__sponsored--empty) {
-      width: max-content;
-      background: $gray-light;
-    }
-  }
-}
-
-@include media-breakpoint-down(md) {
-  .products-list {
-    .card-sponsor-product,
-    .card-sponsor-banner {
-      @include make-col(6);
-
-      .card {
-        max-width: 100%;
-      }
-    }
-  }
-
-  .products-list-v2 {
-    .card-sponsor-product:nth-of-type(n+3) {
-      .card {
-        &:before {
-          content: none;
-        }
-      }
-    }
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .products-list {
-    .product-card__sponsored {
-      margin-right: auto;
-      margin-left: auto;
-    }
-
-    .card-sponsor-banner {
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 20px;
-        left: 5px;
-        width: calc(100% - 10px);
-        border-bottom: 1px solid $gray;
-      }
-    }
-  }
-}
+} 

package/src/scss/components/checkout-payment-details-v2.scss

@@ -1,5 +1,6 @@
 @import '../helpers/helpers';
 @import '../components/tooltip';
+@import '../components/checkout-payment-repayment-terms';
 
 .checkout-payment-details-v2 {
   .checkout-payment-details {