@thefittingroom/shop-ui 0.1.9 → 0.1.11

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

@@ -2,7 +2,6 @@ declare var L: {
     AssociatedEmail: string;
     BackToSignIn: string;
     BrandUserIdNotSet: string;
-    CreateAvatarSc: string;
     DontHaveAcc: string;
     DontHaveAvatar: string;
     EmailAddress: string;
@@ -10,47 +9,29 @@ declare var L: {
     EnterEmailAddress: string;
     EnterPhoneNumber: string;
     FailedToLoadLocale: string;
-    ForgotPassword: string;
     ForgotPasswordWithSymbol: string;
-    GetRecommendedSizesErrorText: string;
-    GetVirtualTryOnFramesErrorText: string;
     HaveAcc: string;
-    HowItWorks: string;
-    HowItWorksText: string;
     Loading: string;
     LoadingAvatar: string;
-    ModalTitle: string;
     NoSizeAvailable: string;
-    Or: string;
     OrSize: string;
     Password: string;
     PasswordError: string;
     PhoneNumber: string;
     ReturnToCatalogPage: string;
     ReturnToProductPage: string;
-    ReturnToSignIn: string;
     ReturnToSite: string;
     ReturnToTfr: string;
     Send: string;
-    SendPasswordResetEmailErrorText: string;
     SignBackIn: string;
     SignIn: string;
-    SignOut: string;
-    SignOutErrorText: string;
-    SignUp: string;
-    SimplyScan: string;
-    SimplyScanText: string;
-    SomethingIsWrongWithThisUser: string;
     SomethingWentWrong: string;
-    StyleNotReadyForVTO: string;
     SuccessfullyLoggedOut: string;
     TheFittingRoom: string;
-    TryOn: string;
-    TryOnText: string;
     UsernameOrPasswordEmpty: string;
     UsernameOrPasswordIncorrect: string;
-    VirtualTryOnWith: string;
-    WeRecommendSize: string;
+    ModalTagline: string;
+    ModalText: string;
 };
 declare function SetLocale(locale: string): Promise<void>;
 declare const InitLocale: () => Promise<string>;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v0.1.9 (2024-01-04T23:43:21.572Z)
+* thefittingroom v0.1.11 (2024-01-05T17:54:12.566Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 /*!
@@ -23207,55 +23207,37 @@ var L = {
     AssociatedEmail: 'If there is an account associated with that email, We have sent a link to reset your password.',
     BackToSignIn: 'Back to sign in',
     BrandUserIdNotSet: 'User not logged in to brand site.',
-    CreateAvatarSc: 'Scan the QR code/click link to download our app and create an avatar:',
     DontHaveAcc: "Don't have an account?",
     DontHaveAvatar: "Whoops! Looks like you don't have an avatar yet.",
     EmailAddress: 'Email address',
     EmailError: 'Please enter a valid email address.',
     EnterEmailAddress: 'Enter your email address, we will send you a link to reset your password.',
-    EnterPhoneNumber: 'Enter your phone number to be texted a link to download The Fitting Room app.',
+    EnterPhoneNumber: 'Enter number for download link',
     FailedToLoadLocale: 'Something went wrong when fetching another language.',
-    ForgotPassword: 'Forgot password',
     ForgotPasswordWithSymbol: 'Forgot password?',
-    GetRecommendedSizesErrorText: 'Something went wrong while fetching sizes. Try again!',
-    GetVirtualTryOnFramesErrorText: 'Something went wrong while fetching style id. Try again!',
     HaveAcc: 'Have an account? Sign in',
-    HowItWorks: 'How it works',
-    HowItWorksText: 'The Fitting Room has partnered with your favourite designers to enable you to virtually try on garments, so you will know exactly how it will look before purchasing. Say good-bye to the days of dealing with returns!',
     Loading: 'Loading...',
     LoadingAvatar: 'Your avatar is loading...',
-    ModalTitle: 'Enter your email address to be notified when The Fitting Room try on is offered on Google Play:',
     NoSizeAvailable: 'Unfortunately, that size is not available for try on.',
-    Or: 'Or',
     OrSize: 'or',
     Password: 'Password',
     PasswordError: 'Please enter a valid password (at least 7 characters).',
     PhoneNumber: 'Phone number',
     ReturnToCatalogPage: 'Return to Catalog Page',
     ReturnToProductPage: 'Return to Product Page',
-    ReturnToSignIn: 'Return to sign in',
     ReturnToSite: 'Return to site',
     ReturnToTfr: 'Please return to The Fitting Room app to create your avatar.',
     Send: 'Send',
-    SendPasswordResetEmailErrorText: 'Something went wrong while sending password reset email. Try again!',
     SignBackIn: 'Sign back in',
     SignIn: 'Sign in',
-    SignOut: 'Sign out',
-    SignOutErrorText: 'Something went wrong while logging out. Try again!',
-    SignUp: 'Sign up',
-    SimplyScan: 'Simply scan,',
-    SimplyScanText: 'Download The Fitting Room app, create an account, follow the easy set up steps, and then scan yourself using just your smartphone to create your personal lifelike avatar.',
-    SomethingIsWrongWithThisUser: 'Something is wrong with this user. Try to re-authenticate again!',
     SomethingWentWrong: 'Something went wrong. Try again!',
-    StyleNotReadyForVTO: 'This style is not ready for virtual try on yet. Please check back later.',
     SuccessfullyLoggedOut: 'You have successfully logged out!',
     TheFittingRoom: 'The Fitting Room',
-    TryOn: 'and try on.',
-    TryOnText: 'After creating your avatar, return here and sign in. We will use the measurements from your avatar to tell you which size will fit you best, as well as let you try the garment on - all without leaving your house!',
     UsernameOrPasswordEmpty: 'Username or password is empty.',
     UsernameOrPasswordIncorrect: 'Username or password is incorrect.',
-    VirtualTryOnWith: 'Size recommendation with',
-    WeRecommendSize: 'We recommend a size',
+    // Modal
+    ModalTagline: 'End size uncertainty with',
+    ModalText: 'Our technology captures your precise measurements, and considers things like fabric stretch and your individual physique for the perfect fit every time.',
 };
 
 const validateEmail = (email) => {
@@ -23278,13 +23260,13 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css$6 = ".tfr-bg-aquamarina-strong{background-color:#209da7}.tfr-c-white{color:#fff}.tfr-c-brand{color:#209da7}.tfr-c-dark{color:#000}.tfr-c-dark-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:red}";
 n(css$6,{});
 
-var css$5 = ".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{align-items:center;background-color:rgba(0,0,0,.53);display:flex;height:100%;justify-content:center;left:0;overflow:auto;position:fixed;top:0;width:100%;z-index:10000}.tfr-modal-content{margin-left:auto;margin-right:auto;text-align:center;width:90%}.tfr-modal-content-flex{align-items:center;display:flex;height:calc(100% - 56px)}.tfr-modal-content-container{background-color:#fff;border:1px solid #434343;border-radius:0;box-shadow:0 6px 6px #00000029;height:100%;line-height:normal;margin:auto;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-logo-box{background-color:#209da7;height:180px;margin:40px auto;max-width:430px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;justify-content:center}";
+var css$5 = ".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%}.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}";
 n(css$5,{});
 
 var css$4 = "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}";
 n(css$4,{});
 
-var css$3 = "@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}.tfr-logo-box{height:380px}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.trf-logo-title{margin-bottom:10px}}@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}}";
+var css$3 = "@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$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%}";
@@ -23455,7 +23437,7 @@ const InitModalManager = (elementID) => {
                 <div class="tfr-modal-content-flex">
                   <div class="tfr-modal-content tfr-pt-20 tfr-pb-50">
                       <div class="tfr-modal-title-logo-container">
-                          <div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-dark tfr-mr-10">${L.VirtualTryOnWith}</div>
+                          <div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-dark tfr-mr-10">${L.ModalTagline}</div>
                           <div tfr-element="true" class="tfr-logo-container">
                             <div class="tfr-mr-15">
                               <svg width="26" height="47" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -35925,6 +35907,8 @@ const ScanCodeModal = (props) => {
         initTel('#tel-input');
         document.getElementById('tel-button').addEventListener('click', onTelSubmit);
         document.getElementById('tfr-sign-in-nav').addEventListener('click', onSignInNav);
+        const video = document.getElementById('tfr-video');
+        video.play();
     };
     const onUnhook = () => {
         document.getElementById('tel-button').removeEventListener('click', onTelSubmit);
@@ -35932,16 +35916,13 @@ const ScanCodeModal = (props) => {
     };
     const body = () => {
         return `
-        <div tfr-element="true" class="tfr-logo-box tfr-mobile-hidden">
-          <div class="tfr-mr-15">
-            <svg width="26" height="47" 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="white">
-              </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="#209DA7">
-              </path>
-            </svg>
-          </div>
-          <div tfr-element="true" class="tfr-title-font tfr-light-24-300 tfr-mr-10 tfr-c-white">${L.TheFittingRoom}</div>
+        <div tfr-element="true">
+          <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">
+            <source src="https://assets.dev.thefittingroom.xyz/videos/the-fitting-room.mp4" />
+          </video>
         </div>
 
         <div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${L.EnterPhoneNumber}</div>