@thefittingroom/shop-ui 1.1.8 → 1.1.10

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

@@ -4,6 +4,7 @@ export type RecommendedSize = {
         size: string;
         locations: {
             fit: string;
+            isPerfect: boolean;
             location: string;
         }[];
     }[];

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.1.8 (2024-05-16T03:17:08.880Z)
+* thefittingroom v1.1.10 (2024-05-17T17:05:22.690Z)
 * 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;
@@ -36542,7 +36575,7 @@ class SizeRecComponent {
         const { locations } = sizes[index];
         const html = locations
             .sort(({ location: a }, { location: b }) => (a < b ? -1 : 1))
-            .map(({ location, fit }) => this.renderSizeRecTableRow(location, fit))
+            .map(({ location, fit, isPerfect }) => this.renderSizeRecTableRow(location, fit, isPerfect))
             .join('');
         this.tfrSizeRecTable.innerHTML = html;
     }
@@ -36553,10 +36586,10 @@ class SizeRecComponent {
             .join('');
         this.tfrSizeRecSelect.innerHTML = html;
     }
-    renderSizeRecTableRow(location, fit) {
+    renderSizeRecTableRow(location, fit, isPerfect = false) {
         return `<div class="tfr-size-rec-table-row">
               <div class="tfr-size-rec-table-cell-left">${location}</div>
-              <div class="tfr-size-rec-table-cell-right ${fit === 'Perfect Fit' ? 'perfect' : ''}">
+              <div class="tfr-size-rec-table-cell-right ${isPerfect ? 'perfect' : ''}">
                 ${fit}
               </div>
             </div>`;
@@ -36621,6 +36654,7 @@ class TfrSizeRec {
         this.tfrShop = tfrShop;
         this.onSignInClick = onSignInClick;
         this.onSignOutClick = onSignOutClick;
+        this.perfectFits = [index.Fit.PERFECT_FIT, index.Fit.SLIGHTLY_LOOSE, index.Fit.SLIGHTLY_TIGHT];
         this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick);
     }
     get sku() {
@@ -36686,6 +36720,7 @@ class TfrSizeRec {
                     locations: fit.measurement_location_fits.map((locationFit) => {
                         return {
                             fit: index.FitNames[locationFit.fit],
+                            isPerfect: this.perfectFits.includes(locationFit.fit),
                             location: index.MeasurementLocationName[locationFit.measurement_location],
                         };
                     }),