@thefittingroom/shop-ui 5.0.7 → 5.0.9

package/dist/index.js

@@ -22677,7 +22677,7 @@ function isVersionServiceProvider(provider) {
 }
 const name$q = "@firebase/app";
 const version$1$1 = "0.14.5";
-const logger$5 = new Logger$1("@firebase/app");
+const logger$6 = new Logger$1("@firebase/app");
 const name$p = "@firebase/app-compat";
 const name$o = "@firebase/analytics-compat";
 const name$n = "@firebase/analytics";
@@ -22744,13 +22744,13 @@ function _addComponent(app, component) {
   try {
     app.container.addComponent(component);
   } catch (e) {
-    logger$5.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
+    logger$6.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
   }
 }
 function _registerComponent(component) {
   const componentName = component.name;
   if (_components.has(componentName)) {
-    logger$5.debug(`There were multiple attempts to register component ${componentName}.`);
+    logger$6.debug(`There were multiple attempts to register component ${componentName}.`);
     return false;
   }
   _components.set(componentName, component);
@@ -22959,7 +22959,7 @@ function registerVersion(libraryKeyOrName, version2, variant) {
     if (versionMismatch) {
       warning.push(`version name "${version2}" contains illegal characters (whitespace or "/")`);
     }
-    logger$5.warn(warning.join(" "));
+    logger$6.warn(warning.join(" "));
     return;
   }
   _registerComponent(new Component(
@@ -23003,12 +23003,12 @@ async function readHeartbeatsFromIndexedDB(app) {
     return result;
   } catch (e) {
     if (e instanceof FirebaseError) {
-      logger$5.warn(e.message);
+      logger$6.warn(e.message);
     } else {
       const idbGetError = ERROR_FACTORY.create("idb-get", {
         originalErrorMessage: e?.message
       });
-      logger$5.warn(idbGetError.message);
+      logger$6.warn(idbGetError.message);
     }
   }
 }
@@ -23021,12 +23021,12 @@ async function writeHeartbeatsToIndexedDB(app, heartbeatObject) {
     await tx.done;
   } catch (e) {
     if (e instanceof FirebaseError) {
-      logger$5.warn(e.message);
+      logger$6.warn(e.message);
     } else {
       const idbGetError = ERROR_FACTORY.create("idb-set", {
         originalErrorMessage: e?.message
       });
-      logger$5.warn(idbGetError.message);
+      logger$6.warn(idbGetError.message);
     }
   }
 }
@@ -23075,7 +23075,7 @@ class HeartbeatServiceImpl {
       }
       return this._storage.overwrite(this._heartbeatsCache);
     } catch (e) {
-      logger$5.warn(e);
+      logger$6.warn(e);
     }
   }
   /**
@@ -23106,7 +23106,7 @@ class HeartbeatServiceImpl {
       }
       return headerString;
     } catch (e) {
-      logger$5.warn(e);
+      logger$6.warn(e);
       return "";
     }
   }
@@ -40670,103 +40670,144 @@ registerAuth(
   "Browser"
   /* ClientPlatform.BROWSER */
 );
-let sourceRegExp = false;
+let debugSource = false;
 function _init$4(debug) {
   if (debug) {
     let escapeRegExp = function(string) {
-      return string.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".");
+      return "^" + string.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".") + "$";
     };
     if (debug === true) {
-      sourceRegExp = /.*/;
+      debugSource = true;
     } else if (debug instanceof RegExp) {
-      sourceRegExp = debug;
+      debugSource = debug;
     } else if (Array.isArray(debug)) {
-      sourceRegExp = new RegExp(debug.map((s) => escapeRegExp(s)).join("|"));
+      debugSource = new RegExp(debug.map((s) => escapeRegExp(s)).join("|"));
     } else if (typeof debug === "string") {
-      sourceRegExp = new RegExp(escapeRegExp(debug));
+      debugSource = new RegExp(escapeRegExp(debug));
     }
   }
 }
 function isDebugSource(source) {
-  if (!sourceRegExp) {
-    return false;
+  if (typeof debugSource === "boolean") {
+    return debugSource;
   }
-  return sourceRegExp.test(source);
+  return debugSource.test(source);
 }
 function log(entry) {
   const {
     source,
     level,
     message,
-    data
+    data,
+    duration
   } = entry;
-  const logMessage = `[TFR ${source}][${level.toUpperCase()}] ${message}`;
+  if (level === "debug" && !isDebugSource(source)) {
+    return;
+  }
+  let finalMessage = message;
+  if (finalMessage.includes("{{")) {
+    finalMessage = finalMessage.replace(/{{ts}}/g, (/* @__PURE__ */ new Date()).toISOString());
+  }
+  finalMessage = `[TFR ${source}][${level.toUpperCase()}] ${finalMessage}`;
+  const logData = [finalMessage];
+  if (duration !== void 0) {
+    logData.push(`${duration.toFixed(2)} ms`);
+  }
+  if (data) {
+    logData.push(data);
+  }
   switch (level) {
     case "error":
-      console.error(logMessage, ...data);
+      console.error(...logData);
       break;
     case "warn":
-      console.warn(logMessage, ...data);
+      console.warn(...logData);
       break;
     case "info":
-      console.info(logMessage, ...data);
+      console.info(...logData);
       break;
     case "debug":
-      if (isDebugSource(source)) {
-        console.debug(logMessage, ...data);
-      }
+      console.debug(...logData);
       break;
     default:
-      console.log(logMessage, ...data);
+      console.log(...logData);
   }
 }
-function logError(source, message, ...data) {
-  log({
-    source,
-    level: "error",
-    message,
-    data
-  });
-}
-function logWarn(source, message, ...data) {
-  log({
-    source,
-    level: "warn",
-    message,
-    data
-  });
-}
-function logInfo(source, message, ...data) {
-  log({
-    source,
-    level: "info",
-    message,
-    data
-  });
-}
-function logDebug(source, message, ...data) {
-  log({
-    source,
-    level: "debug",
-    message,
-    data
-  });
-}
 class Logger3 {
   constructor(source) {
+    this.timers = {};
     this.source = source;
   }
-  logError(message, ...data) {
-    logError(this.source, message, ...data);
+  logError(message, data = null) {
+    log({
+      source: this.source,
+      level: "error",
+      message,
+      data
+    });
+  }
+  logWarn(message, data = null) {
+    log({
+      source: this.source,
+      level: "warn",
+      message,
+      data
+    });
+  }
+  logInfo(message, data = null) {
+    log({
+      source: this.source,
+      level: "info",
+      message,
+      data
+    });
+  }
+  logDebug(message, data = null) {
+    log({
+      source: this.source,
+      level: "debug",
+      message,
+      data
+    });
+  }
+  logTimer(timerName, message, data = null) {
+    const duration = this.getTimerDuration(timerName);
+    log({
+      source: this.source,
+      level: "debug",
+      message,
+      data,
+      duration: duration ?? void 0
+    });
+  }
+  clearTimers() {
+    this.timers = {};
+  }
+  timerStart(name2) {
+    this.timers[name2] = [performance.now(), null];
   }
-  logWarn(message, ...data) {
-    logWarn(this.source, message, ...data);
+  timerEnd(name2) {
+    const timer = this.timers[name2];
+    if (timer && timer[1] === null) {
+      timer[1] = performance.now();
+    }
   }
-  logInfo(message, ...data) {
-    logInfo(this.source, message, ...data);
+  getTimers() {
+    const result = {};
+    for (const name2 in this.timers) {
+      result[name2] = this.getTimerDuration(name2);
+    }
+    return result;
   }
-  logDebug(message, ...data) {
-    logDebug(this.source, message, ...data);
+  getTimerDuration(name2) {
+    const timer = this.timers[name2];
+    if (timer && timer[1] !== null) {
+      return timer[1] - timer[0];
+    }
+    return null;
+  }
+  isDebugEnabled() {
+    return isDebugSource(this.source);
   }
 }
 function getLogger(source) {
@@ -40776,7 +40817,7 @@ const firebaseDateToDayjs = (date) => {
   return dayjs(date.seconds * 1e3);
 };
 const LOGIN_TRACKING_PERIOD_SECONDS = 1800;
-const logger$4 = getLogger("firebase");
+const logger$5 = getLogger("firebase");
 let firebaseApp = null;
 class FirestoreManager {
   constructor(firestore) {
@@ -40904,6 +40945,9 @@ class AuthManager {
       this.listenToUserProfileUnsub = null;
     }
     if (authUser) {
+      logger$5.logDebug("User logged in:", {
+        uid: authUser.uid
+      });
       this.listenToUserProfileUnsub = getFirestoreManager().listenToDoc("users", authUser.uid, (doc2) => {
         this.userProfile = doc2;
         this.userProfileChangeListeners.forEach((callback) => callback(this.userProfile));
@@ -40935,7 +40979,9 @@ class AuthManager {
             await firestore.mergeDocData("user_logging", userLoggingDocId, userLoggingData);
           }
         } catch (error) {
-          logger$4.logError("Error logging user login activity:", error);
+          logger$5.logError("Error logging user login activity:", {
+            error
+          });
         }
       })();
     } else {
@@ -40982,7 +41028,7 @@ async function _init$3() {
   }
 }
 const CONTACT_US_LINK = "mailto:info@thefittingroom.tech?subject=Forgot%20Password%20Assistance";
-const logger$3 = getLogger("forgot-password");
+const logger$4 = getLogger("forgot-password");
 function ForgotPasswordOverlay({
   returnToOverlay
 }) {
@@ -41048,7 +41094,9 @@ function ForgotPasswordOverlay({
         await authManager2.sendPasswordResetEmail(email2);
         setLinkSent(true);
       } catch (error) {
-        logger$3.logError("Error sending password reset email:", error);
+        logger$4.logError("Error sending password reset email:", {
+          error
+        });
       }
     }
     event.preventDefault();
@@ -41265,7 +41313,7 @@ function TfrTitle() {
   }));
   return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.nameIcon }) });
 }
-const logger$2 = getLogger("sign-in");
+const logger$3 = getLogger("sign-in");
 function SignInOverlay({
   returnToOverlay
 }) {
@@ -41339,7 +41387,9 @@ function SignInOverlay({
           closeOverlay();
         }
       } catch (error) {
-        logger$2.logError("Login failed:", error);
+        logger$3.logError("Login failed:", {
+          error
+        });
         setEmailError(" ");
         setPasswordError(t("sign-in.login_failed"));
         passwordEl.focus();
@@ -41801,12 +41851,6 @@ async function getSizeRecommendation(styleId) {
     endpoint: `/v1/styles/${styleId}/recommendation`
   });
 }
-function getSizeLabelFromSize(size) {
-  if (size.label) {
-    return size.label;
-  }
-  return size.size_value?.name ?? null;
-}
 async function requestVtoSingle(colorwaySizeAssetId) {
   await execApiRequest({
     useCache: true,
@@ -41844,10 +41888,16 @@ async function getStyleGarmentCategoryById(styleGarmentCategoryId) {
   recordCache[cacheKey] = record;
   return record;
 }
+function getSizeLabelFromSize(size) {
+  if (size.label) {
+    return size.label;
+  }
+  return size.size_value?.name ?? null;
+}
 const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
 const AVATAR_GUTTER_HEIGHT_PX = 100;
 const CONTENT_AREA_WIDTH_PX = 550;
-const logger$1 = getLogger("vto-single");
+const logger$2 = getLogger("overlays/vto-single");
 function VtoSingleOverlay() {
   const {
     brandId
@@ -41862,6 +41912,8 @@ function VtoSingleOverlay() {
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
   const [modalStyle, setModalStyle] = reactExports.useState({});
+  const fetchedVtoSkus = reactExports.useRef(/* @__PURE__ */ new Set());
+  const readyVtoSkus = reactExports.useRef(/* @__PURE__ */ new Set());
   reactExports.useEffect(() => {
     if (!userIsLoggedIn) {
       openOverlay(OverlayName.LANDING, {
@@ -41880,6 +41932,10 @@ function VtoSingleOverlay() {
   reactExports.useEffect(() => {
     async function fetchInitialData() {
       try {
+        logger$2.clearTimers();
+        logger$2.timerStart("fetchInitialData");
+        logger$2.logDebug("{{ts}} - Starting fetch of initial data");
+        logger$2.timerStart("fetchInitialData_1_getProductData");
         const {
           currentProduct
         } = getStaticData();
@@ -41891,14 +41947,20 @@ function VtoSingleOverlay() {
         const {
           color: selectedColor
         } = await currentProduct.getSelectedOptions();
+        logger$2.timerEnd("fetchInitialData_1_getProductData");
+        logger$2.timerStart("fetchInitialData_2_getStyleData");
         const styleRec = await getStyleByExternalId(brandId, currentProduct.externalId);
         if (!styleRec) {
-          logger$1.logError("Style not found for externalId:", currentProduct.externalId);
+          logger$2.logError(`Style not found for externalId: ${currentProduct.externalId}`);
           return;
         }
         const styleGarmentCategoryRec = await getStyleGarmentCategoryById(styleRec.style_garment_category_id);
         const styleCategoryLabel = styleGarmentCategoryRec?.style_category_label ?? null;
+        logger$2.timerEnd("fetchInitialData_2_getStyleData");
+        logger$2.timerStart("fetchInitialData_3_getSizeRecommendation");
         const sizeRecommendationRecord = await getSizeRecommendation(styleRec.id);
+        logger$2.timerEnd("fetchInitialData_3_getSizeRecommendation");
+        logger$2.timerStart("fetchInitialData_4_assembleLoadedData");
         let productData;
         const recommendedSizeLabel = getSizeLabelFromSize(sizeRecommendationRecord.recommended_size) ?? "(unknown)";
         {
@@ -41959,14 +42021,23 @@ function VtoSingleOverlay() {
         setLoadedProductData(productData);
         setSelectedSizeLabel(recommendedSizeLabel);
         setSelectedColorLabel(recommendedColorLabel);
+        for (const sku in userProfile?.vto?.[brandId] ?? {}) {
+          fetchedVtoSkus.current.add(sku);
+          readyVtoSkus.current.add(sku);
+        }
+        logger$2.timerEnd("fetchInitialData_4_assembleLoadedData");
+        logger$2.timerEnd("fetchInitialData");
+        logger$2.logTimer("total", "{{ts}} - Completed fetch of initial data", logger$2.getTimers());
       } catch (error) {
-        logger$1.logError("Error fetching VTO data:", error);
+        logger$2.logError("Error fetching initial data:", {
+          error
+        });
       }
     }
-    if (userIsLoggedIn && userHasAvatar) {
+    if (userIsLoggedIn && userHasAvatar && !loadedProductData) {
       fetchInitialData();
     }
-  }, [userIsLoggedIn, userHasAvatar]);
+  }, [userIsLoggedIn, userHasAvatar, loadedProductData, userProfile]);
   const {
     sizeColorRecord: selectedColorSizeRecord,
     availableColorLabels
@@ -41991,25 +42062,54 @@ function VtoSingleOverlay() {
       availableColorLabels: availableColorLabels2
     };
   }, [loadedProductData, selectedSizeLabel, selectedColorLabel]);
+  const requestVto = reactExports.useCallback((sizeColorRecord) => {
+    if (fetchedVtoSkus.current.has(sizeColorRecord.sku)) {
+      return;
+    }
+    logger$2.timerStart(`requestVto_${sizeColorRecord.sku}`);
+    logger$2.logDebug(`{{ts}} - Requesting VTO for sku: ${sizeColorRecord.sku}`, {
+      sizeColorRecord
+    });
+    fetchedVtoSkus.current.add(sizeColorRecord.sku);
+    requestVtoSingle(sizeColorRecord.colorwaySizeAssetId).catch((error) => {
+      logger$2.logError("Error requesting VTO:", {
+        error,
+        sizeColorRecord
+      });
+    });
+  }, []);
   reactExports.useEffect(() => {
     if (selectedColorSizeRecord) {
-      requestVtoSingle(selectedColorSizeRecord.colorwaySizeAssetId);
+      requestVto(selectedColorSizeRecord);
     }
-  }, [selectedColorSizeRecord]);
+  }, [requestVto, selectedColorSizeRecord]);
   reactExports.useEffect(() => {
     if (!loadedProductData) {
       return;
     }
     for (const sizeRecord of loadedProductData.sizes) {
       const sizeColorRecord = sizeRecord.colors.find((c) => c.colorLabel === selectedColorLabel) ?? sizeRecord.colors[0];
-      requestVtoSingle(sizeColorRecord.colorwaySizeAssetId);
+      requestVto(sizeColorRecord);
     }
-  }, [loadedProductData, selectedColorLabel]);
+  }, [requestVto, loadedProductData, selectedColorLabel]);
   const vtoData = reactExports.useMemo(() => {
     if (!userProfile || !selectedColorSizeRecord) {
       return null;
     }
-    const vtoData2 = userProfile.vto?.[brandId]?.[selectedColorSizeRecord.sku];
+    const availableSkuData = userProfile.vto?.[brandId];
+    if (!availableSkuData) {
+      return null;
+    }
+    if (logger$2.isDebugEnabled()) {
+      for (const sku of fetchedVtoSkus.current) {
+        if (!readyVtoSkus.current.has(sku) && availableSkuData[sku]) {
+          readyVtoSkus.current.add(sku);
+          logger$2.timerEnd(`requestVto_${sku}`);
+          logger$2.logTimer(`requestVto_${sku}`, `{{ts}} - VTO data is loaded for sku: ${sku}`);
+        }
+      }
+    }
+    const vtoData2 = availableSkuData[selectedColorSizeRecord.sku];
     if (!vtoData2) {
       return null;
     }
@@ -42026,7 +42126,9 @@ function VtoSingleOverlay() {
     closeOverlay();
     const authManager2 = getAuthManager();
     authManager2.logout().catch((error) => {
-      logger$1.logError("Error during logout:", error);
+      logger$2.logError("Error during logout:", {
+        error
+      });
     });
   }, [closeOverlay, openOverlay]);
   const handleAddToCartClick = reactExports.useCallback(async () => {
@@ -42043,7 +42145,9 @@ function VtoSingleOverlay() {
         color: selectedColorLabel
       });
     } catch (error) {
-      logger$1.logError("Error adding to cart:", error);
+      logger$2.logError("Error adding to cart:", {
+        error
+      });
     }
   }, [selectedColorLabel, selectedSizeLabel]);
   if (!userIsLoggedIn || !userHasAvatar || !loadedProductData || !selectedColorSizeRecord) {
@@ -42150,34 +42254,6 @@ function MobileLayout({
       padding: "0 16px 16px 16px",
       backgroundColor: "#FFFFFF",
       overflowY: "auto"
-    },
-    sizeSelectorContainer: {},
-    colorSelectorContainer: {
-      marginTop: "16px"
-    },
-    itemFitTextContainer: {
-      marginTop: "8px"
-    },
-    itemFitText: {},
-    itemFitDetailsContainer: {
-      marginTop: "8px",
-      width: "70%"
-    },
-    buttonContainer: {
-      marginTop: "16px",
-      width: "100%"
-    },
-    productNameContainer: {
-      marginTop: "16px"
-    },
-    productNameText: {},
-    priceContainer: {},
-    priceText: {},
-    productDescriptionContainer: {
-      marginTop: "8px"
-    },
-    footerContainer: {
-      marginTop: "24px"
     }
   }));
   reactExports.useEffect(() => {
@@ -42293,11 +42369,12 @@ function MobileContentExpanded({
     itemFitText: {},
     itemFitDetailsContainer: {
       marginTop: "8px",
-      width: "70%"
+      width: "min(100%, 220px)"
     },
     buttonContainer: {
       marginTop: "24px",
-      width: "100%"
+      width: "100%",
+      maxWidth: "375px"
     },
     productDetailsContainer: {
       marginTop: "24px",
@@ -42337,10 +42414,11 @@ function MobileContentFull({
   const css2 = useCss((_theme) => ({
     sizeRecommendationFrame: {
       marginTop: "16px",
+      width: "min(100%, 375px)",
       display: "flex",
       flexDirection: "column",
       border: "1px solid rgba(33, 32, 31, 0.2)",
-      padding: "16px 56px",
+      padding: "16px",
       justifyContent: "center",
       alignItems: "center"
     },
@@ -42359,14 +42437,15 @@ function MobileContentFull({
     itemFitText: {},
     itemFitDetailsContainer: {
       marginTop: "8px",
-      width: "100%"
+      width: "min(100%, 220px)"
     },
     fitChartContainer: {
       marginTop: "16px"
     },
     buttonContainer: {
       marginTop: "16px",
-      width: "100%"
+      width: "100%",
+      maxWidth: "375px"
     },
     productDetailsContainer: {
       marginTop: "24px",
@@ -43039,7 +43118,7 @@ function useSizeRecommendation(load) {
     error
   };
 }
-const logger = getLogger("size-rec");
+const logger$1 = getLogger("size-rec");
 function SizeRecWidget({}) {
   const openOverlay = useMainStore((state) => state.openOverlay);
   const openedOverlays = useMainStore((state) => state.openedOverlays);
@@ -43050,7 +43129,9 @@ function SizeRecWidget({}) {
   } = useSizeRecommendation(hasOpenedVtoSingleOverlay);
   reactExports.useEffect(() => {
     if (sizeRecommendationError) {
-      logger.logError("Error loading size recommendation:", sizeRecommendationError);
+      logger$1.logError("Error loading size recommendation:", {
+        error: sizeRecommendationError
+      });
     }
   }, [sizeRecommendationError]);
   const handleLinkClick = reactExports.useCallback(() => {
@@ -43067,6 +43148,7 @@ function SizeRecWidget({}) {
     size: sizeLabel
   } });
 }
+const logger = getLogger("widgets/vto-button");
 function VtoButtonWidget({}) {
   const openOverlay = useMainStore((state) => state.openOverlay);
   const css2 = useCss((theme) => ({
@@ -43096,6 +43178,7 @@ function VtoButtonWidget({}) {
     }
   }));
   const openVto = () => {
+    logger.logDebug("{{ts}} - Opening VTO overlay");
     openOverlay(OverlayName.VTO_SINGLE);
   };
   return /* @__PURE__ */ jsxs("button", { type: "button", onClick: openVto, css: css2.button, children: [
@@ -43296,9 +43379,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.7"}`,
-    commitHash: `${"4a18721"}`,
-    date: `${"2026-01-18T21:52:48.635Z"}`
+    version: `${"5.0.9"}`,
+    commitHash: `${"c1adffa"}`,
+    date: `${"2026-02-01T12:11:06.704Z"}`
   }
 };
 const CONFIGS = {
@@ -43380,7 +43463,9 @@ async function init(initParams) {
       throw new Error(`Invalid environment "${environment}"`);
     }
     _init$4(debug);
-    logger2.logDebug("Received initParams:", initParams);
+    logger2.logDebug("Starting SDK initialization:", {
+      initParams
+    });
     const config = getConfig(environment);
     if (lang) {
       await instance.changeLanguage(lang);
@@ -43418,14 +43503,17 @@ async function init(initParams) {
     logger2.logDebug("SDK initialized", config.build);
     return true;
   } catch (error) {
-    logger2.logError("SDK initialization failed:", error);
+    logger2.logError("SDK initialization failed:", {
+      error
+    });
     return false;
   }
 }
 async function logout() {
   const authManager2 = getAuthManager();
   await authManager2.logout();
-  logInfo("logout", "User logged out");
+  const logger2 = getLogger("logout");
+  logger2.logInfo("User logged out");
 }
 const TFR = {
   init,

package/package.json

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