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

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

@@ -1,71 +1,22 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TemplatesStore = exports.TEMPLATE_STORE_KEY = void 0;
 exports.transformTranslationsToTheme = transformTranslationsToTheme;
-var mobx_1 = require("mobx");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var ThemeStore_1 = require("./ThemeStore");
-var TargetStore_1 = require("./TargetStore");
-var LibraryStore_1 = require("./LibraryStore");
-var snap_toolbox_2 = require("@athoscommerce/snap-toolbox");
-var RESIZE_DEBOUNCE = 100;
+const mobx_1 = require("mobx");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const ThemeStore_1 = require("./ThemeStore");
+const TargetStore_1 = require("./TargetStore");
+const LibraryStore_1 = require("./LibraryStore");
+const snap_toolbox_2 = require("@athoscommerce/snap-toolbox");
+const RESIZE_DEBOUNCE = 100;
 exports.TEMPLATE_STORE_KEY = 'athos-templates';
-var TemplatesStore = /** @class */ (function () {
-    function TemplatesStore(params) {
-        var _this = this;
-        var _a, _b, _c;
+class TemplatesStore {
+    constructor(params) {
         this.loading = false;
         this.window = { innerWidth: 0 };
-        var _d = params || {}, config = _d.config, settings = _d.settings;
+        const { config, settings } = params || {};
         this.config = config;
-        this.platform = ((_a = config.config) === null || _a === void 0 ? void 0 : _a.platform) || 'other';
+        this.platform = config.config?.platform || 'other';
         this.storage = new snap_toolbox_1.StorageStore({ type: snap_toolbox_1.StorageType.local, key: exports.TEMPLATE_STORE_KEY });
         this.dependencies = {
             storage: this.storage,
@@ -74,6 +25,7 @@ var TemplatesStore = /** @class */ (function () {
         this.targets = {
             search: [],
             autocomplete: [],
+            chat: [],
             recommendation: {
                 bundle: [],
                 default: [],
@@ -87,41 +39,41 @@ var TemplatesStore = /** @class */ (function () {
         this.library = new LibraryStore_1.LibraryStore({ components: config.components, unlocked: config.unlocked || false });
         this.language =
             (this.settings.editMode && this.storage.get('overrides.config.language')) ||
-                (((_b = this.config.config) === null || _b === void 0 ? void 0 : _b.language) && this.config.config.language in this.library.import.language && this.config.config.language) ||
+                (this.config.config?.language && this.config.config.language in this.library.import.language && this.config.config.language) ||
                 'en';
         this.currency =
             (this.settings.editMode && this.storage.get('overrides.config.currency')) ||
-                (((_c = this.config.config) === null || _c === void 0 ? void 0 : _c.currency) && this.config.config.currency in this.library.import.currency && this.config.config.currency) ||
+                (this.config.config?.currency && this.config.config.currency in this.library.import.currency && this.config.config.currency) ||
                 'usd';
         // import locale selections
-        var importCurrency = this.library.import.currency[this.currency]();
-        var importLanguage = this.library.import.language[this.language]();
+        const importCurrency = this.library.import.currency[this.currency]();
+        const importLanguage = this.library.import.language[this.language]();
         // configure window properties and add event listeners
         if (window) {
             this.setInnerWidth(window.innerWidth);
-            var debouncedHandleResize = (0, snap_toolbox_2.debounce)(function () {
-                _this.setInnerWidth(window.innerWidth);
+            const debouncedHandleResize = (0, snap_toolbox_2.debounce)(() => {
+                this.setInnerWidth(window.innerWidth);
             }, RESIZE_DEBOUNCE);
             window.addEventListener('resize', debouncedHandleResize);
         }
         // theme loading promise
         this.loading = true;
-        var themePromises = [];
+        const themePromises = [];
         // setup local themes
-        var themeConfiguration = config.theme;
+        const themeConfiguration = config.theme;
         // add promise
-        var themeDefer = new Deferred();
+        const themeDefer = new Deferred();
         themePromises.push(themeDefer.promise);
         // import theme dependencies
-        var themeImports = [importCurrency, importLanguage, this.library.import.theme[themeConfiguration.extends]()];
-        Promise.all(themeImports).then(function () {
-            var base = _this.library.themes[themeConfiguration.extends];
-            var overrides = themeConfiguration.overrides || {};
-            var variables = themeConfiguration.variables || {};
-            var currency = _this.library.locales.currencies[_this.currency] || {};
-            var language = _this.library.locales.languages[_this.language] || {};
-            var languageOverrides = transformTranslationsToTheme((_this.config.translations && _this.config.translations[_this.language]) || {});
-            var translatedOverrides = {
+        const themeImports = [importCurrency, importLanguage, this.library.import.theme[themeConfiguration.extends]()];
+        Promise.all(themeImports).then(() => {
+            const base = this.library.themes[themeConfiguration.extends];
+            const overrides = themeConfiguration.overrides || {};
+            const variables = themeConfiguration.variables || {};
+            const currency = this.library.locales.currencies[this.currency] || {};
+            const language = this.library.locales.languages[this.language] || {};
+            const languageOverrides = transformTranslationsToTheme((this.config.translations && this.config.translations[this.language]) || {});
+            const translatedOverrides = {
                 components: overrides.default,
                 responsive: {
                     mobile: overrides.mobile,
@@ -129,27 +81,27 @@ var TemplatesStore = /** @class */ (function () {
                     desktop: overrides.desktop,
                 },
             };
-            var themeConfig = {
+            const themeConfig = {
                 name: 'global',
                 style: themeConfiguration.style,
                 type: 'local',
-                base: base,
+                base,
                 overrides: translatedOverrides,
-                variables: variables,
-                currency: currency,
-                language: language,
-                languageOverrides: languageOverrides,
-                innerWidth: _this.window.innerWidth,
+                variables,
+                currency,
+                language,
+                languageOverrides,
+                innerWidth: this.window.innerWidth,
             };
-            if (_this.settings.editMode) {
-                var themeOverrides = _this.storage.get('overrides.theme.variables') || {};
+            if (this.settings.editMode) {
+                const themeOverrides = this.storage.get('overrides.theme.variables') || {};
                 themeConfig.editorOverrides = { variables: themeOverrides || {} };
             }
-            _this.addTheme(themeConfig);
+            this.addTheme(themeConfig);
             themeDefer.resolve();
         });
-        Promise.all(themePromises).then(function () {
-            _this.loading = false;
+        Promise.all(themePromises).then(() => {
+            this.loading = false;
         });
         (0, mobx_1.makeObservable)(this, {
             loading: mobx_1.observable,
@@ -157,176 +109,139 @@ var TemplatesStore = /** @class */ (function () {
             themes: mobx_1.observable,
         });
     }
-    TemplatesStore.prototype.addTarget = function (target) {
+    addTarget(target) {
         if (target.selector) {
-            var targetArray = getTargetArray(this.targets, target.type);
+            const targetArray = getTargetArray(this.targets, target.type);
             if (!targetArray) {
                 return;
             }
-            var newTarget = new TargetStore_1.TargetStore({
-                target: __assign(__assign({}, target), { index: targetArray.length }),
+            const newTarget = new TargetStore_1.TargetStore({
+                target: { ...target, index: targetArray.length },
             });
             targetArray.push(newTarget);
             return newTarget;
         }
-    };
-    TemplatesStore.prototype.getTarget = function (type, targetIndex) {
-        var _a;
-        return (_a = getTargetArray(this.targets, type)) === null || _a === void 0 ? void 0 : _a[targetIndex];
-    };
-    TemplatesStore.prototype.addTheme = function (config) {
-        var theme = new ThemeStore_1.ThemeStore({
-            config: config,
+    }
+    getTarget(type, targetIndex) {
+        return getTargetArray(this.targets, type)?.[targetIndex];
+    }
+    addTheme(config) {
+        const theme = new ThemeStore_1.ThemeStore({
+            config,
             dependencies: this.dependencies,
             settings: this.settings,
         });
-        var themeLocation = this.themes[config.type] || {};
+        const themeLocation = this.themes[config.type] || {};
         themeLocation[config.name] = theme;
-    };
-    TemplatesStore.prototype.setInnerWidth = function (innerWidth) {
+    }
+    setInnerWidth(innerWidth) {
         if (this.window.innerWidth === innerWidth)
             return;
         this.window.innerWidth = innerWidth;
-        for (var themeName in this.themes.local) {
-            var theme = this.themes.local[themeName];
+        for (const themeName in this.themes.local) {
+            const theme = this.themes.local[themeName];
             theme.setInnerWidth(this.window.innerWidth);
         }
-        for (var themeName in this.themes.library) {
-            var theme = this.themes.library[themeName];
+        for (const themeName in this.themes.library) {
+            const theme = this.themes.library[themeName];
             theme.setInnerWidth(this.window.innerWidth);
         }
-    };
-    TemplatesStore.prototype.getThemeStore = function (themeName) {
+    }
+    getThemeStore(themeName) {
         if (themeName) {
             return this.themes.local[themeName] || this.themes.library[themeName];
         }
-    };
-    TemplatesStore.prototype.setCurrency = function (currencyCode) {
-        return __awaiter(this, void 0, void 0, function () {
-            var currency, themeName, theme, themeName, theme;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(currencyCode in this.library.import.currency)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.library.import.currency[currencyCode]()];
-                    case 1:
-                        _a.sent();
-                        currency = this.library.locales.currencies[currencyCode];
-                        if (currency) {
-                            this.currency = currencyCode;
-                            this.storage.set('overrides.config.currency', this.currency);
-                            for (themeName in this.themes.local) {
-                                theme = this.themes.local[themeName];
-                                theme.setCurrency(currency);
-                            }
-                            for (themeName in this.themes.library) {
-                                theme = this.themes.library[themeName];
-                                theme.setCurrency(currency);
-                            }
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
+    }
+    async setCurrency(currencyCode) {
+        if (currencyCode in this.library.import.currency) {
+            await this.library.import.currency[currencyCode]();
+            const currency = this.library.locales.currencies[currencyCode];
+            if (currency) {
+                this.currency = currencyCode;
+                this.storage.set('overrides.config.currency', this.currency);
+                for (const themeName in this.themes.local) {
+                    const theme = this.themes.local[themeName];
+                    theme.setCurrency(currency);
                 }
-            });
-        });
-    };
-    TemplatesStore.prototype.setLanguage = function (languageCode) {
-        return __awaiter(this, void 0, void 0, function () {
-            var language, themeName, theme, themeName, theme;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(languageCode in this.library.import.language)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.library.import.language[languageCode]()];
-                    case 1:
-                        _a.sent();
-                        language = this.library.locales.languages[languageCode];
-                        if (language) {
-                            this.language = languageCode;
-                            this.storage.set('overrides.config.language', this.language);
-                            for (themeName in this.themes.local) {
-                                theme = this.themes.local[themeName];
-                                theme.setLanguage(language);
-                            }
-                            for (themeName in this.themes.library) {
-                                theme = this.themes.library[themeName];
-                                theme.setLanguage(language);
-                            }
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
+                for (const themeName in this.themes.library) {
+                    const theme = this.themes.library[themeName];
+                    theme.setCurrency(currency);
                 }
-            });
-        });
-    };
-    TemplatesStore.prototype.preLoad = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var themeName, theme, themeConfig, themeOverrides;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        // preload the library
-                        this.loading = true;
-                        return [4 /*yield*/, this.library.preLoad()];
-                    case 1:
-                        _a.sent();
-                        // build out the library themes
-                        this.themes.library = {};
-                        for (themeName in this.library.themes) {
-                            theme = this.library.themes[themeName];
-                            themeConfig = {
-                                name: themeName,
-                                type: 'library',
-                                base: theme,
-                                language: this.library.locales.languages[this.language] || {},
-                                languageOverrides: transformTranslationsToTheme((this.config.translations && this.config.translations[this.language]) || {}),
-                                currency: this.library.locales.currencies[this.currency] || {},
-                                innerWidth: this.window.innerWidth,
-                            };
-                            if (this.settings.editMode) {
-                                themeOverrides = this.storage.get('overrides.theme.variables') || {};
-                                themeConfig.editorOverrides = { variables: themeOverrides || {} };
-                            }
-                            this.addTheme(themeConfig);
-                        }
-                        this.loading = false;
-                        return [2 /*return*/];
+            }
+        }
+    }
+    async setLanguage(languageCode) {
+        if (languageCode in this.library.import.language) {
+            await this.library.import.language[languageCode]();
+            const language = this.library.locales.languages[languageCode];
+            if (language) {
+                this.language = languageCode;
+                this.storage.set('overrides.config.language', this.language);
+                for (const themeName in this.themes.local) {
+                    const theme = this.themes.local[themeName];
+                    theme.setLanguage(language);
                 }
-            });
-        });
-    };
-    return TemplatesStore;
-}());
+                for (const themeName in this.themes.library) {
+                    const theme = this.themes.library[themeName];
+                    theme.setLanguage(language);
+                }
+            }
+        }
+    }
+    async preLoad() {
+        // preload the library
+        this.loading = true;
+        await this.library.preLoad();
+        // build out the library themes
+        this.themes.library = {};
+        for (const themeName in this.library.themes) {
+            const theme = this.library.themes[themeName];
+            const themeConfig = {
+                name: themeName,
+                type: 'library',
+                base: theme,
+                language: this.library.locales.languages[this.language] || {},
+                languageOverrides: transformTranslationsToTheme((this.config.translations && this.config.translations[this.language]) || {}),
+                currency: this.library.locales.currencies[this.currency] || {},
+                innerWidth: this.window.innerWidth,
+            };
+            if (this.settings.editMode) {
+                const themeOverrides = this.storage.get('overrides.theme.variables') || {};
+                themeConfig.editorOverrides = { variables: themeOverrides || {} };
+            }
+            this.addTheme(themeConfig);
+        }
+        this.loading = false;
+    }
+}
 exports.TemplatesStore = TemplatesStore;
 function getTargetArray(targets, type) {
-    var _a = type.split('/'), category = _a[0], subcategory = _a[1];
+    const [category, subcategory] = type.split('/');
     if (category === 'recommendation' && subcategory) {
         return targets.recommendation[subcategory];
     }
-    if (category === 'search' || category === 'autocomplete') {
+    if (category === 'search' || category === 'autocomplete' || category === 'chat') {
         return targets[category];
     }
     return undefined;
 }
 function transformTranslationsToTheme(translations) {
-    var components = {};
-    Object.keys(translations).forEach(function (component) {
+    const components = {};
+    Object.keys(translations).forEach((component) => {
         components[component] = {
             // @ts-ignore - don't know which component it may be
             lang: translations[component],
         };
     });
     return {
-        components: components,
+        components,
     };
 }
-var Deferred = /** @class */ (function () {
-    function Deferred() {
-        var _this = this;
-        this.promise = new Promise(function (resolve, reject) {
-            _this.reject = reject;
-            _this.resolve = resolve;
+class Deferred {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this.reject = reject;
+            this.resolve = resolve;
         });
     }
-    return Deferred;
-}());
+}