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

package/build/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/build/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 || '',
-    };
-}

package/src/components/order-address.hbs

@@ -1,28 +0,0 @@
-<div class="order-address d-none" data-order-address>
-  <div class="order-address__descr">
-    <h3 class="checkout-payment-details__title order-address__title">
-      Order address
-      {{> info-icon
-        title="Address details will only be stored and used to support order location should you need to call our Customer Services Team in the future."
-        data-placement="top"
-      }}
-    </h3>
-    <div class="warning-required">Required fields</div>
-
-    <div class="form-row">
-      <div class="form-row__field">
-        {{> checkbox
-          id="chb-order-address-delivery"
-          label="Use my delivery address"
-        }}
-      </div>
-    </div>
-
-    <div class="order-address__cols">
-      {{> form-row id="order-first-name" label="First name" required="true" maxlength="255" skipGlobalValidation=true}}
-      {{> form-row id="order-surname" label="Surname" required="true" maxlength="255" skipGlobalValidation=true}}
-    </div>
-
-    {{> postcode-lookup-v2 context="order-address"}}
-  </div>
-</div>

package/src/components/postcode-lookup-v2.hbs

@@ -1,85 +0,0 @@
-<div class="postcode-lookup" data-postcode-lookup="{{context}}">
-  <button type="button" class="postcode-lookup__expand-btn btn btn-tertiary d-none" data-postcode-lookup-expand>
-    <i class="fas fa-search" aria-hidden="true"></i>
-    <span>Address lookup</span>
-  </button>
-
-  <div class="postcode-lookup-autocomplete" data-postcode-lookup-search>
-    {{> form-row
-        id=(concat context "-address-search")
-        label="Find your address"
-        required="true"
-        textarea="true"
-        textareaRows="1"
-        placeholder="Type your postcode or first line of address"
-        autocomplete="disabled"
-        skipGlobalValidation=true
-        dataAttr="data-postcode-lookup-input"
-    }}
-    <i class="fas fa-search icon-element" aria-hidden="true"></i>
-
-    <div class="d-none" data-postcode-lookup-dropdown>
-      <ul role="listbox" data-postcode-lookup-list>
-        <li class="empty d-none" data-postcode-lookup-hint>
-          <i class="far fa-map-marked-alt map-icon" aria-hidden="true"></i>
-          <span class="hint">Start typing your postcode or first line of address</span>
-        </li>
-        <li class="manual-entry d-none" data-postcode-lookup-manual>
-          <span class="manual-entry-text">Don’t see your address?</span>
-          <button type="button" class="manual-entry-btn" data-postcode-lookup-manual-btn>
-            Enter address manually
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="postcode-lookup__cols">
-    {{> form-row
-      id=(concat context "-address-line-1")
-      label="Address line 1"
-      required="true"
-      maxlength="255"
-      autocomplete="disabled"
-      skipGlobalValidation=true
-      dataAttr="data-postcode-lookup-line1"
-    }}
-
-    <div class="postcode-lookup__line2">
-      <button type="button" class="show-line2-btn btn btn-tertiary" data-postcode-lookup-add-line2>
-        <i class="fas fa-plus" aria-hidden="true"></i>
-        <span>Add address line 2</span>
-      </button>
-      <div class="d-none" data-postcode-lookup-line2-wrap>
-        {{> form-row
-          id=(concat context "-address-line-2")
-          label="Address line 2"
-          maxlength="255"
-          autocomplete="disabled"
-          dataAttr="data-postcode-lookup-line2"
-        }}
-      </div>
-    </div>
-  </div>
-
-  <div class="postcode-lookup__cols">
-    {{> form-row
-      id=(concat context "-town-city")
-      label="Town/City"
-      required="true"
-      maxlength="255"
-      autocomplete="disabled"
-      skipGlobalValidation=true
-      dataAttr="data-postcode-lookup-town"
-    }}
-    {{> form-row
-      id=(concat context "-postcode")
-      label="Postcode"
-      required="true"
-      autocomplete="disabled"
-      skipGlobalValidation=true
-      dataAttr="data-postcode-lookup-postcode"
-    }}
-  </div>
-</div>
-

package/src/components/wismo-giftcard-payment-item.hbs

@@ -1,29 +0,0 @@
-<div class="wrap-item">
-  <div class="wrap-item__name">{{{name}}}</div>
-  <div class="wrap-item__value">
-    {{#if gift-cards}}
-      <div class="split-payment">
-        {{#if card-info}}
-          <span class="split-additional-info">
-            {{card-info.provider}}
-            <br>
-            {{card-info.maskedPin}}
-            <br>
-            {{card-info.expires}}
-          </span>
-        {{/if}}
-        <div class='giftcard-logo'>
-          <img src='./img/giftcard.svg' alt='giftcard'>
-        </div>
-        <span class="giftcard-title">Gift Card</span>
-        <ul class='giftcard-list'>
-          {{#each gift-cards}}
-            <li>{{this}}</li>
-          {{/each}}
-        </ul>
-      </div>
-    {{else}}
-      {{{value}}}
-    {{/if}}
-  </div>
-</div>

package/src/data/data_checkout-giftcards.json

@@ -1,7 +0,0 @@
-{
-  "giftcards": [
-    "************92713",
-    "************18735",
-    "************76946"
-  ]
-}