@thefittingroom/shop-ui 0.0.2 → 0.0.4

package/README.md

@@ -1,75 +1,50 @@
-# 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')
+// initFittingRoom is an async function and must be awaited
+const tfr = await 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.4 (2023-07-19T15:30:35.007Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 /*!
-* thefittingroom v0.0.3 (2023-07-18T18:14:19.719Z)
+* thefittingroom v0.0.7 (2023-07-19T15:29:31.094Z)
 * 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"),
     },
 };
 
@@ -22813,6 +22813,20 @@ class FirebaseUser {
         const userProfile = await Ol(Aa(this.firestore, 'users', this.id));
         return userProfile.data();
     }
+    watchUserProfileForChanges(predicate, timeout) {
+        let unsub;
+        const q = sl(Ta(this.firestore, 'users'), rl(Eh(), '==', this.id));
+        const cancel = setTimeout(() => unsub(), timeout);
+        return new Promise((resolve) => {
+            unsub = jl(q, (snapshot) => {
+                if (!predicate(snapshot))
+                    return;
+                clearTimeout(cancel);
+                unsub();
+                resolve(snapshot.docs[0].data());
+            });
+        });
+    }
     async login(username, password) {
         if (this.auth.currentUser)
             await this.auth.signOut();
@@ -22833,9 +22847,15 @@ class FirebaseUser {
 
 class Firebase {
     constructor() {
-        this.promisefyOnSnapshot = (q) => {
+        this.promisefyOnSnapshot = (q, unsubscribeWhenData) => {
             let unsub;
-            const promise = new Promise((resolve) => (unsub = jl(q, (snapshot) => resolve(snapshot))));
+            const promise = new Promise((resolve) => {
+                unsub = jl(q, (snapshot) => {
+                    resolve(snapshot);
+                    if (unsubscribeWhenData)
+                        unsub();
+                });
+            });
             return { promise, unsubscribe: () => unsub() };
         };
         const firebaseKeys = Config.getInstance().firebase;
@@ -22846,9 +22866,9 @@ class Firebase {
     onInit() {
         return this.user.onInit();
     }
-    query(collectionName, constraint) {
+    query(collectionName, constraint, unsubscribeWhenData = true) {
         const q = sl(Ta(this.firestore, collectionName), constraint);
-        return this.promisefyOnSnapshot(q);
+        return this.promisefyOnSnapshot(q, unsubscribeWhenData);
     }
     getDocs(collectionName, constraints) {
         const q = sl(Ta(this.firestore, collectionName), ...constraints);
@@ -22868,7 +22888,7 @@ const getFirebaseError = (e) => {
 const asyncTry = (promise) => promise.then((data) => [null, data]).catch((error) => [error]);
 
 class Fetcher {
-    static endpoint() {
+    static get endpoint() {
         const api = Config.getInstance().api;
         return api.url;
     }
@@ -22998,10 +23018,15 @@ class TfrShop {
         const res = await Fetcher.Post(this.user, '/ios-app-link', { phone_number: sanitizedTel }, false);
         console.log(res);
     }
-    awaitColorwaySizeAssetFrames(colorwaySizeAssetSKU) {
+    async awaitColorwaySizeAssetFrames(colorwaySizeAssetSKU) {
+        var _a, _b, _c, _d;
         if (!this.isLoggedIn)
             throw new UserNotLoggedInError();
-        return this.getColorwaySizeAssetFrames(colorwaySizeAssetSKU);
+        const predicate = (data) => { var _a, _b, _c; return Boolean((_c = (_b = (_a = data.docs[0].data()) === null || _a === void 0 ? void 0 : _a.vto) === null || _b === void 0 ? void 0 : _b[this.brandId]) === null || _c === void 0 ? void 0 : _c[colorwaySizeAssetSKU]); };
+        const userProfile = (await this.user.watchUserProfileForChanges(predicate, TfrShop.vtoTimeout));
+        if (!((_d = (_c = (_b = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.vto) === null || _a === void 0 ? void 0 : _a[this.brandId]) === null || _b === void 0 ? void 0 : _b[colorwaySizeAssetSKU]) === null || _c === void 0 ? void 0 : _c.frames) === null || _d === void 0 ? void 0 : _d.length))
+            throw new NoFramesFoundError();
+        return userProfile.vto[this.brandId][colorwaySizeAssetSKU].frames;
     }
     async requestThenGetColorwaySizeAssetFrames(colorwaySizeAssetSku) {
         var _a, _b;
@@ -23070,6 +23095,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 +36178,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;
@@ -36195,7 +36222,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 +36259,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)
@@ -36252,7 +36279,11 @@ class FittingRoom {
     }
 }
 
-const initFittingRoom = (shopId, modalDivId, hooks) => new FittingRoom(shopId, modalDivId, hooks);
+const initFittingRoom = async (shopId, modalDivId, hooks) => {
+    const tfr = new FittingRoom(shopId, modalDivId, hooks);
+    await tfr.onInit();
+    return tfr;
+};
 
 export { VTO_TIMEOUT_MS, initFittingRoom };
 //# sourceMappingURL=index.js.map