@thefittingroom/shop-ui 4.3.1 → 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("cololrwaySizeAssetEntry", colorwaySizeAssetEntry);
+      const frames = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
+      if (!frames?.length) {
         throw NoFramesFoundError;
       }
-      console.debug("testing first frame for SKU:", colorwaySizeAssetSKU, frames2[0]);
-      const tested = await testImage(frames2[0]);
+      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;
@@ -21515,6 +21538,7 @@ class SizeRecComponent {
   init(sizeRecMainDiv) {
     if (!sizeRecMainDiv) throw new Error("Size rec main div not found");
     this.sizeRecMainDiv = sizeRecMainDiv;
+    this.sizeRecMainDiv.classList.add("hide");
     this.render(sizeRecMainDiv);
     this.setElements(sizeRecMainDiv);
     this.bindEvents();
@@ -21610,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);
@@ -21623,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;
   }
@@ -21700,7 +21725,7 @@ class SizeRecComponent {
   }
   render(sizeRecMainDiv) {
     const body = `<div id="tfr-size-recommendations">
-                    <div id="tfr-size-rec-loading">
+                    <div id="tfr-size-rec-loading" class="hide">
                       <div class="lds-ellipsis">
                         <div></div>
                         <div></div>
@@ -21792,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);
@@ -21807,8 +21832,16 @@ class SizeRecommendationController {
   async GetSizeRecommendationByStyleID(styleId) {
     console.debug("start size recommendation", styleId);
     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,
@@ -21828,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);
@@ -21867,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)) {
@@ -21915,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];
       }
     }
   }
@@ -22014,7 +22051,10 @@ class FittingRoomController {
       }
       this.styleMeasurementLocations = this.styleToGarmentMeasurementLocations(this.style);
       const authUser = await authUserPromise;
-      this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(true, this.authStateChangeCallback.bind(this));
+      this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(
+        true,
+        this.authStateChangeCallback.bind(this)
+      );
       if (!authUser) {
         throw UserNotLoggedInError;
       }
@@ -22039,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) {
@@ -22180,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();
@@ -22189,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("cololrwaySizeAssetEntry", colorwaySizeAssetEntry);
+        const frames = this.getVTOFramesFromUser(firestoreUser, colorwaySizeAssetSKU);
+        if (!frames?.length) {
           throw NoFramesFoundError;
         }
-        console.debug("testing first frame for SKU:", colorwaySizeAssetSKU, frames2[0]);
-        const tested = await testImage(frames2[0]);
+        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;
@@ -21519,6 +21542,7 @@ This typically indicates that your device does not have a healthy Internet conne
     init(sizeRecMainDiv) {
       if (!sizeRecMainDiv) throw new Error("Size rec main div not found");
       this.sizeRecMainDiv = sizeRecMainDiv;
+      this.sizeRecMainDiv.classList.add("hide");
       this.render(sizeRecMainDiv);
       this.setElements(sizeRecMainDiv);
       this.bindEvents();
@@ -21614,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);
@@ -21627,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;
     }
@@ -21704,7 +21729,7 @@ This typically indicates that your device does not have a healthy Internet conne
     }
     render(sizeRecMainDiv) {
       const body = `<div id="tfr-size-recommendations">
-                    <div id="tfr-size-rec-loading">
+                    <div id="tfr-size-rec-loading" class="hide">
                       <div class="lds-ellipsis">
                         <div></div>
                         <div></div>
@@ -21796,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);
@@ -21811,8 +21836,16 @@ This typically indicates that your device does not have a healthy Internet conne
     async GetSizeRecommendationByStyleID(styleId) {
       console.debug("start size recommendation", styleId);
       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,
@@ -21832,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);
@@ -21871,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)) {
@@ -21919,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];
         }
       }
     }
@@ -22018,7 +22055,10 @@ This typically indicates that your device does not have a healthy Internet conne
         }
         this.styleMeasurementLocations = this.styleToGarmentMeasurementLocations(this.style);
         const authUser = await authUserPromise;
-        this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(true, this.authStateChangeCallback.bind(this));
+        this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(
+          true,
+          this.authStateChangeCallback.bind(this)
+        );
         if (!authUser) {
           throw UserNotLoggedInError;
         }
@@ -22043,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) {
@@ -22184,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();
@@ -22193,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.1",
+  "version": "4.3.3",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",