@thefittingroom/shop-ui 1.4.4 → 1.4.6

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

@@ -14,6 +14,7 @@ export declare class SizeRecComponent {
     private readonly onSignOutClick;
     private _sku;
     private isLoggedIn;
+    private tfrSizeHowItFits;
     private tfrSizeRecTitle;
     private tfrSizeRecSubtitle;
     private tfrSizeRecActionLogin;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.4.4 (2024-07-24T23:25:08.588Z)
+* thefittingroom v1.4.6 (2024-08-02T18:18:06.336Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -47,7 +47,7 @@ const InitImageSlider = (sliderID, onChange) => {
 };
 
 /*!
-* thefittingroom v1.4.1 (2024-07-24T23:18:17.347Z)
+* thefittingroom v1.4.2 (2024-07-24T23:29:32.892Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 
@@ -25535,7 +25535,7 @@ class TfrShop {
     async getMeasurementLocations() {
         const locations = await this.fetchMeasurementLocations();
         locations.forEach((location) => {
-            this.measurementLocations.set(location.name, location.label);
+            this.measurementLocations.set(location.name, location.garment_label);
         });
     }
     async fetchMeasurementLocations() {
@@ -26013,7 +26013,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: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}.tfr-qr-code{width:50%}.tfr-space-above{margin-top:10px}";
+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: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}.tfr-qr-code{width:150px}.tfr-space-above{margin-top:10px}";
 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}";
@@ -26321,20 +26321,25 @@ const ScanCodeModal = (props) => {
         (_b = document.getElementById('tfr-app-store')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onCtaClickApple);
         (_c = document.getElementById('tfr-google-play')) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', onCtaClickGoogle);
     };
-    const renderCtaText = () => (isMobile ? L.ClickHereToDownload : L.ScanQrToDownload);
-    const renderImages = () => {
-        const base = 'https://assets.dev.thefittingroom.xyz/images/';
-        if (isMobile)
-            return `
-        <img src="${base}apple.png" id="tfr-app-store" />
-        <img src="${base}google.png" id="tfr-google-play" />
-      `;
-        return `<img src="${base}qr.png" class="tfr-qr-code" />`;
-    };
+    const imageBaseUrl = 'https://assets.dev.thefittingroom.xyz/images/';
+    const renderMobile = () => !isMobile
+        ? ``
+        : `<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${L.ClickHereToDownload}</div>
+
+    <div tfr-element="true" class="tfr-flex tfr-space-above">
+      <img src="${imageBaseUrl}apple.png" id="tfr-app-store" />
+      <img src="${imageBaseUrl}google.png" id="tfr-google-play" />
+    </div>`;
+    const renderDesktop = () => isMobile
+        ? ``
+        : `<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${L.ScanQrToDownload}</div>
+    
+    <img src="${imageBaseUrl}qr.png" class="tfr-qr-code" />`;
     const body = () => {
         return `
         <div tfr-element="true">
           <div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${L.ModalText}</div>
+          ${renderDesktop()}
         </div>
         <div tfr-element="true" class="tfr-logo-box">
           <video id="tfr-video" controls autoplay loop>
@@ -26342,11 +26347,7 @@ const ScanCodeModal = (props) => {
           </video>
         </div>
 
-        <div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${renderCtaText()}</div>
-
-        <div tfr-element="true" class="tfr-flex tfr-space-above">
-          ${renderImages()}
-        </div>
+        ${renderMobile()}
 
         <div id="tfr-sign-in-nav" tfr-element="true" class="tfr-body-font tfr-mt-20 tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor">${L.HaveAcc}</div>
     `;
@@ -26640,6 +26641,7 @@ class SizeRecComponent {
             this.isCollapsed = false;
             this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
             this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
+            this.tfrSizeHowItFits.style.display = 'block';
         }
         else {
             this.tfrSizeRecActionLogin.style.display = 'block';
@@ -26648,6 +26650,7 @@ class SizeRecComponent {
             this.tfrSizeRecSubtitle.style.display = 'block';
             this.tfrSizeRecommendationError.style.display = 'none';
             this.tfrSizeRecommendationError.innerHTML = '';
+            this.tfrSizeHowItFits.style.display = 'none';
         }
     }
     setLoading(isLoading) {
@@ -26690,6 +26693,7 @@ class SizeRecComponent {
         this.bindEvents();
     }
     setElements() {
+        this.tfrSizeHowItFits = document.getElementById('tfr-size-how-it-fits');
         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');
@@ -27014,6 +27018,7 @@ class FittingRoom {
             : typeof process !== 'undefined'
                 ? process.env.NODE_ENV
                 : 'dev';
+        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));