@thefittingroom/shop-ui 5.0.19 → 5.0.20

package/dist/index.js

@@ -41030,18 +41030,6 @@ class FirestoreManager {
     });
     return unsubscribe;
   }
-  // listenToSubDoc subscribes to <parent>/<parentID>/<sub>/<subID>. Used for
-  // VTO compositions which live at users/{uid}/vto_compositions/{token}.
-  listenToSubDoc(parent, parentID, sub, subID, callback) {
-    const docRef = doc(this.firestore, parent, parentID, sub, subID);
-    return onSnapshot(docRef, (snap) => {
-      if (snap.exists()) {
-        callback(snap.data());
-      } else {
-        callback(null);
-      }
-    });
-  }
   async queryDocs(collectionName, constraints) {
     const q2 = query(this.collection(collectionName), ...constraints);
     return getDocs(q2);
@@ -41239,7 +41227,8 @@ async function execApiRequest(params) {
     useToken,
     method,
     endpoint,
-    body
+    body,
+    timeoutMs
   } = params;
   const url = `${baseUrl}${endpoint}`;
   if (useCache && responseCache[url]) {
@@ -41261,9 +41250,28 @@ async function execApiRequest(params) {
   if (body) {
     options.body = JSON.stringify(body);
   }
-  const response = await fetch(url, options);
+  let timeoutHandle;
+  if (timeoutMs && timeoutMs > 0) {
+    const controller = new AbortController();
+    options.signal = controller.signal;
+    timeoutHandle = setTimeout(() => controller.abort(), timeoutMs);
+  }
+  let response;
+  try {
+    response = await fetch(url, options);
+  } finally {
+    if (timeoutHandle) clearTimeout(timeoutHandle);
+  }
   if (!response.ok) {
-    throw new Error(`API request failed with status ${response.status}`);
+    let detail = "";
+    try {
+      const errBody = await response.json();
+      if (errBody && typeof errBody.error === "string") {
+        detail = errBody.error;
+      }
+    } catch {
+    }
+    throw new Error(detail || `API request failed with status ${response.status}`);
   }
   let data;
   if (response.status === 204) {
@@ -41302,15 +41310,33 @@ async function getStyleCategoryGroups() {
     endpoint: "/v1/style-category-groups"
   });
 }
-async function requestVto(items) {
-  return await execApiRequest({
+const inFlightVtoRequests = /* @__PURE__ */ new Map();
+function canonicalVtoKey(items) {
+  const normalized = items.map((i) => ({
+    csa: i.colorway_size_asset_id,
+    untucked: !!i.untucked
+  })).sort((a, b) => a.csa - b.csa || Number(a.untucked) - Number(b.untucked));
+  return JSON.stringify(normalized);
+}
+function requestVto(items) {
+  const key = canonicalVtoKey(items);
+  const existing = inFlightVtoRequests.get(key);
+  if (existing) {
+    return existing;
+  }
+  const promise = execApiRequest({
     useToken: true,
     method: "POST",
     endpoint: "/v1/vto-compositions",
     body: {
       items
-    }
+    },
+    timeoutMs: getStaticData().config.api.vtoTimeoutMs
+  }).finally(() => {
+    inFlightVtoRequests.delete(key);
   });
+  inFlightVtoRequests.set(key, promise);
+  return promise;
 }
 const recordCache = {};
 async function getStyleByExternalId(brandId, externalId) {
@@ -42969,67 +42995,44 @@ function TryOnView({
     ] }) })
   ] });
 }
-const logger$a = getLogger("overlays/fitting-room/use-vto-subscriptions");
+const logger$a = getLogger("overlays/fitting-room/use-vto-requests");
 const NON_PRIORITY_REQUEST_DELAY_MS = 500;
 function outfitKey(items) {
   return items.map((i) => `${i.colorway_size_asset_id}:${i.untucked ? 1 : 0}`).sort().join("|");
 }
-function useVtoSubscriptions() {
-  const compositionTokensRef = reactExports.useRef(/* @__PURE__ */ new Map());
-  const subscriptionsRef = reactExports.useRef(/* @__PURE__ */ new Map());
-  const [vtoDocsByToken, setVtoDocsByToken] = reactExports.useState({});
+function useVtoRequests() {
+  const [framesByKey, setFramesByKey] = reactExports.useState({});
+  const requestedKeysRef = reactExports.useRef(/* @__PURE__ */ new Set());
   const lastPriorityTimeRef = reactExports.useRef(null);
   const [lastError, setLastError] = reactExports.useState(null);
   const clearError = reactExports.useCallback(() => setLastError(null), []);
-  const subscribe = reactExports.useCallback((token2, key) => {
-    if (subscriptionsRef.current.has(token2)) return;
-    const uid = getAuthManager().getAuthUser()?.uid;
-    if (!uid) {
-      logger$a.logWarn("subscribe skipped: no uid", {
-        token: token2,
-        key
-      });
-      return;
-    }
-    const unsub = getFirestoreManager().listenToSubDoc("users", uid, "vto_compositions", token2, (data) => {
-      if (data?.frames?.length) {
-        logger$a.logDebug("VTO frames ready", {
-          key,
-          token: token2,
-          count: data.frames.length
-        });
-      }
-      if (data?.error) {
-        setLastError(new Error(data.error));
-      }
-      setVtoDocsByToken((prev2) => ({
-        ...prev2,
-        [token2]: data ?? {}
-      }));
-    });
-    subscriptionsRef.current.set(token2, unsub);
-  }, []);
   const request = reactExports.useCallback((items, priority) => {
     if (items.length === 0) return;
     const key = outfitKey(items);
-    if (compositionTokensRef.current.has(key)) return;
+    if (requestedKeysRef.current.has(key)) return;
     const exec = () => {
-      compositionTokensRef.current.set(key, "");
+      requestedKeysRef.current.add(key);
       logger$a.logDebug("Requesting VTO composition", {
         key,
         items,
         priority
       });
       requestVto(items).then((resp) => {
-        compositionTokensRef.current.set(key, resp.token);
-        subscribe(resp.token, key);
+        logger$a.logDebug("VTO frames ready", {
+          key,
+          count: resp.frames.length
+        });
+        setFramesByKey((prev2) => ({
+          ...prev2,
+          [key]: resp.frames
+        }));
       }).catch((error) => {
         logger$a.logError("VTO request failed", {
           error,
           items,
           key
         });
-        compositionTokensRef.current.delete(key);
+        requestedKeysRef.current.delete(key);
         setLastError(error instanceof Error ? error : new Error(String(error)));
       });
     };
@@ -43050,31 +43053,15 @@ function useVtoSubscriptions() {
     } else {
       exec();
     }
-  }, [subscribe]);
-  reactExports.useEffect(() => {
-    return () => {
-      subscriptionsRef.current.forEach((unsub) => {
-        try {
-          unsub();
-        } catch (e) {
-          logger$a.logError("Error unsubscribing", {
-            error: e
-          });
-        }
-      });
-      subscriptionsRef.current.clear();
-    };
   }, []);
   const framesForOutfit = reactExports.useCallback((items) => {
     if (items.length === 0) return null;
     const key = outfitKey(items);
-    const token2 = compositionTokensRef.current.get(key);
-    if (!token2) return null;
-    const doc2 = vtoDocsByToken[token2];
-    if (!doc2?.frames?.length) return null;
+    const frames = framesByKey[key];
+    if (!frames || frames.length === 0) return null;
     const baseUrl2 = getStaticData().config.frames.baseUrl;
-    return doc2.frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
-  }, [vtoDocsByToken]);
+    return frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
+  }, [framesByKey]);
   return {
     request,
     framesForOutfit,
@@ -43131,7 +43118,7 @@ function FittingRoomOverlay() {
     framesForOutfit,
     lastError: vtoError,
     clearError: clearVtoError
-  } = useVtoSubscriptions();
+  } = useVtoRequests();
   reactExports.useEffect(() => {
     const savedScrollY = window.scrollY;
     if (savedScrollY > 0) window.scrollTo(0, 0);
@@ -44155,9 +44142,8 @@ function VtoSingleOverlay() {
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
   const [modalStyle, setModalStyle] = reactExports.useState({});
-  const compositionTokensRef = reactExports.useRef(/* @__PURE__ */ new Map());
-  const [vtoDocsByToken, setVtoDocsByToken] = reactExports.useState({});
-  const subscriptionsRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const [framesByKey, setFramesByKey] = reactExports.useState({});
+  const requestedKeysRef = reactExports.useRef(/* @__PURE__ */ new Set());
   const lastPriorityVtoRequestTimeRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (!userIsLoggedIn) {
@@ -44332,7 +44318,7 @@ function VtoSingleOverlay() {
   const requestVto$1 = reactExports.useCallback((sizeColorRecord, priority) => {
     const csaId = sizeColorRecord.colorwaySizeAssetId;
     const key = compositionKey(csaId);
-    if (compositionTokensRef.current.has(key)) {
+    if (requestedKeysRef.current.has(key)) {
       return;
     }
     function executeRequest() {
@@ -44341,19 +44327,23 @@ function VtoSingleOverlay() {
         priority,
         sizeColorRecord
       });
-      compositionTokensRef.current.set(key, "");
+      requestedKeysRef.current.add(key);
       requestVto([{
         colorway_size_asset_id: csaId,
         untucked: false
       }]).then((resp) => {
-        compositionTokensRef.current.set(key, resp.token);
-        subscribeToCompositionToken(resp.token, sizeColorRecord.sku);
+        logger$6.timerEnd(`requestVto_${sizeColorRecord.sku}`);
+        logger$6.logTimer(`requestVto_${sizeColorRecord.sku}`, `{{ts}} - VTO data is loaded for sku: ${sizeColorRecord.sku}`);
+        setFramesByKey((prev2) => ({
+          ...prev2,
+          [key]: resp.frames
+        }));
       }).catch((error) => {
         logger$6.logError(`Error requesting VTO for sku: ${sizeColorRecord.sku}`, {
           error,
           sizeColorRecord
         });
-        compositionTokensRef.current.delete(key);
+        requestedKeysRef.current.delete(key);
       });
     }
     {
@@ -44377,45 +44367,6 @@ function VtoSingleOverlay() {
     }
     executeRequest();
   }, []);
-  const subscribeToCompositionToken = reactExports.useCallback((token2, sku) => {
-    if (subscriptionsRef.current.has(token2)) {
-      return;
-    }
-    const authManager2 = getAuthManager();
-    const uid = authManager2.getAuthUser()?.uid;
-    if (!uid) {
-      logger$6.logWarn(`subscribe to vto composition skipped: no uid`, {
-        token: token2,
-        sku
-      });
-      return;
-    }
-    const unsub = getFirestoreManager().listenToSubDoc("users", uid, "vto_compositions", token2, (data) => {
-      if (data && data.frames && data.frames.length > 0) {
-        logger$6.timerEnd(`requestVto_${sku}`);
-        logger$6.logTimer(`requestVto_${sku}`, `{{ts}} - VTO data is loaded for sku: ${sku}`);
-      }
-      setVtoDocsByToken((prev2) => ({
-        ...prev2,
-        [token2]: data ?? {}
-      }));
-    });
-    subscriptionsRef.current.set(token2, unsub);
-  }, []);
-  reactExports.useEffect(() => {
-    return () => {
-      subscriptionsRef.current.forEach((unsub) => {
-        try {
-          unsub();
-        } catch (e) {
-          logger$6.logError("Error unsubscribing from vto composition", {
-            error: e
-          });
-        }
-      });
-      subscriptionsRef.current.clear();
-    };
-  }, []);
   reactExports.useEffect(() => {
     if (selectedColorSizeRecord) {
       requestVto$1(selectedColorSizeRecord, true);
@@ -44435,32 +44386,24 @@ function VtoSingleOverlay() {
       }
     }
   }, [requestVto$1, vtoProductData, selectedColorLabel]);
-  const vtoData = reactExports.useMemo(() => {
+  const frameUrls = reactExports.useMemo(() => {
     if (!selectedColorSizeRecord) {
       return null;
     }
     const key = compositionKey(selectedColorSizeRecord.colorwaySizeAssetId);
-    const token2 = compositionTokensRef.current.get(key);
-    if (!token2) {
-      return null;
-    }
-    const doc2 = vtoDocsByToken[token2];
-    if (!doc2 || !doc2.frames || doc2.frames.length === 0) {
+    const frames = framesByKey[key];
+    if (!frames || frames.length === 0) {
       return null;
     }
     logger$6.logDebug(`{{ts}} - Displaying VTO for sku: ${selectedColorSizeRecord.sku}`);
-    return doc2;
-  }, [selectedColorSizeRecord, vtoDocsByToken]);
-  const frameUrls = reactExports.useMemo(() => {
-    if (!vtoData?.frames) return null;
     const baseUrl2 = getStaticData().config.frames.baseUrl;
-    const rewritten = vtoData.frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
+    const rewritten = frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
     rewritten.forEach((url) => {
       const img = new Image();
       img.src = url;
     });
     return rewritten;
-  }, [vtoData]);
+  }, [selectedColorSizeRecord, framesByKey]);
   const handleSignOutClick = reactExports.useCallback(() => {
     closeOverlay();
     const authManager2 = getAuthManager();
@@ -45802,9 +45745,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.19"}`,
-    commitHash: `${"46d41c2"}`,
-    date: `${"2026-05-15T19:28:45.079Z"}`
+    version: `${"5.0.20"}`,
+    commitHash: `${"ec50778"}`,
+    date: `${"2026-05-16T14:14:47.264Z"}`
   }
 };
 const CONFIGS = {
@@ -45822,7 +45765,8 @@ const CONFIGS = {
       measurementId: "G-B7GDQ1Y9LL"
     },
     api: {
-      baseUrl: "https://tfr.dev.thefittingroom.xyz"
+      baseUrl: "https://tfr.dev.thefittingroom.xyz",
+      vtoTimeoutMs: 12e4
     },
     asset: {
       baseUrl: "https://assets.dev.thefittingroom.xyz/shop-sdk/assets/v5"
@@ -45849,7 +45793,8 @@ const CONFIGS = {
       measurementId: "G-XH9VV5N6EW"
     },
     api: {
-      baseUrl: "https://tfr.p.thefittingroom.xyz"
+      baseUrl: "https://tfr.p.thefittingroom.xyz",
+      vtoTimeoutMs: 12e4
     },
     asset: {
       baseUrl: "https://assets.p.thefittingroom.xyz/shop-sdk/assets/v5"
@@ -45876,7 +45821,8 @@ const CONFIGS = {
       measurementId: "G-B7GDQ1Y9LL"
     },
     api: {
-      baseUrl: "https://minecraftbadapple.com/api"
+      baseUrl: "https://minecraftbadapple.com/api",
+      vtoTimeoutMs: 12e4
     },
     asset: {
       baseUrl: "http://minecraftbadapple.com/s3/tfr-assets-dev/shop-sdk/assets/v5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "5.0.19",
+  "version": "5.0.20",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",