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

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

@@ -0,0 +1,56 @@
+import { resolvePostcodeToAddress } from '../../utils/address-utils';
+
+const DEFAULT_OPTIONS = {
+    apiKey: 'ak_ksfw10yaf8TFYw3IA6alHPLQatQsY',
+    baseUrl: 'https://api.ideal-postcodes.co.uk/v1',
+    country: 'GBR',
+};
+
+export function createPostcodeLookupApi(options = {}) {
+    const { apiKey, baseUrl, country } = { ...DEFAULT_OPTIONS, ...options };
+
+    const requests = {
+        async checkKey() {
+            const res = await fetch(`${baseUrl}/keys/${apiKey}`);
+            if (!res.ok) throw new Error(`Key check failed with status ${res.status}`);
+
+            const data = await res.json();
+            return { available: !!data.result?.available };
+        },
+
+        async autocomplete(query) {
+            const params = new URLSearchParams({
+                api_key: apiKey,
+                query,
+                context: country,
+            });
+            const res = await fetch(`${baseUrl}/autocomplete/addresses?${params}`);
+            if (!res.ok) throw new Error(`Autocomplete failed with status ${res.status}`);
+
+            const data = await res.json();
+            return data.result?.hits || [];
+        },
+
+        async resolve(suggestion) {
+            const id = encodeURIComponent(suggestion.id);
+            const res = await fetch(
+                `${baseUrl}/autocomplete/addresses/${id}/${country.toLowerCase()}?api_key=${apiKey}`
+            );
+            if (!res.ok) throw new Error(`Resolve failed with status ${res.status}`);
+
+            const data = await res.json();
+            return data.result || null;
+        },
+    };
+
+    Object.assign(requests, (window.Wick && window.Wick.PostcodeLookupApi) || {});
+
+    return {
+        checkKey: () => requests.checkKey(),
+        autocomplete: (query) => requests.autocomplete(query),
+        async resolve(suggestion) {
+            const result = await requests.resolve(suggestion);
+            return result ? resolvePostcodeToAddress(result) : null;
+        },
+    };
+}

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

@@ -0,0 +1,98 @@
+export const MODES = {
+    LOOKUP: 'lookup',
+    MANUAL: 'manual',
+    UNAVAILABLE: 'unavailable',
+};
+
+export const classes = {
+    item: 'address-suggestion',
+    highlighted: 'is-highlighted',
+    match: 'text-match',
+    hidden: 'd-none',
+};
+
+const MANUAL_PLACEHOLDERS = {
+    line1: 'Type address line 1',
+    line2: 'Type address line 2',
+    town: 'Type town/city',
+    postcode: 'Type postcode',
+};
+
+function renderSuggestionParts(text, query) {
+    const index = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
+    if (index === -1) return [$('<span>', { text })];
+
+    return [
+        { text: text.slice(0, index), isMatch: false },
+        { text: text.slice(index, index + query.length), isMatch: true },
+        { text: text.slice(index + query.length), isMatch: false },
+    ]
+        .filter((part) => part.text)
+        .map((part) => $('<span>', { text: part.text }).toggleClass(classes.match, part.isMatch));
+}
+
+export function renderDropdown(lookup) {
+    const { state, $search, $dropdown, $hint, $manual, $list } = lookup;
+
+    $dropdown.toggleClass(classes.hidden, !state.isOpen);
+    if (!state.isOpen) return;
+
+    const isEmptyQuery = !$search.val();
+
+    $hint.toggleClass(classes.hidden, !isEmptyQuery);
+    $manual.toggleClass(classes.hidden, isEmptyQuery);
+    $list.find('.' + classes.item).remove();
+
+    if (isEmptyQuery) return;
+
+    const query = $search.val().trim();
+    const $items = state.suggestions.map((item, index) =>
+        $('<li>', {
+            class: classes.item,
+            role: 'option',
+            tabindex: -1,
+            'data-index': index,
+        })
+            .append(renderSuggestionParts(item.suggestion, query))
+            .toggleClass(classes.highlighted, index === state.highlightedIndex)
+    );
+
+    $manual.before($items);
+}
+
+export function renderHighlight(lookup) {
+    const { state, $list } = lookup;
+
+    $list.find('.' + classes.item).each(function () {
+        $(this).toggleClass(classes.highlighted, $(this).data('index') === state.highlightedIndex);
+    });
+}
+
+export function renderMode(lookup) {
+    const { state, $searchWrap, $expand } = lookup;
+
+    $searchWrap.toggleClass(classes.hidden, state.mode !== MODES.LOOKUP);
+    $expand.toggleClass(classes.hidden, state.mode !== MODES.MANUAL);
+    autoGrow(lookup);
+}
+
+export function toggleManualPlaceholders(lookup, isShown) {
+    const { $fields } = lookup;
+
+    Object.keys(MANUAL_PLACEHOLDERS).forEach((key) => {
+        $fields[key].attr('placeholder', isShown ? MANUAL_PLACEHOLDERS[key] : '');
+    });
+}
+
+export function autoGrow(lookup) {
+    const { $search } = lookup;
+
+    if (!$search.is(':visible')) return;
+
+    const el = $search[0];
+    const { placeholder } = el;
+    el.placeholder = '';
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+    el.placeholder = placeholder;
+}

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

@@ -0,0 +1,81 @@
+import {
+    isAntiXssValid,
+    isElementInViewport,
+    isFieldRowVisible,
+    isValidLookupPostcode,
+    updateStylingErrorForElement,
+    validateFieldByRule,
+} from '../../utils/validation';
+import errorMessages from '../../utils/errorMesages';
+import { scrollToElement } from '../../utils/helpers';
+import { toCanonicalPostcode } from '../../utils/address-utils';
+
+const SCROLL_OFFSET = 100;
+const FORM_ROW_SELECTOR = '.form-row';
+
+export const ADDRESS_FIELDS = ['line1', 'line2', 'town', 'postcode'];
+
+const isPostcodeValid = (value) => isValidLookupPostcode(toCanonicalPostcode(value));
+
+const fieldRules = {
+    line1: {
+        required: true,
+        validate: isAntiXssValid,
+        message: errorMessages.errorAddressLine1,
+    },
+    line2: {
+        required: false,
+        validate: isAntiXssValid,
+        message: errorMessages.errorAddressLine2,
+    },
+    town: {
+        required: true,
+        validate: isAntiXssValid,
+        message: errorMessages.errorTown,
+    },
+    postcode: {
+        required: true,
+        validate: isPostcodeValid,
+        message: errorMessages.errorPostcode,
+    },
+};
+
+export function validateField(lookup, key) {
+    const { $fields } = lookup;
+
+    return validateFieldByRule($fields[key], fieldRules[key]);
+}
+
+export function validateSearch(lookup) {
+    const { state, $search, $fields } = lookup;
+
+    if (!isFieldRowVisible($search)) return true;
+
+    const hasAddressFields = ADDRESS_FIELDS.some((key) => $fields[key].val());
+    const isValid = !!$search.val() && (state.isOpen || hasAddressFields);
+
+    updateStylingErrorForElement($search, isValid, errorMessages.errorAddress);
+    return isValid;
+}
+
+export function validateAddressInputs(lookup) {
+    ADDRESS_FIELDS.forEach((key) => validateField(lookup, key));
+}
+
+export function validate(lookup, { shouldScroll = true } = {}) {
+    const { $search, $fields } = lookup;
+    const checks = [
+        { $field: $search, isValid: validateSearch(lookup) },
+        ...ADDRESS_FIELDS.map((key) => ({
+            $field: $fields[key],
+            isValid: validateField(lookup, key),
+        })),
+    ];
+    const firstInvalid = checks.find((check) => !check.isValid);
+
+    if (firstInvalid && shouldScroll) {
+        const $row = firstInvalid.$field.closest(FORM_ROW_SELECTOR);
+        if (!isElementInViewport($row)) scrollToElement($row, SCROLL_OFFSET);
+    }
+    return !firstInvalid;
+}