@searchspring/snap-controller 0.20.0

package/dist/esm/Autocomplete/AutocompleteController.js

@@ -0,0 +1,472 @@
+import deepmerge from 'deepmerge';
+import { StorageStore, StorageType, ErrorType } from '@searchspring/snap-store-mobx';
+import { url } from '@searchspring/snap-toolbox';
+import { AbstractController } from '../Abstract/AbstractController';
+import { getSearchParams } from '../utils/getParams';
+const INPUT_ATTRIBUTE = 'ss-autocomplete-input';
+const INPUT_DELAY = 200;
+const KEY_ENTER = 13;
+const KEY_ESCAPE = 27;
+const PARAM_ORIGINAL_QUERY = 'oq';
+const defaultConfig = {
+    id: 'autocomplete',
+    selector: '',
+    action: '',
+    globals: {},
+    settings: {
+        initializeFromUrl: true,
+        syncInputs: true,
+        facets: {
+            trim: true,
+            pinFiltered: true,
+        },
+    },
+};
+export class AutocompleteController extends AbstractController {
+    constructor(config, { client, store, urlManager, eventManager, profiler, logger, tracker }) {
+        super(config, { client, store, urlManager, eventManager, profiler, logger, tracker });
+        this.type = 'autocomplete';
+        this.track = {
+            // TODO: add in future when autocomplete supports result click tracking
+            product: {
+                click: (e, result) => {
+                    this.log.warn('product.click tracking is not currently supported in this controller type');
+                },
+            },
+        };
+        this.handlers = {
+            input: {
+                enterKey: async (e) => {
+                    if (e.keyCode == KEY_ENTER) {
+                        const actionUrl = url(this.config.action);
+                        const input = e.target;
+                        // when spellCorrection is enabled
+                        if (this.config.globals?.search?.query?.spellCorrection) {
+                            // wait until loading is complete before submission
+                            // TODO make this better
+                            await timeout(INPUT_DELAY + 1);
+                            while (this.store.loading) {
+                                await timeout(INPUT_DELAY);
+                            }
+                            // use corrected query and originalQuery
+                            if (this.store.search.originalQuery) {
+                                input.value = this.store.search.query.string;
+                                actionUrl.params.query[PARAM_ORIGINAL_QUERY] = this.store.search.originalQuery.string;
+                            }
+                        }
+                        const inputParam = input.name || this.urlManager.getTranslatorConfig().queryParameter;
+                        actionUrl.params.query[inputParam] = input.value;
+                        // TODO expected spell correct behavior queryAssumption
+                        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);
+                            }
+                        }
+                        const newUrl = actionUrl.url();
+                        window.location.href = newUrl;
+                    }
+                },
+                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();
+                    // when spellCorrection is enabled
+                    if (this.config.globals?.search?.query?.spellCorrection) {
+                        // wait until loading is complete before submission
+                        // TODO make this better
+                        await timeout(INPUT_DELAY + 1);
+                        while (this.store.loading) {
+                            await timeout(INPUT_DELAY);
+                        }
+                        if (this.store.search.originalQuery) {
+                            input.value = this.store.search.query.string;
+                            addHiddenFormInput(form, PARAM_ORIGINAL_QUERY, this.store.search.originalQuery.string);
+                        }
+                    }
+                    // TODO expected spell correct behavior queryAssumption
+                    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();
+                },
+                keyUp: (e) => {
+                    // ignore enter and escape keys
+                    if (e?.keyCode == KEY_ENTER || e?.keyCode == KEY_ESCAPE)
+                        return;
+                    // return focus on keyup 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
+                    if (this.store.state.input == value && this.store.loaded) {
+                        return;
+                    }
+                    this.store.state.input = value;
+                    if (this.config.settings.syncInputs) {
+                        const inputs = document.querySelectorAll(this.config.selector);
+                        inputs.forEach((input) => {
+                            input.value = value;
+                        });
+                    }
+                    clearTimeout(this.handlers.input.timeoutDelay);
+                    if (!value) {
+                        // TODO cancel any current requests?
+                        this.store.reset();
+                        this.urlManager.reset().go();
+                    }
+                    else {
+                        this.handlers.input.timeoutDelay = setTimeout(() => {
+                            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 (Array.from(inputs).includes(e.target)) {
+                        e.stopPropagation();
+                    }
+                    else {
+                        this.setFocused();
+                    }
+                },
+            },
+        };
+        this.searchTrending = async () => {
+            let terms;
+            const storedTerms = this.storage.get('terms');
+            if (storedTerms) {
+                // terms exist in storage, update store
+                terms = JSON.parse(storedTerms);
+            }
+            else {
+                // query for trending terms, save to storage, update store
+                const trendingParams = {
+                    limit: this.config.settings?.trending?.limit || 5,
+                };
+                const trendingProfile = this.profiler.create({ type: 'event', name: 'trending', context: trendingParams }).start();
+                terms = await this.client.trending(trendingParams);
+                trendingProfile.stop();
+                this.log.profile(trendingProfile);
+                this.storage.set('terms', JSON.stringify(terms));
+            }
+            this.store.updateTrendingTerms(terms);
+        };
+        this.search = async () => {
+            const params = this.params;
+            if (!params?.search?.query?.string) {
+                return;
+            }
+            try {
+                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, response] = await this.client.autocomplete(params);
+                if (!response.meta) {
+                    /**
+                     * MockClient will overwrite the client search() method and use
+                     * SearchData to return mock data which already contains meta data
+                     */
+                    response.meta = meta;
+                }
+                searchProfile.stop();
+                this.log.profile(searchProfile);
+                const afterSearchProfile = this.profiler.create({ type: 'event', name: 'afterSearch', context: params }).start();
+                try {
+                    await this.eventManager.fire('afterSearch', {
+                        controller: this,
+                        request: params,
+                        response,
+                    });
+                }
+                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(response);
+                const afterStoreProfile = this.profiler.create({ type: 'event', name: 'afterStore', context: params }).start();
+                try {
+                    await this.eventManager.fire('afterStore', {
+                        controller: this,
+                        request: params,
+                        response,
+                    });
+                }
+                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) {
+                    switch (err) {
+                        case 429:
+                            this.store.error = {
+                                code: 429,
+                                type: ErrorType.WARNING,
+                                message: 'Too many requests try again later',
+                            };
+                            this.log.warn(this.store.error);
+                            break;
+                        case 500:
+                            this.store.error = {
+                                code: 500,
+                                type: ErrorType.ERROR,
+                                message: 'Invalid Search Request or Service Unavailable',
+                            };
+                            this.log.error(this.store.error);
+                            break;
+                        default:
+                            this.log.error(err);
+                            break;
+                    }
+                    this.store.loading = false;
+                }
+            }
+        };
+        // deep merge config with defaults
+        this.config = deepmerge(defaultConfig, this.config);
+        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: StorageType.SESSION,
+            key: `ss-controller-${this.config.id}`,
+        });
+        // add 'beforeSearch' middleware
+        this.eventManager.on('beforeSearch', async (ac, next) => {
+            ac.controller.store.loading = true;
+            await next();
+        });
+        // 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.autocomplete.query != ac.controller.urlManager.state.query) {
+                return false;
+            }
+        });
+        // add 'afterStore' middleware
+        this.eventManager.on('afterStore', async (ac, next) => {
+            await next();
+            ac.controller.store.loading = 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 = this.tracker.getUserId();
+        if (userId) {
+            params.tracking = params.tracking || {};
+            params.tracking.userId = userId;
+        }
+        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(',');
+            }
+            const shopperId = this.tracker.getShopperId();
+            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('keyup'));
+    }
+    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('keyup', this.handlers.input.keyUp);
+            input.removeEventListener('keyup', this.handlers.input.enterKey);
+            input.removeEventListener('keyup', this.handlers.input.escKey);
+            input.removeEventListener('focus', this.handlers.input.focus);
+            input.form?.removeEventListener('submit', this.handlers.input.formSubmit);
+        });
+        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(INPUT_ATTRIBUTE, '');
+            input.addEventListener('keyup', this.handlers.input.keyUp);
+            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('keyup', this.handlers.input.escKey);
+            const form = input.form;
+            let formActionUrl = this.config.action;
+            if (!form && this.config.action) {
+                input.addEventListener('keyup', this.handlers.input.enterKey);
+            }
+            else if (form) {
+                if (this.config.action) {
+                    form.action = this.config.action;
+                }
+                else {
+                    formActionUrl = form.action;
+                }
+                form.addEventListener('submit', this.handlers.input.formSubmit);
+            }
+            // set the root URL on urlManager
+            if (formActionUrl) {
+                this.store.setService('urlManager', this.urlManager.withConfig((translatorConfig) => {
+                    return {
+                        ...translatorConfig,
+                        urlRoot: formActionUrl,
+                    };
+                }));
+            }
+            if (document.activeElement === input) {
+                this.setFocused(input);
+            }
+        });
+        if (this.config.settings?.trending?.limit > 0 && !this.store.trending?.length) {
+            this.searchTrending();
+        }
+        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;
+    form.append(inputElem);
+}
+async function timeout(time) {
+    return new Promise((resolve) => {
+        window.setTimeout(resolve, time);
+    });
+}

package/dist/esm/Finder/FinderController.d.ts

@@ -0,0 +1,14 @@
+import { AbstractController } from '../Abstract/AbstractController';
+import type { FinderStore } from '@searchspring/snap-store-mobx';
+import type { FinderControllerConfig, ControllerServices } from '../types';
+export declare class FinderController extends AbstractController {
+    type: string;
+    store: FinderStore;
+    config: FinderControllerConfig;
+    constructor(config: FinderControllerConfig, { client, store, urlManager, eventManager, profiler, logger, tracker }: ControllerServices);
+    get params(): Record<string, any>;
+    find: () => void;
+    reset: () => void;
+    search: () => Promise<void>;
+}
+//# sourceMappingURL=FinderController.d.ts.map

package/dist/esm/Finder/FinderController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FinderController.d.ts","sourceRoot":"","sources":["../../../src/Finder/FinderController.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,KAAK,EAAE,sBAAsB,EAAmC,kBAAkB,EAAa,MAAM,UAAU,CAAC;AAQvH,qBAAa,gBAAiB,SAAQ,kBAAkB;IAChD,IAAI,SAAY;IAChB,KAAK,EAAE,WAAW,CAAC;IAC1B,MAAM,EAAE,sBAAsB,CAAC;gBAEnB,MAAM,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB;IAoCtI,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAUhC;IAED,IAAI,QAAO,IAAI,CAEb;IAEF,KAAK,QAAO,IAAI,CAMd;IAEF,MAAM,QAAa,QAAQ,IAAI,CAAC,CA6G9B;CACF"}

package/dist/esm/Finder/FinderController.js

@@ -0,0 +1,164 @@
+import deepmerge from 'deepmerge';
+import { ErrorType } from '@searchspring/snap-store-mobx';
+import { AbstractController } from '../Abstract/AbstractController';
+import { getSearchParams } from '../utils/getParams';
+const defaultConfig = {
+    id: 'finder',
+    globals: {},
+    fields: [],
+};
+export class FinderController extends AbstractController {
+    constructor(config, { client, store, urlManager, eventManager, profiler, logger, tracker }) {
+        super(config, { client, store, urlManager, eventManager, profiler, logger, tracker });
+        this.type = 'finder';
+        this.find = () => {
+            window.location.href = this.urlManager.href;
+        };
+        this.reset = () => {
+            // only need to reset when selections have been made
+            if (this.urlManager.state.filter) {
+                this.store.storage.clear();
+                this.urlManager.remove('filter').go();
+            }
+        };
+        this.search = async () => {
+            if (!this.initialized) {
+                await this.init();
+            }
+            const params = this.params;
+            try {
+                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, response] = await this.client.search(params);
+                if (!response.meta) {
+                    /**
+                     * MockClient will overwrite the client search() method and use
+                     * SearchData to return mock data which already contains meta data
+                     */
+                    response.meta = meta;
+                }
+                searchProfile.stop();
+                this.log.profile(searchProfile);
+                const afterSearchProfile = this.profiler.create({ type: 'event', name: 'afterSearch', context: params }).start();
+                try {
+                    await this.eventManager.fire('afterSearch', {
+                        controller: this,
+                        request: params,
+                        response,
+                    });
+                }
+                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(response);
+                const afterStoreProfile = this.profiler.create({ type: 'event', name: 'afterStore', context: params }).start();
+                try {
+                    await this.eventManager.fire('afterStore', {
+                        controller: this,
+                        request: params,
+                        response,
+                    });
+                }
+                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) {
+                    switch (err) {
+                        case 429:
+                            this.store.error = {
+                                code: 429,
+                                type: ErrorType.WARNING,
+                                message: 'Too many requests try again later',
+                            };
+                            this.log.warn(this.store.error);
+                            break;
+                        case 500:
+                            this.store.error = {
+                                code: 500,
+                                type: ErrorType.ERROR,
+                                message: 'Invalid Search Request or Service Unavailable',
+                            };
+                            this.log.error(this.store.error);
+                            break;
+                        default:
+                            this.log.error(err);
+                            break;
+                    }
+                    this.store.loading = false;
+                }
+            }
+        };
+        // deep merge config with defaults
+        this.config = deepmerge(defaultConfig, this.config);
+        this.store.setConfig(this.config);
+        // set the root URL on urlManager
+        if (this.config.url) {
+            this.urlManager = this.urlManager.withConfig((translatorConfig) => {
+                return {
+                    ...translatorConfig,
+                    urlRoot: this.config.url,
+                };
+            });
+        }
+        // add 'beforeSearch' middleware
+        this.eventManager.on('beforeSearch', async (finder, next) => {
+            finder.controller.store.loading = true;
+            await next();
+        });
+        // TODO: move this to afterStore
+        // add 'afterSearch' middleware
+        this.eventManager.on('afterSearch', async (finder, next) => {
+            await next();
+            finder.controller.store.loading = 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);
+        // get only the finder fields
+        params.facets = {
+            include: this.config.fields.map((fieldConfig) => fieldConfig.field),
+        };
+        return params;
+    }
+}

package/dist/esm/Recommendation/RecommendationController.d.ts

@@ -0,0 +1,31 @@
+import { AbstractController } from '../Abstract/AbstractController';
+import type { BeaconEvent } from '@searchspring/snap-tracker';
+import type { RecommendationStore } from '@searchspring/snap-store-mobx';
+import type { RecommendationControllerConfig, ControllerServices } from '../types';
+declare type RecommendationTrackMethods = {
+    product: {
+        click: (e: any, result: any) => BeaconEvent;
+        render: (result: any) => BeaconEvent;
+        impression: (result: any) => BeaconEvent;
+    };
+    click: (e: any) => BeaconEvent;
+    impression: () => BeaconEvent;
+    render: () => BeaconEvent;
+};
+export declare class RecommendationController extends AbstractController {
+    type: string;
+    store: RecommendationStore;
+    config: RecommendationControllerConfig;
+    events: {
+        click: any;
+        impression: any;
+        render: any;
+        product: {};
+    };
+    constructor(config: RecommendationControllerConfig, { client, store, urlManager, eventManager, profiler, logger, tracker }: ControllerServices);
+    track: RecommendationTrackMethods;
+    get params(): Record<string, any>;
+    search: () => Promise<void>;
+}
+export {};
+//# sourceMappingURL=RecommendationController.d.ts.map