@thefittingroom/shop-ui 2.0.2 → 3.0.0-alpha-1

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

@@ -2,6 +2,7 @@ export type RecommendedSize = {
     recommended: string;
     sizes: {
         size: string;
+        size_id: number;
         locations: {
             fit: string;
             isPerfect: boolean;
@@ -13,7 +14,9 @@ export declare class SizeRecComponent {
     private readonly onSignInClick;
     private readonly onSignOutClick;
     private readonly onFitInfoClick;
+    private readonly onTryOnClick;
     private _sku;
+    private _styleId;
     private isLoggedIn;
     private tfrInfoIcon;
     private tfrLoginToView;
@@ -35,9 +38,11 @@ export declare class SizeRecComponent {
     private tfrToggleClosedElements;
     private isCollapsed;
     private redraw;
-    constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void, onFitInfoClick: () => void);
+    constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void, onFitInfoClick: () => void, onTryOnClick: (styleId: number, sizeId: number) => void);
     get sku(): string;
     setSku(sku: string): void;
+    get styleId(): number;
+    setStyleId(styleId: number): void;
     setIsLoggedIn(isLoggedIn: boolean): void;
     setLoading(isLoading: boolean): void;
     setGarmentLocations(locations: string[]): void;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v2.0.2 (2024-10-23T17:24:53.220Z)
+* thefittingroom v3.0.0-alpha-1 (2025-01-17T20:00:29.715Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v1.5.2 (2024-09-03T15:43:56.403Z)
+* thefittingroom v2.0.0-alpha-1 (2025-01-17T20:00:16.432Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 
@@ -25696,6 +25696,24 @@ class NoColorwaySizeAssetsFoundError extends Error {
         this.name = 'NoColorwaySizeAssetsFoundError';
     }
 }
+class BrandUserIdNotSetError extends Error {
+    constructor() {
+        super('brand user id not set');
+        this.name = 'BrandUserIdNotSetError';
+    }
+}
+class NoFramesFoundError extends Error {
+    constructor() {
+        super('no frames found');
+        this.name = 'NoFramesFoundError';
+    }
+}
+class NoStylesFoundError extends Error {
+    constructor() {
+        super('no styles found');
+        this.name = 'NoStylesFoundError';
+    }
+}
 // Backend responses
 const AvatarNotCreated = 'avatar not created';
 
@@ -25713,12 +25731,15 @@ class FirebaseUser {
     async onInit(brandId) {
         this.auth.onAuthStateChanged((user) => {
             this.setUser(user);
-            if (user)
-                this.logUserLogin(brandId, user);
+            if (!user)
+                return;
+            this.logUserLogin(brandId, user);
+            this.setBrandUserId(user.uid);
         });
         await this.auth.authStateReady();
         const user = this.auth.currentUser;
         this.setUser(user);
+        this.setBrandUserId(user === null || user === void 0 ? void 0 : user.uid);
         return Boolean(user);
     }
     setUser(user) {
@@ -25764,6 +25785,12 @@ class FirebaseUser {
         const token = await this.user.getIdToken();
         return token;
     }
+    get userId() {
+        var _a;
+        if (!((_a = this.user) === null || _a === void 0 ? void 0 : _a.uid))
+            throw new UserNotLoggedInError();
+        return this.user.uid;
+    }
     async getUserProfile() {
         var _a;
         if (!((_a = this.user) === null || _a === void 0 ? void 0 : _a.uid))
@@ -25777,6 +25804,18 @@ class FirebaseUser {
         unsub = jl(q, (snapshot) => callback(snapshot.docs[0].data()));
         return () => unsub();
     }
+    watchUserProfileForFrames(predicate) {
+        let unsub;
+        const q = sl(Ta(this.firestore, 'users'), rl(Eh(), '==', this.id));
+        return new Promise((resolve) => {
+            unsub = jl(q, async (snapshot) => {
+                if (!(await predicate(snapshot)))
+                    return;
+                unsub();
+                resolve(snapshot.docs[0].data());
+            });
+        });
+    }
     async login(username, password) {
         if (this.auth.currentUser)
             await this.auth.signOut();
@@ -25840,6 +25879,8 @@ const getFirebaseError = (e) => {
     }
 };
 
+const asyncTry = (promise) => promise.then((data) => [null, data]).catch((error) => [error]);
+
 class Fetcher {
     static get endpoint() {
         const api = Config.getInstance().api;
@@ -25888,6 +25929,15 @@ class Fetcher {
     }
 }
 
+const testImage = (url) => {
+    const img = new Image();
+    img.src = url;
+    return new Promise((resolve) => {
+        img.onerror = () => resolve(false);
+        img.onload = () => resolve(true);
+    });
+};
+
 class TfrShop {
     constructor(brandId, firebase) {
         this.brandId = brandId;
@@ -25939,6 +25989,7 @@ class TfrShop {
         return Array.from(assets.values())[0];
     }
     async getMeasurementLocationsFromSku(sku, filledLocations = []) {
+        console.log({ sku });
         const asset = await this.getColorwaySizeAssetFromSku(sku);
         if (!asset)
             throw new Error('No colorway size asset found for sku');
@@ -26028,6 +26079,33 @@ class TfrShop {
     getMeasurementLocationSortOrder(location) {
         return this.measurementLocations.has(location) ? this.measurementLocations.get(location).sort_order : Infinity;
     }
+    async tryOn(styleId, sizeId) {
+        if (!this.isLoggedIn)
+            throw new UserNotLoggedInError();
+        const colorwaySizeAssetSku = await this.getColorwaySizeAssetSkuFromStyleIdAndSizeId(styleId, sizeId);
+        try {
+            const frames = await this.getColorwaySizeAssetFrames(colorwaySizeAssetSku);
+            return frames;
+        }
+        catch (error) {
+            if (!(error instanceof NoFramesFoundError))
+                throw error;
+            return this.requestThenGetColorwaySizeAssetFrames(colorwaySizeAssetSku);
+        }
+    }
+    async getColorwaySizeAssetSkuFromStyleIdAndSizeId(styleId, sizeId) {
+        var _a, _b, _c;
+        try {
+            const constraints = [rl('brand_id', '==', this.brandId)];
+            constraints.push(rl('style_id', '==', styleId));
+            constraints.push(rl('size_id', '==', sizeId));
+            const querySnapshot = await this.firebase.getDocs('colorway_size_assets', constraints);
+            return (_c = (_b = (_a = querySnapshot.docs) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.data()) === null || _c === void 0 ? void 0 : _c.sku;
+        }
+        catch (error) {
+            return getFirebaseError(error);
+        }
+    }
     async getGetTaxonomy(styleId) {
         try {
             const doc = await this.firebase.getDoc('style_garment_categories', String(styleId));
@@ -26052,6 +26130,56 @@ class TfrShop {
             return getFirebaseError(error);
         }
     }
+    async requestThenGetColorwaySizeAssetFrames(colorwaySizeAssetSku) {
+        const [error, colorwaySizeAsset] = await asyncTry(this.getColorwaySizeAssetFromSku(colorwaySizeAssetSku));
+        if (error)
+            throw error;
+        try {
+            await this.requestColorwaySizeAssetFrames(colorwaySizeAsset.id);
+            return this.awaitColorwaySizeAssetFrames(colorwaySizeAssetSku);
+        }
+        catch (error) {
+            if ((error === null || error === void 0 ? void 0 : error.error) === AvatarNotCreated)
+                throw new AvatarNotCreatedError();
+            throw new NoStylesFoundError();
+        }
+    }
+    async awaitColorwaySizeAssetFrames(colorwaySizeAssetSKU) {
+        var _a, _b, _c, _d;
+        if (!this.isLoggedIn)
+            throw new UserNotLoggedInError();
+        const callback = async (data) => {
+            var _a, _b, _c, _d;
+            const frames = (_d = (_c = (_b = (_a = data.docs[0].data()) === null || _a === void 0 ? void 0 : _a.vto) === null || _b === void 0 ? void 0 : _b[this.brandId]) === null || _c === void 0 ? void 0 : _c[colorwaySizeAssetSKU]) === null || _d === void 0 ? void 0 : _d.frames;
+            if (!(frames === null || frames === void 0 ? void 0 : frames.length))
+                return false;
+            return testImage(frames[0]);
+        };
+        const userProfile = (await this.user.watchUserProfileForFrames(callback));
+        if (!((_d = (_c = (_b = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.vto) === null || _a === void 0 ? void 0 : _a[this.brandId]) === null || _b === void 0 ? void 0 : _b[colorwaySizeAssetSKU]) === null || _c === void 0 ? void 0 : _c.frames) === null || _d === void 0 ? void 0 : _d.length))
+            throw new NoFramesFoundError();
+        return userProfile.vto[this.brandId][colorwaySizeAssetSKU].frames;
+    }
+    async requestColorwaySizeAssetFrames(colorwaySizeAssetId) {
+        if (!this.isLoggedIn)
+            throw new UserNotLoggedInError();
+        if (!this.user.brandUserId)
+            throw new BrandUserIdNotSetError();
+        await Fetcher.Post(this.user, `/colorway-size-assets/${colorwaySizeAssetId}/frames`, {
+            brand_user_id: String(this.user.brandUserId),
+        });
+    }
+    async getColorwaySizeAssetFrames(colorwaySizeAssetSKU) {
+        var _a, _b, _c;
+        const userProfile = await this.user.getUserProfile();
+        const frames = ((_c = (_b = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.vto) === null || _a === void 0 ? void 0 : _a[this.brandId]) === null || _b === void 0 ? void 0 : _b[colorwaySizeAssetSKU]) === null || _c === void 0 ? void 0 : _c.frames) || [];
+        if (!frames.length)
+            throw new NoFramesFoundError();
+        const testedImage = await testImage(frames[0]);
+        if (!testedImage)
+            throw new NoFramesFoundError();
+        return frames;
+    }
 }
 const initShop = (brandId, env = 'dev') => {
     if (env === 'dev' || env === 'development')
@@ -27206,10 +27334,6 @@ const TryOnModal = (props) => {
 				<img id="tfr-tryon-image" src="" />
 				<input type="range" id="tfr-slider" />
 				</div>
-				<div class="tfr-t-a-center">
-            <span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20">${L.ReturnToCatalogPage }</span>
-            <span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor" id="returnToSite">${L.ReturnToProductPage }</span>
-        </div>
         `;
     };
     return {
@@ -27297,11 +27421,13 @@ class TfrModal {
 }
 
 class SizeRecComponent {
-    constructor(sizeRecMainDivId, onSignInClick, onSignOutClick, onFitInfoClick) {
+    constructor(sizeRecMainDivId, onSignInClick, onSignOutClick, onFitInfoClick, onTryOnClick) {
         this.onSignInClick = onSignInClick;
         this.onSignOutClick = onSignOutClick;
         this.onFitInfoClick = onFitInfoClick;
+        this.onTryOnClick = onTryOnClick;
         this._sku = '';
+        this._styleId = null;
         this.isLoggedIn = false;
         this.tfrLoggedInElements = [];
         this.tfrLoggedOutElements = [];
@@ -27317,12 +27443,19 @@ class SizeRecComponent {
     setSku(sku) {
         this._sku = sku;
     }
+    get styleId() {
+        return this._styleId;
+    }
+    setStyleId(styleId) {
+        this._styleId = styleId;
+    }
     setIsLoggedIn(isLoggedIn) {
         this.isLoggedIn = isLoggedIn;
         this.tfrSizeRecSelectContainer.style.display = 'flex';
         this.tfrSizeRecSelect.style.display = 'flex';
         this.tfrSizeHowItFits.style.display = 'block';
         if (isLoggedIn) {
+            this.tfrSizeHowItFits.style.opacity = '1';
             this.tfrSizeRecSelect.style.opacity = '1';
             this.tfrLoggedInElements.forEach((element) => (element.style.display = 'block'));
             this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'none'));
@@ -27334,6 +27467,7 @@ class SizeRecComponent {
             this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
         }
         else {
+            this.tfrSizeHowItFits.style.opacity = '0.4';
             this.tfrSizeRecSelect.style.opacity = '0.4';
             this.tfrLoggedInElements.forEach((element) => (element.style.display = 'none'));
             this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'block'));
@@ -27420,6 +27554,10 @@ class SizeRecComponent {
         allButtons.forEach((button) => button.classList.remove('active'));
         allButtons.item(selectedIndex).classList.add('active');
         this.redraw(selectedIndex);
+        const selectedSizeId = Number(target.getAttribute('data-size-id'));
+        if (Number.isNaN(selectedSizeId))
+            return;
+        this.onTryOnClick(this.styleId, selectedSizeId);
     }
     renderSizeRec(recommended, sizes) {
         this.tfrSizeRecSize.innerHTML = `&nbsp;${recommended}`;
@@ -27427,6 +27565,8 @@ class SizeRecComponent {
         this.redraw = (index) => this.renderSizeRecTable(sizes, index);
         this.redraw(selectedSizeIndex);
         this.renderSizeRecSelect(sizes, selectedSizeIndex);
+        const selectedSizeId = sizes[selectedSizeIndex].size_id;
+        this.onTryOnClick(this.styleId, selectedSizeId);
     }
     renderSizeRecTable(sizes, index) {
         const { locations } = sizes[index];
@@ -27438,7 +27578,7 @@ class SizeRecComponent {
     renderSizeRecSelect(sizes, index) {
         const sizeNames = sizes.map(({ size }) => size);
         const html = sizeNames
-            .map((name, i) => `<div class="tfr-size-rec-select-button ${i === index ? 'active' : ''}" data-index="${i}">${name}</div>`)
+            .map((name, i) => `<div class="tfr-size-rec-select-button ${i === index ? 'active' : ''}" data-index="${i}" data-size-id="${sizes[i].size_id}">${name}</div>`)
             .join('');
         this.tfrSizeRecSelect.innerHTML = html;
     }
@@ -27571,14 +27711,15 @@ class SizeRecComponent {
 }
 
 class TfrSizeRec {
-    constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick, onFitInfoClick) {
+    constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick, onFitInfoClick, onTryOnClick) {
         this.tfrShop = tfrShop;
         this.onSignInClick = onSignInClick;
         this.onSignOutClick = onSignOutClick;
         this.onFitInfoClick = onFitInfoClick;
+        this.onTryOnClick = onTryOnClick;
         this.perfectFits = [index.Fit.PERFECT_FIT, index.Fit.SLIGHTLY_LOOSE, index.Fit.SLIGHTLY_TIGHT];
         this.setCssVariables(cssVariables);
-        this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick, this.onFitInfoClick);
+        this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick, this.onFitInfoClick, this.onTryOnClick);
     }
     get sku() {
         return this.sizeRecComponent.sku;
@@ -27586,6 +27727,12 @@ class TfrSizeRec {
     setSku(sku) {
         this.sizeRecComponent.setSku(sku);
     }
+    get styleId() {
+        return this.sizeRecComponent.styleId;
+    }
+    setStyleId(styleId) {
+        this.sizeRecComponent.setStyleId(styleId);
+    }
     setIsLoggedIn(isLoggedIn) {
         this.sizeRecComponent.setIsLoggedIn(isLoggedIn);
     }
@@ -27631,12 +27778,14 @@ class TfrSizeRec {
         try {
             const colorwaySizeAsset = await this.tfrShop.getColorwaySizeAssetFromSku(this.sku);
             const sizes = await this.getRecommendedSizes(String(colorwaySizeAsset.style_id));
+            this.setStyleId(colorwaySizeAsset.style_id);
             return sizes;
         }
         catch (error) {
             try {
                 const style = await this.tfrShop.getStyleByBrandStyleId(this.sku);
                 const sizes = await this.getRecommendedSizes(String(style.id));
+                this.setStyleId(style.id);
                 return sizes;
             }
             catch (error) {
@@ -27655,6 +27804,7 @@ class TfrSizeRec {
             sizes: sizeRec.fits.map((fit) => {
                 return {
                     size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).label,
+                    size_id: fit.size_id,
                     locations: fit.measurement_location_fits
                         .map((locationFit) => {
                         const fitLabel = typeof locationFit.fit_label === 'string' && locationFit.fit_label
@@ -27768,7 +27918,7 @@ class FittingRoom {
         console.log('tfr-env', env);
         this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
         this.tfrShop = initShop(Number(this.shopId), env);
-        this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this));
+        this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this), this.onTryOnClick.bind(this));
     }
     get shop() {
         return this.tfrShop;
@@ -27867,6 +28017,10 @@ class FittingRoom {
     onFitInfoClick() {
         this.tfrModal.toFitInfo();
     }
+    async onTryOnClick(styleId, sizeId) {
+        const frames = await this.shop.tryOn(styleId, sizeId);
+        this.tfrModal.onTryOn(frames);
+    }
     onUserProfileChange(userProfile) {
         var _a, _b, _c, _d;
         switch (userProfile.avatar_status) {