@thefittingroom/shop-ui 3.1.5 → 3.2.1

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v3.1.5 (2025-08-01T22:24:10.440Z)
+* thefittingroom v3.2.1 (2025-09-09T16:37:41.719Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v2.0.7 (2025-08-01T21:17:06.966Z)
+* thefittingroom v2.0.8 (2025-08-04T16:23:04.367Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 // Code generated by tygo. DO NOT EDIT.
@@ -26597,7 +26597,7 @@ styleInject(css_248z$6);
 var css_248z$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto;margin:auto;width:100%}}@media screen and (max-width:599px){#tfr-size-recommendations{width:calc(100vw - 30px)!important}.tfr-mobile-small-text{font-size:12px}.tfr-mobile-hidden{display:none}.tfr-modal-content{overflow:hidden}.tfr-modal-content-container{max-height:none;max-width:100vw;min-height:100vh;min-width:100vw}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{overflow:auto}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}@media screen and (max-height:800px){.tfr-video-responsive{height:280px!important}}";
 styleInject(css_248z$5);
 
-var css_248z$4 = "#tfr-size-recommendations{align-items:center;background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;flex-direction:column;font-family:var(--tfr-main-font);justify-content:center;padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations-container{align-items:center;display:none;flex-direction:column;justify-content:center;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column;font-size:13px;width:100%}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-info-icon{cursor:pointer}#tfr-size-rec-subtitle{border-bottom:2px solid #000;font-size:18px;font-weight:700;text-align:center;width:100%}#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;padding:0 10px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);justify-content:center;min-height:40px}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{flex-grow:1;padding-left:8px;padding-right:8px;text-align:right}.tfr-size-rec-table-cell-right{flex-grow:1;padding-left:8px;padding-right:8px;text-align:left}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex;width:150px}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img,.tfr-powered-by-logo svg{height:24px;width:12px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}.tfr-disabled{cursor:default}#tfr-login-to-view{cursor:pointer}.tfr-try-on-button{align-items:center;background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);cursor:pointer;display:flex;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);height:var(--tfr-size-selector-button-height);justify-content:center;margin-bottom:10px;margin-top:20px;max-width:200px;position:relative;transition:all .15s ease-in;width:100%}.tfr-try-on-button.loading,.tfr-try-on-button:disabled{cursor:not-allowed;opacity:.7}.tfr-try-on-button.loading:after{animation:spin 1s linear infinite;border:2px solid var(--tfr-size-selector-text-color);border-radius:50%;border-top:2px solid transparent;content:\"\";height:16px;margin-left:8px;position:absolute;width:16px}@keyframes spin{to{transform:rotate(1turn)}}";
+var css_248z$4 = "#tfr-size-recommendations{align-items:center;background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;flex-direction:column;font-family:var(--tfr-main-font);justify-content:center;padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations-container{align-items:center;display:none;flex-direction:column;justify-content:center;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column;font-size:13px;width:100%}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-info-icon{cursor:pointer}#tfr-size-rec-subtitle{border-bottom:2px solid #000;font-size:18px;font-weight:700;text-align:center;width:100%}#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;padding:0 10px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);justify-content:center;min-height:40px}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{flex-grow:1;padding-left:8px;padding-right:8px;text-align:right}.tfr-size-rec-table-cell-right{flex-grow:1;padding-left:8px;padding-right:8px;text-align:left}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex;width:150px}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img,.tfr-powered-by-logo svg{height:24px;width:12px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}.tfr-disabled{cursor:default}#tfr-login-to-view{cursor:pointer}.tfr-try-on-button{align-items:center;background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);cursor:pointer;display:flex;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);height:var(--tfr-size-selector-button-height);justify-content:center;margin-bottom:10px;margin-top:20px;max-width:200px;position:relative;transition:all .15s ease-in;width:100%}.tfr-try-on-button.loading,.tfr-try-on-button:disabled{cursor:not-allowed;opacity:.7}.tfr-try-on-button.hide{display:none}.tfr-try-on-button.loading:after{animation:spin 1s linear infinite;border:2px solid var(--tfr-size-selector-text-color);border-radius:50%;border-top:2px solid transparent;content:\"\";height:16px;margin-left:8px;position:absolute;width:16px}@keyframes spin{to{transform:rotate(1turn)}}";
 styleInject(css_248z$4);
 
 var css_248z$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px 10px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
@@ -27445,10 +27445,21 @@ class SizeRecComponent {
         this.tfrSizeRecommendationError.style.display = 'block';
         this.tfrSizeRecommendationError.innerHTML = 'No recommended size found.';
     }
+    hide() {
+        if (this.sizeRecMainDiv) {
+            this.sizeRecMainDiv.style.display = 'none';
+        }
+    }
+    show() {
+        if (this.sizeRecMainDiv) {
+            this.sizeRecMainDiv.style.display = 'block';
+        }
+    }
     init(sizeRecMainDivId) {
         const sizeRecMainDiv = document.getElementById(sizeRecMainDivId);
         if (!sizeRecMainDiv)
             throw new Error('Size rec main div not found');
+        this.sizeRecMainDiv = sizeRecMainDiv;
         this.render(sizeRecMainDiv);
         this.setElements();
         this.bindEvents();
@@ -27746,21 +27757,25 @@ class TfrSizeRec {
     }
     async setGarmentLocations(filledLocations = []) {
         this.sizeRecComponent.setLoading(true);
-        const locations = await this.getGarmentLocations(filledLocations);
+        // If we already have filledLocations, use them directly instead of making API calls
+        const locations = filledLocations.length > 0 ? filledLocations : await this.getGarmentLocations(filledLocations);
         console.debug('locations', locations);
         console.debug('filledLocations', filledLocations);
-        this.sizeRecComponent.setGarmentLocations(locations || []);
+        if (locations && locations.length > 0) {
+            this.sizeRecComponent.show();
+            this.sizeRecComponent.setGarmentLocations(locations);
+        }
         this.sizeRecComponent.setLoading(false);
     }
-    async setRecommendedSize() {
+    async recommendSize() {
         this.sizeRecComponent.setLoading(true);
-        const sizes = await this.getRecommenedSize();
+        const sizes = await this.getRecommendedSize();
         if (!sizes) {
             console.error('No sizes found for sku');
             this.sizeRecComponent.setLoading(false);
-            this.sizeRecComponent.setError();
             return;
         }
+        this.sizeRecComponent.show();
         this.sizeRecComponent.setRecommendedSize(sizes);
         this.sizeRecComponent.setLoading(false);
     }
@@ -27772,17 +27787,22 @@ class TfrSizeRec {
         catch (error) {
             try {
                 const style = await this.tfrShop.getStyleByBrandStyleId(this.sku);
+                if (!style) {
+                    console.error('Style not found for brand style ID:', this.sku);
+                    this.sizeRecComponent.hide();
+                    return null;
+                }
                 const locations = await this.tfrShop.getMeasurementLocationsFromBrandStyleId(style.id, filledLocations);
                 return locations;
             }
             catch (error) {
                 console.error(error);
-                this.sizeRecComponent.setError();
+                this.sizeRecComponent.hide();
                 return null;
             }
         }
     }
-    async getRecommenedSize() {
+    async getRecommendedSize() {
         try {
             const colorwaySizeAsset = await this.tfrShop.getColorwaySizeAssetFromSku(this.sku);
             const sizes = await this.getRecommendedSizes(String(colorwaySizeAsset.style_id));
@@ -27792,13 +27812,18 @@ class TfrSizeRec {
         catch (error) {
             try {
                 const style = await this.tfrShop.getStyleByBrandStyleId(this.sku);
+                if (!style) {
+                    console.error('Style not found for brand style ID:', this.sku);
+                    this.sizeRecComponent.hide();
+                    return null;
+                }
                 const sizes = await this.getRecommendedSizes(String(style.id));
                 this.setStyleId(style.id);
                 return sizes;
             }
             catch (error) {
                 console.error(error);
-                this.sizeRecComponent.setError();
+                this.sizeRecComponent.hide();
                 return null;
             }
         }
@@ -27936,16 +27961,29 @@ class FittingRoom {
     get sku() {
         return this.tfrSizeRec.sku;
     }
-    async checkIfPublished(brandStyleIdOrSku) {
-        const style = await this.getStyle(brandStyleIdOrSku);
-        return Boolean(style === null || style === void 0 ? void 0 : style.is_published);
-    }
-    setSku(sku) {
+    async setSku(sku) {
+        var _a, _b;
         this.tfrSizeRec.setSku(sku);
+        const style = await this.getStyle(this.sku);
+        this.style = style;
+        if (!style.is_published) {
+            document.getElementById('tfr-size-recommendations').style.display = 'none';
+            console.log(`style ${style.id} is not published`);
+        }
+        else {
+            console.log(`style ${style.id} is published`);
+        }
+        console.log(`style ${style.id} virtual try on is disabled`);
+        if (style.is_vto) {
+            (_a = document.getElementById('tfr-try-on-button')) === null || _a === void 0 ? void 0 : _a.classList.remove("hide");
+        }
+        else {
+            (_b = document.getElementById('tfr-try-on-button')) === null || _b === void 0 ? void 0 : _b.classList.add("hide");
+        }
         if (this.isLoggedIn)
-            this.tfrSizeRec.setRecommendedSize();
+            this.tfrSizeRec.recommendSize();
         else
-            this.setGarmentLocations();
+            this.setGarmentLocations(style);
     }
     async onInit() {
         var _a, _b;
@@ -27973,7 +28011,7 @@ class FittingRoom {
             this.hooks.onLogout();
         this.isLoggedIn = false;
         this.tfrSizeRec.setIsLoggedIn(false);
-        this.setGarmentLocations();
+        this.setGarmentLocations(this.style);
         this.unsubscribeFromProfileChanges();
     }
     async signIn(username, password, validationError) {
@@ -27991,7 +28029,7 @@ class FittingRoom {
             this.tfrModal.close();
             this.isLoggedIn = true;
             this.tfrSizeRec.setIsLoggedIn(true);
-            this.tfrSizeRec.setRecommendedSize();
+            this.tfrSizeRec.recommendSize();
             this.subscribeToProfileChanges();
         }
         catch (e) {
@@ -28076,9 +28114,8 @@ class FittingRoom {
         this.unsub();
         this.unsub = null;
     }
-    async setGarmentLocations() {
+    async setGarmentLocations(style) {
         var _a, _b;
-        const style = await this.getStyle(this.sku);
         const filledLocations = ((_b = (_a = style === null || style === void 0 ? void 0 : style.sizes) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.garment_measurements.map((measurement) => measurement.measurement_location)) || [];
         this.tfrSizeRec.setGarmentLocations(filledLocations);
     }
@@ -28088,12 +28125,12 @@ class FittingRoom {
             const style = await this.tfrShop.getStyle(colorwaySizeAsset.style_id);
             return style;
         }
-        catch (_a) {
+        catch (e) {
             try {
                 const style = await this.tfrShop.getStyleByBrandStyleId(brandStyleIdOrSku);
                 return style;
             }
-            catch (_b) {
+            catch (e2) {
                 return null;
             }
         }