@athoscommerce/snap-controller 1.0.0

package/dist/esm/Autocomplete/AutocompleteController.js

@@ -0,0 +1,882 @@
+import deepmerge from 'deepmerge';
+import { StorageStore, ErrorType } from '@athoscommerce/snap-store-mobx';
+import { AbstractController } from '../Abstract/AbstractController';
+import { getSearchParams } from '../utils/getParams';
+import { ControllerTypes } from '../types';
+import { CLICK_DUPLICATION_TIMEOUT, isClickWithinProductLink } from '../utils/isClickWithinProductLink';
+import { isClickWithinBannerLink } from '../utils/isClickWithinBannerLink';
+const INPUT_ATTRIBUTE = 'ss-autocomplete-input';
+export const INPUT_DELAY = 200;
+const KEY_ENTER = 13;
+const KEY_ESCAPE = 27;
+const PARAM_FALLBACK_QUERY = 'fallbackQuery';
+const defaultConfig = {
+    id: 'autocomplete',
+    selector: '',
+    action: '',
+    globals: {},
+    beacon: {
+        enabled: true,
+    },
+    settings: {
+        initializeFromUrl: true,
+        syncInputs: true,
+        serializeForm: false,
+        facets: {
+            trim: true,
+            pinFiltered: true,
+        },
+        redirects: {
+            merchandising: true,
+            singleResult: false,
+        },
+        bind: {
+            input: true,
+            submit: true,
+        },
+    },
+};
+export class AutocompleteController extends AbstractController {
+    constructor(config, { client, store, urlManager, eventManager, profiler, logger, tracker }, context) {
+        super(config, { client, store, urlManager, eventManager, profiler, logger, tracker }, context);
+        this.type = ControllerTypes.autocomplete;
+        this.events = {};
+        this.track = {
+            banner: {
+                impression: (_banner) => {
+                    if (!_banner) {
+                        this.log.warn('No banner provided to track.banner.impression');
+                        return;
+                    }
+                    const { responseId, uid } = _banner;
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    else if (this.events?.[responseId]?.banner?.[uid]?.impression) {
+                        return;
+                    }
+                    const banner = { uid };
+                    const data = {
+                        responseId,
+                        banners: [banner],
+                        results: [],
+                    };
+                    this.eventManager.fire('track.banner.impression', { controller: this, product: { uid }, trackEvent: data });
+                    this.config.beacon?.enabled && this.tracker.events.autocomplete.impression({ data, siteId: this.config.globals?.siteId });
+                    this.events[responseId].banner[uid] = this.events[responseId].banner[uid] || {};
+                    this.events[responseId].banner[uid].impression = true;
+                },
+                click: (e, banner) => {
+                    if (!banner) {
+                        this.log.warn('No banner provided to track.banner.click');
+                        return;
+                    }
+                    const { responseId, uid } = banner;
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    if (isClickWithinBannerLink(e)) {
+                        if (this.events?.[responseId]?.banner[uid]?.clickThrough) {
+                            return;
+                        }
+                        this.track.banner.clickThrough(e, banner);
+                        this.events[responseId].banner[uid] = this.events[responseId].banner[uid] || {};
+                        this.events[responseId].banner[uid].clickThrough = true;
+                        setTimeout(() => {
+                            this.events[responseId].banner[uid].clickThrough = false;
+                        }, CLICK_DUPLICATION_TIMEOUT);
+                    }
+                },
+                clickThrough: (e, { uid, responseId }) => {
+                    if (!uid) {
+                        this.log.warn('No banner uid provided to track.banner.clickThrough');
+                        return;
+                    }
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    const banner = { uid };
+                    const data = {
+                        responseId,
+                        banners: [banner],
+                    };
+                    this.eventManager.fire('track.banner.clickThrough', { controller: this, event: e, product: { uid }, trackEvent: data });
+                    this.config.beacon?.enabled && this.tracker.events.autocomplete.clickThrough({ data, siteId: this.config.globals?.siteId });
+                    this.events[responseId].banner[uid] = this.events[responseId].banner[uid] || {};
+                    this.events[responseId].banner[uid].clickThrough = true;
+                    setTimeout(() => {
+                        this.events[responseId].banner[uid].clickThrough = false;
+                    }, CLICK_DUPLICATION_TIMEOUT);
+                },
+            },
+            product: {
+                clickThrough: (e, result) => {
+                    if (!result) {
+                        this.log.warn('No result provided to track.product.clickThrough');
+                        return;
+                    }
+                    const responseId = result.responseId;
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    const type = (['product', 'banner'].includes(result.type) ? result.type : 'product');
+                    const item = {
+                        type,
+                        uid: result.id ? '' + result.id : '',
+                        ...(type === 'product'
+                            ? {
+                                parentId: result.mappings.core?.parentId ? '' + result.mappings.core?.parentId : '',
+                                sku: result.mappings.core?.sku ? '' + result.mappings.core?.sku : undefined,
+                            }
+                            : {}),
+                    };
+                    const data = {
+                        responseId,
+                        results: [item],
+                    };
+                    this.eventManager.fire('track.product.clickThrough', { controller: this, event: e, product: result, trackEvent: data });
+                    this.config.beacon?.enabled && this.tracker.events.autocomplete.clickThrough({ data, siteId: this.config.globals?.siteId });
+                },
+                click: (e, result) => {
+                    if (!result) {
+                        this.log.warn('No result provided to track.product.click');
+                        return;
+                    }
+                    const responseId = result.responseId;
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    if (result.type === 'banner' && isClickWithinBannerLink(e)) {
+                        if (this.events?.[responseId]?.product[result.id]?.inlineBannerClickThrough) {
+                            return;
+                        }
+                        this.track.product.clickThrough(e, result);
+                        this.events[responseId].product[result.id] = this.events[responseId].product[result.id] || {};
+                        this.events[responseId].product[result.id].inlineBannerClickThrough = true;
+                        setTimeout(() => {
+                            this.events[responseId].product[result.id].inlineBannerClickThrough = false;
+                        }, CLICK_DUPLICATION_TIMEOUT);
+                    }
+                    else if (isClickWithinProductLink(e, result)) {
+                        if (this.events?.[responseId]?.product[result.id]?.productClickThrough) {
+                            return;
+                        }
+                        this.track.product.clickThrough(e, result);
+                        this.events[responseId].product[result.id] = this.events[responseId].product[result.id] || {};
+                        this.events[responseId].product[result.id].productClickThrough = true;
+                        setTimeout(() => {
+                            this.events[responseId].product[result.id].productClickThrough = false;
+                        }, CLICK_DUPLICATION_TIMEOUT);
+                    }
+                },
+                impression: (result) => {
+                    if (!result) {
+                        this.log.warn('No result provided to track.product.impression');
+                        return;
+                    }
+                    const responseId = result.responseId;
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    else if (this.events?.[responseId]?.product[result.id]?.impression) {
+                        return;
+                    }
+                    const type = (['product', 'banner'].includes(result.type) ? result.type : 'product');
+                    const item = {
+                        type,
+                        uid: result.id ? '' + result.id : '',
+                        ...(type === 'product'
+                            ? {
+                                parentId: result.mappings.core?.parentId ? '' + result.mappings.core?.parentId : '',
+                                sku: result.mappings.core?.sku ? '' + result.mappings.core?.sku : undefined,
+                            }
+                            : {}),
+                    };
+                    const data = {
+                        responseId,
+                        results: [item],
+                        banners: [],
+                    };
+                    this.eventManager.fire('track.product.impression', { controller: this, product: result, trackEvent: data });
+                    this.config.beacon?.enabled && this.tracker.events.autocomplete.impression({ data, siteId: this.config.globals?.siteId });
+                    this.events[responseId].product[result.id] = this.events[responseId].product[result.id] || {};
+                    this.events[responseId].product[result.id].impression = true;
+                },
+                addToCart: (result) => {
+                    if (!result) {
+                        this.log.warn('No result provided to track.product.addToCart');
+                        return;
+                    }
+                    const responseId = result.responseId;
+                    if (!this.events[responseId]) {
+                        this.log.warn('No responseId found in controller, ensure correct controller is used');
+                        return;
+                    }
+                    const product = {
+                        parentId: result.id,
+                        uid: result.id,
+                        sku: result.mappings.core?.sku,
+                        qty: result.quantity || 1,
+                        price: Number(result.mappings.core?.price),
+                    };
+                    const data = {
+                        responseId,
+                        results: [product],
+                    };
+                    this.eventManager.fire('track.product.addToCart', { controller: this, product: result, trackEvent: data });
+                    this.config.beacon?.enabled && this.tracker.events.autocomplete.addToCart({ data, siteId: this.config.globals?.siteId });
+                },
+            },
+            redirect: ({ redirectURL, responseId }) => {
+                if (!redirectURL) {
+                    this.log.warn('No redirectURL provided to track.redirect');
+                    return;
+                }
+                const data = {
+                    responseId,
+                    redirect: redirectURL,
+                };
+                this.eventManager.fire('track.redirect', { controller: this, redirectURL, trackEvent: data });
+                this.config.beacon?.enabled && this.tracker.events.autocomplete.redirect({ data, siteId: this.config.globals?.siteId });
+            },
+        };
+        this.handlers = {
+            input: {
+                enterKey: async (e) => {
+                    if (e.keyCode == KEY_ENTER) {
+                        const input = e.target;
+                        let actionUrl = this.store.services.urlManager;
+                        e.preventDefault();
+                        // wait until loading is complete before submission
+                        while (this.store.loading) {
+                            await timeout(INPUT_DELAY);
+                        }
+                        // set fallbackQuery to the correctedQuery
+                        if (this.store.search.correctedQuery) {
+                            actionUrl = actionUrl?.set(PARAM_FALLBACK_QUERY, this.store.search.correctedQuery.string);
+                        }
+                        actionUrl = actionUrl?.set('query', input.value);
+                        // wait for input delay
+                        await timeout(INPUT_DELAY + 1);
+                        try {
+                            await this.eventManager.fire('beforeSubmit', {
+                                controller: this,
+                                input,
+                            });
+                        }
+                        catch (err) {
+                            if (err?.message == 'cancelled') {
+                                this.log.warn(`'beforeSubmit' middleware cancelled`);
+                                return;
+                            }
+                            else {
+                                this.log.error(`error in 'beforeSubmit' middleware`);
+                                console.error(err);
+                            }
+                        }
+                        window.location.href = actionUrl?.href || '';
+                    }
+                },
+                escKey: (e) => {
+                    if (e.keyCode == KEY_ESCAPE) {
+                        e.target.blur();
+                        this.setFocused();
+                    }
+                },
+                focus: (e) => {
+                    e.stopPropagation();
+                    // timeout to ensure focus happens AFTER click
+                    setTimeout(() => {
+                        this.setFocused(e.target);
+                    });
+                },
+                formSubmit: async (e) => {
+                    const form = e.target;
+                    const input = form.querySelector(`input[${INPUT_ATTRIBUTE}]`);
+                    e.preventDefault();
+                    // wait until loading is complete before submission
+                    while (this.store.loading) {
+                        await timeout(INPUT_DELAY);
+                    }
+                    // set fallbackQuery to the correctedQuery
+                    if (this.store.search.correctedQuery) {
+                        addHiddenFormInput(form, PARAM_FALLBACK_QUERY, this.store.search.correctedQuery.string);
+                    }
+                    // wait for input delay
+                    await timeout(INPUT_DELAY + 1);
+                    try {
+                        await this.eventManager.fire('beforeSubmit', {
+                            controller: this,
+                            input,
+                        });
+                    }
+                    catch (err) {
+                        if (err?.message == 'cancelled') {
+                            this.log.warn(`'beforeSubmit' middleware cancelled`);
+                            return;
+                        }
+                        else {
+                            this.log.error(`error in 'beforeSubmit' middleware`);
+                            console.error(err);
+                        }
+                    }
+                    form.submit();
+                },
+                formElementChange: (e) => {
+                    const input = e.target;
+                    const form = input?.form;
+                    const searchInput = form?.querySelector(`input[${INPUT_ATTRIBUTE}]`);
+                    if (form && searchInput && this.config.settings?.serializeForm) {
+                        // get other form parameters (except the input)
+                        const formParameters = getFormParameters(form, function (elem) {
+                            return elem != searchInput;
+                        });
+                        // set parameters as globals
+                        this.store.setService('urlManager', this.store.services.urlManager.reset().withGlobals(formParameters));
+                        this.store.reset();
+                        // rebuild trending terms with new UrlManager settings
+                        if (this.config.settings?.trending?.enabled && this.config.settings?.trending?.limit && this.config.settings?.trending?.limit > 0) {
+                            this.searchTrending();
+                        }
+                    }
+                },
+                input: (e) => {
+                    // return focus on input if it was lost
+                    if (e.isTrusted && this.store.state.focusedInput !== e.target) {
+                        this.setFocused(e.target);
+                    }
+                    const value = e.target.value;
+                    // prevent search when value is unchanged or empty
+                    if (((!this.store.state.input && !value) || this.store.state.input == value) && this.store.loaded) {
+                        return;
+                    }
+                    this.store.state.source = 'input';
+                    this.store.state.input = value;
+                    // remove merch redirect to prevent race condition
+                    this.store.merchandising.redirect = '';
+                    if (this.config?.settings?.syncInputs) {
+                        const inputs = document.querySelectorAll(this.config.selector);
+                        inputs.forEach((input) => {
+                            input.value = value;
+                        });
+                    }
+                    // TODO cancel any current requests?
+                    clearTimeout(this.handlers.input.timeoutDelay);
+                    const trendingResultsEnabled = this.store.trending?.length && this.config.settings?.trending?.enabled && this.config.settings?.trending?.showResults;
+                    const historyResultsEnabled = this.store.history?.length && this.config.settings?.history?.enabled && this.config.settings?.history?.showResults;
+                    this.handlers.input.timeoutDelay = setTimeout(() => {
+                        if (!value) {
+                            // there is no input value - reset state of store
+                            this.store.reset();
+                            // show results for trending or history (if configured) - trending has priority
+                            if (trendingResultsEnabled) {
+                                this.store.trending[0].preview();
+                            }
+                            else if (historyResultsEnabled) {
+                                this.store.history[0].preview();
+                            }
+                            else {
+                                // no input - need to reset URL
+                                this.urlManager.reset().go();
+                            }
+                        }
+                        else {
+                            // new query in the input - trigger a new search via UrlManager
+                            this.store.state.locks.terms.unlock();
+                            this.store.state.locks.facets.unlock();
+                            this.urlManager.set({ query: this.store.state.input }).go();
+                        }
+                    }, INPUT_DELAY);
+                },
+                timeoutDelay: undefined,
+            },
+            document: {
+                click: (e) => {
+                    const inputs = document.querySelectorAll(this.config.selector);
+                    // if the click is on an input or a form with inputs, stop propagation
+                    if (Array.from(inputs).includes(e.target) ||
+                        (e.target?.nodeName == 'FORM' && e.target.querySelectorAll(this.config.selector).length)) {
+                        e.stopPropagation();
+                    }
+                    else {
+                        this.setFocused();
+                    }
+                },
+            },
+        };
+        this.searchTrending = async (options) => {
+            let trending;
+            const storedTerms = this.storage.get('terms');
+            if (storedTerms && !options?.limit) {
+                // terms exist in storage, update store
+                trending = JSON.parse(storedTerms);
+            }
+            else {
+                // query for trending terms, save to storage, update store
+                const trendingParams = {
+                    limit: options?.limit || this.config.settings?.trending?.limit || 5,
+                };
+                const trendingProfile = this.profiler.create({ type: 'event', name: 'trending', context: trendingParams }).start();
+                trending = await this.client.trending(trendingParams);
+                trendingProfile.stop();
+                this.log.profile(trendingProfile);
+                if (trending?.trending.queries?.length) {
+                    this.storage.set('terms', JSON.stringify(trending));
+                }
+            }
+            this.store.updateTrendingTerms(trending);
+        };
+        this.search = async () => {
+            try {
+                if (!this.initialized) {
+                    await this.init();
+                }
+                // if urlManager has no query, there will be no need to get params and no query
+                if (!this.urlManager.state.query) {
+                    return;
+                }
+                const params = this.params;
+                // if params have no query do not search
+                if (!params?.search?.query?.string) {
+                    return;
+                }
+                this.store.loading = true;
+                // clear the redirect URL until proper abort functionality is implemented
+                this.store.merchandising.redirect = '';
+                try {
+                    await this.eventManager.fire('beforeSearch', {
+                        controller: this,
+                        request: params,
+                    });
+                }
+                catch (err) {
+                    if (err?.message == 'cancelled') {
+                        this.log.warn(`'beforeSearch' middleware cancelled`);
+                        return;
+                    }
+                    else {
+                        this.log.error(`error in 'beforeSearch' middleware`);
+                        throw err;
+                    }
+                }
+                const searchProfile = this.profiler.create({ type: 'event', name: 'search', context: params }).start();
+                const { meta, search } = await this.client.autocomplete(params);
+                searchProfile.stop();
+                this.log.profile(searchProfile);
+                const responseId = search.tracking.responseId;
+                this.events[responseId] = this.events[responseId] || { product: {}, banner: {} };
+                const previousResponseId = this.store.results[0]?.responseId;
+                if (previousResponseId && previousResponseId === responseId) {
+                    const impressedResultIds = Object.keys(this.events[responseId].product || {}).filter((resultId) => this.events[responseId].product?.[resultId]?.impression);
+                    this.events[responseId] = {
+                        product: impressedResultIds.reduce((acc, resultId) => {
+                            acc[resultId] = { impression: true };
+                            return acc;
+                        }, {}),
+                        banner: this.events[responseId].banner,
+                    };
+                }
+                else {
+                    this.events[responseId] = { product: {}, banner: {} };
+                }
+                const afterSearchProfile = this.profiler.create({ type: 'event', name: 'afterSearch', context: params }).start();
+                try {
+                    await this.eventManager.fire('afterSearch', {
+                        controller: this,
+                        request: params,
+                        response: {
+                            meta,
+                            search,
+                        },
+                    });
+                }
+                catch (err) {
+                    if (err?.message == 'cancelled') {
+                        this.log.warn(`'afterSearch' middleware cancelled`);
+                        afterSearchProfile.stop();
+                        return;
+                    }
+                    else {
+                        this.log.error(`error in 'afterSearch' middleware`);
+                        throw err;
+                    }
+                }
+                afterSearchProfile.stop();
+                this.log.profile(afterSearchProfile);
+                // update the store
+                this.store.update({ meta, search });
+                const data = { responseId };
+                this.config.beacon?.enabled && this.tracker.events.autocomplete.render({ data, siteId: this.config.globals?.siteId });
+                const afterStoreProfile = this.profiler.create({ type: 'event', name: 'afterStore', context: params }).start();
+                try {
+                    await this.eventManager.fire('afterStore', {
+                        controller: this,
+                        request: params,
+                        response: {
+                            meta,
+                            search,
+                        },
+                    });
+                }
+                catch (err) {
+                    if (err?.message == 'cancelled') {
+                        this.log.warn(`'afterStore' middleware cancelled`);
+                        afterStoreProfile.stop();
+                        return;
+                    }
+                    else {
+                        this.log.error(`error in 'afterStore' middleware`);
+                        throw err;
+                    }
+                }
+                afterStoreProfile.stop();
+                this.log.profile(afterStoreProfile);
+            }
+            catch (err) {
+                if (err) {
+                    if (err.err && err.fetchDetails) {
+                        switch (err.fetchDetails.status) {
+                            case 429: {
+                                this.store.error = {
+                                    code: 429,
+                                    type: ErrorType.WARNING,
+                                    message: 'Too many requests try again later',
+                                };
+                                break;
+                            }
+                            case 500: {
+                                this.store.error = {
+                                    code: 500,
+                                    type: ErrorType.ERROR,
+                                    message: 'Invalid Search Request or Service Unavailable',
+                                };
+                                break;
+                            }
+                            default: {
+                                this.store.error = {
+                                    type: ErrorType.ERROR,
+                                    message: err.err.message,
+                                };
+                                break;
+                            }
+                        }
+                        this.log.error(this.store.error);
+                        this.handleError(err.err, err.fetchDetails);
+                    }
+                    else {
+                        this.store.error = {
+                            type: ErrorType.ERROR,
+                            message: `Something went wrong... - ${err}`,
+                        };
+                        this.log.error(err);
+                        this.handleError(err);
+                    }
+                }
+            }
+            finally {
+                this.store.loading = false;
+            }
+        };
+        this.addToCart = async (_products) => {
+            const products = typeof _products?.slice == 'function' ? _products.slice() : [_products];
+            if (!_products || products.length === 0) {
+                this.log.warn('No products provided to autocomplete controller.addToCart');
+                return;
+            }
+            products.forEach((product) => {
+                this.track.product.addToCart(product);
+            });
+            if (products.length > 0) {
+                this.eventManager.fire('addToCart', { controller: this, products });
+            }
+        };
+        // deep merge config with defaults
+        this.config = deepmerge(defaultConfig, this.config);
+        // normalize trending config (old method requires only a limit to be set)
+        if (this.config.settings?.trending?.limit && typeof this.config.settings?.trending?.enabled === 'undefined') {
+            this.config.settings = {
+                ...this.config.settings,
+                trending: {
+                    enabled: true,
+                    ...this.config.settings.trending,
+                },
+            };
+        }
+        // normalize history config (old method requires only a limit to be set)
+        if (this.config.settings?.history?.limit && typeof this.config.settings?.history?.enabled === 'undefined') {
+            this.config.settings = {
+                ...this.config.settings,
+                history: {
+                    enabled: true,
+                    ...this.config.settings.history,
+                },
+            };
+        }
+        this.store.setConfig(this.config);
+        // get current search from url before detaching
+        if (this.config.settings.initializeFromUrl) {
+            this.store.state.input = this.urlManager.state.query;
+            // reset to force search on focus
+            // TODO: make a config setting for this
+            this.urlManager.reset().go();
+        }
+        // persist trending terms in local storage
+        this.storage = new StorageStore({
+            type: 'session',
+            key: `athos-controller-${this.config.id}`,
+        });
+        // add 'afterSearch' middleware
+        this.eventManager.on('afterSearch', async (ac, next) => {
+            await next();
+            // cancel search if no input or query doesn't match current urlState
+            if (ac.response.search.autocomplete?.query != ac.controller.urlManager.state.query) {
+                return false;
+            }
+        });
+        this.eventManager.on('beforeSubmit', async (ac, next) => {
+            await next();
+            const loading = ac.controller.store.loading;
+            if (loading)
+                return;
+            const inputState = ac.controller.store.state.input;
+            const redirectURL = ac.controller.store.merchandising?.redirect;
+            if (this.config?.settings?.redirects?.merchandising && inputState && redirectURL) {
+                this.track.redirect({ redirectURL, responseId: ac.controller.store.merchandising?.responseId });
+                window.location.href = redirectURL;
+                return false;
+            }
+            if (this.config?.settings?.redirects?.singleResult) {
+                const { results } = ac.controller.store;
+                //remove inline banners
+                const filteredResults = results.filter((result) => result.type == 'product');
+                const singleResultUrl = filteredResults.length === 1 && filteredResults[0].mappings.core?.url;
+                if (singleResultUrl) {
+                    window.location.href = singleResultUrl;
+                    return false;
+                }
+            }
+        });
+        // attach config plugins and event middleware
+        this.use(this.config);
+    }
+    get params() {
+        const urlState = this.urlManager.state;
+        const params = deepmerge({ ...getSearchParams(urlState) }, this.config.globals || {});
+        const { userId, sessionId, pageLoadId, shopperId } = this.tracker.getContext();
+        params.tracking = params.tracking || {};
+        params.tracking.domain = window.location.href;
+        if (userId) {
+            params.tracking.userId = userId;
+        }
+        if (sessionId) {
+            params.tracking.sessionId = sessionId;
+        }
+        if (pageLoadId) {
+            params.tracking.pageLoadId = pageLoadId;
+        }
+        if (this.store.state.input) {
+            params.search = params.search || {};
+            params.search.input = this.store.state.input;
+        }
+        if (this.store.state.source) {
+            params.search = params.search || {};
+            params.search.source = this.store.state.source;
+        }
+        if (!this.config.globals?.personalization?.disabled) {
+            const cartItems = this.tracker.cookies.cart.get();
+            if (cartItems.length) {
+                params.personalization = params.personalization || {};
+                params.personalization.cart = cartItems.join(',');
+            }
+            const lastViewedItems = this.tracker.cookies.viewed.get();
+            if (lastViewedItems.length) {
+                params.personalization = params.personalization || {};
+                params.personalization.lastViewed = lastViewedItems.join(',');
+            }
+            if (shopperId) {
+                params.personalization = params.personalization || {};
+                params.personalization.shopper = shopperId;
+            }
+        }
+        return params;
+    }
+    async setFocused(inputElement) {
+        if (this.store.state.focusedInput !== inputElement) {
+            this.store.state.focusedInput = inputElement;
+            // fire focusChange event
+            try {
+                try {
+                    await this.eventManager.fire('focusChange', {
+                        controller: this,
+                    });
+                }
+                catch (err) {
+                    if (err?.message == 'cancelled') {
+                        this.log.warn(`'focusChange' middleware cancelled`);
+                    }
+                    else {
+                        this.log.error(`error in 'focusChange' middleware`);
+                        throw err;
+                    }
+                }
+            }
+            catch (err) {
+                if (err) {
+                    console.error(err);
+                }
+            }
+        }
+        inputElement?.dispatchEvent(new Event('input'));
+    }
+    reset() {
+        // reset input values and state
+        const inputs = document.querySelectorAll(this.config.selector);
+        inputs.forEach((input) => {
+            input.value = '';
+        });
+        this.store.reset();
+    }
+    unbind() {
+        const inputs = document.querySelectorAll(`input[${INPUT_ATTRIBUTE}]`);
+        inputs?.forEach((input) => {
+            input.removeEventListener('input', this.handlers.input.input);
+            input.removeEventListener('keydown', this.handlers.input.enterKey);
+            input.removeEventListener('keydown', this.handlers.input.escKey);
+            input.removeEventListener('focus', this.handlers.input.focus);
+            if (input.form) {
+                input.form.removeEventListener('submit', this.handlers.input.formSubmit);
+                unbindFormParameters(input.form, this.handlers.input.formElementChange);
+            }
+        });
+        document.removeEventListener('click', this.handlers.document.click);
+    }
+    async bind() {
+        if (!this.initialized) {
+            await this.init();
+        }
+        this.unbind();
+        const inputs = document.querySelectorAll(this.config.selector);
+        inputs.forEach((input) => {
+            input.setAttribute('spellcheck', 'false');
+            input.setAttribute('autocomplete', 'off');
+            input.setAttribute('autocorrect', 'off');
+            input.setAttribute('autocapitalize', 'none');
+            input.setAttribute(INPUT_ATTRIBUTE, '');
+            this.config.settings?.bind?.input && input.addEventListener('input', this.handlers.input.input);
+            if (this.config?.settings?.initializeFromUrl && !input.value && this.store.state.input) {
+                input.value = this.store.state.input;
+            }
+            input.addEventListener('focus', this.handlers.input.focus);
+            input.addEventListener('keydown', this.handlers.input.escKey);
+            const form = input.form;
+            let formActionUrl;
+            if (this.config.action) {
+                this.config.settings?.bind?.submit && input.addEventListener('keydown', this.handlers.input.enterKey);
+                formActionUrl = this.config.action;
+            }
+            else if (form) {
+                this.config.settings?.bind?.submit && form.addEventListener('submit', this.handlers.input.formSubmit);
+                formActionUrl = form.action || '';
+                // serializeForm will include additional form element in our urlManager as globals
+                if (this.config.settings?.serializeForm) {
+                    bindFormParameters(form, this.handlers.input.formElementChange, function (elem) {
+                        return elem != input;
+                    });
+                    const formParameters = getFormParameters(form, function (elem) {
+                        return elem != input;
+                    });
+                    // set parameters as globals
+                    this.store.setService('urlManager', this.urlManager.reset().withGlobals(formParameters));
+                }
+            }
+            // set the root URL on urlManager
+            if (formActionUrl) {
+                this.store.setService('urlManager', this.store.services.urlManager.withConfig((translatorConfig) => {
+                    return {
+                        ...translatorConfig,
+                        urlRoot: formActionUrl,
+                    };
+                }));
+            }
+            // if the input is currently focused, trigger setFocues which will eventually trigger input - but not if loading
+            if (document.activeElement === input && !this.store.loading) {
+                this.setFocused(input);
+            }
+        });
+        // get trending terms - this is at the bottom because urlManager changes need to be in place before creating the store
+        if (this.config.settings?.trending?.enabled &&
+            this.config.settings?.trending?.limit &&
+            this.config.settings?.trending?.limit > 0 &&
+            !this.store.trending?.length) {
+            this.searchTrending();
+        }
+        // if we are not preventing via `disableClickOutside` setting
+        if (!this.config.settings?.disableClickOutside) {
+            document.addEventListener('click', this.handlers.document.click);
+        }
+    }
+}
+function addHiddenFormInput(form, name, value) {
+    const inputElem = document.createElement('input');
+    inputElem.type = 'hidden';
+    inputElem.name = name;
+    inputElem.value = value;
+    // remove existing form element if it exists (prevent duplicates)
+    form.querySelector(`[type="hidden"][name="${name}"]`)?.remove();
+    // append form element
+    form.append(inputElem);
+}
+async function timeout(time) {
+    return new Promise((resolve) => {
+        window.setTimeout(resolve, time);
+    });
+}
+// for grabbing other parameters from the form and using them in UrlManager
+const INPUT_TYPE_BLOCKLIST = ['file', 'reset', 'submit', 'button', 'image', 'password'];
+function getFormParameters(form, filterFn) {
+    const parameters = {};
+    if (typeof form == 'object' && form.nodeName == 'FORM') {
+        for (let i = form.elements.length - 1; i >= 0; i--) {
+            const elem = form.elements[i];
+            if (typeof filterFn == 'function' && !filterFn(elem)) {
+                continue;
+            }
+            if (elem.name && !INPUT_TYPE_BLOCKLIST.includes(elem.type)) {
+                if ((elem.type != 'checkbox' && elem.type != 'radio') || elem.checked) {
+                    parameters[elem.name] = elem.value;
+                }
+            }
+        }
+    }
+    return parameters;
+}
+// this picks up changes to the form
+function bindFormParameters(form, fn, filterFn) {
+    if (typeof form == 'object' && form.nodeName == 'FORM') {
+        for (let i = form.elements.length - 1; i >= 0; i--) {
+            const elem = form.elements[i];
+            if (typeof filterFn == 'function' && !filterFn(elem)) {
+                continue;
+            }
+            if (elem.name && !INPUT_TYPE_BLOCKLIST.includes(elem.type)) {
+                elem.addEventListener('change', fn);
+            }
+        }
+    }
+}
+function unbindFormParameters(form, fn) {
+    if (typeof form == 'object' && form.nodeName == 'FORM') {
+        for (let i = form.elements.length - 1; i >= 0; i--) {
+            const elem = form.elements[i];
+            if (elem.name && !INPUT_TYPE_BLOCKLIST.includes(elem.type)) {
+                elem.removeEventListener('change', fn);
+            }
+        }
+    }
+}