@thefittingroom/shop-ui 5.0.8 → 5.0.10

package/dist/index.js

@@ -19034,7 +19034,7 @@ const en$1 = {
   "get-app": { "create_avatar": "Create your avatar" },
   "sign-in": { "email": "Email", "password": "Password", "forgot_password": "Forgot password?", "sign_in": "Sign in", "no_account": "Don’t have an account?", "download_app": "Download the app.", "invalid_email": "Please enter a valid email address.", "missing_password": "Please enter your password.", "login_failed": "Incorrect email or password." },
   "forgot-password": { "title": "Forgot password", "description": "We’ll send you an email with a link to reset your password.", "send_link": "Send link", "link_sent": "Link sent! Please check your email.", "need_help": "Need help?", "contact_us": "Contact us." },
-  "vto-single": { "avatar_loading": "Finding your perfect fit...", "slide_to_rotate": "Slide to rotate", "sign_out": "Sign out", "color_label": "Color:", "add_to_cart": "Add to cart", "view_product_details": "View product details", "hide_product_details": "Hide product details" },
+  "vto-single": { "avatar_loading": "Finding your perfect fit...", "slide_to_rotate": "Slide to rotate", "sign_out": "Sign out", "color_label": "Color:", "add_to_cart": "Add to cart", "view_product_details": "View product details", "hide_product_details": "Hide product details", "no_recommendation": "There are currently no well fitting sizes available for this item." },
   "size-rec": { "recommended_size": "Recommended Size: {{size}}", "item_fit": "This item is {{fit}}", "select_size": "Select a size to see how it fits", "fitClassification": { "form_fitting": "Form Fitting", "slim_fit": "Slim Fit", "regular_fit": "Regular Fit", "relaxed_fit": "Relaxed Fit", "oversized_fit": "Oversized Fit" }, "measurementLocation": { "neck_base": "Neck", "across_shoulder": "Shoulders", "cb_neck_to_wrist": "Neck to Wrist", "sleeve_length_from_shoulder_point": "Sleeve", "bust": "Bust", "waist": "Waist", "low_waist": "Low Waist", "high_hip": "High Hip", "low_hip": "Low Hip", "thigh": "Thigh", "inseam": "Inseam", "hsp_to_low_hip": "HSP to Low Hip", "hsp_to_crotch": "HSP to Crotch", "low_hip_bottoms": "Low Hip (Bottoms)", "high_hip_bottoms": "High Hip (Bottoms)" }, "fit": { "too_tight": "Too Tight", "tight": "Tight", "slightly_tight": "Slightly Tight", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose", "loose": "Loose", "oversized": "Oversized", "too_short": "Too Short", "short": "Short", "slightly_short": "Slightly Short", "slightly_long": "Slightly Long", "long": "Long", "too_long": "Too Long" } },
   "fit-chart": { "fit_scale": "Fit Scale", "fit": { "poor_fit": "Poor Fit", "acceptable_fit": "Acceptable Fit", "too_tight": "Too Tight", "tight": "Tight or More Fitted", "slightly_tight": "Slightly Tight or Fitted", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose or Less Fitted", "loose": "Loose or Not Fitted", "oversized": "Oversized" }, "measurement_points": "Measurement Points", "point": { "bust": "Chest/Bust", "waist": "Natural Waist", "pant_waist": "Pant Waist", "high_hip": "High Hip", "low_hip": "Low Hip", "thigh": "Thigh" } }
 };
@@ -19050,7 +19050,7 @@ const fr = {
   "get-app": { "create_avatar": "Créez votre avatar" },
   "sign-in": { "email": "Email", "password": "Mot de passe", "forgot_password": "Mot de passe oublié ?", "sign_in": "Se connecter", "no_account": "Vous n'avez pas de compte ?", "download_app": "Téléchargez l'application.", "invalid_email": "Veuillez entrer une adresse e-mail valide.", "missing_password": "Veuillez entrer votre mot de passe.", "login_failed": "Email ou mot de passe incorrect." },
   "forgot-password": { "title": "Mot de passe oublié", "description": "Nous vous enverrons un e-mail avec un lien pour réinitialiser votre mot de passe.", "send_link": "Envoyer le lien", "link_sent": "Lien envoyé ! Veuillez vérifier votre e-mail.", "need_help": "Besoin d'aide ?", "contact_us": "Contactez-nous." },
-  "vto-single": { "avatar_loading": "Trouver votre ajustement parfait...", "slide_to_rotate": "Faites glisser pour faire pivoter", "sign_out": "Se déconnecter", "color_label": "Couleur :", "add_to_cart": "Ajouter au panier", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit" },
+  "vto-single": { "avatar_loading": "Trouver votre ajustement parfait...", "slide_to_rotate": "Faites glisser pour faire pivoter", "sign_out": "Se déconnecter", "color_label": "Couleur :", "add_to_cart": "Ajouter au panier", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit", "no_recommendation": "Il n'y a actuellement pas de tailles bien ajustées disponibles pour cet article." },
   "size-rec": { "recommended_size": "Taille recommandée : {{size}}", "item_fit": "Cet article est {{fit}}", "select_size": "Sélectionnez une taille pour voir comment elle s'adapte", "fitClassification": { "form_fitting": "Ajusté", "slim_fit": "Coupe slim", "regular_fit": "Coupe régulière", "relaxed_fit": "Coupe décontractée", "oversized_fit": "Coupe oversize" }, "measurementLocation": { "neck_base": "Cou", "across_shoulder": "Épaules", "cb_neck_to_wrist": "Cou jusqu'au poignet", "sleeve_length_from_shoulder_point": "Manche", "bust": "Buste", "waist": "Taille", "low_waist": "Bas de la taille", "high_hip": "Haut des hanches", "low_hip": "Bas des hanches", "thigh": "Cuisse", "inseam": "Entrejambe", "hsp_to_low_hip": "HSP au bas des hanches", "hsp_to_crotch": "HSP à l'entrejambe", "low_hip_bottoms": "Bas des hanches (bas)", "high_hip_bottoms": "Haut des hanches (bas)" }, "fit": { "too_tight": "Trop serré", "tight": "Serré", "slightly_tight": "Légèrement serré", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample", "loose": "Ample", "oversized": "Oversize", "too_short": "Trop court", "short": "Court", "slightly_short": "Légèrement court", "slightly_long": "Légèrement long", "long": "Long", "too_long": "Trop long" } },
   "fit-chart": { "fit_scale": "Échelle d'ajustement", "fit": { "poor_fit": "Mauvais ajustement", "acceptable_fit": "Ajustement acceptable", "too_tight": "Trop serré", "tight": "Serré ou plus ajusté", "slightly_tight": "Légèrement serré ou ajusté", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample ou moins ajusté", "loose": "Ample ou non ajusté", "oversized": "Oversize" }, "measurement_points": "Points de mesure", "point": { "bust": "Poitrine/Buste", "waist": "Taille naturelle", "pant_waist": "Taille du pantalon", "high_hip": "Haut des hanches", "low_hip": "Bas des hanches", "thigh": "Cuisse" } }
 };
@@ -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
+    });
   }
-  logWarn(message, ...data) {
-    logWarn(this.source, message, ...data);
+  logTimer(timerName, message, data = null) {
+    const duration = this.getTimerDuration(timerName);
+    log({
+      source: this.source,
+      level: "debug",
+      message,
+      data,
+      duration: duration ?? void 0
+    });
   }
-  logInfo(message, ...data) {
-    logInfo(this.source, message, ...data);
+  clearTimers() {
+    this.timers = {};
   }
-  logDebug(message, ...data) {
-    logDebug(this.source, message, ...data);
+  timerStart(name2) {
+    this.timers[name2] = [performance.now(), null];
+  }
+  timerEnd(name2) {
+    const timer = this.timers[name2];
+    if (timer && timer[1] === null) {
+      timer[1] = performance.now();
+    }
+  }
+  getTimers() {
+    const result = {};
+    for (const name2 in this.timers) {
+      result[name2] = this.getTimerDuration(name2);
+    }
+    return result;
+  }
+  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,82 +41947,112 @@ 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);
-        let productData;
-        const recommendedSizeLabel = getSizeLabelFromSize(sizeRecommendationRecord.recommended_size) ?? "(unknown)";
+        logger$2.timerEnd("fetchInitialData_3_getSizeRecommendation");
+        logger$2.timerStart("fetchInitialData_4_assembleLoadedData");
         {
-          const fitClassification = sizeRecommendationRecord.fit_classification;
-          const recommendedSizeId = sizeRecommendationRecord.recommended_size.id;
-          const sizes = [];
-          for (const sizeRec of sizeRecommendationRecord.available_sizes) {
-            const sizeId = sizeRec.id;
-            const sizeLabel = getSizeLabelFromSize(sizeRec) ?? "(unknown)";
-            const isRecommended = sizeRec.id === recommendedSizeId;
-            const fit = sizeRecommendationRecord.fits.find((f) => f.size_id === sizeRec.id);
-            if (!fit) {
-              continue;
+          const recommendedSizeId = sizeRecommendationRecord.recommended_size.id || null;
+          const recommendedSizeLabel = getSizeLabelFromSize(sizeRecommendationRecord.recommended_size);
+          if (recommendedSizeId != null && recommendedSizeLabel != null) {
+            let productData;
+            {
+              const fitClassification = sizeRecommendationRecord.fit_classification;
+              const sizes = [];
+              for (const sizeRec of sizeRecommendationRecord.available_sizes) {
+                const sizeId = sizeRec.id;
+                const sizeLabel = getSizeLabelFromSize(sizeRec) || null;
+                if (!sizeLabel) {
+                  continue;
+                }
+                const isRecommended = sizeRec.id === recommendedSizeId;
+                const fit = sizeRecommendationRecord.fits.find((f) => f.size_id === sizeRec.id);
+                if (!fit) {
+                  continue;
+                }
+                const colors = [];
+                for (const csaRec of sizeRec.colorway_size_assets) {
+                  const colorwaySizeAssetId = csaRec.id;
+                  const sku = csaRec.sku;
+                  const variant = variants.find((v) => v.sku === sku);
+                  if (!variant) {
+                    continue;
+                  }
+                  const colorLabel = variant.color || null;
+                  if (!colorLabel) {
+                    continue;
+                  }
+                  const priceFormatted = variant.priceFormatted;
+                  colors.push({
+                    colorwaySizeAssetId,
+                    colorLabel,
+                    sku,
+                    priceFormatted
+                  });
+                }
+                sizes.push({
+                  sizeId,
+                  sizeLabel,
+                  isRecommended,
+                  fit,
+                  colors
+                });
+              }
+              productData = {
+                productName,
+                productDescriptionHtml,
+                fitClassification,
+                recommendedSizeId,
+                recommendedSizeLabel,
+                sizes,
+                styleCategoryLabel
+              };
             }
-            const colors = [];
-            for (const csaRec of sizeRec.colorway_size_assets) {
-              const colorwaySizeAssetId = csaRec.id;
-              const sku = csaRec.sku;
-              const variant = variants.find((v) => v.sku === sku);
-              if (!variant) {
-                continue;
+            let recommendedColorLabel;
+            {
+              const recommendedSizeRecord = productData.sizes.find((s) => s.isRecommended);
+              if (!recommendedSizeRecord) {
+                throw new Error("Recommended size record not found");
               }
-              const colorLabel = variant.color;
-              const priceFormatted = variant.priceFormatted;
-              colors.push({
-                colorwaySizeAssetId,
-                colorLabel,
-                sku,
-                priceFormatted
-              });
+              const recommendedSizeColorRecord = recommendedSizeRecord.colors.find((c) => {
+                return c.colorLabel === selectedColor;
+              }) || recommendedSizeRecord.colors[0];
+              recommendedColorLabel = recommendedSizeColorRecord.colorLabel;
             }
-            sizes.push({
-              sizeId,
-              sizeLabel,
-              isRecommended,
-              fit,
-              colors
-            });
+            setLoadedProductData(productData);
+            setSelectedSizeLabel(recommendedSizeLabel);
+            setSelectedColorLabel(recommendedColorLabel);
+          } else {
+            setLoadedProductData(false);
           }
-          productData = {
-            productName,
-            productDescriptionHtml,
-            fitClassification,
-            recommendedSizeId,
-            recommendedSizeLabel,
-            sizes,
-            styleCategoryLabel
-          };
         }
-        let recommendedColorLabel;
-        {
-          const recommendedSizeRecord = productData.sizes.find((s) => s.isRecommended);
-          const recommendedSizeColorRecord = recommendedSizeRecord.colors.find((c) => {
-            return c.colorLabel === selectedColor;
-          }) || recommendedSizeRecord.colors[0];
-          recommendedColorLabel = recommendedSizeColorRecord.colorLabel;
-        }
-        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 && userProfile && loadedProductData == null) {
       fetchInitialData();
     }
-  }, [userIsLoggedIn, userHasAvatar]);
+  }, [userIsLoggedIn, userHasAvatar, userProfile, loadedProductData]);
   const {
     sizeColorRecord: selectedColorSizeRecord,
     availableColorLabels
@@ -41978,7 +42064,7 @@ function VtoSingleOverlay() {
       };
     }
     const sizeRecord = loadedProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
-    if (!sizeRecord) {
+    if (!sizeRecord || !sizeRecord.colors.length) {
       return {
         sizeColorRecord: null,
         availableColorLabels: []
@@ -41991,25 +42077,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 +42141,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,10 +42160,15 @@ 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) {
+  if (loadedProductData === false) {
+    return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(NoFitLayout, { onClose: closeOverlay, onSignOut: handleSignOutClick }) });
+  }
+  if (!userIsLoggedIn || !userHasAvatar || loadedProductData == null || !selectedColorSizeRecord) {
     return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(Loading, {}) });
   }
   let Layout;
@@ -42057,6 +42179,44 @@ function VtoSingleOverlay() {
   }
   return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
 }
+function NoFitLayout({
+  onClose,
+  onSignOut
+}) {
+  const {
+    t
+  } = useTranslation();
+  const css2 = useCss((_theme) => ({
+    mainContainer: {
+      width: "100%",
+      height: "100%",
+      padding: "16px"
+    },
+    titlebarContainer: {},
+    contentContainer: {
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    messageContainer: {
+      marginTop: "32px",
+      textAlign: "center"
+    },
+    footerContainer: {
+      marginTop: "32px"
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
+    /* @__PURE__ */ jsx$1("div", { css: css2.titlebarContainer, children: /* @__PURE__ */ jsx$1(ModalTitlebar, { title: t("try_it_on"), onCloseClick: onClose }) }),
+    /* @__PURE__ */ jsxs("div", { css: css2.contentContainer, children: [
+      /* @__PURE__ */ jsx$1("div", { children: " " }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.messageContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "vto-single.no_recommendation" }) }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.footerContainer, children: /* @__PURE__ */ jsx$1(Footer, { onSignOutClick: onSignOut }) })
+    ] })
+  ] });
+}
 function MobileLayout({
   loadedProductData,
   selectedColorSizeRecord,
@@ -43014,7 +43174,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);
@@ -43025,7 +43185,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(() => {
@@ -43042,6 +43204,7 @@ function SizeRecWidget({}) {
     size: sizeLabel
   } });
 }
+const logger = getLogger("widgets/vto-button");
 function VtoButtonWidget({}) {
   const openOverlay = useMainStore((state) => state.openOverlay);
   const css2 = useCss((theme) => ({
@@ -43071,6 +43234,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: [
@@ -43271,9 +43435,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.8"}`,
-    commitHash: `${"d1d0462"}`,
-    date: `${"2026-01-18T23:29:10.022Z"}`
+    version: `${"5.0.10"}`,
+    commitHash: `${"0058a65"}`,
+    date: `${"2026-02-01T18:44:35.278Z"}`
   }
 };
 const CONFIGS = {
@@ -43355,7 +43519,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);
@@ -43393,14 +43559,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.8",
+  "version": "5.0.10",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",