@thefittingroom/shop-ui 1.1.7 → 1.1.9

package/dist/esm/components/SizeRec.d.ts

@@ -12,6 +12,7 @@ export declare class SizeRecComponent {
     private readonly onSignInClick;
     private readonly onSignOutClick;
     private _sku;
+    private isLoggedIn;
     private tfrSizeRecTitle;
     private tfrSizeRecSubtitle;
     private tfrSizeRecActionLogin;
@@ -30,7 +31,7 @@ export declare class SizeRecComponent {
     setLoading(isLoading: boolean): void;
     setGarmentLocations(locations: string[]): void;
     setRecommendedSize({ recommended, sizes }: RecommendedSize): void;
-    setError(error: string): void;
+    setError(): void;
     private init;
     private setElements;
     private bindEvents;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.1.7 (2024-05-16T02:29:04.341Z)
+* thefittingroom v1.1.9 (2024-05-17T00:01:17.423Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v1.1.5 (2024-05-16T02:24:56.143Z)
+* thefittingroom v1.1.7 (2024-05-16T23:59:30.970Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 
@@ -22903,6 +22903,172 @@ const getFirebaseError = (e) => {
     }
 };
 
+class Fetcher {
+    static get endpoint() {
+        const api = Config.getInstance().api;
+        return api.url;
+    }
+    static async Fetch({ user, endpointPath, method, body, useToken = true }) {
+        const url = this.getUrl(endpointPath, useToken);
+        const headers = await this.getHeaders(user, useToken);
+        const config = { method, headers, credentials: 'include' };
+        if (body)
+            config.body = JSON.stringify(body);
+        const res = await fetch(url, config);
+        if (res.ok)
+            return res;
+        if (res.status === 500)
+            throw new Error(res.statusText);
+        const json = await res.json();
+        return Promise.reject(json);
+    }
+    static getUrl(endpointPath, useToken) {
+        return useToken ? `${this.endpoint}/v1${endpointPath}` : this.endpoint + endpointPath;
+    }
+    static async getHeaders(user, useToken) {
+        if (!useToken)
+            return { 'Content-Type': 'application/json' };
+        const token = await user.getToken();
+        return {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        };
+    }
+    static Get(user, endpointPath, useToken) {
+        return this.Fetch({ user, endpointPath, method: 'GET', body: null, useToken });
+    }
+    static Post(user, endpointPath, body = null, useToken) {
+        return this.Fetch({ user, endpointPath, method: 'POST', body, useToken });
+    }
+    static Put(user, endpointPath, body, useToken) {
+        return this.Fetch({ user, endpointPath, method: 'PUT', body, useToken });
+    }
+    static Patch(user, endpointPath, body, useToken) {
+        return this.Fetch({ user, endpointPath, method: 'PATCH', body, useToken });
+    }
+    static Delete(user, endpointPath, body, useToken) {
+        return this.Fetch({ user, endpointPath, method: 'DELETE', body, useToken });
+    }
+}
+
+class TfrShop {
+    constructor(brandId, firebase) {
+        this.brandId = brandId;
+        this.firebase = firebase;
+        this.measurementLocations = new Map();
+    }
+    get user() {
+        return this.firebase.user;
+    }
+    get isLoggedIn() {
+        return !this.firebase || Boolean(this.user.id);
+    }
+    async onInit() {
+        await this.getMeasurementLocations();
+        return this.firebase.onInit();
+    }
+    async getRecommendedSizes(styleId) {
+        var _a, _b;
+        if (!this.isLoggedIn)
+            throw new UserNotLoggedInError();
+        try {
+            const res = await Fetcher.Get(this.user, `/styles/${styleId}/recommendation`);
+            const data = (await res.json());
+            if (!((_a = data === null || data === void 0 ? void 0 : data.fits) === null || _a === void 0 ? void 0 : _a.length) || !((_b = data === null || data === void 0 ? void 0 : data.recommended_size) === null || _b === void 0 ? void 0 : _b.id))
+                return null;
+            return data;
+        }
+        catch (error) {
+            if ((error === null || error === void 0 ? void 0 : error.error) === AvatarNotCreated)
+                throw new AvatarNotCreatedError();
+            throw error;
+        }
+    }
+    async submitTelephoneNumber(tel) {
+        const sanitizedTel = tel.replace(/[^\+0-9]/g, '');
+        const res = await Fetcher.Post(this.user, '/ios-app-link', { phone_number: sanitizedTel }, false);
+        console.log(res);
+    }
+    async getColorwaySizeAssetFromSku(colorwaySizeAssetSku) {
+        const assets = await this.getColorwaySizeAssets(null, [colorwaySizeAssetSku]);
+        if (!(assets === null || assets === void 0 ? void 0 : assets.size))
+            throw new NoColorwaySizeAssetsFoundError();
+        return Array.from(assets.values())[0];
+    }
+    async getMeasurementLocationsFromSku(sku) {
+        const asset = await this.getColorwaySizeAssetFromSku(sku);
+        if (!asset)
+            throw new Error('No colorway size asset found for sku');
+        const styleCategory = await this.getStyleCategory(asset.style_id);
+        if (!styleCategory)
+            throw new Error('Style category not found for style id');
+        const taxonomy = await this.getGetTaxonomy(styleCategory.style_garment_category_id);
+        if (!taxonomy)
+            throw new Error('Taxonomy not found for style garment category id');
+        return taxonomy.garment_measurement_locations.female.map((location) => {
+            return this.measurementLocations.has(location) ? this.measurementLocations.get(location) : location;
+        });
+    }
+    async getColorwaySizeAssets(styleId, skus) {
+        const constraints = [rl('brand_id', '==', this.brandId)];
+        if (styleId)
+            constraints.push(rl('style_id', '==', styleId));
+        if ((skus === null || skus === void 0 ? void 0 : skus.length) > 0)
+            constraints.push(rl('sku', 'in', skus));
+        try {
+            const querySnapshot = await this.firebase.getDocs('colorway_size_assets', constraints);
+            const colorwaySizeAssets = new Map();
+            querySnapshot.forEach((doc) => {
+                const colorwaySizeAsset = doc.data();
+                colorwaySizeAssets.set(colorwaySizeAsset.id, colorwaySizeAsset);
+            });
+            return colorwaySizeAssets;
+        }
+        catch (error) {
+            return getFirebaseError(error);
+        }
+    }
+    async getStyleCategory(styleId) {
+        try {
+            const doc = await this.firebase.getDoc('styles', String(styleId));
+            return doc;
+        }
+        catch (error) {
+            return getFirebaseError(error);
+        }
+    }
+    async getGetTaxonomy(styleId) {
+        try {
+            const doc = await this.firebase.getDoc('style_garment_categories', String(styleId));
+            return doc;
+        }
+        catch (error) {
+            return getFirebaseError(error);
+        }
+    }
+    async getMeasurementLocations() {
+        const locations = await this.fetchMeasurementLocations();
+        locations.forEach((location) => {
+            this.measurementLocations.set(location.name, location.label);
+        });
+    }
+    async fetchMeasurementLocations() {
+        try {
+            const docs = await this.firebase.getDocs('garment_measurement_locations', []);
+            return docs.docs.map((doc) => doc.data());
+        }
+        catch (error) {
+            return getFirebaseError(error);
+        }
+    }
+}
+const initShop = (brandId, env = 'dev') => {
+    if (env === 'dev' || env === 'development')
+        console.warn('TfrShop is in development mode');
+    Config.getInstance().setEnv(env);
+    return new TfrShop(brandId, new Firebase());
+};
+
 var MeasurementLocation;
 (function (MeasurementLocation) {
     MeasurementLocation["ACROSS_BACK"] = "across_back";
@@ -23257,6 +23423,12 @@ var Fit;
     Fit["SLIGHTLY_LOOSE"] = "slightly_loose";
     Fit["LOOSE"] = "loose";
     Fit["OVERSIZED"] = "oversized";
+    Fit["TOO_SHORT"] = "too_short";
+    Fit["SHORT"] = "short";
+    Fit["SLIGHTLY_SHORT"] = "slightly_short";
+    Fit["SLIGHTLY_LONG"] = "slightly_long";
+    Fit["LONG"] = "long";
+    Fit["TOO_LONG"] = "too_long";
 })(Fit || (Fit = {}));
 const FitNames = {
     [Fit.TOO_TIGHT]: 'Too Tight',
@@ -23266,151 +23438,12 @@ const FitNames = {
     [Fit.SLIGHTLY_LOOSE]: 'Slightly Loose',
     [Fit.LOOSE]: 'Loose',
     [Fit.OVERSIZED]: 'Oversized',
-};
-
-class Fetcher {
-    static get endpoint() {
-        const api = Config.getInstance().api;
-        return api.url;
-    }
-    static async Fetch({ user, endpointPath, method, body, useToken = true }) {
-        const url = this.getUrl(endpointPath, useToken);
-        const headers = await this.getHeaders(user, useToken);
-        const config = { method, headers, credentials: 'include' };
-        if (body)
-            config.body = JSON.stringify(body);
-        const res = await fetch(url, config);
-        if (res.ok)
-            return res;
-        if (res.status === 500)
-            throw new Error(res.statusText);
-        const json = await res.json();
-        return Promise.reject(json);
-    }
-    static getUrl(endpointPath, useToken) {
-        return useToken ? `${this.endpoint}/v1${endpointPath}` : this.endpoint + endpointPath;
-    }
-    static async getHeaders(user, useToken) {
-        if (!useToken)
-            return { 'Content-Type': 'application/json' };
-        const token = await user.getToken();
-        return {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-        };
-    }
-    static Get(user, endpointPath, useToken) {
-        return this.Fetch({ user, endpointPath, method: 'GET', body: null, useToken });
-    }
-    static Post(user, endpointPath, body = null, useToken) {
-        return this.Fetch({ user, endpointPath, method: 'POST', body, useToken });
-    }
-    static Put(user, endpointPath, body, useToken) {
-        return this.Fetch({ user, endpointPath, method: 'PUT', body, useToken });
-    }
-    static Patch(user, endpointPath, body, useToken) {
-        return this.Fetch({ user, endpointPath, method: 'PATCH', body, useToken });
-    }
-    static Delete(user, endpointPath, body, useToken) {
-        return this.Fetch({ user, endpointPath, method: 'DELETE', body, useToken });
-    }
-}
-
-class TfrShop {
-    constructor(brandId, firebase) {
-        this.brandId = brandId;
-        this.firebase = firebase;
-    }
-    get user() {
-        return this.firebase.user;
-    }
-    get isLoggedIn() {
-        return !this.firebase || Boolean(this.user.id);
-    }
-    onInit() {
-        return this.firebase.onInit();
-    }
-    async getRecommendedSizes(styleId) {
-        var _a, _b;
-        if (!this.isLoggedIn)
-            throw new UserNotLoggedInError();
-        try {
-            const res = await Fetcher.Get(this.user, `/styles/${styleId}/recommendation`);
-            const data = (await res.json());
-            if (!((_a = data === null || data === void 0 ? void 0 : data.fits) === null || _a === void 0 ? void 0 : _a.length) || !((_b = data === null || data === void 0 ? void 0 : data.recommended_size) === null || _b === void 0 ? void 0 : _b.id))
-                return null;
-            return data;
-        }
-        catch (error) {
-            if ((error === null || error === void 0 ? void 0 : error.error) === AvatarNotCreated)
-                throw new AvatarNotCreatedError();
-            throw error;
-        }
-    }
-    async submitTelephoneNumber(tel) {
-        const sanitizedTel = tel.replace(/[^\+0-9]/g, '');
-        const res = await Fetcher.Post(this.user, '/ios-app-link', { phone_number: sanitizedTel }, false);
-        console.log(res);
-    }
-    async getColorwaySizeAssetFromSku(colorwaySizeAssetSku) {
-        const assets = await this.getColorwaySizeAssets(null, [colorwaySizeAssetSku]);
-        if (!(assets === null || assets === void 0 ? void 0 : assets.size))
-            throw new NoColorwaySizeAssetsFoundError();
-        return Array.from(assets.values())[0];
-    }
-    async getMeasurementLocationsFromSku(sku) {
-        var _a;
-        const asset = await this.getColorwaySizeAssetFromSku(sku);
-        const styleCategory = await this.getStyleCategory(asset.style_id);
-        const taxonomy = await this.getGetTaxonomy(styleCategory.style_garment_category_id);
-        const classificationLocation = ((_a = Taxonomy[taxonomy.style_category]) === null || _a === void 0 ? void 0 : _a[taxonomy.garment_category]) || null;
-        return classificationLocation
-            ? ClassificationLocations[classificationLocation].map((location) => MeasurementLocationName[location])
-            : null;
-    }
-    async getColorwaySizeAssets(styleId, skus) {
-        const constraints = [rl('brand_id', '==', this.brandId)];
-        if (styleId)
-            constraints.push(rl('style_id', '==', styleId));
-        if ((skus === null || skus === void 0 ? void 0 : skus.length) > 0)
-            constraints.push(rl('sku', 'in', skus));
-        try {
-            const querySnapshot = await this.firebase.getDocs('colorway_size_assets', constraints);
-            const colorwaySizeAssets = new Map();
-            querySnapshot.forEach((doc) => {
-                const colorwaySizeAsset = doc.data();
-                colorwaySizeAssets.set(colorwaySizeAsset.id, colorwaySizeAsset);
-            });
-            return colorwaySizeAssets;
-        }
-        catch (error) {
-            return getFirebaseError(error);
-        }
-    }
-    async getStyleCategory(styleId) {
-        try {
-            const doc = await this.firebase.getDoc('styles', String(styleId));
-            return doc;
-        }
-        catch (error) {
-            return getFirebaseError(error);
-        }
-    }
-    async getGetTaxonomy(styleId) {
-        try {
-            const doc = await this.firebase.getDoc('style_garment_categories', String(styleId));
-            return doc;
-        }
-        catch (error) {
-            return getFirebaseError(error);
-        }
-    }
-}
-const initShop = (brandId, env = 'dev') => {
-    if (env === 'dev' || env === 'development')
-        console.warn('TfrShop is in development mode');
-    Config.getInstance().setEnv(env);
-    return new TfrShop(brandId, new Firebase());
+    [Fit.TOO_SHORT]: 'Too Short',
+    [Fit.SHORT]: 'Short',
+    [Fit.SLIGHTLY_SHORT]: 'Slightly Short',
+    [Fit.SLIGHTLY_LONG]: 'Slightly Long',
+    [Fit.LONG]: 'Long',
+    [Fit.TOO_LONG]: 'Too Long',
 };
 
 var AvatarState$1;
@@ -23504,7 +23537,7 @@ n(css$5,{});
 var css$4 = "@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}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.tfr-modal-content-container{min-height:100vh}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{height:calc(100vh - 76px)}}@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}}";
 n(css$4,{});
 
-var css$3 = "#tfr-size-recommendations{border:1px solid hsla(0,0%,7%,.55);color:#121212;display:flex;padding:14px 20px;width:440px}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;margin-bottom:8px}#tfr-size-rec-subtitle{margin-bottom:6px}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:16px;font-weight:700}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:2px}.tfr-size-rec-table-row{align-items:center;border-top:1px solid hsla(0,0%,7%,.55);display:flex;height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{font-weight:700;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:#209da7}#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:#a7a7a7;display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color:#878787;border-radius:8px;box-shadow:0 4px 4px 0 rgba(0,0,0,.3);color:#fff;display:none;font-size:14px;margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:35px;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){background-color:hsla(0,0%,100%,.3);opacity:.7}.tfr-size-rec-select-button.active{background-color:#212121;height:45px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:8px;border-top-left-radius:8px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:8px;border-top-right-radius:8px}.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{height:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}";
+var css$3 = "#tfr-size-recommendations{border:1px solid hsla(0,0%,7%,.55);color:#121212;display:flex;padding:14px 20px;width:440px}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;margin-bottom:8px}#tfr-size-rec-subtitle{margin-bottom:6px}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:16px;font-weight:700}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:2px}.tfr-size-rec-table-row{align-items:center;border-top:1px solid hsla(0,0%,7%,.55);display:flex;height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{font-weight:700;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:#209da7}#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:#a7a7a7;display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color:#878787;border-radius:8px;box-shadow:0 4px 4px 0 rgba(0,0,0,.3);color:#fff;display:none;font-size:14px;margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:35px;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){background-color:hsla(0,0%,100%,.3);opacity:.7}.tfr-size-rec-select-button.active{background-color:#212121;height:45px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:8px;border-top-left-radius:8px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:8px;border-top-right-radius:8px}.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{height:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}";
 n(css$3,{});
 
 var css$2 = ".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}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
@@ -36439,6 +36472,7 @@ class SizeRecComponent {
         this.onSignInClick = onSignInClick;
         this.onSignOutClick = onSignOutClick;
         this._sku = '';
+        this.isLoggedIn = false;
         this.redraw = null;
         this.init(sizeRecMainDivId);
     }
@@ -36449,9 +36483,12 @@ class SizeRecComponent {
         this._sku = sku;
     }
     setIsLoggedIn(isLoggedIn) {
+        this.isLoggedIn = isLoggedIn;
         if (isLoggedIn) {
             this.tfrSizeRecActionLogin.style.display = 'none';
             this.tfrSizeRecActionLogout.style.display = 'block';
+            this.tfrSizeRecTitle.style.display = 'block';
+            this.tfrSizeRecSubtitle.style.display = 'block';
         }
         else {
             this.tfrSizeRecActionLogin.style.display = 'block';
@@ -36469,6 +36506,11 @@ class SizeRecComponent {
         }
     }
     setGarmentLocations(locations) {
+        if (!locations || !locations.length) {
+            this.tfrSizeRecTitle.style.display = 'none';
+            this.tfrSizeRecSubtitle.style.display = 'none';
+            return;
+        }
         this.renderGarmentLocations(locations);
         this.tfrSizeRecSelect.style.display = 'none';
     }
@@ -36476,11 +36518,13 @@ class SizeRecComponent {
         this.renderSizeRec(recommended, sizes);
         this.tfrSizeRecSelect.style.display = 'flex';
     }
-    setError(error) {
+    setError() {
         this.tfrSizeRecTitle.style.display = 'none';
         this.tfrSizeRecSubtitle.style.display = 'none';
+        if (!this.isLoggedIn)
+            return;
         this.tfrSizeRecommendationError.style.display = 'block';
-        this.tfrSizeRecommendationError.innerHTML = error;
+        this.tfrSizeRecommendationError.innerHTML = 'No recommended size found.';
     }
     init(sizeRecMainDivId) {
         const sizeRecMainDiv = document.getElementById(sizeRecMainDivId);
@@ -36624,17 +36668,17 @@ class TfrSizeRec {
     async setGarmentLocations() {
         this.sizeRecComponent.setLoading(true);
         const locations = await this.getGarmentLocations();
-        if (!locations)
-            return this.sizeRecComponent.setLoading(false);
-        this.sizeRecComponent.setGarmentLocations(locations);
+        console.debug('locations', locations);
+        this.sizeRecComponent.setGarmentLocations(locations || []);
         this.sizeRecComponent.setLoading(false);
     }
     async setRecommendedSize() {
         this.sizeRecComponent.setLoading(true);
         const sizes = await this.getRecommenedSize();
         if (!sizes) {
+            console.error('No sizes found for sku');
             this.sizeRecComponent.setLoading(false);
-            this.sizeRecComponent.setError('No recommended size found.');
+            this.sizeRecComponent.setError();
             return;
         }
         this.sizeRecComponent.setRecommendedSize(sizes);
@@ -36646,7 +36690,8 @@ class TfrSizeRec {
             return locations;
         }
         catch (error) {
-            this.sizeRecComponent.setError(error.message || error.error);
+            console.error(error);
+            this.sizeRecComponent.setError();
             return null;
         }
     }
@@ -36657,7 +36702,8 @@ class TfrSizeRec {
             return sizes;
         }
         catch (error) {
-            this.sizeRecComponent.setError(error.message || error.error);
+            console.error(error);
+            this.sizeRecComponent.setError();
             return null;
         }
     }
@@ -36666,10 +36712,10 @@ class TfrSizeRec {
         if (!sizeRec)
             return null;
         return {
-            recommended: sizeRec.recommended_size.size_value.size,
+            recommended: sizeRec.recommended_size.label,
             sizes: sizeRec.fits.map((fit) => {
                 return {
-                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).size_value.size,
+                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).label,
                     locations: fit.measurement_location_fits.map((locationFit) => {
                         return {
                             fit: index.FitNames[locationFit.fit],