wickes-css2 2.117.0-develop.3 → 2.117.0-gift-cards.1

package/build/js/page/components/postcode-lookup.js

@@ -0,0 +1,503 @@
+import {
+    bindBlurValidation,
+    isFieldRowVisible,
+    removeErrorStylingForElement,
+    resetBlurValidation,
+} from '../utils/validation';
+import { toCanonicalPostcode } from '../utils/address-utils';
+import { createPostcodeLookupApi } from './postcode-lookup/postcode-lookup-api';
+import {
+    MODES,
+    autoGrow,
+    classes,
+    renderDropdown,
+    renderHighlight,
+    renderMode,
+    toggleManualPlaceholders,
+} from './postcode-lookup/postcode-lookup-render';
+import {
+    ADDRESS_FIELDS,
+    validate,
+    validateAddressInputs,
+    validateField,
+    validateSearch,
+} from './postcode-lookup/postcode-lookup-validation';
+
+const DEBOUNCE_MS = 300;
+const MIN_QUERY_LENGTH = 2;
+const EVENT_NS = '.postcodeLookup';
+
+const selectors = {
+    formRow: '.form-row',
+    search: '[data-postcode-lookup-input]',
+    line1: '[data-postcode-lookup-line1]',
+    line2: '[data-postcode-lookup-line2]',
+    town: '[data-postcode-lookup-town]',
+    postcode: '[data-postcode-lookup-postcode]',
+    line2Wrap: '[data-postcode-lookup-line2-wrap]',
+    addLine2: '[data-postcode-lookup-add-line2]',
+    searchWrap: '[data-postcode-lookup-search]',
+    dropdown: '[data-postcode-lookup-dropdown]',
+    list: '[data-postcode-lookup-list]',
+    hint: '[data-postcode-lookup-hint]',
+    manual: '[data-postcode-lookup-manual]',
+    manualBtn: '[data-postcode-lookup-manual-btn]',
+    expand: '[data-postcode-lookup-expand]',
+};
+
+const api = createPostcodeLookupApi();
+
+function setSuggestions(lookup, list) {
+    const { state } = lookup;
+
+    state.suggestions = list;
+    state.highlightedIndex = -1;
+}
+
+function openDropdown(lookup) {
+    const { state, $search } = lookup;
+
+    if (state.mode === MODES.UNAVAILABLE) return;
+
+    state.isOpen = true;
+    renderDropdown(lookup);
+    removeErrorStylingForElement($search);
+}
+
+function closeDropdown(lookup, { shouldValidate = true } = {}) {
+    const { state } = lookup;
+
+    if (!state.isOpen) return;
+
+    state.isOpen = false;
+    state.highlightedIndex = -1;
+    renderDropdown(lookup);
+    updateSearchFromFields(lookup);
+    if (shouldValidate) validateSearch(lookup);
+}
+
+function setExternalError(lookup) {
+    const { state, $search } = lookup;
+
+    cancelLookup(lookup);
+    state.isOpen = false;
+    renderDropdown(lookup);
+    removeErrorStylingForElement($search);
+    setMode(lookup, MODES.UNAVAILABLE);
+}
+
+function setMode(lookup, mode) {
+    const { state } = lookup;
+
+    if (state.mode === MODES.UNAVAILABLE) return;
+
+    state.mode = mode;
+    renderMode(lookup);
+}
+
+function setSearchValue(lookup, value) {
+    const { $search } = lookup;
+
+    $search.val(value);
+    autoGrow(lookup);
+}
+
+function cancelLookup(lookup) {
+    const { requestIds, debouncedFetch } = lookup;
+
+    debouncedFetch.cancel();
+    requestIds.autocomplete += 1;
+    setSuggestions(lookup, []);
+}
+
+async function fetchSuggestions(lookup, query) {
+    const { requestIds } = lookup;
+
+    requestIds.autocomplete += 1;
+    const currentRequest = requestIds.autocomplete;
+
+    try {
+        const hits = await api.autocomplete(query);
+        if (currentRequest !== requestIds.autocomplete) return;
+
+        setSuggestions(lookup, hits);
+        renderDropdown(lookup);
+    } catch (e) {
+        if (currentRequest !== requestIds.autocomplete) return;
+        setExternalError(lookup);
+    }
+}
+
+function handleInput(lookup) {
+    const { $search, debouncedFetch } = lookup;
+
+    autoGrow(lookup);
+
+    const query = ($search.val() || '').trim();
+
+    if (query.length < MIN_QUERY_LENGTH) {
+        cancelLookup(lookup);
+    } else {
+        debouncedFetch(query);
+    }
+
+    openDropdown(lookup);
+}
+
+function hasVisibleSuggestions(lookup) {
+    const { state, $search } = lookup;
+
+    return state.isOpen && !!$search.val() && state.suggestions.length > 0;
+}
+
+function navigate(lookup, step) {
+    const { state } = lookup;
+
+    if (!hasVisibleSuggestions(lookup)) return;
+
+    const totalItems = state.suggestions.length;
+    const isFirstMoveUp = state.highlightedIndex === -1 && step < 0;
+    const nextIndex = isFirstMoveUp ? totalItems - 1 : state.highlightedIndex + step;
+
+    state.highlightedIndex = (nextIndex + totalItems) % totalItems;
+    renderHighlight(lookup);
+    scrollToHighlighted(lookup);
+}
+
+function selectHighlighted(lookup) {
+    const { state } = lookup;
+
+    if (state.highlightedIndex === -1 || !hasVisibleSuggestions(lookup)) return;
+
+    const selected = state.suggestions[state.highlightedIndex];
+    if (selected) selectSuggestion(lookup, selected);
+}
+
+function scrollToHighlighted(lookup) {
+    const { state, $list, $manual } = lookup;
+
+    if (!state.isOpen) return;
+
+    const highlightedEl = $list.find('.' + classes.highlighted)[0];
+    if (!highlightedEl) return;
+
+    $list[0].style.scrollPaddingBottom = `${$manual[0].offsetHeight}px`;
+    highlightedEl.scrollIntoView({ block: 'nearest' });
+}
+
+function handleEsc(lookup) {
+    const { state } = lookup;
+
+    state.isOpen = true;
+    resetAddressSearch(lookup);
+    renderDropdown(lookup);
+}
+
+function handleSearchKeydown(lookup, e) {
+    switch (e.key) {
+        case 'ArrowDown':
+        case 'Down':
+            e.preventDefault();
+            navigate(lookup, 1);
+            break;
+        case 'ArrowUp':
+        case 'Up':
+            e.preventDefault();
+            navigate(lookup, -1);
+            break;
+        case 'Enter':
+            e.preventDefault();
+            selectHighlighted(lookup);
+            break;
+        case 'Escape':
+        case 'Esc':
+            e.preventDefault();
+            handleEsc(lookup);
+            break;
+    }
+}
+
+function showLine2(lookup) {
+    const { $line2Wrap, $addLine2 } = lookup;
+
+    $line2Wrap.removeClass(classes.hidden);
+    $addLine2.addClass(classes.hidden);
+}
+
+function resetAddressSearch(lookup) {
+    cancelLookup(lookup);
+    setSearchValue(lookup, '');
+}
+
+function resetAddressInputs(lookup) {
+    const { $fields } = lookup;
+
+    ADDRESS_FIELDS.forEach((key) => {
+        const $field = $fields[key];
+        $field.val('');
+        removeErrorStylingForElement($field);
+        resetBlurValidation($field);
+    });
+}
+
+function enterManualMode(lookup) {
+    const { state, requestIds } = lookup;
+
+    requestIds.resolve += 1;
+    resetAddressSearch(lookup);
+    state.isOpen = false;
+    renderDropdown(lookup);
+
+    setMode(lookup, MODES.MANUAL);
+    toggleManualPlaceholders(lookup, true);
+    resetAddressInputs(lookup);
+}
+
+function exitManualMode(lookup) {
+    const { $search } = lookup;
+
+    setMode(lookup, MODES.LOOKUP);
+    toggleManualPlaceholders(lookup, false);
+    resetAddressSearch(lookup);
+    removeErrorStylingForElement($search);
+    resetAddressInputs(lookup);
+}
+
+function reset(lookup) {
+    const { state, requestIds, $search } = lookup;
+
+    requestIds.resolve += 1;
+    closeDropdown(lookup, { shouldValidate: false });
+    setMode(lookup, MODES.LOOKUP);
+    toggleManualPlaceholders(lookup, false);
+    resetAddressSearch(lookup);
+    removeErrorStylingForElement($search);
+    resetBlurValidation($search);
+    resetAddressInputs(lookup);
+    state.isValidationPending = false;
+}
+
+function setShown(lookup, isShown) {
+    const { state } = lookup;
+
+    if (!isShown) {
+        if (state.isOpen) {
+            cancelLookup(lookup);
+            closeDropdown(lookup, { shouldValidate: false });
+        }
+        return;
+    }
+
+    autoGrow(lookup);
+
+    if (state.isValidationPending) {
+        state.isValidationPending = false;
+        validateSearch(lookup);
+        validateAddressInputs(lookup);
+    }
+}
+
+function fillAddress(lookup, address) {
+    const { state, $search, $fields } = lookup;
+    const values = {
+        line1: address.line1,
+        line2: address.line2,
+        town: address.town,
+        postcode: toCanonicalPostcode(address.postcode),
+    };
+
+    if (values.line2) showLine2(lookup);
+
+    Object.keys(values).forEach((key) => {
+        const value = key === 'postcode' ? values[key] : values[key].trim();
+        $fields[key].val(value);
+    });
+
+    updateSearchFromFields(lookup);
+    renderDropdown(lookup);
+    validateSearch(lookup);
+    validateAddressInputs(lookup);
+    state.isValidationPending = !isFieldRowVisible($search);
+}
+
+function updateSearchFromFields(lookup) {
+    const { $fields } = lookup;
+    const combined = ADDRESS_FIELDS.map((key) => $fields[key].val())
+        .filter(Boolean)
+        .join(', ');
+
+    setSearchValue(lookup, combined);
+}
+
+function handleFieldChange(lookup, key) {
+    const { $fields } = lookup;
+
+    if (key === 'postcode') {
+        const $postcode = $fields.postcode;
+        $postcode.val(toCanonicalPostcode($postcode.val()));
+    }
+    updateSearchFromFields(lookup);
+    validateSearch(lookup);
+}
+
+async function selectSuggestion(lookup, suggestion) {
+    const { state, requestIds, $search } = lookup;
+
+    state.isPopulating = true;
+    if (document.activeElement !== $search[0]) $search[0].focus();
+    cancelLookup(lookup);
+    closeDropdown(lookup, { shouldValidate: false });
+
+    requestIds.resolve += 1;
+    const currentResolve = requestIds.resolve;
+
+    try {
+        const address = await api.resolve(suggestion);
+        state.isPopulating = false;
+        if (currentResolve !== requestIds.resolve) return;
+        if (!address) throw new Error('Address not found');
+
+        fillAddress(lookup, address);
+    } catch (e) {
+        state.isPopulating = false;
+        if (currentResolve !== requestIds.resolve) return;
+        setExternalError(lookup);
+    }
+}
+
+async function checkApiKey(lookup) {
+    try {
+        const { available } = await api.checkKey();
+        if (!available) {
+            setExternalError(lookup);
+        }
+    } catch (e) {
+        setExternalError(lookup);
+    }
+}
+
+function bindEvents(lookup) {
+    const {
+        rootSelector,
+        state,
+        $search,
+        $searchLabel,
+        $searchWrap,
+        $dropdown,
+        $list,
+        $hint,
+        $manual,
+        $expand,
+        $addLine2,
+    } = lookup;
+
+    $search.on('input', () => handleInput(lookup));
+    $search.on('keydown', (e) => handleSearchKeydown(lookup, e));
+
+    ADDRESS_FIELDS.forEach((key) => {
+        bindBlurValidation(`${rootSelector} ${selectors[key]}`, () => validateField(lookup, key), {
+            namespace: EVENT_NS,
+            onChange: () => handleFieldChange(lookup, key),
+        });
+    });
+
+    $search.on('focus', () => openDropdown(lookup));
+
+    $addLine2.on('click', () => showLine2(lookup));
+
+    $list.on('mousedown', `.${classes.item}, ${selectors.manual}`, function (e) {
+        e.preventDefault();
+    });
+
+    $list.on('click', '.' + classes.item, function () {
+        const suggestion = state.suggestions[$(this).data('index')];
+        if (suggestion) selectSuggestion(lookup, suggestion);
+    });
+
+    $manual.on('click', selectors.manualBtn, function (e) {
+        e.stopPropagation();
+        enterManualMode(lookup);
+    });
+
+    $expand.on('click', () => exitManualMode(lookup));
+
+    $hint.on('pointerdown', () => closeDropdown(lookup));
+
+    $(document).on(`pointerdown${EVENT_NS}`, function (e) {
+        if (!state.isOpen) {
+            if (state.isPopulating && !$(e.target).closest($search).length) validateSearch(lookup);
+            return;
+        }
+        if (!$(e.target).closest($search.add($dropdown)).length) closeDropdown(lookup);
+    });
+
+    $searchLabel.on('click', function (e) {
+        e.preventDefault();
+    });
+
+    $searchWrap.on('focusout', function (e) {
+        if (!state.isOpen) {
+            if (state.isPopulating) validateSearch(lookup);
+            return;
+        }
+        if (!e.relatedTarget) return;
+        if (!$.contains(this, e.relatedTarget)) closeDropdown(lookup);
+    });
+
+    $(window).on(`blur${EVENT_NS}`, () => closeDropdown(lookup));
+}
+
+export function createPostcodeLookup(context) {
+    const rootSelector = `[data-postcode-lookup="${context}"]`;
+    const $root = $(rootSelector);
+    const find = (key) => $root.find(selectors[key]);
+
+    const $search = find('search');
+    if (!$search.length) return null;
+
+    const lookup = {
+        rootSelector,
+        $search,
+        $searchLabel: $search.closest(selectors.formRow).find('label'),
+        $fields: {
+            line1: find('line1'),
+            line2: find('line2'),
+            town: find('town'),
+            postcode: find('postcode'),
+        },
+        $line2Wrap: find('line2Wrap'),
+        $addLine2: find('addLine2'),
+        $searchWrap: find('searchWrap'),
+        $dropdown: find('dropdown'),
+        $list: find('list'),
+        $hint: find('hint'),
+        $manual: find('manual'),
+        $expand: find('expand'),
+        state: {
+            mode: MODES.LOOKUP,
+            isOpen: false,
+            isPopulating: false,
+            isValidationPending: false,
+            suggestions: [],
+            highlightedIndex: -1,
+        },
+        requestIds: {
+            autocomplete: 0,
+            resolve: 0,
+        },
+    };
+
+    lookup.debouncedFetch = _.debounce((query) => fetchSuggestions(lookup, query), DEBOUNCE_MS);
+
+    bindEvents(lookup);
+
+    if (lookup.$fields.line2.val()) showLine2(lookup);
+    checkApiKey(lookup);
+    autoGrow(lookup);
+
+    return {
+        validate: (options) => validate(lookup, options),
+        setShown: (isShown) => setShown(lookup, isShown),
+        reset: () => reset(lookup),
+    };
+}

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

@@ -29,9 +29,9 @@ export function createBulkAddHelper({ productCodeSelector }) {
 
     function addProductToCart(postcode) {
         const item = { productCode: getProductCode(), quantity: QUANTITY };
-        
+
         const payload = {
-            entries: [item]
+            entries: [item],
         };
 
         if (postcode) {

package/build/js/page/ripple/thumb-gallery.js

@@ -39,9 +39,8 @@ Wick.ThumbGallery = (function () {
             return [];
         }
         const trimmed = hybrisString.trim();
-        const content = trimmed.startsWith('[') && trimmed.endsWith(']')
-            ? trimmed.slice(1, -1)
-            : trimmed;
+        const content =
+            trimmed.startsWith('[') && trimmed.endsWith(']') ? trimmed.slice(1, -1) : trimmed;
 
         return content
             .split(',')
@@ -68,7 +67,8 @@ Wick.ThumbGallery = (function () {
 
     function generateCloudinaryMainSlide(publicId, baseUrl) {
         const sourcesHtml = IMG_BREAKPOINTS.map(
-            (bp) => `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h, baseUrl)}" media="${bp.media}">`
+            (bp) =>
+                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h, baseUrl)}" media="${bp.media}">`
         ).join('\n            ');
         const fallbackSrc = buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h, baseUrl);
         return renderMainSlide(fallbackSrc, sourcesHtml);
@@ -208,9 +208,15 @@ Wick.ThumbGallery = (function () {
 
         const swiper = new Swiper(
             $container[0],
-            getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
-                updateActiveThumbnail(swiper, thumbsSwiper);
-            }, total)
+            getMainSwiperConfig(
+                $nextBtn,
+                $prevBtn,
+                thumbsSwiper,
+                () => {
+                    updateActiveThumbnail(swiper, thumbsSwiper);
+                },
+                total
+            )
         );
 
         $thumbContainer
@@ -223,7 +229,7 @@ Wick.ThumbGallery = (function () {
     function init(hybrisString, options = {}) {
         const ids = parseIdentifiers(hybrisString);
 
-        const opts = typeof options === 'string' ? { mediaDomain: options } : (options || {});
+        const opts = typeof options === 'string' ? { mediaDomain: options } : options || {};
         const baseUrl = getBaseUrl(opts.mediaDomain);
         const missingImage = opts.missingImage || '';
 

package/build/js/page/utils/address-utils.js

@@ -0,0 +1,32 @@
+export function getAddressLines(address) {
+    const { line_1: line1, line_2: line2, line_3: line3 } = address;
+
+    if (line3) {
+        return {
+            line1: [line1, line2].filter(Boolean).join(', '),
+            line2: line3,
+        };
+    }
+
+    return { line1, line2 };
+}
+
+export function toCanonicalPostcode(postcode) {
+    const compact = String(postcode || '')
+        .toUpperCase()
+        .replace(/\s/g, '');
+
+    if (compact.length < 3) return compact;
+    return compact.slice(0, -3) + ' ' + compact.slice(-3);
+}
+
+export function resolvePostcodeToAddress(result) {
+    const { line1, line2 } = getAddressLines(result);
+
+    return {
+        line1: line1 || '',
+        line2: line2 || '',
+        town: result.post_town || '',
+        postcode: result.postcode || '',
+    };
+}

package/build/js/page/utils/validation.js

@@ -12,10 +12,22 @@ const formElements = {
 };
 
 const patterns = {
+    antiXssPattern: new RegExp("^[\\w()/&.,'`-]+[\\w ()/&.,'`-]*[\\w()/&.,'`-]+$|^[\\w()/&.,'`-]$"),
     guidPattern: /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i,
     userFriendlyIdPattern: /^[A-Za-z]{2,3}\d{6}$/,
+    lookupPostcodePattern: new RegExp(
+        '^(GIR 0AA)$|^((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY])) [0-9][A-BD-HJLNP-UW-Z]{2})$'
+    ),
 };
 
+export function isValidLookupPostcode(value) {
+    return patterns.lookupPostcodePattern.test(value);
+}
+
+export function isAntiXssValid(value) {
+    return patterns.antiXssPattern.test(value);
+}
+
 export function addFieldValidation(fieldSelector, validationFunction) {
     $(fieldSelector).each(function (index, element) {
         $(element).blur(function () {
@@ -244,6 +256,14 @@ export function removeErrorStyling(element) {
     element.find('.form-row__error').remove();
 }
 
+export function removeErrorStylingForElement(element) {
+    removeErrorStyling($(element).closest('.form-row'));
+}
+
+export function isFieldRowVisible(element) {
+    return $(element).closest('.form-row').is(':visible');
+}
+
 export function wrapWithError(element) {
     $(element).addClass('form-row_validation-error');
 }
@@ -277,7 +297,7 @@ export function showValidationErrors(form, errorMsg) {
     }
 }
 
-function isElementInViewport(el) {
+export function isElementInViewport(el) {
     if (typeof jQuery === 'function' && el instanceof jQuery) {
         el = el[0];
     }
@@ -366,3 +386,36 @@ function validateByPredicate(
 export function validateExactDigits($input, n, message, cfg) {
     return validateByPredicate($input, (v) => hasExactDigits(v, n), message, cfg);
 }
+
+export function validateFieldByRule($field, { required, validate, message }) {
+    if (!$field.length || !isFieldRowVisible($field)) return true;
+
+    const value = ($field.val() || '').trim();
+    const isValid = value ? validate(value) : !required;
+
+    updateStylingErrorForElement($field, isValid, message);
+    return isValid;
+}
+
+const blurredFields = new WeakSet();
+
+export function bindBlurValidation(selector, validate, { namespace = '', onChange } = {}) {
+    $(document)
+        .on(`change${namespace}`, selector, function () {
+            updateInputValueBeforeValidation(this);
+            validate(this);
+            if (onChange) onChange(this);
+        })
+        .on(`blur${namespace}`, selector, function () {
+            blurredFields.add(this);
+            updateInputValueBeforeValidation(this);
+            validate(this);
+        })
+        .on(`input${namespace}`, selector, function () {
+            if (blurredFields.has(this)) validate(this);
+        });
+}
+
+export function resetBlurValidation(field) {
+    $(field).each((_, el) => blurredFields.delete(el));
+}