fix(app/checkout): properly handle external auth sign in global funct…

…ions pass email and provide loading feedback on call
ecomplus · May 2, 2024 · 62d2c1d · 62d2c1d
1 parent 4bc6eda
commit 62d2c1d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/@ecomplus/storefront-app/src/components/html/EcCheckout.html b/@ecomplus/storefront-app/src/components/html/EcCheckout.html
@@ -291,7 +291,7 @@ <h3>
             <p v-if="confirmAccount()">
               Ou entre com
               <template v-if="externalAuthEmailLinkSignIn">
-                <a href="#" @click.prevent="externalAuthEmailLinkSignIn()">
+                <a href="#" @click.prevent="externalAuthEmailLinkSignIn(email)">
                 link de acesso por e-mail</a>
                 <span v-if="externalAuthGoogleSignIn"> /
                   <a href="#" @click.prevent="externalAuthGoogleSignIn()">
@@ -302,6 +302,13 @@ <h3>
                 <a :href="`/app/account?email=${encodeURIComponent(email)}#/checkout`">
                 link de acesso por e-mail</a>
               </template>
+              <span
+                class="spinner-grow ml-1"
+                :style="{ visibility: hasCalledExternalSignIn ? null : 'hidden' }"
+                role="status"
+              >
+                <span class="sr-only">Loading...</span>
+              </span>
             </p>
           </template>
         </login-block>

diff --git a/@ecomplus/storefront-app/src/components/js/EcCheckout.js b/@ecomplus/storefront-app/src/components/js/EcCheckout.js
@@ -141,7 +141,8 @@ export default {
       paymentGateways: [],
       loyaltyPointsApplied: {},
       loyaltyPointsAmount: 0,
-      hasMoreOffers: false
+      hasMoreOffers: false,
+      hasCalledExternalSignIn: false
     }
   },
 
@@ -263,14 +264,22 @@ export default {
 
     externalAuthEmailLinkSignIn () {
       if (this.isExternalAuth && window.signInWithEmailLink) {
-        return window.signInWithEmailLink
+        return (email) => {
+          this.hasCalledExternalSignIn = true
+          setTimeout(() => { this.hasCalledExternalSignIn = false }, 4000)
+          window.signInWithEmailLink(email)
+        }
       }
       return null
     },
 
     externalAuthGoogleSignIn () {
       if (this.isExternalAuth && window.signInWithGoogle) {
-        return window.signInWithGoogle
+        return () => {
+          this.hasCalledExternalSignIn = true
+          setTimeout(() => { this.hasCalledExternalSignIn = false }, 2000)
+          window.signInWithGoogle()
+        }
       }
       return null
     }