@thefittingroom/shop-ui 1.1.6 → 1.1.8

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

@@ -1,4 +1,3 @@
-import { TfrShop } from '@thefittingroom/sdk';
 export type RecommendedSize = {
     recommended: string;
     sizes: {
@@ -10,10 +9,12 @@ export type RecommendedSize = {
     }[];
 };
 export declare class SizeRecComponent {
-    private readonly tfrShop;
     private readonly onSignInClick;
     private readonly onSignOutClick;
     private _sku;
+    private isLoggedIn;
+    private tfrSizeRecTitle;
+    private tfrSizeRecSubtitle;
     private tfrSizeRecActionLogin;
     private tfrSizeRecActionLogout;
     private tfrSizeRecLoading;
@@ -23,14 +24,14 @@ export declare class SizeRecComponent {
     private tfrSizeRecSize;
     private tfrSizeRecTable;
     private redraw;
-    constructor(sizeRecMainDivId: string, tfrShop: TfrShop, onSignInClick: () => void, onSignOutClick: () => void);
+    constructor(sizeRecMainDivId: string, 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;
+    setError(): void;
     private init;
     private setElements;
     private bindEvents;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.1.6 (2024-04-05T19:16:24.483Z)
+* thefittingroom v1.1.8 (2024-05-16T03:17:08.880Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v1.1.3 (2024-04-05T19:13:45.167Z)
+* thefittingroom v1.1.5 (2024-05-16T02:24:56.143Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 
@@ -23504,7 +23504,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}";
+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%}";
@@ -36435,11 +36435,11 @@ class TfrModal {
 const loginIconSrc = 'https://assets.dev.thefittingroom.xyz/shop-sdk/assets/login-icon.svg';
 const doorLogoSrc = 'https://assets.dev.thefittingroom.xyz/shop-sdk/assets/tfr-door-brand.svg';
 class SizeRecComponent {
-    constructor(sizeRecMainDivId, tfrShop, onSignInClick, onSignOutClick) {
-        this.tfrShop = tfrShop;
+    constructor(sizeRecMainDivId, onSignInClick, onSignOutClick) {
         this.onSignInClick = onSignInClick;
         this.onSignOutClick = onSignOutClick;
         this._sku = '';
+        this.isLoggedIn = false;
         this.redraw = null;
         this.init(sizeRecMainDivId);
     }
@@ -36450,9 +36450,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';
@@ -36470,6 +36473,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';
     }
@@ -36477,8 +36485,13 @@ class SizeRecComponent {
         this.renderSizeRec(recommended, sizes);
         this.tfrSizeRecSelect.style.display = 'flex';
     }
-    setError(error) {
-        this.tfrSizeRecommendationError.innerHTML = error;
+    setError() {
+        this.tfrSizeRecTitle.style.display = 'none';
+        this.tfrSizeRecSubtitle.style.display = 'none';
+        if (!this.isLoggedIn)
+            return;
+        this.tfrSizeRecommendationError.style.display = 'block';
+        this.tfrSizeRecommendationError.innerHTML = 'No recommended size found.';
     }
     init(sizeRecMainDivId) {
         const sizeRecMainDiv = document.getElementById(sizeRecMainDivId);
@@ -36489,6 +36502,8 @@ class SizeRecComponent {
         this.bindEvents();
     }
     setElements() {
+        this.tfrSizeRecTitle = document.getElementById('tfr-size-rec-title');
+        this.tfrSizeRecSubtitle = document.getElementById('tfr-size-rec-subtitle');
         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');
@@ -36568,12 +36583,12 @@ class SizeRecComponent {
                       </div>
                     </div>
                     <div id="tfr-size-recommendations-container">
-                      <img id="tfr-size-rec-login-svg" src="{{ 'login-icon.svg' | asset_url }}" />
+                      <img id="tfr-size-rec-login-svg" src="${loginIconSrc}" />
                       <div id="tfr-size-rec-title">
                         Recommended Size:
                         <div id="tfr-size-rec-size">
                           <div class="tfr-size-rec-login-cta">
-                            <img  src="{{ 'login-icon.svg' | asset_url }}" /> Login to view
+                            <img  src="${loginIconSrc}" /> Login to view
                           </div>
                         </div>
                       </div>
@@ -36595,7 +36610,8 @@ class SizeRecComponent {
                         <div class="tfr-powered-by-text-bold">The Fitting Room</div>
                       </div>
                     </div>
-                  </div>`;
+                  </div>
+                  <div id="tfr-size-recommendation-error"></div>`;
         sizeRecMainDiv.innerHTML = body;
     }
 }
@@ -36605,7 +36621,7 @@ class TfrSizeRec {
         this.tfrShop = tfrShop;
         this.onSignInClick = onSignInClick;
         this.onSignOutClick = onSignOutClick;
-        this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.tfrShop, this.onSignInClick, this.onSignOutClick);
+        this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick);
     }
     get sku() {
         return this.sizeRecComponent.sku;
@@ -36619,16 +36635,19 @@ class TfrSizeRec {
     async setGarmentLocations() {
         this.sizeRecComponent.setLoading(true);
         const locations = await this.getGarmentLocations();
-        if (!locations)
-            return;
-        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)
+        if (!sizes) {
+            console.error('No sizes found for sku');
+            this.sizeRecComponent.setLoading(false);
+            this.sizeRecComponent.setError();
             return;
+        }
         this.sizeRecComponent.setRecommendedSize(sizes);
         this.sizeRecComponent.setLoading(false);
     }
@@ -36638,7 +36657,8 @@ class TfrSizeRec {
             return locations;
         }
         catch (error) {
-            this.sizeRecComponent.setError(error.message);
+            console.error(error);
+            this.sizeRecComponent.setError();
             return null;
         }
     }
@@ -36649,7 +36669,8 @@ class TfrSizeRec {
             return sizes;
         }
         catch (error) {
-            this.sizeRecComponent.setError(error.message);
+            console.error(error);
+            this.sizeRecComponent.setError();
             return null;
         }
     }
@@ -36658,10 +36679,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],