wickes-css2 2.113.0-ripple.7 → 2.113.0

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

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

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

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

@@ -1,168 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.ThumbGallery = (function () {
-    const BASE_URL = 'https://media.wickes.co.uk/image/upload/';
-    const productName = window.pdpProduct && window.pdpProduct.name ? window.pdpProduct.name : '';
-
-    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 buildCloudinaryUrl(publicId, w, h) {
-        const transforms = `b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_${h},q_auto:good,w_${w}`;
-        return `${BASE_URL}${transforms}/c_pad,h_${h},w_${w}/v1/${publicId}?pgw=1`;
-    }
-
-    function parseIdentifiers(hybrisString) {
-        return hybrisString
-            .trim()
-            .slice(1, hybrisString.length - 1)
-            .split(',')
-            .map((s) => s.trim())
-            .filter(Boolean);
-    }
-
-    function generateMainSlideHtml(publicId) {
-        const sources = IMG_BREAKPOINTS.map(
-            (bp) =>
-                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h)}" media="${bp.media}">`
-        ).join('\n            ');
-
-        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
-          <picture>
-            ${sources}
-            <img class="swiper-slide-main" src="${buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h)}" alt="${productName}">
-          </picture>
-        </div>`;
-    }
-
-    function generateThumbSlideHtml(publicId) {
-        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
-          <img class="swiper-slide-thumbs" src="${buildCloudinaryUrl(publicId, THUMB.w, THUMB.h)}" alt="${productName}">
-        </div>`;
-    }
-
-    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();
-            swiper.slideToLoop(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) {
-        return {
-            ...MAIN_SWIPER_CONFIG,
-            navigation: {
-                nextEl: $nextBtn[0],
-                prevEl: $prevBtn[0],
-            },
-            thumbs: { swiper: thumbsSwiper },
-            on: { slideChange: onSlideChange },
-        };
-    }
-
-    function initializeCarousel($slider, ids) {
-        $slider.find(SELECTORS.swiperMainWrapper).html(ids.map(generateMainSlideHtml).join('\n'));
-        $slider
-            .find(SELECTORS.swiperThumbsWrapper)
-            .html(ids.map(generateThumbSlideHtml).join('\n'));
-
-        const $container = $slider.find(SELECTORS.swiperContainerMain);
-        const $nextBtn = $slider.find(SELECTORS.nextBtn);
-        const $prevBtn = $slider.find(SELECTORS.prevBtn);
-
-        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
-        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);
-            })
-        );
-
-        $thumbContainer.on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
-        updateActiveThumbnail(swiper, thumbsSwiper);
-    }
-
-    function init(hybrisString) {
-        const ids = parseIdentifiers(hybrisString);
-
-        if (ids.length < 2) {
-            return;
-        }
-
-        $(SELECTORS.galleryCarousel).each(function (_, slider) {
-            initializeCarousel($(slider), ids);
-        });
-    }
-
-    return { init };
-})();

package/src/page_bathroom-plp-vat.html

@@ -1,81 +0,0 @@
-{{#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">
-                        <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

@@ -1,83 +0,0 @@
-{{#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">
-                        <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}}

package/src/page_bathroom-plp.html

@@ -1,98 +0,0 @@
-{{#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">
-                        <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>
-
-            <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}}