wickes-css2 2.111.0-complete-your-project.9 → 2.111.0-develop.2

package/build/js/page/utils/create-loading-button.js

@@ -1,37 +0,0 @@
-export function createLoadingButton(config = {}) {
-    const settings = {
-        text: '.loading-button__text',
-        loader: '.loading-button__loader',
-        loadingClass: 'loading-button--loading',
-        ...config,
-    };
-
-    function setLoading($button, isLoading) {
-        if (!$button.length) {
-            return;
-        }
-
-        $button.toggleClass(settings.loadingClass, isLoading);
-        $button.find(settings.text).toggleClass('d-none', isLoading);
-        $button.find(settings.loader).toggleClass('d-none', !isLoading);
-    }
-
-    function start($button) {
-        setLoading($button, true);
-    }
-
-    function stop($button) {
-        setLoading($button, false);
-    }
-
-    function isLoading($button) {
-        return $button.hasClass(settings.loadingClass);
-    }
-
-    return {
-        setLoading,
-        start,
-        stop,
-        isLoading,
-    };
-}

package/build/js/page/utils/create-toast.js

@@ -1,79 +0,0 @@
-export function createToast(config = {}) {
-    const settings = {
-        containerClass: 'toast-container',
-        toastClass: 'toast',
-        closeSelector: '.notification__close',
-        backdropClass: 'modal-backdrop--toast',
-        duration: 3000,
-        template: null,
-        getData(type, text) {
-            return {
-                text,
-                classModifier: `${settings.toastClass} notification_${type}`,
-                success: type === 'success',
-                warning: type === 'warning',
-                error: type === 'error',
-            };
-        },
-        ...config,
-    };
-
-    let closeTimer = null;
-
-    function clearCloseTimer() {
-        if (closeTimer) {
-            window.clearTimeout(closeTimer);
-            closeTimer = null;
-        }
-    }
-
-    function hide() {
-        clearCloseTimer();
-
-        $(`.${settings.containerClass}`).remove();
-        $(`.${settings.backdropClass}`).removeClass(settings.backdropClass);
-
-        if (window.Wick && Wick.Backdrop) {
-            Wick.Backdrop.hide();
-        }
-
-        $(document).off('click.toast');
-    }
-
-    function show({ type = 'success', text = '' }) {
-        if (!settings.template) {
-            return;
-        }
-
-        hide();
-
-        const toastHtml = settings.template(settings.getData(type, text));
-
-        if (window.Wick && Wick.Backdrop) {
-            Wick.Backdrop.show();
-            $('.modal-backdrop').addClass(settings.backdropClass);
-        }
-
-        $('body').append(`<div class="${settings.containerClass}">${toastHtml}</div>`);
-
-        $(`.${settings.containerClass}`)
-            .off('click.toastClose', settings.closeSelector)
-            .on('click.toastClose', settings.closeSelector, function (event) {
-                event.preventDefault();
-                hide();
-            });
-
-        $(document)
-            .off('click.toast')
-            .on('click.toast', `.${settings.backdropClass}`, function () {
-                hide();
-            });
-
-        closeTimer = window.setTimeout(hide, settings.duration);
-    }
-
-    return {
-        show,
-        hide,
-    };
-}

package/build/js/page/utils/custom-dropdown.js

@@ -1,80 +0,0 @@
-export function createDropdown(config) {
-    const settings = {
-        root: '[data-dropdown]',
-        toggle: '[data-dropdown-toggle]',
-        value: '[data-dropdown-value]',
-        option: '[data-dropdown-option]',
-        openClass: 'dropdown--open',
-        selectedClass: 'dropdown__option--selected',
-        selectedValueData: 'selected-value',
-        ariaExpandedAttr: 'aria-expanded',
-        ariaSelectedAttr: 'aria-selected',
-        namespace: 'customDropdown',
-        onSelect: function () {},
-        ...config,
-    };
-
-    function closeAll() {
-        $(settings.root).each(function () {
-            const $dropdown = $(this);
-            const $toggle = $dropdown.find(settings.toggle);
-
-            $dropdown.removeClass(settings.openClass);
-            $toggle.attr(settings.ariaExpandedAttr, 'false');
-        });
-    }
-
-    function selectOption($dropdown, $option) {
-        const $value = $dropdown.find(settings.value);
-        const $options = $dropdown.find(settings.option);
-        const selectedValue = $option.attr('data-value') || '';
-
-        $options.removeClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'false');
-        $option.addClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'true');
-
-        if ($value.length) {
-            $value.text($option.text().trim());
-        }
-
-        $dropdown.data(settings.selectedValueData, selectedValue);
-
-        settings.onSelect($dropdown, $option, selectedValue);
-    }
-
-    function bind() {
-        $(document).off(`click.${settings.namespace}`);
-        $(document).on(`click.${settings.namespace}`, function (event) {
-            const $target = $(event.target);
-            const $toggle = $target.closest(settings.toggle);
-            const $option = $target.closest(settings.option);
-            const $dropdown = $target.closest(settings.root);
-
-            if (!$dropdown.length) {
-                closeAll();
-                return;
-            }
-
-            if ($toggle.length) {
-                const isOpen = $dropdown.hasClass(settings.openClass);
-
-                closeAll();
-
-                $dropdown.toggleClass(settings.openClass, !isOpen);
-                $toggle.attr(settings.ariaExpandedAttr, String(!isOpen));
-
-                return;
-            }
-
-            if ($option.length) {
-                selectOption($dropdown, $option);
-                closeAll();
-            }
-        });
-    }
-
-    return {
-        bind,
-        closeAll,
-        selectOption,
-    };
-}

package/src/components/bloomreach/complete-card-dropdown.hbs

@@ -1,47 +0,0 @@
-<div class="complete-card-dropdown" data-complete-card-dropdown>
-  <button
-      class="complete-card-dropdown__toggle"
-      type="button"
-      aria-haspopup="listbox"
-      aria-expanded="false"
-      data-complete-card-dropdown-toggle
-  >
-        <span class="complete-card-dropdown__value" data-complete-card-dropdown-value>
-          {{#if selectedLabel}}{{selectedLabel}}{{else}}{{placeholder}}{{/if}}
-        </span>
-
-    <span class="complete-card-dropdown__icon">
-            <i class="fas fa-chevron-down"></i>
-        </span>
-  </button>
-
-  <div class="complete-card-dropdown__menu" role="listbox">
-    <button
-        class="complete-card-dropdown__option {{#unless selectedValue}}complete-card-dropdown__option--selected{{/unless}}"
-        type="button"
-        role="option"
-        aria-selected="{{#unless selectedValue}}true{{else}}false{{/unless}}"
-        data-value=""
-        data-complete-card-dropdown-option
-    >
-      {{placeholder}}
-    </button>
-
-    {{#each options}}
-      <button
-          class="complete-card-dropdown__option {{#if selected}}complete-card-dropdown__option--selected{{/if}}"
-          type="button"
-          role="option"
-          aria-selected="{{#if selected}}true{{else}}false{{/if}}"
-          data-value="{{value}}"
-          data-complete-card-dropdown-option
-      >
-        {{label}}
-      </button>
-    {{/each}}
-  </div>
-
-  <div class="complete-card-dropdown__error">
-    Select required variant
-  </div>
-</div>

package/src/components/bloomreach/complete-card-skeleton.hbs

@@ -1,19 +0,0 @@
-<div class="card complete-card complete-card--skeleton ssc">
-    <div class="complete-card__inner">
-        <div class="complete-card__img-wrap">
-            <div class="ssc-square complete-card__img"></div>
-        </div>
-        <div class="complete-card__content">
-            <div class="complete-card__header">
-                <div class="ssc-line complete-card__skeleton-title"></div>
-                <div class="ssc-line complete-card__skeleton-title-short"></div>
-                <div class="ssc-line complete-card__skeleton-reviews"></div>
-            </div>
-            <div class="ssc-line complete-card__skeleton-stepper"></div>
-            <div class="complete-card__bottom">
-                <div class="ssc-line complete-card__skeleton-price"></div>
-                <div class="ssc-line complete-card__skeleton-delivery"></div>
-            </div>
-        </div>
-    </div>
-</div>

package/src/components/bloomreach/complete-card.hbs

@@ -1,138 +0,0 @@
-<div class="card complete-card {{modification}}" data-product-code="{{code}}">
-  {{#if badge}}
-    <div
-        class="complete-card__badge"
-        style="background-color: {{badge.color}}; color: {{badge.textColor}};"
-    >
-      {{badge.text}}
-    </div>
-  {{/if}}
-
-  <div class="complete-card__inner">
-    <div class="complete-card__select">
-      {{> checkbox id=checkboxId action="true" checked=checked name=name}}
-    </div>
-
-    <div class="complete-card__img-wrap">
-      {{#if image.url}}
-        <img class="complete-card__img" src="{{image.url}}" alt="{{image.altText}}">
-      {{/if}}
-    </div>
-
-    <div class="complete-card__content">
-      <div class="complete-card__header">
-        <a href="{{url}}" target="_blank" class="complete-card__title">
-          {{name}}
-        </a>
-
-        <div class="complete-card__reviews">
-          <div class="rating-bg">
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-
-            <div class="rating-overlay"
-                 data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}">
-                                <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-            </div>
-
-            <span class="complete-card__reviews-count">
-                (<span class="complete-card__reviews-count-value">{{externalReviewCount}}</span>)
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="complete-card__options">
-        {{#if dropdownOptions.length}}
-          {{> bloomreach/complete-card-dropdown
-              id=checkboxId
-              placeholder="Select option"
-              options=dropdownOptions
-              selectedValue=selectedDropdownValue
-              selectedLabel=selectedDropdownLabel
-              error=dropdownError
-          }}
-        {{/if}}
-      </div>
-
-      <div class="complete-card__count-stepper count-stepper">
-        <label for="card-count-{{checkboxId}}" class="quantity-label">
-          Quantity:
-        </label>
-
-        <input
-            type="text"
-            inputmode="numeric"
-            required=""
-            pattern="[0-9]*\d"
-            id="card-count-{{checkboxId}}"
-            class="tbx tbx_quantity"
-            value="1"
-            readonly
-        >
-      </div>
-
-      <div class="complete-card__bottom">
-        <div class="complete-card__price {{#if wasPriceFormatted}}complete-card__price_sale{{/if}}">
-          {{#if showFromPrice}}
-            <div class="complete-card__price_from">From</div>
-          {{/if}}
-
-          {{#if wasPriceFormatted}}
-            <div class="complete-card__price-value">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{incVatWasPriceFormatted}}</span>
-                <span class="excluding-vat-inherit">{{excVatWasPriceFormatted}}</span>
-              {{else}}
-                {{wasPriceFormatted}}
-              {{/if}}
-            </div>
-
-            <div class="complete-card__price__sale-price">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{{incVatFormattedValue}}}</span>
-                <span class="excluding-vat-inherit">{{{excVatFormattedValue}}}</span>
-              {{else}}
-                {{{price.formattedValue}}}
-              {{/if}}
-            </div>
-          {{else}}
-            <div class="complete-card__price-value">
-              {{#if switch-vat}}
-                <span class="including-vat-inherit">{{{incVatFormattedValue}}}</span>
-                <span class="excluding-vat-inherit">{{{excVatFormattedValue}}}</span>
-              {{else}}
-                {{{price.formattedValue}}}
-              {{/if}}
-            </div>
-          {{/if}}
-
-          {{#if switch-vat}}
-            <span class="complete-card__vat-label">
-              <span class="including-vat-inherit">Inc. VAT</span>
-              <span class="excluding-vat-inherit">Exc. VAT</span>
-            </span>
-          {{/if}}
-        </div>
-
-        <p class="complete-card__delivery">Excluding delivery</p>
-      </div>
-    </div>
-  </div>
-</div>

package/src/components/bloomreach/complete-divider.hbs

@@ -1,3 +0,0 @@
-<div class="complete-widget__divider">
-  <i class="fal fa-plus"></i>
-</div>

package/src/components/bloomreach/complete-summary-skeleton.hbs

@@ -1,12 +0,0 @@
-<div class="complete-widget__summary complete-widget__summary--skeleton ssc">
-    <div class="complete-widget__summary-wrapper">
-        <div class="complete-widget__total">
-            <div class="ssc-line complete-widget__skeleton-label"></div>
-            <div class="ssc-line complete-widget__skeleton-price"></div>
-        </div>
-        <div class="complete-widget__cta">
-            <div class="ssc-square complete-widget__skeleton-cta"></div>
-        </div>
-    </div>
-    <div class="ssc-line complete-widget__skeleton-offer"></div>
-</div>

package/src/components/bloomreach/complete-summary.hbs

@@ -1,43 +0,0 @@
-<div class="complete-widget__summary">
-  <div class="complete-widget__summary-wrapper">
-    <div class="complete-widget__total">
-      <div class="complete-widget__label">Total price:</div>
-
-      <div class="complete-widget__price">
-        <div class="complete-widget__price-value">
-          {{#if switch-vat}}
-            <span class="including-vat-inherit">£0.00</span>
-            <span class="excluding-vat-inherit">£0.00</span>
-          {{else}}
-            £0.00
-          {{/if}}
-        </div>
-        <div class="complete-widget__sale-price" style="display: none;">
-          {{#if switch-vat}}
-            <span class="including-vat-inherit"></span>
-            <span class="excluding-vat-inherit"></span>
-          {{/if}}
-        </div>
-        {{#if switch-vat}}
-          <span class="complete-widget__vat-label including-vat-inherit">Inc. VAT</span>
-          <span class="complete-widget__vat-label excluding-vat-inherit">Exc. VAT</span>
-        {{/if}}
-      </div>
-    </div>
-
-    <div class="complete-widget__cta">
-      {{> button
-          text="Add selected 1 product to basket"
-          full=true
-          action=true
-          type="button"
-          showLoader=true
-          loaderModifier="complete-widget__button-loader"
-      }}
-    </div>
-  </div>
-
-  <p class="complete-widget__offer">
-    *Any offers/discounts will be applied in basket
-  </p>
-</div>

package/src/components/bloomreach/complete-wrapper.hbs

@@ -1 +0,0 @@
-<div class="complete-widget__wrapper" data-complete-widget-wrapper></div>

package/src/components/bloomreach/complete-your-project.hbs

@@ -1,21 +0,0 @@
-<div class="complete-widget">
-  <h3 class="complete-widget__title text-center">
-    {{#if title}}{{title}}{{else}}Complete your project{{/if}}
-  </h3>
-
-  <div class="complete-widget__content" data-complete-widget-content>
-    <div class="complete-widget__wrapper">
-      {{> bloomreach/complete-card-skeleton}}
-
-      <div class="complete-widget__divider">
-        <i class="fal fa-plus"></i>
-      </div>
-
-      {{> bloomreach/complete-card-skeleton}}
-      {{> bloomreach/complete-card-skeleton}}
-      {{> bloomreach/complete-card-skeleton}}
-    </div>
-
-    {{> bloomreach/complete-summary-skeleton}}
-  </div>
-</div>

package/src/js/emulation/bloomreach-widget-calculations.js

@@ -1,140 +0,0 @@
-let addToCartResponseIndex = 0;
-
-function formatBundlePrice(value) {
-    return new Intl.NumberFormat('en-GB', {
-        style: 'currency',
-        currency: 'GBP',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-    }).format(value);
-}
-
-function getPriceData(product) {
-    return product.price || product.displayPrice || {};
-}
-
-function getBundleProductPrice(product) {
-    const price = getPriceData(product);
-
-    return typeof price.value === 'number' ? price.value : 0;
-}
-
-function getBundleProductWasPrice(product) {
-    const price = getPriceData(product);
-
-    return typeof price.wasPrice === 'number' ? price.wasPrice : null;
-}
-
-function getBundleProductExcVatPrice(product) {
-    const priceExcVat = product.displayPriceExclusiveVat || product.priceExclusiveVat;
-    if (priceExcVat && typeof priceExcVat.value === 'number') return priceExcVat.value;
-    const price = getPriceData(product);
-    if (typeof price.value !== 'number') return 0;
-    const vatRate = price.vatRatePercentage || 20;
-    return price.value / (1 + vatRate / 100);
-}
-
-function getBundleProductExcVatWasPrice(product) {
-    const display = product.displayPriceExclusiveVat;
-    const raw = product.priceExclusiveVat;
-    if (display && typeof display.wasPrice === 'number') return display.wasPrice;
-    if (raw && typeof raw.wasPrice === 'number') return raw.wasPrice;
-    const price = getPriceData(product);
-    if (typeof price.wasPrice !== 'number') return null;
-    const vatRate = price.vatRatePercentage || 20;
-    return price.wasPrice / (1 + vatRate / 100);
-}
-
-function calculateBundleTotal(entries) {
-    let totalPrice = 0;
-    let totalWasPrice = 0;
-    let totalExcVatPrice = 0;
-    let totalExcVatWasPrice = 0;
-    let hasWasPrice = false;
-
-    entries.forEach(function (entry) {
-        const quantity = entry.quantity || 1;
-        const price = getBundleProductPrice(entry.product);
-        const wasPrice = getBundleProductWasPrice(entry.product);
-        const excVatPrice = getBundleProductExcVatPrice(entry.product);
-        const excVatWasPrice = getBundleProductExcVatWasPrice(entry.product);
-
-        totalPrice += price * quantity;
-        totalWasPrice += (wasPrice || price) * quantity;
-        totalExcVatPrice += excVatPrice * quantity;
-        totalExcVatWasPrice += (excVatWasPrice || excVatPrice) * quantity;
-
-        if (wasPrice) {
-            hasWasPrice = true;
-        }
-    });
-
-    return {
-        totalPrice: formatBundlePrice(totalPrice),
-        totalWasPrice: hasWasPrice ? formatBundlePrice(totalWasPrice) : null,
-        totalExcVatPrice: formatBundlePrice(totalExcVatPrice),
-        totalExcVatWasPrice: hasWasPrice ? formatBundlePrice(totalExcVatWasPrice) : null,
-    };
-}
-
-function bindCalculateProductBundleTotalEvent() {
-    $(window).on('calculateProductBundleTotal', function ({ detail: { payload, resolve } }) {
-        const entries = payload.entries || [];
-
-        setTimeout(function () {
-            resolve(calculateBundleTotal(entries));
-        }, 200);
-    });
-}
-
-function getAddProductBundleResponse() {
-    const responses = [
-        {
-            bulkAddToCartData: {
-                messageType: 'success',
-                messageText: 'Selected product(s) were added to basket',
-            },
-        },
-        {
-            bulkAddToCartData: {
-                messageType: 'warning',
-                messageText: 'Selected product(s) were partially added to basket',
-            },
-        },
-        {
-            bulkAddToCartData: {
-                messageType: 'error',
-                messageText: 'Selected product(s) were not added to basket',
-            },
-        },
-    ];
-
-    const response = responses[addToCartResponseIndex % responses.length];
-
-    addToCartResponseIndex++;
-
-    return response;
-}
-
-function bindAddProductBundleToCartEvent() {
-    $(window).on('bulkAddToCart', function ({ originalEvent }) {
-        const entries = originalEvent.detail.entries || [];
-
-        setTimeout(function () {
-            const response = getAddProductBundleResponse(entries);
-
-            window.dispatchEvent(
-                new CustomEvent('productAddedToCart', {
-                    detail: {
-                        bulkAddToCartData: response.bulkAddToCartData,
-                    },
-                })
-            );
-        }, 1200);
-    });
-}
-
-$(document).ready(function () {
-    bindCalculateProductBundleTotalEvent();
-    bindAddProductBundleToCartEvent();
-});

package/src/js/emulation/bloomreach-widget-loading.js

@@ -1,11 +0,0 @@
-var Wick = window.Wick || {};
-
-$(document).ready(function () {
-    window.setTimeout(function () {
-        const $container = $('[data-complete-widget]');
-        const contextKey = $container.data('context-key');
-        const payloadData = Wick.FEMock.dataBloomreach[contextKey];
-
-        Wick.BloomreachWidget.init(payloadData);
-    }, 3000);
-});