@threekit-tools/treble 0.0.58 → 0.0.60-next.2

package/dist/hooks/useAttribute/index.js

@@ -42,26 +42,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var store_1 = require("../../store");
 var attributes_1 = require("../../store/attributes");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
 var api_1 = __importDefault(require("../../api"));
+var utils_2 = require("../../utils");
 var useAttribute = function (attributeName) {
+    var _a;
     if (!attributeName)
         return [undefined, undefined];
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getAttributes);
+    var _b = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData), attributes = _b[0], translations = _b[1], language = _b[2];
     if (!attributeName || !attributes)
         return [undefined, undefined];
     var attribute = attributes[attributeName];
     if (!attribute)
         return [undefined, undefined];
+    var preppedAttributes = (0, utils_2.hydrateAttribute)([(_a = {}, _a[attributeName] = attribute, _a), translations, language], function (config) { return dispatch((0, attributes_1.setConfiguration)(config)); });
     var handleChange = function (value) { return __awaiter(void 0, void 0, void 0, function () {
         var preppedValue, assetId;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!(attribute.type === 'Asset' &&
-                        attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 4];
+                    if (!(attribute.type === 'Asset' && attribute.assetType === 'upload')) return [3 /*break*/, 4];
                     if (!!value) return [3 /*break*/, 1];
                     preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
                     return [3 /*break*/, 3];
@@ -83,6 +84,6 @@ var useAttribute = function (attributeName) {
             }
         });
     }); };
-    return [attribute, handleChange];
+    return [preppedAttributes[attributeName], handleChange];
 };
 exports.default = useAttribute;

package/dist/hooks/useConfigurator/index.d.ts

@@ -1,7 +1,7 @@
-import { ISetConfiguration, IThreekitDisplayAttribute } from '../../threekit';
+import { ISetConfiguration, IHydratedAttribute } from '../../threekit';
 declare type UseConfiguratorError = [undefined, undefined];
 declare type UseConfiguratorSuccess = [
-    Record<string, IThreekitDisplayAttribute>,
+    Record<string, IHydratedAttribute>,
     (configuration: ISetConfiguration) => void
 ];
 declare type UseConfiguratorHook = UseConfiguratorError | UseConfiguratorSuccess;

package/dist/hooks/useConfigurator/index.js

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var attributes_1 = require("../../store/attributes");
 var store_1 = require("../../store");
+var utils_1 = require("../../utils");
 var useConfigurator = function () {
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getAttributes);
-    if (!attributes)
+    var hydrationData = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData);
+    if (!hydrationData)
         return [undefined, undefined];
+    var preppedAttributes = (0, utils_1.hydrateAttribute)(hydrationData, function (config) {
+        return dispatch((0, attributes_1.setConfiguration)(config));
+    });
     var handleChange = function (configuration) {
         return dispatch((0, attributes_1.setConfiguration)(configuration));
     };
-    return [attributes, handleChange];
+    return [preppedAttributes, handleChange];
 };
 exports.default = useConfigurator;

package/dist/hooks/useNestedConfigurator/index.d.ts

@@ -0,0 +1,8 @@
+import { IHydratedAttribute, ISetConfiguration } from '../../threekit';
+declare type UseNestedConfiguratorError = [undefined, undefined];
+declare type UseNestedConfiguratorSuccess = [
+    Record<string, IHydratedAttribute>,
+    (val: ISetConfiguration) => Promise<void>
+];
+declare const useNestedConfigurator: (address: string | Array<string>) => UseNestedConfiguratorError | UseNestedConfiguratorSuccess;
+export default useNestedConfigurator;

package/dist/hooks/useNestedConfigurator/index.js

@@ -0,0 +1,93 @@
+"use strict";
+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;
+    return g = { next: verb(0), "throw": verb(1), "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 (_) 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 });
+var react_1 = require("react");
+var store_1 = require("../../store");
+var treble_1 = require("../../store/treble");
+var utils_1 = require("../../utils");
+var attributes_1 = require("../../store/attributes");
+var useNestedConfigurator = function (address) {
+    var dispatch = (0, store_1.useThreekitDispatch)();
+    var hasInitialized = (0, store_1.useThreekitSelector)(treble_1.isThreekitInitialized);
+    var playerLoading = (0, store_1.useThreekitSelector)(treble_1.isPlayerLoading);
+    var _a = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData), _ = _a[0], translations = _a[1], language = _a[2];
+    var _b = (0, react_1.useState)(), attributes = _b[0], setAttributes = _b[1];
+    var configurator = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        (function () {
+            var _a;
+            if (!hasInitialized)
+                return;
+            if (playerLoading)
+                return;
+            configurator.current =
+                window.threekit.treble.getNestedConfigurator(address);
+            if (!configurator.current)
+                return;
+            var updatedAttrs = (_a = configurator.current) === null || _a === void 0 ? void 0 : _a.getDisplayAttributes();
+            setAttributes(updatedAttrs);
+        })();
+    }, [hasInitialized, address, playerLoading]);
+    if (!hasInitialized || !configurator.current || !attributes)
+        return [undefined, undefined];
+    var handleSelect = function (config) { return __awaiter(void 0, void 0, void 0, function () {
+        var updatedAttrs;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    dispatch((0, treble_1.setPlayerLoading)(true));
+                    return [4 /*yield*/, ((_a = configurator.current) === null || _a === void 0 ? void 0 : _a.setConfiguration(config))];
+                case 1:
+                    _c.sent();
+                    dispatch((0, treble_1.setPlayerLoading)(false));
+                    updatedAttrs = (_b = configurator.current) === null || _b === void 0 ? void 0 : _b.getDisplayAttributes();
+                    if (updatedAttrs)
+                        setAttributes(updatedAttrs);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var attributeObj = attributes.reduce(function (output, attr) {
+        var _a;
+        return Object.assign(output, (_a = {}, _a[attr.name] = attr, _a));
+    }, {});
+    var preppedAttributes = (0, utils_1.hydrateAttribute)([attributeObj, translations, language], handleSelect);
+    return [preppedAttributes, handleSelect];
+};
+exports.default = useNestedConfigurator;

package/dist/hooks/useProductCache/index.d.ts

@@ -0,0 +1,22 @@
+import { CachedProduct } from '../../store/product';
+import { IReloadConfig } from '../../store/treble';
+interface HydratedCacheProduct extends Pick<CachedProduct, 'name' | 'label' | 'thumbnail'> {
+    selected: boolean;
+    handleSelect: () => Promise<void>;
+    handleRemove: () => Promise<void>;
+}
+interface ISelectableProduct {
+    id: string;
+    label: string;
+    handleSelect: () => void;
+}
+interface CacheData {
+    cache: Array<HydratedCacheProduct>;
+    products: Array<ISelectableProduct>;
+}
+declare type UseProductCache = [
+    CacheData,
+    (config?: string | IReloadConfig) => Promise<void>
+];
+declare const useProductCache: () => UseProductCache;
+export default useProductCache;

package/dist/hooks/useProductCache/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var product_1 = require("../../store/product");
+var store_1 = require("../../store");
+var useProductCache = function () {
+    var dispatch = (0, store_1.useThreekitDispatch)();
+    var cache = (0, store_1.useThreekitSelector)(product_1.getProductCache);
+    var activeProductIdx = (0, store_1.useThreekitSelector)(product_1.getActiveCacheIdx);
+    var handleLoadNewProduct = function (config) {
+        return dispatch((0, product_1.loadNewProduct)(config));
+    };
+    var hydratedCache = cache.map(function (el, i) {
+        return Object.assign({}, el, {
+            selected: activeProductIdx === i,
+            handleRemove: function () { return dispatch((0, product_1.removeProductIdx)(i)); },
+            handleSelect: activeProductIdx === i
+                ? function () { return Promise.resolve(); }
+                : function () { return dispatch((0, product_1.changeActiveCacheIdx)(i)); },
+        });
+    });
+    var products = Object.keys(product_1.PRODUCTS).map(function (prod) { return ({
+        id: prod,
+        label: prod,
+        handleSelect: function () { return dispatch((0, product_1.loadProduct)(prod)); },
+    }); });
+    return [{ cache: hydratedCache, products: products }, handleLoadNewProduct];
+};
+exports.default = useProductCache;

package/dist/hooks/useWishlist/index.d.ts

@@ -1,12 +1,14 @@
-import { WishlistArray } from '../../Treble';
+import { IConfigurationResponse } from '../../http/configurations';
 import { ISaveConfiguration } from '../../api/configurations';
+interface HydratedWishlistItem extends IConfigurationResponse {
+    handleSelect: () => void;
+    handleRemove: () => void;
+    handleShare: () => void;
+}
 declare type UseWishlistHook = [
-    WishlistArray,
+    Array<HydratedWishlistItem>,
     (config?: Omit<ISaveConfiguration, 'configurator'>) => void,
-    (idx: number) => void,
-    (idx: number) => void,
-    (idx: number) => void,
     () => void
-] | [undefined, undefined, undefined, undefined, undefined, undefined];
+] | [undefined, undefined, undefined];
 declare const useWishlist: () => UseWishlistHook;
 export default useWishlist;

package/dist/hooks/useWishlist/index.js

@@ -11,32 +11,26 @@ var message_1 = __importDefault(require("../../components/message"));
 var useWishlist = function () {
     var dispatch = (0, store_1.useThreekitDispatch)();
     var isLoaded = (0, store_1.useThreekitSelector)(treble_1.isThreekitInitialized);
-    var wishlist = (0, store_1.useThreekitSelector)(wishlist_1.getWishlist);
+    var wishlistData = (0, store_1.useThreekitSelector)(wishlist_1.getWishlist);
     if (!isLoaded)
-        return [undefined, undefined, undefined, undefined, undefined, undefined];
+        return [undefined, undefined, undefined];
     var handleAddToWishlist = function (config) { return dispatch((0, wishlist_1.addToWishlist)(config)); };
-    var handleRemoveFromWishlist = function (idx) {
-        dispatch((0, wishlist_1.removeFromWishlist)(idx));
-        message_1.default.info('Item removed from wishlist');
-    };
-    var handleResumeItem = function (idx) {
-        dispatch((0, wishlist_1.resumeFromWishlist)(idx));
-    };
-    var handleShareItem = function (idx) {
-        var url = (0, utils_1.getResumableUrl)(wishlist[idx].shortId);
-        (0, utils_1.copyToClipboard)(url);
-        message_1.default.info('Link copied!');
-    };
     var handleClearWishlist = function () {
         dispatch(wishlist_1.clearWishlist);
     };
-    return [
-        wishlist,
-        handleAddToWishlist,
-        handleRemoveFromWishlist,
-        handleResumeItem,
-        handleShareItem,
-        handleClearWishlist,
-    ];
+    var wishlist = wishlistData.map(function (el, i) {
+        return Object.assign({}, el, {
+            handleSelect: function () { return dispatch((0, wishlist_1.resumeFromWishlist)(i)); },
+            handleRemove: function () {
+                dispatch((0, wishlist_1.removeFromWishlist)(i));
+                message_1.default.info('Item removed from wishlist');
+            },
+            handleShare: function () {
+                (0, utils_1.copyToClipboard)((0, utils_1.getResumableUrl)(el.shortId));
+                message_1.default.info('Link copied!');
+            },
+        });
+    });
+    return [wishlist, handleAddToWishlist, handleClearWishlist];
 };
 exports.default = useWishlist;

package/dist/http/index.d.ts

@@ -3,11 +3,13 @@ import * as products from './products';
 import * as configurations from './configurations';
 import * as pricebook from './pricebook';
 import * as catalog from './catalog';
+import * as server from './server';
 declare const _default: {
     orders: typeof orders;
     products: typeof products;
     configurations: typeof configurations;
     pricebook: typeof pricebook;
     catalog: typeof catalog;
+    server: typeof server;
 };
 export default _default;

package/dist/http/index.js

@@ -24,10 +24,12 @@ var products = __importStar(require("./products"));
 var configurations = __importStar(require("./configurations"));
 var pricebook = __importStar(require("./pricebook"));
 var catalog = __importStar(require("./catalog"));
+var server = __importStar(require("./server"));
 exports.default = {
     orders: orders,
     products: products,
     configurations: configurations,
     pricebook: pricebook,
     catalog: catalog,
+    server: server,
 };

package/dist/http/server.d.ts

@@ -0,0 +1,14 @@
+export interface IPostEmailRequest {
+    From: string;
+    To: string;
+    TemplateId: string;
+    TemplateModel: Record<string, any>;
+}
+export interface IPostEmailResponse {
+    To: string;
+    SubmittedAt: string;
+    MessageID: string;
+    ErrorCode: 0;
+    Message: string;
+}
+export declare const postEmail: (data: IPostEmailRequest) => Promise<IPostEmailResponse>;

package/dist/http/server.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postEmail = void 0;
+var axios_1 = __importDefault(require("axios"));
+var connection_1 = __importDefault(require("../connection"));
+var postEmail = function (data) {
+    if (!data)
+        throw new Error('data missing');
+    var serverUrl = connection_1.default.getConnection().serverUrl;
+    if (!serverUrl)
+        throw new Error('missing server-url');
+    return axios_1.default.post("".concat(serverUrl, "/api/email"), data);
+};
+exports.postEmail = postEmail;

package/dist/index.d.ts

@@ -10,6 +10,8 @@ import useSnapshot from './hooks/useSnapshot';
 import useWishlist from './hooks/useWishlist';
 import useShare from './hooks/useShare';
 import usePlayerPortal from './hooks/usePlayerPortal';
+import useProductCache from './hooks/useProductCache';
+import useNestedConfigurator from './hooks/useNestedConfigurator';
 import ThreekitProvider from './components/ThreekitProvider';
 import Player from './components/Player';
 import Button from './components/Button';
@@ -41,4 +43,4 @@ import icons from './icons';
 export * from './icons';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
+export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };

package/dist/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
+exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -40,6 +40,10 @@ exports.useShare = useShare_1.default;
 var usePlayerPortal_1 = __importDefault(require("./hooks/usePlayerPortal"));
 exports.usePlayerPortal = usePlayerPortal_1.default;
 // import useSingleAnimation from './hooks/useSingleAnimation';
+var useProductCache_1 = __importDefault(require("./hooks/useProductCache"));
+exports.useProductCache = useProductCache_1.default;
+var useNestedConfigurator_1 = __importDefault(require("./hooks/useNestedConfigurator"));
+exports.useNestedConfigurator = useNestedConfigurator_1.default;
 //  Components
 var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
 exports.ThreekitProvider = ThreekitProvider_1.default;

package/dist/store/attributes.d.ts

@@ -1,5 +1,6 @@
 import { RootState, ThreekitDispatch } from './index';
 import { ISetConfiguration, IThreekitDisplayAttribute } from '../threekit';
+import { ITranslationMap } from '../api/products';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
@@ -15,6 +16,18 @@ declare const reducer: import("redux").Reducer<AttributesState, import("redux").
 /*****************************************************
  * Standard Selectors
  ****************************************************/
-export declare const getAttributes: (state: RootState) => undefined | Record<string, IThreekitDisplayAttribute>;
+export declare const getAttributes: (state: RootState) => AttributesState;
+export declare const getHydrationData: ((state: {
+    treble: import("./treble").TrebleState;
+    product: import("./product").ProductState;
+    attributes: AttributesState;
+    translations: import("./translations").TranslationsState;
+    wishlist: import("../Treble").WishlistArray;
+    price: import("./price").PriceState;
+}) => [Record<string, IThreekitDisplayAttribute>, ITranslationMap | undefined, string | undefined]) & import("reselect").OutputSelectorFields<(args_0: AttributesState, args_1: string | undefined) => [Record<string, IThreekitDisplayAttribute>, ITranslationMap | undefined, string | undefined] & {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
 export declare const setConfiguration: (config: ISetConfiguration) => (dispatch: ThreekitDispatch) => Promise<void>;
 export default reducer;

package/dist/store/attributes.js

@@ -36,9 +36,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setConfiguration = exports.getAttributes = exports.setAttributes = void 0;
+exports.setConfiguration = exports.getHydrationData = exports.getAttributes = exports.setAttributes = void 0;
 var toolkit_1 = require("@reduxjs/toolkit");
 var treble_1 = require("./treble");
+var translations_1 = require("./translations");
 /*****************************************************
  * Actions
  ****************************************************/
@@ -76,51 +77,11 @@ var reducer = (0, toolkit_1.createSlice)({
 /*****************************************************
  * Standard Selectors
  ****************************************************/
-//  Attributes
-var getAttributes = function (state) {
-    var attributes = state.attributes;
-    var isThreekitInitialized = state.treble.isThreekitInitialized;
-    var _a = state.translations, language = _a.language, translations = _a.translations;
-    if (!isThreekitInitialized)
-        return undefined;
-    if (!attributes)
-        return undefined;
-    var hasTranslation = !!language && !!translations;
-    return Object.values(attributes).reduce(function (output, attribute) {
-        var _a;
-        var _b;
-        return Object.assign(output, (_a = {},
-            _a[attribute.name] = Object.assign({}, attribute, {
-                label: hasTranslation
-                    ? ((_b = translations === null || translations === void 0 ? void 0 : translations[attribute.name]) === null || _b === void 0 ? void 0 : _b[language]) || attribute.name
-                    : attribute.name,
-            }, attribute.type === 'String'
-                ? {
-                    values: attribute.values.map(function (el) {
-                        var _a;
-                        return Object.assign({}, el, {
-                            label: hasTranslation
-                                ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.label]) === null || _a === void 0 ? void 0 : _a[language]) || el.label
-                                : el.label,
-                        });
-                    }),
-                }
-                : attribute.type === 'Asset'
-                    ? {
-                        values: attribute.values.map(function (el) {
-                            var _a;
-                            return Object.assign({}, el, {
-                                label: hasTranslation
-                                    ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.name]) === null || _a === void 0 ? void 0 : _a[language]) || el.name
-                                    : el.name,
-                            });
-                        }),
-                    }
-                    : undefined),
-            _a));
-    }, {});
-};
+var getAttributes = function (state) { return state.attributes; };
 exports.getAttributes = getAttributes;
+exports.getHydrationData = (0, toolkit_1.createSelector)(exports.getAttributes, translations_1.getLanguage, function (attributes, language) {
+    return [attributes, translations_1.TRANSLATIONS, language];
+});
 //  Configurator
 var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {

package/dist/store/product.d.ts

@@ -1,22 +1,67 @@
 import { RootState, ThreekitDispatch } from './index';
-import { IMetadata } from '../threekit';
+import { IMetadata, IConfiguration, IProduct } from '../threekit';
+import { IConnectionConfig } from '../connection';
+import { IReloadConfig } from './treble';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
+export interface CachedProduct {
+    id: undefined | string;
+    name?: string;
+    label?: string;
+    thumbnail?: string;
+    connection: IConnectionConfig;
+    configuration: IConfiguration;
+}
+export interface CachedProductState extends Pick<CachedProduct, 'id' | 'name' | 'label' | 'thumbnail'> {
+    data: string;
+}
+interface IEnvConfig extends Record<string, Partial<IProduct>> {
+}
+export interface IHydratedProducts extends Record<string, IEnvConfig> {
+}
 export interface ProductState {
+    id: undefined | string;
     name: undefined | string;
     metadata: undefined | IMetadata;
+    cache: Array<CachedProductState>;
+    activeCacheIdx: number;
 }
+/*****************************************************
+ * Constants
+ ****************************************************/
+export declare let PRODUCTS: IHydratedProducts;
 /*****************************************************
  * Actions
  ****************************************************/
+export declare const setProductId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>;
 export declare const setName: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const setMetadata: import("@reduxjs/toolkit").ActionCreatorWithPayload<IMetadata, string>;
-export declare const initProduct: () => (dispatch: ThreekitDispatch) => void;
+export declare const appendToCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
+export declare const updateActiveProductCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
+export declare const removeFromCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const setActiveCacheIdx: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const incrementActiveCacheIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
+export declare const decrementActiveCacheIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
 declare const reducer: import("redux").Reducer<ProductState, import("redux").AnyAction>;
 /*****************************************************
  * Standard Selectors
  ****************************************************/
+export declare const getProductId: (state: RootState) => undefined | string;
 export declare const getName: (state: RootState) => undefined | string;
 export declare const getMetadata: (state: RootState) => undefined | IMetadata;
+export declare const getActiveCacheIdx: (state: RootState) => number;
+export declare const getProductCache: (state: RootState) => Array<Pick<CachedProduct, 'name' | 'label' | 'thumbnail'>>;
+/*****************************************************
+ * Complex Actions
+ ****************************************************/
+export declare const initProduct: (prods?: IHydratedProducts | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
+export declare const cacheActiveProduct: (config?: Pick<IReloadConfig, "label" | "thumbnail"> | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => {
+    payload: CachedProductState;
+    type: string;
+};
+export declare const loadProduct: (id: string) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
+export declare const loadNewProduct: (config: undefined | string | IReloadConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const changeActiveCacheIdx: (idx: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
+export declare const removeProductIdx: (idx?: number | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;