wickes-css2 2.106.0-develop.1 → 2.106.0-develop.11

package/src/js/page/share-project-list.js

@@ -1,57 +1,175 @@
 import { copyToClipboard } from './utils/copy-to-clipboard';
 
-var Wick = Wick || {};
+var Wick = window.Wick || {};
+
 Wick.ShareProjectList = (function () {
-    function init() {
-        var $input = $('#share-list-modal #shopping-list-link');
-        var linkContainer = $('#copy-link');
-        var $actualLink = linkContainer.find('a');
-        var copyClass = 'copy-link_hovered';
+    const SELECTORS = {
+        input: '#share-list-modal #shopping-list-link',
+        linkContainer: '#copy-link',
+        link: 'a',
+    };
 
-        $actualLink.on('click', function (e) {
-            e.preventDefault();
-        });
+    const CLASSES = {
+        copied: 'copy-link_hovered',
+    };
+
+    function logActiveElement() {
+        const active = document.activeElement;
+
+        if (!active) {
+            return;
+        }
+    }
+
+    function getElements() {
+        const $input = $(SELECTORS.input);
+        const $linkContainer = $(SELECTORS.linkContainer);
+        const $link = $linkContainer.find(SELECTORS.link);
+
+        return {
+            $input: $input,
+            $linkContainer: $linkContainer,
+            $link: $link,
+        };
+    }
+
+    function enableFocusAndSelect($input, source) {
+        if (!$input.length) {
+            return;
+        }
 
-        function focusAndSelectInput() {
-            if (!$input.length) return;
+        const input = $input.get(0);
+        const value = input.value || '';
+        const valueLength = value.length;
 
-            var el = $input.get(0);
+        logActiveElement('[ShareProjectList] before removeAttr disabled');
 
-            $input.removeAttr('disabled');
+        $input.removeAttr('disabled');
 
-            el.focus();
+        try {
+            input.focus();
+        } catch (error) {
+            console.error('[ShareProjectList] input.focus() failed', {
+                source: source,
+                error: error,
+            });
+        }
+
+        logActiveElement('[ShareProjectList] after input.focus()');
 
-            var len = (el.value || '').length;
-            if (typeof el.setSelectionRange === 'function') {
-                el.setSelectionRange(0, len);
-            } else if (typeof el.select === 'function') {
-                el.select();
+        try {
+            if (typeof input.setSelectionRange === 'function') {
+                input.setSelectionRange(0, valueLength);
+            } else if (typeof input.select === 'function') {
+                input.select();
             }
+        } catch (error) {
+            console.error('[ShareProjectList] selection failed', {
+                source: source,
+                error: error,
+            });
         }
 
-        linkContainer.on('click', function (e) {
-            e.preventDefault();
+        logActiveElement('[ShareProjectList] after selection');
+
+        setTimeout(function () {
+            logActiveElement('[ShareProjectList] after 0ms timeout');
+        }, 0);
+
+        setTimeout(function () {
+            logActiveElement('[ShareProjectList] after 50ms timeout');
+        }, 50);
+
+        setTimeout(function () {
+            logActiveElement('[ShareProjectList] after 150ms timeout');
+        }, 150);
+    }
+
+    function getInputValue($input) {
+        const value = String($input.val() || '').trim();
+
+        return value;
+    }
+
+    function bindEvents(elements) {
+        const $input = elements.$input;
+        const $linkContainer = elements.$linkContainer;
+        const $link = elements.$link;
 
-            focusAndSelectInput();
+        $input.on('focus', function () {
+            logActiveElement('[ShareProjectList] on input focus');
+        });
 
-            var value = ($input.val() || '').trim();
-            if (!value) return;
+        $input.on('blur', function () {
+            logActiveElement('[ShareProjectList] on input blur');
+        });
 
-            copyToClipboard(value, linkContainer[0], { noUpperCase: true })
+        $link.on('click', function (event) {
+            event.preventDefault();
+        });
+
+        $linkContainer.on('mousedown', function () {
+            logActiveElement('[ShareProjectList] on mousedown before focus');
+        });
+
+        $linkContainer.on('click', function (event) {
+            let value;
+
+            logActiveElement('[ShareProjectList] before click preventDefault');
+
+            event.preventDefault();
+
+            enableFocusAndSelect($input, 'linkContainer click');
+
+            value = getInputValue($input);
+            if (!value) {
+                return;
+            }
+
+            copyToClipboard(value, $linkContainer.get(0), { noUpperCase: true })
                 .then(function () {
-                    $actualLink.addClass(copyClass);
+                    $link.addClass(CLASSES.copied);
+
+                    logActiveElement('[ShareProjectList] after copy success before refocus');
+
+                    enableFocusAndSelect($input, 'copy success refocus');
+
+                    setTimeout(function () {
+                        enableFocusAndSelect($input, 'copy success refocus timeout 0');
+                    }, 0);
+
+                    setTimeout(function () {
+                        enableFocusAndSelect($input, 'copy success refocus timeout 50');
+                    }, 50);
                 })
-                .catch(function (e) {
-                    console.error(e);
+                .catch(function (error) {
+                    console.error('[ShareProjectList] Failed to copy shopping list link', error);
+
+                    logActiveElement('[ShareProjectList] after copy error before refocus');
+
+                    enableFocusAndSelect($input, 'copy error refocus');
                 });
         });
 
-        $input.on('click', function (e) {
-            e.preventDefault();
-            focusAndSelectInput();
-            $actualLink.removeClass(copyClass);
+        $input.on('click', function () {
+            enableFocusAndSelect($input, 'input click');
+            $link.removeClass(CLASSES.copied);
         });
     }
 
-    init();
+    function init() {
+        var elements = getElements();
+
+        if (!elements.$input.length || !elements.$linkContainer.length || !elements.$link.length) {
+            return;
+        }
+
+        bindEvents(elements);
+    }
+
+    return {
+        init: init,
+    };
 })();
+
+Wick.ShareProjectList.init();

package/src/js/page/utils/create-count-stepper.js

@@ -0,0 +1,141 @@
+import countButton from '../../../elements/count-button.hbs';
+
+// ===== HELPERS =====
+
+function normalizeOptions(options) {
+    return {
+        inputSel: '#quantity-field',
+
+        min: 1,
+
+        enhancedInputClass: 'count-stepper__input',
+        enhancedParentClass: 'count-stepper',
+
+        onChange: null,
+
+        ...options,
+    };
+}
+
+function toInt(value) {
+    const n = parseInt(String(value || '').trim(), 10);
+    return Number.isFinite(n) ? n : NaN;
+}
+
+function clampMin(n, min) {
+    return Math.max(min, n);
+}
+
+function ensureQty(value, fallback) {
+    const n = toInt(value);
+    return Number.isFinite(n) ? n : fallback;
+}
+
+function buildBtn(type, disabled) {
+    return countButton({
+        type,
+        icon: type === 'plus' ? 'fa-plus' : 'fa-minus',
+        ariaLabel: type === 'plus' ? 'Increase quantity' : 'Decrease quantity',
+        disabled: !!disabled,
+    });
+}
+
+function getButtonsWrap($input) {
+    return $input.parent();
+}
+
+function getMinusBtn($wrap) {
+    return $wrap.find('[data-count-btn][data-count-type="minus"]').first();
+}
+
+function getPlusBtn($wrap) {
+    return $wrap.find('[data-count-btn][data-count-type="plus"]').first();
+}
+
+function updateButtons($input, opt) {
+    const $wrap = getButtonsWrap($input);
+    const qty = ensureQty($input.val(), opt.min);
+
+    const $minus = getMinusBtn($wrap);
+
+    if ($minus.length) $minus.prop('disabled', qty <= opt.min);
+}
+
+function setQty($input, opt, qty) {
+    const next = clampMin(qty, opt.min);
+    $input.val(String(next));
+    updateButtons($input, opt);
+
+    if (typeof opt.onChange === 'function') {
+        opt.onChange(next, $input.get(0));
+    }
+}
+
+function ensureButtons($input, opt) {
+    const $parent = getButtonsWrap($input);
+
+    $input.addClass(opt.enhancedInputClass);
+    $parent.addClass(opt.enhancedParentClass);
+
+    const hasMinus = getMinusBtn($parent).length;
+    const hasPlus = getPlusBtn($parent).length;
+
+    if (!hasMinus) {
+        $input.before(buildBtn('minus', true));
+    }
+    if (!hasPlus) {
+        $input.after(buildBtn('plus', false));
+    }
+
+    const initial = ensureQty($input.val(), opt.min);
+    setQty($input, opt, initial);
+}
+
+function getInputs($root, inputSel) {
+    const $scope = $root && $root.length ? $root : $(document);
+    const $self = $scope.is(inputSel) ? $scope : $();
+    const $found = $scope.find(inputSel);
+    return $self.add($found);
+}
+
+// ===== FACTORY =====
+
+export function createCountStepper(options = {}) {
+    const OPT = normalizeOptions(options);
+    if (!OPT.inputSel) throw new Error('[createCountStepper] Missing inputSel');
+
+    const NS = `.cnt_${Math.random().toString(16).slice(2)}`;
+
+    function init($root) {
+        getInputs($root, OPT.inputSel).each(function () {
+            ensureButtons($(this), OPT);
+        });
+    }
+
+    // +/- click
+    $(document)
+        .off(`click${NS}`, '[data-count-btn]')
+        .on(`click${NS}`, '[data-count-btn]', function (e) {
+            const $btn = $(this);
+            const $parent = $btn.parent();
+            const $input = $parent.find(OPT.inputSel).first();
+
+            if (!$input.length) return;
+
+            e.preventDefault();
+
+            const type = ($btn.attr('data-count-type') || '').toLowerCase();
+            const current = ensureQty($input.val(), OPT.min);
+
+            if (type === 'plus') setQty($input, OPT, current + 1);
+            if (type === 'minus') setQty($input, OPT, current - 1);
+        });
+
+    $(document)
+        .off(`input${NS} change${NS}`, OPT.inputSel)
+        .on(`input${NS} change${NS}`, OPT.inputSel, function () {
+            updateButtons($(this), OPT);
+        });
+
+    return { init };
+}

package/src/js/page/utils/gift-cards-utils.js

@@ -0,0 +1,242 @@
+import { showLoader, hideLoader } from './loader';
+
+const SUMMARY_SELECTORS = {
+    subTotal: {
+        item: '.checkout-widget__item-bold',
+        value: '.checkout-widget__item-value',
+        title: 'Items subtotal:',
+    },
+    vat: {
+        item: '.checkout-widget__item-vat',
+        value: '.checkout-widget__item-value',
+        title: 'VAT:',
+    },
+    clickAndCollectCost: {
+        item: '.checkout-widget__item-cc',
+        value: '.checkout-widget__item-value',
+        title: 'Click & Collect:',
+    },
+    deliveryCost: {
+        item: '.checkout-widget__item-delivery',
+        value: '.checkout-widget__item-value',
+        title: 'Delivery:',
+    },
+    charityPrice: {
+        item: '.checkout-widget__item-charity',
+        value: '.checkout-widget__item-value',
+        title: 'Charity donation:',
+    },
+    discountTotal: {
+        item: '.checkout-widget__details-discount',
+        value: '.checkout-widget__detail-value',
+    },
+    giftCardApplied: {
+        item: '.checkout-widget__gift-card',
+        value: '.checkout-widget__item-value',
+        title: 'Gift Card:',
+    },
+    total: { item: '.checkout-widget__total', value: '.checkout-widget__total-value' },
+};
+
+const CURRENCY_KEYS = new Set([
+    'subTotal',
+    'vat',
+    'clickAndCollectCost',
+    'deliveryCost',
+    'charityPrice',
+    'discountTotal',
+    'total',
+    'giftCardApplied',
+]);
+
+const GIFT_CARD_ALREADY_ADDED = 'GIFT_CARD_ALREADY_ADDED';
+const PIS_REQUEST_TIMEOUT = 'PIS-REQUEST-TIMEOUT';
+const PIS_INTEGRATION_ERROR = 'PIS-INTEGRATION-ERROR';
+const PIS_INSUFFICIENT_AMOUNT = 'PIS-INSUFFICIENT-AMOUNT';
+const PIS_PROCESSING_ERROR = 'PIS_PROCESSING_ERROR';
+const HYBRIS_REQUEST_TIMEOUT = 'HYBRIS-REQUEST-TIMEOUT';
+const HYBRIS_PIS_INTEGRATION_ERROR = 'HYBRIS-PIS_INTEGRATION-ERROR';
+const HYBRIS_PIS_CONNECTION_ERROR = 'HYBRIS-PIS_CONNECTION-ERROR';
+const ZERO_BALANCE = 'ZERO_BALANCE';
+const SPLIT_PAYMENT_CARD_ERROR = 'SPLIT_PAYMENT_CARD_ERROR';
+
+export const DEFAULT_ERROR_MESSAGE =
+    'Unable to use Gift Card at this time, please try later or click here for support.';
+
+export const DEFAULT_PAY_ERROR_MESSAGE =
+    'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.';
+
+export const OK_CODE = 0;
+
+export const MESSAGE_BY_CODE = {
+    10: 'Gift Card number and / or PIN not recognised. A Gift Card will be locked following three unsuccessful PIN attempts.',
+    16: 'Card locked due to three unsuccessful PIN entries. For support click here.',
+    20: 'Unable to use Gift Card at this time, please try later or click here for support.',
+    21: 'Gift Card number not recognised.',
+    40: 'Unable to use Gift Card at this time, please try later or click here for support.',
+    60: 'The entered Gift Card has expired. For support click here.',
+    75: 'The entered Gift Card is invalid. For support click here.',
+    [GIFT_CARD_ALREADY_ADDED]: 'Gift Card already added, please use a different card.',
+    [PIS_REQUEST_TIMEOUT]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [PIS_INTEGRATION_ERROR]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [PIS_INSUFFICIENT_AMOUNT]:
+        'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+    [PIS_PROCESSING_ERROR]:
+        'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+    [HYBRIS_REQUEST_TIMEOUT]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [HYBRIS_PIS_INTEGRATION_ERROR]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [HYBRIS_PIS_CONNECTION_ERROR]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [ZERO_BALANCE]:
+        'Insufficient funds available, please try another Gift Card or alternate payment method.',
+    99: 'The entered Gift Card is invalid. For support click here.',
+    [-1]: 'Gift Card is unavailable at this time, please try later. For support click here.',
+};
+
+export const PAY_MESSAGE_BY_CODE = {
+    101: 'Unable to use Gift Cards at this time, please try later or click here for support.',
+    102: 'Unfortunately there was a problem with requesting your card details from the payment provider. Available funds on your Gift Card are unchanged.',
+    103: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+    104: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+    [PIS_REQUEST_TIMEOUT]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [PIS_INTEGRATION_ERROR]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [PIS_INSUFFICIENT_AMOUNT]:
+        'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+    [PIS_PROCESSING_ERROR]:
+        'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
+    [HYBRIS_REQUEST_TIMEOUT]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [HYBRIS_PIS_INTEGRATION_ERROR]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [HYBRIS_PIS_CONNECTION_ERROR]:
+        'Unable to use Gift Card at this time, please try later or click here for support.',
+    [SPLIT_PAYMENT_CARD_ERROR]:
+        'Unfortunately there was a problem with requesting your card details from the payment provider. Available funds on your Gift Card are unchanged.',
+};
+
+export const ADD_GIFT_CARD = 'addGiftCard';
+export const REMOVE_GIFT_CARD = 'removeGiftCard';
+export const PAY_WITH_GIFT_CARD = 'payWithGiftCard';
+
+export const FAQ_URL = 'https://www.wickes.co.uk/gifts';
+
+export const escapeHtml = (s) =>
+    $('<div>')
+        .text(String(s || ''))
+        .html();
+
+export const linkifyClickHere = (msg) =>
+    escapeHtml(msg).replace(
+        /\bclick here\b/gi,
+        `<a href="${FAQ_URL}" target="_blank" rel="noopener" class="notification_link">click here</a>`
+    );
+
+export function formatGc16(raw) {
+    const digits = String(raw || '')
+        .replace(/\D/g, '')
+        .slice(0, 16);
+    return digits.replace(/(\d{4})(?=\d)/g, '$1-');
+}
+
+function formatGBP(value) {
+    if (value === null || typeof value === 'undefined' || String(value).trim() === '') {
+        return value;
+    }
+
+    const cleanedValue = String(value).replace(/[^\d.-]/g, '');
+    const numberValue = Number(cleanedValue);
+
+    if (Number.isFinite(numberValue)) {
+        return `£${numberValue.toFixed(2)}`;
+    }
+
+    return value;
+}
+
+export function buildHintContext(count, limit) {
+    const max = count >= limit;
+
+    return {
+        canAdd: !max,
+        max,
+        hintClass: `giftcard-summary__hint${max ? ' giftcard-summary__hint--max' : ''}`,
+    };
+}
+
+export function buildSummaryEqualMap(data) {
+    return Object.entries(SUMMARY_SELECTORS).map(([key, d]) => {
+        const raw = data[key];
+        let dataValue = raw;
+
+        if (key === 'giftCardApplied') {
+            if (isZeroAmount(raw)) {
+                dataValue = '';
+            } else if (raw != null && raw !== '') {
+                dataValue = formatGBP(raw);
+                if (typeof dataValue === 'string' && dataValue.startsWith('£')) {
+                    dataValue = `-${dataValue}`;
+                }
+            }
+        } else {
+            if (CURRENCY_KEYS.has(key) && raw != null && raw !== '') {
+                dataValue = formatGBP(raw);
+            }
+        }
+
+        return {
+            item: d.item,
+            itemValue: d.value,
+            dataValue,
+            ...(d.title ? { title: d.title } : {}),
+        };
+    });
+}
+
+export function isZeroAmount(val) {
+    const cleaned = String(val ?? '').replace(/[^\d.]/g, '');
+    if (!cleaned) {
+        return false;
+    }
+    const num = Number(cleaned);
+    return Number.isFinite(num) && num === 0;
+}
+
+// --- API/Event-Dispatching Functions ---
+
+export function verifyGiftCard($loader, giftCardNumber, pin) {
+    showLoader($loader);
+    return new Promise((resolve, reject) => {
+        const payload = { giftCardNumber, pin };
+        const detail = { resolve, reject, payload };
+        const evt = createEvent(ADD_GIFT_CARD, payload, detail);
+        window.dispatchEvent(evt);
+    }).finally(() => {
+        hideLoader($loader);
+    });
+}
+
+export function removeGiftCard($loader, index) {
+    showLoader($loader);
+    return new Promise((resolve, reject) => {
+        const payload = { index };
+        const detail = { resolve, reject, payload };
+        const evt = createEvent(REMOVE_GIFT_CARD, payload, detail);
+        window.dispatchEvent(evt);
+    }).finally(() => {
+        hideLoader($loader);
+    });
+}
+
+export function payWithGiftCard() {
+    return new Promise((resolve, reject) => {
+        const detail = { resolve, reject };
+        const evt = createEvent(PAY_WITH_GIFT_CARD, undefined, detail);
+        window.dispatchEvent(evt);
+    });
+}

package/src/js/page/utils/input-handling.js

@@ -0,0 +1,104 @@
+import { formatGc16 } from './gift-cards-utils';
+import { clearErrorText, showErrorText } from './validation';
+
+export function createGcNumberInputHandler({
+    fieldSelector,
+    fieldErrorClass,
+    errorTextSelector,
+    ariaInvalidAttr,
+}) {
+    return function handleGcNumberInput(e) {
+        const input = e.currentTarget;
+        const $input = $(input);
+
+        const canTrack = typeof input.selectionStart === 'number';
+        const atEnd = canTrack && input.selectionStart === input.value.length;
+
+        const hadErr = $input.closest(fieldSelector).hasClass(fieldErrorClass);
+
+        input.value = formatGc16(input.value);
+
+        if (hadErr) {
+            clearErrorText(
+                $input,
+                fieldSelector,
+                errorTextSelector,
+                fieldErrorClass,
+                ariaInvalidAttr
+            );
+        }
+
+        if (atEnd && typeof input.setSelectionRange === 'function') {
+            input.setSelectionRange(input.value.length, input.value.length);
+        }
+    };
+}
+
+export function digitsOnlyKeypress(e) {
+    if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) {
+        e.preventDefault();
+    }
+}
+
+export function handleGcNumberBlur(
+    e,
+    { fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr, numberMessage }
+) {
+    const $input = $(e.currentTarget);
+    const len = String($input.val() || '').replace(/\D/g, '').length;
+
+    clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+
+    if (len < 16) {
+        showErrorText(
+            $input,
+            numberMessage,
+            fieldSelector,
+            errorTextSelector,
+            errorClass,
+            ariaInvalidAttr
+        );
+    }
+}
+
+export function handleGcPinInput(
+    e,
+    { fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr }
+) {
+    const input = e.currentTarget;
+    const $input = $(input);
+
+    const hadErr = $input.closest(fieldSelector).hasClass(errorClass);
+    input.value = String(input.value || '')
+        .replace(/\D/g, '')
+        .slice(0, 8);
+
+    if (hadErr) {
+        clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+    }
+}
+
+export function handleGcPinKeypress(e) {
+    if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) e.preventDefault();
+}
+
+export function handleGcPinBlur(
+    e,
+    { fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr, pinMessage }
+) {
+    const $input = $(e.currentTarget);
+    const length = String($input.val() || '').replace(/\D/g, '').length;
+
+    clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
+
+    if (length < 8) {
+        showErrorText(
+            $input,
+            pinMessage,
+            fieldSelector,
+            errorTextSelector,
+            errorClass,
+            ariaInvalidAttr
+        );
+    }
+}