@threekit-tools/treble 0.0.67 → 0.0.70

package/dist/Treble/Snapshots.js

@@ -40,7 +40,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var api_1 = __importDefault(require("../api"));
-var connection_1 = __importDefault(require("../connection"));
+// import connection from '../connection';
 var constants_1 = require("../constants");
 var utils_1 = require("../utils");
 var DEFAULT_CAMERA_CONFIG = {
@@ -129,12 +129,11 @@ var Snapshots = /** @class */ (function () {
             }, Promise.resolve(snapshots));
         };
         this.takeSnapshots = function (camerasList, snapshotsConfig) { return __awaiter(_this, void 0, void 0, function () {
-            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) {
+            var filename, size, format, attributeName, output, cameras, snapshotsRaw, snapshotData, camerasMap_1, currentCamera, cameraPosition, _a, attachments, response, urlsArray, snapshotBlobs, snapshotFiles;
+            var _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
-                        _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;
@@ -144,7 +143,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 = _d.sent();
+                        snapshotData = _c.sent();
                         snapshotsRaw = [snapshotData];
                         return [3 /*break*/, 5];
                     case 2:
@@ -156,17 +155,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 = _d.sent();
-                        return [4 /*yield*/, window.threekit.configurator.setConfiguration((_c = {},
-                                _c[attributeName] = currentCamera,
-                                _c))];
+                        snapshotsRaw = _c.sent();
+                        return [4 /*yield*/, window.threekit.configurator.setConfiguration((_b = {},
+                                _b[attributeName] = currentCamera,
+                                _b))];
                     case 4:
-                        _d.sent();
+                        _c.sent();
                         (0, utils_1.setCameraPosition)(window.threekit.player.camera, cameraPosition);
-                        _d.label = 5;
+                        _c.label = 5;
                     case 5:
-                        _b = output;
-                        switch (_b) {
+                        _a = output;
+                        switch (_a) {
                             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];
@@ -179,8 +178,11 @@ var Snapshots = /** @class */ (function () {
                             var _a;
                             var cameraName = (camerasList === null || camerasList === void 0 ? void 0 : camerasList[idx])
                                 ? (0, utils_1.regularToKebabCase)(camerasList[idx] || 'default')
-                                : '';
-                            var file = (0, utils_1.dataURItoFile)(el, "".concat(filename, "-").concat(cameraName, ".").concat(format));
+                                : filename;
+                            var preppedFilename = cameraName === filename
+                                ? "".concat(filename, ".").concat(format)
+                                : "".concat(filename, "-").concat(cameraName, ".").concat(format);
+                            var file = (0, utils_1.dataURItoFile)(el, preppedFilename);
                             return Object.assign(output, (_a = {}, _a[cameraName] = file, _a));
                         }, {});
                         return [4 /*yield*/, api_1.default.configurations.save({
@@ -189,10 +191,8 @@ var Snapshots = /** @class */ (function () {
                                 attachments: attachments,
                             })];
                     case 7:
-                        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);
-                        });
+                        response = _c.sent();
+                        urlsArray = Object.values(response.data.attachments);
                         return [2 /*return*/, Promise.resolve(urlsArray)];
                     case 8:
                         snapshotsRaw.forEach(function (snapshotBlob, idx) {

package/dist/components/DevTools/devTools.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/DevTools/devTools.styles.js

@@ -0,0 +1,14 @@
+"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.Header = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px 15px;\n"], ["\n  padding: 10px 15px;\n"])));
+exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 18px;\n  font-weight: 400;\n  text-align: center;\n"], ["\n  font-size: 18px;\n  font-weight: 400;\n  text-align: center;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DevTools: () => JSX.Element;
+export default DevTools;

package/dist/components/DevTools/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevTools = void 0;
+var react_1 = __importDefault(require("react"));
+var useDevTools_1 = __importDefault(require("../../hooks/useDevTools"));
+var Drawer_1 = __importDefault(require("../Drawer"));
+var devTools_styles_1 = require("./devTools.styles");
+var DevTools = function () {
+    var _a = (0, useDevTools_1.default)(), showDevTools = _a[0], setShowDevTools = _a[1];
+    return (react_1.default.createElement(Drawer_1.default, { showHeader: false, show: showDevTools, handleClose: function () { return setShowDevTools(false); } },
+        react_1.default.createElement(devTools_styles_1.Wrapper, null,
+            react_1.default.createElement(devTools_styles_1.Header, null, "Treble - Dev Tools"))));
+};
+exports.DevTools = DevTools;
+exports.default = exports.DevTools;

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

@@ -4,8 +4,8 @@ interface IProductDescription {
     description?: string;
     className?: string;
 }
-export declare const ProductDescription: {
-    (props: IProductDescription): JSX.Element | null;
+export declare const ProductDescriptionComponent: {
+    (props: IProductDescription): JSX.Element;
     propTypes: {
         /**
          * The description displayed to the user
@@ -21,4 +21,5 @@ export declare const ProductDescription: {
         className: string;
     };
 };
+declare const ProductDescription: (props: IProductDescription) => JSX.Element | null;
 export default ProductDescription;

package/dist/components/ProductDescription/index.js

@@ -3,25 +3,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductDescription = void 0;
+exports.ProductDescriptionComponent = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
-var description_styles_1 = require("./description.styles");
+var productDescription_styles_1 = require("./productDescription.styles");
 var useMetadata_1 = __importDefault(require("../../hooks/useMetadata"));
 var utils_1 = require("../../utils");
+var ProductDescriptionComponent = function (props) {
+    var _a = Object.assign({ className: '' }, props), description = _a.description, customClassName = _a.className;
+    var cls = (0, utils_1.generateDisplayClassName)('description', customClassName);
+    return react_1.default.createElement(productDescription_styles_1.Wrapper, { className: cls }, description);
+};
+exports.ProductDescriptionComponent = ProductDescriptionComponent;
 var ProductDescription = function (props) {
-    var _a = Object.assign({
+    var _a;
+    var _b = Object.assign({
         description: undefined,
-        className: '',
-    }, props), description = _a.description, customClassName = _a.className;
+    }, props), description = _b.description, className = _b.className;
     var metadata = (0, useMetadata_1.default)();
     if (!description && !(metadata === null || metadata === void 0 ? void 0 : metadata._description))
         return null;
-    var cls = (0, utils_1.generateDisplayClassName)('description', customClassName);
-    return (react_1.default.createElement(description_styles_1.Wrapper, { className: cls }, (metadata === null || metadata === void 0 ? void 0 : metadata._description) || description));
+    if (!description)
+        return null;
+    return (react_1.default.createElement(exports.ProductDescriptionComponent, { className: className, description: ((_a = metadata === null || metadata === void 0 ? void 0 : metadata._description) === null || _a === void 0 ? void 0 : _a.toString()) || description }));
 };
-exports.ProductDescription = ProductDescription;
-exports.ProductDescription.propTypes = {
+exports.ProductDescriptionComponent.propTypes = {
     /**
      * The description displayed to the user
      */
@@ -31,8 +37,8 @@ exports.ProductDescription.propTypes = {
      */
     className: prop_types_1.default.string,
 };
-exports.ProductDescription.defaultProps = {
+exports.ProductDescriptionComponent.defaultProps = {
     description: undefined,
     className: '',
 };
-exports.default = exports.ProductDescription;
+exports.default = ProductDescription;

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

@@ -5,8 +5,8 @@ interface ITitle {
     className?: string;
     align?: string;
 }
-export declare const ProductName: {
-    (props: ITitle): JSX.Element | null;
+export declare const ProductNameComponent: {
+    (props: ITitle): JSX.Element;
     propTypes: {
         /**
          * The title displayed to the user
@@ -26,4 +26,5 @@ export declare const ProductName: {
         align: string;
     };
 };
+export declare const ProductName: (props: ITitle) => JSX.Element | null;
 export default ProductName;

package/dist/components/ProductName/index.js

@@ -3,22 +3,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductName = void 0;
+exports.ProductName = exports.ProductNameComponent = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var productName_styles_1 = require("./productName.styles");
 var useName_1 = __importDefault(require("../../hooks/useName"));
 var utils_1 = require("../../utils");
-var ProductName = function (props) {
+var ProductNameComponent = function (props) {
     var _a = Object.assign({ className: '', align: 'left' }, props), title = _a.title, customClassName = _a.className, align = _a.align;
+    var cls = (0, utils_1.generateDisplayClassName)('title', customClassName);
+    return (react_1.default.createElement(productName_styles_1.Wrapper, { align: align, className: cls }, title));
+};
+exports.ProductNameComponent = ProductNameComponent;
+var ProductName = function (props) {
+    var title = props.title, className = props.className, align = props.align;
     var name = (0, useName_1.default)();
     if (!(title === null || title === void 0 ? void 0 : title.length) && !name)
         return null;
-    var cls = (0, utils_1.generateDisplayClassName)('title', customClassName);
-    return (react_1.default.createElement(productName_styles_1.Wrapper, { align: align, className: cls }, title || name));
+    return (react_1.default.createElement(exports.ProductNameComponent, { align: align, className: className, title: title || name }));
 };
 exports.ProductName = ProductName;
-exports.ProductName.propTypes = {
+exports.ProductNameComponent.propTypes = {
     /**
      * The title displayed to the user
      */
@@ -32,7 +37,7 @@ exports.ProductName.propTypes = {
      */
     align: prop_types_1.default.string,
 };
-exports.ProductName.defaultProps = {
+exports.ProductNameComponent.defaultProps = {
     className: '',
     align: 'left',
 };

package/dist/components/ThreekitProvider/index.js

@@ -29,6 +29,7 @@ var react_redux_1 = require("react-redux");
 var styled_components_1 = require("styled-components");
 var theme_1 = __importDefault(require("../../theme"));
 var GlobalStyles_styles_1 = __importDefault(require("./GlobalStyles.styles"));
+var DevTools_1 = __importDefault(require("../DevTools"));
 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;
@@ -52,6 +53,7 @@ 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, productId: props.productId, 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),
+            react_1.default.createElement(DevTools_1.default, null))));
 };
 exports.default = ThreekitProvider;

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

@@ -4,8 +4,8 @@ interface IPrice {
     price?: string;
     className?: string;
 }
-export declare const TotalPrice: {
-    (props: IPrice): JSX.Element | null;
+export declare const TotalPriceComponent: {
+    (props: IPrice): JSX.Element;
     propTypes: {
         /**
          * The price displayed to the user
@@ -21,4 +21,5 @@ export declare const TotalPrice: {
         className: string;
     };
 };
+export declare const TotalPrice: (props: IPrice) => JSX.Element | null;
 export default TotalPrice;

package/dist/components/TotalPrice/index.js

@@ -3,25 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TotalPrice = void 0;
+exports.TotalPrice = exports.TotalPriceComponent = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var totalPrice_styles_1 = require("./totalPrice.styles");
 var usePrice_1 = __importDefault(require("../../hooks/usePrice"));
 var utils_1 = require("../../utils");
-var TotalPrice = function (props) {
+var TotalPriceComponent = function (props) {
     var price = props.price, customClassName = props.className;
-    var priceData = (0, usePrice_1.default)();
     var cls = (0, utils_1.generateDisplayClassName)('price', customClassName);
+    return react_1.default.createElement(totalPrice_styles_1.Wrapper, { className: cls }, price);
+};
+exports.TotalPriceComponent = TotalPriceComponent;
+var TotalPrice = function (props) {
+    var price = props.price, className = props.className;
+    var priceData = (0, usePrice_1.default)();
     var preppedPrice = props.price;
     if (priceData)
         preppedPrice = "".concat(priceData.price, " ").concat(priceData.currency);
     if (!price && !priceData)
         return null;
-    return react_1.default.createElement(totalPrice_styles_1.Wrapper, { className: cls }, preppedPrice);
+    return react_1.default.createElement(exports.TotalPriceComponent, { className: className, price: preppedPrice });
 };
 exports.TotalPrice = TotalPrice;
-exports.TotalPrice.propTypes = {
+exports.TotalPriceComponent.propTypes = {
     /**
      * The price displayed to the user
      */
@@ -31,7 +36,7 @@ exports.TotalPrice.propTypes = {
      */
     className: prop_types_1.default.string,
 };
-exports.TotalPrice.defaultProps = {
+exports.TotalPriceComponent.defaultProps = {
     price: undefined,
     className: '',
 };

package/dist/components/TrebleApp/index.js

@@ -44,7 +44,7 @@ var Products = function () {
 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;
+    var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme, eventHandlers = props.eventHandlers, reducer = props.reducer;
     var config = constants_1.IS_TREBLE_SCRIPTS ? (0, utils_1.loadTrebleConfig)() : {};
     if (!((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx)) {
         console.error('Treble Config is not setup correctly');
@@ -85,7 +85,7 @@ function TrebleApp(props) {
     var preppedProject = Object.assign({}, project, {
         products: productsMap,
     });
-    return (react_1.default.createElement(ThreekitProvider_1.default, { productId: id, project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv, eventHandlers: eventHandlers },
+    return (react_1.default.createElement(ThreekitProvider_1.default, { productId: id, project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv, eventHandlers: eventHandlers, reducer: reducer },
         react_1.default.createElement(exports.Products, null)));
 }
 exports.default = TrebleApp;

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

@@ -0,0 +1,3 @@
+declare type UseDevToolsHook = [boolean, (val: boolean) => void];
+export declare const useDevTools: () => UseDevToolsHook;
+export default useDevTools;

package/dist/hooks/useDevTools/index.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDevTools = void 0;
+var react_1 = require("react");
+var useDevTools = function () {
+    var _a = (0, react_1.useState)(false), showDevTools = _a[0], setShowDevTools = _a[1];
+    var pressedKeysRef = (0, react_1.useRef)({
+        t: false,
+        k: false,
+    });
+    var keydownListener = function (event) {
+        if (event.altKey && event.code === 'KeyT')
+            pressedKeysRef.current.t = true;
+        else if (event.altKey && event.code === 'KeyK')
+            pressedKeysRef.current.k = true;
+        var allPressed = Object.values(pressedKeysRef.current).reduce(function (result, bool) {
+            if (!result || !bool)
+                return false;
+            return bool;
+        }, true);
+        if (allPressed)
+            setShowDevTools(true);
+    };
+    var keyupListener = function (event) {
+        if (event.code === 'KeyT')
+            pressedKeysRef.current.t = false;
+        else if (event.code === 'KeyK')
+            pressedKeysRef.current.k = false;
+    };
+    (0, react_1.useEffect)(function () {
+        (function () {
+            document.addEventListener('keydown', keydownListener);
+            document.addEventListener('keyup', keyupListener);
+        })();
+        return function () {
+            document.removeEventListener('keydown', keydownListener);
+            document.removeEventListener('keyup', keyupListener);
+        };
+    }, []);
+    return [showDevTools, function (val) { return setShowDevTools(val); }];
+};
+exports.useDevTools = useDevTools;
+exports.default = exports.useDevTools;

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

@@ -1,9 +1,10 @@
 import { IHydratedAttribute, IMetadata, ISetConfiguration } from '../../types';
-declare type UseNestedConfiguratorError = [undefined, undefined, undefined];
+declare type UseNestedConfiguratorError = [undefined, undefined, undefined, undefined];
 declare type UseNestedConfiguratorSuccess = [
     Record<string, IHydratedAttribute>,
     (val: ISetConfiguration) => Promise<void>,
-    IMetadata
+    IMetadata,
+    number | undefined
 ];
 declare const useNestedConfigurator: (address: string | Array<string>) => UseNestedConfiguratorError | UseNestedConfiguratorSuccess;
 export default useNestedConfigurator;

package/dist/hooks/useNestedConfigurator/index.js

@@ -41,10 +41,12 @@ var store_1 = require("../../store");
 var treble_1 = require("../../store/treble");
 var utils_1 = require("../../utils");
 var attributes_1 = require("../../store/attributes");
+var price_1 = require("../../store/price");
 var useNestedConfigurator = function (address) {
     var dispatch = (0, store_1.useThreekitDispatch)();
     var hasInitialized = (0, store_1.useThreekitSelector)(treble_1.isThreekitInitialized);
     var playerLoading = (0, store_1.useThreekitSelector)(treble_1.isPlayerLoading);
+    var priceConfig = (0, store_1.useThreekitSelector)(price_1.getPriceConfig);
     var _a = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData), _ = _a[0], translations = _a[1], language = _a[2];
     var _b = (0, react_1.useState)(), attributes = _b[0], setAttributes = _b[1];
     var metadataRef = (0, react_1.useRef)({});
@@ -63,9 +65,9 @@ var useNestedConfigurator = function (address) {
             setAttributes(updatedAttrs);
             metadataRef.current = configurator.current.getMetadata();
         })();
-    }, [hasInitialized, address, playerLoading]);
+    }, [hasInitialized, playerLoading]);
     if (!hasInitialized || !configurator.current || !attributes)
-        return [undefined, undefined, undefined];
+        return [undefined, undefined, undefined, undefined];
     var handleSelect = function (config) { return __awaiter(void 0, void 0, void 0, function () {
         var updatedAttrs;
         var _a, _b;
@@ -89,6 +91,9 @@ var useNestedConfigurator = function (address) {
         return Object.assign(output, (_a = {}, _a[attr.name] = attr, _a));
     }, {});
     var preppedAttributes = (0, utils_1.hydrateAttribute)([attributeObj, translations, language], handleSelect);
-    return [preppedAttributes, handleSelect, metadataRef.current];
+    var price = priceConfig
+        ? configurator.current.getPrice(priceConfig.id, priceConfig.currency)
+        : undefined;
+    return [preppedAttributes, handleSelect, metadataRef.current, price];
 };
 exports.default = useNestedConfigurator;

package/dist/store/price.d.ts

@@ -2,11 +2,6 @@ import { RootState, ThreekitDispatch } from './index';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
-export interface PriceState {
-    id: undefined | string;
-    currency: undefined | string;
-    price: undefined | number;
-}
 export interface IPriceConfig {
     id: string;
     currency: string;
@@ -15,6 +10,11 @@ export interface IPrice {
     currency: string;
     price: number;
 }
+export interface PriceState {
+    id: undefined | string;
+    currency: undefined | string;
+    price: undefined | number;
+}
 /*****************************************************
  * Actions
  ****************************************************/
@@ -26,6 +26,7 @@ declare const reducer: import("redux").Reducer<PriceState, import("redux").AnyAc
  * Standard Selectors
  ****************************************************/
 export declare const getPrice: (state: RootState) => undefined | IPrice;
+export declare const getPriceConfig: (state: RootState) => undefined | IPriceConfig;
 /*****************************************************
  * Complex Actions
  ****************************************************/

package/dist/store/price.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updatePrice = exports.getPrice = exports.initPrice = exports.setPrice = exports.setPriceConfig = void 0;
+exports.updatePrice = exports.getPriceConfig = exports.getPrice = exports.initPrice = exports.setPrice = exports.setPriceConfig = void 0;
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
 /*****************************************************
@@ -103,6 +103,13 @@ var getPrice = function (state) {
     return { price: price, currency: currency };
 };
 exports.getPrice = getPrice;
+var getPriceConfig = function (state) {
+    var _a = state.price, id = _a.id, currency = _a.currency;
+    if (!id || !currency)
+        return undefined;
+    return { id: id, currency: currency };
+};
+exports.getPriceConfig = getPriceConfig;
 /*****************************************************
  * Complex Actions
  ****************************************************/

package/dist/store/treble.d.ts

@@ -68,7 +68,7 @@ export declare const getPlayerElementId: (state: RootState) => undefined | strin
 /*****************************************************
  * Complex Actions
  ****************************************************/
-export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export declare const launch: (launchConfig?: Partial<ILaunchConfig> | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;

package/dist/store/treble.js

@@ -166,46 +166,62 @@ exports.getPlayerElementId = getPlayerElementId;
 /*****************************************************
  * Complex Actions
  ****************************************************/
-var initPlayer = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-    var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
-                return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el, 
-                        // Variables to sort out
-                        authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
-            case 1:
-                player = _a.sent();
-                return [4 /*yield*/, player.getConfigurator()];
-            case 2:
-                configurator = _a.sent();
-                if (window.threekit) {
-                    window.threekit = Object.assign(window.threekit, {
-                        player: player,
-                        configurator: configurator,
-                    });
-                }
-                else
-                    window.threekit = {
-                        player: player,
-                        configurator: configurator,
-                        services: api_1.default,
-                        treble: new Treble_1.default({
+var initPlayer = function (config) {
+    return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
+        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
+                    return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el, 
+                            // Variables to sort out
+                            authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
+                case 1:
+                    player = _a.sent();
+                    return [4 /*yield*/, player.getConfigurator()];
+                case 2:
+                    configurator = _a.sent();
+                    if (window.threekit) {
+                        window.threekit = Object.assign(window.threekit, {
                             player: player,
-                            orgId: orgId,
-                            initialConfiguration: configurator.getConfiguration(),
-                        }),
-                    };
-                dispatch((0, exports.setThreekitInitialized)(true));
-                dispatch((0, exports.setPlayerLoading)(false));
-                window.threekit.player.on('setConfiguration', function () {
-                    dispatch((0, attributes_1.setAttributes)(window.threekit.configurator.getDisplayAttributes()));
-                });
-                return [2 /*return*/];
-        }
-    });
-}); }; };
+                            configurator: configurator,
+                        });
+                    }
+                    else
+                        window.threekit = {
+                            player: player,
+                            configurator: configurator,
+                            services: api_1.default,
+                            treble: new Treble_1.default({
+                                player: player,
+                                orgId: orgId,
+                                initialConfiguration: configurator.getConfiguration(),
+                            }),
+                        };
+                    dispatch((0, exports.setThreekitInitialized)(true));
+                    dispatch((0, exports.setPlayerLoading)(false));
+                    window.threekit.player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var attributes, previousAttributes, updatedAttributes;
+                        var _a;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    attributes = getState().attributes;
+                                    previousAttributes = Object.values(attributes);
+                                    updatedAttributes = window.threekit.configurator.getDisplayAttributes();
+                                    dispatch((0, attributes_1.setAttributes)(updatedAttributes));
+                                    return [4 /*yield*/, ((_a = EVENTS.postConfigurationChange) === null || _a === void 0 ? void 0 : _a.call(EVENTS, updatedAttributes, {}, previousAttributes))];
+                                case 1:
+                                    _b.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+};
 exports.initPlayer = initPlayer;
 var launch = function (launchConfig) {
     return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {

package/dist/types.d.ts

@@ -164,6 +164,13 @@ export declare type SNAPSHOT_FORMAT_TYPES = 'jpg' | 'png';
 /***************************************************
  *  Threekit Api
  **************************************************/
+export interface IConfigurationChangeEvent {
+    name: string;
+    appliedConfiguration: Record<string, string>;
+    previousConfiguration: IConfiguration;
+    configuration: IConfiguration;
+    metadata: Record<string, string>;
+}
 export interface IThreekitConfigurator {
     getMetadata: () => IMetadata;
     getAttributes: () => Array<IThreekitAttribute>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.67",
+  "version": "0.0.70",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -60,12 +60,13 @@
     "@types/webpack-env": "^1.16.3",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.2",
+    "chromatic": "^6.5.3",
     "jest": "^27.5.1",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
     "rimraf": "^3.0.2",
     "serve": "^12.0.1",
-    "storybook-addon-styled-component-theme": "^2.0.0",
+    "themeprovider-storybook": "^1.8.0",
     "ts-jest": "^27.1.3",
     "typescript": ">=4.4.4"
   },