From 70dfdf23466f5468ec499b511eb07f61254374f1 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Fri, 6 Oct 2023 15:11:07 +0700
Subject: [PATCH] fix(login): disable sendLoginCode button when mutation is
 loading

refs:
- 202309-product#ZN-0035
---
 .../Forms/EmailLoginForm/OtherOptions.tsx           | 13 +++++++++----
 src/components/Forms/EmailLoginForm/index.tsx       | 11 ++++-------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Forms/EmailLoginForm/OtherOptions.tsx b/src/components/Forms/EmailLoginForm/OtherOptions.tsx
index db90553cb4..61f3dd1b28 100644
--- a/src/components/Forms/EmailLoginForm/OtherOptions.tsx
+++ b/src/components/Forms/EmailLoginForm/OtherOptions.tsx
@@ -6,15 +6,17 @@ import styles from './styles.module.css'
 
 export const SendLoginCodeButton = ({
   sendLoginCode,
+  disabled,
 }: {
   sendLoginCode: () => void
+  disabled?: boolean
 }) => (
   <section className={styles.option}>
     <FormattedMessage
       defaultMessage="Forgot password?"
       description="src/components/Forms/EmailLoginForm/Buttons.tsx"
     />
-    <Button aria-haspopup="dialog" onClick={sendLoginCode}>
+    <Button aria-haspopup="dialog" onClick={sendLoginCode} disabled={disabled}>
       <FormattedMessage
         defaultMessage="Send login code"
         description="src/components/Forms/EmailLoginForm/Buttons.tsx"
@@ -24,18 +26,21 @@ export const SendLoginCodeButton = ({
 )
 
 const OtherOptions = ({
-  isInPage,
   hasSendCode,
   sendLoginCode,
+  disabled,
 }: {
-  isInPage: boolean
   hasSendCode: boolean
   sendLoginCode?: () => any
+  disabled?: boolean
 }) => {
   return (
     <section className={styles.otherOptions}>
       {!hasSendCode && sendLoginCode && (
-        <SendLoginCodeButton sendLoginCode={sendLoginCode} />
+        <SendLoginCodeButton
+          sendLoginCode={sendLoginCode}
+          disabled={disabled}
+        />
       )}
       {hasSendCode && (
         <section className={styles.hasSendCode}>
diff --git a/src/components/Forms/EmailLoginForm/index.tsx b/src/components/Forms/EmailLoginForm/index.tsx
index 93fd2da755..7c7b732760 100644
--- a/src/components/Forms/EmailLoginForm/index.tsx
+++ b/src/components/Forms/EmailLoginForm/index.tsx
@@ -92,13 +92,10 @@ export const EmailLoginForm: React.FC<FormProps> = ({
 
   const passwordRef = useRef<HTMLInputElement>(null)
 
-  const [sendCode] = useMutation<SendVerificationCodeMutation>(
-    SEND_CODE,
-    undefined,
-    {
+  const [sendCode, { loading: sendingCode }] =
+    useMutation<SendVerificationCodeMutation>(SEND_CODE, undefined, {
       showToast: false,
-    }
-  )
+    })
 
   const intl = useIntl()
   const {
@@ -307,9 +304,9 @@ export const EmailLoginForm: React.FC<FormProps> = ({
         {errorCode !== ERROR_CODES.CODE_EXPIRED &&
           !(hasSendCode && errorCode === ERROR_CODES.CODE_INVALID) && (
             <OtherOptions
-              isInPage={isInPage}
               sendLoginCode={sendLoginCode}
               hasSendCode={hasSendCode}
+              disabled={sendingCode}
             />
           )}
       </Form>