@threekit-tools/treble 0.0.57 → 0.0.60

package/dist/Treble/Snapshots.js

@@ -129,53 +129,12 @@ var Snapshots = /** @class */ (function () {
             }, Promise.resolve(snapshots));
         };
         this.takeSnapshots = function (camerasList, snapshotsConfig) { return __awaiter(_this, void 0, void 0, function () {
-            function saveSnapshotToPlatform(snapshot, filename) {
-                return __awaiter(this, void 0, void 0, function () {
-                    var files, response;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                files = (0, utils_1.dataURItoFile)(snapshot, filename);
-                                return [4 /*yield*/, api_1.default.configurations.save({
-                                        assetId: window.threekit.player.assetId,
-                                        configuration: window.threekit.configurator.getConfiguration(),
-                                        files: files,
-                                    })];
-                            case 1:
-                                response = _a.sent();
-                                return [2 /*return*/, "".concat(threekitDomain, "/api/files/hash/").concat(response.data.thumbnail)];
-                        }
-                    });
-                });
-            }
-            function downloadSnapshot(snapshot, filename) {
-                return __awaiter(this, void 0, void 0, function () {
-                    var blob, blobUrl, link, clickHandler;
-                    return __generator(this, function (_a) {
-                        blob = (0, utils_1.dataURItoBlob)(snapshot);
-                        blobUrl = URL.createObjectURL(blob);
-                        link = document.createElement('a');
-                        link.href = blobUrl;
-                        link.download = filename;
-                        clickHandler = function () {
-                            setTimeout(function () {
-                                URL.revokeObjectURL(blobUrl);
-                                link.removeEventListener('click', clickHandler);
-                            }, 150);
-                        };
-                        link.addEventListener('click', clickHandler);
-                        document.body.appendChild(link);
-                        link.click();
-                        return [2 /*return*/];
-                    });
-                });
-            }
-            var threekitDomain, filename, size, format, attributeName, output, cameras, snapshotsRaw, snapshotData, camerasMap_1, currentCamera, cameraPosition, _a, savedSnapshots, snapshotBlobs, snapshotFiles;
-            var _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _a, threekitDomain, orgId, filename, size, format, attributeName, output, cameras, snapshotsRaw, snapshotData, camerasMap_1, currentCamera, cameraPosition, _b, attachments, response_1, urlsArray, snapshotBlobs, snapshotFiles;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
-                        threekitDomain = connection_1.default.getConnection().threekitDomain;
+                        _a = connection_1.default.getConnection(), threekitDomain = _a.threekitDomain, orgId = _a.orgId;
                         filename = (snapshotsConfig === null || snapshotsConfig === void 0 ? void 0 : snapshotsConfig.filename) || DEFAULT_CAMERA_CONFIG.filename;
                         size = (snapshotsConfig === null || snapshotsConfig === void 0 ? void 0 : snapshotsConfig.size) || DEFAULT_CAMERA_CONFIG.size;
                         format = (snapshotsConfig === null || snapshotsConfig === void 0 ? void 0 : snapshotsConfig.format) || DEFAULT_CAMERA_CONFIG.format;
@@ -185,7 +144,7 @@ var Snapshots = /** @class */ (function () {
                         if (!(cameras.length === 1 && cameras[0] === undefined)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.getSnapshot({ size: size, format: format })];
                     case 1:
-                        snapshotData = _c.sent();
+                        snapshotData = _d.sent();
                         snapshotsRaw = [snapshotData];
                         return [3 /*break*/, 5];
                     case 2:
@@ -197,17 +156,17 @@ var Snapshots = /** @class */ (function () {
                         cameraPosition = (0, utils_1.getCameraPosition)(window.threekit.player.camera);
                         return [4 /*yield*/, this.getSnapshots(cameras, camerasMap_1)];
                     case 3:
-                        snapshotsRaw = _c.sent();
-                        return [4 /*yield*/, window.threekit.configurator.setConfiguration((_b = {},
-                                _b[attributeName] = currentCamera,
-                                _b))];
+                        snapshotsRaw = _d.sent();
+                        return [4 /*yield*/, window.threekit.configurator.setConfiguration((_c = {},
+                                _c[attributeName] = currentCamera,
+                                _c))];
                     case 4:
-                        _c.sent();
+                        _d.sent();
                         (0, utils_1.setCameraPosition)(window.threekit.player.camera, cameraPosition);
-                        _c.label = 5;
+                        _d.label = 5;
                     case 5:
-                        _a = output;
-                        switch (_a) {
+                        _b = output;
+                        switch (_b) {
                             case constants_1.SNAPSHOT_OUTPUTS.url: return [3 /*break*/, 6];
                             case constants_1.SNAPSHOT_OUTPUTS.download: return [3 /*break*/, 8];
                             case constants_1.SNAPSHOT_OUTPUTS.blob: return [3 /*break*/, 9];
@@ -215,21 +174,32 @@ var Snapshots = /** @class */ (function () {
                             case constants_1.SNAPSHOT_OUTPUTS.dataUrl: return [3 /*break*/, 11];
                         }
                         return [3 /*break*/, 11];
-                    case 6: return [4 /*yield*/, Promise.all(snapshotsRaw.map(function (snapshotBlob, idx) {
+                    case 6:
+                        attachments = snapshotsRaw.reduce(function (output, el, idx) {
+                            var _a;
                             var cameraName = (camerasList === null || camerasList === void 0 ? void 0 : camerasList[idx])
-                                ? "-".concat((0, utils_1.regularToKebabCase)(camerasList[idx] || 'default'))
+                                ? (0, utils_1.regularToKebabCase)(camerasList[idx] || 'default')
                                 : '';
-                            return saveSnapshotToPlatform(snapshotBlob, "".concat(filename).concat(cameraName, ".").concat(format));
-                        }))];
+                            var file = (0, utils_1.dataURItoFile)(el, "".concat(filename, "-").concat(cameraName, ".").concat(format));
+                            return Object.assign(output, (_a = {}, _a[cameraName] = file, _a));
+                        }, {});
+                        return [4 /*yield*/, api_1.default.configurations.save({
+                                assetId: window.threekit.player.assetId,
+                                configuration: window.threekit.configurator.getConfiguration(),
+                                attachments: attachments,
+                            })];
                     case 7:
-                        savedSnapshots = _c.sent();
-                        return [2 /*return*/, Promise.resolve(savedSnapshots)];
+                        response_1 = _d.sent();
+                        urlsArray = Object.keys(response_1.data.attachments).map(function (key) {
+                            return "".concat(threekitDomain, "/api/configurations/").concat(response_1.data.shortId, "/files/").concat(key, "?orgId=").concat(orgId);
+                        });
+                        return [2 /*return*/, Promise.resolve(urlsArray)];
                     case 8:
                         snapshotsRaw.forEach(function (snapshotBlob, idx) {
                             var cameraName = (camerasList === null || camerasList === void 0 ? void 0 : camerasList[idx])
                                 ? "-".concat((0, utils_1.regularToKebabCase)(camerasList[idx] || 'default'))
                                 : '';
-                            downloadSnapshot(snapshotBlob, "".concat(filename).concat(cameraName, ".").concat(format));
+                            (0, utils_1.downloadSnapshot)(snapshotBlob, "".concat(filename).concat(cameraName, ".").concat(format));
                         });
                         return [2 /*return*/, Promise.resolve()];
                     case 9:
@@ -244,7 +214,6 @@ var Snapshots = /** @class */ (function () {
                         });
                         return [2 /*return*/, Promise.resolve(snapshotFiles)];
                     case 11: return [2 /*return*/, Promise.resolve(snapshotsRaw)];
-                    case 12: return [2 /*return*/];
                 }
             });
         }); };

package/dist/Treble/Treble.d.ts

@@ -1,16 +1,17 @@
 import threekitAPI from '../api';
-import { IThreekitPlayer, IMetadata, IConfiguration, ISetConfiguration } from '../threekit';
+import { IThreekitPlayer, IConfiguration, ISetConfiguration } from '../threekit';
 import { IWishlist } from './Wishlist';
 import Snapshots from './Snapshots';
+import { ISaveConfiguration } from '../api/configurations';
 interface ITreble {
     player: IThreekitPlayer;
     orgId: string;
     initialConfiguration: IConfiguration;
 }
-export interface ISaveConfigurationConfig {
-    customerId?: string;
-    metadata?: IMetadata;
-    productVersion?: string;
+interface IEmailShareCredentials {
+    to: string;
+    from: string;
+    templateId: string;
 }
 declare class Treble {
     _api: typeof threekitAPI;
@@ -20,12 +21,13 @@ declare class Treble {
     private _snapshots;
     takeSnapshots: Snapshots['takeSnapshots'];
     constructor({ player, orgId, initialConfiguration }: ITreble);
-    saveConfiguration: (config?: ISaveConfigurationConfig | undefined) => Promise<{
+    saveConfiguration: (config?: Omit<ISaveConfiguration, "configuration"> | undefined) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;
     }>;
     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

@@ -50,22 +50,21 @@ var Treble = /** @class */ (function () {
         var _this = this;
         var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
-            var threekitDomain, _a, customerId, metadata, productVersion, files, response, params, url;
+            var threekitDomain, _a, customerId, metadata, productVersion, attachments, response, params, url;
             var _b;
             var _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         threekitDomain = connection_1.default.getConnection().threekitDomain;
-                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion;
-                        files = undefined;
+                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion, attachments = _a.attachments;
                         return [4 /*yield*/, api_1.default.configurations.save({
                                 assetId: window.threekit.player.assetId,
                                 configuration: window.threekit.configurator.getConfiguration(),
                                 customerId: customerId,
                                 metadata: metadata,
                                 productVersion: productVersion,
-                                files: files,
+                                attachments: attachments,
                             })];
                     case 1:
                         response = _d.sent();
@@ -99,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/Treble/Wishlist.d.ts

@@ -1,9 +1,9 @@
 import { IConfigurationResponse } from '../http/configurations';
-import { ISaveConfigurationConfig } from './Treble';
+import { ISaveConfiguration } from '../api/configurations';
 export declare type WishlistArray = Array<IConfigurationResponse>;
 export interface IWishlist {
     getWishlist(): Promise<Array<IConfigurationResponse>>;
-    addItem(config?: ISaveConfigurationConfig): Promise<Array<IConfigurationResponse>>;
+    addItem(config?: Omit<ISaveConfiguration, 'configurator'>): Promise<Array<IConfigurationResponse>>;
     removeItemByIdx(idx: number): Array<IConfigurationResponse>;
     clearWishlist(): Array<IConfigurationResponse>;
 }
@@ -11,7 +11,7 @@ declare class Wishlist implements IWishlist {
     _wishlistKey: string;
     constructor(orgId: string);
     getWishlist: () => Promise<WishlistArray>;
-    addItem: (config?: ISaveConfigurationConfig | undefined) => Promise<WishlistArray>;
+    addItem: (config?: Omit<ISaveConfiguration, "configurator"> | undefined) => Promise<WishlistArray>;
     removeItemByIdx: (idx: number) => WishlistArray;
     clearWishlist: () => WishlistArray;
 }

package/dist/Treble/Wishlist.js

@@ -128,6 +128,7 @@ var Wishlist = /** @class */ (function () {
         };
         this._wishlistKey = "".concat(constants_1.WISHLIST_LOCALSTORAGE_KEY, "_").concat(orgId);
         this.getWishlist();
+        return this;
     }
     return Wishlist;
 }());

package/dist/api/configurations.d.ts

@@ -1,14 +1,13 @@
 import { IConfigurationResponse } from '../http/configurations';
 import { IConfiguration, IMetadata } from '../threekit';
-interface ISaveConfiguration {
+export interface ISaveConfiguration {
     assetId: string;
     customerId?: string;
     configuration: IConfiguration;
     metadata?: IMetadata;
     productVersion?: string;
-    files?: File;
+    attachments?: Record<string, File>;
 }
 export declare const save: (saveConfig: ISaveConfiguration) => Promise<import("axios").AxiosResponse<IConfigurationResponse>>;
 export declare const fetch: (configurationId: string) => Promise<import("axios").AxiosResponse<IConfigurationResponse>>;
 export declare const fetchAll: () => Promise<IConfigurationResponse[]>;
-export {};

package/dist/api/configurations.js

@@ -42,30 +42,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchAll = exports.fetch = exports.save = void 0;
 var http_1 = __importDefault(require("../http"));
 var save = function (saveConfig) { return __awaiter(void 0, void 0, void 0, function () {
-    var assetId, customerId, configuration, metadata, productVersion, files, error, fd;
+    var assetId, customerId, configuration, metadata, productVersion, attachments, error, fd, attachmentsPrepped_1;
     return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, files = saveConfig.files;
-                if (!assetId)
-                    error = 'Requires Asset Id';
-                if (!configuration)
-                    error = 'Requires a configuration';
-                if (error)
-                    throw new Error(error);
-                fd = new FormData();
-                fd.append('productId', assetId);
-                fd.append('variant', JSON.stringify(configuration));
-                fd.append('productVersion', productVersion || 'v1');
-                if (metadata && Object.keys(metadata))
-                    fd.append('metadata', JSON.stringify(metadata));
-                if (customerId)
-                    fd.append('customerId', customerId);
-                if (files)
-                    fd.append('files', files);
-                return [4 /*yield*/, http_1.default.configurations.postConfiguration(fd)];
-            case 1: return [2 /*return*/, _a.sent()];
+        assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, attachments = saveConfig.attachments;
+        if (!assetId)
+            error = 'Requires Asset Id';
+        if (!configuration)
+            error = 'Requires a configuration';
+        if (error)
+            throw new Error(error);
+        fd = new FormData();
+        fd.append('productId', assetId);
+        fd.append('variant', JSON.stringify(configuration));
+        fd.append('productVersion', productVersion || 'v1');
+        if (metadata && Object.keys(metadata))
+            fd.append('metadata', JSON.stringify(metadata));
+        if (customerId)
+            fd.append('customerId', customerId);
+        if (attachments && Object.keys(attachments).length) {
+            attachmentsPrepped_1 = {};
+            Object.entries(attachments).forEach(function (_a) {
+                var _b;
+                var key = _a[0], file = _a[1];
+                fd.append('files', file);
+                attachmentsPrepped_1 = Object.assign({}, attachmentsPrepped_1, (_b = {},
+                    _b[key] = file.name,
+                    _b));
+            });
+            fd.append('attachments', JSON.stringify(attachmentsPrepped_1));
         }
+        return [2 /*return*/, http_1.default.configurations.postConfiguration(fd)];
     });
 }); };
 exports.save = save;

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;