@threekit-tools/treble 0.0.20 → 0.0.24

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IProducts } from '../../threekit';
+export interface ProductLayoutProps {
+    products: Record<string, IProducts>;
+}
+declare const ProductLayout: React.FC<ProductLayoutProps>;
+export default ProductLayout;

package/dist/components/ProductLayout/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ProductLayout = function (props) {
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+};
+exports.default = ProductLayout;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ThreekitProviderProps } from '../ThreekitProvider';
+interface ProductLoaderProps extends Omit<ThreekitProviderProps, 'children'> {
+    productId?: string;
+}
+export default function ProductLoader(props: ProductLoaderProps): JSX.Element | null;
+export {};

package/dist/components/ProductLoader/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ThreekitProvider_1 = __importDefault(require("../ThreekitProvider"));
+var utils_1 = require("../../utils");
+var constants_1 = require("../../constants");
+var productsMap = {};
+var productComponents = [];
+var productToComponentMap = {};
+function ProductLoader(props) {
+    var _a;
+    var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme;
+    var config = (0, utils_1.loadTrebleConfig)();
+    if (!((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx))
+        return null;
+    if (!productComponents.length) {
+        config.treble.productsCtx.keys().forEach(function (fileName) {
+            var _a;
+            if (!fileName.includes('product.js'))
+                return;
+            if (fileName.includes('].product.js'))
+                return;
+            productComponents.push((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx(fileName).default);
+        });
+        react_1.Children.forEach(Object.values(productComponents).map(function (el) { return el({}); }), function (jsx, i) {
+            if (!jsx)
+                return;
+            if (jsx.type.name !== 'ProductLayout')
+                return;
+            if (!jsx.props.products)
+                return;
+            var products = jsx.props.products;
+            Object.entries(products).forEach(function (_a) {
+                var prodKey = _a[0], prodObj = _a[1];
+                productsMap[prodKey] = prodObj;
+                productToComponentMap[prodKey] = i;
+            });
+        });
+    }
+    var params = (0, utils_1.getParams)();
+    var id = productId;
+    if (!id && params[constants_1.TK_PRODUCT_ID_PARAM_KEY]) {
+        id = Object.keys(productToComponentMap).find(function (el) { return params[constants_1.TK_PRODUCT_ID_PARAM_KEY] === el; });
+    }
+    if (!id)
+        return null;
+    var Product = productComponents[productToComponentMap[id]];
+    if (!Product)
+        return null;
+    // const assetId =
+    //   typeof productAssetId[id] === 'string'
+    //     ? productAssetId[id]
+    //     : productAssetId[env][id];
+    // const preppedCredentials = Object.assign({}, project?.credentials);
+    // preppedCredentials[env] = Object.assign(preppedCredentials[env], {
+    //   assetId,
+    // });
+    var preppedProject = Object.assign({}, project, {
+        products: productsMap[id],
+    });
+    return (react_1.default.createElement(ThreekitProvider_1.default, { project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv },
+        react_1.default.createElement(Product, null)));
+}
+exports.default = ProductLoader;

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

@@ -1,17 +1,10 @@
 import React from 'react';
-import { ILaunchConfig, IThreekitCredentials } from '../../store/threekit';
-interface ICredentials {
-    preview: IThreekitCredentials;
-    'admin-fts': IThreekitCredentials;
-}
+import { ILaunchConfig } from '../../store/threekit';
 interface Theme {
     [key: string]: string | number;
 }
-export interface ThreekitProviderProps {
-    credentials: ICredentials;
-    playerConfig?: ILaunchConfig;
+export interface ThreekitProviderProps extends Partial<ILaunchConfig> {
     theme?: Theme;
-    threekitEnv?: string;
     children: React.ReactNode;
 }
 declare const ThreekitProvider: (props: ThreekitProviderProps) => JSX.Element;

package/dist/components/ThreekitProvider/index.js

@@ -33,19 +33,18 @@ var App = function (props) {
     var dispatch = (0, store_1.useThreekitDispatch)();
     (0, react_1.useEffect)(function () {
         var init = function () {
-            var threekitEnv = props.threekitEnv || process.env.THREEKIT_ENV;
-            var threekitConfig = Object.assign({ threekitEnv: threekitEnv }, props.credentials, props.playerConfig);
-            dispatch((0, threekit_1.launch)(threekitConfig));
+            var playerConfig = props.playerConfig, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv;
+            dispatch((0, threekit_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv }));
         };
         init();
         return;
-    }, [props.credentials, props.threekitEnv, , props.playerConfig]);
+    }, [props.project, props.threekitEnv, , props.playerConfig]);
     return react_1.default.createElement(react_1.default.Fragment, null, props.children);
 };
 var ThreekitProvider = function (props) {
     return (react_1.default.createElement(react_redux_1.Provider, { store: store_1.default },
         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, { theme: props.theme, credentials: props.credentials, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv }, props.children))));
+            react_1.default.createElement(App, { locale: props.locale, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv }, props.children))));
 };
 exports.default = ThreekitProvider;

package/dist/constants.d.ts

@@ -9,6 +9,10 @@ export declare const LAYOUT_CLASS_NAME: string;
 export declare const TOOL_CLASS_NAME: string;
 export declare const DISPLAY_CLASS_NAME: string;
 export declare const FORM_CLASS_NAME: string;
+/*****************************************************
+ * Treble Products Workflow
+ ****************************************************/
+export declare const TK_PRODUCT_ID_PARAM_KEY = "tkProduct";
 /*****************************************************
  * Saved Configuration Workflow
  ****************************************************/

package/dist/constants.js

@@ -3,7 +3,7 @@
  * Dev-Kit Config
  ****************************************************/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
+exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
 exports.DEFAULT_CLASS_NAME = 'threekit-react';
 exports.CLASS_NAME_PREFIX = 'tk';
 exports.INPUT_COMPONENT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-input");
@@ -12,6 +12,10 @@ exports.LAYOUT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(ex
 exports.TOOL_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-tool");
 exports.DISPLAY_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-display");
 exports.FORM_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-form");
+/*****************************************************
+ * Treble Products Workflow
+ ****************************************************/
+exports.TK_PRODUCT_ID_PARAM_KEY = 'tkProduct';
 /*****************************************************
  * Saved Configuration Workflow
  ****************************************************/

package/dist/index.d.ts

@@ -37,4 +37,6 @@ import Wishlist from './components/Wishlist';
 import Share from './components/Share';
 import icons from './icons';
 export * from './icons';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, };
+import ProductLoader from './components/ProductLoader';
+import ProductLayout from './components/ProductLayout';
+export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, ProductLoader, ProductLayout, };

package/dist/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
+exports.ProductLayout = exports.ProductLoader = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -101,3 +101,8 @@ exports.Share = Share_1.default;
 var icons_1 = __importDefault(require("./icons"));
 exports.icons = icons_1.default;
 __exportStar(require("./icons"), exports);
+//  Products - Multi-configurtors
+var ProductLoader_1 = __importDefault(require("./components/ProductLoader"));
+exports.ProductLoader = ProductLoader_1.default;
+var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
+exports.ProductLayout = ProductLayout_1.default;

package/dist/store/threekit.d.ts

@@ -1,25 +1,15 @@
 import { RootState, ThreekitDispatch } from './index';
-import { ISetConfiguration, IThreekitDisplayAttribute, IMetadata, ThreekitInitConfig } from '../threekit';
+import { ISetConfiguration, IThreekitDisplayAttribute, IMetadata, IProject, IPlayerConfig } from '../threekit';
 import { ITranslationMap } from '../api/products';
 import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
-export interface IThreekitCredentials {
-    publicToken: string;
-    assetId: string;
-    configurationId?: string;
-    orgId: string;
-    stageId?: string;
-    publishStage?: string;
-    threekitDomain?: string;
-}
-export interface ILaunchConfig extends Omit<ThreekitInitConfig, 'el' | 'authToken' | 'orgId' | 'assetId' | 'stageId'> {
-    threekitEnv?: string;
-    preview: IThreekitCredentials;
-    'admin-fts': IThreekitCredentials;
-    elementId?: string;
-    language?: string | undefined;
+export interface ILaunchConfig {
+    threekitEnv: string;
+    locale: string;
+    project: IProject;
+    playerConfig: IPlayerConfig;
 }
 interface IPriceConfig {
     id: string;
@@ -65,7 +55,7 @@ export declare const getWishlist: (state: RootState) => WishlistArray;
 /*****************************************************
  * Complex Actions
  ****************************************************/
-export declare const launch: (launchConfig: ILaunchConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const launch: (launchConfig?: Partial<ILaunchConfig> | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const setConfiguration: (config: ISetConfiguration) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const addToWishlist: (config: ISaveConfigurationConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const removeFromWishlist: (idx: number) => (dispatch: ThreekitDispatch) => void;

package/dist/store/threekit.js

@@ -260,124 +260,127 @@ exports.getWishlist = getWishlist;
 /*****************************************************
  * Complex Actions
  ****************************************************/
-var launch = function (launchConfig) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, 
-    //  Threekit Env specific credentials,
-    threekitEnv, 
-    //  Threekit Player Init
-    elementId, 
-    // cache,
-    showConfigurator, initialConfigurationRaw, showLoadingThumbnail, showLoadingProgress, onLoadingProgress, showAR, showShare, locale, allowMobileVerticalOrbit, publishStage, display, threekitCredentials, threekitDomainRaw, assetId, authToken, orgId, stageId, configurationId, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, el, _b, player, translations, pricebook, _c, priceConfig, productName, wishlistData;
-    var _d;
-    var _e;
-    return __generator(this, function (_f) {
-        switch (_f.label) {
-            case 0:
-                if (window.threekit)
-                    return [2 /*return*/];
-                _a = Object.assign(constants_1.DEFAULT_PLAYER_CONFIG, launchConfig), threekitEnv = _a.threekitEnv, elementId = _a.elementId, showConfigurator = _a.showConfigurator, initialConfigurationRaw = _a.initialConfiguration, showLoadingThumbnail = _a.showLoadingThumbnail, showLoadingProgress = _a.showLoadingProgress, onLoadingProgress = _a.onLoadingProgress, showAR = _a.showAR, showShare = _a.showShare, locale = _a.locale, allowMobileVerticalOrbit = _a.allowMobileVerticalOrbit, publishStage = _a.publishStage, display = _a.display;
-                threekitCredentials = launchConfig[threekitEnv || 'preview'];
-                threekitDomainRaw = threekitCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
-                assetId = threekitCredentials.assetId, authToken = threekitCredentials.publicToken, orgId = threekitCredentials.orgId, stageId = threekitCredentials.stageId, configurationId = threekitCredentials.configurationId;
-                //  Connection
-                connection_1.default.connect({
-                    authToken: authToken,
-                    orgId: orgId,
-                    assetId: assetId,
-                    threekitDomain: threekitDomainRaw,
-                });
-                threekitDomain = connection_1.default.getConnection().threekitDomain;
-                initialConfiguration = __assign({}, initialConfigurationRaw);
-                updatedAssetId = assetId;
-                params = (0, utils_1.getParams)();
-                configId = ((_e = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _e === void 0 ? void 0 : _e.length)
-                    ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
-                    : configurationId;
-                if (!configId) return [3 /*break*/, 2];
-                return [4 /*yield*/, api_1.default.configurations.fetch(configId)];
-            case 1:
-                configuration = _f.sent();
-                if (configuration) {
-                    initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
-                    connection_1.default.connect({ assetId: configuration.data.productId });
-                    updatedAssetId = configuration.data.productId;
-                }
-                _f.label = 2;
-            case 2:
-                if (elementId) {
-                    el = document.getElementById(elementId);
-                    if (el)
-                        dispatch(setPlayerElement(elementId));
-                }
-                else {
-                    el = createPlayerLoaderEl(constants_1.TK_PLAYER_ROOT_DIV);
-                    dispatch(setPlayerElement(constants_1.TK_PLAYER_ROOT_DIV));
-                }
-                //  We create the threekit script
-                return [4 /*yield*/, (0, utils_1.createThreekitScriptEl)(threekitDomain)];
-            case 3:
-                //  We create the threekit script
-                _f.sent();
-                return [4 /*yield*/, Promise.all([
-                        window.threekitPlayer({
-                            el: el,
-                            authToken: authToken,
-                            // cache,
-                            stageId: stageId,
-                            assetId: updatedAssetId,
-                            showConfigurator: showConfigurator,
-                            initialConfiguration: initialConfiguration,
-                            showLoadingThumbnail: showLoadingThumbnail,
-                            showLoadingProgress: showLoadingProgress,
-                            onLoadingProgress: onLoadingProgress,
-                            showAR: showAR,
-                            showShare: showShare,
-                            locale: locale,
-                            allowMobileVerticalOrbit: allowMobileVerticalOrbit,
-                            publishStage: publishStage,
-                            display: display,
-                        }),
-                        api_1.default.products.fetchTranslations(),
-                        api_1.default.price.getPricebooksList(),
-                    ])];
-            case 4:
-                _b = _f.sent(), player = _b[0], translations = _b[1], pricebook = _b[2];
-                _c = window;
-                _d = {
-                    player: player
-                };
-                return [4 /*yield*/, player.getConfigurator()];
-            case 5:
-                _c.threekit = (_d.configurator = _f.sent(),
-                    _d.treble = new Treble_1.default({ player: player }),
-                    _d);
-                if (launchConfig.language) {
-                    dispatch(setLanguage(launchConfig.language));
-                    dispatch(setTranslations(translations));
-                }
-                if (pricebook.length) {
-                    priceConfig = {
-                        id: pricebook[0].id,
-                        currency: pricebook[0].currencies[0],
+var launch = function (launchConfig) {
+    return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
+        var config, credentials, products, threekitEnv, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, _a, player, translations, pricebook, _b, priceConfig, productName, wishlistData;
+        var _c;
+        var _d, _e, _f, _g, _h;
+        return __generator(this, function (_j) {
+            switch (_j.label) {
+                case 0:
+                    if (window.threekit)
+                        return [2 /*return*/];
+                    config = (0, utils_1.loadTrebleConfig)();
+                    credentials = Object.assign({}, ((_d = config.project) === null || _d === void 0 ? void 0 : _d.credentials) || {}, ((_e = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _e === void 0 ? void 0 : _e.credentials) || {});
+                    products = Object.assign({}, ((_f = config.project) === null || _f === void 0 ? void 0 : _f.products) || {}, ((_g = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _g === void 0 ? void 0 : _g.products) || {});
+                    if (!Object.keys(credentials).length || !Object.keys(products).length)
+                        return [2 /*return*/, console.error('Missing credentials')];
+                    threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
+                    playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
+                    envCredentials = credentials[threekitEnv];
+                    product = products[threekitEnv];
+                    threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
+                    orgId = envCredentials.orgId, authToken = envCredentials.publicToken;
+                    if (typeof product === 'string') {
+                        if ((0, utils_1.isUuid)(product))
+                            assetId = product;
+                        else
+                            configurationId = product;
+                    }
+                    else {
+                        if ((0, utils_1.isUuid)(product.assetId))
+                            assetId = product.assetId;
+                        else
+                            configurationId = product.assetId;
+                        stageId = product.stageId;
+                    }
+                    if (playerConfig.elementId) {
+                        el = document.getElementById(playerConfig.elementId);
+                        if (el)
+                            dispatch(setPlayerElement(playerConfig.elementId));
+                    }
+                    else {
+                        el = createPlayerLoaderEl(constants_1.TK_PLAYER_ROOT_DIV);
+                        dispatch(setPlayerElement(constants_1.TK_PLAYER_ROOT_DIV));
+                    }
+                    //  Connection
+                    connection_1.default.connect({
+                        authToken: authToken,
+                        orgId: orgId,
+                        assetId: assetId,
+                        threekitDomain: threekitDomainRaw,
+                    });
+                    threekitDomain = connection_1.default.getConnection().threekitDomain;
+                    initialConfiguration = __assign({}, initialConfigurationRaw);
+                    updatedAssetId = assetId;
+                    params = (0, utils_1.getParams)();
+                    configId = ((_h = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _h === void 0 ? void 0 : _h.length)
+                        ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
+                        : configurationId;
+                    if (!configId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, api_1.default.configurations.fetch(configId)];
+                case 1:
+                    configuration = _j.sent();
+                    if (configuration) {
+                        initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
+                        connection_1.default.connect({ assetId: configuration.data.productId });
+                        updatedAssetId = configuration.data.productId;
+                    }
+                    _j.label = 2;
+                case 2:
+                    if (!updatedAssetId)
+                        return [2 /*return*/, console.error('missing assetId')];
+                    //  We create the threekit script
+                    return [4 /*yield*/, (0, utils_1.createThreekitScriptEl)(threekitDomain)];
+                case 3:
+                    //  We create the threekit script
+                    _j.sent();
+                    return [4 /*yield*/, Promise.all([
+                            window.threekitPlayer(__assign({ el: el, 
+                                // Variables to sort out
+                                authToken: authToken, stageId: stageId, assetId: updatedAssetId, initialConfiguration: initialConfiguration }, playerConfig)),
+                            api_1.default.products.fetchTranslations(),
+                            api_1.default.price.getPricebooksList(),
+                        ])];
+                case 4:
+                    _a = _j.sent(), player = _a[0], translations = _a[1], pricebook = _a[2];
+                    _b = window;
+                    _c = {
+                        player: player
                     };
-                    dispatch(setPriceConfig(priceConfig));
-                }
-                productName = window.threekit.player.scene.get({
-                    id: window.threekit.player.assetId,
-                }).name;
-                dispatch(setName(productName));
-                dispatch(setMetadata(window.threekit.configurator.getMetadata()));
-                dispatch(setAttributes(window.threekit.configurator.getDisplayAttributes()));
-                dispatch((0, exports.setThreekitLoaded)(true));
-                dispatch(setPlayerLoading(false));
-                return [4 /*yield*/, window.threekit.treble.wishlist.getWishlist()];
-            case 6:
-                wishlistData = _f.sent();
-                dispatch(setWishlist(wishlistData));
-                return [2 /*return*/];
-        }
-    });
-}); }; };
+                    return [4 /*yield*/, player.getConfigurator()];
+                case 5:
+                    _b.threekit = (_c.configurator = _j.sent(),
+                        _c.treble = new Treble_1.default({ player: player }),
+                        _c);
+                    if (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.locale) {
+                        dispatch(setLanguage(launchConfig.locale));
+                        dispatch(setTranslations(translations));
+                    }
+                    if (pricebook.length) {
+                        priceConfig = {
+                            id: pricebook[0].id,
+                            currency: pricebook[0].currencies[0],
+                        };
+                        dispatch(setPriceConfig(priceConfig));
+                    }
+                    productName = window.threekit.player.scene.get({
+                        id: window.threekit.player.assetId,
+                    }).name;
+                    dispatch(setName(productName));
+                    dispatch(setMetadata(window.threekit.configurator.getMetadata()));
+                    dispatch(setAttributes(window.threekit.configurator.getDisplayAttributes()));
+                    dispatch((0, exports.setThreekitLoaded)(true));
+                    dispatch(setPlayerLoading(false));
+                    return [4 /*yield*/, window.threekit.treble.wishlist.getWishlist()];
+                case 6:
+                    wishlistData = _j.sent();
+                    dispatch(setWishlist(wishlistData));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+};
 exports.launch = launch;
 //  Configurator
 var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {

package/dist/threekit.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="webpack-env" />
 import Treble from './Treble';
 declare type SCENE_PHASES = 'LOADED' | 'PRELOADED' | 'RENDERED';
 declare type PRIVATE_APIS = 'scene' | 'player';
@@ -207,7 +208,7 @@ export interface ThreekitInitConfig {
     stageId?: string;
     orgId?: string;
     showConfigurator?: boolean;
-    initialConfiguration?: object;
+    initialConfiguration?: Record<string, any>;
     showAR?: boolean;
     showShare?: boolean;
     showLoadingThumbnail?: boolean;
@@ -218,6 +219,36 @@ export interface ThreekitInitConfig {
     publishStage?: string;
     display?: DISPLAY_OPTIONS;
 }
+/***************************************************
+ *  Treble Declarations
+ **************************************************/
+export interface IFrameworkConfig {
+    productsCtx: __WebpackModuleApi.RequireContext;
+}
+export interface ICredential {
+    orgId: string;
+    publicToken: string;
+    publishStage?: string;
+    threekitDomain?: string;
+}
+export interface ICredentials extends Record<string, ICredential> {
+}
+export interface IPlayerConfig extends Omit<ThreekitInitConfig, 'el' | 'authToken' | 'orgId' | 'assetId' | 'stageId' | 'locale'> {
+    elementId?: string;
+}
+export interface IProduct extends Pick<ThreekitInitConfig, 'assetId' | 'stageId' | 'initialConfiguration'> {
+}
+export interface IProducts extends Record<string, string | Partial<IProduct>> {
+}
+export interface IProject {
+    credentials: ICredentials;
+    products: IProducts;
+}
+export interface ITrebleConfig {
+    project: IProject;
+    treble: IFrameworkConfig;
+    player: IPlayerConfig;
+}
 /***************************************************
  *  Global Declaration
  **************************************************/

package/dist/utils.d.ts

@@ -1,6 +1,7 @@
 import { ITranslationMap } from './api/products';
 import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute } from './threekit';
-interface ICameraPostion {
+import { ITrebleConfig } from './threekit';
+interface ICameraPosition {
     position: ICoordinates;
     quaternion: IQuaternion;
 }
@@ -38,7 +39,7 @@ export declare const getCameraPosition: (cameraApi: IThreekitCamera) => {
     position: ICoordinates;
     quaternion: IQuaternion;
 };
-export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition: ICameraPostion) => void;
+export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition: ICameraPosition) => void;
 export declare const dataURItoBlob: (dataURI: string) => Blob;
 export declare const dataURItoFile: (dataURI: string, filename: string) => File;
 export declare const copyToClipboard: (data: string | Record<string, string | number | boolean>) => void;
@@ -56,4 +57,6 @@ export declare const selectionToConfiguration: (value: string | number | IConfig
     assetId: string | number | IConfigurationColor;
 } | undefined;
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
+export declare const isUuid: (str?: string | undefined) => boolean;
+export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;
 export {};

package/dist/utils.js

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
+exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
 var constants_1 = require("./constants");
 var generateClassName = function (baseClass) {
     return function (component, customClassName, title) {
@@ -342,3 +342,39 @@ var filterFormAttributes = function (attributes, attributeComponentProps, includ
     });
 };
 exports.filterFormAttributes = filterFormAttributes;
+var isUuid = function (str) {
+    if (!str || typeof str !== 'string')
+        return false;
+    var check = new RegExp(/^[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i);
+    return check.test(str);
+};
+exports.isUuid = isUuid;
+var loadTrebleConfig = function () {
+    var config = {};
+    try {
+        var project = require('@app-root/threekit.config.js').default;
+        if (project)
+            config.project = project;
+    }
+    catch (e) {
+        console.log(e);
+    }
+    try {
+        var player = require('@app-root/.treble/player.config.js').default;
+        if (player)
+            config.player = player;
+    }
+    catch (e) {
+        console.log(e);
+    }
+    try {
+        var treble = require('@app-root/.treble/treble.config.js').default;
+        if (treble)
+            config.treble = treble;
+    }
+    catch (e) {
+        console.log(e);
+    }
+    return config;
+};
+exports.loadTrebleConfig = loadTrebleConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.20",
+  "version": "0.0.24",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -44,6 +44,7 @@
     "@types/react-dom": ">=17.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.15",
+    "@types/webpack-env": "^1.16.3",
     "babel-loader": "^8.2.2",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",

package/tailwind-presets.js

@@ -1,3 +1,7 @@
+// eslint-disable-next-line
+const plugin = require('tailwindcss/plugin');
+
+// eslint-disable-next-line
 module.exports = {
   purge: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx}'],
   mode: 'jit',
@@ -14,13 +18,65 @@ module.exports = {
       },
       boxShadow: {
         trbl: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-        widget: '0px 0px 4px rgb(0 0 0 / 25%)',
         wishlist: '0px 4px 16px rgba(0, 0, 0, 0.16)',
       },
     },
   },
-  plugins: [],
   corePlugins: {
     // preflight: false,
   },
+  plugins: [
+    plugin(function ({ addComponents, theme }) {
+      const tooltip = {
+        '.trbl-tooltip': {
+          paddingBottom: `${theme('spacing.2')}`,
+          width: 'max-content',
+          borderRadius: theme('borderRadius.sm'),
+          position: 'relative',
+          top: '-100%',
+          left: '50%',
+          transform: 'translate(-50%, -100%)',
+          color: 'white',
+        },
+        '.trbl-tooltip-triangle': {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+
+          '& > div': {
+            width: `${theme('spacing.0')}`,
+            height: `${theme('spacing.0')}`,
+            borderLeft: '8px solid transparent',
+            borderRight: '8px solid transparent',
+            borderTop: '8px solid rgba(0, 0, 0, 0.6)',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+          },
+        },
+      };
+
+      addComponents(tooltip);
+    }),
+    plugin(function ({ addComponents, theme }) {
+      const widgetBtn = {
+        '.trbl-wgt-btn': {
+          borderRadius: `${theme('borderRadius.full')}`,
+          height: '40px',
+          width: '40px',
+          border: 'none',
+          color: '#000',
+          background: 'rgba(251,251,251,0.5)',
+          overflow: 'hidden',
+          cursor: 'pointer',
+          transition: 'all 0.16s ease-in-out',
+          '&:hover': {
+            background: 'rgba(240,240,240,0.75)',
+            boxShadow: '0px 0px 4px rgb(0 0 0 / 25%)',
+          },
+        },
+      };
+
+      addComponents(widgetBtn);
+    }),
+  ],
 };