@thefittingroom/shop-ui 1.4.5 → 1.4.7

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.5 (2024-07-24T23:31:08.604Z)
+* thefittingroom v1.4.7 (2024-08-08T16:26:19.184Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -25979,7 +25979,7 @@ var L = {
     ReturnToProductPage: 'Return to Product Page',
     ReturnToSite: 'Return to site',
     ReturnToTfr: 'Please return to The Fitting Room app to create your avatar.',
-    ScanQrToDownload: 'Scan the QR code to download the app',
+    ScanQrToDownload: 'Scan to download the app',
     Send: 'Send',
     SignBackIn: 'Sign back in',
     SignIn: 'Sign in',
@@ -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;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:280px}";
 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}";
@@ -26022,7 +26022,7 @@ n(css$7,{});
 var css$6 = ".lds-ellipsis{display:inline-block;height:80px;position:relative;width:80px}.lds-ellipsis div{animation-timing-function:cubic-bezier(0,1,1,0);background:var(--tfr-brand-color);border-radius:50%;display:block;height:13px;position:absolute;top:33px;width:13px}.lds-ellipsis div:first-child{animation:lds-ellipsis1 .6s infinite;left:8px}.lds-ellipsis div:nth-child(2){animation:lds-ellipsis2 .6s infinite;left:8px}.lds-ellipsis div:nth-child(3){animation:lds-ellipsis2 .6s infinite;left:32px}.lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite;left:56px}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}";
 n(css$6,{});
 
-var css$5 = "@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}}";
+var css$5 = "@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;margin:auto;width:100%}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.tfr-modal-content-container{max-height:none;min-height:100vh;min-width:100vw}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{height:calc(100vh - 76px);overflow:auto}}@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$5,{});
 
 var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-size-rec-subtitle{background-color:var(--tfr-grey);border-radius:4px;color:var(--tfr-white);font-family:var(--tfr-subtitle-font);padding:8px;text-align:center;width:100%}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:370px}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);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{flex-grow:1;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{flex-grow:2;margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#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:var(--tfr-muted);display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);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:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.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}#tfr-size-rec-select-container{font-size:13px}";
@@ -26034,7 +26034,7 @@ n(css$3,{});
 var css$2 = ".flag-container{bottom:0;left:0;padding:1px;right:0;right:auto;top:0}.flag-container:hover{cursor:pointer}.selected-flag{align-items:center;display:flex;height:100%;padding:0 6px 0 8px;position:relative;z-index:1}.flag.bd{background-position:-418px 0;height:12px}.arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #555;height:0;margin-left:6px;width:0}.arrow-up{border-bottom:6px solid #555;border-top:none}.country-list{-webkit-overflow-scrolling:touch;background-color:#fff;border-radius:5px;box-shadow:0 8px 10px 1px rgba(57,64,78,.7),0 3px 14px 2px rgba(57,64,78,.7),0 5px 5px -3px rgba(57,64,78,.7);cursor:pointer;display:none;font-size:16px;line-height:18px;list-style:none;margin:0 0 0 -1px;max-height:500px;overflow:auto;padding:0;position:absolute;text-align:left;top:50%;transform:translateY(-50%);white-space:nowrap;width:100%;width:auto;z-index:2}.country-list.active{display:inline-block}.country{outline:0;padding:5px 26px 5px 15px}.country-list .divider{border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:5px;padding-bottom:5px}.country.highlight{background-color:#c7cace}.flag-box{display:inline-block;width:20px}.country-name,.flag-box{margin-right:6px}.country-name,.dial-code,.flag-box{vertical-align:middle}";
 n(css$2,{});
 
-var css$1 = ".tfr-title-font{font-family:Poppins,sans-serif}.tfr-body-font{font-family:Roboto,sans-serif}.tfr-light-24-300{font-size:24px;font-weight:300}.tfr-light-24-500{font-size:24px;font-weight:500}.tfr-light-22-300{font-size:22px;font-weight:300}.tfr-light-16-300{font-size:16px;font-weight:300}.tfr-medium-16-default{font-size:16px}.tfr-12-default{font-size:12px}.tfr-14-default{font-size:14px}.tfr-16-default{font-size:16px}";
+var css$1 = ".tfr-title-font{font-family:Poppins,sans-serif}.tfr-body-font{font-family:Roboto,sans-serif}.tfr-light-24-300{font-size:24px;font-weight:300}.tfr-light-24-500{font-size:24px;font-weight:500}.tfr-light-22-300{font-size:22px;font-weight:300}.tfr-light-16-300{font-size:16px;font-weight:300}.tfr-medium-16-default{font-size:16px}.tfr-12-default{font-size:12px}.tfr-14-default{font-size:14px}.tfr-16-default{font-size:16px}.tfr-24-bold{font-size:24px;font-weight:700}";
 n(css$1,{});
 
 var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-grey:#878787;--tfr-light-grey:#dbdcdc;--tfr-dark-grey:#3f3f3f;--tfr-main-border-color:hsla(0,0%,7%,.55);--tfr-main-border-radius:0;--tfr-main-border-width:1px;--tfr-main-bg-color:inherit;--tfr-main-width:440px;--tfr-main-v-padding:14px;--tfr-main-h-padding:20px;--tfr-main-font:inherit;--tfr-title-font:var(--tfr-main-font);--tfr-subtitle-font:var(--tfr-main-font);--tfr-row-font:var(--tfr-main-font);--tfr-cta-font:var(--tfr-main-font);--tfr-size-selector-text-color:var(--tfr-white);--tfr-size-selector-font-size:14px;--tfr-size-selector-font-weight:400;--tfr-size-selector-border-color:transparent;--tfr-size-selector-border-width:0;--tfr-size-selector-bg-color:var(--tfr-grey);--tfr-size-selector-bg-color-hover:var(--tfr-dark-grey);--tfr-size-selector-bg-color-active:var(--tfr-dark);--tfr-size-selector-button-height:35px;--tfr-size-selector-button-active-height:45px;--tfr-size-selector-button-active-border-color:transparent;--tfr-size-selector-button-active-border-width:0;--tfr-size-selector-button-radius:8px;--tfr-size-selector-button-shadow:0 4px 4px 0 rgba(0,0,0,.3)}";
@@ -26190,6 +26190,7 @@ const LoggedOutModal = (props) => {
 
 const InitModalManager = (elementID) => {
     const modal = document.getElementById(elementID);
+    const body = document.querySelector('body');
     if (!modal) {
         throw new Error(`element with id ${elementID} not found`);
     }
@@ -26226,6 +26227,7 @@ const InitModalManager = (elementID) => {
     `;
     };
     const Open = (content) => {
+        body.style.overflow = 'hidden';
         if (previousContent) {
             previousContent.Unhook();
         }
@@ -26236,6 +26238,7 @@ const InitModalManager = (elementID) => {
         previousContent = content;
     };
     const Close = () => {
+        body.style.overflow = 'auto';
         if (previousContent) {
             previousContent.Unhook();
             unhook();
@@ -26321,34 +26324,42 @@ 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 tfr-max-w-600">${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>
+    
+    <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>
+    `;
+    const renderDesktop = () => isMobile
+        ? ``
+        : `<div id="tfr-qr-border-box">
+          <div tfr-element="true" class="tfr-title-font tfr-24-bold">${L.ScanQrToDownload}</div>
+    
+          <img src="${imageBaseUrl}qr.png" class="tfr-qr-code" />
+
+          <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>
+        </div>`;
     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>
+          
         </div>
         <div tfr-element="true" class="tfr-logo-box">
-          <video id="tfr-video" controls autoplay loop>
+          <video id="tfr-video" controls loop>
             <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">${renderCtaText()}</div>
 
-        <div tfr-element="true" class="tfr-flex tfr-space-above">
-          ${renderImages()}
+          ${renderDesktop()}
         </div>
 
-        <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>
+        ${renderMobile()}
     `;
     };
     return {
@@ -26640,6 +26651,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 +26660,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 +26703,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 +27028,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));