@thefittingroom/shop-ui 0.0.1 → 0.0.3

package/README.md

@@ -1,75 +1,49 @@
-# The Fitting Room - Shop SDK
+# The Fitting Room - Shop UI
+
+Modal UI for The Fitting Room. Provides UI hooks to integrate into the parent UI.
 
 ## Installation
 
 ```bash
-LANGUAGE_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/4200127/languages
-ASSETS_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/assets
-
-# build everytime changes are detected
-npm run dev:rollup
-# run a live server on localhost:3030 and disable cors
-npx live-server --host=localhost --port=3030 --cors
+npm i @thefittingroom/shop-ui
 ```
 
-The sdk gets transpiled from typescript a javascript ESM module located at `dist/esm/main(.min).js`
+or
 
-You can develop locally and reference it in your html like this:
-`import {InitFittingRoom, comps, InitLocale} from "http://localhost:3030/dist/cjs/main.js"`
-
-## Merges on main branch
+```bash
+yarn @thefittingroom/shop-ui
+```
 
-When a pull request gets merged into main, a development build gets published to S3.
-You can access the development builds by using a commit sha on main like this:
+## Usage
 
-`import {InitFittingRoom, comps, InitLocale} from "https://assets.dev.thefittingroom.xyz/shop-sdk/<COMMIT_SHA>/main.js"`
+```typescript
+import { initFittingRoom } from '@thefittingroom/shop-ui'
 
-## Overriding library functions
+// Your brandId: Number
+const shopId: number = 9001
 
-The sdk works out of the box with modals and does not require any overriding.
-All methods on the `tfr` object are overridable.
-View the [FittingRoom](https://github.com/TheFittingRoom/shop-sdk/blob/96d59558bdbec6cc1e899cac297838a4810de5d4/src/types/index.ts#L63) interface to see all of the overridable function signatures.
-The main implementation can be found in `init.ts`
+// UI Hooks
+const hooks: TfrHooks = {
+  onLoading: () => {},
+  onLoadingComplete: () => {},
+  onAvatarReady: (frames: string[]) => {},
+  onError: () => {},
+  onLogin: () => {},
+  onLogout: () => {},
+}
 
-```javascript
-// use the language code in the get url (ex. ?lang=en)
-InitLocale()
+// the div id to contain the modal elements
+const modalDivId: string = 'tfr-modal'
 
-// define a modal div in the html to attach the fitting room to
-let tfr = InitFittingRoom(1, 'tfr-tryon-modal')
+const tfr = initFittingRoom(shopId, modalDivId, hooks)
 
-// add an optional sign out button
-let signout = document.getElementById('signout')
-signout.addEventListener('click', () => {
-  // pass an empty sku to the onSignout since its not being used in a modal
-  // call the onSignout function wrapper to return a promise
-  // wait for the promise
-  // shows signed out modal by default
-  tfr
-    .onSignout('')()
-    .then(() => {
-      // do something after signing out of the fitting room
-    })
-})
+// on page nav to new product
+tfr.setSku(sku)
 
-// call TryOn with a colorway_size_asset sku
-document.getElementById('tryon').addEventListener('click', (e) => {
-  tfr.TryOn('5003-007-08')
-})
+// close the modal
+tfr.close()
 ```
 
-## Localization
-
-You can call `SetLocale` to change the language of the sdk without using url searchParams.
-
-```javascript
-SetLocale('en')
-  .then(() => {
-    // do something after setting the locale
-  })
-  .catch((err) => {
-    // handle error
-  })
-```
+Several low level methods are exposed via `tfr.shop`
 
-Warnings will be generated in the console for any missing locale definitions.
+See [@thefittingroom/sdk](https://github.com/TheFittingRoom/shop-sdk/tree/main)

package/dist/esm/index.js

@@ -1,9 +1,9 @@
 /*!
-* thefittingroom v0.0.1 (2023-07-18T18:27:14.496Z)
+* thefittingroom v0.0.3 (2023-07-18T23:19:14.875Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 /*!
-* thefittingroom v0.0.3 (2023-07-18T18:14:19.719Z)
+* thefittingroom v0.0.6 (2023-07-18T23:18:09.529Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 /**
@@ -16354,8 +16354,8 @@ const devKeys = {
         url: "https://tfr.dev.thefittingroom.xyz",
     },
     config: {
-        avatarTimeout: "120000",
-        vtoTimeout: "120000",
+        avatarTimeout: Number("120000"),
+        vtoTimeout: Number("120000"),
     },
 };
 const prodKeys = {
@@ -16371,8 +16371,8 @@ const prodKeys = {
         url: "https://tfr.p.thefittingroom.xyz",
     },
     config: {
-        avatarTimeout: "120000",
-        vtoTimeout: "120000",
+        avatarTimeout: Number("120000"),
+        vtoTimeout: Number("120000"),
     },
 };
 
@@ -22866,9 +22866,10 @@ const getFirebaseError = (e) => {
 };
 
 const asyncTry = (promise) => promise.then((data) => [null, data]).catch((error) => [error]);
+const asyncWait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 class Fetcher {
-    static endpoint() {
+    static get endpoint() {
         const api = Config.getInstance().api;
         return api.url;
     }
@@ -22998,10 +22999,18 @@ class TfrShop {
         const res = await Fetcher.Post(this.user, '/ios-app-link', { phone_number: sanitizedTel }, false);
         console.log(res);
     }
-    awaitColorwaySizeAssetFrames(colorwaySizeAssetSKU) {
+    async awaitColorwaySizeAssetFrames(colorwaySizeAssetSKU) {
         if (!this.isLoggedIn)
             throw new UserNotLoggedInError();
-        return this.getColorwaySizeAssetFrames(colorwaySizeAssetSKU);
+        console.log('polling');
+        try {
+            const frames = await this.getColorwaySizeAssetFrames(colorwaySizeAssetSKU);
+            return frames;
+        }
+        catch (_a) {
+            await asyncWait(1500);
+            return this.awaitColorwaySizeAssetFrames(colorwaySizeAssetSKU);
+        }
     }
     async requestThenGetColorwaySizeAssetFrames(colorwaySizeAssetSku) {
         var _a, _b;
@@ -23070,6 +23079,8 @@ class TfrShop {
         return frames;
     }
 }
+TfrShop.avatarTimeout = 120000;
+TfrShop.vtoTimeout = 120000;
 const initShop = (brandId, env = 'dev') => {
     if (env === 'dev' || env === 'development')
         console.warn('TfrShop is in development mode');
@@ -36151,7 +36162,7 @@ class FittingRoom {
         this.shopId = shopId;
         this.hooks = hooks;
         this.nav = new FittingRoomNav(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
-        this.tfrShop = initShop(Number(this.shopId), "dev");
+        this.tfrShop = initShop(Number(this.shopId), "prod");
     }
     get sku() {
         return this.nav.sku;
@@ -36160,6 +36171,7 @@ class FittingRoom {
         return this.tfrShop;
     }
     async onInit() {
+        console.log('INIT');
         const loggedIn = await this.tfrShop.onInit();
         if (loggedIn && this.hooks.onLogin)
             this.hooks.onLogin();
@@ -36195,7 +36207,8 @@ class FittingRoom {
                     this.nav.onNotCreated();
                     break;
                 case AvatarState.PENDING:
-                    this.nav.onLoading();
+                    if (this.hooks.onLoading)
+                        this.hooks.onLoading();
                     break;
                 case AvatarState.CREATED:
                     console.debug('avatar_state: created');
@@ -36231,7 +36244,6 @@ class FittingRoom {
         try {
             if (this.hooks.onLoading)
                 this.hooks.onLoading();
-            this.nav.onLoading();
             const frames = await this.tfrShop.tryOn(this.sku);
             this.nav.close();
             if (this.hooks.onAvatarReady)