@thefittingroom/shop-ui 4.3.2 → 4.3.3

package/dist/index.js

@@ -20605,12 +20605,22 @@ class FittingRoomAPI {
       }
       console.debug("checking user for vto frames", colorwaySizeAssetSKU);
       const firestoreUser = data;
-      const frames2 = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
-      if (!frames2?.length) {
+      const colorwaySizeAssetEntry = firestoreUser.vto?.[this.BrandID]?.[colorwaySizeAssetSKU];
+      if (!colorwaySizeAssetEntry) {
+        console.debug("no vto entry for SKU, continue watching:", colorwaySizeAssetSKU);
+        return false;
+      }
+      if (colorwaySizeAssetEntry.error) {
+        console.error("VTO error found for SKU:", colorwaySizeAssetSKU, colorwaySizeAssetEntry.error);
         throw NoFramesFoundError;
       }
-      console.debug("testing first frame for SKU:", colorwaySizeAssetSKU, frames2[0]);
-      const tested = await testImage(frames2[0]);
+      console.debug("cololrwaySizeAssetEntry", colorwaySizeAssetEntry);
+      const frames = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
+      if (!frames?.length) {
+        throw NoFramesFoundError;
+      }
+      console.debug("testing first frame for SKU:", colorwaySizeAssetSKU, frames[0]);
+      const tested = await testImage(frames[0]);
       if (!tested) {
         console.error("image test failed for SKU:", colorwaySizeAssetSKU);
         throw NoFramesFoundError;
@@ -20641,12 +20651,12 @@ class FittingRoomAPI {
       console.error(`Error watching for try-on frames for SKU: ${colorwaySizeAssetSKU}`, error);
       throw error;
     }
-    const frames2 = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
-    if (!frames2) {
+    const frames = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
+    if (!frames) {
       console.error(`Frames not found on final user object for SKU: ${colorwaySizeAssetSKU}`, firestoreUser);
       throw NoFramesFoundError;
     }
-    return frames2;
+    return frames;
   }
   async GetCachedOrRequestUserColorwaySizeAssetFrames(firestoreUserController, colorwaySizeAssetSKU, skipCache) {
     console.debug("GetCachedOrRequestUserColorwaySizeAssetFrames", colorwaySizeAssetSKU, "skipCache:", skipCache);
@@ -20683,7 +20693,6 @@ class FittingRoomAPI {
       framesPromise = this.watchForTryOnFrames(firestoreUserController, colorwaySizeAssetSKU, true);
     }
     this.vtoFramesPromiseCache.set(colorwaySizeAssetSKU, framesPromise);
-    console.debug("retrieved frames", frames);
     return await framesPromise;
   }
 }
@@ -21338,10 +21347,10 @@ class TFRModal {
   }
   toPasswordReset() {
   }
-  onTryOn(frames2) {
+  onTryOn(frames) {
     this.manager.open(
       TryOnModal({
-        frames: frames2,
+        frames,
         onClose: () => this.close(),
         onNavBack: () => this.navBack()
       })
@@ -21479,6 +21488,17 @@ class SizeRecComponent {
       this.tfrTryOnButton.classList.remove("loading");
     }
   }
+  ShowSizeRecommendationError(message) {
+    console.debug("ShowSizeRecommendationError", message);
+    this.tfrSizeRecommendationError.innerHTML = message;
+    this.tfrSizeRecommendationError.classList.remove("hide");
+    this.tfrSizeRecommendationsContainer.classList.add("hide");
+  }
+  HideSizeRecommendationError() {
+    console.debug("HideSizeRecommendationError");
+    this.tfrSizeRecommendationError.classList.add("hide");
+    this.tfrSizeRecommendationsContainer.classList.remove("hide");
+  }
   SetStyleMeasurementLocations(garmentMeasurementLocations) {
     if (!garmentMeasurementLocations || !garmentMeasurementLocations.length) {
       this.tfrSizeRecTitle.classList.add("hide");
@@ -21502,6 +21522,9 @@ class SizeRecComponent {
   showTryOnButton() {
     this.tfrTryOnButton.classList.remove("hide");
   }
+  hideTryOnButton() {
+    this.tfrTryOnButton.classList.add("hide");
+  }
   disableTryOnButton(message) {
     this.tfrTryOnButton.disabled = true;
     this.tfrTryOnButton.title = message;
@@ -21611,7 +21634,8 @@ class SizeRecComponent {
   }
   renderSizeRec(sizeMeasurementLocationFits) {
     const selectedSizeIndex = sizeMeasurementLocationFits.findIndex((size) => size.isRecommended);
-    const selectedSizeLabel = sizeMeasurementLocationFits[selectedSizeIndex].label;
+    const selectedSize = sizeMeasurementLocationFits[selectedSizeIndex];
+    const selectedSizeLabel = selectedSize.label || selectedSize.size_value?.name || selectedSize.id;
     this.tfrSizeRecSize.innerHTML = ` ${selectedSizeLabel}`;
     this.availableSizes = sizeMeasurementLocationFits;
     this.redraw = (index) => this.renderSizeRecTable(sizeMeasurementLocationFits, index);
@@ -21624,7 +21648,7 @@ class SizeRecComponent {
   }
   renderSizeRecSelect(sizeMeasurementLocationFits, index) {
     const html = sizeMeasurementLocationFits.map(
-      (size, i) => `<div class="tfr-size-rec-select-button ${i === index ? "active" : ""}" data-index="${i}">${size.label}</div>`
+      (size, i) => `<div class="tfr-size-rec-select-button ${i === index ? "active" : ""}" data-index="${i}">${size.label || size.size_value?.name || size.id}</div>`
     ).join("");
     this.tfrSizeRecSelect.innerHTML = html;
   }
@@ -21793,7 +21817,7 @@ class SizeRecommendationController {
     );
   }
   setLoggedOutStyleMeasurementLocations(garmentMeasurementLocations = []) {
-    if (garmentMeasurementLocations.length == 0) {
+    if (garmentMeasurementLocations.length === 0) {
       throw new Error("filteredLocations passed to setGarmentLocations is 0");
     }
     console.debug("filledLocations", garmentMeasurementLocations);
@@ -21810,7 +21834,14 @@ class SizeRecommendationController {
     try {
       this.Show();
       this.SetSizeRecommendationLoading(true);
-      const sizeFitRecommendation = await this.fittingRoomAPI.GetRecommendedSizes(styleId);
+      this.sizeFitRecommendationPromise = this.fittingRoomAPI.GetRecommendedSizes(styleId);
+      const sizeFitRecommendation = await this.sizeFitRecommendationPromise;
+      if (!sizeFitRecommendation?.recommended_size) {
+        this.sizeRecComponent.ShowLoggedIn();
+        this.sizeRecComponent.Show();
+        this.sizeRecComponent.ShowSizeRecommendationError("No sizes were recommended.");
+        return;
+      }
       const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map((size) => {
         const sizeMeasurementLocationFit = {
           isRecommended: size.id === sizeFitRecommendation.recommended_size.id,
@@ -21830,6 +21861,7 @@ class SizeRecommendationController {
       }).sort((a, b) => (a.size_value?.id || 0) - (b.size_value?.id || 0));
       this.sizeRecComponent.ShowLoggedIn();
       this.sizeRecComponent.Show();
+      this.sizeRecComponent.HideSizeRecommendationError();
       this.sizeRecComponent.SetRecommendedSize(sizeMeasurementLocationFits);
     } catch (e) {
       console.error("error in get size recommendation", e);
@@ -21869,6 +21901,9 @@ class SizeRecommendationController {
     console.debug("SetVTOLoading", isLoading);
     this.sizeRecComponent.SetVTOLoading(isLoading);
   }
+  CurrentSizeRecommendation() {
+    return this.sizeFitRecommendationPromise;
+  }
   setCssVariables(sizeRecMainDiv, cssVariables) {
     const toKebabCase = (str) => str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
     for (const [key, value] of Object.entries(cssVariables)) {
@@ -21917,21 +21952,21 @@ class VTOController {
     this.sliderElement = null;
     this.isShown = false;
   }
-  onNewFramesReady(frames2) {
-    console.debug("onNewFramesReady", frames2);
+  onNewFramesReady(frames) {
+    console.debug("onNewFramesReady", frames);
     if (!this.isShown) {
       this.show();
     }
-    if (Array.isArray(frames2) && frames2.length > 0) {
-      const boundedValue = Math.min(this.currentSliderValue, frames2.length - 1);
-      const e = this.slider.Load(frames2, boundedValue);
+    if (Array.isArray(frames) && frames.length > 0) {
+      const boundedValue = Math.min(this.currentSliderValue, frames.length - 1);
+      const e = this.slider.Load(frames, boundedValue);
       if (e instanceof Error) {
         console.error(e);
         return;
       }
-      if (this.sliderElement && this.currentSliderValue < frames2.length) {
+      if (this.sliderElement && this.currentSliderValue < frames.length) {
         this.sliderElement.value = this.currentSliderValue.toString();
-        this.tryOnImage.src = frames2[this.currentSliderValue];
+        this.tryOnImage.src = frames[this.currentSliderValue];
       }
     }
   }
@@ -22044,14 +22079,25 @@ class FittingRoomController {
     }
   }
   async SetColorwaySizeAssetBySKU(activeSku, skipCache = false) {
+    if (!this.style?.is_vto) {
+      console.warn("skipping SetColorwaySizeAssetBySKU due to disabled vto");
+      return;
+    }
     if (this.cacheColorwaySizeAssetsPromise) {
       await this.cacheColorwaySizeAssetsPromise;
     }
-    console.debug("SetColorwaySizeAssetBySKU", activeSku, skipCache);
-    if (!this.style?.is_vto) {
-      console.warn("skipping SetColorwaySizeAssetBySKU due to disabled vto");
+    const currentSizeRec = this.SizeRecommendationController.CurrentSizeRecommendation();
+    if (!currentSizeRec) {
+      console.warn("skipping SetColorwaySizeAssetBySKU due to no size recommendation promise");
       return;
     }
+    const sizeFitRecommendation = await currentSizeRec;
+    console.debug("SetColorwaySizeAssetBySKU: SizeFitRecommendation", sizeFitRecommendation);
+    if (!sizeFitRecommendation?.recommended_size?.id) {
+      console.warn("skipping SetColorwaySizeAssetBySKU due to no size recommendation");
+      return;
+    }
+    console.debug("SetColorwaySizeAssetBySKU", activeSku, skipCache);
     try {
       this.selectedColorwaySizeAsset = await this.API.GetCachedColorwaySizeAssetFromSku(activeSku, skipCache);
     } catch (e) {
@@ -22185,7 +22231,7 @@ class FittingRoomController {
       case AvatarStatusPending:
         if (this.hooks?.onLoading) this.hooks.onLoading();
         console.log("calling DisableTryOnButton - avatar not ready");
-        this.SizeRecommendationController.HideTryOnButton("Your avatar is not ready yet");
+        this.SizeRecommendationController.DisableTryOnButton("Your avatar is not ready yet");
         break;
       case AvatarStatusCreated:
         if (this.hooks?.onLoadingComplete) this.hooks.onLoadingComplete();
@@ -22194,7 +22240,7 @@ class FittingRoomController {
         break;
       default:
         console.log("calling DisableTryOnButton - fitting room unavailable");
-        this.SizeRecommendationController.HideTryOnButton("The Fitting Room is currently unavailable.");
+        this.SizeRecommendationController.DisableTryOnButton("The Fitting Room is currently unavailable.");
         throw new Error("no avatar status");
     }
   }

package/dist/index.umd.cjs

@@ -20609,12 +20609,22 @@ This typically indicates that your device does not have a healthy Internet conne
         }
         console.debug("checking user for vto frames", colorwaySizeAssetSKU);
         const firestoreUser = data;
-        const frames2 = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
-        if (!frames2?.length) {
+        const colorwaySizeAssetEntry = firestoreUser.vto?.[this.BrandID]?.[colorwaySizeAssetSKU];
+        if (!colorwaySizeAssetEntry) {
+          console.debug("no vto entry for SKU, continue watching:", colorwaySizeAssetSKU);
+          return false;
+        }
+        if (colorwaySizeAssetEntry.error) {
+          console.error("VTO error found for SKU:", colorwaySizeAssetSKU, colorwaySizeAssetEntry.error);
           throw NoFramesFoundError;
         }
-        console.debug("testing first frame for SKU:", colorwaySizeAssetSKU, frames2[0]);
-        const tested = await testImage(frames2[0]);
+        console.debug("cololrwaySizeAssetEntry", colorwaySizeAssetEntry);
+        const frames = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
+        if (!frames?.length) {
+          throw NoFramesFoundError;
+        }
+        console.debug("testing first frame for SKU:", colorwaySizeAssetSKU, frames[0]);
+        const tested = await testImage(frames[0]);
         if (!tested) {
           console.error("image test failed for SKU:", colorwaySizeAssetSKU);
           throw NoFramesFoundError;
@@ -20645,12 +20655,12 @@ This typically indicates that your device does not have a healthy Internet conne
         console.error(`Error watching for try-on frames for SKU: ${colorwaySizeAssetSKU}`, error);
         throw error;
       }
-      const frames2 = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
-      if (!frames2) {
+      const frames = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
+      if (!frames) {
         console.error(`Frames not found on final user object for SKU: ${colorwaySizeAssetSKU}`, firestoreUser);
         throw NoFramesFoundError;
       }
-      return frames2;
+      return frames;
     }
     async GetCachedOrRequestUserColorwaySizeAssetFrames(firestoreUserController, colorwaySizeAssetSKU, skipCache) {
       console.debug("GetCachedOrRequestUserColorwaySizeAssetFrames", colorwaySizeAssetSKU, "skipCache:", skipCache);
@@ -20687,7 +20697,6 @@ This typically indicates that your device does not have a healthy Internet conne
         framesPromise = this.watchForTryOnFrames(firestoreUserController, colorwaySizeAssetSKU, true);
       }
       this.vtoFramesPromiseCache.set(colorwaySizeAssetSKU, framesPromise);
-      console.debug("retrieved frames", frames);
       return await framesPromise;
     }
   }
@@ -21342,10 +21351,10 @@ This typically indicates that your device does not have a healthy Internet conne
     }
     toPasswordReset() {
     }
-    onTryOn(frames2) {
+    onTryOn(frames) {
       this.manager.open(
         TryOnModal({
-          frames: frames2,
+          frames,
           onClose: () => this.close(),
           onNavBack: () => this.navBack()
         })
@@ -21483,6 +21492,17 @@ This typically indicates that your device does not have a healthy Internet conne
         this.tfrTryOnButton.classList.remove("loading");
       }
     }
+    ShowSizeRecommendationError(message) {
+      console.debug("ShowSizeRecommendationError", message);
+      this.tfrSizeRecommendationError.innerHTML = message;
+      this.tfrSizeRecommendationError.classList.remove("hide");
+      this.tfrSizeRecommendationsContainer.classList.add("hide");
+    }
+    HideSizeRecommendationError() {
+      console.debug("HideSizeRecommendationError");
+      this.tfrSizeRecommendationError.classList.add("hide");
+      this.tfrSizeRecommendationsContainer.classList.remove("hide");
+    }
     SetStyleMeasurementLocations(garmentMeasurementLocations) {
       if (!garmentMeasurementLocations || !garmentMeasurementLocations.length) {
         this.tfrSizeRecTitle.classList.add("hide");
@@ -21506,6 +21526,9 @@ This typically indicates that your device does not have a healthy Internet conne
     showTryOnButton() {
       this.tfrTryOnButton.classList.remove("hide");
     }
+    hideTryOnButton() {
+      this.tfrTryOnButton.classList.add("hide");
+    }
     disableTryOnButton(message) {
       this.tfrTryOnButton.disabled = true;
       this.tfrTryOnButton.title = message;
@@ -21615,7 +21638,8 @@ This typically indicates that your device does not have a healthy Internet conne
     }
     renderSizeRec(sizeMeasurementLocationFits) {
       const selectedSizeIndex = sizeMeasurementLocationFits.findIndex((size) => size.isRecommended);
-      const selectedSizeLabel = sizeMeasurementLocationFits[selectedSizeIndex].label;
+      const selectedSize = sizeMeasurementLocationFits[selectedSizeIndex];
+      const selectedSizeLabel = selectedSize.label || selectedSize.size_value?.name || selectedSize.id;
       this.tfrSizeRecSize.innerHTML = ` ${selectedSizeLabel}`;
       this.availableSizes = sizeMeasurementLocationFits;
       this.redraw = (index) => this.renderSizeRecTable(sizeMeasurementLocationFits, index);
@@ -21628,7 +21652,7 @@ This typically indicates that your device does not have a healthy Internet conne
     }
     renderSizeRecSelect(sizeMeasurementLocationFits, index) {
       const html = sizeMeasurementLocationFits.map(
-        (size, i) => `<div class="tfr-size-rec-select-button ${i === index ? "active" : ""}" data-index="${i}">${size.label}</div>`
+        (size, i) => `<div class="tfr-size-rec-select-button ${i === index ? "active" : ""}" data-index="${i}">${size.label || size.size_value?.name || size.id}</div>`
       ).join("");
       this.tfrSizeRecSelect.innerHTML = html;
     }
@@ -21797,7 +21821,7 @@ This typically indicates that your device does not have a healthy Internet conne
       );
     }
     setLoggedOutStyleMeasurementLocations(garmentMeasurementLocations = []) {
-      if (garmentMeasurementLocations.length == 0) {
+      if (garmentMeasurementLocations.length === 0) {
         throw new Error("filteredLocations passed to setGarmentLocations is 0");
       }
       console.debug("filledLocations", garmentMeasurementLocations);
@@ -21814,7 +21838,14 @@ This typically indicates that your device does not have a healthy Internet conne
       try {
         this.Show();
         this.SetSizeRecommendationLoading(true);
-        const sizeFitRecommendation = await this.fittingRoomAPI.GetRecommendedSizes(styleId);
+        this.sizeFitRecommendationPromise = this.fittingRoomAPI.GetRecommendedSizes(styleId);
+        const sizeFitRecommendation = await this.sizeFitRecommendationPromise;
+        if (!sizeFitRecommendation?.recommended_size) {
+          this.sizeRecComponent.ShowLoggedIn();
+          this.sizeRecComponent.Show();
+          this.sizeRecComponent.ShowSizeRecommendationError("No sizes were recommended.");
+          return;
+        }
         const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map((size) => {
           const sizeMeasurementLocationFit = {
             isRecommended: size.id === sizeFitRecommendation.recommended_size.id,
@@ -21834,6 +21865,7 @@ This typically indicates that your device does not have a healthy Internet conne
         }).sort((a, b) => (a.size_value?.id || 0) - (b.size_value?.id || 0));
         this.sizeRecComponent.ShowLoggedIn();
         this.sizeRecComponent.Show();
+        this.sizeRecComponent.HideSizeRecommendationError();
         this.sizeRecComponent.SetRecommendedSize(sizeMeasurementLocationFits);
       } catch (e) {
         console.error("error in get size recommendation", e);
@@ -21873,6 +21905,9 @@ This typically indicates that your device does not have a healthy Internet conne
       console.debug("SetVTOLoading", isLoading);
       this.sizeRecComponent.SetVTOLoading(isLoading);
     }
+    CurrentSizeRecommendation() {
+      return this.sizeFitRecommendationPromise;
+    }
     setCssVariables(sizeRecMainDiv, cssVariables) {
       const toKebabCase = (str) => str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
       for (const [key, value] of Object.entries(cssVariables)) {
@@ -21921,21 +21956,21 @@ This typically indicates that your device does not have a healthy Internet conne
       this.sliderElement = null;
       this.isShown = false;
     }
-    onNewFramesReady(frames2) {
-      console.debug("onNewFramesReady", frames2);
+    onNewFramesReady(frames) {
+      console.debug("onNewFramesReady", frames);
       if (!this.isShown) {
         this.show();
       }
-      if (Array.isArray(frames2) && frames2.length > 0) {
-        const boundedValue = Math.min(this.currentSliderValue, frames2.length - 1);
-        const e = this.slider.Load(frames2, boundedValue);
+      if (Array.isArray(frames) && frames.length > 0) {
+        const boundedValue = Math.min(this.currentSliderValue, frames.length - 1);
+        const e = this.slider.Load(frames, boundedValue);
         if (e instanceof Error) {
           console.error(e);
           return;
         }
-        if (this.sliderElement && this.currentSliderValue < frames2.length) {
+        if (this.sliderElement && this.currentSliderValue < frames.length) {
           this.sliderElement.value = this.currentSliderValue.toString();
-          this.tryOnImage.src = frames2[this.currentSliderValue];
+          this.tryOnImage.src = frames[this.currentSliderValue];
         }
       }
     }
@@ -22048,14 +22083,25 @@ This typically indicates that your device does not have a healthy Internet conne
       }
     }
     async SetColorwaySizeAssetBySKU(activeSku, skipCache = false) {
+      if (!this.style?.is_vto) {
+        console.warn("skipping SetColorwaySizeAssetBySKU due to disabled vto");
+        return;
+      }
       if (this.cacheColorwaySizeAssetsPromise) {
         await this.cacheColorwaySizeAssetsPromise;
       }
-      console.debug("SetColorwaySizeAssetBySKU", activeSku, skipCache);
-      if (!this.style?.is_vto) {
-        console.warn("skipping SetColorwaySizeAssetBySKU due to disabled vto");
+      const currentSizeRec = this.SizeRecommendationController.CurrentSizeRecommendation();
+      if (!currentSizeRec) {
+        console.warn("skipping SetColorwaySizeAssetBySKU due to no size recommendation promise");
         return;
       }
+      const sizeFitRecommendation = await currentSizeRec;
+      console.debug("SetColorwaySizeAssetBySKU: SizeFitRecommendation", sizeFitRecommendation);
+      if (!sizeFitRecommendation?.recommended_size?.id) {
+        console.warn("skipping SetColorwaySizeAssetBySKU due to no size recommendation");
+        return;
+      }
+      console.debug("SetColorwaySizeAssetBySKU", activeSku, skipCache);
       try {
         this.selectedColorwaySizeAsset = await this.API.GetCachedColorwaySizeAssetFromSku(activeSku, skipCache);
       } catch (e) {
@@ -22189,7 +22235,7 @@ This typically indicates that your device does not have a healthy Internet conne
         case AvatarStatusPending:
           if (this.hooks?.onLoading) this.hooks.onLoading();
           console.log("calling DisableTryOnButton - avatar not ready");
-          this.SizeRecommendationController.HideTryOnButton("Your avatar is not ready yet");
+          this.SizeRecommendationController.DisableTryOnButton("Your avatar is not ready yet");
           break;
         case AvatarStatusCreated:
           if (this.hooks?.onLoadingComplete) this.hooks.onLoadingComplete();
@@ -22198,7 +22244,7 @@ This typically indicates that your device does not have a healthy Internet conne
           break;
         default:
           console.log("calling DisableTryOnButton - fitting room unavailable");
-          this.SizeRecommendationController.HideTryOnButton("The Fitting Room is currently unavailable.");
+          this.SizeRecommendationController.DisableTryOnButton("The Fitting Room is currently unavailable.");
           throw new Error("no avatar status");
       }
     }

package/package.json

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