wickes-css2 2.106.0-develop.4 → 2.106.0-gift-cards.2

package/build/js/page/components/order-summary.js

@@ -13,31 +13,46 @@ const osEl = {
 }
 
 export function updateOrderSummary(data, equalMap, isVoucher) {
-    equalMap.forEach((obj) => {
-        if ($(obj.item).length) {
-            $(obj.item).show();
-        } else {
-            if ($(osEl.checkoutWidgetDetailsDiscount).length) {
-                $(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj))
-            } else {
-                $(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj))
-            }
-        }
+  equalMap.forEach((obj) => {
+    if (typeof obj.dataValue === 'undefined') return;
 
-        $(obj.item).find(obj.itemValue).text(obj.dataValue);
-        if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
-            $(obj.item).find(obj.itemValue).show();
-        } else {
-            $(obj.item).hide();
-        }
-    })
+    if ($(obj.item).length) {
+      $(obj.item).show();
+    } else {
+      if ($(osEl.checkoutWidgetDetailsDiscount).length) {
+        $(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj));
+      } else {
+        $(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj));
+      }
+    }
 
-    const value = data.totalPrice?.formattedValue || data.total;
+    $(obj.item).find(obj.itemValue).text(obj.dataValue);
+    if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
+      $(obj.item).find(obj.itemValue).show();
+    } else {
+      $(obj.item).hide();
+    }
+  });
 
+  const keys = new Set(Object.keys(data || {}));
+  const hasAny = (...arr) => arr.some(k => keys.has(k));
+
+  const value = data.totalPrice?.formattedValue || data.total;
+  if (typeof value !== 'undefined' && hasAny('total', 'totalPrice')) {
+    updateSummaryMobileBarTotal(value);
+  }
+
+  if (hasAny('promotionsInfo')) {
     updateDiscount(data, isVoucher);
+  }
+
+  if (hasAny('deliveryOrder', 'clickAndCollectOrder', 'clickAndCollectOnly', 'deliveryItemsQuantity', 'pickupItemsQuantity')) {
     hideUnusedDeliveryTypeCost(data, isVoucher);
+  }
+
+  if (hasAny('freeDelivery', 'messageForFreeDelivery', 'clickAndCollectOnly')) {
     calculateFreeDelivery(data);
-    updateSummaryMobileBarTotal(value);
+  }
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -53,12 +68,14 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
     $(osEl.delivery).show()
     $(osEl.cc).show()
     if (isVoucher) {
-        if (!data.deliveryOrder) {
-            $(osEl.delivery).hide()
-        } else if (!data.clickAndCollectOrder) {
-            $(osEl.cc).hide()
-        }
-    } else {
+      if ('deliveryOrder' in data && data.deliveryOrder === false) {
+        $(osEl.delivery).hide();
+      }
+
+      if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
+        $(osEl.cc).hide();
+      }
+  } else {
         if (data.clickAndCollectOnly) {
             $(osEl.delivery).hide()
         } else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {

package/build/js/page/components/toggle-password-visibility.js

@@ -0,0 +1,22 @@
+import { initializeInputToggle } from "../utils/show-hide-input";
+
+var Wick = window.Wick || {};
+
+Wick.TogglePasswordVisibility = {
+  el: {
+    $containers: $('.form-row[data-show-content] .input-wrap'),
+  },
+
+  init() {
+    if (!this.el.$containers.length) {
+      return;
+    }
+    this.el.$containers.each(function () {
+      initializeInputToggle($(this));
+    });
+  },
+};
+
+$(document).ready(function () {
+  Wick.TogglePasswordVisibility.init();
+});

package/build/js/page/components/voucher.js

@@ -1,11 +1,11 @@
-import {updateOrderSummary} from './order-summary';
-import {callAction} from '../utils/http-action';
-import {retryAction, retryHelpers} from "./retry-action";
-import {showValidationErrors} from '../utils/validation'
-import {updateKlarnaPlacements} from '../basket/klarna';
-import {getCSRFToken, CSRF} from "./csrf";
-import {ROUTES} from '../utils/routes';
-import {updateClearpayPlacements, updateClearpayVisibility} from '../basket/clearpay';
+import { updateOrderSummary } from './order-summary';
+import { callAction } from '../utils/http-action';
+import { retryAction, retryHelpers } from './retry-action';
+import { showValidationErrors } from '../utils/validation';
+import { updateKlarnaPlacements } from '../basket/klarna';
+import { getCSRFToken, CSRF } from './csrf';
+import { ROUTES } from '../utils/routes';
+import { updateClearpayPlacements, updateClearpayVisibility } from '../basket/clearpay';
 
 const voucherEl = {
     $basketVoucher: $('.checkout-voucher'),
@@ -30,8 +30,10 @@ const voucherEl = {
 };
 
 export function checkVoucherCode(e, current) {
-    e && e.preventDefault()
-    const context = current ? $(current).closest(voucherEl.voucher) : $(this).closest(voucherEl.voucher),
+    e && e.preventDefault();
+    const context = current
+            ? $(current).closest(voucherEl.voucher)
+            : $(this).closest(voucherEl.voucher),
         value = context.find('input').val().trim(),
         encodedValue = encodeURIComponent(value),
         errorMsg = {
@@ -39,8 +41,8 @@ export function checkVoucherCode(e, current) {
             responseJSON: {
                 globalMessage: {
                     message: 'Please enter a voucher code',
-                }
-            }
+                },
+            },
         };
 
     if (value && value.length) {
@@ -59,7 +61,7 @@ function executionVoucherApplying(value, context) {
             url: `${ROUTES.VOUCHER_UPDATE}/${value}`,
             type: 'POST',
             headers: {
-                'CSRFToken': CSRF.getToken(),
+                CSRFToken: CSRF.getToken(),
             },
             retryLimit: retryHelpers.retryLimit,
             error: notApplyVoucher,
@@ -79,7 +81,7 @@ export function voucherRemove() {
     let voucher = $(this).parent(),
         voucherCode = voucher.attr('data-coupon-code');
     voucher.addClass('checkout-widget__voucher-removed').text('Voucher removed');
-    voucherRemoveAction(voucherCode, voucher)
+    voucherRemoveAction(voucherCode, voucher);
 }
 
 function voucherRemoveAction(code) {
@@ -90,7 +92,7 @@ function voucherRemoveAction(code) {
             type: 'DELETE',
             headers: {
                 'Content-Type': 'application/json',
-                'CSRFToken': CSRF.getToken(),
+                CSRFToken: CSRF.getToken(),
             },
             error: handleVoucherRemovingError,
         };
@@ -106,12 +108,11 @@ function formattedTotalPriceWithoutSymbol(val) {
 }
 
 function executionVoucherRemoving(data) {
-    updateOrderSummary(
-        data,
-        getEqualMapForVoucherUpdate(data),
-        true
+    updateOrderSummary(data, getEqualMapForVoucherUpdate(data), true);
+    updateKlarnaPlacements(
+        formattedTotalPriceWithoutSymbol(data.total),
+        data.paymentInfos.klarnaPaymentInfo.customPaymentMethodIds
     );
-    updateKlarnaPlacements(formattedTotalPriceWithoutSymbol(data.total));
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
 }
@@ -123,19 +124,18 @@ function applyVoucher(data, context) {
 
     clearValidationErrors($voucherForm);
     voucherEl.$basketVoucher.toggle(voucherEl.voucherHide);
-    updateOrderSummary(
-        data,
-        getEqualMapForVoucherUpdate(data),
-        true
+    updateOrderSummary(data, getEqualMapForVoucherUpdate(data), true);
+    updateKlarnaPlacements(
+        formattedTotalPriceWithoutSymbol(data.total),
+        data.paymentInfos.klarnaPaymentInfo.customPaymentMethodIds
     );
-    updateKlarnaPlacements(formattedTotalPriceWithoutSymbol(data.total));
     updateClearpayPlacements(data.total);
     updateClearpayVisibility(data.total);
     setTimeout(function () {
         voucherButton.attr('disabled', false);
         $voucherFormInput.val('');
         voucherEl.$basketVoucher.toggle(voucherEl.voucherHide);
-    }, 5000)
+    }, 5000);
 }
 
 function notApplyVoucher(xhr, context) {
@@ -158,21 +158,25 @@ function notApplyVoucher(xhr, context) {
 function retryVoucherAction(voucherForm) {
     return new Promise((resolve) => {
         getCSRFToken(resolve);
-    }).then(() => {
-        retryAction(checkVoucherCode, retryHelpers.retryLimit, ...Array(1), voucherForm)
-    }).catch(() => {
-        showDefaultError();
     })
+        .then(() => {
+            retryAction(checkVoucherCode, retryHelpers.retryLimit, ...Array(1), voucherForm);
+        })
+        .catch(() => {
+            showDefaultError();
+        });
 }
 
 function retryVoucherRemoving(code) {
     return new Promise((resolve) => {
         getCSRFToken(resolve);
-    }).then(() => {
-        retryAction(voucherRemoveAction, retryHelpers.retryLimit, code);
-    }).catch(() => {
-        console.log('remove failed');
     })
+        .then(() => {
+            retryAction(voucherRemoveAction, retryHelpers.retryLimit, code);
+        })
+        .catch(() => {
+            console.log('remove failed');
+        });
 }
 
 function handleVoucherRemovingError(xhr, code) {
@@ -182,7 +186,7 @@ function handleVoucherRemovingError(xhr, code) {
 }
 
 function showDefaultError(error = retryHelpers.errorMsg) {
-    const voucher = getNotAppliedVoucher()
+    const voucher = getNotAppliedVoucher();
     showValidationErrors(voucher.find('form'), error);
 }
 
@@ -195,9 +199,12 @@ function getNotAppliedVoucher() {
 function clearValidationErrors(form) {
     var $form = $(form);
     if ($form.hasClass(voucherEl.formInvalid)) {
-        $form.removeClass(voucherEl.formInvalid)
-            .find(voucherEl.fieldRow).removeClass(voucherEl.rowValidationError)
-            .find(voucherEl.fieldError).remove();
+        $form
+            .removeClass(voucherEl.formInvalid)
+            .find(voucherEl.fieldRow)
+            .removeClass(voucherEl.rowValidationError)
+            .find(voucherEl.fieldError)
+            .remove();
     }
 }
 
@@ -207,48 +214,46 @@ function getEqualMapForVoucherUpdate(data) {
             item: voucherEl.subtotal,
             itemValue: voucherEl.value,
             dataValue: data.subTotal,
-            title: 'Items subtotal:'
-
+            title: 'Items subtotal:',
         },
         {
             item: voucherEl.vat,
             itemValue: voucherEl.value,
             dataValue: data.vat,
-            title: 'VAT:'
+            title: 'VAT:',
         },
         {
             item: voucherEl.cc,
             itemValue: voucherEl.value,
             dataValue: data.clickAndCollectCost,
-            title: 'Click & Collect:'
+            title: 'Click & Collect:',
         },
         {
             item: voucherEl.delivery,
             itemValue: voucherEl.value,
             dataValue: data.deliveryCost,
-            title: 'Delivery:'
+            title: 'Delivery:',
         },
         {
             item: voucherEl.charity,
             itemValue: voucherEl.value,
             dataValue: data.charityPrice,
-            title: 'Charity donation:'
+            title: 'Charity donation:',
         },
         {
             item: voucherEl.discountItem,
             itemValue: voucherEl.discountValue,
-            dataValue: data.discountTotal
+            dataValue: data.discountTotal,
         },
         {
             item: voucherEl.orderTotal,
             itemValue: voucherEl.orderTotalValue,
-            dataValue: data.total
+            dataValue: data.total,
         },
     ];
 }
 
 $(document).ready(function () {
-
     function init() {
         if (!$('.checkout-voucher').length) {
             return;

package/build/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 () {
+        window.addEventListener('pageshow', function(event) {
             const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
             Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
             Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);

package/build/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);
-        }
-    });
-    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);
+(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 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,
-        };
+  });
+  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 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);
-    });
-})();
+    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);
+  });
+})()