wickes-css2 2.98.0-develop.7 → 2.98.0-develop.9

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_track-my-order.scss

@@ -103,27 +103,6 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-
-    .icon-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:after {
-        content: '+';
-        color: $blue;
-        font-size: 1.575rem;
-      }
-    }
-
-    &[aria-expanded='true'] {
-      .icon-wrap {
-        &:after {
-          content: '-';
-          font-size: 2.95rem;
-        }
-      }
-    }
   }
 
   &__list {

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/partials/_header-critical.scss

@@ -266,20 +266,6 @@
   padding-right: 0;
 }
 
-button.header-minicart__btn {
-  background: none;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-  cursor: pointer;
-
-  &:hover {
-    .header-right__link-title {
-      text-decoration: underline;
-    }
-  }
-}
-
 .header-minicart__btn-icon {
   vertical-align: top;
 }

package/src/scss/partials/_header.scss

@@ -288,20 +288,6 @@
   padding-right: 0;
 }
 
-button.header-minicart__btn {
-  background: none;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-  cursor: pointer;
-
-  &:hover {
-    .header-right__link-title {
-      text-decoration: underline;
-    }
-  }
-}
-
 .header-shop-list {
   .icon {
     color: $white;

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

@@ -43,6 +43,7 @@
 @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

@@ -534,6 +534,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>
@@ -926,6 +927,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 +967,8 @@
                             </a>
                         </li>
                     </ul>
+
+
                 </div>
                 <div class="col">
                     <h3>Basket</h3>
@@ -949,8 +981,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>

package/src/components/mini-basket/mini-basket-empty.hbs

@@ -1,17 +0,0 @@
-<div class="custom-slider mini-basket d-none">
-  <div class="custom-slider__wrap">
-    <div class="custom-slider__header">
-      <span class="custom-slider__count">Your basket (0)</span>
-      <a href="#" type="button" class="icon-wrap close-popup">
-        <i class="far fa-times icon"></i>
-      </a>
-    </div>
-    <div class="custom-slider__empty">
-      <span class="icon-wrap icon-wrap--xl">
-        <i class="fas fa-shopping-basket"></i>
-      </span>
-      <p class="text">Your basket is currently empty.</p>
-      <button class="btn btn-primary close-popup">Continue Shopping</button>
-    </div>
-  </div>
-</div>

package/src/components/mini-basket/mini-basket.hbs

@@ -1,39 +0,0 @@
-<div class="custom-slider mini-basket d-none">
-  <div class="custom-slider__wrap">
-    <div class="custom-slider__header">
-      <span class="custom-slider__count">Your basket (1)</span>
-      <button type="button" class="icon-wrap close-popup">
-        <i class="far fa-times icon"></i>
-      </button>
-    </div>
-    <div class="products popover-mini-basket__cards-holder">
-      {{#each mini-basket.products}}
-        {{> mini-basket/product-item this switch-vat=true}}
-      {{/each}}
-    </div>
-  </div>
-  <div class="custom-slider__footer footer-fixed">
-    <div class="mini-basket__total">
-      <button class="btn mini-basket__total-toggle" type="button" data-toggle="collapse" data-target="#checkout-details-accordion-3" aria-expanded="false" aria-controls="checkout-details-accordion-3">
-          <span class="mini-basket__wrap-total">
-            <span class="icon-wrap">
-              <i class="fas fa-chevron-down arrow-icon"></i>
-            </span>
-            <span class="text">Total:</span>
-          </span>
-        <span class="value">{{mini-basket.total.totalPrice.formattedValue}}</span>
-      </button>
-
-      {{> checkout_order-summary-new confirmationSummary=true head=true mod=true id=3 mobile=true hideApplyVoucher=true}}
-    </div>
-    <div class="custom-slider__ctas">
-      <a href="page_shopping-cart.html" class="btn btn_full btn-secondary">View Basket</a>
-      <button class="btn btn-action btn_full btn-checkout">
-        Checkout
-        <span class="icon-wrap ml-2">
-          <i class="fas fa-arrow-right"></i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>

package/src/components/mini-basket/product-item.hbs

@@ -1,24 +0,0 @@
-<div class="card product-card-preview">
-  <div class="products__item card__inner">
-    <a class="card__img-wrap card__img-wrap_link products__image" href="page_product-details-with-global-search-v2.html">
-      <img class="product-img" src="{{src}}" alt="">
-    </a>
-    <div class="products__details product-card__content">
-      <a href="#" class="title product-card__title product-card__title_link">{{title}}</a>
-      <p class="item">Click &amp; Collect: <span class="value">{{CC}}</span></p>
-      <p class="item">Qty: <span class="value">{{quantity.value}}</span></p>
-      {{#if switch-vat}}
-        <p class="price including-vat-inherit">
-          {{incVatPrice}}
-          <span class="inc">Inc.VAT</span>
-        </p>
-        <p class="price excluding-vat-inherit">
-          {{excVatPrice}}
-          <span class="inc">Exc.VAT</span>
-        </p>
-      {{else}}
-        <p class="price">{{price}}</p>
-      {{/if}}
-    </div>
-  </div>
-</div>

package/src/js/components/general/backdrop.js

@@ -1,23 +0,0 @@
-var Wick = Wick || {};
-
-Wick.Backdrop = (function () {
-  const el = {
-    modalBackdrop: 'modal-backdrop',
-    modalBackdropShow: 'show'
-  }
-
-  function show() {
-    if (!$(`.${el.modalBackdrop}`).length) {
-      $('body').append(`<div class="${el.modalBackdrop} ${el.modalBackdropShow}"></div>`);
-    }
-  }
-
-  function hide() {
-    $('body').find(`.${el.modalBackdrop}.${el.modalBackdropShow}`).remove();
-  }
-
-  return {
-    show,
-    hide,
-  };
-})();

package/src/js/components/general/cart-slider.js

@@ -1,16 +0,0 @@
-const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
-
-createPopupSlider({
-  type: 'cart',
-  sliderSelector: '.custom-slider.just-added',
-  onAppendEvent: 'productAddedToCart',
-  onAppend: function (event, { showSlider, handleScroll, el }) {
-    if (!$('.custom-slider.just-added').length) {
-      $('body').append(cartSliderHTML);
-    }
-    const htmlContent = event.detail.html;
-    $(el.slider).append(htmlContent);
-    showSlider();
-    $(el.sliderWrap).on('scroll', _.debounce(() => handleScroll(el.sliderWrap), 100));
-  },
-});

package/src/js/components/general/create-popup-slider.js

@@ -1,196 +0,0 @@
-function createEvent(eventName, payload, eventDetail) {
-  return new CustomEvent(eventName, {
-    detail: {
-      payload,
-      resolve: eventDetail.resolve,
-      reject: eventDetail.reject,
-    },
-  });
-}
-
-function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend }) {
-  const events = {
-    CLOSE_JUST_ADDED: 'CLOSE_JUST_ADDED',
-    CLOSE_MINI_BASKET: 'CLOSE_MINI_BASKET'
-  }
-
-  const el = {
-    $body: $('body'),
-    slider: sliderSelector,
-    sliderWrap: `${sliderSelector} .custom-slider__wrap`,
-    sliderWrapScroll: 'custom-slider__wrap--scroll',
-    footer: '.custom-slider__footer',
-    closePopup: `${sliderSelector} .close-popup`,
-    $stickyWrapper: $('.sticky-wrapper'),
-    $headerWrapper: $('.header-wrapper'),
-    scrollDisable: 'slider-scroll-disable',
-    footerFixed: 'footer-fixed',
-    btnMiniBasket: '.header-minicart__btn',
-  };
-
-  function isSmallBreakpoint() {
-    return Wick.Responsive.getCurrentBreakpoint() === 'down-sm';
-  }
-
-  function getAnimationClass() {
-    return isSmallBreakpoint() ? 'bottom-to-top' : 'right-to-left';
-  }
-
-  function adjustHeight() {
-    const stickyWrapperHeight = el.$stickyWrapper.outerHeight() || 0;
-    const headerWrapperHeight = el.$headerWrapper.outerHeight() || 0;
-
-    const totalHeight = stickyWrapperHeight + headerWrapperHeight;
-    $(el.slider).css('height', `calc(100% - ${totalHeight}px)`);
-  }
-
-  function hideSlider() {
-    $(el.slider).removeClass('show');
-
-    setTimeout(() => {
-      el.$body.removeClass(el.scrollDisable);
-
-      if (!isSmallBreakpoint()) {
-        el.$body.css('padding-right', '');
-      }
-
-      if (type === 'cart') {
-        $(el.slider)
-          .removeAttr('style')
-          .empty();
-      }
-
-      $(el.slider).addClass('d-none');
-    }, 400);
-  }
-
-  function handleScroll(sliderWrap) {
-    const scrollHeight = $(sliderWrap)[0].scrollHeight;
-    const scrollTop = $(sliderWrap).scrollTop();
-    const clientHeight = $(sliderWrap)[0].clientHeight;
-    const scrollBottom = scrollHeight - scrollTop - clientHeight;
-
-    if (scrollBottom > 75) {
-      $(el.footer).addClass(el.footerFixed);
-      $(sliderWrap).addClass(el.sliderWrapScroll);
-    } else {
-      $(el.footer).removeClass(el.footerFixed);
-      $(sliderWrap).removeClass(el.sliderWrapScroll);
-    }
-  }
-
-  function showSlider() {
-    if (isSmallBreakpoint()) {
-      adjustHeight();
-    }
-
-    const animationClass = getAnimationClass();
-    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-    $(el.slider)
-      .removeClass('bottom-to-top right-to-left')
-      .addClass(animationClass);
-
-    $('html, body').animate({ scrollTop: 0 }, 300, () => {
-      Wick.Backdrop.show();
-      $(el.slider).removeClass('d-none');
-
-      setTimeout(() => {
-        $(el.slider).addClass('show');
-        handleScroll(el.sliderWrap);
-        el.$body.addClass(el.scrollDisable);
-
-        if (!isSmallBreakpoint()) {
-          el.$body.css('padding-right', `${scrollBarWidth}px`);
-        }
-      }, 100);
-    });
-  }
-
-  function handleSliderClose(eventName) {
-    return new Promise((resolve, reject) => {
-      const eventDetail = {resolve, reject};
-      const event = createEvent(eventName, {}, eventDetail);
-      window.dispatchEvent(event);
-    })
-      .then(() => {})
-      .catch((error) => {
-        console.error(error);
-      })
-      .finally(() => {
-        hideSlider();
-        Wick.Backdrop.hide();
-      })
-  }
-
-  function bindClosePopup() {
-    $(document).on('click', el.closePopup, async () => {
-      if (type === 'cart') {
-        await handleSliderClose(events.CLOSE_JUST_ADDED);
-      }
-
-      if (type === 'miniBasket') {
-        await handleSliderClose(events.CLOSE_MINI_BASKET)
-      }
-
-      hideSlider();
-      Wick.Backdrop.hide();
-    });
-  }
-
-  function handleResize() {
-    const animationClass = getAnimationClass();
-
-    if ($(el.slider).hasClass('show')) {
-      $(el.slider)
-        .removeClass('bottom-to-top right-to-left')
-        .addClass(animationClass);
-
-      if (isSmallBreakpoint()) {
-        adjustHeight();
-      } else {
-        $(el.slider).css('height', '');
-        Wick.Backdrop.show();
-      }
-    }
-  }
-
-  function shouldClosePopup(event) {
-    const $target = $(event.target);
-    return (
-      !$target.closest(el.slider).length &&
-      !$target.closest(el.closePopup).length &&
-      $(el.slider).hasClass('show')
-    );
-  }
-
-  function init() {
-    bindClosePopup();
-
-    if (onAppendEvent && onAppend) {
-      document.addEventListener(onAppendEvent, (event) => {
-        onAppend(event, { showSlider, handleScroll, el });
-      });
-    }
-
-    $(window).on('resize', _.debounce(handleResize, 100));
-
-    $('body').on('click', async (event) => {
-      if (shouldClosePopup(event)) {
-        if (type === 'cart') {
-          await handleSliderClose(events.CLOSE_JUST_ADDED);
-        }
-
-        if (type === 'miniBasket') {
-          await handleSliderClose(events.CLOSE_MINI_BASKET)
-        }
-      }
-    });
-  }
-
-  init();
-
-  return {
-    showSlider,
-    handleScroll,
-  };
-}

package/src/js/components/general/mini-basket-slider.js

@@ -1,8 +0,0 @@
-createPopupSlider({
-  type: 'miniBasket',
-  sliderSelector: '.custom-slider.mini-basket',
-  onAppendEvent: 'showMiniBasket',
-  onAppend: function (event, { showSlider }) {
-    showSlider();
-  },
-});

package/src/js/emulation/custom-slider-emulation.js

@@ -1,28 +0,0 @@
-
-function simulateHybrisSendingHtml() {
-  const htmlFromHybris = Wick.FEMock.cartPDP;
-  const event = new CustomEvent('productAddedToCart', {
-    detail: { html: htmlFromHybris }
-  });
-  document.dispatchEvent(event);
-}
-
-function initCloseJustAddedDiff() {
-  $(window).on('CLOSE_JUST_ADDED CLOSE_MINI_BASKET', function ({ detail: { resolve }}) {
-    setTimeout(() => {
-      return resolve();
-    }, 200);
-  });
-};
-
-function simulateShowMiniBasket() {
-  const event = new CustomEvent('showMiniBasket', {});
-  document.dispatchEvent(event);
-}
-
-$(document).ready(function () {
-  $('.btn-add-to-basket').on('click', simulateHybrisSendingHtml);
-  $('.header-minicart__btn').on('click', simulateShowMiniBasket);
-
-  initCloseJustAddedDiff();
-});

package/src/page_shopping-cart-charity.html

@@ -1,56 +0,0 @@
-{{#extend "right-aside" page_shopping-cart pageClass="page_basket" title="Basket" pageBasket=true}}
-  {{#content "head" mode="append"}}
-    <link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart.css">
-    <link type="text/css" rel="stylesheet" href="./css/pages/checkout.css">
-  {{/content}}
-  {{#content "heading"}}
-    <div class="notification-area desktop">
-      {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
-    </div>
-
-    <div class="page-header">
-      <a href="./" class="page-header__back-link">Continue shopping</a>
-
-      <div class="notification-area mobile">
-        {{> notifications notification-page.warning-tiles-changed withCloseBtn="true"}}
-      </div>
-
-      <h1 class="page-header__title">Your Basket</h1>
-    </div>
-  {{/content}}
-  {{#content "main"}}
-    {{> checkout_actions
-        top-actions=true
-        modifier="checkout-widget__basket-block_small"}}
-    {{> checkout_order-summary_basket label="Total: " id=1 }}
-    {{#extend "lines-group" name="For delivery" count=4 id=136589003}}
-      {{#content "content"}}
-        {{#each linesDelivery}}
-          {{>order-line mod="order-line_shrink" dynamic=true deliveryChecked=true pageShopCart=true}}
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-    {{#if charityDonations}}
-        {{> charity-donations charityDonations}}
-        {{#each linesCharity}}
-          {{>order-line mod="order-line_shrink" dynamic=true}}
-        {{/each}}
-    {{/if}}
-  {{/content}}
-  {{#content "aside"}}
-      {{> checkout_order-summary_basket label="Total: " id=2}}
-  {{/content}}
-  {{#content "prefooter"}}
-<div class="container component pb-0">
-    <hr>
-</div>
-
-  {{/content}}
-  {{#content "footer"}}
-    {{> footer_basket }}
-  {{/content}}
-  {{#content "foot" mode="append"}}
-    <script defer src="./js/page/basket.js"></script>
-    {{> click-and-collect-modal }}
-  {{/content}}
-{{/extend}}