wickes-css2 2.113.0-develop.3 → 2.113.0-develop.6

package/src/js/page/bloomreach-widget/complete-your-project/cards.js

@@ -0,0 +1,308 @@
+import { createDropdown } from '../../utils/custom-dropdown';
+import {
+    COMPLETE_YOUR_PROJECT_EL as EL,
+    COMPLETE_YOUR_PROJECT_TEMPLATES as TEMPLATES,
+} from './config';
+import { createCompleteYourProjectQuantity } from './quantity';
+
+export function createCompleteYourProjectCards({
+    model,
+    presenter,
+    view,
+    tracking,
+    calculateTotal,
+}) {
+    let dropdownCurrent = {};
+
+    function resetDropdownState() {
+        dropdownCurrent = {};
+    }
+
+    function getDropdownCard($dropdown) {
+        return $dropdown.closest(EL.completeCard);
+    }
+
+    function getDropdownCheckbox($dropdown) {
+        return getDropdownCard($dropdown).find(EL.cardCheckbox);
+    }
+
+    function setDropdownCheckboxState($dropdown, isChecked, shouldTriggerChange = true) {
+        const $checkbox = getDropdownCheckbox($dropdown);
+
+        if (!$checkbox.length) {
+            return;
+        }
+
+        $checkbox.prop('checked', isChecked);
+
+        if (shouldTriggerChange) {
+            $checkbox.trigger('change');
+        }
+    }
+
+    function setDropdownError($dropdown, hasError) {
+        $dropdown.toggleClass(EL.dropdownErrorClass, hasError);
+    }
+
+    function validateDropdown($dropdown, options = {}) {
+        const isValid = Boolean($dropdown.data(EL.selectedValueData));
+
+        setDropdownError($dropdown, !isValid);
+
+        if (!isValid && options.uncheck) {
+            setDropdownCheckboxState($dropdown, false, false);
+            getDropdownCard($dropdown).removeClass(EL.selectedClass);
+        }
+
+        return isValid;
+    }
+
+    function validateCardDropdown($card, options = {}) {
+        const $dropdown = $card.find(EL.dropdownRoot);
+
+        if (!$dropdown.length) {
+            return true;
+        }
+
+        return validateDropdown($dropdown, options);
+    }
+
+    function reinitCard($card) {
+        $card.find(EL.countBtn).remove();
+        quantity.initQuantityFields($card);
+        Wick.BloomreachWidget.drawRating($card);
+        view.alignCardBlocks($card.closest(EL.completeWidget));
+        Wick.BloomreachWidget.reapplyVatDisplay();
+    }
+
+    function replaceCard($card, recommendationIndex, product, renderOptions = {}, state = {}) {
+        const productData = presenter.getProductRenderData(
+            product,
+            recommendationIndex,
+            renderOptions
+        );
+        const $newCard = $(TEMPLATES.card(productData));
+
+        $newCard.attr(EL.recommendationIndexAttr, recommendationIndex);
+        $newCard.toggleClass(EL.selectedClass, Boolean(state.checked));
+
+        const $newDropdown = $newCard.find(EL.dropdownRoot);
+
+        if ($newDropdown.length && state.selectedValue) {
+            $newDropdown.data(EL.selectedValueData, state.selectedValue);
+        }
+
+        if (state.dropdownError) {
+            $newDropdown.addClass(EL.dropdownErrorClass);
+        }
+
+        $card.replaceWith($newCard);
+        $newCard.find(EL.cardCheckbox).prop('checked', Boolean(state.checked));
+        quantity.resetCardQuantity($newCard);
+        reinitCard($newCard);
+
+        return $newCard;
+    }
+
+    function replaceCardWithBaseProduct($dropdown, options = {}) {
+        const $card = getDropdownCard($dropdown);
+        const recommendationIndex = model.getRecommendationIndex($card);
+        const recommendation = model.getRecommendations()[recommendationIndex];
+
+        if (!recommendation || !recommendation.baseProduct) {
+            return null;
+        }
+
+        return replaceCard(
+            $card,
+            recommendationIndex,
+            recommendation.baseProduct,
+            {
+                dropdownError: options.dropdownError || false,
+                checked: false,
+            },
+            {
+                checked: false,
+                dropdownError: options.dropdownError || false,
+            }
+        );
+    }
+
+    function replaceCardWithVariant($dropdown, selectedValue) {
+        const $card = getDropdownCard($dropdown);
+        const recommendationIndex = model.getRecommendationIndex($card);
+        const recommendation = model.getRecommendations()[recommendationIndex];
+
+        if (!recommendation) {
+            return null;
+        }
+
+        const variantProduct = model.findVariantProduct(recommendation, selectedValue);
+
+        if (!variantProduct) {
+            return null;
+        }
+
+        return replaceCard(
+            $card,
+            recommendationIndex,
+            {
+                ...variantProduct,
+                variantOptions: recommendation.baseProduct.variantOptions,
+            },
+            {
+                fallbackProduct: recommendation.baseProduct,
+                checked: true,
+                selectedDropdownValue: selectedValue,
+            },
+            {
+                checked: true,
+                selectedValue,
+            }
+        );
+    }
+
+    function handleDropdownSelect($dropdown, selectedValue) {
+        const $card = getDropdownCard($dropdown);
+        const recommendationIndex = $card.attr(EL.recommendationIndexAttr);
+        const currentValue = dropdownCurrent[recommendationIndex];
+
+        if (`${currentValue}` === `${selectedValue}`) {
+            return;
+        }
+
+        dropdownCurrent[recommendationIndex] = selectedValue;
+
+        const $completeWidget = $dropdown.closest(EL.completeWidget);
+        const isPlaceholder = !selectedValue;
+
+        if (isPlaceholder) {
+            setDropdownError($dropdown, true);
+            setDropdownCheckboxState($dropdown, false, false);
+            replaceCardWithBaseProduct($dropdown, { dropdownError: true });
+
+            if ($completeWidget.length) {
+                calculateTotal($completeWidget);
+            }
+
+            return;
+        }
+
+        setDropdownError($dropdown, false);
+        setDropdownCheckboxState($dropdown, true, false);
+        replaceCardWithVariant($dropdown, selectedValue);
+
+        if ($completeWidget.length) {
+            calculateTotal($completeWidget);
+        }
+    }
+
+    function bindDropdowns() {
+        const dropdown = createDropdown({
+            root: EL.dropdownRoot,
+            toggle: EL.dropdownToggle,
+            value: EL.dropdownValue,
+            option: EL.dropdownOption,
+            openClass: EL.dropdownOpenClass,
+            selectedClass: EL.dropdownOptionSelectedClass,
+            namespace: 'bloomreachDropdown',
+            onSelect($dropdown, $option, selectedValue) {
+                handleDropdownSelect($dropdown, selectedValue);
+            },
+        });
+
+        dropdown.bind();
+    }
+
+    function bindCardSelection($root) {
+        const $firstCard = $root.find(EL.completeCard).first();
+
+        $firstCard.find(EL.cardCheckbox).prop('checked', true);
+        $firstCard.addClass(EL.selectedClass);
+
+        $root.off('change.bloomreachCardSelection', EL.cardCheckbox);
+        $root.on('change.bloomreachCardSelection', EL.cardCheckbox, function () {
+            const $checkbox = $(this);
+            const $card = $checkbox.closest(EL.completeCard);
+            const $dropdown = $card.find(EL.dropdownRoot);
+
+            if (!$checkbox.prop('checked') && $dropdown.hasClass(EL.dropdownErrorClass)) {
+                $card.removeClass(EL.selectedClass);
+                return;
+            }
+
+            if (
+                $checkbox.prop('checked') &&
+                !validateCardDropdown($card, {
+                    uncheck: true,
+                })
+            ) {
+                $checkbox.prop('checked', false);
+                $card.removeClass(EL.selectedClass);
+                return;
+            }
+
+            $card.toggleClass(EL.selectedClass, this.checked);
+            calculateTotal($root);
+        });
+    }
+
+    function bindDropdownValidation($root) {
+        $root.off('click.bloomreachDropdownValidation', EL.cardCheckbox);
+        $root.on('click.bloomreachDropdownValidation', EL.cardCheckbox, function () {
+            const $checkbox = $(this);
+            const $card = $checkbox.closest(EL.completeCard);
+
+            if (
+                $checkbox.prop('checked') &&
+                !validateCardDropdown($card, {
+                    uncheck: true,
+                })
+            ) {
+                $checkbox.prop('checked', false);
+                $card.removeClass(EL.selectedClass);
+            }
+        });
+    }
+
+    function bindProductTracking($root) {
+        $root.off('click.bloomreachWidgetTracking', EL.titleEl);
+        $root.on('click.bloomreachWidgetTracking', EL.titleEl, function () {
+            const $card = $(this).closest(EL.completeCard);
+            const recommendationIndex = model.getRecommendationIndex($card);
+
+            if (recommendationIndex === 0) {
+                return;
+            }
+
+            const recommendation = model.getRecommendations()[recommendationIndex];
+            const baseProduct = recommendation && recommendation.baseProduct;
+
+            tracking.trackClick(baseProduct && baseProduct.code);
+        });
+    }
+
+    function resetBackForwardState() {
+        $(EL.completeWidget).each(function () {
+            const $widget = $(this);
+
+            view.resetWidgetState($widget);
+            bindCardSelection($widget);
+        });
+    }
+
+    const quantity = createCompleteYourProjectQuantity({
+        validateCardDropdown,
+        calculateTotal,
+    });
+
+    return {
+        resetDropdownState,
+        bindDropdowns,
+        bindCardSelection,
+        bindDropdownValidation,
+        bindProductTracking,
+        initQuantityFields: quantity.initQuantityFields,
+        resetBackForwardState,
+    };
+}

package/src/js/page/bloomreach-widget/complete-your-project/config.js

@@ -0,0 +1,60 @@
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('checkbox', require('../../../../elements/checkbox.hbs'));
+Handlebars.registerPartial('loader', require('../../../../elements/loader.hbs'));
+Handlebars.registerPartial('button', require('../../../../components/base/button.hbs'));
+Handlebars.registerPartial(
+    'bloomreach/complete-card-dropdown',
+    require('../../../../components/bloomreach/complete-card-dropdown.hbs')
+);
+Handlebars.registerPartial('notifications', require('../../../../elements/notifications.hbs'));
+Handlebars.registerPartial('reviews-rating', require('../../../../components/reviews-rating.hbs'));
+
+export const COMPLETE_YOUR_PROJECT_EVENTS = {
+    calculateTotal: 'calculateProductBundleTotal',
+    addToCart: 'bulkAddToCart',
+};
+
+export const COMPLETE_YOUR_PROJECT_EL = {
+    cardCheckbox: '.complete-card__select input[type="checkbox"]',
+    completeCard: '.complete-card',
+    completeWidget: '.complete-widget',
+    countBtn: '.count-btn',
+    countMinusBtn: '.count-btn--minus',
+    countStepperInitializedData: 'count-stepper-initialized',
+    countStepperRoot: '.count-stepper',
+    ctaButton: '.complete-widget__cta .btn',
+    summaryPriceValue: '.complete-widget__price-value',
+    summarySalePrice: '.complete-widget__sale-price',
+    summaryTotal: '.complete-widget__total',
+
+    dropdownErrorClass: 'complete-card-dropdown--error',
+    dropdownOpenClass: 'complete-card-dropdown--open',
+    dropdownOption: '[data-complete-card-dropdown-option]',
+    dropdownOptionSelectedClass: 'complete-card-dropdown__option--selected',
+    dropdownRoot: '[data-complete-card-dropdown]',
+    dropdownToggle: '[data-complete-card-dropdown-toggle]',
+    dropdownValue: '[data-complete-card-dropdown-value]',
+
+    optionsEl: '.complete-card__options',
+    previousQuantityData: 'previous-quantity',
+    quantityInput: '.tbx_quantity',
+    quantityReadyData: 'quantity-ready',
+
+    recommendationIndexAttr: 'data-recommendation-index',
+    selectedClass: 'complete-card--selected',
+    selectedValueData: 'selected-value',
+    titleEl: '.complete-card__title',
+
+    widgetContainer: '[data-complete-widget]',
+    widgetContent: '[data-complete-widget-content]',
+    widgetWrapper: '[data-complete-widget-wrapper]',
+};
+
+export const COMPLETE_YOUR_PROJECT_TEMPLATES = {
+    notification: require('../../../../elements/notifications.hbs'),
+    wrapper: require('../../../../components/bloomreach/complete-wrapper.hbs'),
+    divider: require('../../../../components/bloomreach/complete-divider.hbs'),
+    card: require('../../../../components/bloomreach/complete-card.hbs'),
+    summary: require('../../../../components/bloomreach/complete-summary.hbs'),
+};

package/src/js/page/bloomreach-widget/complete-your-project/model.js

@@ -0,0 +1,140 @@
+import { COMPLETE_YOUR_PROJECT_EL as EL } from './config';
+
+export function createCompleteYourProjectModel() {
+    let recommendations = [];
+
+    function setRecommendations(payloadData) {
+        recommendations = Wick.BloomreachWidget.normalizePayload(payloadData);
+    }
+
+    function getRecommendations() {
+        return recommendations;
+    }
+
+    function getRecommendationIndex($card) {
+        return Number($card.attr(EL.recommendationIndexAttr));
+    }
+
+    function getRecommendation($card) {
+        return recommendations[getRecommendationIndex($card)];
+    }
+
+    function findVariantProduct(recommendation, selectedValue) {
+        if (
+            !recommendation ||
+            !recommendation.variantProducts ||
+            !recommendation.variantProducts.length
+        ) {
+            return null;
+        }
+
+        return recommendation.variantProducts.find(function (variantProduct) {
+            return `${variantProduct.code}` === `${selectedValue}`;
+        });
+    }
+
+    function getCardQuantity($card) {
+        const quantity = parseInt($card.find(EL.quantityInput).val(), 10);
+
+        return Number.isNaN(quantity) ? 1 : quantity;
+    }
+
+    function getCardProduct($card) {
+        const recommendation = getRecommendation($card);
+
+        if (!recommendation) {
+            return null;
+        }
+
+        const $dropdown = $card.find(EL.dropdownRoot);
+        const selectedValue = $dropdown.length ? $dropdown.data(EL.selectedValueData) : '';
+
+        if (selectedValue) {
+            return findVariantProduct(recommendation, selectedValue) || recommendation.baseProduct;
+        }
+
+        return recommendation.baseProduct;
+    }
+
+    function getSelectedItems($root) {
+        const items = [];
+
+        $root.find(EL.completeCard).each(function () {
+            const $card = $(this);
+
+            if (!$card.find(EL.cardCheckbox).prop('checked')) {
+                return;
+            }
+
+            const product = getCardProduct($card);
+
+            if (!product) {
+                return;
+            }
+
+            const recommendationIndex = getRecommendationIndex($card);
+            const recommendation = recommendations[recommendationIndex];
+
+            items.push({
+                recommendationIndex,
+                baseProduct: recommendation && recommendation.baseProduct,
+                product,
+                quantity: getCardQuantity($card),
+            });
+        });
+
+        return items;
+    }
+
+    function toSelectedEntries(items) {
+        return items.map(function (item) {
+            return {
+                product: item.product,
+                quantity: item.quantity,
+            };
+        });
+    }
+
+    function toAddToCartEntries(items) {
+        return items.map(function (item) {
+            return {
+                productCode: item.product.code,
+                quantity: item.quantity,
+            };
+        });
+    }
+
+    function toTrackingItems(items) {
+        return items
+            .filter(function (item) {
+                return item.recommendationIndex !== 0;
+            })
+            .map(function (item) {
+                if (
+                    !item.baseProduct ||
+                    !item.baseProduct.code ||
+                    !item.product ||
+                    !item.product.code
+                ) {
+                    return null;
+                }
+
+                return {
+                    item_id: item.baseProduct.code,
+                    sku: item.product.code,
+                };
+            })
+            .filter(Boolean);
+    }
+
+    return {
+        setRecommendations,
+        getRecommendations,
+        getRecommendationIndex,
+        findVariantProduct,
+        getSelectedItems,
+        toSelectedEntries,
+        toAddToCartEntries,
+        toTrackingItems,
+    };
+}

package/src/js/page/bloomreach-widget/complete-your-project/presenter.js

@@ -0,0 +1,69 @@
+export function createCompleteYourProjectPresenter() {
+    function getDropdownOptions(product) {
+        if (!product.variantOptions || !product.variantOptions.length) {
+            return [];
+        }
+
+        return product.variantOptions.map(function (variantOption) {
+            const qualifiers = variantOption.variantOptionQualifiers || [];
+
+            return {
+                label: qualifiers
+                    .map(function (qualifier) {
+                        return qualifier.value;
+                    })
+                    .join(', '),
+                value: variantOption.code,
+            };
+        });
+    }
+
+    function getSelectedDropdownLabel(options, selectedValue) {
+        const selectedOption = options.find(function (option) {
+            return option.value === selectedValue;
+        });
+
+        return selectedOption ? selectedOption.label : '';
+    }
+
+    function getProductRenderData(product, index, options = {}) {
+        const shouldShowDropdown = index !== 0;
+        const dropdownOptions = shouldShowDropdown ? getDropdownOptions(product) : [];
+        const selectedDropdownValue = options.selectedDropdownValue || '';
+        const selectedDropdownLabel = getSelectedDropdownLabel(
+            dropdownOptions,
+            selectedDropdownValue
+        );
+        const renderData = Wick.BloomreachWidget.getProductRenderData(product, {
+            image: options.image,
+            fallbackProduct: options.fallbackProduct,
+            fallbackExcVat: true,
+        });
+        const showFromPrice = Boolean(
+            index !== 0 &&
+                !selectedDropdownValue &&
+                renderData.price &&
+                renderData.price.priceType === 'FROM'
+        );
+
+        return {
+            ...renderData,
+            showFromPrice,
+            dropdownOptions: dropdownOptions.map(function (option) {
+                return {
+                    ...option,
+                    selected: option.value === selectedDropdownValue,
+                };
+            }),
+            checkboxId: `${product.code}-${index}`,
+            dropdownError: options.dropdownError || false,
+            checked: options.checked || false,
+            selectedDropdownValue,
+            selectedDropdownLabel,
+        };
+    }
+
+    return {
+        getProductRenderData,
+    };
+}

package/src/js/page/bloomreach-widget/complete-your-project/quantity.js

@@ -0,0 +1,80 @@
+import { createCountStepper } from '../../utils/create-count-stepper';
+import { COMPLETE_YOUR_PROJECT_EL as EL } from './config';
+
+export function createCompleteYourProjectQuantity({ validateCardDropdown, calculateTotal }) {
+    function resetCardQuantity($card) {
+        $card
+            .find(EL.quantityInput)
+            .val(1)
+            .data(EL.previousQuantityData, 1)
+            .removeData(EL.quantityReadyData)
+            .removeData(EL.countStepperInitializedData);
+    }
+
+    function initQuantityField($root, inputSel) {
+        const stepper = createCountStepper({
+            inputSel,
+            min: 1,
+            onChange(qty, inputEl) {
+                const $input = $(inputEl);
+                const $card = $input.closest(EL.completeCard);
+                const $completeWidget = $input.closest(EL.completeWidget);
+                const $checkbox = $card.find(EL.cardCheckbox);
+                const previousQuantity = $input.data(EL.previousQuantityData) || 1;
+
+                if (!$input.data(EL.quantityReadyData)) {
+                    $input.data(EL.previousQuantityData, qty || 1);
+                    return;
+                }
+
+                if (!validateCardDropdown($card)) {
+                    $input.val(previousQuantity);
+
+                    if (previousQuantity <= 1) {
+                        $card.find(EL.countMinusBtn).prop('disabled', true);
+                    }
+
+                    return;
+                }
+
+                $checkbox.prop('checked', true);
+                $card.addClass(EL.selectedClass);
+                $input.data(EL.previousQuantityData, qty);
+                $input.trigger('change');
+
+                if ($completeWidget.length) {
+                    calculateTotal($completeWidget);
+                }
+            },
+        });
+
+        stepper.init($root);
+        $root.find(inputSel).data(EL.quantityReadyData, true);
+    }
+
+    function initQuantityFields($root) {
+        $root.find(EL.quantityInput).each(function () {
+            const $input = $(this);
+
+            if ($input.data(EL.countStepperInitializedData)) {
+                return;
+            }
+
+            const inputId = $input.attr('id');
+
+            if (!inputId) {
+                return;
+            }
+
+            $input.data(EL.countStepperInitializedData, true);
+            $input.data(EL.previousQuantityData, parseInt($input.val(), 10) || 1);
+
+            initQuantityField($input.closest(EL.countStepperRoot), `#${inputId}`);
+        });
+    }
+
+    return {
+        resetCardQuantity,
+        initQuantityFields,
+    };
+}