wickes-css2 2.113.0 → 2.116.0

package/src/js/page/ripple/bulk-add.js

@@ -0,0 +1,71 @@
+import { createToast } from '../utils/create-toast';
+import { createLoadingButton } from '../utils/create-loading-button';
+import { createEvent } from '../utils/create-event';
+const notificationTemplate = require('../../../elements/notifications.hbs');
+
+const BULK_ADD_EVENT = 'bulkAddToCart';
+const QUANTITY = 1;
+
+const bulkAddFailedResponse = {
+    bulkAddToCartData: {
+        messageType: 'error',
+        messageText: 'Product was not added to basket',
+    },
+};
+
+export function dispatchWindowEvent(eventName, payload) {
+    return new Promise(function (resolve, reject) {
+        window.dispatchEvent(createEvent(eventName, payload, { resolve, reject }));
+    });
+}
+
+export function createBulkAddHelper({ productCodeSelector }) {
+    let toast = null;
+    let loadingButton = null;
+
+    function getProductCode() {
+        return $(productCodeSelector).val();
+    }
+
+    function addProductToCart(postcode) {
+        const item = { productCode: getProductCode(), quantity: QUANTITY };
+        
+        const payload = {
+            entries: [item]
+        };
+
+        if (postcode) {
+            payload.postCode = postcode;
+        }
+
+        return dispatchWindowEvent(BULK_ADD_EVENT, payload);
+    }
+
+    function showBulkAddResult(response) {
+        const bulkData = response && response.bulkAddToCartData;
+
+        if (bulkData) {
+            toast.show({ type: bulkData.messageType, text: bulkData.messageText });
+        }
+    }
+
+    function init() {
+        if (!toast) {
+            toast = createToast({ template: notificationTemplate });
+        }
+        if (!loadingButton) {
+            loadingButton = createLoadingButton();
+        }
+    }
+
+    return {
+        init,
+        getProductCode,
+        addProductToCart,
+        showBulkAddResult,
+        showBulkAddFailed: () => showBulkAddResult(bulkAddFailedResponse),
+        get loadingButton() {
+            return loadingButton;
+        },
+    };
+}

package/src/js/page/ripple/package-bulk-add.js

@@ -0,0 +1,43 @@
+import { createBulkAddHelper } from './bulk-add';
+
+var Wick = window.Wick || {};
+
+Wick.PackageBulkAdd = (function () {
+    const selectors = {
+        button: '.package-bulk-add',
+        productCodeInput: '.pdp-price input[name=productCodePost]',
+    };
+
+    const bulkAdd = createBulkAddHelper({ productCodeSelector: selectors.productCodeInput });
+
+    async function handleButtonClick(e) {
+        e.preventDefault();
+
+        const $buttons = $(selectors.button);
+
+        if (bulkAdd.loadingButton.isLoading($buttons)) {
+            return;
+        }
+
+        bulkAdd.loadingButton.start($buttons);
+
+        try {
+            bulkAdd.showBulkAddResult(await bulkAdd.addProductToCart());
+            Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        } catch {
+            bulkAdd.showBulkAddFailed();
+        } finally {
+            bulkAdd.loadingButton.stop($buttons);
+        }
+    }
+
+    function init() {
+        bulkAdd.init();
+
+        $(selectors.button).on('click', handleButtonClick);
+    }
+
+    return { init };
+})();
+
+$(document).ready(Wick.PackageBulkAdd.init);

package/src/js/page/ripple/postcode-checker.js

@@ -0,0 +1,83 @@
+import { isValidPostcodeField } from '../utils/validation';
+import { createBulkAddHelper, dispatchWindowEvent } from './bulk-add';
+
+var Wick = window.Wick || {};
+
+Wick.PostcodeChecker = (function () {
+    const POSTCODE_CHECK_AVAILABILITY_EVENT = 'postcodeCheckAviability';
+    const QUANTITY = 1;
+
+    const selectors = {
+        root: '.postcode-checker',
+        input: '.postcode-checker__input',
+        button: '.postcode-checker__button',
+        productCodeInput: '.pdp-price input[name=productCodePost]',
+    };
+
+    const modifiers = {
+        hasError: 'postcode-checker--error',
+    };
+
+    const bulkAdd = createBulkAddHelper({ productCodeSelector: selectors.productCodeInput });
+
+    function checkPostcodeAvailability(postcode) {
+        const payload = { postcode, productCode: bulkAdd.getProductCode(), quantity: QUANTITY };
+
+        return dispatchWindowEvent(POSTCODE_CHECK_AVAILABILITY_EVENT, payload);
+    }
+
+    async function bulkAddForPostcode(postcode) {
+        try {
+            await checkPostcodeAvailability(postcode);
+            bulkAdd.showBulkAddResult(await bulkAdd.addProductToCart(postcode));
+            Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        } catch {
+            bulkAdd.showBulkAddFailed();
+        }
+    }
+
+    function isPostcodeValid($component, $postcodeInput) {
+        const isValid = isValidPostcodeField($postcodeInput.val());
+        $component.toggleClass(modifiers.hasError, !isValid);
+        console.log({ isValid, val: $postcodeInput.val() });
+        return isValid;
+    }
+
+    function handleSubmitClick($component, $postcodeInput, $submitButton) {
+        if (
+            bulkAdd.loadingButton.isLoading($submitButton) ||
+            !isPostcodeValid($component, $postcodeInput)
+        ) {
+            return;
+        }
+
+        bulkAdd.loadingButton.start($submitButton);
+
+        const postcode = $postcodeInput.val();
+
+        bulkAddForPostcode(postcode).finally(function () {
+            bulkAdd.loadingButton.stop($submitButton);
+        });
+    }
+
+    function init() {
+        bulkAdd.init();
+
+        $(selectors.root).each(function () {
+            const $component = $(this);
+            const $postcodeInput = $component.find(selectors.input);
+            const $submitButton = $component.find(selectors.button);
+
+            $component.removeClass(modifiers.hasError);
+
+            $submitButton.on('click', function (e) {
+                e.preventDefault();
+                handleSubmitClick($component, $postcodeInput, $submitButton);
+            });
+        });
+    }
+
+    return { init };
+})();
+
+$(document).ready(Wick.PostcodeChecker.init);

package/src/js/page/ripple/thumb-gallery.js

@@ -0,0 +1,236 @@
+var Wick = window.Wick || {};
+
+Wick.ThumbGallery = (function () {
+    const IMG_BREAKPOINTS = [
+        { media: '(max-width: 576px)', w: 576, h: 324 },
+        { media: '(max-width: 768px)', w: 510, h: 287 },
+        { media: '(max-width: 992px)', w: 310, h: 174 },
+    ];
+
+    const MAIN_DEFAULT = { w: 710, h: 399 };
+    const THUMB = { w: 100, h: 56 };
+
+    function getMediaDomain() {
+        return (typeof window !== 'undefined' && window.mediaDomain) || 'media.wickes.co.uk';
+    }
+
+    function getProductName() {
+        return (typeof window !== 'undefined' && window.pdpProduct && window.pdpProduct.name) || '';
+    }
+
+    function getBaseUrl(customDomain) {
+        const domain = customDomain || getMediaDomain();
+        const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+        return `https://${cleanDomain}/image/upload/`;
+    }
+
+    function buildCloudinaryUrl(publicId, w, h, baseUrl) {
+        const base = baseUrl || getBaseUrl();
+        const cleanId = String(publicId).replace(/^\/+/, '');
+        const transforms = `b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_${h},q_auto:good,w_${w}`;
+        return `${base}${transforms}/c_pad,h_${h},w_${w}/v1/${cleanId}?pgw=1`;
+    }
+
+    function parseIdentifiers(hybrisString) {
+        if (Array.isArray(hybrisString)) {
+            return hybrisString.filter(Boolean);
+        }
+        if (!hybrisString || typeof hybrisString !== 'string') {
+            return [];
+        }
+        const trimmed = hybrisString.trim();
+        const content = trimmed.startsWith('[') && trimmed.endsWith(']')
+            ? trimmed.slice(1, -1)
+            : trimmed;
+
+        return content
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+    }
+
+    function renderMainSlide(src, sourcesHtml = '') {
+        const productName = getProductName();
+        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
+          <picture>
+            ${sourcesHtml}
+            <img class="swiper-slide-main" src="${src}" alt="${productName}">
+          </picture>
+        </div>`;
+    }
+
+    function renderThumbSlide(src) {
+        const productName = getProductName();
+        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
+          <img class="swiper-slide-thumbs" src="${src}" alt="${productName}">
+        </div>`;
+    }
+
+    function generateCloudinaryMainSlide(publicId, baseUrl) {
+        const sourcesHtml = IMG_BREAKPOINTS.map(
+            (bp) => `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h, baseUrl)}" media="${bp.media}">`
+        ).join('\n            ');
+        const fallbackSrc = buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h, baseUrl);
+        return renderMainSlide(fallbackSrc, sourcesHtml);
+    }
+
+    function generateCloudinaryThumbSlide(publicId, baseUrl) {
+        const src = buildCloudinaryUrl(publicId, THUMB.w, THUMB.h, baseUrl);
+        return renderThumbSlide(src);
+    }
+
+    const SELECTORS = {
+        galleryCarousel: '.thumb-gallery',
+        swiperContainerMain: '.swiper-container-main',
+        swiperContainerThumbs: '.swiper-container-thumbs',
+        swiperMainWrapper: '.swiper-container-main .swiper-wrapper',
+        swiperThumbsWrapper: '.swiper-container-thumbs .swiper-wrapper',
+        nextBtn: '.thumb-gallery__next-btn',
+        prevBtn: '.thumb-gallery__prev-btn',
+        thumbNextBtn: '.swiper-container-thumbs__next-btn',
+        thumbPrevBtn: '.swiper-container-thumbs__prev-btn',
+        swiperSlide: '.swiper-slide',
+        activeThumbClass: 'swiper-true-active',
+    };
+
+    const THUMBS_SWIPER_CONFIG = {
+        spaceBetween: 8,
+        slidesPerView: 8,
+        watchSlidesVisibility: true,
+        watchSlidesProgress: true,
+        watchOverflow: true,
+        observer: true,
+        observeParents: true,
+        simulateTouch: false,
+    };
+
+    const THUMBS_BREAKPOINTS = {
+        991: { slidesPerView: 5 },
+        767: { allowTouchMove: true, slidesPerView: 5 },
+    };
+
+    const MAIN_SWIPER_CONFIG = {
+        speed: 400,
+        slidesPerView: 1,
+        loop: true,
+        observer: true,
+        observeParents: true,
+        simulateTouch: false,
+    };
+
+    function handleThumbClick(swiper) {
+        return function () {
+            const clickedIndex = $(this).index();
+            if (swiper.params && swiper.params.loop) {
+                swiper.slideToLoop(clickedIndex);
+            } else {
+                swiper.slideTo(clickedIndex);
+            }
+        };
+    }
+
+    function updateActiveThumbnail(swiper, thumbsSwiper) {
+        const activeIndex = swiper.realIndex;
+        thumbsSwiper.slides.removeClass(SELECTORS.activeThumbClass);
+        thumbsSwiper.slides.eq(activeIndex).addClass(SELECTORS.activeThumbClass);
+    }
+
+    function getThumbsConfig($thumbNextBtn, $thumbPrevBtn) {
+        return {
+            ...THUMBS_SWIPER_CONFIG,
+            navigation: {
+                nextEl: $thumbNextBtn[0],
+                prevEl: $thumbPrevBtn[0],
+            },
+            breakpoints: { ...THUMBS_BREAKPOINTS },
+        };
+    }
+
+    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange, count) {
+        return {
+            ...MAIN_SWIPER_CONFIG,
+            loop: count > 1,
+            simulateTouch: count > 1,
+            navigation: {
+                nextEl: $nextBtn[0],
+                prevEl: $prevBtn[0],
+            },
+            thumbs: { swiper: thumbsSwiper },
+            on: { slideChange: onSlideChange },
+        };
+    }
+
+    function initializeCarousel($slider, ids, baseUrl, missingImage) {
+        const isMissing = ids.length === 0 && Boolean(missingImage);
+        if (ids.length === 0 && !missingImage) {
+            return;
+        }
+
+        const $container = $slider.find(SELECTORS.swiperContainerMain);
+        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
+        if (!$container.length || !$thumbContainer.length) {
+            return;
+        }
+
+        if ($container[0].swiper) {
+            $container[0].swiper.destroy(true, true);
+        }
+        if ($thumbContainer[0].swiper) {
+            $thumbContainer[0].swiper.destroy(true, true);
+        }
+
+        const total = isMissing ? 1 : ids.length;
+        $slider.attr('data-length', total);
+
+        if (isMissing) {
+            $slider.addClass('thumb-gallery--missing-image');
+            $slider.find(SELECTORS.swiperMainWrapper).html(renderMainSlide(missingImage));
+            $slider.find(SELECTORS.swiperThumbsWrapper).html(renderThumbSlide(missingImage));
+        } else {
+            $slider.removeClass('thumb-gallery--missing-image');
+            $slider
+                .find(SELECTORS.swiperMainWrapper)
+                .html(ids.map((id) => generateCloudinaryMainSlide(id, baseUrl)).join('\n'));
+            $slider
+                .find(SELECTORS.swiperThumbsWrapper)
+                .html(ids.map((id) => generateCloudinaryThumbSlide(id, baseUrl)).join('\n'));
+        }
+
+        const $nextBtn = $slider.find(SELECTORS.nextBtn);
+        const $prevBtn = $slider.find(SELECTORS.prevBtn);
+        const $thumbNextBtn = $slider.find(SELECTORS.thumbNextBtn);
+        const $thumbPrevBtn = $slider.find(SELECTORS.thumbPrevBtn);
+
+        const thumbsSwiper = new Swiper(
+            $thumbContainer[0],
+            getThumbsConfig($thumbNextBtn, $thumbPrevBtn)
+        );
+
+        const swiper = new Swiper(
+            $container[0],
+            getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
+                updateActiveThumbnail(swiper, thumbsSwiper);
+            }, total)
+        );
+
+        $thumbContainer
+            .off('click', SELECTORS.swiperSlide)
+            .on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+
+        updateActiveThumbnail(swiper, thumbsSwiper);
+    }
+
+    function init(hybrisString, options = {}) {
+        const ids = parseIdentifiers(hybrisString);
+
+        const opts = typeof options === 'string' ? { mediaDomain: options } : (options || {});
+        const baseUrl = getBaseUrl(opts.mediaDomain);
+        const missingImage = opts.missingImage || '';
+
+        $(SELECTORS.galleryCarousel).each(function (_, slider) {
+            initializeCarousel($(slider), ids, baseUrl, missingImage);
+        });
+    }
+
+    return { init };
+})();

package/src/js/page/utils/validation.js

@@ -148,7 +148,7 @@ export function validatePostcode(element, ifConvert) {
 export function isValidPostcodeField(value) {
     const transformedValue = value.toUpperCase().replaceAll(' ', '');
     const regExp = new RegExp(
-        '^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))[0-9][A-BD-HJLNP-UW-Z]{2})$'
+        '^((GIR0AA)|((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))[0-9][A-BD-HJLNP-UW-Z]{2}))$'
     );
     return transformedValue.replace(/\s+/g, '').length > 4 && regExp.test(transformedValue);
 }

package/src/page_bathroom-plp-vat.html

@@ -0,0 +1,81 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true bundle="plp" switch-vat=true}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+    {{#content "body"}}
+        <main>
+            <div class="package-plp container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Bathroom Suite Packages
+                    </h1>
+                    {{> srp-injected}}
+                </div>
+
+                {{> quick-filter filterData=quickFilter.iconAndText_5}}
+
+                <div class="package-plp__container">
+                    <aside class="package-plp__search-filter">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="package-plp__content products-list-v2">
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="24 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
+                            </div>
+                        </div>
+
+                        <input id="numberOfPagesPLP" value="2" type="hidden">
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="package-plp__cards">
+                            {{> package-card cards=ripple-plp.cards}}
+                            {{#if search-result_v2.product-banner}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.bloomreach-media-banner}}
+                                {{#each search-result_v2.bloomreach-media-banner}}
+                                    {{>card_bloomreach_media_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                        </div>
+
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/page/quick-filter.js"></script>
+    {{/content}}
+{{/extend}}

package/src/page_bathroom-plp-without-load-more.html

@@ -0,0 +1,83 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true bundle="plp"}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+    <link type="text/css" rel="stylesheet" href="https://static-content-develop.dev.wickes.co.uk/whisk/kitchen-static/css/kitchen-content.css">
+{{/content}}
+    {{#content "body"}}
+        <main>
+            <div class="package-plp container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Bathroom Suite Packages
+                    </h1>
+                    {{> srp-injected}}
+                    {{> sponsor-top-banner }}
+                </div>
+
+                {{> quick-filter filterData=quickFilter.iconAndText_5}}
+
+                <div class="hybris-slot">
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                     <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+
+                <div class="package-plp__container">
+                    <aside class="package-plp__search-filter">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="package-plp__content products-list-v2">
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="24 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
+                            </div>
+                        </div>
+
+                        <input id="numberOfPagesPLP" value="1" type="hidden">
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="package-plp__cards">
+                            {{> package-card cards=(limitArray ripple-plp.cards 7)}}
+                        </div>
+
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="hybris-slot">
+                    <div class="banner-emulation" style="height: 398px; min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+            </div>
+
+            {{> legal-info}}
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/page/quick-filter.js"></script>
+    {{/content}}
+{{/extend}}