@thefittingroom/shop-ui 1.0.0 → 1.1.0

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

@@ -0,0 +1,45 @@
+import { TfrShop } from '@thefittingroom/sdk';
+export type RecommendedSize = {
+    recommended: string;
+    sizes: {
+        size: string;
+        locations: {
+            fit: string;
+            location: string;
+        }[];
+    }[];
+};
+export declare class SizeRecComponent {
+    private readonly tfrShop;
+    private readonly onSignInClick;
+    private readonly onSignOutClick;
+    private _sku;
+    private tfrSizeRecActionLogin;
+    private tfrSizeRecActionLogout;
+    private tfrSizeRecLoading;
+    private tfrSizeRecommendationError;
+    private tfrSizeRecommendationsContainer;
+    private tfrSizeRecSelect;
+    private tfrSizeRecSize;
+    private tfrSizeRecTable;
+    private redraw;
+    constructor(sizeRecMainDivId: string, tfrShop: TfrShop, onSignInClick: () => void, onSignOutClick: () => void);
+    get sku(): string;
+    setSku(sku: string): void;
+    setIsLoggedIn(isLoggedIn: boolean): void;
+    setLoading(isLoading: boolean): void;
+    setGarmentLocations(locations: string[]): void;
+    setRecommendedSize({ recommended, sizes }: RecommendedSize): void;
+    setError(error: string): void;
+    private init;
+    private setElements;
+    private bindEvents;
+    private onSizeRecSelectClick;
+    private renderSizeRec;
+    private renderSizeRecTable;
+    private renderSizeRecSelect;
+    private renderSizeRecTableRow;
+    private renderLoginCta;
+    private renderGarmentLocations;
+    private render;
+}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.0.0 (2024-02-16T17:02:27.996Z)
+* thefittingroom v1.1.0 (2024-02-27T19:18:33.918Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v1.0.3 (2024-02-16T14:55:02.187Z)
+* thefittingroom v1.1.0 (2024-02-16T20:34:26.286Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 
@@ -22834,19 +22834,11 @@ class FirebaseUser {
         const userProfile = await Ol(Aa(this.firestore, 'users', this.id));
         return userProfile.data();
     }
-    watchUserProfileForChanges(predicate, timeout) {
+    watchUserProfileForChanges(callback) {
         let unsub;
         const q = sl(Ta(this.firestore, 'users'), rl(Eh(), '==', this.id));
-        const cancel = setTimeout(() => unsub(), timeout);
-        return new Promise((resolve) => {
-            unsub = jl(q, async (snapshot) => {
-                if (!(await predicate(snapshot)))
-                    return;
-                clearTimeout(cancel);
-                unsub();
-                resolve(snapshot.docs[0].data());
-            });
-        });
+        unsub = jl(q, (snapshot) => callback(snapshot.docs[0].data()));
+        return () => unsub();
     }
     async login(username, password) {
         if (this.auth.currentUser)
@@ -23487,16 +23479,22 @@ const validatePassword = (password) => {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$6 = ".tfr-bg-aquamarina-strong{background-color:#209da7}.tfr-c-white{color:#fff}.tfr-c-brand{color:#209da7}.tfr-c-dark{color:#000}.tfr-c-dark-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:red}";
+var css$8 = ".tfr-bg-aquamarina-strong{background-color:#209da7}.tfr-c-white{color:#fff}.tfr-c-brand{color:#209da7}.tfr-c-dark{color:#000}.tfr-c-dark-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:red}";
+n(css$8,{});
+
+var css$7 = ".tfr-home-button-container{display:flex;flex-wrap:wrap;margin:20px}.tfr-home-button-container>button{border:0;cursor:pointer;height:60px;margin:20px;width:200px}.tfr-home-button-container>button:hover{background-color:#e6e6e6}[data-tfr=hidden]{display:none}.tfr-modal{background-color:rgba(0,0,0,.53);display:flex;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.tfr-modal-content{margin:auto;text-align:center;width:90%}.tfr-modal-content-flex{align-items:center;display:flex}.tfr-modal-content-container{background-color:#fff;border:1px solid #434343;border-radius:0;box-shadow:0 6px 6px #00000029;line-height:normal;margin:auto;max-height:100vh;max-width:709px;overflow:auto;width:100%}.tfr-close-container{text-align:end}.tfr-close{color:#aaa;font-size:28px;font-weight:700;height:50px;width:50px}.tfr-close:focus,.tfr-close:hover{color:#000;text-decoration:none}.tfr-cursor:hover{cursor:pointer}.tfr-underline{text-decoration:underline}.tfr-standard-button{border:0;border-radius:3px;color:#fff;height:43px;width:138px}.tfr-logo-container{align-items:center;display:flex}.tfr-modal-title-logo-container{align-items:center;display:flex;justify-content:center}.tfr-girl-clothes{display:inline-block;height:316px;width:253px}.tfr-t-a-center{text-align:center}.tfr-w-70-p{width:70%}.tfr-w-80-p{width:80%}.tfr-w-85-p{width:85%}.tfr-w-150{width:150px}.tfr-h-150{height:150px}.tfr-d-none{display:none}.tfr-d-block{display:block}.tfr-d-flex{display:flex}.tfr-how-it-works-item{align-items:center;display:flex;justify-items:center}.tfr-try-on-content{margin-left:60px}#tfr-tryon-image{max-width:30vw}.progress-bar{background-color:#fff;border:1px solid #bdbdbd;height:10px;margin:15px auto 0;width:55%}.progress-bar-fill{animation-duration:120s;animation-name:progress;background-color:#209da7;color:#fff;display:block;font-size:16px;height:100%;text-align:center;transition:width .6s linear}#tfr-video{height:100%;max-height:390px;max-width:390px}.tfr-logo-box{aspect-ratio:1;margin:auto;max-height:430px;max-width:430px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;justify-content:center}";
+n(css$7,{});
+
+var css$6 = "input{border:none;box-shadow:none!important;width:100%}input:focus,select:focus,textarea:focus{border:none;outline:none}.tfr-fieldset{margin-left:auto;margin-right:auto;width:65%}.tfr-fieldset,.tfr-fieldset-inline{border-color:rgba(0,0,0,.5);border-radius:10px;border-width:1px;padding:5px 10px 10px;text-align:left}.tfr-fieldset-inline{margin-right:10px;width:250px}.tfr-fieldset-err{border-color:red}";
 n(css$6,{});
 
-var css$5 = ".tfr-home-button-container{display:flex;flex-wrap:wrap;margin:20px}.tfr-home-button-container>button{border:0;cursor:pointer;height:60px;margin:20px;width:200px}.tfr-home-button-container>button:hover{background-color:#e6e6e6}[data-tfr=hidden]{display:none}.tfr-modal{background-color:rgba(0,0,0,.53);display:flex;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.tfr-modal-content{margin:auto;text-align:center;width:90%}.tfr-modal-content-flex{align-items:center;display:flex}.tfr-modal-content-container{background-color:#fff;border:1px solid #434343;border-radius:0;box-shadow:0 6px 6px #00000029;line-height:normal;margin:auto;max-height:100vh;max-width:709px;overflow:auto;width:100%}.tfr-close-container{text-align:end}.tfr-close{color:#aaa;font-size:28px;font-weight:700;height:50px;width:50px}.tfr-close:focus,.tfr-close:hover{color:#000;text-decoration:none}.tfr-cursor:hover{cursor:pointer}.tfr-underline{text-decoration:underline}.tfr-standard-button{border:0;border-radius:3px;color:#fff;height:43px;width:138px}.tfr-logo-container{align-items:center;display:flex}.tfr-modal-title-logo-container{align-items:center;display:flex;justify-content:center}.tfr-girl-clothes{display:inline-block;height:316px;width:253px}.tfr-t-a-center{text-align:center}.tfr-w-70-p{width:70%}.tfr-w-80-p{width:80%}.tfr-w-85-p{width:85%}.tfr-w-150{width:150px}.tfr-h-150{height:150px}.tfr-d-none{display:none}.tfr-d-block{display:block}.tfr-d-flex{display:flex}.tfr-how-it-works-item{align-items:center;display:flex;justify-items:center}.tfr-try-on-content{margin-left:60px}#tfr-tryon-image{max-width:30vw}.progress-bar{background-color:#fff;border:1px solid #bdbdbd;height:10px;margin:15px auto 0;width:55%}.progress-bar-fill{animation-duration:120s;animation-name:progress;background-color:#209da7;color:#fff;display:block;font-size:16px;height:100%;text-align:center;transition:width .6s linear}#tfr-video{height:100%;max-height:390px;max-width:390px}.tfr-logo-box{aspect-ratio:1;margin:auto;max-height:430px;max-width:430px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;justify-content:center}";
+var css$5 = ".lds-ellipsis{display:inline-block;height:80px;position:relative;width:80px}.lds-ellipsis div{animation-timing-function:cubic-bezier(0,1,1,0);background:#209da7;border-radius:50%;display:block;height:13px;position:absolute;top:33px;width:13px}.lds-ellipsis div:first-child{animation:lds-ellipsis1 .6s infinite;left:8px}.lds-ellipsis div:nth-child(2){animation:lds-ellipsis2 .6s infinite;left:8px}.lds-ellipsis div:nth-child(3){animation:lds-ellipsis2 .6s infinite;left:32px}.lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite;left:56px}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}";
 n(css$5,{});
 
-var css$4 = "input{border:none;box-shadow:none!important;width:100%}input:focus,select:focus,textarea:focus{border:none;outline:none}.tfr-fieldset{margin-left:auto;margin-right:auto;width:65%}.tfr-fieldset,.tfr-fieldset-inline{border-color:rgba(0,0,0,.5);border-radius:10px;border-width:1px;padding:5px 10px 10px;text-align:left}.tfr-fieldset-inline{margin-right:10px;width:250px}.tfr-fieldset-err{border-color:red}";
+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 = "@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}}";
+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}";
 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%}";
@@ -36349,19 +36347,13 @@ const TryOnModal = (props) => {
     };
 };
 
-class FittingRoomNav {
+class TfrModal {
     constructor(modalDivId, signIn, forgotPassword, submitTel) {
         this.signIn = signIn;
         this.forgotPassword = forgotPassword;
         this.submitTel = submitTel;
         this.manager = InitModalManager(modalDivId);
     }
-    get sku() {
-        return this._sku;
-    }
-    setSku(sku) {
-        this._sku = sku;
-    }
     close() {
         this.manager.close();
     }
@@ -36425,6 +36417,241 @@ class FittingRoomNav {
     }
 }
 
+const svgSrc = '';
+class SizeRecComponent {
+    constructor(sizeRecMainDivId, tfrShop, onSignInClick, onSignOutClick) {
+        this.tfrShop = tfrShop;
+        this.onSignInClick = onSignInClick;
+        this.onSignOutClick = onSignOutClick;
+        this._sku = '';
+        this.redraw = null;
+        this.init(sizeRecMainDivId);
+    }
+    get sku() {
+        return this._sku;
+    }
+    setSku(sku) {
+        this._sku = sku;
+    }
+    setIsLoggedIn(isLoggedIn) {
+        if (isLoggedIn) {
+            this.tfrSizeRecActionLogin.style.display = 'none';
+            this.tfrSizeRecActionLogout.style.display = 'block';
+        }
+        else {
+            this.tfrSizeRecActionLogin.style.display = 'block';
+            this.tfrSizeRecActionLogout.style.display = 'none';
+        }
+    }
+    setLoading(isLoading) {
+        if (isLoading) {
+            this.tfrSizeRecLoading.style.display = 'block';
+            this.tfrSizeRecommendationsContainer.style.display = 'none';
+        }
+        else {
+            this.tfrSizeRecLoading.style.display = 'none';
+            this.tfrSizeRecommendationsContainer.style.display = 'flex';
+        }
+    }
+    setGarmentLocations(locations) {
+        this.renderGarmentLocations(locations);
+        this.tfrSizeRecSelect.style.display = 'none';
+    }
+    setRecommendedSize({ recommended, sizes }) {
+        this.renderSizeRec(recommended, sizes);
+        this.tfrSizeRecSelect.style.display = 'flex';
+    }
+    setError(error) {
+        this.tfrSizeRecommendationError.innerHTML = error;
+    }
+    init(sizeRecMainDivId) {
+        const sizeRecMainDiv = document.getElementById(sizeRecMainDivId);
+        if (!sizeRecMainDiv)
+            throw new Error('Size rec main div not found');
+        this.render(sizeRecMainDiv);
+        this.setElements();
+        this.bindEvents();
+    }
+    setElements() {
+        this.tfrSizeRecActionLogin = document.getElementById('tfr-size-rec-action-login');
+        this.tfrSizeRecActionLogout = document.getElementById('tfr-size-rec-action-logout');
+        this.tfrSizeRecTable = document.getElementById('tfr-size-rec-table');
+        this.tfrSizeRecommendationError = document.getElementById('tfr-size-recommendation-error');
+        this.tfrSizeRecSize = document.getElementById('tfr-size-rec-size');
+        this.tfrSizeRecSelect = document.getElementById('tfr-size-rec-select');
+        this.tfrSizeRecLoading = document.getElementById('tfr-size-rec-loading');
+        this.tfrSizeRecommendationsContainer = document.getElementById('tfr-size-recommendations-container');
+    }
+    bindEvents() {
+        this.tfrSizeRecActionLogin.addEventListener('click', this.onSignInClick);
+        this.tfrSizeRecActionLogout.addEventListener('click', this.onSignOutClick);
+        this.tfrSizeRecSelect.addEventListener('click', this.onSizeRecSelectClick.bind(this));
+    }
+    onSizeRecSelectClick(e) {
+        const target = e.target;
+        if (!target.classList.contains('tfr-size-rec-select-button'))
+            return;
+        e.preventDefault();
+        const selectedIndex = Number(target.getAttribute('data-index'));
+        if (Number.isNaN(selectedIndex))
+            return;
+        const allButtons = document.querySelectorAll('.tfr-size-rec-select-button');
+        allButtons.forEach((button) => button.classList.remove('active'));
+        allButtons.item(selectedIndex).classList.add('active');
+        this.redraw(selectedIndex);
+    }
+    renderSizeRec(recommended, sizes) {
+        this.tfrSizeRecSize.innerHTML = `&nbsp;${recommended}`;
+        const selectedSizeIndex = sizes.findIndex(({ size }) => size === recommended);
+        this.redraw = (index) => this.renderSizeRecTable(sizes, index);
+        this.redraw(selectedSizeIndex);
+        this.renderSizeRecSelect(sizes, selectedSizeIndex);
+    }
+    renderSizeRecTable(sizes, index) {
+        const { locations } = sizes[index];
+        const html = locations
+            .sort(({ location: a }, { location: b }) => (a < b ? -1 : 1))
+            .map(({ location, fit }) => this.renderSizeRecTableRow(location, fit))
+            .join('');
+        this.tfrSizeRecTable.innerHTML = html;
+    }
+    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>`)
+            .join('');
+        this.tfrSizeRecSelect.innerHTML = html;
+    }
+    renderSizeRecTableRow(location, fit) {
+        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' : ''}">
+                ${fit}
+              </div>
+            </div>`;
+    }
+    renderLoginCta() {
+        return `<div class="tfr-size-rec-login-cta"><img src="${svgSrc}" /> Login to view</div>`;
+    }
+    renderGarmentLocations(locations) {
+        const html = locations
+            .sort()
+            .map((location) => this.renderSizeRecTableRow(location, this.renderLoginCta()))
+            .join('');
+        this.tfrSizeRecTable.innerHTML = html;
+        this.tfrSizeRecSize.innerHTML = this.renderLoginCta();
+    }
+    render(sizeRecMainDiv) {
+        const body = `<div id="tfr-size-recommendations">
+                    <div id="tfr-size-rec-loading">
+                      <div class="lds-ellipsis">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                      </div>
+                    </div>
+                    <div id="tfr-size-recommendations-container">
+                      <img id="tfr-size-rec-login-svg" src="{{ 'login-icon.svg' | asset_url }}" />
+                      <div id="tfr-size-rec-title">
+                        Recommend Size:
+                        <div id="tfr-size-rec-size">
+                          <div class="tfr-size-rec-login-cta">
+                            <img  src="{{ 'login-icon.svg' | asset_url }}" /> Login to view
+                          </div>
+                        </div>
+                      </div>
+
+                      <div id="tfr-size-rec-select"></div>
+
+                      <div id="tfr-size-rec-subtitle">How it fits</div>
+
+                      <div id="tfr-size-rec-table"></div>
+
+                      <div id="tfr-size-rec-action">
+                        <div id="tfr-size-rec-action-login">Login to see your recommended size</div>
+                        <div id="tfr-size-rec-action-logout">Sign out of the Fitting Room</div>
+                      </div>
+                    </div>
+                  </div>`;
+        sizeRecMainDiv.innerHTML = body;
+    }
+}
+
+class TfrSizeRec {
+    constructor(sizeRecMainDivId, tfrShop, onSignInClick, onSignOutClick) {
+        this.tfrShop = tfrShop;
+        this.onSignInClick = onSignInClick;
+        this.onSignOutClick = onSignOutClick;
+        this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.tfrShop, this.onSignInClick, this.onSignOutClick);
+    }
+    get sku() {
+        return this.sizeRecComponent.sku;
+    }
+    setSku(sku) {
+        this.sizeRecComponent.setSku(sku);
+    }
+    setIsLoggedIn(isLoggedIn) {
+        this.sizeRecComponent.setIsLoggedIn(isLoggedIn);
+    }
+    async setGarmentLocations() {
+        this.sizeRecComponent.setLoading(true);
+        const locations = await this.getGarmentLocations();
+        if (!locations)
+            return;
+        this.sizeRecComponent.setGarmentLocations(locations);
+        this.sizeRecComponent.setLoading(false);
+    }
+    async setRecommendedSize() {
+        this.sizeRecComponent.setLoading(true);
+        const sizes = await this.getRecommenedSize();
+        if (!sizes)
+            return;
+        this.sizeRecComponent.setRecommendedSize(sizes);
+        this.sizeRecComponent.setLoading(false);
+    }
+    async getGarmentLocations() {
+        try {
+            const locations = await this.tfrShop.getMeasurementLocationsFromSku(this.sku);
+            return locations;
+        }
+        catch (error) {
+            this.sizeRecComponent.setError(error.message);
+            return null;
+        }
+    }
+    async getRecommenedSize() {
+        try {
+            const colorwaySizeAsset = await this.tfrShop.getColorwaySizeAssetFromSku(this.sku);
+            const sizes = await this.getRecommendedSizes(String(colorwaySizeAsset.style_id));
+            return sizes;
+        }
+        catch (error) {
+            this.sizeRecComponent.setError(error.message);
+            return null;
+        }
+    }
+    async getRecommendedSizes(styleId) {
+        const sizeRec = await this.tfrShop.getRecommendedSizes(styleId);
+        if (!sizeRec)
+            return null;
+        return {
+            recommended: sizeRec.recommended_size.size_value.size,
+            sizes: sizeRec.fits.map((fit) => {
+                return {
+                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).size_value.size,
+                    locations: fit.measurement_location_fits.map((locationFit) => {
+                        return {
+                            fit: index.FitNames[locationFit.fit],
+                            location: index.MeasurementLocationName[locationFit.measurement_location],
+                        };
+                    }),
+                };
+            }),
+        };
+    }
+}
+
 var AvatarState;
 (function (AvatarState) {
     AvatarState["NOT_CREATED"] = "NOT_CREATED";
@@ -36433,44 +36660,65 @@ var AvatarState;
 })(AvatarState || (AvatarState = {}));
 
 class FittingRoom {
-    constructor(shopId, modalDivId, hooks = {}, _env) {
+    constructor(shopId, modalDivId, sizeRecMainDivId, hooks = {}, _env) {
         this.shopId = shopId;
         this.hooks = hooks;
+        this.isLoggedIn = false;
+        this.unsub = null;
         // prettier-ignore
         const env = _env
             ? _env
             : typeof process !== 'undefined'
                 ? process.env.NODE_ENV
                 : 'dev';
-        this.nav = new FittingRoomNav(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
+        this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
         this.tfrShop = initShop(Number(this.shopId), env);
-    }
-    get sku() {
-        return this.nav.sku;
+        this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this));
     }
     get shop() {
         return this.tfrShop;
     }
-    async onInit() {
-        const loggedIn = await this.tfrShop.onInit();
-        if (loggedIn && this.hooks.onLogin)
-            this.hooks.onLogin();
-        if (!loggedIn && this.hooks.onLogout)
-            this.hooks.onLogout();
-        return loggedIn;
+    get sku() {
+        return this.tfrSizeRec.sku;
     }
     setSku(sku) {
-        this.nav.setSku(sku);
+        this.tfrSizeRec.setSku(sku);
+        if (this.isLoggedIn)
+            this.tfrSizeRec.setRecommendedSize();
+        else
+            this.tfrSizeRec.setGarmentLocations();
+    }
+    async onInit() {
+        var _a, _b;
+        this.isLoggedIn = await this.tfrShop.onInit();
+        this.tfrSizeRec.setIsLoggedIn(this.isLoggedIn);
+        if (this.isLoggedIn) {
+            if ((_a = this.hooks) === null || _a === void 0 ? void 0 : _a.onLogin)
+                this.hooks.onLogin();
+            this.subscribeToProfileChanges();
+        }
+        else {
+            if ((_b = this.hooks) === null || _b === void 0 ? void 0 : _b.onLogout)
+                this.hooks.onLogout();
+            this.unsubscribeFromProfileChanges();
+        }
+        return this.isLoggedIn;
     }
     close() {
-        this.nav.close();
+        this.tfrModal.close();
     }
     async signOut() {
+        var _a;
         await this.tfrShop.user.logout();
-        if (this.hooks.onLogout)
+        if ((_a = this.hooks) === null || _a === void 0 ? void 0 : _a.onLogout)
             this.hooks.onLogout();
+        this.isLoggedIn = false;
+        this.tfrSizeRec.setIsLoggedIn(false);
+        this.tfrSizeRec.setGarmentLocations();
+        this.unsubscribeFromProfileChanges();
     }
     async signIn(username, password, validationError) {
+        var _a;
         if (username.length == 0 || password.length == 0)
             return validationError(L.UsernameOrPasswordEmpty);
         if (!validateEmail(username))
@@ -36479,34 +36727,17 @@ class FittingRoom {
             return validationError(L.PasswordError);
         try {
             await this.tfrShop.user.login(username, password);
+            if ((_a = this.hooks) === null || _a === void 0 ? void 0 : _a.onLogin)
+                this.hooks.onLogin();
+            this.tfrModal.close();
+            this.isLoggedIn = true;
+            this.tfrSizeRec.setIsLoggedIn(true);
+            this.tfrSizeRec.setRecommendedSize();
+            this.subscribeToProfileChanges();
         }
         catch (e) {
             return validationError(L.UsernameOrPasswordIncorrect);
         }
-        if (this.hooks.onLogin)
-            this.hooks.onLogin();
-        this.nav.close();
-        try {
-            const userProfile = await this.tfrShop.user.getUserProfile();
-            switch (userProfile.avatar_status) {
-                case AvatarState.NOT_CREATED:
-                    this.nav.onNotCreated();
-                    break;
-                case AvatarState.PENDING:
-                    if (this.hooks.onLoading)
-                        this.hooks.onLoading();
-                    break;
-                case AvatarState.CREATED:
-                    console.debug('avatar_state: created');
-                    break;
-                default:
-                    this.nav.onError(L.SomethingWentWrong);
-                    break;
-            }
-        }
-        catch (_a) {
-            this.nav.onError(L.SomethingWentWrong);
-        }
     }
     setBrandUserId(brandUserId) {
         this.tfrShop.user.setBrandUserId(brandUserId);
@@ -36514,49 +36745,64 @@ class FittingRoom {
     async submitTel(tel) {
         try {
             await this.tfrShop.submitTelephoneNumber(tel);
-            this.nav.toSignIn();
+            this.tfrModal.toSignIn();
         }
         catch (_a) {
-            this.nav.onError(L.SomethingWentWrong);
+            this.tfrModal.onError(L.SomethingWentWrong);
         }
     }
     async forgotPassword(email) {
         await this.tfrShop.user.sendPasswordResetEmail(email);
-        this.nav.toSignIn();
+        this.tfrModal.toSignIn();
     }
     async passwordReset(code, newPassword) {
         await this.tfrShop.user.confirmPasswordReset(code, newPassword);
-        this.nav.toPasswordReset();
+        this.tfrModal.toPasswordReset();
     }
     async getMeasurementLocationsFromSku(sku) {
         return this.tfrShop.getMeasurementLocationsFromSku(sku);
     }
     onSignInClick() {
-        this.nav.toScan();
+        this.tfrModal.toScan();
+    }
+    onUserProfileChange(userProfile) {
+        var _a, _b, _c, _d;
+        switch (userProfile.avatar_status) {
+            case AvatarState.NOT_CREATED:
+                if ((_a = this.hooks) === null || _a === void 0 ? void 0 : _a.onError)
+                    this.hooks.onError(L.DontHaveAvatar);
+                this.tfrModal.onNotCreated();
+                break;
+            case AvatarState.PENDING:
+                if ((_b = this.hooks) === null || _b === void 0 ? void 0 : _b.onLoading)
+                    this.hooks.onLoading();
+                break;
+            case AvatarState.CREATED:
+                if ((_c = this.hooks) === null || _c === void 0 ? void 0 : _c.onLoadingComplete)
+                    this.hooks.onLoadingComplete();
+                break;
+            default:
+                if ((_d = this.hooks) === null || _d === void 0 ? void 0 : _d.onError)
+                    this.hooks.onError(L.SomethingWentWrong);
+                this.tfrModal.onError(L.SomethingWentWrong);
+                break;
+        }
     }
-    async getRecommendedSizes(styleId) {
-        const sizeRec = await this.tfrShop.getRecommendedSizes(styleId);
-        if (!sizeRec)
-            return null;
-        return {
-            recommended: sizeRec.recommended_size.size_value.size,
-            sizes: sizeRec.fits.map((fit) => {
-                return {
-                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).size_value.size,
-                    locations: fit.measurement_location_fits.map((locationFit) => {
-                        return {
-                            fit: index.FitNames[locationFit.fit],
-                            location: index.MeasurementLocationName[locationFit.measurement_location],
-                        };
-                    }),
-                };
-            }),
-        };
+    subscribeToProfileChanges() {
+        if (this.unsub)
+            return;
+        this.unsub = this.tfrShop.user.watchUserProfileForChanges((userProfile) => this.onUserProfileChange(userProfile));
+    }
+    unsubscribeFromProfileChanges() {
+        if (!this.unsub)
+            return;
+        this.unsub();
+        this.unsub = null;
     }
 }
 
-const initFittingRoom = async (shopId, modalDivId, hooks, env = 'dev') => {
-    const tfr = new FittingRoom(shopId, modalDivId, hooks, env);
+const initFittingRoom = async (shopId, modalDivId, sizeRecMainDivId, hooks, env = 'dev') => {
+    const tfr = new FittingRoom(shopId, modalDivId, sizeRecMainDivId, hooks, env);
     await tfr.onInit();
     return tfr;
 };