@thefittingroom/shop-ui 1.5.2 → 1.5.4

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

@@ -0,0 +1,2 @@
+export declare const tfrDoor = "\n<svg class=\"tfr-door-icon\" width=\"68\" height=\"124\" viewBox=\"0 0 68 124\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z\" fill=\"currentColor\">\n  </path>\n  <path d=\"M52.8019 64.44C54.7791 64.44 56.3819 62.4387 56.3819 59.97C56.3819 57.5013 54.7791 55.5 52.8019 55.5C50.8248 55.5 49.2219 57.5013 49.2219 59.97C49.2219 62.4387 50.8248 64.44 52.8019 64.44Z\" fill=\"white\">\n</path>\n</svg>";
+export declare const userIcon = "<svg class=\"tfr-user-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_82_11365)\">\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n      d=\"M4.3125 4.78125C4.3125 3.02084 5.73959 1.59375 7.5 1.59375C9.26041 1.59375 10.6875 3.02084 10.6875 4.78125C10.6875 6.54166 9.26041 7.96875 7.5 7.96875C5.73959 7.96875 4.3125 6.54166 4.3125 4.78125ZM9.625 4.78125C9.625 3.60764 8.6736 2.65625 7.5 2.65625C6.32639 2.65625 5.375 3.60764 5.375 4.78125C5.375 5.95485 6.32639 6.90625 7.5 6.90625C8.6736 6.90625 9.625 5.95485 9.625 4.78125Z\"\n      fill=\"currentColor\" fill-opacity=\"0.7\" />\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n      d=\"M2.1875 13.1634C2.1875 10.5693 4.58181 8.5 7.5 8.5C10.4182 8.5 12.8125 10.5693 12.8125 13.1634C12.8125 16.1539 2.1875 16.1539 2.1875 13.1634ZM11.75 13.1634C11.75 11.1933 9.86303 9.5625 7.5 9.5625C5.13697 9.5625 3.25 11.1933 3.25 13.1634C3.25 13.7564 4.45689 14.126 5.96113 14.2721L6.31312 14.3019C7.08543 14.3577 7.91457 14.3577 8.68688 14.3019L9.03887 14.2721C10.5431 14.126 11.75 13.7564 11.75 13.1634Z\"\n      fill=\"currentColor\" fill-opacity=\"0.7\" />\n  </g>\n  <defs>\n    <clipPath id=\"clip0_82_11365\">\n      <rect width=\"16\" height=\"16\" fill=\"white\" />\n    </clipPath>\n  </defs>\n</svg>";

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.5.2 (2024-09-02T22:33:59.821Z)
+* thefittingroom v1.5.4 (2024-09-03T22:58:47.150Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v1.5.1 (2024-09-02T22:33:26.212Z)
+* thefittingroom v1.5.2 (2024-09-03T15:43:56.403Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 
@@ -26518,7 +26518,7 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css$9 = ".tfr-c-white{color:var(--tfr-white)}.tfr-c-brand{color:var(--tfr-brand-color)}.tfr-c-brand-bg{background-color:var(--tfr-brand-color)}.tfr-c-black{color:var(--tfr-black)}.tfr-c-black-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:var(--tfr-red)}";
 n(css$9,{});
 
-var css$8 = ".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:0 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;max-height:100vh;max-width:850px;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:350px;max-width:350px}.tfr-logo-box{margin:auto;max-height:400px;max-width:860px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;justify-content:center}.tfr-qr-code{width:200px}.tfr-space-above{margin-top:10px}.tfr-max-w-600{margin:auto;max-width:600px}#tfr-qr-border-box{align-items:center;border:2px solid var(--tfr-brand-color);border-radius:16px;display:flex;flex-direction:column;height:350px;justify-content:center;margin-left:20px;padding:0 30px;width:300px}.tfr-mobile-logo{height:60px}#email-input,#password-input{font-size:16px}";
+var css$8 = ".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:0 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;max-height:100vh;max-width:850px;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:350px;max-width:350px}.tfr-logo-box{margin:auto;max-height:400px;max-width:860px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;justify-content:center}.tfr-qr-code{width:200px}.tfr-space-above{margin-top:10px}.tfr-max-w-600{margin:auto;max-width:600px}#tfr-qr-border-box{align-items:center;border:2px solid var(--tfr-brand-color);border-radius:16px;display:flex;flex-direction:column;height:350px;justify-content:center;margin-left:20px;padding:0 30px;width:300px}.tfr-mobile-logo{height:60px}#email-input,#password-input{font-size:16px}.tfr-door-icon,.tfr-user-icon{fill:#209da7}";
 n(css$8,{});
 
 var css$7 = "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}";
@@ -27133,8 +27133,29 @@ 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';
+const tfrDoor = `
+<svg class="tfr-door-icon" width="68" height="124" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="currentColor">
+  </path>
+  <path d="M52.8019 64.44C54.7791 64.44 56.3819 62.4387 56.3819 59.97C56.3819 57.5013 54.7791 55.5 52.8019 55.5C50.8248 55.5 49.2219 57.5013 49.2219 59.97C49.2219 62.4387 50.8248 64.44 52.8019 64.44Z" fill="white">
+</path>
+</svg>`;
+const userIcon = `<svg class="tfr-user-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_82_11365)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M4.3125 4.78125C4.3125 3.02084 5.73959 1.59375 7.5 1.59375C9.26041 1.59375 10.6875 3.02084 10.6875 4.78125C10.6875 6.54166 9.26041 7.96875 7.5 7.96875C5.73959 7.96875 4.3125 6.54166 4.3125 4.78125ZM9.625 4.78125C9.625 3.60764 8.6736 2.65625 7.5 2.65625C6.32639 2.65625 5.375 3.60764 5.375 4.78125C5.375 5.95485 6.32639 6.90625 7.5 6.90625C8.6736 6.90625 9.625 5.95485 9.625 4.78125Z"
+      fill="currentColor" fill-opacity="0.7" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M2.1875 13.1634C2.1875 10.5693 4.58181 8.5 7.5 8.5C10.4182 8.5 12.8125 10.5693 12.8125 13.1634C12.8125 16.1539 2.1875 16.1539 2.1875 13.1634ZM11.75 13.1634C11.75 11.1933 9.86303 9.5625 7.5 9.5625C5.13697 9.5625 3.25 11.1933 3.25 13.1634C3.25 13.7564 4.45689 14.126 5.96113 14.2721L6.31312 14.3019C7.08543 14.3577 7.91457 14.3577 8.68688 14.3019L9.03887 14.2721C10.5431 14.126 11.75 13.7564 11.75 13.1634Z"
+      fill="currentColor" fill-opacity="0.7" />
+  </g>
+  <defs>
+    <clipPath id="clip0_82_11365">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</svg>`;
+
 class SizeRecComponent {
     constructor(sizeRecMainDivId, onSignInClick, onSignOutClick) {
         this.onSignInClick = onSignInClick;
@@ -27277,7 +27298,7 @@ class SizeRecComponent {
             </div>`;
     }
     renderLoginCta() {
-        return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Sign up or login to view</div>`;
+        return `<div class="tfr-size-rec-login-cta">${userIcon} Sign up or login to view</div>`;
     }
     renderGarmentLocations(locations) {
         const html = locations.map((location) => this.renderSizeRecTableRow(location, this.renderLoginCta())).join('');
@@ -27315,7 +27336,7 @@ class SizeRecComponent {
                         Recommended Size:
                         <div id="tfr-size-rec-size">
                           <div class="tfr-size-rec-login-cta">
-                            <img  src="${loginIconSrc}" /> Sign up or login to view
+                            ${userIcon} Sign up or login to view
                           </div>
                         </div>
                       </div>
@@ -27337,7 +27358,7 @@ class SizeRecComponent {
 
                       <div class="tfr-powered-by">
                         <div>Powered by</div>
-                        <div class="tfr-powered-by-logo"><img src="${doorLogoSrc}" /></div>
+                        <div class="tfr-powered-by-logo">${tfrDoor}</div>
                         <div class="tfr-powered-by-text-bold">The Fitting Room</div>
                       </div>
                     </div>
@@ -27433,8 +27454,11 @@ class TfrSizeRec {
                     size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).label,
                     locations: fit.measurement_location_fits
                         .map((locationFit) => {
+                        const fitLabel = typeof locationFit.fit_label === 'string' && locationFit.fit_label
+                            ? locationFit.fit_label
+                            : index.FitNames[locationFit.fit];
                         return {
-                            fit: index.FitNames[locationFit.fit],
+                            fit: fitLabel,
                             isPerfect: this.perfectFits.includes(locationFit.fit),
                             location: this.tfrShop.getMeasurementLocationName(locationFit.measurement_location),
                             sortOrder: this.tfrShop.getMeasurementLocationSortOrder(locationFit.measurement_location),