wickes-css2 2.113.0-develop.2 → 2.113.0-develop.5

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

@@ -1,230 +1,12 @@
-var Wick = window.Wick || {};
-
-import { createLoadingButton } from '../utils/create-loading-button';
-import { createBloomreachWidgetTracking } from './bloomreach-widget-tracking';
-
-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,
-    tracking: createBloomreachWidgetTracking(),
-
-    el: {
-        cta: '.why-not-add-card__cta',
-        next: '[data-why-not-add-next]',
-        pagination: '[data-why-not-add-pagination]',
-        productCard: '.why-not-add-card',
-        productCodeAttr: 'data-product-code',
-        productLink: '.why-not-add-card__title',
-        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);
-        });
-    },
-
-    bindProductTracking($root) {
-        $root.off('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink);
-        $root.on('click.bloomreachWidgetTracking', WhyNotAddWidget.el.productLink, function () {
-            const productCode = $(this)
-                .closest(WhyNotAddWidget.el.productCard)
-                .attr(WhyNotAddWidget.el.productCodeAttr);
-
-            WhyNotAddWidget.tracking.trackClick(productCode);
-        });
-    },
-
-    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(WhyNotAddWidget.el.productCard);
-            const productCode = $card.attr(WhyNotAddWidget.el.productCodeAttr);
-
-            if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
-                return;
-            }
-
-            const payload = {
-                productCode,
-            };
-
-            WhyNotAddWidget.tracking.trackAddToCart([
-                {
-                    item_id: productCode,
-                    sku: 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.bindProductTracking($root);
-        WhyNotAddWidget.bindVatToggle();
-        Wick.BloomreachWidget.reapplyVatDisplay();
-    },
-
-    init(payloadData) {
-        const $containers = $(WhyNotAddWidget.el.widgetContainer);
-
-        WhyNotAddWidget.tracking.setPayload(payloadData);
-
-        if (!payloadData) {
-            $containers.empty().hide();
-            return;
-        }
-
-        $containers.each(function () {
-            const $container = $(this);
-
-            WhyNotAddWidget.renderWidget($container, payloadData);
-            WhyNotAddWidget.initRenderedWidget($container);
-        });
-
-        WhyNotAddWidget.tracking.observeView([
-            $containers.find(WhyNotAddWidget.el.productLink).get(0),
-            $containers.find(WhyNotAddWidget.el.cta).get(0),
-        ]);
-    },
-};
+import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recommendation-carousel-widget';
+
+const WhyNotAddWidget = createBloomreachRecommendationCarouselWidget({
+    namespace: 'whyNotAdd',
+    title: 'Why not add',
+    widgetContainer: '[data-why-not-add-widget]',
+    disableAfterSuccess: false,
+    disableAfterFailure: false,
+    hideBadge: true,
+});
 
 export default WhyNotAddWidget;

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

@@ -69,12 +69,10 @@ switch-vat=true
       <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 class="pdp__widget">
+        {{> bloomreach/complete-your-project
+            context="completeYourProject3Recomendations"
+        }}
       </div>
       {{> fulfilment-accordions }}
     </div>

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

@@ -18,7 +18,7 @@ switch-vat=true
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
 {{#content "body"}}
-<main class="pdp__main">
+<main class="pdp__main" data-cart-mock-key="cartPDPSingle">
   <div class="container">
     <div class="pdp">
       <div class="pdp__title">

package/src/scss/components/bloomreach/_bloomreach.scss

@@ -1,3 +1,4 @@
+@import 'card-shared';
 @import 'complete-your-project';
 @import 'complete-card';
 @import 'complete-card-dropdown';

package/src/scss/components/bloomreach/_card-shared.scss

@@ -0,0 +1,24 @@
+@mixin bloomreach-card-badge {
+  @include font-size(12);
+  @include line-height(16);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $label-z-index;
+  padding: 4px 10px;
+  border-top-right-radius: $border-radius-sm;
+  font-weight: 700;
+  text-align: center;
+}
+
+@include media-breakpoint-down(sm) {
+  .why-not-add-card-wrapper .why-not-add-card,
+  .complete-widget {
+    .btn {
+      &:hover {
+        background-color: $green;
+        color: $white;
+      }
+    }
+  }
+}

package/src/scss/components/bloomreach/_complete-card.scss

@@ -167,17 +167,9 @@
   }
 
   &__badge {
-    @include font-size(12);
-    @include line-height(16);
-    font-weight: 700;
+    @include bloomreach-card-badge;
     margin-bottom: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: $label-z-index;
     color: $white;
-    padding: 4px 10px;
-    text-align: center;
   }
 
   &--skeleton {

package/src/scss/components/bloomreach/_why-not-add-card.scss

@@ -1,10 +1,14 @@
-.why-not-add-card {
-  display: flex;
-  gap: 8px;
+.why-not-add-card-wrapper {
   padding: 12px;
   border: 1px solid $gray;
   border-radius: 4px;
   background-color: $white;
+  position: relative;
+}
+
+.why-not-add-card {
+  display: flex;
+  gap: 8px;
 
   &__image {
     display: block;
@@ -129,10 +133,6 @@
     }
   }
 
-  &__cta-icon {
-    font-size: 18px;
-  }
-
   &__loader {
     .loader-path {
       stroke: $white;
@@ -201,23 +201,150 @@
       }
     }
   }
-}
 
-@include media-breakpoint-down(sm) {
-  .why-not-add-card {
+  &__badge {
+    @include bloomreach-card-badge;
+    max-width: calc(100% - 52px);
+    white-space: normal;
+  }
+
+  &__error {
+    @include font-size(14);
+    @include line-height(22);
+
+    margin-top: 8px;
+    width: 100%;
+    background: rgba($red, 0.05);
+    padding: 8px 10px;
+    column-gap: 17px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+
+    .icon {
+      height: 16px;
+      font-size: 16px;
+      color: $red;
+    }
+  }
+
+  &--added {
     .btn {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: default;
+
       &:hover {
         background-color: $green;
         color: $white;
       }
     }
   }
+
+  &--failed {
+    .btn {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  &__cta {
+    .button__icon--success {
+      margin-right: 0;
+    }
+
+    &--success,
+    &--error {
+      opacity: 1;
+      pointer-events: none;
+    }
+
+    &--success {
+      background-color: $green;
+      border-color: $green;
+      color: $white;
+    }
+
+    &--error {
+      background-color: $gray;
+      border-color: $gray;
+      color: $white;
+    }
+  }
+}
+
+.why-not-add--dont-forget {
+  margin-top: 4px;
+
+  .why-not-add-card {
+    .why-not-add-card__image {
+      width: 124px;
+      height: 124px;
+    }
+  }
+
+  .why-not-add-card {
+    &__badge + .why-not-add-card__image,
+    &__badge ~ .why-not-add-card__content {
+      margin-top: 16px;
+    }
+
+    &__bottom {
+      flex-grow: 1;
+    }
+  }
+}
+
+[data-dont-forget-widget] {
+  .why-not-add-card {
+    &--added {
+      .btn {
+        opacity: 0.6;
+
+        .button__icon--success {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .why-not-add--dont-forget {
+    margin-top: 0;
+
+    .why-not-add-card {
+      &__badge + .why-not-add-card__image {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .why-not-add--dont-forget {
+    margin-top: 12px;
+  }
 }
 
 @media screen and (max-width: 375px) {
+  .why-not-add--dont-forget {
+    .why-not-add-card {
+      .why-not-add-card__image {
+        width: 68px;
+        height: 68px;
+      }
+    }
+  }
+
   .why-not-add-card {
     &__vat-label {
       width: 100%;
     }
+
+    &__error {
+      @include font-size(12);
+    }
   }
 }

package/src/scss/components/bloomreach/_why-not-add.scss

@@ -136,8 +136,37 @@
       }
     }
   }
+
+  &--dont-forget {
+    padding: 0;
+    margin-bottom: 0;
+
+    .why-not-add {
+      &__title {
+        @include font-size(16);
+        @include line-height(24);
+
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .why-not-add {
+    &--dont-forget {
+      .why-not-add {
+        &__title {
+          @include font-size(18);
+          @include line-height(22);
+
+          font-weight: 700;
+        }
+      }
+    }
+  }
 }
 
 [data-why-not-add-widget] + .pdp-price__quantity-calculator {
-  margin-top: 20px
-}
+  margin-top: 20px;
+}