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

package/src/js/page/bloomreach-widget/why-not-add-widget.js

@@ -0,0 +1,198 @@
+var Wick = window.Wick || {};
+
+import { createLoadingButton } from '../utils/create-loading-button';
+
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('loader', require('../../../elements/loader.hbs'));
+Handlebars.registerPartial('button', require('../../../components/base/button.hbs'));
+Handlebars.registerPartial(
+    'bloomreach/why-not-add',
+    require('../../../components/bloomreach/why-not-add.hbs')
+);
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-skeleton',
+    require('../../../components/bloomreach/why-not-add-skeleton.hbs')
+);
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card-skeleton',
+    require('../../../components/bloomreach/why-not-add-card-skeleton.hbs')
+);
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card',
+    require('../../../components/bloomreach/why-not-add-card.hbs')
+);
+Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
+
+const whyNotAddTemplate = require('../../../components/bloomreach/why-not-add-content.hbs');
+
+const WhyNotAddWidget = {
+    ADD_TO_CART_EVENT: 'addToCart',
+
+    products: [],
+    sliders: [],
+    loadingButton: null,
+
+    el: {
+        cta: '.why-not-add-card__cta',
+        next: '[data-why-not-add-next]',
+        pagination: '[data-why-not-add-pagination]',
+        prev: '[data-why-not-add-prev]',
+        root: '[data-why-not-add]',
+        slider: '[data-why-not-add-slider]',
+        widgetContainer: '[data-why-not-add-widget]',
+    },
+
+    normalizeProducts(payloadData) {
+        return Wick.BloomreachWidget.normalizePayload(payloadData)
+            .map(function (item) {
+                return item.baseProduct || item;
+            })
+            .slice(0, 5);
+    },
+
+    renderWidget($container, payloadData) {
+        const products = WhyNotAddWidget.normalizeProducts(payloadData);
+
+        if (!products.length) {
+            $container.empty().hide();
+            return;
+        }
+
+        WhyNotAddWidget.products = products;
+
+        $container
+            .html(
+                whyNotAddTemplate({
+                    products: products.map(Wick.BloomreachWidget.getProductRenderData),
+                    isSingleProduct: products.length === 1,
+                })
+            )
+            .show();
+    },
+
+    destroySliders() {
+        WhyNotAddWidget.sliders.forEach(function (slider) {
+            if (slider && slider.destroy) {
+                slider.destroy(true, true);
+            }
+        });
+
+        WhyNotAddWidget.sliders = [];
+    },
+
+    initSliders($root) {
+        WhyNotAddWidget.destroySliders();
+
+        $root.find(WhyNotAddWidget.el.slider).each(function () {
+            const $slider = $(this);
+            const $widget = $slider.closest(WhyNotAddWidget.el.root);
+            const slidesCount = $slider.find('.swiper-slide').length;
+
+            if (slidesCount <= 1) {
+                return;
+            }
+
+            const slider = new Swiper(this, {
+                roundLengths: true,
+                slidesPerView: 1,
+                spaceBetween: 12,
+                watchOverflow: true,
+                navigation: {
+                    nextEl: $widget.find(WhyNotAddWidget.el.next)[0],
+                    prevEl: $widget.find(WhyNotAddWidget.el.prev)[0],
+                    disabledClass: 'why-not-add__arrow--disabled',
+                },
+                pagination: {
+                    el: $widget.find(WhyNotAddWidget.el.pagination)[0],
+                    clickable: true,
+                    renderBullet(index, className) {
+                        return `<button class="${className}" type="button" aria-label="Go to slide ${
+                            index + 1
+                        }"></button>`;
+                    },
+                    bulletClass: 'why-not-add__pagination-item',
+                    bulletActiveClass: 'why-not-add__pagination-item--active',
+                },
+            });
+
+            WhyNotAddWidget.sliders.push(slider);
+        });
+    },
+    bindAddToCart($root) {
+        $root.off('click.whyNotAdd', WhyNotAddWidget.el.cta);
+        $root.on('click.whyNotAdd', WhyNotAddWidget.el.cta, function (event) {
+            event.preventDefault();
+
+            const $button = $(this);
+            const $card = $button.closest('.why-not-add-card');
+            const productCode = $card.attr('data-product-code');
+
+            if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
+                return;
+            }
+
+            const payload = {
+                productCode,
+            };
+
+            WhyNotAddWidget.loadingButton.start($button);
+
+            Wick.BloomreachWidget.dispatchWidgetEvent(WhyNotAddWidget.ADD_TO_CART_EVENT, payload)
+                .then(function () {
+                    WhyNotAddWidget.loadingButton.stop($button);
+                    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+                })
+                .catch(function () {
+                    WhyNotAddWidget.loadingButton.stop($button);
+                });
+        });
+    },
+
+    bindVatToggle() {
+        if (Wick.BloomreachWidget.bindVatToggle) {
+            Wick.BloomreachWidget.bindVatToggle('whyNotAddVatToggle');
+        }
+    },
+
+    initRenderedWidget($container) {
+        const $root = $container.find(WhyNotAddWidget.el.root);
+
+        if (!$root.length) {
+            return;
+        }
+
+        if (!WhyNotAddWidget.loadingButton) {
+            WhyNotAddWidget.loadingButton = createLoadingButton({
+                text: Wick.BloomreachWidget.el.loadingButtonText,
+                loader: Wick.BloomreachWidget.el.loadingButtonLoader,
+            });
+        }
+
+        Wick.BloomreachWidget.removeBlankTargets($root);
+
+        Wick.BloomreachWidget.drawRating($root);
+        WhyNotAddWidget.initSliders($root);
+        WhyNotAddWidget.bindAddToCart($root);
+        WhyNotAddWidget.bindVatToggle();
+        Wick.BloomreachWidget.reapplyVatDisplay();
+    },
+
+    init(payloadData) {
+        const $containers = $(WhyNotAddWidget.el.widgetContainer);
+
+        if (!payloadData) {
+            $containers.empty().hide();
+            return;
+        }
+
+        $containers.each(function () {
+            const $container = $(this);
+
+            WhyNotAddWidget.renderWidget($container, payloadData);
+            WhyNotAddWidget.initRenderedWidget($container);
+        });
+    },
+};
+
+export default WhyNotAddWidget;

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

@@ -244,6 +244,7 @@ Wick.CheckoutPaymentDetails = (function () {
                 setBillieStepVisibility(getBillieRepaymentTermsLength() === 1);
                 resetBillieRepaymentSelection();
                 showBillieBusiness();
+                initBillieBusinessType();
                 break;
 
             case 'clearpay':
@@ -324,6 +325,14 @@ Wick.CheckoutPaymentDetails = (function () {
         });
     }
 
+    function initBillieBusinessType() {
+        const $radios = elements.$billieBusiness.find(`input${elements.businessTypeName}`);
+        if ($radios.length === 1) {
+            $radios.prop('checked', true);
+            toggleBusinessTypeFields($radios.val());
+        }
+    }
+
     function forceReflow($element) {
         if (!$element.length) return;
         void $element[0].offsetHeight;
@@ -345,6 +354,7 @@ Wick.CheckoutPaymentDetails = (function () {
 
             const hasSelection = $('input[name="repaymentTerms"]:checked').length > 0;
             setBillieStepVisibility(hasSelection);
+            initBillieBusinessType();
 
             const $row = $(this).closest('.form-row[data-row-required]');
             $row.removeClass('form-row_validation-error').find('.form-row__error').remove();

package/src/page_payment-details-billie-registered-only.html

@@ -0,0 +1,76 @@
+{{#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 hideDeliveryCostMessage=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
+      billie-business-type="REGISTERED_SOLE_TRADER_BUSINESS"
+    }}
+  </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_payment-details-billie-unregistered-only.html

@@ -0,0 +1,76 @@
+{{#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 hideDeliveryCostMessage=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
+      billie-business-type="UNREGISTERED_SOLE_TRADER_BUSINESS"
+    }}
+  </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-bloomreach.html

@@ -70,7 +70,7 @@ switch-vat=true
       <div
           class="pdp__widget"
           data-complete-widget
-          data-context-key="completeYourProject2Recomendations"
+          data-mock-key="completeYourProject2Recomendations"
       >
         {{> bloomreach/complete-your-project title="Complete your project"}}
       </div>

package/src/page_product-details-with-global-search-v2.html

@@ -63,6 +63,7 @@ switch-vat=true
         sample=true
         cc=true
         delivery=true
+        mockDataKey="whyNotAddRecommendations"
         }}
       </div>
       <div class="pdp__description">
@@ -71,7 +72,7 @@ switch-vat=true
       <div
           class="pdp__widget"
           data-complete-widget
-          data-context-key="completeYourProject3Recomendations"
+          data-mock-key="completeYourProject3Recomendations"
       >
         {{> bloomreach/complete-your-project title="Complete your project"}}
       </div>

package/src/page_product-details-with-why-not-add-single.html

@@ -0,0 +1,131 @@
+{{#extend "base" pageClass="page-product-details" title="Product details page new"
+isDiscount=true
+isSQM=true
+isDescription=true
+isCashback=false
+isSize=true
+isGuide=true
+hourly-delivery=true
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
+currentlyInStock=true
+pagePdp=true
+globalSearchV2="true"
+switch-vat=true
+}}
+{{#content "head" mode="append" pagePdp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+{{#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 raws
+        </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
+        cc=true
+        delivery=true
+        mockDataKey="whyNotAddRecommendationsSingle"
+        }}
+      </div>
+      <div class="pdp__description">
+        {{> product-main-info-v2 isProductSaved=true}}
+      </div>
+      <div
+          class="pdp__widget"
+          data-complete-widget
+          data-mock-key="completeYourProject3Recomendations"
+      >
+        {{> bloomreach/complete-your-project title="Complete your project"}}
+      </div>
+      {{> fulfilment-accordions }}
+    </div>
+  </div>
+  <div class="container container-info">
+    <div class="pdp">
+      <div class="pdp__info">
+        {{> pdp-info-v2 }}
+      </div>
+    </div>
+  </div>
+  {{> recently-viewed }}
+
+  {{> similar-products-v2 }}
+
+  {{> seo-widgets title="More products" }}
+  {{> seo-widgets title="Related category" }}
+</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/global-search.min.js"></script>
+{{#extend "modal" id="modal-pdp-feedback" title="Feedback Form" fullWidth=true}}
+{{#content "body"}}
+<iframe class="cboxIframe" name="cbox1538824723052"
+        src="https://docs.google.com/forms/d/1jHV5b8AazYbPmoTXJBxmyns4AcRhtKnnIC4_K_MFOPU/viewform?entry.1452922942=Wickes+Blue+Slate+Chippings+-+Major+Bag&amp;entry.1885983523=Decorative+Uk+sourced+blue+slate+chippings+are+ideal+for+gardens+and+borders.+This+beautiful+stone+changes+colour+when+wet.&amp;entry.935962220=112777&amp;entry.474385230=1000626184"></iframe>
+{{/content}}
+{{/extend}}
+{{> click-and-collect-modal}}
+{{/content}}
+{{/extend}}
+<!--<script defer src="./js/components/badge-cashback.js"></script>-->
+<script>
+  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+    $(document).ready(function () {
+      $('.modal').on('scroll', function () {
+        $(':focus').blur();
+      });
+    });
+  }
+
+  $(document).ready(function () {
+
+    $('#info-details').toggleClass('accordion_collapsed');
+    $('#details-content').css('display', 'block');
+
+    $('#open-review').on('click', function () {
+      $('#info-review').toggleClass('accordion_collapsed');
+      $('#review-content').css('display', 'block');
+    })
+  })
+</script>

package/src/page_track-my-order-result.html

@@ -7,6 +7,7 @@ pageMyAcc=true
 myAccV2=true
 isLoggedIn=true
 mainClass="track-order"
+switch-vat=true
 }}
 {{#content "head" mode="append"}}
 <link type="text/css" rel="stylesheet" href="./css/pages/page_my-order.css">

package/src/scss/category-main.scss

@@ -13,8 +13,8 @@
 @import 'globals/global-components';
 @import 'components/accordion';
 @import 'components/aside-nav2';
-@import 'components/banner';//fully is used on prototype, and some styles are used in prod, needs check
-@import 'components/legal-info';//present on proto, on prod it is just <p> needs check
+@import 'components/banner'; //fully is used on prototype, and some styles are used in prod, needs check
+@import 'components/legal-info'; //present on proto, on prod it is just <p> needs check
 @import 'components/clamp';
 @import 'components/long-banner';
 
@@ -80,7 +80,6 @@
     border-left: 0;
     border-right: 0;
 
-
     @include media-breakpoint-up(sm) {
       flex-direction: column;
       border-left: 1px solid $gray;
@@ -97,7 +96,6 @@
     }
 
     .card__img {
-
       @include media-breakpoint-down(sm) {
         padding-top: 15px;
         padding-bottom: 10px;
@@ -145,7 +143,7 @@
 
     &_ends {
       background-color: $gray-dark-transparent75;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
       line-height: 14px;
     }
@@ -401,7 +399,7 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -414,7 +412,7 @@
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
   }

package/src/scss/common/_app.scss

@@ -42,7 +42,7 @@
 
   .description {
     margin-bottom: 20px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     line-height: 1rem;
   }
 }

package/src/scss/common/_rewards-counter.scss

@@ -5,13 +5,12 @@
   border-radius: 13px;
   background-color: $blue-dark;
   color: $white;
-  font-size: .725rem;
+  font-size: 0.725rem;
   font-weight: 700;
   line-height: 1.5rem;
   text-align: center;
 }
 
-
 @include media-breakpoint-down(md) {
   .rewards-counter {
     margin-left: 10px;

package/src/scss/common/_typography.scss

@@ -33,7 +33,7 @@ h6,
 }
 
 .annotation {
-  font-size: .75rem;
+  font-size: 0.75rem;
 }
 
 .info-text {

package/src/scss/common/_vat-toggle.scss

@@ -12,7 +12,7 @@
 
 .price-vat {
   color: $blue-dark;
-  font-size: .75rem;
+  font-size: 0.75rem;
   font-weight: 500;
   display: inline;
 }

package/src/scss/components/_add-list-id.scss

@@ -57,7 +57,6 @@
   }
 }
 
-
 @include media-breakpoint-up(sm) {
   .add-list-id__form {
     max-width: 378px;

package/src/scss/components/_advice-inspiration-critical.scss

@@ -18,7 +18,7 @@
     width: 35px;
     height: 35px;
     border-radius: 3px;
-    transition: all .2s ease;
+    transition: all 0.2s ease;
   }
 
   &__path,
@@ -37,7 +37,7 @@
 
   &__link {
     max-width: 280px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: 500;
     text-decoration: underline;
     white-space: nowrap;