@athoscommerce/snap-preact 1.10.1-beta.150 → 1.11.0

package/dist/cjs/src/Templates/SnapTemplates.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createChatTargeters = exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
+exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.TAB_PREFIXED_PARAMS = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
 exports.mapBreakpoints = mapBreakpoints;
 exports.createAutocompleteTargeters = createAutocompleteTargeters;
 exports.createRecommendationComponentMapping = createRecommendationComponentMapping;
 exports.createSnapConfig = createSnapConfig;
 exports.createPlugins = createPlugins;
+exports.createTabPlugins = createTabPlugins;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const preact_1 = require("preact");
 const deepmerge_1 = __importDefault(require("deepmerge"));
@@ -16,6 +17,9 @@ const Snap_1 = require("../Snap");
 const TemplateSelect_1 = require("../../components/src/components/Atoms/TemplateSelect");
 const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const TemplateStore_1 = require("./Stores/TemplateStore");
+const TabManagerStore_1 = require("./Stores/TabManagerStore");
+const snap_client_1 = require("@athoscommerce/snap-client");
+const snap_tracker_1 = require("@athoscommerce/snap-tracker");
 const shopify_1 = require("@athoscommerce/snap-platforms/shopify");
 const utils_1 = require("../utils");
 exports.TEMPLATE_EDITOR_COOKIE = 'athosEditor';
@@ -26,6 +30,8 @@ exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
         limit: 5,
     },
 };
+// tabs namespace their catalog specific url state - the query is shared so a single search spans every tab
+exports.TAB_PREFIXED_PARAMS = ['filter', 'sort', 'pageSize', 'rq', 'page'];
 const hasShopifyMarketsPluginConfig = (templateConfig) => {
     const pluginConfigs = [
         templateConfig.plugins?.shopify?.markets,
@@ -105,8 +111,8 @@ class SnapTemplates extends Snap_1.Snap {
                 // attach to the window object
                 window.athos = window.athos || {};
                 window.athos.editor = templateEditorStore;
-                const searchController = this.controllers['search'];
-                const autocompleteController = this.controllers['autocomplete'];
+                const searchController = this.getTemplateController('search');
+                const autocompleteController = this.getTemplateController('autocomplete');
                 if (searchController) {
                     templateEditorStore.registerController(searchController);
                 }
@@ -152,6 +158,16 @@ class SnapTemplates extends Snap_1.Snap {
             }
         });
     }
+    // when tabs are configured there is no controller using the `search` / `autocomplete` id -
+    // the default tab controller is used instead
+    getTemplateController(type) {
+        const tabs = this.templates.config[type]?.tabs;
+        if (tabs?.length) {
+            const defaultTab = tabs.filter((tab) => tab.default)[0] || tabs[0];
+            return this.controllers[defaultTab.id];
+        }
+        return this.controllers[type];
+    }
 }
 exports.SnapTemplates = SnapTemplates;
 function mapBreakpoints(breakpointsKeys, breakpointSettings) {
@@ -194,36 +210,6 @@ const createSearchTargeters = (templateConfig, templatesStore) => {
     });
 };
 exports.createSearchTargeters = createSearchTargeters;
-const createChatTargeters = (templateConfig, templatesStore) => {
-    // initial target configs
-    const targetConfigs = templateConfig.chat?.targets || [];
-    let mergedConfigs;
-    if (templatesStore.settings.editMode) {
-        const overrideConfigs = (templatesStore.storage.get('overrides.targets.chat') || []);
-        mergedConfigs = (0, deepmerge_1.default)(targetConfigs, overrideConfigs, { arrayMerge: utils_1.combineMerge });
-    }
-    else {
-        mergedConfigs = targetConfigs;
-    }
-    return mergedConfigs.map((targetConfig) => {
-        const target = templatesStore.addTarget({ ...targetConfig, type: 'chat' });
-        const targeter = {
-            selector: targetConfig.selector,
-            // inline selectors (e.g. a nav slot) may render after DOMContentLoaded;
-            // re-injection at already-targeted elements is prevented by DomTargeter
-            autoRetarget: true,
-            component: async () => {
-                const componentImportPromises = [];
-                componentImportPromises.push(templatesStore.library.import.component.chat[targetConfig.component]());
-                await Promise.all(componentImportPromises);
-                return TemplateSelect_1.TemplateSelect;
-            },
-            props: { target, templatesStore },
-        };
-        return (0, utils_1.applyChatTargetInject)(targeter);
-    });
-};
-exports.createChatTargeters = createChatTargeters;
 function createAutocompleteTargeters(templateConfig, templatesStore) {
     // initial target configs
     const targetConfigs = templateConfig.autocomplete?.targets || [];
@@ -307,10 +293,19 @@ function createRecommendationComponentMapping(templateConfig, templatesStore) {
         return mapping;
     }, {});
 }
+function createTabServices(snapConfig, siteId) {
+    const tabGlobals = {
+        ...snapConfig.client?.globals,
+        siteId,
+    };
+    return {
+        client: new snap_client_1.Client(tabGlobals, snapConfig.client?.config),
+        tracker: new snap_tracker_1.Tracker(tabGlobals, snapConfig.tracker?.config),
+    };
+}
 function createSnapConfig(templateConfig, templatesStore) {
     const initiatorPrefix = window?.athos?.managed ? `managed/` : '';
     const snapConfig = {
-        mode: templateConfig.config?.mode,
         features: templateConfig.features || exports.DEFAULT_FEATURES,
         client: {
             globals: {},
@@ -338,37 +333,63 @@ function createSnapConfig(templateConfig, templatesStore) {
     }
     /* SEARCH CONTROLLER */
     if (templateConfig.search && snapConfig.controllers) {
-        const searchControllerConfig = {
-            config: {
-                id: 'search',
-                plugins: createPlugins(templateConfig, templatesStore, 'search'),
-                globals: templateConfig.search.globals || {},
-                settings: templateConfig.search.settings || {},
-            },
-            targeters: (0, exports.createSearchTargeters)(templateConfig, templatesStore),
-        };
-        // merge the responsive settings if there are any
-        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.search.breakpointSettings) {
-        // 	const mappedBreakpoints = mapBreakpoints(templateConfig.config.theme.variables.breakpoints, templateConfig.search.breakpointSettings || []);
-        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as SearchStoreConfigSettings;
-        // 	searchControllerConfig.config.settings = deepmerge(searchControllerConfig.config.settings, breakpointSettings);
-        // }
-        snapConfig.controllers.search = [searchControllerConfig];
+        const searchTabs = templateConfig.search.tabs || [];
+        const searchTargeters = (0, exports.createSearchTargeters)(templateConfig, templatesStore);
+        const searchSettings = templateConfig.search.settings || {};
+        const searchGlobals = templateConfig.search.globals || {};
+        snapConfig.controllers.search = [];
+        if (!searchTabs.length) {
+            snapConfig.controllers.search.push({
+                config: {
+                    id: 'search',
+                    plugins: createPlugins(templateConfig, templatesStore, 'search'),
+                    globals: searchGlobals,
+                    settings: searchSettings,
+                },
+                targeters: searchTargeters,
+            });
+        }
+        else {
+            // when tabs are configured, the tab controllers do all of the searching - an additional
+            // non-tab controller would only produce a redundant API request, so the targeters are
+            // attached to the active tab controller instead. targeting kicks off a search before the
+            // TabManagerStore exists to gate redirects, so this must be the tab the shopper is viewing
+            const targetedTab = (0, TabManagerStore_1.getActiveTabConfig)(searchTabs) || searchTabs[0];
+            searchTabs.forEach((tab) => {
+                const tabParam = tab.param;
+                snapConfig.controllers.search.push({
+                    url: {
+                        settings: {
+                            // the query is shared across tabs - only per-catalog state is namespaced
+                            ...(tabParam ? { corePrefix: tabParam, corePrefixParams: exports.TAB_PREFIXED_PARAMS } : {}),
+                        },
+                        parameters: {
+                            custom: {
+                                [TabManagerStore_1.TAB_ID_DEFAULT_PARAM]: { type: 'query' },
+                            },
+                        },
+                    },
+                    config: {
+                        id: tab.id,
+                        plugins: tab.plugins ? createTabPlugins(tab.plugins, templatesStore) : createPlugins(templateConfig, templatesStore, 'search'),
+                        settings: {
+                            ...(0, deepmerge_1.default)(searchSettings, tab.settings || {}),
+                        },
+                        globals: (0, deepmerge_1.default)(searchGlobals, tab.globals || {}),
+                    },
+                    services: createTabServices(snapConfig, tab.siteId),
+                    ...(tab === targetedTab ? { targeters: searchTargeters } : {}),
+                });
+            });
+        }
     }
     /* AUTOCOMPLETE CONTROLLER */
     if (templateConfig.autocomplete && snapConfig.controllers) {
         const autocompleteControllerSettings = (0, deepmerge_1.default)(exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS, templateConfig.autocomplete.settings || {});
-        const autocompleteControllerConfig = {
-            config: {
-                id: 'autocomplete',
-                plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
-                selector: templateConfig.autocomplete.targets.map((target) => target.inputSelector).join(', '),
-                action: templateConfig.autocomplete.action || '',
-                globals: templateConfig.autocomplete.globals || {},
-                settings: autocompleteControllerSettings,
-            },
-            targeters: createAutocompleteTargeters(templateConfig, templatesStore),
-        };
+        const autocompleteSelector = templateConfig.autocomplete.targets.map((target) => target.inputSelector).join(', ');
+        const autocompleteTabs = templateConfig.autocomplete.tabs || [];
+        const autocompleteGlobals = templateConfig.autocomplete.globals || {};
+        const autocompleteTargeters = createAutocompleteTargeters(templateConfig, templatesStore);
         // merge the responsive settings if there are any
         // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.autocomplete.breakpointSettings) {
         // 	const mappedBreakpoints = mapBreakpoints(
@@ -376,9 +397,61 @@ function createSnapConfig(templateConfig, templatesStore) {
         // 		templateConfig.autocomplete.breakpointSettings || []
         // 	);
         // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as AutocompleteStoreConfigSettings;
-        // 	autocompleteControllerConfig.config.settings = deepmerge(autocompleteControllerConfig.config.settings, breakpointSettings);
+        // 	autocompleteControllerSettings = deepmerge(autocompleteControllerSettings, breakpointSettings);
         // }
-        snapConfig.controllers.autocomplete = [autocompleteControllerConfig];
+        snapConfig.controllers.autocomplete = [];
+        if (!autocompleteTabs.length) {
+            snapConfig.controllers.autocomplete.push({
+                config: {
+                    id: 'autocomplete',
+                    plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
+                    selector: autocompleteSelector,
+                    action: templateConfig.autocomplete.action || '',
+                    globals: autocompleteGlobals,
+                    settings: autocompleteControllerSettings,
+                },
+                targeters: autocompleteTargeters,
+            });
+        }
+        else {
+            // when tabs are configured, every tab controller binds to the same input - an additional
+            // non-tab controller would only produce redundant API requests, so the targeters are
+            // attached to the default tab controller instead
+            const defaultTab = autocompleteTabs.filter((tab) => tab.default)[0] || autocompleteTabs[0];
+            autocompleteTabs.forEach((tab) => {
+                const tabParam = tab.param;
+                snapConfig.controllers.autocomplete.push({
+                    url: {
+                        settings: {
+                            // the query is shared across tabs - only per-catalog state is namespaced
+                            ...(tabParam ? { corePrefix: tabParam, corePrefixParams: exports.TAB_PREFIXED_PARAMS } : {}),
+                        },
+                        parameters: {
+                            custom: {
+                                [TabManagerStore_1.TAB_ID_DEFAULT_PARAM]: { type: 'query' },
+                            },
+                        },
+                        // every url the autocomplete builds must carry the tab it belongs to
+                        globals: [
+                            {
+                                param: TabManagerStore_1.TAB_ID_DEFAULT_PARAM,
+                                value: tab.param,
+                            },
+                        ],
+                    },
+                    config: {
+                        id: tab.id,
+                        plugins: tab.plugins ? createTabPlugins(tab.plugins, templatesStore) : createPlugins(templateConfig, templatesStore, 'autocomplete'),
+                        selector: autocompleteSelector,
+                        action: templateConfig.autocomplete.action || '',
+                        settings: (0, deepmerge_1.default)(autocompleteControllerSettings, tab.settings || {}),
+                        globals: (0, deepmerge_1.default)(autocompleteGlobals, tab.globals || {}),
+                    },
+                    services: createTabServices(snapConfig, tab.siteId),
+                    ...(tab === defaultTab ? { targeters: autocompleteTargeters } : {}),
+                });
+            });
+        }
     }
     /* RECOMMENDATION INSTANTIATOR */
     const originalRecsConfig = templateConfig.recommendation || {};
@@ -433,21 +506,6 @@ function createSnapConfig(templateConfig, templatesStore) {
         // }
         snapConfig.instantiators.recommendation = recommendationInstantiatorConfig;
     }
-    /* CHAT CONTROLLER */
-    if (templateConfig.chat && snapConfig.controllers) {
-        const chatControllerConfig = {
-            config: {
-                id: 'chat',
-                plugins: createPlugins(templateConfig, templatesStore, 'chat'),
-                settings: {
-                    languageCode: templatesStore.language,
-                    ...(templateConfig.chat.settings || {}),
-                },
-            },
-            targeters: (0, exports.createChatTargeters)(templateConfig, templatesStore),
-        };
-        snapConfig.controllers.chat = [chatControllerConfig];
-    }
     return snapConfig;
 }
 function createPlugins(templateConfig, templatesStore, controllerType) {
@@ -456,14 +514,10 @@ function createPlugins(templateConfig, templatesStore, controllerType) {
     if (controllerType) {
         controllerConfig = templateConfig[controllerType] || {};
     }
-    // backgroundFilters writes `config.globals.filters`, which the chat endpoint has no
-    // field for — chat carries background filters via `settings.bgFilters` instead
-    if (controllerType !== 'chat') {
-        plugins.push([
-            templatesStore.library.import.plugins.common.backgroundFilters,
-            (0, deepmerge_1.default)(templateConfig.plugins?.common?.backgroundFilters || {}, controllerConfig?.plugins?.common?.backgroundFilters || {}),
-        ]);
-    }
+    plugins.push([
+        templatesStore.library.import.plugins.common.backgroundFilters,
+        (0, deepmerge_1.default)(templateConfig.plugins?.common?.backgroundFilters || {}, controllerConfig?.plugins?.common?.backgroundFilters || {}),
+    ]);
     plugins.push([
         templatesStore.library.import.plugins.common.scrollToTop,
         (0, deepmerge_1.default)(templateConfig.plugins?.common?.scrollToTop || {}, controllerConfig?.plugins?.common?.scrollToTop || {}),
@@ -538,3 +592,10 @@ function createPlugins(templateConfig, templatesStore, controllerType) {
     });
     return plugins;
 }
+// tab level plugins do not inherit global or controller level plugins - only the plugins configured on the tab are used
+function createTabPlugins(tabPlugins, templatesStore) {
+    const plugins = createPlugins({ plugins: tabPlugins }, templatesStore);
+    const customPluginFunctions = Object.values(tabPlugins.custom || {}).map((customPlugin) => customPlugin.function);
+    // built-in plugins are always created - keep only the ones that were given configuration on the tab
+    return plugins.filter((plugin) => customPluginFunctions.includes(plugin[0]) || Object.keys(plugin[1] || {}).length > 0);
+}

package/dist/cjs/src/Templates/Stores/LibraryStore.js

@@ -29,26 +29,6 @@ class LibraryStore {
                 default: {},
                 email: {},
             },
-            chat: {},
-            chatButton: {},
-            chatLoadingIndicator: {},
-            chatAttachmentContext: {},
-            chatInspirationResultMessage: {},
-            chatMessageText: {},
-            chatMessageUser: {},
-            chatProductComparisonMessage: {},
-            chatProductQueryMessage: {},
-            chatResult: {},
-            chatResultsDisplay: {},
-            chatSuggestedQuestions: {},
-            chatComparisonsTray: {},
-            chatComposer: {},
-            chatFacetsBar: {},
-            chatHistory: {},
-            chatMessages: {},
-            chatSessionFeedback: {},
-            chatSideChat: {},
-            chatTopicDrift: {},
             badge: {},
             result: {},
             overlayResult: {},
@@ -97,6 +77,7 @@ class LibraryStore {
             slideout: {},
             sortBy: {},
             swatches: {},
+            tabSelection: {},
             variantSelection: {},
             terms: {},
             branchOverride: {},
@@ -227,33 +208,6 @@ class LibraryStore {
                         },
                     },
                 },
-                chat: {
-                    Chat: async () => {
-                        return this.components.chat.Chat || (this.components.chat.Chat = (await import('./library/components/Chat')).Chat);
-                    },
-                    ChatButton: async () => {
-                        return this.components.chat.ChatButton || (this.components.chat.ChatButton = (await import('./library/components/ChatButton')).ChatButton);
-                    },
-                },
-                chatButton: {},
-                chatLoadingIndicator: {},
-                chatAttachmentContext: {},
-                chatInspirationResultMessage: {},
-                chatMessageText: {},
-                chatMessageUser: {},
-                chatProductComparisonMessage: {},
-                chatProductQueryMessage: {},
-                chatResult: {},
-                chatResultsDisplay: {},
-                chatSuggestedQuestions: {},
-                chatComparisonsTray: {},
-                chatComposer: {},
-                chatFacetsBar: {},
-                chatHistory: {},
-                chatMessages: {},
-                chatSessionFeedback: {},
-                chatSideChat: {},
-                chatTopicDrift: {},
                 badge: {},
                 result: {
                     Result: async () => {
@@ -310,6 +264,7 @@ class LibraryStore {
                 slideout: {},
                 sortBy: {},
                 swatches: {},
+                tabSelection: {},
                 variantSelection: {},
                 terms: {},
                 branchOverride: {},
@@ -376,10 +331,7 @@ class LibraryStore {
     async addComponentImport(type, name, componentFn) {
         // only allow certain types based on unlocked status
         if (this.allowedComponentTypes.includes(type) && this.components[type]) {
-            // `chat` declares its library entry with literal keys so template targets stay
-            // literal-checked; custom overrides register by arbitrary name, hence the cast
-            const componentImports = this.import.component[type];
-            componentImports[name] = async () => {
+            this.import.component[type][name] = async () => {
                 return (this.components[type][name] ||
                     (this.components[type][name] = await (0, CustomComponent_1.CustomComponent)({
                         type,

package/dist/cjs/src/Templates/Stores/TabManagerStore.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabManagerStore = exports.TAB_ID_DEFAULT_PARAM = void 0;
+exports.getActiveTabConfig = getActiveTabConfig;
+const mobx_1 = require("mobx");
+const snap_controller_1 = require("@athoscommerce/snap-controller");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+exports.TAB_ID_DEFAULT_PARAM = 'tab';
+// resolves the active tab straight from the url - tab controllers begin searching as soon as they
+// are targeted, which happens before any TabManagerStore exists
+function getActiveTabConfig(tabs) {
+    const defaultTab = tabs.filter((tab) => tab.default)[0] || tabs[0];
+    const paramValue = (0, snap_toolbox_1.url)(window.location.href)?.params.query[exports.TAB_ID_DEFAULT_PARAM];
+    if (!paramValue) {
+        return defaultTab;
+    }
+    const activeParam = decodeURIComponent(paramValue);
+    return tabs.filter((tab) => tab.param == activeParam)[0] || defaultTab;
+}
+class TabManagerStore {
+    constructor(tabConfigs, controllers) {
+        this.tabs = [];
+        this.setActive = (id, updateUrl = true) => {
+            const tabToSelect = this.getTab(id);
+            if (!tabToSelect || tabToSelect.id === this.active?.id) {
+                return;
+            }
+            const previousTab = this.active;
+            this.setRedirects(previousTab, false);
+            this.active = tabToSelect;
+            this.setRedirects(tabToSelect, true);
+            if (tabToSelect.controller.type == snap_controller_1.ControllerTypes.search) {
+                if (updateUrl) {
+                    // to remove page chain: `.remove('page')` to urlManager.set(...)
+                    tabToSelect.controller.urlManager.set(this.param, tabToSelect.param).go();
+                }
+                this.searchTab(tabToSelect);
+            }
+        };
+        // every tab shares the url and the autocomplete input, so an inactive tab landing on a single
+        // result or a merchandising redirect would navigate away from the tab the shopper is viewing
+        this.setRedirects = (tab, enabled) => {
+            if (!tab) {
+                return;
+            }
+            const config = tab.controller.config;
+            config.settings = config.settings || {};
+            config.settings.redirects = enabled ? { ...tab.redirects } : { merchandising: false, singleResult: false };
+        };
+        this.searchTab = (tab) => {
+            if (tab.controller.type != snap_controller_1.ControllerTypes.search) {
+                return;
+            }
+            const searchController = tab.controller;
+            if (!searchController.store.loading && !searchController.store.loaded) {
+                searchController.search();
+            }
+        };
+        this.getTab = (id) => {
+            return this.tabs?.filter((tab) => tab.id == id)[0];
+        };
+        this.getTabByParam = (param) => {
+            return this.tabs?.filter((tab) => tab.param == param)[0];
+        };
+        this.param = exports.TAB_ID_DEFAULT_PARAM;
+        const startingTabConfig = tabConfigs.filter((tab) => tab.default)[0] || tabConfigs[0];
+        let urlParam;
+        tabConfigs.forEach((tabConfig) => {
+            const cntrlr = controllers.filter((controller) => controller.id == tabConfig.id)[0];
+            if (!cntrlr) {
+                return;
+            }
+            const newTab = {
+                id: tabConfig.id,
+                label: tabConfig.label,
+                siteId: tabConfig.siteId,
+                param: tabConfig.param,
+                controller: cntrlr,
+                // search-tab only setting - autocomplete has nothing to fetch until the shopper types
+                prefetch: 'prefetch' in tabConfig ? tabConfig.prefetch ?? true : true,
+                redirects: { ...(cntrlr.config.settings?.redirects || {}) },
+            };
+            if (cntrlr.type == snap_controller_1.ControllerTypes.autocomplete) {
+                const autocompleteController = cntrlr;
+                // hidden form inputs for tab selections
+                if (!autocompleteController.config.action) {
+                    autocompleteController.eventManager.on('beforeSubmit', async (context, next) => {
+                        if (context.input?.form) {
+                            addHiddenFormInput(context.input.form, this.param, this.active?.param || newTab.param);
+                        }
+                        await next();
+                    });
+                }
+            }
+            if (cntrlr.type == snap_controller_1.ControllerTypes.search) {
+                const searchController = cntrlr;
+                // read the active tab from the url on initial load
+                if (!urlParam) {
+                    urlParam = getTabParamFromUrlState(searchController.urlManager.state[this.param]);
+                }
+                // functionality for back/forward browser buttons
+                searchController.urlManager.subscribe((prev, next) => {
+                    const nextParam = getTabParamFromUrlState(next?.[this.param]);
+                    const nextTab = (nextParam && this.getTabByParam(nextParam)) || this.getTab(startingTabConfig.id);
+                    if (nextTab) {
+                        this.setActive(nextTab.id, false);
+                    }
+                });
+            }
+            this.tabs.push(newTab);
+        });
+        this.active = (urlParam && this.getTabByParam(urlParam)) || this.getTab(startingTabConfig.id) || this.tabs[0];
+        (0, mobx_1.makeObservable)(this, {
+            tabs: mobx_1.observable,
+            active: mobx_1.observable,
+            setActive: mobx_1.action,
+        });
+        // the active tab always searches - the rest only when they opt into prefetching
+        this.tabs.forEach((tab) => {
+            if (tab.id != this.active?.id) {
+                this.setRedirects(tab, false);
+            }
+            if (tab.prefetch || tab.id == this.active?.id) {
+                this.searchTab(tab);
+            }
+        });
+    }
+}
+exports.TabManagerStore = TabManagerStore;
+function addHiddenFormInput(form, name, value) {
+    // match by property rather than an interpolated attribute selector to avoid selector injection
+    const existingElem = Array.from(form.querySelectorAll('input[type="hidden"]')).find((elem) => elem.name === name);
+    if (existingElem) {
+        // keep the value current - the active tab can change after the input was first appended
+        existingElem.value = value;
+        return;
+    }
+    const inputElem = document.createElement('input');
+    inputElem.type = 'hidden';
+    inputElem.name = name;
+    inputElem.value = value;
+    form.append(inputElem);
+}
+// custom url params always deserialize as arrays when parsed fresh from the url, but can be a
+// plain string when read back from an in-session localState set() - handle both shapes
+function getTabParamFromUrlState(value) {
+    if (Array.isArray(value)) {
+        return value[0];
+    }
+    return typeof value == 'string' ? value : undefined;
+}

package/dist/cjs/src/Templates/Stores/TemplateStore.js

@@ -6,6 +6,7 @@ const mobx_1 = require("mobx");
 const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const ThemeStore_1 = require("./ThemeStore");
 const TargetStore_1 = require("./TargetStore");
+const TabManagerStore_1 = require("./TabManagerStore");
 const LibraryStore_1 = require("./LibraryStore");
 const snap_toolbox_2 = require("@athoscommerce/snap-toolbox");
 const RESIZE_DEBOUNCE = 100;
@@ -14,6 +15,7 @@ class TemplatesStore {
     constructor(params) {
         this.loading = false;
         this.window = { innerWidth: 0 };
+        this.tabManagers = {};
         const { config, settings } = params || {};
         this.config = config;
         this.platform = config.config?.platform || 'other';
@@ -25,7 +27,6 @@ class TemplatesStore {
         this.targets = {
             search: [],
             autocomplete: [],
-            chat: [],
             recommendation: {
                 bundle: [],
                 default: [],
@@ -125,6 +126,26 @@ class TemplatesStore {
     getTarget(type, targetIndex) {
         return getTargetArray(this.targets, type)?.[targetIndex];
     }
+    // one store per controller type
+    getTabManager(type, controllers) {
+        const tabs = this.config[type]?.tabs;
+        if (!tabs || tabs.length < 2) {
+            return undefined;
+        }
+        const mappedTabs = tabs.map((tab) => ({
+            id: tab.id,
+            param: tab.param,
+            siteId: tab.siteId,
+            label: tab.label,
+            default: tab.default,
+            prefetch: tab.prefetch,
+        }));
+        if (!this.tabManagers[type]) {
+            const tabControllers = tabs.map((tab) => controllers[tab.id]).filter((controller) => Boolean(controller));
+            this.tabManagers[type] = new TabManagerStore_1.TabManagerStore(mappedTabs, tabControllers);
+        }
+        return this.tabManagers[type];
+    }
     addTheme(config) {
         const theme = new ThemeStore_1.ThemeStore({
             config,
@@ -220,7 +241,7 @@ function getTargetArray(targets, type) {
     if (category === 'recommendation' && subcategory) {
         return targets.recommendation[subcategory];
     }
-    if (category === 'search' || category === 'autocomplete' || category === 'chat') {
+    if (category === 'search' || category === 'autocomplete') {
         return targets[category];
     }
     return undefined;