@threekit-tools/treble 0.0.64 → 0.0.67

package/dist/Treble/Treble.d.ts

@@ -1,4 +1,4 @@
-import { IThreekitPlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../threekit';
+import { IThreekitPlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../types';
 import { IWishlist } from './Wishlist';
 import Snapshots from './Snapshots';
 import { ISaveConfiguration } from '../api/configurations';

package/dist/api/configurations.d.ts

@@ -1,5 +1,5 @@
 import { IConfigurationResponse } from '../http/configurations';
-import { IConfiguration, IMetadata } from '../threekit';
+import { IConfiguration, IMetadata } from '../types';
 export interface ISaveConfiguration {
     assetId: string;
     customerId?: string;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const PortalToArOverlay: React.FC;
+export default PortalToArOverlay;

package/dist/components/PortalToArOverlay/index.js

@@ -0,0 +1,67 @@
+"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 });
+exports.PortalToArOverlay = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
+var store_1 = require("../../store");
+var treble_1 = require("../../store/treble");
+var PortalToArOverlay = function (props) {
+    var children = props.children;
+    var isLoaded = (0, useThreekitInitStatus_1.default)();
+    var playerEl = (0, store_1.useThreekitSelector)(treble_1.getPlayerElementId);
+    var _a = (0, react_1.useState)(false), isAvailable = _a[0], setIsAvailable = _a[1];
+    (0, react_1.useEffect)(function () {
+        (function () {
+            if (!isLoaded || !playerEl)
+                return;
+            if (!isAvailable)
+                return;
+            var observer = new MutationObserver(function () {
+                if (document.getElementById('threekitArOverlay')) {
+                    setIsAvailable(true);
+                    observer.disconnect();
+                }
+            });
+            var playerHtmlEl = document.getElementById(playerEl);
+            if (!playerHtmlEl)
+                return;
+            observer.observe(playerHtmlEl, {
+                attributes: false,
+                childList: true,
+                characterData: false,
+                subtree: true,
+            });
+        })();
+    }, []);
+    if (!isLoaded || !playerEl)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    var htmlEl = document.getElementById('threekitArOverlay');
+    if (!htmlEl)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    return (0, react_dom_1.createPortal)(children, htmlEl);
+};
+exports.PortalToArOverlay = PortalToArOverlay;
+exports.default = exports.PortalToArOverlay;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProducts } from '../../threekit';
+import { IProducts } from '../../types';
 export interface ProductLayoutProps {
     products: Record<string, IProducts>;
 }

package/dist/components/Wishlist/WishlistItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IMetadata } from '../../threekit';
+import { IMetadata } from '../../types';
 interface WishlistItemProps {
     thumbnail?: string;
     metadata?: IMetadata;

package/dist/components/containers/formInputContainer.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { RawAttributeValue } from '../../hooks/useAttribute';
-import { IHydratedAttribute, IHydratedAttributeAssetValue } from '../../threekit';
+import { IHydratedAttribute, IHydratedAttributeAssetValue } from '../../types';
 export interface IOptionShared {
     name: string;
     value: string;
@@ -41,7 +41,7 @@ interface IHydrateAttributeConfig {
     sort?: string;
 }
 export declare const hydrateAttributeForComponent: (attribute: IHydratedAttribute, config: IHydrateAttributeConfig) => {
-    selected: string | number | boolean | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
+    selected: string | number | boolean | import("../../types").IConfigurationAsset | import("../../types").IConfigurationColor;
     options: {
         name: string;
         handleSelect: () => Promise<void>;

package/dist/components/containers/formInputContainer.js

@@ -104,7 +104,7 @@ function formComponentContainer(FormComponent) {
         var preppedProps = __assign({}, props);
         if (!hideAttributeTitle && !preppedProps.title)
             preppedProps.title = attributeData.label;
-        return (react_1.default.createElement(FormComponent, __assign({}, preppedProps, { title: props.title || attribute, value: selected, onClick: handleSetAttribute, onChange: handleSetAttribute, options: options, isPlayerLoading: isLoading })));
+        return (react_1.default.createElement(FormComponent, __assign({}, preppedProps, { value: selected, onClick: handleSetAttribute, onChange: handleSetAttribute, options: options, isPlayerLoading: isLoading })));
     };
 }
 exports.default = formComponentContainer;

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

@@ -1,4 +1,4 @@
-import { IHydratedAttribute, IConfigurationColor } from '../../threekit';
+import { IHydratedAttribute, IConfigurationColor } from '../../types';
 export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
 declare type UseAttributeError = [undefined, undefined];
 declare type UseAttributeSuccess = [

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

@@ -1,4 +1,4 @@
-import { ISetConfiguration, IHydratedAttribute } from '../../threekit';
+import { ISetConfiguration, IHydratedAttribute } from '../../types';
 declare type UseConfiguratorError = [undefined, undefined];
 declare type UseConfiguratorSuccess = [
     Record<string, IHydratedAttribute>,

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

@@ -1,3 +1,3 @@
-import { IMetadata } from '../../threekit';
+import { IMetadata } from '../../types';
 declare const useMetadata: () => IMetadata | undefined;
 export default useMetadata;

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

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

package/dist/hooks/useNestedConfigurator/index.js

@@ -47,10 +47,10 @@ var useNestedConfigurator = function (address) {
     var playerLoading = (0, store_1.useThreekitSelector)(treble_1.isPlayerLoading);
     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)({});
     var configurator = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
         (function () {
-            var _a;
             if (!hasInitialized)
                 return;
             if (playerLoading)
@@ -59,12 +59,13 @@ var useNestedConfigurator = function (address) {
                 window.threekit.treble.getNestedConfigurator(address);
             if (!configurator.current)
                 return;
-            var updatedAttrs = (_a = configurator.current) === null || _a === void 0 ? void 0 : _a.getDisplayAttributes();
+            var updatedAttrs = configurator.current.getDisplayAttributes();
             setAttributes(updatedAttrs);
+            metadataRef.current = configurator.current.getMetadata();
         })();
     }, [hasInitialized, address, playerLoading]);
     if (!hasInitialized || !configurator.current || !attributes)
-        return [undefined, undefined];
+        return [undefined, undefined, undefined];
     var handleSelect = function (config) { return __awaiter(void 0, void 0, void 0, function () {
         var updatedAttrs;
         var _a, _b;
@@ -88,6 +89,6 @@ 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];
+    return [preppedAttributes, handleSelect, metadataRef.current];
 };
 exports.default = useNestedConfigurator;

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

@@ -1,4 +1,4 @@
-import { ICoordinates } from '../../threekit';
+import { ICoordinates } from '../../types';
 interface NodeConfig {
     nodeId: string;
     paddingStart: number;

package/dist/http/configurations.d.ts

@@ -1,5 +1,5 @@
 import { IMultiPageResponse } from './request';
-import { IConfiguration } from '../threekit';
+import { IConfiguration } from '../types';
 export interface IConfigurationResponse {
     createdAt: string;
     customerId: null | string;

package/dist/index.d.ts

@@ -33,6 +33,7 @@ import Modal from './components/Modal';
 import Drawer from './components/Drawer';
 import Accordion from './components/Accordion';
 import Tabs from './components/Tabs';
+import PortalToArOverlay from './components/PortalToArOverlay';
 import PortalToElement from './components/PortalToElement';
 import AwaitThreekitLoad from './components/AwaitThreekitLoad';
 import FlatForm from './components/FlatForm';
@@ -44,4 +45,4 @@ import icons from './icons';
 export * from './icons';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
+export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, 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.ProductLayout = exports.TrebleApp = 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.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = 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.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = 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;
@@ -92,6 +92,8 @@ exports.Accordion = Accordion_1.default;
 var Tabs_1 = __importDefault(require("./components/Tabs"));
 exports.Tabs = Tabs_1.default;
 //  Wrappers
+var PortalToArOverlay_1 = __importDefault(require("./components/PortalToArOverlay"));
+exports.PortalToArOverlay = PortalToArOverlay_1.default;
 var PortalToElement_1 = __importDefault(require("./components/PortalToElement"));
 exports.PortalToElement = PortalToElement_1.default;
 var AwaitThreekitLoad_1 = __importDefault(require("./components/AwaitThreekitLoad"));

package/dist/store/attributes.d.ts

@@ -1,5 +1,5 @@
 import { RootState, ThreekitDispatch } from './index';
-import { ISetConfiguration, IThreekitDisplayAttribute } from '../threekit';
+import { ISetConfiguration, IThreekitDisplayAttribute } from '../types';
 import { ITranslationMap } from '../api/products';
 /*****************************************************
  * Types and Interfaces

package/dist/store/product.d.ts

@@ -1,5 +1,5 @@
 import { RootState, ThreekitDispatch } from './index';
-import { IMetadata, IConfiguration, IProduct } from '../threekit';
+import { IMetadata, IConfiguration, IProduct } from '../types';
 import { IConnectionConfig } from '../connection';
 import { IReloadConfig } from './treble';
 /*****************************************************

package/dist/store/product.js

@@ -236,7 +236,8 @@ var loadNewProduct = function (config) {
                     }
                     if (shouldCacheProduct)
                         dispatch((0, exports.cacheActiveProduct)({ label: label, thumbnail: thumbnail }));
-                    dispatch((0, exports.setProductId)(undefined));
+                    if (config)
+                        dispatch((0, exports.setProductId)(undefined));
                     return [4 /*yield*/, dispatch((0, treble_1.reloadPlayer)(config))];
                 case 1:
                     _a.sent();

package/dist/store/treble.d.ts

@@ -1,5 +1,5 @@
 import { RootState, ThreekitDispatch } from './index';
-import { IProject, IPlayerConfig, IThreekitDisplayAttribute, ISetConfiguration, IConfiguration } from '../threekit';
+import { IProject, IPlayerConfig, IThreekitDisplayAttribute, ISetConfiguration, IConfiguration } from '../types';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/

package/dist/store/treble.js

@@ -350,8 +350,8 @@ var unloadPlayer = function () { return function (dispatch) { return __awaiter(v
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                dispatch((0, exports.setThreekitInitialized)(true));
-                dispatch((0, exports.setPlayerLoading)(false));
+                dispatch((0, exports.setThreekitInitialized)(false));
+                dispatch((0, exports.setPlayerLoading)(true));
                 dispatch((0, attributes_1.setAttributes)([]));
                 dispatch((0, product_1.setName)(''));
                 dispatch((0, product_1.setMetadata)({}));
@@ -398,18 +398,21 @@ var reloadPlayer = function (config) {
                     trebleConfig = (0, utils_1.loadTrebleConfig)();
                     playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, trebleConfig.player);
                     el = document.getElementById(state.treble.playerElId);
-                    if (state.treble.isThreekitInitialized)
-                        dispatch((0, exports.unloadPlayer)());
-                    return [4 /*yield*/, dispatch((0, exports.initPlayer)({
-                            el: el,
-                            orgId: connectionObj.orgId,
-                            authToken: connectionObj.authToken,
-                            stageId: stageId,
-                            assetId: assetId,
-                            playerConfig: playerConfig,
-                            initialConfiguration: initialConfiguration,
-                        }))];
+                    if (!state.treble.isThreekitInitialized) return [3 /*break*/, 6];
+                    return [4 /*yield*/, dispatch((0, exports.unloadPlayer)())];
                 case 5:
+                    _a.sent();
+                    _a.label = 6;
+                case 6: return [4 /*yield*/, dispatch((0, exports.initPlayer)({
+                        el: el,
+                        orgId: connectionObj.orgId,
+                        authToken: connectionObj.authToken,
+                        stageId: stageId,
+                        assetId: assetId,
+                        playerConfig: playerConfig,
+                        initialConfiguration: initialConfiguration,
+                    }))];
+                case 7:
                     _a.sent();
                     dispatch((0, price_1.updatePrice)());
                     dispatch((0, product_1.initProduct)());

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute, ISetConfiguration, IHydratedAttribute } from './threekit';
-import { ITrebleConfig, IAttributeTypes } from './threekit';
+import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute, ISetConfiguration, IHydratedAttribute } from './types';
+import { ITrebleConfig, IAttributeTypes } from './types';
 import { RawAttributeValue } from './hooks/useAttribute';
 import { ITranslationMap } from './api/products';
 interface ICameraPosition {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.64",
+  "version": "0.0.67",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [