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

package/dist/cjs/components/src/utilities/snapify.js

@@ -45,20 +45,6 @@ class Snapify {
         cntrlr.init();
         return cntrlr;
     }
-    static chat(config) {
-        const id = config.id;
-        if (controllers[id]) {
-            return controllers[id];
-        }
-        const cntrlr = (controllers[id] = createChatController({ client, controller: config }));
-        cntrlr.on('afterStore', async ({ controller }, next) => {
-            controller.log.debug('controller', controller);
-            controller.log.debug('store', controller.store.toJSON());
-            await next();
-        });
-        cntrlr.init();
-        return cntrlr;
-    }
     static search(config) {
         const id = config.id;
         if (controllers[id]) {
@@ -101,19 +87,6 @@ function createRecommendationController(config) {
     });
     return cntrlr;
 }
-function createChatController(config) {
-    const urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker).detach(true);
-    const cntrlr = new snap_controller_1.ChatController(config.controller, {
-        client: new snap_client_1.Client(config.client.globals, config.client.config),
-        store: new snap_store_mobx_1.ChatStore({ ...config.controller, siteId: config.client.globals.siteId }, { urlManager }),
-        urlManager,
-        eventManager: new snap_event_manager_1.EventManager(),
-        profiler: new snap_profiler_1.Profiler(),
-        logger: new snap_logger_1.Logger(),
-        tracker: new snap_tracker_1.Tracker(config.client.globals),
-    });
-    return cntrlr;
-}
 function createAutocompleteController(config) {
     const urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker).detach();
     const cntrlr = new snap_controller_1.AutocompleteController(config.controller, {

package/dist/cjs/src/Instantiators/RecommendationInstantiator.js

@@ -47,6 +47,7 @@ class RecommendationInstantiator {
         this.client = services?.client || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
         this.tracker = services?.tracker || new snap_tracker_1.Tracker(this.config.client.globals);
         this.logger = services?.logger || new snap_logger_1.Logger({ prefix: 'RecommendationInstantiator ', mode: this.mode });
+        this.quickviewManager = services?.quickviewManager;
         const profileCount = {};
         // script block targeter for "grouped" and "legacy" blocks
         this.targeter = new snap_toolbox_1.DomTargeter([
@@ -255,7 +256,7 @@ async function readyTheController(instance, services, targetElem, context, profi
         controller: controllerConfig,
         context,
         mode: instance.config.mode,
-    }, { client: instance.client, tracker: instance.tracker });
+    }, { client: instance.client, tracker: instance.tracker, quickviewManager: instance.quickviewManager });
     // mark element with controller id so cleanupStaleControllers knows it's active
     if (targetElem) {
         targetElem.setAttribute('ss-controller-id', controller.id);

package/dist/cjs/src/Snap.js

@@ -101,9 +101,6 @@ class Snap {
                 case snap_controller_1.ControllerTypes.recommendation:
                     importPromise = import('./create/createRecommendationController');
                     break;
-                case snap_controller_1.ControllerTypes.chat:
-                    importPromise = import('./create/createChatController');
-                    break;
                 case snap_controller_1.ControllerTypes.search:
                 default:
                     importPromise = import('./create/createSearchController');
@@ -126,6 +123,7 @@ class Snap {
                     profiler: services?.profiler,
                     logger: services?.logger,
                     tracker: services?.tracker || this.tracker,
+                    quickviewManager: services?.quickviewManager || this.quickviewManager,
                 });
             }
             if (callback) {
@@ -457,6 +455,44 @@ class Snap {
                 id: this.context.shopper.id,
             });
         }
+        // Create the quickview manager. Synchronous and ahead of controller creation below, so it can
+        // be passed to every controller as the 'quickview' service. The quickview *components* are
+        // still loaded on demand by the targeters.
+        if (this.config.quickview) {
+            try {
+                const { config: quickviewConfig, services: quickviewServices, targeters } = this.config.quickview;
+                this.quickviewManager = new snap_controller_1.QuickviewManager({
+                    store: quickviewServices?.store,
+                }, quickviewConfig);
+                targeters?.forEach((target, index) => {
+                    if (!target.selector) {
+                        throw new Error(`Quickview target at index ${index} missing selector value (string).`);
+                    }
+                    if (!target.component) {
+                        throw new Error(`Quickview target at index ${index} missing component value (Component).`);
+                    }
+                    new snap_toolbox_1.DomTargeter([{ ...target }], async (target, elem, originalElem) => {
+                        const onTarget = target.onTarget;
+                        onTarget && (await onTarget(target, elem, originalElem));
+                        try {
+                            // defer the component chunk until the first open
+                            await (0, mobx_1.when)(() => Boolean(this.quickviewManager?.store.isOpen));
+                            const Component = await target.component();
+                            setTimeout(() => {
+                                (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { quickviewManager: this.quickviewManager, snap: this, ...target.props }), elem);
+                            });
+                        }
+                        catch (err) {
+                            this.logger.error(err);
+                            this.logger.error(COMPONENT_ERROR, target);
+                        }
+                    });
+                });
+            }
+            catch (err) {
+                this.logger.error(`Failed to create the Quickview Manager.`, err);
+            }
+        }
         // create controllers
         Object.keys(this.config?.controllers || {}).forEach((type) => {
             switch (type) {
@@ -480,6 +516,7 @@ class Snap {
                                 profiler: controller.services?.profiler,
                                 logger: controller.services?.logger,
                                 tracker: controller.services?.tracker || this.tracker,
+                                quickviewManager: controller.services?.quickviewManager || this.quickviewManager,
                             });
                             window.athos.controller = window.athos.controller || {};
                             window.athos.controller[cntrlr.config.id] = this.controllers[cntrlr.config.id] = cntrlr;
@@ -547,73 +584,6 @@ class Snap {
                     });
                     break;
                 }
-                case 'chat': {
-                    this.config.controllers[type].forEach((controller, index) => {
-                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
-                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
-                            return;
-                        }
-                        this._controllerPromises[controller.config.id] = new Promise(async (resolve) => {
-                            try {
-                                // `_initialized` is only set after the awaited init fires, so two chat
-                                // targeters would otherwise both re-run the init middleware
-                                let initialized = false;
-                                const targetFunction = async (target, elem, originalElem) => {
-                                    const onTarget = target.onTarget;
-                                    onTarget && (await onTarget(target, elem, originalElem));
-                                    try {
-                                        const importPromises = [];
-                                        // dynamically import the component
-                                        importPromises.push(target.component());
-                                        const importResolutions = await Promise.all(importPromises);
-                                        const Component = importResolutions[0];
-                                        setTimeout(() => {
-                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
-                                        });
-                                    }
-                                    catch (err) {
-                                        this.logger.error(err);
-                                        this.logger.error(COMPONENT_ERROR, target);
-                                    }
-                                };
-                                if (!controller?.targeters || controller?.targeters.length === 0) {
-                                    const cntrlr = await this._createController(snap_controller_1.ControllerTypes.chat, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
-                                        if (cntrlr)
-                                            resolve(cntrlr);
-                                    });
-                                    if (!cntrlr.initialized)
-                                        cntrlr.init();
-                                }
-                                controller?.targeters?.forEach((target, target_index) => {
-                                    if (!target.selector) {
-                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
-                                    }
-                                    if (!target.component) {
-                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
-                                    }
-                                    target = (0, utils_1.applyChatTargetInject)(target);
-                                    const targeter = new snap_toolbox_1.DomTargeter([{ ...target }], async (target, elem, originalElem) => {
-                                        const cntrlr = await this._createController(snap_controller_1.ControllerTypes.chat, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
-                                            if (cntrlr)
-                                                resolve(cntrlr);
-                                        });
-                                        if (!initialized) {
-                                            initialized = true;
-                                            if (!cntrlr.initialized)
-                                                cntrlr.init();
-                                        }
-                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
-                                        cntrlr.addTargeter(targeter);
-                                    });
-                                });
-                            }
-                            catch (err) {
-                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
-                            }
-                        });
-                    });
-                    break;
-                }
                 case 'autocomplete': {
                     this.config.controllers[type].forEach((controller, index) => {
                         if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
@@ -828,6 +798,7 @@ class Snap {
                         tracker: this.tracker,
                         logger: this.logger,
                         snap: this,
+                        quickviewManager: this.quickviewManager,
                     }, this.context);
                 });
             }

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

@@ -3,12 +3,16 @@ 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.validateTemplatesConfig = validateTemplatesConfig;
+exports.validateTemplatesConfigUnlocked = validateTemplatesConfigUnlocked;
 exports.mapBreakpoints = mapBreakpoints;
 exports.createAutocompleteTargeters = createAutocompleteTargeters;
+exports.createQuickviewTargeters = createQuickviewTargeters;
 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,16 +20,28 @@ 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 TargetStore_1 = require("./Stores/TargetStore");
+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';
 exports.TEMPLATE_EDITOR_UI_PARAM = 'athos-editor';
+function validateTemplatesConfig(config) {
+    return config;
+}
+function validateTemplatesConfigUnlocked(config) {
+    return config;
+}
 exports.DEFAULT_FEATURES = {};
 exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
     trending: {
         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 +121,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 +168,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 +220,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 || [];
@@ -259,6 +255,36 @@ function createAutocompleteTargeters(templateConfig, templatesStore) {
         return targeter;
     });
 }
+function createQuickviewTargeters(templateConfig, templatesStore) {
+    return (templateConfig.quickview?.targets?.map((targetConfig, index) => {
+        // Quickview isn't part of the editable targets registry (it's appended to <body> and driven by the
+        // QuickviewManager), so build a TargetStore directly rather than via addTarget. This lets the
+        // component render through TemplateSelect — the same wrapper used by search/autocomplete — which
+        // provides the global templates ThemeProvider. Without it the quickview renders outside the
+        // templates theme, falling back to production-mode prop merging where theme overrides (e.g.
+        // `quickviewLayout`) are silently dropped.
+        const target = new TargetStore_1.TargetStore({
+            target: { type: 'quickview', selector: targetConfig.selector || 'body', component: targetConfig.component, index },
+        });
+        const targeter = {
+            selector: targetConfig.selector || 'body',
+            inject: {
+                action: 'append',
+                element: () => {
+                    const el = document.createElement('div');
+                    el.id = index === 0 ? 'athos-quickview' : `athos-quickview-${index}`;
+                    return el;
+                },
+            },
+            component: async () => {
+                await templatesStore.library.import.component.quickview[targetConfig.component]();
+                return TemplateSelect_1.TemplateSelect;
+            },
+            props: { target, templatesStore },
+        };
+        return targeter;
+    }) || []);
+}
 function createRecommendationComponentMapping(templateConfig, templatesStore) {
     // TODO: throw a warning if keys match inside each recommendation type
     return Object.keys(templateConfig.recommendation || {})
@@ -307,10 +333,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 +373,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 +437,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,20 +546,16 @@ function createSnapConfig(templateConfig, templatesStore) {
         // }
         snapConfig.instantiators.recommendation = recommendationInstantiatorConfig;
     }
-    /* CHAT CONTROLLER */
-    if (templateConfig.chat && snapConfig.controllers) {
-        const chatControllerConfig = {
+    /* QUICKVIEW MANAGER — injects quickview component(s) into <body> when enabled */
+    if (templateConfig.quickview) {
+        const quickviewSettings = templateConfig.quickview?.settings;
+        snapConfig.quickview = {
             config: {
-                id: 'chat',
-                plugins: createPlugins(templateConfig, templatesStore, 'chat'),
-                settings: {
-                    languageCode: templatesStore.language,
-                    ...(templateConfig.chat.settings || {}),
-                },
+                id: 'quickview',
+                ...(quickviewSettings ? { settings: quickviewSettings } : {}),
             },
-            targeters: (0, exports.createChatTargeters)(templateConfig, templatesStore),
+            targeters: createQuickviewTargeters(templateConfig, templatesStore),
         };
-        snapConfig.controllers.chat = [chatControllerConfig];
     }
     return snapConfig;
 }
@@ -456,14 +565,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 +643,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);
+}