@thefittingroom/shop-ui 1.1.6 → 1.1.7

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,11 @@ export type RecommendedSize = {
     }[];
 };
 export declare class SizeRecComponent {
-    private readonly tfrShop;
     private readonly onSignInClick;
     private readonly onSignOutClick;
     private _sku;
+    private tfrSizeRecTitle;
+    private tfrSizeRecSubtitle;
     private tfrSizeRecActionLogin;
     private tfrSizeRecActionLogout;
     private tfrSizeRecLoading;
@@ -23,7 +23,7 @@ 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;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.1.6 (2024-04-05T19:16:24.483Z)
+* thefittingroom v1.1.7 (2024-05-16T02:29:04.341Z)
 * 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>.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,8 +36435,7 @@ 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 = '';
@@ -36478,6 +36477,9 @@ class SizeRecComponent {
         this.tfrSizeRecSelect.style.display = 'flex';
     }
     setError(error) {
+        this.tfrSizeRecTitle.style.display = 'none';
+        this.tfrSizeRecSubtitle.style.display = 'none';
+        this.tfrSizeRecommendationError.style.display = 'block';
         this.tfrSizeRecommendationError.innerHTML = error;
     }
     init(sizeRecMainDivId) {
@@ -36489,6 +36491,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 +36572,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 +36599,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 +36610,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;
@@ -36620,15 +36625,18 @@ class TfrSizeRec {
         this.sizeRecComponent.setLoading(true);
         const locations = await this.getGarmentLocations();
         if (!locations)
-            return;
+            return this.sizeRecComponent.setLoading(false);
         this.sizeRecComponent.setGarmentLocations(locations);
         this.sizeRecComponent.setLoading(false);
     }
     async setRecommendedSize() {
         this.sizeRecComponent.setLoading(true);
         const sizes = await this.getRecommenedSize();
-        if (!sizes)
+        if (!sizes) {
+            this.sizeRecComponent.setLoading(false);
+            this.sizeRecComponent.setError('No recommended size found.');
             return;
+        }
         this.sizeRecComponent.setRecommendedSize(sizes);
         this.sizeRecComponent.setLoading(false);
     }
@@ -36638,7 +36646,7 @@ class TfrSizeRec {
             return locations;
         }
         catch (error) {
-            this.sizeRecComponent.setError(error.message);
+            this.sizeRecComponent.setError(error.message || error.error);
             return null;
         }
     }
@@ -36649,7 +36657,7 @@ class TfrSizeRec {
             return sizes;
         }
         catch (error) {
-            this.sizeRecComponent.setError(error.message);
+            this.sizeRecComponent.setError(error.message || error.error);
             return null;
         }
     }