@athoscommerce/snap-preact 1.11.0 → 1.12.0

package/dist/cjs/src/Snap.js

@@ -123,6 +123,7 @@ class Snap {
                     profiler: services?.profiler,
                     logger: services?.logger,
                     tracker: services?.tracker || this.tracker,
+                    quickviewManager: services?.quickviewManager || this.quickviewManager,
                 });
             }
             if (callback) {
@@ -454,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) {
@@ -477,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;
@@ -758,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

@@ -4,8 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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;
@@ -17,6 +20,7 @@ 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");
@@ -24,6 +28,12 @@ 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: {
@@ -245,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 || {})
@@ -506,6 +546,17 @@ function createSnapConfig(templateConfig, templatesStore) {
         // }
         snapConfig.instantiators.recommendation = recommendationInstantiatorConfig;
     }
+    /* QUICKVIEW MANAGER — injects quickview component(s) into <body> when enabled */
+    if (templateConfig.quickview) {
+        const quickviewSettings = templateConfig.quickview?.settings;
+        snapConfig.quickview = {
+            config: {
+                id: 'quickview',
+                ...(quickviewSettings ? { settings: quickviewSettings } : {}),
+            },
+            targeters: createQuickviewTargeters(templateConfig, templatesStore),
+        };
+    }
     return snapConfig;
 }
 function createPlugins(templateConfig, templatesStore, controllerType) {

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LibraryStore = void 0;
+exports.LibraryStore = exports.currencyCodes = void 0;
 const TemplateStore_1 = require("./TemplateStore");
 const themeComponents_1 = require("../../../components/src/providers/themeComponents");
 const pluginBackgroundFilters_1 = require("./library/plugins/shopify/pluginBackgroundFilters");
@@ -18,12 +18,15 @@ const pluginScrollToTop_1 = require("./library/plugins/common/pluginScrollToTop"
 const pluginLogger_1 = require("./library/plugins/common/pluginLogger");
 const pluginKlaviyoEvents_1 = require("./library/plugins/common/pluginKlaviyoEvents");
 const CustomComponent_1 = require("./library/components/CustomComponent");
+const currencies_1 = require("./library/currencies/currencies");
+exports.currencyCodes = Object.keys(currencies_1.currencies);
 class LibraryStore {
     constructor(params) {
         this.themes = {};
         this.components = {
             search: {},
             autocomplete: {},
+            quickview: {},
             recommendation: {
                 bundle: {},
                 default: {},
@@ -50,6 +53,7 @@ class LibraryStore {
             paginationInfo: {},
             slideshow: {},
             price: {},
+            productDetail: {},
             skeleton: {},
             modal: {},
             calloutBadge: {},
@@ -66,10 +70,12 @@ class LibraryStore {
             facetPaletteOptions: {},
             facetSlider: {},
             filter: {},
+            gallery: {},
             loadMore: {},
             overlayBadge: {},
             pagination: {},
             perPage: {},
+            quantityPicker: {},
             radioList: {},
             rating: {},
             searchInput: {},
@@ -79,6 +85,7 @@ class LibraryStore {
             swatches: {},
             tabSelection: {},
             variantSelection: {},
+            productDetailTable: {},
             terms: {},
             branchOverride: {},
             facet: {},
@@ -159,6 +166,16 @@ class LibraryStore {
                             (this.components.autocomplete.AutocompleteModal = (await import('./library/components/AutocompleteModal')).AutocompleteModal));
                     },
                 },
+                quickview: {
+                    QuickviewModal: async () => {
+                        return (this.components.quickview.QuickviewModal ||
+                            (this.components.quickview.QuickviewModal = (await import('./library/components/QuickviewModal')).QuickviewModal));
+                    },
+                    QuickviewSlideout: async () => {
+                        return (this.components.quickview.QuickviewSlideout ||
+                            (this.components.quickview.QuickviewSlideout = (await import('./library/components/QuickviewSlideout')).QuickviewSlideout));
+                    },
+                },
                 search: {
                     SearchCollapsible: async () => {
                         return (this.components.search.SearchCollapsible ||
@@ -237,6 +254,7 @@ class LibraryStore {
                 paginationInfo: {},
                 slideshow: {},
                 price: {},
+                productDetail: {},
                 skeleton: {},
                 modal: {},
                 calloutBadge: {},
@@ -253,10 +271,12 @@ class LibraryStore {
                 facetPaletteOptions: {},
                 facetSlider: {},
                 filter: {},
+                gallery: {},
                 loadMore: {},
                 overlayBadge: {},
                 pagination: {},
                 perPage: {},
+                quantityPicker: {},
                 radioList: {},
                 rating: {},
                 searchInput: {},
@@ -266,6 +286,7 @@ class LibraryStore {
                 swatches: {},
                 tabSelection: {},
                 variantSelection: {},
+                productDetailTable: {},
                 terms: {},
                 branchOverride: {},
                 facet: {},
@@ -280,27 +301,74 @@ class LibraryStore {
                 termsList: {},
             },
             language: {
+                // English
                 en: async () => {
                     return this.locales.languages.en || (this.locales.languages.en = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/en')).en));
                 },
+                // French
                 fr: async () => {
                     return this.locales.languages.fr || (this.locales.languages.fr = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/fr')).fr));
                 },
+                // Spanish
                 es: async () => {
                     return this.locales.languages.es || (this.locales.languages.es = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/es')).es));
                 },
-            },
-            currency: {
-                usd: async () => {
-                    return this.locales.currencies.usd || (this.locales.currencies.usd = (await import('./library/currencies/usd')).usd);
+                // Arabic
+                ar: async () => {
+                    return this.locales.languages.ar || (this.locales.languages.ar = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/ar')).ar));
+                },
+                // Chinese
+                zh: async () => {
+                    return this.locales.languages.zh || (this.locales.languages.zh = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/zh')).zh));
+                },
+                // German
+                de: async () => {
+                    return this.locales.languages.de || (this.locales.languages.de = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/de')).de));
+                },
+                // Russian
+                ru: async () => {
+                    return this.locales.languages.ru || (this.locales.languages.ru = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/ru')).ru));
+                },
+                // Japanese
+                ja: async () => {
+                    return this.locales.languages.ja || (this.locales.languages.ja = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/ja')).ja));
+                },
+                // Portuguese
+                pt: async () => {
+                    return this.locales.languages.pt || (this.locales.languages.pt = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/pt')).pt));
+                },
+                // Korean
+                ko: async () => {
+                    return this.locales.languages.ko || (this.locales.languages.ko = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/ko')).ko));
+                },
+                // Italian
+                it: async () => {
+                    return this.locales.languages.it || (this.locales.languages.it = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/it')).it));
+                },
+                // Hindi
+                hi: async () => {
+                    return this.locales.languages.hi || (this.locales.languages.hi = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/hi')).hi));
+                },
+                // Turkish
+                tr: async () => {
+                    return this.locales.languages.tr || (this.locales.languages.tr = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/tr')).tr));
                 },
-                eur: async () => {
-                    return this.locales.currencies.eur || (this.locales.currencies.eur = (await import('./library/currencies/eur')).eur);
+                // Vietnamese
+                vi: async () => {
+                    return this.locales.languages.vi || (this.locales.languages.vi = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/vi')).vi));
                 },
-                aud: async () => {
-                    return this.locales.currencies.aud || (this.locales.currencies.aud = (await import('./library/currencies/aud')).aud);
+                // Dutch
+                nl: async () => {
+                    return this.locales.languages.nl || (this.locales.languages.nl = (0, TemplateStore_1.transformTranslationsToTheme)((await import('./library/languages/nl')).nl));
                 },
             },
+            // the per-code importers keep the same async shape as language/theme importers, resolving from the statically imported currencies module
+            currency: exports.currencyCodes.reduce((currencyImports, code) => {
+                currencyImports[code] = async () => {
+                    return this.locales.currencies[code] || (this.locales.currencies[code] = currencies_1.currencies[code]);
+                };
+                return currencyImports;
+            }, {}),
         };
         const { components, unlocked } = params || {};
         this.allowedComponentTypes = unlocked ? [...themeComponents_1.ALL_CUSTOM_COMPONENT_TYPES] : [...themeComponents_1.DEFAULT_CUSTOM_COMPONENT_TYPES];

package/dist/cjs/src/Templates/Stores/TemplateEditor/TemplateEditorStore.js

@@ -202,7 +202,12 @@ class TemplateEditorStore {
         this.templatesStore = templatesStore;
         this.storage = new snap_toolbox_1.StorageStore({ type: snap_toolbox_1.StorageType.local, key: TemplateStore_1.TEMPLATE_STORE_KEY });
         this.storedState = this.storage.get('editor') || this.storedState;
-        this.initial.config = (0, deepmerge_1.default)(this.initial.config, templatesStore.config?.config || {});
+        const { language: configLanguage, currency: configCurrency, ...restConfig } = templatesStore.config?.config || {};
+        this.initial.config = (0, deepmerge_1.default)(this.initial.config, {
+            ...restConfig,
+            ...(configLanguage ? { language: configLanguage.toLowerCase() } : {}),
+            ...(configCurrency ? { currency: configCurrency.toLowerCase() } : {}),
+        });
         this.initial.controller = {}; // set when registering controllers
         // set initial targets
         if (templatesStore.config.search?.targets)

package/dist/cjs/src/Templates/Stores/TemplateEditor/uiAbstractions/configUI.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configUI = void 0;
+const LibraryStore_1 = require("../../LibraryStore");
 const configUI = (store) => {
     return [
         {
@@ -93,11 +94,7 @@ const configUI = (store) => {
                     getDisplayState: () => 'visible',
                     getOptions: () => [
                         {
-                            options: [
-                                { label: 'USD', value: 'usd' },
-                                { label: 'EUR', value: 'eur' },
-                                { label: 'AUD', value: 'aud' },
-                            ],
+                            options: LibraryStore_1.currencyCodes.map((code) => ({ label: code.toUpperCase(), value: code })),
                         },
                     ],
                     getValue: () => {

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

@@ -38,13 +38,21 @@ class TemplatesStore {
             library: {},
         };
         this.library = new LibraryStore_1.LibraryStore({ components: config.components, unlocked: config.unlocked || false });
+        const configLanguage = this.config.config?.language?.toLowerCase();
+        const configCurrency = this.config.config?.currency?.toLowerCase();
+        if (configLanguage && !(configLanguage in this.library.import.language)) {
+            console.warn(`Snap Templates: unknown language code "${this.config.config?.language}" - using "en"`);
+        }
+        if (configCurrency && !(configCurrency in this.library.import.currency)) {
+            console.warn(`Snap Templates: unknown currency code "${this.config.config?.currency}" - using "usd"`);
+        }
         this.language =
             (this.settings.editMode && this.storage.get('overrides.config.language')) ||
-                (this.config.config?.language && this.config.config.language in this.library.import.language && this.config.config.language) ||
+                (configLanguage && configLanguage in this.library.import.language && configLanguage) ||
                 'en';
         this.currency =
             (this.settings.editMode && this.storage.get('overrides.config.currency')) ||
-                (this.config.config?.currency && this.config.config.currency in this.library.import.currency && this.config.config.currency) ||
+                (configCurrency && configCurrency in this.library.import.currency && configCurrency) ||
                 'usd';
         // import locale selections
         const importCurrency = this.library.import.currency[this.currency]();
@@ -174,11 +182,12 @@ class TemplatesStore {
         }
     }
     async setCurrency(currencyCode) {
-        if (currencyCode in this.library.import.currency) {
-            await this.library.import.currency[currencyCode]();
-            const currency = this.library.locales.currencies[currencyCode];
+        const code = currencyCode?.toLowerCase();
+        if (code in this.library.import.currency) {
+            await this.library.import.currency[code]();
+            const currency = this.library.locales.currencies[code];
             if (currency) {
-                this.currency = currencyCode;
+                this.currency = code;
                 this.storage.set('overrides.config.currency', this.currency);
                 for (const themeName in this.themes.local) {
                     const theme = this.themes.local[themeName];
@@ -190,13 +199,17 @@ class TemplatesStore {
                 }
             }
         }
+        else {
+            console.warn(`Snap Templates: unknown currency code "${currencyCode}" - currency not changed`);
+        }
     }
     async setLanguage(languageCode) {
-        if (languageCode in this.library.import.language) {
-            await this.library.import.language[languageCode]();
-            const language = this.library.locales.languages[languageCode];
+        const code = languageCode?.toLowerCase();
+        if (code in this.library.import.language) {
+            await this.library.import.language[code]();
+            const language = this.library.locales.languages[code];
             if (language) {
-                this.language = languageCode;
+                this.language = code;
                 this.storage.set('overrides.config.language', this.language);
                 for (const themeName in this.themes.local) {
                     const theme = this.themes.local[themeName];
@@ -208,6 +221,9 @@ class TemplatesStore {
                 }
             }
         }
+        else {
+            console.warn(`Snap Templates: unknown language code "${languageCode}" - language not changed`);
+        }
     }
     async preLoad() {
         // preload the library

package/dist/cjs/src/Templates/Stores/library/components/QuickviewModal.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickviewModal = void 0;
+var QuickviewModal_1 = require("../../../../../components/src/components/Templates/QuickviewModal");
+Object.defineProperty(exports, "QuickviewModal", { enumerable: true, get: function () { return QuickviewModal_1.QuickviewModal; } });

package/dist/cjs/src/Templates/Stores/library/components/QuickviewSlideout.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickviewSlideout = void 0;
+var QuickviewSlideout_1 = require("../../../../../components/src/components/Templates/QuickviewSlideout");
+Object.defineProperty(exports, "QuickviewSlideout", { enumerable: true, get: function () { return QuickviewSlideout_1.QuickviewSlideout; } });