wickes-css2 2.106.0-develop.1 → 2.106.0-develop.3

package/src/js/emulation/validity-emulation.js

@@ -0,0 +1,33 @@
+let suppressQuantityReportValidityOnBlur = false;
+
+$(document)
+    .off('blur.quantityValidation', '#quantity-field')
+    .on('blur.quantityValidation', '#quantity-field', function () {
+        if (suppressQuantityReportValidityOnBlur) {
+            suppressQuantityReportValidityOnBlur = false;
+            return;
+        }
+
+        this.reportValidity();
+    });
+
+$(document)
+    .off('keydown.quantityValidation', '#quantity-field')
+    .on('keydown.quantityValidation', '#quantity-field', function (e) {
+        if (e.key !== 'Enter') return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const isValid = this.checkValidity();
+
+        Wick.FEMock.dispatchProductAddedToCart(Wick.FEMock.getCartPdpHtml({ hasError: !isValid }));
+
+        suppressQuantityReportValidityOnBlur = true;
+        this.blur();
+
+        setTimeout(() => {
+            const $focusTarget = $('.custom-slider.just-added .close-popup').first();
+            if ($focusTarget.length) $focusTarget.trigger('focus');
+        }, 150);
+    });

package/src/js/page/basket-v2.js

@@ -40,11 +40,11 @@ import {
     getMessageInfo,
     isMessageExist,
     updatePromotion,
-    showNotification
-} from "./basket/basket-utils";
-import {updateCartBase} from "./basket/basket-update-cart";
-import {updateCartActionBase} from "./basket/basket-update-cart-action";
-import {initBillieModal} from "./components/billie-modal";
+    showNotification,
+} from './basket/basket-utils';
+import { updateCartBase } from './basket/basket-update-cart';
+import { updateCartActionBase } from './basket/basket-update-cart-action';
+import { initBillieModal } from './components/billie-modal';
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {

package/src/js/page/components/billie-modal.js

@@ -1,31 +1,31 @@
 const billieEl = {
-  modalId: '#billieLearnMoreModal',
-  openLink: '.billie__link[data-target="#billieLearnMoreModal"]',
-  scrollBody: '.modal-body.modal-box__body',
-  content: '.modal-content.modal-box__content',
+    modalId: '#billieLearnMoreModal',
+    openLink: '.billie__link[data-target="#billieLearnMoreModal"]',
+    scrollBody: '.modal-body.modal-box__body',
+    content: '.modal-content.modal-box__content',
 };
 
 function resetBillieModalScroll($modal) {
-  const bodyEl = $modal.find(billieEl.scrollBody)[0];
-  if (bodyEl) bodyEl.scrollTop = 0;
-  $modal.find(billieEl.content).attr('data-scroll-state', 'top');
+    const bodyEl = $modal.find(billieEl.scrollBody)[0];
+    if (bodyEl) bodyEl.scrollTop = 0;
+    $modal.find(billieEl.content).attr('data-scroll-state', 'top');
 }
 
 export function initBillieModal() {
-  const $modal = $(billieEl.modalId);
-  if (!$modal.length) return;
+    const $modal = $(billieEl.modalId);
+    if (!$modal.length) return;
 
-  $(document).on('click', billieEl.openLink, function () {
-    resetBillieModalScroll($modal);
-  });
+    $(document).on('click', billieEl.openLink, function () {
+        resetBillieModalScroll($modal);
+    });
 
-  $(document).on('shown.bs.modal', billieEl.modalId, function () {
-    resetBillieModalScroll($modal);
-    requestAnimationFrame(() => resetBillieModalScroll($modal));
-    setTimeout(() => resetBillieModalScroll($modal), 30);
-  });
+    $(document).on('shown.bs.modal', billieEl.modalId, function () {
+        resetBillieModalScroll($modal);
+        requestAnimationFrame(() => resetBillieModalScroll($modal));
+        setTimeout(() => resetBillieModalScroll($modal), 30);
+    });
 
-  $(document).on('hidden.bs.modal', billieEl.modalId, function () {
-    resetBillieModalScroll($modal);
-  });
+    $(document).on('hidden.bs.modal', billieEl.modalId, function () {
+        resetBillieModalScroll($modal);
+    });
 }

package/src/js/page/count-stepper/pdp-count-stepper.js

@@ -0,0 +1,29 @@
+import { createCountStepper } from '../utils/create-count-stepper';
+
+var Wick = window.Wick || {};
+
+Wick.PDPCountStepper = {
+    el: {
+        input: '#quantity-field',
+    },
+
+    stepper: null,
+
+    init() {
+        Wick.PDPCountStepper.stepper = createCountStepper({
+            inputSel: Wick.PDPCountStepper.el.input,
+            min: 1,
+            max: 99,
+            onChange(qty, inputEl) {
+                $(inputEl).trigger('change');
+            },
+        });
+
+        Wick.PDPCountStepper.stepper.init($(document));
+    },
+};
+
+$(document).ready(function () {
+    if (!$(Wick.PDPCountStepper.el.input).length) return;
+    Wick.PDPCountStepper.init();
+});

package/src/js/page/filters/plp-filters.js

@@ -34,14 +34,14 @@ Wick.PLPFilters = {
 
         // 5) primary render
         Wick.PLPFilters.updateSelectedUI(rootWrapper);
-        
+
         // 6) handle browser back/forward navigation
         Wick.PLPFilters.handlePageShow();
     },
 
     // Handle bfcache (back/forward cache)
     handlePageShow() {
-        window.addEventListener('pageshow', function(event) {
+        window.addEventListener('pageshow', function () {
             const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
             Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
             Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);

package/src/js/page/kitchen/colour-swatches.js

@@ -1,6 +1,6 @@
-const Handlebars = require("hbsfy/runtime");
+const Handlebars = require('hbsfy/runtime');
 const markdown = require('helper-markdown');
- 
+
 import { arrayToObjectByIndex } from '../utils/array-utils';
 
 import price from '../../../components/kitchen/price.hbs';
@@ -8,156 +8,156 @@ import stripStickers from '../../../components/kitchen/strip-stickers.hbs';
 import slide from '../../../components/kitchen/slide.hbs';
 import infoIcon from '../../../components/info-icon.hbs';
 
-(function() {
-  const CLASSES = {
-    activeSwatch: 'colour-swatch--active',
-    hiddenSwatch: 'colour-swatch--hidden',
-  };
-
-  const SELECTORS = {
-    kitchenCardsContainer: '.kitchen-cards',
-    cardContainer: '.kitchen-card',
-    colourSwatch: '.colour-swatch',
-    moreSwatchesButton: '.swatch-more',
-    hiddenSwatch: '.colour-swatch--hidden',
-    activeSwatch: '.colour-swatch--active',
-    swatchesText: '.colour-swatches__text',
-    designText: '.kitchen-card__design',
-    finishesText: '.kitchen-card__finishes',
-    ctaLink: '.kitchen-card__cta a',
-    stripsContainer: '.kitchen-card__strips',
-    priceContainer: '.kitchen-card__price',
-    tooltip: '[data-toggle="tooltip"]',
-  };
-
-  let kitchenData = [];
-
-  Handlebars.registerPartial('info-icon', infoIcon);
-
-  Handlebars.registerHelper('markdown', markdown());
-  Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
-    if (operator === '||') {
-      return (v1 || v2) ? options.fn(this) : options.inverse(this);
+(function () {
+    const CLASSES = {
+        activeSwatch: 'colour-swatch--active',
+        hiddenSwatch: 'colour-swatch--hidden',
+    };
+
+    const SELECTORS = {
+        kitchenCardsContainer: '.kitchen-cards',
+        cardContainer: '.kitchen-card',
+        colourSwatch: '.colour-swatch',
+        moreSwatchesButton: '.swatch-more',
+        hiddenSwatch: '.colour-swatch--hidden',
+        activeSwatch: '.colour-swatch--active',
+        swatchesText: '.colour-swatches__text',
+        designText: '.kitchen-card__design',
+        finishesText: '.kitchen-card__finishes',
+        ctaLink: '.kitchen-card__cta a',
+        stripsContainer: '.kitchen-card__strips',
+        priceContainer: '.kitchen-card__price',
+        tooltip: '[data-toggle="tooltip"]',
+    };
+
+    let kitchenData = [];
+
+    Handlebars.registerPartial('info-icon', infoIcon);
+
+    Handlebars.registerHelper('markdown', markdown());
+    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
+        if (operator === '||') {
+            return v1 || v2 ? options.fn(this) : options.inverse(this);
+        }
+    });
+    Handlebars.registerHelper('optimizeImageUrl', function (url, width) {
+        const queryParameters = `format=pjpg&auto=webp&quality=90&width=${width}`;
+        const connectSymbol = url.includes('?') ? '&' : '?';
+
+        return `${url}${connectSymbol}${queryParameters}`;
+    });
+    Handlebars.registerHelper('formatPrice', function (value) {
+        if (typeof value === 'number') {
+            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        }
+
+        return value;
+    });
+
+    function normalizeKitchenData(kitchens) {
+        const transformedKitchens = kitchens.map((kitchen) => ({
+            ...kitchen,
+            colourDatas: arrayToObjectByIndex(kitchen.colourDatas),
+        }));
+
+        return arrayToObjectByIndex(transformedKitchens);
     }
-  });
-  Handlebars.registerHelper('optimizeImageUrl', function(url, width) {
-    const queryParameters = `format=pjpg&auto=webp&quality=90&width=${width}`
-    const connectSymbol = url.includes('?') ? '&' : '?'
-
-    return `${url}${connectSymbol}${queryParameters}`;
-  });
-  Handlebars.registerHelper('formatPrice', function (value) {
-    if (typeof value === 'number') {
-      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+    function transformStripStickerDataForHbs(stickers) {
+        return stickers.map((sticker) => ({
+            text: sticker.text,
+            background: sticker.backgroundColour,
+            text_colour: sticker.textColour,
+        }));
     }
 
-    return value;
-  });
-
-  function normalizeKitchenData(kitchens) {
-    const transformedKitchens = kitchens.map((kitchen) => ({
-      ...kitchen,
-      colourDatas: arrayToObjectByIndex(kitchen.colourDatas),
-    }));
-
-    return arrayToObjectByIndex(transformedKitchens);
-  };
-
-  function transformStripStickerDataForHbs(stickers) {
-    return stickers.map(sticker=> ({
-      text: sticker.text,
-      background: sticker.backgroundColour,
-      text_colour: sticker.textColour,
-    }));
-  }
-
-  function transformPriceDataForHbs(priceData) {
-    return {
-      price: priceData.price,
-      was_price: priceData.wasPrice,
-      finance_price: priceData.financePrice,
-      tooltip_text: priceData.tooltipText,
-      additional_text: priceData.additionalText,
-      price_offer: priceData.isPriceOffer
-    };
-  }
-
-  function updateSwiperView($cardSwiper, images, sticker) {
-    $cardSwiper.removeAllSlides();
-    const newSlidesHtml = slide({images, sticker});
-    $cardSwiper.appendSlide(newSlidesHtml);
-    $cardSwiper.slideTo(0, 0);
-  }
-  function updateSwatchesTextView($cardContainer, colourName) {
-    $cardContainer.find(SELECTORS.swatchesText).text(`in ${colourName}`)
-  }
-  function updateParametersView($cardContainer, design, finishes) {
-    const finishesText = finishes.join(', ');
-    const finishesLabel = (finishes.length > 1) ? 'finishes' : 'finish';
-
-    $cardContainer.find(SELECTORS.designText).text(`${design} design`)
-    $cardContainer.find(SELECTORS.finishesText).text(`${finishesText} ${finishesLabel}`)
-  }
-  function updateCTALink($cardContainer, url) {
-    $cardContainer.find(SELECTORS.ctaLink).attr('href', url)
-  }
-  function updateStickersView($cardContainer, stickersData) {
-    const updatedStickersData = transformStripStickerDataForHbs(stickersData);
-    const newStripStickersHtml = stripStickers({strip_stickers: updatedStickersData});
-
-    $cardContainer.find(SELECTORS.stripsContainer).html(newStripStickersHtml);
-  }
-
-  function updatePriceView($cardContainer, priceData) {
-    const updatedPriceData = transformPriceDataForHbs(priceData);
-    const newPriceHtml = price({price: updatedPriceData, small: true});
-
-    $cardContainer.find(SELECTORS.priceContainer).html(newPriceHtml);
-    $cardContainer.find(SELECTORS.tooltip).tooltip();
-  }
-
-  function handleMoreSwatchesClick() {
-    const $button = $(this);
-    $button.siblings(SELECTORS.hiddenSwatch).removeClass(CLASSES.hiddenSwatch);
-    $button.hide();
-    $(window).trigger('kitchenCardChanged');
-  }
-
-  function handleColourSwatchClick() {
-    const $swatch = $(this);
-    const $cardContainer = $swatch.closest(SELECTORS.cardContainer);
-    const $currentSwatchActive = $swatch.siblings(SELECTORS.activeSwatch);
-
-    const colourId = $swatch.data('id');
-    const kitchenId = $cardContainer.data('id');
-
-    const currentKitchenData = kitchenData[kitchenId];
-    const colourData = currentKitchenData.colourDatas[colourId];
-
-    const $cardSwiper = Wick.PLPCardSwiper[kitchenId];
-    
-    updatePriceView($cardContainer, colourData.priceData);
-    updateStickersView($cardContainer, colourData.stickers);
-    updateSwatchesTextView($cardContainer, colourData.colourSwatch.colourName);
-    updateSwiperView($cardSwiper, colourData.images, currentKitchenData.rangeStickers[0]);
-    updateParametersView($cardContainer, colourData.design, colourData.finishes);
-    updateCTALink($cardContainer, colourData.pdpUrl);
-
-    $currentSwatchActive.removeClass(CLASSES.activeSwatch);
-    $swatch.addClass(CLASSES.activeSwatch);
-    $(window).trigger('kitchenCardChanged');
-  }
-
-  function initKitchenPLP(_, PLPKitchenData) {
-    const $kitchenCardsContainer = $(SELECTORS.kitchenCardsContainer);
-
-    kitchenData = normalizeKitchenData(PLPKitchenData);
-
-    $kitchenCardsContainer.on('click', SELECTORS.colourSwatch, handleColourSwatchClick);
-    $kitchenCardsContainer.on('click', SELECTORS.moreSwatchesButton, handleMoreSwatchesClick);
-  }
-
-  $(document).ready(function() {
-    $(document).on('initKitchenPLP', initKitchenPLP);
-  });
-})()
+    function transformPriceDataForHbs(priceData) {
+        return {
+            price: priceData.price,
+            was_price: priceData.wasPrice,
+            finance_price: priceData.financePrice,
+            tooltip_text: priceData.tooltipText,
+            additional_text: priceData.additionalText,
+            price_offer: priceData.isPriceOffer,
+        };
+    }
+
+    function updateSwiperView($cardSwiper, images, sticker) {
+        $cardSwiper.removeAllSlides();
+        const newSlidesHtml = slide({ images, sticker });
+        $cardSwiper.appendSlide(newSlidesHtml);
+        $cardSwiper.slideTo(0, 0);
+    }
+    function updateSwatchesTextView($cardContainer, colourName) {
+        $cardContainer.find(SELECTORS.swatchesText).text(`in ${colourName}`);
+    }
+    function updateParametersView($cardContainer, design, finishes) {
+        const finishesText = finishes.join(', ');
+        const finishesLabel = finishes.length > 1 ? 'finishes' : 'finish';
+
+        $cardContainer.find(SELECTORS.designText).text(`${design} design`);
+        $cardContainer.find(SELECTORS.finishesText).text(`${finishesText} ${finishesLabel}`);
+    }
+    function updateCTALink($cardContainer, url) {
+        $cardContainer.find(SELECTORS.ctaLink).attr('href', url);
+    }
+    function updateStickersView($cardContainer, stickersData) {
+        const updatedStickersData = transformStripStickerDataForHbs(stickersData);
+        const newStripStickersHtml = stripStickers({ strip_stickers: updatedStickersData });
+
+        $cardContainer.find(SELECTORS.stripsContainer).html(newStripStickersHtml);
+    }
+
+    function updatePriceView($cardContainer, priceData) {
+        const updatedPriceData = transformPriceDataForHbs(priceData);
+        const newPriceHtml = price({ price: updatedPriceData, small: true });
+
+        $cardContainer.find(SELECTORS.priceContainer).html(newPriceHtml);
+        $cardContainer.find(SELECTORS.tooltip).tooltip();
+    }
+
+    function handleMoreSwatchesClick() {
+        const $button = $(this);
+        $button.siblings(SELECTORS.hiddenSwatch).removeClass(CLASSES.hiddenSwatch);
+        $button.hide();
+        $(window).trigger('kitchenCardChanged');
+    }
+
+    function handleColourSwatchClick() {
+        const $swatch = $(this);
+        const $cardContainer = $swatch.closest(SELECTORS.cardContainer);
+        const $currentSwatchActive = $swatch.siblings(SELECTORS.activeSwatch);
+
+        const colourId = $swatch.data('id');
+        const kitchenId = $cardContainer.data('id');
+
+        const currentKitchenData = kitchenData[kitchenId];
+        const colourData = currentKitchenData.colourDatas[colourId];
+
+        const $cardSwiper = Wick.PLPCardSwiper[kitchenId];
+
+        updatePriceView($cardContainer, colourData.priceData);
+        updateStickersView($cardContainer, colourData.stickers);
+        updateSwatchesTextView($cardContainer, colourData.colourSwatch.colourName);
+        updateSwiperView($cardSwiper, colourData.images, currentKitchenData.rangeStickers[0]);
+        updateParametersView($cardContainer, colourData.design, colourData.finishes);
+        updateCTALink($cardContainer, colourData.pdpUrl);
+
+        $currentSwatchActive.removeClass(CLASSES.activeSwatch);
+        $swatch.addClass(CLASSES.activeSwatch);
+        $(window).trigger('kitchenCardChanged');
+    }
+
+    function initKitchenPLP(_, PLPKitchenData) {
+        const $kitchenCardsContainer = $(SELECTORS.kitchenCardsContainer);
+
+        kitchenData = normalizeKitchenData(PLPKitchenData);
+
+        $kitchenCardsContainer.on('click', SELECTORS.colourSwatch, handleColourSwatchClick);
+        $kitchenCardsContainer.on('click', SELECTORS.moreSwatchesButton, handleMoreSwatchesClick);
+    }
+
+    $(document).ready(function () {
+        $(document).on('initKitchenPLP', initKitchenPLP);
+    });
+})();