wickes-css2 2.98.0-develop.4 → 2.98.0-develop.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.98.0-develop.4",
+  "version": "2.98.0-develop.5",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/checkout_order-summary-new.hbs

@@ -18,21 +18,26 @@
                 </li>
             {{/each}}
         {{/if}}
-        {{> checkout-voucher-accordion id=id}}
+        {{#unless hideApplyVoucher}}
+          {{> checkout-voucher-accordion id=id}}
+        {{/unless}}
         {{#if discounts}}
             <li class="checkout-widget__accordion-wrap checkout-widget__details-discount">
-            <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
-                    data-target="#acheckout-widget-accordion-{{id}}">Discount(s):
-                <span class="icon accordion__header-icon-small">
-                <i class="fas fa-angle-up"></i>
-                </span>
-            </span>
-                <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
-                    {{#each discounts}}
-                        {{> cart-voucher}}
-                    {{/each}}
-                </ul>
-                <span class="checkout-widget__detail-value">£0.00</span>
+              <span
+                class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed"
+                data-toggle="collapse"
+                data-target="#acheckout-widget-accordion-{{id}}">
+                  Discount(s):
+                  <span class="icon accordion__header-icon-small">
+                    <i class="fas fa-angle-up"></i>
+                  </span>
+              </span>
+              <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
+                  {{#each discounts}}
+                      {{> cart-voucher}}
+                  {{/each}}
+              </ul>
+              <span class="checkout-widget__detail-value">£0.00</span>
             </li>
         {{/if}}
     </ul>

package/src/components/header-minicart.hbs

@@ -6,12 +6,12 @@
       </span>
       <span class="header-right__link-title">Basket</span>
     </span>
-    <a href="page_shopping-cart.html" class="header-right__link header-minicart__btn header-minicart__btn_link"  style="display: none;">
+    <button type="button" class="header-right__link header-minicart__btn header-minicart__btn_link" style="display: none;">
       <span class="btn__text">
         <i class="fas fa-shopping-basket fa-2x"></i>
       </span>
       <span class="header-right__link-title">Basket</span>
-    </a>
+    </button>
   </div>
   <span class="header-minicart__counter">0</span>
-</div>
+</div>

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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,39 @@
+<div class="custom-slider mini-basket d-none">
+  <div class="custom-slider__wrap custom-slider__wrap--scroll">
+    <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>
+    <ul class="products">
+      {{#each mini-basket.products}}
+        {{> mini-basket/product-item this switch-vat=true}}
+      {{/each}}
+    </ul>
+  </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

@@ -0,0 +1,22 @@
+<li class="products__item">
+  <a class="products__image" href="page_product-details-with-global-search-v2.html">
+    <img class="product-img" src="{{src}}" alt="">
+  </a>
+  <div class="products__details">
+    <a href="#" class="title">{{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>
+</li>

package/src/components/pdp-price-actions.hbs

@@ -83,4 +83,4 @@
     <span class="btn__text">Order Paint Mix</span>
   </button>
 </div>
-{{/if}}
+{{/if}}

package/src/components/price-block-v2.hbs

@@ -194,7 +194,6 @@
                         big-wins=big-wins
                         wisdom=wisdom
                         mcfc=mcfc
-                        paint-mix=true
                         available=available
                         stock-accordion="stock-accordion"
                         isUserNonRegistered=isUserNonRegistered

package/src/data/data_confirmation-summary.json

@@ -2,12 +2,12 @@
   "confirmation-summary": {
     "info": [
       {
-        "title": "Items Subtotal:",
+        "title": "Items subtotal:",
         "value": "£44.44",
         "mod": "bold"
       },
       {
-        "title": "Includes VAT:",
+        "title": "VAT:",
         "value": "£71.66",
         "mod": "vat"
       },
@@ -21,7 +21,7 @@
         "mod": "delivery"
       },
       {
-        "title": "Young Minds donation:",
+        "title": "Charity donation:",
         "value": "£1.00"
       }
     ],

package/src/data/data_latest-offers.json

@@ -2409,4 +2409,4 @@
       ]
     }
   }
-}
+}

package/src/data/data_mini-basket.json

@@ -11,7 +11,8 @@
         "price": "£2,009.00",
         "incVatPrice": "£30.00",
         "excVatPrice": "£10.00",
-        "lower-quantity": true
+        "lower-quantity": true,
+        "CC": "East Grinstead"
       },
       {
         "quantity": {
@@ -31,9 +32,77 @@
         "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
         "src": "img/placeholders/[e-img-4to3].jpg",
         "price": "£2,009.00",
-        "incVatPrice": "£3,009.00",
-        "excVatPrice": "£1,009.00",
-        "basket-product": true
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/tap.jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£30.00",
+        "excVatPrice": "£10.00",
+        "lower-quantity": true,
+        "CC": "East Grinstead"
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/tap.jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£30.00",
+        "excVatPrice": "£10.00",
+        "lower-quantity": true,
+        "CC": "East Grinstead"
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
+      },
+      {
+        "quantity": {
+          "value": "1"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim",
+        "src": "img/placeholders/[e-img-4to3].jpg",
+        "price": "£2,009.00",
+        "incVatPrice": "£309.00",
+        "excVatPrice": "£109.00",
+        "bad-amount": true
       }
     ],
     "just-added": [
@@ -48,6 +117,11 @@
         "excVatPrice": "£1,009.00",
         "basket-product": true
       }
-    ]
+    ],
+    "total": {
+      "totalPrice": {
+        "formattedValue": "£17.50"
+      }
+    }
   }
-}
+}

package/src/data/data_page-merge-basket.json

@@ -110,7 +110,7 @@
         "energyEfficiency": {
           "type": "Old",
           "rating": "C",
-          "linkProduct": "https://media.wickes.co.uk/image/upload/v1676542815/documents/wickes/Product-Info-Example_qj5mln.pdf",
+          "linkProduct": "https://media.wickes.co.uk/image/upload/v1676542815/documents/wickes/Product-Info-Example_qj5mln.pdf"
         }
       },
       {

package/src/data/data_store-locator-v2.json

@@ -8,7 +8,7 @@
       "telephone": "01872 6511 101",
       "fax": "01872 6511 101",
       "sat-nav": "X11 1TT",
-      "store-info": "Maecenas nisl leo, consectetur a lacus eu, lacinia tincidunt elit. Suspendisse bibendum molestie lectus sit amet vehicula. Vestibulum in nisi at felis finibus maximus. Fusce placerat viverra semper. Sed in nulla quis neque commodo faucibus a ut eros.",
+      "store-info": "Maecenas nisl leo, consectetur a lacus eu, lacinia tincidunt elit. Suspendisse bibendum molestie lectus sit amet vehicula. Vestibulum in nisi at felis finibus maximus. Fusce placerat viverra semper. Sed in nulla quis neque commodo faucibus a ut eros."
     },
     "accordion-data": [
       {

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,196 @@
+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

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

package/src/js/emulation/big-wins.js

@@ -612,35 +612,35 @@ Wick.BigWinsProto = function () {
       $temp.remove();
     });
 
-    bwVar.$addForDelivery.on('click', function () {
-      Wick.SnackBar.show(
-          {
-            text: 'Notification success message for Delivery with Close Btn',
-            type: Wick.SnackBar.types.SUCCESS
-          }
-      );
-      Wick.SnackBar.show(
-          {
-            text: 'Notification warning message for Delivery with Close Btn',
-            type: Wick.SnackBar.types.WARNING
-          }
-      );
-      Wick.SnackBar.show(
-          {
-            text: 'Notification error message for Delivery with Close Btn',
-            type: Wick.SnackBar.types.ERROR
-          }
-      );
-      Wick.SnackBar.show(
-          {
-            text: 'Notification success message for Delivery with Autoclose',
-            type: Wick.SnackBar.types.SUCCESS,
-            withCloseButton: false,
-            autoClose: true,
-            delayBeforeClose: 3000
-          }
-      );
-    });
+    // bwVar.$addForDelivery.on('click', function () {
+    //   Wick.SnackBar.show(
+    //       {
+    //         text: 'Notification success message for Delivery with Close Btn',
+    //         type: Wick.SnackBar.types.SUCCESS
+    //       }
+    //   );
+    //   Wick.SnackBar.show(
+    //       {
+    //         text: 'Notification warning message for Delivery with Close Btn',
+    //         type: Wick.SnackBar.types.WARNING
+    //       }
+    //   );
+    //   Wick.SnackBar.show(
+    //       {
+    //         text: 'Notification error message for Delivery with Close Btn',
+    //         type: Wick.SnackBar.types.ERROR
+    //       }
+    //   );
+    //   Wick.SnackBar.show(
+    //       {
+    //         text: 'Notification success message for Delivery with Autoclose',
+    //         type: Wick.SnackBar.types.SUCCESS,
+    //         withCloseButton: false,
+    //         autoClose: true,
+    //         delayBeforeClose: 3000
+    //       }
+    //   );
+    // });
 
     bwVar.$addClickAndCollect.on('click', function (e) {
       e.stopPropagation();

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

@@ -0,0 +1,28 @@
+
+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();
+});