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

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';
@@ -8,6 +8,11 @@ interface ITreble {
     orgId: string;
     initialConfiguration: IConfiguration;
 }
+interface IEmailShareCredentials {
+    to: string;
+    from: string;
+    templateId: string;
+}
 declare class Treble {
     _api: typeof threekitAPI;
     _player: IThreekitPlayer;
@@ -21,7 +26,8 @@ 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>;
 }
 export default Treble;

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) {
@@ -98,6 +103,22 @@ var Treble = /** @class */ (function () {
             var updateConfiguration = Object.assign(initialConfiguration, configuration);
             window.threekit.configurator.setConfiguration(updateConfiguration);
         };
+        this.sendEmail = function (credentials, templateData) {
+            if (!credentials)
+                throw new Error('sendEmail is missing credentials object');
+            if (!credentials.from.length)
+                throw new Error('sendEmail is missing sender email - "From"');
+            if (!credentials.to.length)
+                throw new Error('sendEmail is missing receivers email - "To"');
+            if (!credentials.templateId.length)
+                throw new Error('sendEmail is missing the templateId to use - "TemplateId"');
+            var data = Object.assign({
+                To: credentials.to,
+                From: credentials.from,
+                TemplateId: credentials.templateId,
+            }, { TemplateModel: templateData });
+            return api_1.default.server.sendEmail(data);
+        };
         //  Threekit API
         this._api = api_1.default;
         this._player = player;

package/dist/api/index.d.ts

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

package/dist/api/index.js

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

package/dist/api/server.d.ts

@@ -0,0 +1,2 @@
+import { IPostEmailRequest } from '../http/server';
+export declare const sendEmail: (data: IPostEmailRequest) => Promise<import("../http/server").IPostEmailResponse>;

package/dist/api/server.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendEmail = void 0;
+var http_1 = __importDefault(require("../http"));
+var sendEmail = function (data) {
+    return http_1.default.server.postEmail(data);
+};
+exports.sendEmail = sendEmail;

package/dist/components/Cards/index.js

@@ -38,7 +38,7 @@ var Price = function (props) {
     return react_1.default.createElement(cards_styles_1.CardPrice, { className: "".concat(className, " option-price") }, price);
 };
 var Cards = function (props) {
-    var title = props.title, description = props.description, options = props.options, value = props.value, onClick = props.onClick, customClassName = props.className, showThumbnail = props.showThumbnail, showPrice = props.showPrice, showDescription = props.showDescription;
+    var title = props.title, description = props.description, options = props.options, customClassName = props.className, showThumbnail = props.showThumbnail, showPrice = props.showPrice, showDescription = props.showDescription;
     var cls = (0, utils_1.generateInputClassName)('cards', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
@@ -50,10 +50,9 @@ var Cards = function (props) {
                 imageUrl: !showThumbnail ? undefined : el.imageUrl,
                 price: !showPrice ? undefined : el.price,
                 description: !showDescription ? undefined : el.description,
-            }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
-            var selected = value === optionValue;
+            }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue, selected = _a.selected, handleSelect = _a.handleSelect;
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
-            return (react_1.default.createElement(cards_styles_1.CardWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt },
+            return (react_1.default.createElement(cards_styles_1.CardWrapper, { key: i, onClick: handleSelect, selected: selected, className: clsOpt },
                 react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, name: name, className: clsOpt }),
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(Title, { name: name, className: clsOpt }),

package/dist/components/Dropdown/index.js

@@ -57,7 +57,7 @@ var Price = function (props) {
     return (react_1.default.createElement(dropdown_styles_1.OptionPrice, { className: "".concat(className, " option-price") }, price));
 };
 var Dropdown = function (props) {
-    var title = props.title, description = props.description, options = props.options, value = props.value, onClick = props.onClick, customClassName = props.className, showThumbnail = props.showThumbnail, showPrice = props.showPrice, showDescription = props.showDescription, dropdownMaxHeight = props.dropdownMaxHeight;
+    var title = props.title, description = props.description, options = props.options, value = props.value, customClassName = props.className, showThumbnail = props.showThumbnail, showPrice = props.showPrice, showDescription = props.showDescription, dropdownMaxHeight = props.dropdownMaxHeight;
     var _a = (0, react_1.useState)(true), hide = _a[0], setHide = _a[1];
     var ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
@@ -73,12 +73,6 @@ var Dropdown = function (props) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [hide, ref]);
-    var handleClick = function (value) {
-        if (!onClick)
-            return;
-        onClick(value);
-        setHide(true);
-    };
     var cls = (0, utils_1.generateInputClassName)('dropdown', customClassName, title);
     var selectedOpt = options === null || options === void 0 ? void 0 : options.find(function (el) { return el.value === value; });
     return (react_1.default.createElement("div", { className: cls },
@@ -105,10 +99,12 @@ var Dropdown = function (props) {
                         imageUrl: !showThumbnail ? undefined : el.imageUrl,
                         price: !showPrice ? undefined : el.price,
                         description: !showDescription ? undefined : el.description,
-                    }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
-                    var selected = value === optionValue;
+                    }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue, selected = _a.selected, handleSelect = _a.handleSelect;
                     var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue);
-                    return (react_1.default.createElement(dropdown_styles_1.OptionWrapper, { key: i, onClick: function () { return handleClick(optionValue); }, className: clsOpt, selected: selected },
+                    return (react_1.default.createElement(dropdown_styles_1.OptionWrapper, { key: i, onClick: function () {
+                            handleSelect();
+                            setHide(true);
+                        }, className: clsOpt, selected: selected },
                         react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, name: name, className: clsOpt }),
                         react_1.default.createElement("div", null,
                             react_1.default.createElement(Title, { name: name, className: clsOpt }),

package/dist/components/Strips/index.js

@@ -38,7 +38,7 @@ var Price = function (props) {
     return (react_1.default.createElement(strips_styles_1.StripPrice, { className: "".concat(className, " option-price") }, price));
 };
 var Strips = function (props) {
-    var title = props.title, description = props.description, options = props.options, value = props.value, onClick = props.onClick, customClassName = props.className, showThumbnail = props.showThumbnail, showPrice = props.showPrice, showDescription = props.showDescription;
+    var title = props.title, description = props.description, options = props.options, customClassName = props.className, showThumbnail = props.showThumbnail, showPrice = props.showPrice, showDescription = props.showDescription;
     var cls = (0, utils_1.generateInputClassName)('strips', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
@@ -50,10 +50,9 @@ var Strips = function (props) {
                 imageUrl: !showThumbnail ? undefined : el.imageUrl,
                 price: !showPrice ? undefined : el.price,
                 description: !showDescription ? undefined : el.description,
-            }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
-            var selected = value === optionValue;
+            }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue, selected = _a.selected, handleSelect = _a.handleSelect;
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
-            return (react_1.default.createElement(strips_styles_1.StripWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt },
+            return (react_1.default.createElement(strips_styles_1.StripWrapper, { key: i, onClick: handleSelect, selected: selected, className: clsOpt },
                 react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, name: name, className: clsOpt }),
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(Title, { name: name, className: clsOpt }),

package/dist/components/Swatch/index.js

@@ -30,7 +30,7 @@ var Thumbnail = function (props) {
     return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape, size: size }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
 };
 var Swatch = function (props) {
-    var _a = Object.assign({ shape: 'round', size: '60px' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription, size = _a.size;
+    var _a = Object.assign({ shape: 'round', size: '60px' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription, size = _a.size;
     var cls = (0, utils_1.generateInputClassName)('swatch', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
@@ -42,10 +42,9 @@ var Swatch = function (props) {
                 imageUrl: !showThumbnail ? undefined : el.imageUrl,
                 price: !showPrice ? undefined : el.price,
                 description: !showDescription ? undefined : el.description,
-            }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
-            var selected = value === optionValue;
+            }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue, selected = _a.selected, handleSelect = _a.handleSelect;
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
-            return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt, shape: shape, size: size },
+            return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: handleSelect, selected: selected, className: clsOpt, shape: shape, size: size },
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt, size: size })),
                 react_1.default.createElement(SwatchInfo, { title: name, price: price, description: description })));

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { IFormComponentProps } from '../containers/formInputContainer';
 export interface ITextInput extends IFormComponentProps<undefined> {
+    maxLength?: number;
 }
 export declare const TextInput: {
     (props: ITextInput): JSX.Element;

package/dist/components/TextInput/index.js

@@ -14,12 +14,12 @@ var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var TextInput = function (props) {
-    var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
+    var title = props.title, description = props.description, value = props.value, onChange = props.onChange, maxLength = props.maxLength, customClassName = props.className;
     var cls = (0, utils_1.generateInputClassName)('text-input', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
         react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
-        react_1.default.createElement(textInput_styles_1.Input, { type: "text", value: value, onChange: function (e) { return onChange && onChange(e.target.value); }, className: cls })));
+        react_1.default.createElement(textInput_styles_1.Input, { type: "text", maxLength: maxLength, value: value, onChange: function (e) { return onChange && onChange(e.target.value); }, className: cls })));
 };
 exports.TextInput = TextInput;
 exports.TextInput.componentName = 'text-input';

package/dist/components/TextInput/textInput.styles.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: 0;\n  padding: 10px 6px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  width: 100%;\n  margin: 0;\n  padding: 10px 6px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return "".concat(props.theme.primaryColor, "33"); });
+exports.Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: 0;\n  padding: 8px 7px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  width: 100%;\n  margin: 0;\n  padding: 8px 7px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return "".concat(props.theme.primaryColor, "33"); });
 var templateObject_1;

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/Tiles/index.js

@@ -14,16 +14,15 @@ var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var Tiles = function (props) {
-    var _a = Object.assign({ columns: 2 }, props), title = _a.title, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, columns = _a.columns;
+    var _a = Object.assign({ columns: 2 }, props), title = _a.title, description = _a.description, options = _a.options, customClassName = _a.className, columns = _a.columns;
     var cls = (0, utils_1.generateInputClassName)('tiles', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
         react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
         react_1.default.createElement(tiles_styles_1.TilesWrapper, { columns: columns }, options === null || options === void 0 ? void 0 : options.map(function (el, i) {
-            var name = el.name, optionValue = el.value;
-            var selected = value === optionValue;
+            var name = el.name, optionValue = el.value, selected = el.selected, handleSelect = el.handleSelect;
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
-            return (react_1.default.createElement(tiles_styles_1.TileWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt },
+            return (react_1.default.createElement(tiles_styles_1.TileWrapper, { key: i, onClick: handleSelect, selected: selected, className: clsOpt },
                 react_1.default.createElement("div", null, name)));
         }))));
 };

package/dist/components/TilesGroup/index.js

@@ -14,16 +14,15 @@ var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var TilesGroup = function (props) {
-    var _a = Object.assign({ stretch: true }, props), stretch = _a.stretch, title = _a.title, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className;
+    var _a = Object.assign({ stretch: true }, props), stretch = _a.stretch, title = _a.title, description = _a.description, options = _a.options, customClassName = _a.className;
     var cls = (0, utils_1.generateInputClassName)('tiles-group', customClassName, title);
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
         react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
         react_1.default.createElement(tilesGroup_styles_1.TilesGroupWrapper, { stretch: stretch }, options === null || options === void 0 ? void 0 : options.map(function (el, i) {
-            var name = el.name, optionValue = el.value;
-            var selected = value === optionValue;
+            var name = el.name, optionValue = el.value, selected = el.selected, handleSelect = el.handleSelect;
             var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
-            return (react_1.default.createElement(tilesGroup_styles_1.TileWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt },
+            return (react_1.default.createElement(tilesGroup_styles_1.TileWrapper, { key: i, onClick: handleSelect, selected: selected, className: clsOpt },
                 react_1.default.createElement("div", null, name)));
         }))));
 };

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

@@ -1,9 +1,11 @@
 import { FunctionComponent } from 'react';
 import { RawAttributeValue } from '../../hooks/useAttribute';
-import { IDisplayAttributeAssetValue, IThreekitDisplayAttribute } from '../../threekit';
+import { IHydratedAttribute, IHydratedAttributeAssetValue } from '../../threekit';
 export interface IOptionShared {
     name: string;
     value: string;
+    handleSelect: () => Promise<void>;
+    selected: boolean;
 }
 export interface IOption extends IOptionShared {
     description?: string;
@@ -34,17 +36,19 @@ 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: IThreekitDisplayAttribute, config: IPrepAttributeConfig) => {
+export declare const hydrateAttributeForComponent: (attribute: IHydratedAttribute, config: IhydrateAttributeConfig) => {
     selected: string | number | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
-    options: IDisplayAttributeAssetValue[] | {
+    options: {
         name: string;
+        handleSelect: () => Promise<void>;
+        selected: boolean;
         label: string;
         value: string;
-    }[] | undefined;
+    }[] | IHydratedAttributeAssetValue[] | undefined;
 };
 declare function formComponentContainer<P extends IFormContainerProps>(FormComponent: IFormComponent<Omit<P, 'options'>>): (props: P) => JSX.Element | null;
 export default formComponentContainer;

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;
@@ -29,15 +29,13 @@ var prepAttributeForComponent = function (attribute, config) {
     var descriptionKey = metadataKeyDescription || constants_1.METADATA_RESERVED.description;
     var options;
     var selected = attribute.value;
-    if (attribute.type === constants_1.ATTRIBUTE_TYPES.string) {
-        var stringAttribute = attribute;
-        options = stringAttribute.values.map(function (el) { return (__assign(__assign({}, el), { name: el.label })); });
+    if (attribute.type === 'String') {
+        options = attribute.values.map(function (el) { return (__assign(__assign({}, el), { name: el.label })); });
     }
-    else if (attribute.type === constants_1.ATTRIBUTE_TYPES.asset) {
-        var assetAttribute = attribute;
-        selected = (_a = assetAttribute.value) === null || _a === void 0 ? void 0 : _a.assetId;
-        options = assetAttribute.values
-            ? assetAttribute.values
+    else if (attribute.type === 'Asset') {
+        selected = (_a = attribute.value) === null || _a === void 0 ? void 0 : _a.assetId;
+        options = attribute.values
+            ? attribute.values
                 .map(function (el) { return prepCatalogItem(el); })
                 .sort(function (a, b) {
                 if (!sort || !Object.keys(constants_1.SORT_OPTIONS).includes(sort))
@@ -50,9 +48,8 @@ var prepAttributeForComponent = function (attribute, config) {
             })
             : [];
     }
-    else if (attribute.type === constants_1.ATTRIBUTE_TYPES.color) {
-        var colorAttribute = attribute;
-        selected = (0, utils_1.inflateRgb)(colorAttribute.value);
+    else if (attribute.type === 'Color') {
+        selected = (0, utils_1.inflateRgb)(attribute.value);
     }
     function prepCatalogItem(item) {
         var _a, _b;
@@ -79,10 +76,8 @@ var prepAttributeForComponent = function (attribute, config) {
     }
     return { selected: selected, options: options };
 };
-exports.prepAttributeForComponent = prepAttributeForComponent;
-function formComponentContainer(FormComponent
-// FormComponent: IFormComponent<P>
-) {
+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;
         var isLoading = (0, usePlayerLoadingStatus_1.default)();
@@ -95,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,
@@ -104,7 +99,7 @@ function formComponentContainer(FormComponent
             sort: sort,
         }), selected = _b.selected, options = _b.options;
         var handleSetAttribute = function (value) {
-            return setAttribute && setAttribute(value);
+            return setAttribute === null || setAttribute === void 0 ? void 0 : setAttribute(value);
         };
         var preppedProps = __assign({}, props);
         if (!hideAttributeTitle && !preppedProps.title)

package/dist/connection.d.ts

@@ -1,14 +1,16 @@
-interface IConnectionConfig {
+export interface IConnectionConfig {
     authToken?: string;
     orgId?: string;
     assetId?: string;
     threekitDomain?: string;
+    serverUrl?: string;
 }
 export declare class ThreekitConnection {
     _authToken: string;
     _orgId: string;
     _assetId: string;
     _threekitDomain: string;
+    _serverUrl: string;
     constructor();
     connect(config: IConnectionConfig): Promise<void>;
     getConnection(): {
@@ -16,6 +18,7 @@ export declare class ThreekitConnection {
         orgId: string;
         assetId: string;
         threekitDomain: string;
+        serverUrl: string;
     };
 }
 declare const _default: ThreekitConnection;

package/dist/connection.js

@@ -42,6 +42,7 @@ var ThreekitConnection = /** @class */ (function () {
         this._authToken = '';
         this._orgId = '';
         this._assetId = '';
+        this._serverUrl = '';
         this._threekitDomain = 'https://admin-fts.threekit.com';
     }
     ThreekitConnection.prototype.connect = function (config) {
@@ -53,6 +54,8 @@ var ThreekitConnection = /** @class */ (function () {
                     this._orgId = config.orgId;
                 if (config.assetId)
                     this._assetId = config.assetId;
+                if (config.serverUrl)
+                    this._serverUrl = config.serverUrl;
                 if (config.threekitDomain)
                     this._threekitDomain = "https://".concat(config.threekitDomain);
                 return [2 /*return*/];
@@ -68,6 +71,7 @@ var ThreekitConnection = /** @class */ (function () {
             orgId: this._orgId,
             assetId: this._assetId,
             threekitDomain: this._threekitDomain,
+            serverUrl: this._serverUrl,
         };
     };
     return ThreekitConnection;

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

@@ -1,8 +1,8 @@
-import { IThreekitDisplayAttribute, IConfigurationColor } from '../../threekit';
+import { IHydratedAttribute, IConfigurationColor } from '../../threekit';
 export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
 declare type UseAttributeError = [undefined, undefined];
 declare type UseAttributeSuccess = [
-    IThreekitDisplayAttribute,
+    IHydratedAttribute,
     (val: RawAttributeValue) => Promise<void>
 ];
 declare type UseAttributeHook = UseAttributeError | UseAttributeSuccess;