wickes-css2 2.117.0-gift-cards.2 → 2.117.1-develop.1

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

@@ -1,503 +0,0 @@
-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/src/js/page/utils/address-utils.js

@@ -1,32 +0,0 @@
-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 || '',
-    };
-}