@threekit-tools/treble 0.0.96 → 0.0.97-beta-01

package/dist/Treble/Treble.d.ts

@@ -22,7 +22,7 @@ declare class Treble {
     _player: IThreekitPrivatePlayer;
     wishlist: IWishlist;
     private _snapshots;
-    takeSnapshots: (typeof snapshots)['takeSnapshots'];
+    takeSnapshots: typeof snapshots['takeSnapshots'];
     _debugMode: boolean;
     constructor({ player, orgId }: ITreble);
     createOrder: (order?: IOrder) => Promise<import("../http/orders").IOrderResponse>;

package/dist/components/Share/index.js

@@ -71,6 +71,7 @@ var Share_1 = __importDefault(require("../../icons/Share"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var utils_1 = require("../../utils");
 var share_styles_1 = require("./share.styles");
+var useShare_1 = __importDefault(require("../../hooks/useShare"));
 var Share = function (props) {
     var _a = Object.assign({
         type: 'threekit',
@@ -80,7 +81,8 @@ var Share = function (props) {
     }, props), shape = _a.shape, type = _a.type, className = _a.className, msg = _a.message, position = _a.position;
     var hasLoaded = (0, useThreekitInitStatus_1.default)();
     var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
-    var _c = (0, react_1.useState)(null), resumeUrl = _c[0], setResumeUrl = _c[1];
+    var _c = (0, react_1.useState)(undefined), resumeUrl = _c[0], setResumeUrl = _c[1];
+    var handleShare = (0, useShare_1.default)();
     var resumeUrlElRef = (0, react_1.useRef)(null);
     var shareButtonRef = (0, react_1.useRef)(null);
     var shareContentRef = (0, react_1.useRef)(null);
@@ -100,37 +102,27 @@ var Share = function (props) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [show, shareButtonRef, shareContentRef]);
-    if (!hasLoaded)
+    if (!hasLoaded || !handleShare)
         return null;
     var cls = (0, utils_1.generateWidgetClassName)('share', className);
     var handleClick = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var configuration, e_1;
+        var resumableUrl;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (show) {
-                        setResumeUrl(null);
+                        setResumeUrl(undefined);
                         setShow(!show);
                         return [2];
                     }
-                    return [4, window.threekit.treble.saveConfiguration()];
+                    return [4, handleShare(msg)];
                 case 1:
-                    configuration = _a.sent();
-                    _a.label = 2;
-                case 2:
-                    _a.trys.push([2, 4, , 5]);
-                    return [4, navigator.clipboard.writeText(configuration.resumableUrl)];
-                case 3:
-                    _a.sent();
-                    if (msg === null || msg === void 0 ? void 0 : msg.length)
-                        message_1.default.info(msg);
-                    return [3, 5];
-                case 4:
-                    e_1 = _a.sent();
-                    setResumeUrl(configuration.resumableUrl);
-                    setShow(!show);
-                    return [3, 5];
-                case 5: return [2];
+                    resumableUrl = _a.sent();
+                    if (resumableUrl !== undefined) {
+                        setResumeUrl(resumableUrl);
+                        setShow(!show);
+                    }
+                    return [2];
             }
         });
     }); };

package/dist/components/ThreekitProvider/index.js

@@ -50,21 +50,18 @@ var App = function (props) {
     var dispatch = (0, store_1.useThreekitDispatch)();
     var playerConfig = props.playerConfig, assetId = props.assetId, customId = props.customId, productId = props.productId, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
     (0, react_1.useEffect)(function () {
-        var init = function () {
-            dispatch((0, treble_1.launch)({
-                playerConfig: playerConfig,
-                productId: productId,
-                assetId: assetId,
-                customId: customId,
-                project: project,
-                locale: locale,
-                threekitEnv: threekitEnv,
-                eventHandlers: eventHandlers,
-            }));
-        };
-        init();
+        dispatch((0, treble_1.launch)({
+            playerConfig: playerConfig,
+            productId: productId,
+            assetId: assetId,
+            customId: customId,
+            project: project,
+            locale: locale,
+            threekitEnv: threekitEnv,
+            eventHandlers: eventHandlers,
+        }));
         return;
-    }, [props.project, props.threekitEnv, props.playerConfig]);
+    }, [assetId, props.project, props.threekitEnv, props.playerConfig]);
     return react_1.default.createElement(react_1.default.Fragment, null, props.children);
 };
 var ThreekitProvider = function (props) {

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

@@ -0,0 +1,6 @@
+import { Session } from '@threekit/analytics';
+declare type UseAnalyticsSessionSuccess = Session;
+declare type UseAnalyticsSessionError = undefined;
+declare type UseAnalyticsSession = UseAnalyticsSessionSuccess | UseAnalyticsSessionError;
+declare const useAnalyticsSession: () => UseAnalyticsSession;
+export default useAnalyticsSession;

package/dist/hooks/useAnalyticsSession/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var analytics_1 = require("@threekit/analytics");
+var connection_1 = require("../../connection");
+var useAnalyticsSession = function () {
+    var connection = new connection_1.ThreekitConnection();
+    var auth = {
+        orgId: connection._orgId,
+        host: connection._threekitDomain,
+        publicToken: connection._authToken,
+    };
+    var analyticsSession = (0, analytics_1.getSession)({ auth: auth });
+    if (!analyticsSession)
+        return undefined;
+    return analyticsSession;
+};
+exports.default = useAnalyticsSession;

package/dist/hooks/useAttribute/index.js

@@ -35,17 +35,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var store_1 = require("../../store");
 var attributes_1 = require("../../store/attributes");
 var utils_1 = require("../../utils");
 var utils_2 = require("../../utils");
+var useAnalyticsSession_1 = __importDefault(require("../useAnalyticsSession"));
+var rest_api_1 = require("@threekit/rest-api");
 var useAttribute = function (attributeName) {
     var _a;
     if (!attributeName)
         return [undefined, undefined];
     var dispatch = (0, store_1.useThreekitDispatch)();
     var _b = (0, store_1.useThreekitSelector)(attributes_1.getHydrationData), attributes = _b[0], translations = _b[1];
+    var analyticsSession = (0, useAnalyticsSession_1.default)();
     if (!attributeName || !attributes)
         return [undefined, undefined];
     var attribute = attributes[attributeName];
@@ -53,20 +59,31 @@ var useAttribute = function (attributeName) {
         return [undefined, undefined];
     var preppedAttributes = (0, utils_2.hydrateAttribute)([(_a = {}, _a[attributeName] = attribute, _a), translations], function (config) { return dispatch((0, attributes_1.setConfiguration)(config)); });
     var handleChange = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var preppedValue, assetId;
+        var preppedValue, uploadId;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     if (!(attribute.type === 'Asset' && attribute.assetType === 'upload')) return [3, 4];
-                    if (!!value) return [3, 1];
-                    preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
+                    if (!!(value instanceof File)) return [3, 1];
+                    preppedValue = (0, utils_1.selectionToConfiguration)(value !== null && value !== void 0 ? value : '', attribute.type);
                     return [3, 3];
                 case 1: return [4, window.threekit.player.uploadImage(value)];
                 case 2:
-                    assetId = _b.sent();
-                    if (assetId)
-                        preppedValue = (0, utils_1.selectionToConfiguration)(assetId, attribute.type);
+                    uploadId = _b.sent();
+                    try {
+                        analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.imageUpload({
+                            assetId: window.threekit.player.assetId,
+                            imageUploadId: attributeName,
+                            imageUploadFileId: uploadId,
+                            configuration: window.threekit.configurator.getFullConfiguration(),
+                        });
+                    }
+                    catch (e) {
+                        console.log('v2Analytics: Error reporting imageUpload event:', e);
+                    }
+                    if (uploadId)
+                        preppedValue = (0, utils_1.selectionToConfiguration)(uploadId, attribute.type);
                     _b.label = 3;
                 case 3: return [3, 5];
                 case 4:
@@ -76,6 +93,17 @@ var useAttribute = function (attributeName) {
                     dispatch((0, attributes_1.setConfiguration)((_a = {},
                         _a[attributeName] = preppedValue,
                         _a)));
+                    try {
+                        analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.optionInteraction({
+                            optionsSetId: attribute.id,
+                            optionId: attribute.name,
+                            interactionType: rest_api_1.OptionInteractionType.Select,
+                            configuration: window.threekit.configurator.getFullConfiguration(),
+                        });
+                    }
+                    catch (e) {
+                        console.log('v2Analytics: Error reporting optionInteraction event:', e);
+                    }
                     return [2];
             }
         });

package/dist/hooks/useShare/index.js

@@ -43,10 +43,13 @@ var store_1 = require("../../store");
 var treble_1 = require("../../store/treble");
 var message_1 = __importDefault(require("../../components/message"));
 var utils_1 = require("../../utils");
+var useAnalyticsSession_1 = __importDefault(require("../useAnalyticsSession"));
+var rest_api_1 = require("@threekit/rest-api");
 var useShare = function () {
     var isLoaded = (0, store_1.useThreekitSelector)(treble_1.isThreekitInitialized);
     if (!isLoaded)
         return undefined;
+    var analyticsSession = (0, useAnalyticsSession_1.default)();
     var handleShare = function (msg) {
         if (msg === void 0) { msg = 'Link copied'; }
         return __awaiter(void 0, void 0, void 0, function () {
@@ -63,6 +66,18 @@ var useShare = function () {
                         (0, utils_1.copyToClipboard)(configuration.resumableUrl);
                         if (msg === null || msg === void 0 ? void 0 : msg.length)
                             message_1.default.info(msg);
+                        try {
+                            analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.share({
+                                shareLink: configuration.resumableUrl,
+                                shareType: rest_api_1.ShareType.Share,
+                                assetId: window.threekit.player.assetId,
+                                configurationId: configuration.id,
+                                configuration: window.threekit.configurator.getFullConfiguration(),
+                            });
+                        }
+                        catch (e) {
+                            console.log('v2Analytics: Error reporting share event.');
+                        }
                         return [2, Promise.resolve((configuration === null || configuration === void 0 ? void 0 : configuration.resumableUrl) || undefined)];
                 }
             });

package/dist/store/attributes.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -56,8 +67,21 @@ var reducer = (0, toolkit_1.createSlice)({
         builder.addCase(treble_1.setThreekitInitialized, function () {
             var attributes = window.threekit.configurator.getDisplayAttributes();
             return attributes.reduce(function (output, attr) {
-                var _a;
-                return Object.assign(output, (_a = {}, _a[attr.name] = attr, _a));
+                var _a, _b;
+                if (attr.type === 'Color') {
+                    return Object.assign(output, (_a = {},
+                        _a[attr.name] = __assign(__assign({}, attr), { defaultValue: {
+                                r: attr.defaultValue.r,
+                                g: attr.defaultValue.g,
+                                b: attr.defaultValue.b,
+                            }, value: {
+                                r: attr.value.r,
+                                g: attr.value.g,
+                                b: attr.value.b,
+                            } }),
+                        _a));
+                }
+                return Object.assign(output, (_b = {}, _b[attr.name] = attr, _b));
             }, {});
         });
         builder.addCase(exports.setAttributes, function (_, action) {

package/dist/store/product.js

@@ -81,10 +81,7 @@ var reducer = (0, toolkit_1.createSlice)({
             return __assign(__assign({}, state), { id: action.payload });
         });
         builder.addCase(exports.setName, function (state, action) {
-            var name = window.threekit.player.scene.get({
-                id: window.threekit.player.assetId,
-            }).name;
-            return __assign(__assign({}, state), { name: action.payload || name });
+            return __assign(__assign({}, state), { name: action.payload });
         });
         builder.addCase(exports.setMetadata, function (state, action) {
             return __assign(__assign({}, state), { metadata: action.payload || window.threekit.configurator.getMetadata() });

package/dist/store/treble.d.ts

@@ -65,7 +65,7 @@ export declare const getPlayerElementId: (state: RootState) => undefined | strin
 export declare const getLoadingProgress: (state: RootState) => undefined | number;
 export declare const getPlayerInteraction: (state: RootState) => undefined | boolean;
 export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
-export declare const launch: (launchConfig?: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
-export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const launch: (launchConfig: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const unloadPlayer: (playerEl?: HTMLElement) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;

package/dist/store/treble.js

@@ -173,8 +173,10 @@ var initPlayer = function (config) {
                 case 0:
                     el = config.el, authToken = config.authToken, assetId = config.assetId, customId = config.customId, stageId = config.stageId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
                     dispatch((0, exports.updateLoadingProgress)(0));
-                    return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId, customId: customId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
+                    return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId, customId: customId }, playerConfig), { pricing: false, initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
                                 var _a;
+                                if (progress > 0)
+                                    el.style.visibility = 'visible';
                                 dispatch((0, exports.updateLoadingProgress)(progress));
                                 (_a = playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.onLoadingProgress) === null || _a === void 0 ? void 0 : _a.call(playerConfig, progress);
                             } }))];
@@ -263,17 +265,24 @@ var initPlayer = function (config) {
 exports.initPlayer = initPlayer;
 var launch = function (launchConfig) {
     return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, customIdRaw, stageId, configurationId, initialConfigurationRaw, customId, assetId, threekitDomainRaw, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        return __generator(this, function (_k) {
-            switch (_k.label) {
+        var config, playerElId, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, customIdRaw, stageId, configurationId, initialConfigurationRaw, customId, assetId, threekitDomainRaw, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return __generator(this, function (_q) {
+            switch (_q.label) {
                 case 0:
-                    if (window.threekit)
-                        return [2];
                     config = (0, utils_1.loadTrebleConfig)();
-                    credentials = ((_b = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _b === void 0 ? void 0 : _b.credentials) || ((_c = config.project) === null || _c === void 0 ? void 0 : _c.credentials) || {};
-                    productsRaw = ((_d = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _d === void 0 ? void 0 : _d.products) || ((_e = config.project) === null || _e === void 0 ? void 0 : _e.products) || {};
-                    if (!((_f = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.productId) === null || _f === void 0 ? void 0 : _f.length)) {
+                    if (!window.threekit) return [3, 2];
+                    if (launchConfig.assetId === window.threekit.player.assetId)
+                        return [2];
+                    playerElId = (_e = (_c = (_b = config === null || config === void 0 ? void 0 : config.player) === null || _b === void 0 ? void 0 : _b.elementId) !== null && _c !== void 0 ? _c : (_d = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig) === null || _d === void 0 ? void 0 : _d.elementId) !== null && _e !== void 0 ? _e : constants_1.TK_PLAYER_ROOT_DIV;
+                    return [4, dispatch((0, exports.unloadPlayer)((_f = document.getElementById(playerElId)) !== null && _f !== void 0 ? _f : undefined))];
+                case 1:
+                    _q.sent();
+                    _q.label = 2;
+                case 2:
+                    credentials = ((_g = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _g === void 0 ? void 0 : _g.credentials) || ((_h = config.project) === null || _h === void 0 ? void 0 : _h.credentials) || {};
+                    productsRaw = ((_j = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _j === void 0 ? void 0 : _j.products) || ((_k = config.project) === null || _k === void 0 ? void 0 : _k.products) || {};
+                    if (!((_l = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.productId) === null || _l === void 0 ? void 0 : _l.length)) {
                         productsRaw = { default: productsRaw };
                         productId = 'default';
                     }
@@ -325,12 +334,12 @@ var launch = function (launchConfig) {
                     (0, product_1.setProducts)(products);
                     dispatch((0, product_1.setProductId)(productId));
                     threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
-                    serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_g = config === null || config === void 0 ? void 0 : config.project) === null || _g === void 0 ? void 0 : _g.serverUrl);
+                    serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_m = config === null || config === void 0 ? void 0 : config.project) === null || _m === void 0 ? void 0 : _m.serverUrl);
                     playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
                     envCredentials = credentials[threekitEnv];
                     _a = products[productId][threekitEnv] || {}, assetIdRaw = _a.assetId, customIdRaw = _a.customId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
                     customId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) || customIdRaw;
-                    assetId = ((_h = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) === null || _h === void 0 ? void 0 : _h.length)
+                    assetId = ((_o = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) === null || _o === void 0 ? void 0 : _o.length)
                         ? undefined
                         : (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw;
                     threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
@@ -355,22 +364,23 @@ var launch = function (launchConfig) {
                     initialConfiguration = __assign({}, initialConfigurationRaw);
                     updatedAssetId = assetId;
                     params = (0, utils_1.getParams)();
-                    configId = ((_j = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _j === void 0 ? void 0 : _j.length)
+                    configId = ((_p = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _p === void 0 ? void 0 : _p.length)
                         ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
                         : configurationId;
-                    if (!configId) return [3, 2];
+                    if (!configId) return [3, 4];
                     return [4, api_1.default.configurations.fetch(configId)];
-                case 1:
-                    configuration = _k.sent();
+                case 3:
+                    configuration = _q.sent();
                     if (configuration) {
                         initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
                         connection_1.default.connect({ assetId: configuration.data.productId });
                         updatedAssetId = configuration.data.productId;
                     }
-                    _k.label = 2;
-                case 2:
+                    _q.label = 4;
+                case 4:
                     if (!updatedAssetId && !customId)
                         throw new Error('missing assetId and customId');
+                    if (!!window.threekitPlayer) return [3, 6];
                     return [4, new Promise(function (resolve) {
                             var script = document.createElement('script');
                             script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
@@ -378,30 +388,35 @@ var launch = function (launchConfig) {
                             script.onload = function () { return resolve(); };
                             document.head.appendChild(script);
                         })];
-                case 3:
-                    _k.sent();
-                    return [4, dispatch((0, exports.initPlayer)({
-                            el: el,
-                            authToken: authToken,
-                            stageId: stageId,
-                            assetId: updatedAssetId,
-                            customId: customId,
-                            playerConfig: playerConfig,
-                            initialConfiguration: initialConfiguration,
-                        }))];
-                case 4:
-                    _k.sent();
+                case 5:
+                    _q.sent();
+                    _q.label = 6;
+                case 6: return [4, dispatch((0, exports.initPlayer)({
+                        el: el,
+                        authToken: authToken,
+                        stageId: stageId,
+                        assetId: updatedAssetId,
+                        customId: customId,
+                        playerConfig: playerConfig,
+                        initialConfiguration: initialConfiguration,
+                    }))];
+                case 7:
+                    _q.sent();
                     document.addEventListener('treble:notification', function (e) {
                         message_1.default.info(e.detail.message);
                     });
                     EVENTS = Object.assign(EVENTS, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers);
-                    dispatch((0, product_1.setName)());
+                    dispatch((0, product_1.setName)(window.threekit.player.scene.get({
+                        id: window.threekit.player.assetId,
+                    }).name));
                     dispatch((0, product_1.setMetadata)());
                     dispatch((0, product_1.initProduct)());
                     dispatch((0, exports.setThreekitEnv)(threekitEnv));
                     dispatch((0, translations_1.initTranslations)(launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.locale));
-                    dispatch((0, price_1.initPrice)());
-                    dispatch((0, price_1.updatePrice)());
+                    if (playerConfig.pricing) {
+                        dispatch((0, price_1.initPrice)());
+                        dispatch((0, price_1.updatePrice)());
+                    }
                     dispatch((0, wishlist_1.refreshWishlist)());
                     return [2];
             }
@@ -409,18 +424,20 @@ var launch = function (launchConfig) {
     }); };
 };
 exports.launch = launch;
-var unloadPlayer = function () { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
+var unloadPlayer = function (playerEl) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 dispatch((0, exports.setThreekitInitialized)(false));
                 dispatch((0, exports.setPlayerLoading)(true));
                 dispatch((0, attributes_1.setAttributes)([]));
-                dispatch((0, product_1.setName)(''));
+                dispatch((0, product_1.setName)());
                 dispatch((0, product_1.setMetadata)({}));
                 return [4, window.threekit.player.unload()];
             case 1:
                 _a.sent();
+                if (playerEl)
+                    playerEl.style.visibility = 'hidden';
                 return [2];
         }
     });

package/dist/types.d.ts

@@ -387,6 +387,7 @@ export interface ThreekitInitConfig {
         };
         help?: string;
     };
+    pricing?: boolean;
 }
 export interface IFrameworkConfig {
     productsCtx: __WebpackModuleApi.RequireContext;

package/dist/utils.d.ts

@@ -48,6 +48,8 @@ export declare const downloadSnapshot: (snapshot: string, filename: string) => P
 export declare const copyToClipboard: (data: string | Record<string, string | number | boolean>) => void;
 export declare const easeInOutCubic: (val: number) => number;
 export declare const metadataValueToObject: (data: string) => Record<string, string | number>;
+export declare const recordOptionsShowAnalytics: (attributes: Record<string, IThreekitDisplayAttribute>) => void;
+export declare const recordOptionInteractionAnalytics: (attribute: IThreekitDisplayAttribute, chosenAttribute: string, configuration?: IConfiguration) => void;
 export declare const hydrateAttribute: (data: [Record<string, IThreekitDisplayAttribute>, ITranslationsMap], optionSelectionHandler: (config: ISetConfiguration) => Promise<void>, configuration?: IConfiguration) => Record<string, IHydratedAttribute>;
 export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: ATTRIBUTE_TYPES) => string | number | boolean | File | IConfigurationColor | {
     assetId: RawAttributeValue;

package/dist/utils.js

@@ -44,10 +44,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadTrebleConfig = exports.runDebugger = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.hydrateAttribute = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.downloadSnapshot = 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.isIOS = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
+exports.loadTrebleConfig = exports.runDebugger = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.hydrateAttribute = exports.recordOptionInteractionAnalytics = exports.recordOptionsShowAnalytics = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.downloadSnapshot = 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.isIOS = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
 var constants_1 = require("./constants");
 var types_1 = require("./types");
+var useAnalyticsSession_1 = __importDefault(require("./hooks/useAnalyticsSession"));
+var rest_api_1 = require("@threekit/rest-api");
 var generateClassName = function (baseClass) {
     return function (component, customClassName, title) {
         var result = "".concat(baseClass, "-").concat(component);
@@ -303,10 +308,65 @@ var metadataValueToObject = function (data) {
     }, {});
 };
 exports.metadataValueToObject = metadataValueToObject;
+var recordOptionsShowAnalytics = function (attributes) {
+    var analyticsSession = (0, useAnalyticsSession_1.default)();
+    Object.values(attributes).forEach(function (attribute) {
+        if ((attribute.type === 'String' || attribute.type === 'Asset') &&
+            attribute.values.length) {
+            analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.optionsShow({
+                optionsSetId: attribute.id,
+                optionsSetName: attribute.name,
+                options: attribute.values,
+                optionsType: attribute.type === 'Asset' ? rest_api_1.OptionsType.Asset : rest_api_1.OptionsType.Value,
+            });
+        }
+    });
+};
+exports.recordOptionsShowAnalytics = recordOptionsShowAnalytics;
+var recordOptionInteractionAnalytics = function (attribute, chosenAttribute, configuration) {
+    var analyticsSession = (0, useAnalyticsSession_1.default)();
+    var castedConfiguration = configuration;
+    var id = attribute.type === 'Asset' ? attribute.value.assetId : attribute.id;
+    if (attribute.type === 'String') {
+        if (attribute.values.length > 0) {
+            analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.optionInteraction({
+                optionsSetId: id,
+                optionId: chosenAttribute,
+                interactionType: rest_api_1.OptionInteractionType.Select,
+                configuration: castedConfiguration,
+            });
+        }
+        else {
+            analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.personalizeText({
+                assetId: id,
+                configuration: castedConfiguration,
+                personalizeId: attribute.id,
+                personalizedText: attribute.value,
+            });
+        }
+    }
+    if (attribute.type === 'Asset' || attribute.type === 'Color') {
+        analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.optionInteraction({
+            optionsSetId: id,
+            optionId: chosenAttribute,
+            interactionType: rest_api_1.OptionInteractionType.Select,
+            configuration: castedConfiguration,
+        });
+    }
+    if (attribute.type === 'Number') {
+        analyticsSession === null || analyticsSession === void 0 ? void 0 : analyticsSession.parametricValue({
+            parametricId: id,
+            parametricValue: attribute.value,
+            configuration: castedConfiguration,
+        });
+    }
+};
+exports.recordOptionInteractionAnalytics = recordOptionInteractionAnalytics;
 var hydrateAttribute = function (data, optionSelectionHandler, configuration) {
     var _a, _b;
     var attributes = data[0], translations = data[1];
     var resolvedConfig = configuration !== null && configuration !== void 0 ? configuration : (_b = (_a = window.threekit) === null || _a === void 0 ? void 0 : _a.configurator) === null || _b === void 0 ? void 0 : _b.getResolvedConfiguration();
+    (0, exports.recordOptionsShowAnalytics)(attributes);
     return Object.values(attributes).reduce(function (output, attribute) {
         var _a;
         var _b;
@@ -321,7 +381,8 @@ var hydrateAttribute = function (data, optionSelectionHandler, configuration) {
                             label: (_a = translations[el.label]) !== null && _a !== void 0 ? _a : el.label,
                             handleSelect: function () {
                                 var _a;
-                                return optionSelectionHandler((_a = {},
+                                (0, exports.recordOptionInteractionAnalytics)(attribute, attribute.value, configuration);
+                                optionSelectionHandler((_a = {},
                                     _a[attribute.name] = el.value,
                                     _a));
                             },
@@ -337,7 +398,8 @@ var hydrateAttribute = function (data, optionSelectionHandler, configuration) {
                                 label: (_a = translations[el.name]) !== null && _a !== void 0 ? _a : el.name,
                                 handleSelect: function () {
                                     var _a;
-                                    return optionSelectionHandler((_a = {},
+                                    (0, exports.recordOptionInteractionAnalytics)(attribute, attribute.label, configuration);
+                                    optionSelectionHandler((_a = {},
                                         _a[attribute.name] = { assetId: el.assetId },
                                         _a));
                                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.96",
+  "version": "0.0.97-beta-01",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -82,6 +82,8 @@
     "typescript": ">=4.4.4"
   },
   "peerDependencies": {
+    "@threekit/analytics": "0.2.13",
+    "@threekit/rest-api": ">=0.2.2",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },