@threekit-tools/treble 0.0.59 → 0.0.60-next.1

package/dist/Treble/Treble.d.ts

@@ -1,5 +1,5 @@
 import threekitAPI from '../api';
-import { IThreekitPlayer, IConfiguration, ISetConfiguration } from '../threekit';
+import { IThreekitPlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../threekit';
 import { IWishlist } from './Wishlist';
 import Snapshots from './Snapshots';
 import { ISaveConfiguration } from '../api/configurations';
@@ -26,7 +26,7 @@ declare class Treble {
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;
     }>;
-    getNestedConfigurator: (address: string | Array<string>) => any;
+    getNestedConfigurator: (address: string | Array<string>) => undefined | IThreekitPrivateConfigurator;
     resetConfiguration: (configuration?: ISetConfiguration | undefined) => void;
     sendEmail: (credentials: IEmailShareCredentials, templateData: Record<string, any>) => Promise<import("../http/server").IPostEmailResponse>;
 }

package/dist/Treble/Treble.js

@@ -83,14 +83,19 @@ var Treble = /** @class */ (function () {
             });
         }); };
         this.getNestedConfigurator = function (address) {
+            if (!address)
+                return undefined;
             var player = window.threekit.player.enableApi('player');
             var addressArr = Array.isArray(address) ? address : [address];
             return addressArr.reduce(function (configurator, attributeName) {
+                var _a;
+                if (!configurator)
+                    return undefined;
                 var itemId = configurator.getAppliedConfiguration(attributeName);
-                return window.threekit.player.scene.get({
+                return (_a = window.threekit.player.scene.get({
                     id: itemId,
                     evalNode: true,
-                }).configurator;
+                })) === null || _a === void 0 ? void 0 : _a.configurator;
             }, player.getConfigurator());
         };
         this.resetConfiguration = function (configuration) {

package/dist/components/ThreekitProvider/index.d.ts

@@ -5,6 +5,7 @@ interface Theme {
     [key: string]: string | number;
 }
 export interface ThreekitProviderProps extends Partial<ILaunchConfig> {
+    productId?: string;
     theme?: Theme;
     reducer?: Record<string, Reducer>;
     children: React.ReactNode;

package/dist/components/ThreekitProvider/index.js

@@ -31,10 +31,17 @@ var theme_1 = __importDefault(require("../../theme"));
 var GlobalStyles_styles_1 = __importDefault(require("./GlobalStyles.styles"));
 var App = function (props) {
     var dispatch = (0, store_1.useThreekitDispatch)();
+    var playerConfig = props.playerConfig, productId = props.productId, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
     (0, react_1.useEffect)(function () {
         var init = function () {
-            var playerConfig = props.playerConfig, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
-            dispatch((0, treble_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv, eventHandlers: eventHandlers }));
+            dispatch((0, treble_1.launch)({
+                playerConfig: playerConfig,
+                productId: productId,
+                project: project,
+                locale: locale,
+                threekitEnv: threekitEnv,
+                eventHandlers: eventHandlers,
+            }));
         };
         init();
         return;
@@ -45,6 +52,6 @@ var ThreekitProvider = function (props) {
     return (react_1.default.createElement(react_redux_1.Provider, { store: (0, store_1.default)(props.reducer) },
         react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             react_1.default.createElement(GlobalStyles_styles_1.default, null),
-            react_1.default.createElement(App, { locale: props.locale, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv, eventHandlers: props.eventHandlers }, props.children))));
+            react_1.default.createElement(App, { locale: props.locale, productId: props.productId, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv, eventHandlers: props.eventHandlers }, props.children))));
 };
 exports.default = ThreekitProvider;

package/dist/components/TrebleApp/index.d.ts

@@ -3,5 +3,6 @@ import { ThreekitProviderProps } from '../ThreekitProvider';
 interface TrebleAppProps extends Omit<ThreekitProviderProps, 'children'> {
     productId?: string;
 }
+export declare const Products: () => JSX.Element | null;
 export default function TrebleApp(props: TrebleAppProps): JSX.Element | null;
 export {};

package/dist/components/TrebleApp/index.js

@@ -22,13 +22,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Products = void 0;
 var react_1 = __importStar(require("react"));
+var store_1 = require("../../store");
 var ThreekitProvider_1 = __importDefault(require("../ThreekitProvider"));
 var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
+var product_1 = require("../../store/product");
 var productsMap = {};
 var productComponents = [];
 var productToComponentMap = {};
+var Products = function () {
+    var productId = (0, store_1.useThreekitSelector)(product_1.getProductId);
+    if (!productId)
+        return null;
+    var Product = productComponents[productToComponentMap[productId]];
+    if (!Product)
+        return null;
+    return react_1.default.createElement(Product, null);
+};
+exports.Products = Products;
 function TrebleApp(props) {
     var _a;
     var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme, eventHandlers = props.eventHandlers;
@@ -69,13 +82,10 @@ function TrebleApp(props) {
     }
     if (!id)
         return null;
-    var Product = productComponents[productToComponentMap[id]];
-    if (!Product)
-        return null;
     var preppedProject = Object.assign({}, project, {
-        products: productsMap[id],
+        products: productsMap,
     });
-    return (react_1.default.createElement(ThreekitProvider_1.default, { project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv, eventHandlers: eventHandlers },
-        react_1.default.createElement(Product, null)));
+    return (react_1.default.createElement(ThreekitProvider_1.default, { productId: id, project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv, eventHandlers: eventHandlers },
+        react_1.default.createElement(exports.Products, null)));
 }
 exports.default = TrebleApp;

package/dist/components/Wishlist/index.js

@@ -81,16 +81,12 @@ var WishlistButton = function (props) {
 exports.WishlistButton = WishlistButton;
 var Wishlist = function (props) {
     var _a = (0, react_1.useState)(false), showWishlist = _a[0], setShowWishlist = _a[1];
-    var _b = (0, useWishlist_1.default)(), wishlist = _b[0], addToWishlist = _b[1], removeFromWishlist = _b[2], resumeWishlistItem = _b[3], shareWishlistItem = _b[4];
+    var _b = (0, useWishlist_1.default)(), wishlist = _b[0], addToWishlist = _b[1];
     var className = props.className, showLabel = props.showLabel;
     var shape = props.shape || 'round';
     var type = props.type || 'threekit';
     var cls = (0, utils_1.generateWidgetClassName)('wishlist', className);
-    if (!wishlist ||
-        !addToWishlist ||
-        !resumeWishlistItem ||
-        !removeFromWishlist ||
-        !shareWishlistItem)
+    if (!wishlist || !addToWishlist)
         return null;
     var handleAddToWishlist = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -103,16 +99,15 @@ var Wishlist = function (props) {
             }
         });
     }); };
-    var handleClickResume = function (idx) {
-        resumeWishlistItem(idx);
-        setShowWishlist(false);
-    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(shared_styles_1.TwinButtonWrapper, null,
             react_1.default.createElement(exports.AddWishlistButton, { title: showLabel ? 'Add to Wishlist' : undefined, className: cls, onClick: handleAddToWishlist, type: type, shape: shape }),
             react_1.default.createElement(exports.WishlistButton, { title: showLabel ? 'Open Wishlist' : undefined, className: cls, onClick: function () { return setShowWishlist(true); }, type: type, shape: shape })),
         react_1.default.createElement(Drawer_1.default, { title: "Wishlist", show: showWishlist, handleClose: function () { return setShowWishlist(false); } },
-            react_1.default.createElement(wishlist_styles_1.WishlistWrapper, null, wishlist.map(function (el, i) { return (react_1.default.createElement(WishlistItem_1.default, { key: i, thumbnail: el.thumbnail || undefined, metadata: el.metadata || undefined, onDelete: function () { return removeFromWishlist(i); }, onResume: function () { return handleClickResume(i); }, onShare: function () { return shareWishlistItem(i); } })); })))));
+            react_1.default.createElement(wishlist_styles_1.WishlistWrapper, null, wishlist.map(function (el, i) { return (react_1.default.createElement(WishlistItem_1.default, { key: i, thumbnail: el.thumbnail || undefined, metadata: el.metadata || undefined, onDelete: el.handleRemove, onResume: function () {
+                    el.handleSelect();
+                    setShowWishlist(false);
+                }, onShare: el.handleShare })); })))));
 };
 exports.Wishlist = Wishlist;
 exports.Wishlist.propTypes = {

package/dist/components/containers/formInputContainer.d.ts

@@ -36,11 +36,11 @@ export interface IFormComponentProps<T extends IOptionShared | undefined> extend
 export interface IFormComponent<P> extends FunctionComponent<P> {
     compatibleAttributes: Set<string>;
 }
-interface IPrepAttributeConfig {
+interface IhydrateAttributeConfig {
     metadataKeys: MetadataKeys;
     sort?: string;
 }
-export declare const prepAttributeForComponent: (attribute: IHydratedAttribute, config: IPrepAttributeConfig) => {
+export declare const hydrateAttributeForComponent: (attribute: IHydratedAttribute, config: IhydrateAttributeConfig) => {
     selected: string | number | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
     options: {
         name: string;

package/dist/components/containers/formInputContainer.js

@@ -14,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepAttributeForComponent = void 0;
+exports.hydrateAttributeForComponent = void 0;
 var react_1 = __importDefault(require("react"));
 var useAttribute_1 = __importDefault(require("../../hooks/useAttribute"));
 var usePlayerLoadingStatus_1 = __importDefault(require("../../hooks/usePlayerLoadingStatus"));
 var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
-var prepAttributeForComponent = function (attribute, config) {
+var hydrateAttributeForComponent = function (attribute, config) {
     var _a;
     var _b = config.metadataKeys, metadataKeyThumbnail = _b.metadataKeyThumbnail, metadataKeyPrice = _b.metadataKeyPrice, metadataKeyDescription = _b.metadataKeyDescription;
     var sort = config.sort;
@@ -76,7 +76,7 @@ var prepAttributeForComponent = function (attribute, config) {
     }
     return { selected: selected, options: options };
 };
-exports.prepAttributeForComponent = prepAttributeForComponent;
+exports.hydrateAttributeForComponent = hydrateAttributeForComponent;
 function formComponentContainer(FormComponent) {
     return function (props) {
         var attribute = props.attribute, metadataKeyThumbnail = props.metadataKeyThumbnail, metadataKeyDescription = props.metadataKeyDescription, metadataKeyPrice = props.metadataKeyPrice, hideAttributeTitle = props.hideAttributeTitle, sort = props.sort;
@@ -90,7 +90,7 @@ function formComponentContainer(FormComponent) {
             console.log('Incompatible attribute type for this component');
             return null;
         }
-        var _b = (0, exports.prepAttributeForComponent)(attributeData, {
+        var _b = (0, exports.hydrateAttributeForComponent)(attributeData, {
             metadataKeys: {
                 metadataKeyThumbnail: metadataKeyThumbnail,
                 metadataKeyDescription: metadataKeyDescription,

package/dist/hooks/useAttribute/index.js

@@ -43,16 +43,19 @@ var store_1 = require("../../store");
 var attributes_1 = require("../../store/attributes");
 var utils_1 = require("../../utils");
 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.getHydratedAttributes);
+    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;
@@ -81,6 +84,6 @@ var useAttribute = function (attributeName) {
             }
         });
     }); };
-    return [attribute, handleChange];
+    return [preppedAttributes[attributeName], handleChange];
 };
 exports.default = useAttribute;

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.getHydratedAttributes);
-    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 || !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

@@ -1,14 +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 {
-    activeProductIdx: number;
-    cache: Array<Pick<CachedProduct, 'name' | 'label' | 'thumbnail'>>;
+    cache: Array<HydratedCacheProduct>;
+    products: Array<ISelectableProduct>;
 }
 declare type UseProductCache = [
     CacheData,
-    (config?: string | IReloadConfig) => Promise<void>,
-    (idx: number) => Promise<void>,
-    (idx: number) => Promise<void>
+    (config?: string | IReloadConfig) => Promise<void>
 ];
 declare const useProductCache: () => UseProductCache;
 export default useProductCache;

package/dist/hooks/useProductCache/index.js

@@ -5,31 +5,24 @@ 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.getActiveProductIdx);
-    var data = {
-        cache: cache,
-        activeProductIdx: activeProductIdx,
-    };
-    var handleChangeActiveProduct = function (idx) {
-        if (idx === undefined)
-            return Promise.resolve();
-        if (idx === activeProductIdx)
-            return Promise.resolve();
-        if (!cache || idx >= (cache === null || cache === void 0 ? void 0 : cache.length))
-            return Promise.resolve();
-        return dispatch((0, product_1.changeActiveProductIdx)(idx));
-    };
+    var activeProductIdx = (0, store_1.useThreekitSelector)(product_1.getActiveCacheIdx);
     var handleLoadNewProduct = function (config) {
         return dispatch((0, product_1.loadNewProduct)(config));
     };
-    var handleRemoveProduct = function (idx) {
-        return dispatch((0, product_1.removeProductIdx)(idx));
-    };
-    return [
-        data,
-        handleLoadNewProduct,
-        handleChangeActiveProduct,
-        handleRemoveProduct,
-    ];
+    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/index.d.ts

@@ -11,6 +11,7 @@ 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';
@@ -42,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, useProductCache, 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.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;
+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;
@@ -42,6 +42,8 @@ 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,5 @@
 import { RootState, ThreekitDispatch } from './index';
-import { ISetConfiguration, IThreekitDisplayAttribute, IHydratedAttribute } from '../threekit';
+import { ISetConfiguration, IThreekitDisplayAttribute } from '../threekit';
 import { ITranslationMap } from '../api/products';
 /*****************************************************
  * Types and Interfaces
@@ -17,14 +17,14 @@ declare const reducer: import("redux").Reducer<AttributesState, import("redux").
  * Standard Selectors
  ****************************************************/
 export declare const getAttributes: (state: RootState) => AttributesState;
-export declare const getHydratedAttributes: ((state: {
+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, IHydratedAttribute>) & import("reselect").OutputSelectorFields<(args_0: AttributesState, args_1: ITranslationMap | undefined, args_2: string | undefined) => Record<string, IHydratedAttribute> & {
+}) => [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;