@thefittingroom/shop-ui 1.1.2 → 1.1.3

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v1.1.2 (2024-02-27T19:30:19.045Z)
+* thefittingroom v1.1.3 (2024-02-27T20:29:50.637Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -23494,7 +23494,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}";
+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}";
 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%}";
@@ -36146,7 +36146,7 @@ const ScanCodeModal = (props) => {
           <div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${L.ModalText}</div>
         </div>
         <div tfr-element="true" class="tfr-logo-box">
-          <video id="tfr-video" controls>
+          <video id="tfr-video" controls autoplay loop>
             <source src="https://assets.dev.thefittingroom.xyz/videos/the-fitting-room.mp4" />
           </video>
         </div>
@@ -36177,7 +36177,8 @@ const ScanCodeModal = (props) => {
 
 const SignInModal = (props) => {
     const { email } = props;
-    const onSignIn = () => {
+    const onSignIn = (e) => {
+        e.preventDefault();
         const email = document.getElementById('email-input').value;
         const password = document.getElementById('password-input').value;
         resetValidation();
@@ -36191,11 +36192,13 @@ const SignInModal = (props) => {
         props.onNavScanCode();
     };
     const onHook = () => {
+        document.getElementById('tfr-sign-in-form').addEventListener('submit', onSignIn);
         document.getElementById('tfr-sign-in').addEventListener('click', onSignIn);
         document.getElementById('tfr-forgot-password').addEventListener('click', onNavForgotPassword);
         document.getElementById('tfr-scan-code').addEventListener('click', onNavScanCode);
     };
     const onUnhook = () => {
+        document.getElementById('tfr-sign-in-form').removeEventListener('submit', onSignIn);
         document.getElementById('tfr-sign-in').removeEventListener('click', onSignIn);
         document.getElementById('tfr-forgot-password').removeEventListener('click', onNavForgotPassword);
         document.getElementById('tfr-scan-code').removeEventListener('click', onNavScanCode);
@@ -36228,28 +36231,30 @@ const SignInModal = (props) => {
     };
     const body = () => {
         return `
-            <div class="tfr-title-font tfr-light-22-300 tfr-mt-10">${L.SignIn}</div>
+            <form id="tfr-sign-in-form">
+              <div class="tfr-title-font tfr-light-22-300 tfr-mt-10">${L.SignIn}</div>
 
-            <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
-                <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.EmailAddress}</legend>
-                <input tfr-element="true" type="email" id="email-input" value="${email || ''}" />
-            </fieldset>
+              <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
+                  <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.EmailAddress}</legend>
+                  <input tfr-element="true" type="email" id="email-input" value="${email || ''}" />
+              </fieldset>
 
-            <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
-                <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.Password}</legend>
-                <input tfr-element="true" type="password" id="password-input" />
-            </fieldset>
+              <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
+                  <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.Password}</legend>
+                  <input tfr-element="true" type="password" id="password-input" />
+              </fieldset>
 
-            <div tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-red tfr-mt-10 tfr-d-none" id="tfr-form-error"></div>
+              <div tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-red tfr-mt-10 tfr-d-none" id="tfr-form-error"></div>
 
-            <div class="tfr-mt-20">
-                <span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor tfr-mr-15">${L.ForgotPasswordWithSymbol}</span>
-                <span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor">${L.DontHaveAcc}</span>
-            </div>
+              <div class="tfr-mt-20">
+                  <span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor tfr-mr-15">${L.ForgotPasswordWithSymbol}</span>
+                  <span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor">${L.DontHaveAcc}</span>
+              </div>
 
-            <button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-bg-aquamarina-strong tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="sign-in-button">
-                ${L.SignIn}
-            </button>
+              <button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-bg-aquamarina-strong tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="sign-in-button" type="submit">
+                  ${L.SignIn}
+              </button>
+            </form>
             `;
     };
     return {
@@ -36417,7 +36422,8 @@ class TfrModal {
     }
 }
 
-const svgSrc = 'https://assets.dev.thefittingroom.xyz/shop-sdk/assets/login-icon.svg';
+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;
@@ -36531,7 +36537,7 @@ class SizeRecComponent {
             </div>`;
     }
     renderLoginCta() {
-        return `<div class="tfr-size-rec-login-cta"><img src="${svgSrc}" /> Login to view</div>`;
+        return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Login to view</div>`;
     }
     renderGarmentLocations(locations) {
         const html = locations
@@ -36554,7 +36560,7 @@ class SizeRecComponent {
                     <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:
+                        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
@@ -36572,6 +36578,12 @@ class SizeRecComponent {
                         <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 class="tfr-powered-by">
+                        <div>Powered by</div>
+                        <div class="tfr-powered-by-logo"><img src="${doorLogoSrc}" /></div>
+                        <div class="tfr-powered-by-text-bold">The Fitting Room</div>
+                      </div>
                     </div>
                   </div>`;
         sizeRecMainDiv.innerHTML = body;