@threekit-tools/treble 0.0.60 → 0.0.63

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/Switch/index.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { IFormComponentProps, IOption } from '../containers/formInputContainer';
+export interface ISwitch extends IFormComponentProps<IOption> {
+    showDescription?: boolean;
+}
+export declare const Switch: {
+    (props: ISwitch): JSX.Element;
+    propTypes: {
+        /**
+         * Is the attribute name on the initialized asset that we are
+         * using this component for. If the attribute prop is used,
+         * the component will ignore the props for: `value`, `options`, `onClick`.
+         */
+        attribute: PropTypes.Requireable<string>;
+        /**
+         * Used to add a title to the input
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Used to provide a custom description for the input component
+         */
+        description: PropTypes.Requireable<string>;
+        /**
+         * Selected value from the option set. Should match the 'value' property
+         * of one of the items in the options array.
+         */
+        value: PropTypes.Requireable<boolean>;
+        /**
+         * The size of the for a Switch option. The size should be a valid CSS
+         * height/width property.
+         *
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Used to add a custom class name to each of the components html elements
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * By default the description is soruced from the `_description` metadata
+         * key in the option's Catalog Item. This metadata key can be overwritten
+         * by passing in the prefered key value to the **metadataKeyDescription**
+         * prop.
+         */
+        metadataKeyDescription: PropTypes.Requireable<string>;
+        /**
+         * A boolean to set whether or all the Cards should display the description
+         * for the options.
+         */
+        showDescription: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        description: undefined;
+        className: undefined;
+        attribute: undefined;
+        metadataKeyDescription: undefined;
+        showDescription: boolean;
+        title: undefined;
+        value: undefined;
+        onClick: undefined;
+    };
+    componentName: string;
+    compatibleAttributes: Set<string>;
+};
+declare const _default: (props: ISwitch) => JSX.Element | null;
+export default _default;

package/dist/components/Switch/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
+var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
+var switch_styles_1 = require("./switch.styles");
+var shared_styles_1 = require("../shared.styles");
+var utils_1 = require("../../utils");
+var constants_1 = require("../../constants");
+var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+var Switch = function (props) {
+    var title = props.title, value = props.value, onChange = props.onChange, description = props.description, customClassName = props.className, showDescription = props.showDescription;
+    var cls = (0, utils_1.generateInputClassName)('Switch', 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: showDescription ? description : undefined, className: cls }),
+        react_1.default.createElement(switch_styles_1.SwitchWrapper, null,
+            react_1.default.createElement(switch_styles_1.Checkbox, { type: "checkbox", checked: !!value, onChange: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(!!!value); } }),
+            react_1.default.createElement(switch_styles_1.Knob, null),
+            react_1.default.createElement(switch_styles_1.Layer, null))));
+};
+exports.Switch = Switch;
+exports.Switch.propTypes = {
+    /**
+     * Is the attribute name on the initialized asset that we are
+     * using this component for. If the attribute prop is used,
+     * the component will ignore the props for: `value`, `options`, `onClick`.
+     */
+    attribute: prop_types_1.default.string,
+    /**
+     * Used to add a title to the input
+     */
+    title: prop_types_1.default.string,
+    /**
+     * Used to provide a custom description for the input component
+     */
+    description: prop_types_1.default.string,
+    /**
+     * Selected value from the option set. Should match the 'value' property
+     * of one of the items in the options array.
+     */
+    value: prop_types_1.default.bool,
+    /**
+     * The size of the for a Switch option. The size should be a valid CSS
+     * height/width property.
+     *
+     */
+    onClick: prop_types_1.default.func,
+    /**
+     * Used to add a custom class name to each of the components html elements
+     */
+    className: prop_types_1.default.string,
+    /**
+     * By default the description is soruced from the `_description` metadata
+     * key in the option's Catalog Item. This metadata key can be overwritten
+     * by passing in the prefered key value to the **metadataKeyDescription**
+     * prop.
+     */
+    metadataKeyDescription: prop_types_1.default.string,
+    /**
+     * A boolean to set whether or all the Cards should display the description
+     * for the options.
+     */
+    showDescription: prop_types_1.default.bool,
+};
+exports.Switch.defaultProps = {
+    description: undefined,
+    className: undefined,
+    //  Default use
+    attribute: undefined,
+    //  Default user overrides
+    metadataKeyDescription: undefined,
+    showDescription: true,
+    //  Custom use
+    title: undefined,
+    value: undefined,
+    onClick: undefined,
+};
+exports.Switch.componentName = 'Switch';
+exports.Switch.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.boolean]);
+exports.default = (0, formInputContainer_1.default)(exports.Switch);

package/dist/components/Switch/switch.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Layer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Knob: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Checkbox: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitchWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Switch/switch.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchWrapper = exports.Checkbox = exports.Knob = exports.Layer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Layer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  width: 100%;\n  border-radius: 100px;\n  background-color: #bbb;\n  transition: 0.3s ease all;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  width: 100%;\n  border-radius: 100px;\n  background-color: #bbb;\n  transition: 0.3s ease all;\n  z-index: 1;\n"])));
+exports.Knob = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    width: 20px;\n    height: 10px;\n    color: #fff;\n    font-size: 10px;\n    font-weight: bold;\n    text-align: center;\n    line-height: 1;\n    padding: 9px 4px;\n    background-color: #fff;\n    border-radius: 50%;\n    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    width: 20px;\n    height: 10px;\n    color: #fff;\n    font-size: 10px;\n    font-weight: bold;\n    text-align: center;\n    line-height: 1;\n    padding: 9px 4px;\n    background-color: #fff;\n    border-radius: 50%;\n    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);\n  }\n"])));
+exports.Checkbox = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 3;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 3;\n"])));
+exports.SwitchWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  width: 74px;\n  height: 36px;\n  overflow: hidden;\n\n  & ", ":active + ", ":before {\n    width: 46px;\n    border-radius: 100px;\n  }\n\n  & ", ":checked + ", ":before {\n    content: '';\n    left: 42px;\n  }\n\n  & ", ":checked:active + ", ":before {\n    margin-left: -26px;\n  }\n\n  & ", ":checked ~ ", " {\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  width: 74px;\n  height: 36px;\n  overflow: hidden;\n\n  & ", ":active + ", ":before {\n    width: 46px;\n    border-radius: 100px;\n  }\n\n  & ", ":checked + ", ":before {\n    content: '';\n    left: 42px;\n  }\n\n  & ", ":checked:active + ", ":before {\n    margin-left: -26px;\n  }\n\n  & ", ":checked ~ ", " {\n    background-color: ", ";\n  }\n"])), exports.Checkbox, exports.Knob, exports.Checkbox, exports.Knob, exports.Checkbox, exports.Knob, exports.Checkbox, exports.Layer, function (props) { return props.theme.primaryColor; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/TextInput/index.js

@@ -16,6 +16,8 @@ var formInputContainer_1 = __importDefault(require("../containers/formInputConta
 var TextInput = function (props) {
     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);
+    if (typeof value !== 'string')
+        return react_1.default.createElement(react_1.default.Fragment, null);
     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 }),

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

@@ -69,8 +69,9 @@ var icons_1 = require("../../icons");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var upload_styles_1 = require("./upload.styles");
 var Upload = function (props) {
+    var _a, _b;
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
-    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
+    var _c = (0, react_1.useState)(false), isUploading = _c[0], setIsUploading = _c[1];
     var inputRef = (0, react_1.useRef)(null);
     var imgRef = (0, react_1.useRef)(null);
     var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
@@ -78,7 +79,7 @@ var Upload = function (props) {
         var _a;
         if (isUploading)
             return;
-        if (value === null || value === void 0 ? void 0 : value.length)
+        if (typeof value === 'string' && (value === null || value === void 0 ? void 0 : value.length))
             return;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
@@ -109,7 +110,7 @@ var Upload = function (props) {
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
         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(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && (value === null || value === void 0 ? void 0 : value.length)) },
+        react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && ((_a = value) === null || _a === void 0 ? void 0 : _a.length)) },
             react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
                     var _a;
                     return __generator(this, function (_b) {
@@ -122,7 +123,7 @@ var Upload = function (props) {
             react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(upload_styles_1.IconWrapper, null,
                     react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
-                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
+                react_1.default.createElement("div", null, "Uploading..."))) : ((_b = value) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("img", { ref: imgRef, src: "#" })),
                 react_1.default.createElement(upload_styles_1.ImageActionArea, null,

package/dist/components/UploadArea/index.js

@@ -69,9 +69,10 @@ var icons_1 = require("../../icons");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var uploadArea_styles_1 = require("./uploadArea.styles");
 var UploadArea = function (props) {
+    var _a;
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
-    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
-    var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
+    var _b = (0, react_1.useState)(false), isUploading = _b[0], setIsUploading = _b[1];
+    var _c = (0, react_1.useState)(undefined), filename = _c[0], setFilename = _c[1];
     var inputRef = (0, react_1.useRef)(null);
     var imgRef = (0, react_1.useRef)(null);
     var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
@@ -120,7 +121,7 @@ var UploadArea = function (props) {
             react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
-                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null, "Uploading..."))) : ((_a = value) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("img", { ref: imgRef, src: "#" })),
                 react_1.default.createElement("div", null,

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

@@ -25,7 +25,7 @@ export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThum
     sort?: string;
     title?: string;
     description?: string;
-    value?: string;
+    value?: string | boolean;
     onClick?: (value: RawAttributeValue) => Promise<void>;
     onChange?: (value: RawAttributeValue) => Promise<void>;
     className?: string;
@@ -36,12 +36,12 @@ 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) => {
-    selected: string | number | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
+export declare const hydrateAttributeForComponent: (attribute: IHydratedAttribute, config: IHydrateAttributeConfig) => {
+    selected: string | number | boolean | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
     options: {
         name: string;
         handleSelect: () => Promise<void>;

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/components/formComponents.js

@@ -18,7 +18,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a, _b, _c, _d, _e;
+var _a, _b, _c, _d, _e, _f;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formComponents = exports.FORM_COMPONENT_TYPES = void 0;
 var constants_1 = require("../constants");
@@ -31,6 +31,7 @@ var TilesGroup_1 = __importStar(require("./TilesGroup"));
 var Upload_1 = __importStar(require("./Upload"));
 // import UploadArea, { UploadArea as UploadAreaComponent } from './UploadArea';
 var TextInput_1 = __importStar(require("./TextInput"));
+var Switch_1 = __importStar(require("./Switch"));
 exports.FORM_COMPONENT_TYPES = {
     stringInput: 'string-input',
 };
@@ -59,5 +60,8 @@ exports.formComponents = (_a = {},
     _a[constants_1.ASSET_TYPES.upload] = (_e = {},
         _e[Upload_1.Upload.componentName] = Upload_1.default,
         _e),
+    _a[constants_1.ATTRIBUTE_TYPES.boolean] = (_f = {},
+        _f[Switch_1.Switch.componentName] = Switch_1.default,
+        _f),
     _a);
 exports.default = exports.formComponents;

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;