wickes-css2 2.113.0 → 2.116.0

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