@threekit-tools/treble 0.0.58 → 0.0.59

package/dist/Treble/Treble.d.ts

@@ -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;
@@ -23,5 +28,6 @@ declare class Treble {
     }>;
     getNestedConfigurator: (address: string | Array<string>) => any;
     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

@@ -98,6 +98,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/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/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;
@@ -38,13 +40,15 @@ interface IPrepAttributeConfig {
     metadataKeys: MetadataKeys;
     sort?: string;
 }
-export declare const prepAttributeForComponent: (attribute: IThreekitDisplayAttribute, config: IPrepAttributeConfig) => {
+export declare const prepAttributeForComponent: (attribute: IHydratedAttribute, config: IPrepAttributeConfig) => {
     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

@@ -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;
@@ -80,9 +77,7 @@ var prepAttributeForComponent = function (attribute, config) {
     return { selected: selected, options: options };
 };
 exports.prepAttributeForComponent = prepAttributeForComponent;
-function formComponentContainer(FormComponent
-// FormComponent: IFormComponent<P>
-) {
+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)();
@@ -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;

package/dist/hooks/useAttribute/index.js

@@ -42,13 +42,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var store_1 = require("../../store");
 var attributes_1 = require("../../store/attributes");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
 var api_1 = __importDefault(require("../../api"));
 var useAttribute = function (attributeName) {
     if (!attributeName)
         return [undefined, undefined];
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getAttributes);
+    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getHydratedAttributes);
     if (!attributeName || !attributes)
         return [undefined, undefined];
     var attribute = attributes[attributeName];
@@ -60,8 +59,7 @@ var useAttribute = function (attributeName) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!(attribute.type === 'Asset' &&
-                        attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 4];
+                    if (!(attribute.type === 'Asset' && attribute.assetType === 'upload')) return [3 /*break*/, 4];
                     if (!!value) return [3 /*break*/, 1];
                     preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
                     return [3 /*break*/, 3];

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

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

package/dist/hooks/useConfigurator/index.js

@@ -4,7 +4,7 @@ var attributes_1 = require("../../store/attributes");
 var store_1 = require("../../store");
 var useConfigurator = function () {
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getAttributes);
+    var attributes = (0, store_1.useThreekitSelector)(attributes_1.getHydratedAttributes);
     if (!attributes)
         return [undefined, undefined];
     var handleChange = function (configuration) {

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

@@ -0,0 +1,14 @@
+import { CachedProduct } from '../../store/product';
+import { IReloadConfig } from '../../store/treble';
+interface CacheData {
+    activeProductIdx: number;
+    cache: Array<Pick<CachedProduct, 'name' | 'label' | 'thumbnail'>>;
+}
+declare type UseProductCache = [
+    CacheData,
+    (config?: string | IReloadConfig) => Promise<void>,
+    (idx: number) => Promise<void>,
+    (idx: number) => Promise<void>
+];
+declare const useProductCache: () => UseProductCache;
+export default useProductCache;

package/dist/hooks/useProductCache/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var product_1 = require("../../store/product");
+var store_1 = require("../../store");
+var useProductCache = function () {
+    var dispatch = (0, store_1.useThreekitDispatch)();
+    var cache = (0, store_1.useThreekitSelector)(product_1.getProductCache);
+    var activeProductIdx = (0, store_1.useThreekitSelector)(product_1.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 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,
+    ];
+};
+exports.default = useProductCache;

package/dist/http/index.d.ts

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

package/dist/http/index.js

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

package/dist/http/server.d.ts

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

package/dist/http/server.js

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

package/dist/index.d.ts

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