sign in

src/pages/auth/components/LoginStep1.tsx

@@ -9,11 +9,17 @@ import Error from '../../../components/Error'
 import Button from '../../../components/Button'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../../config/Pages'
+import { isEmail } from '../../../config/func'
+import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
 
 const LoginStep1: FC = () => {
 
     const { t } = useTranslation('global')
-    const { setPhone, phone, setStepLogin } = useAuthStore()
+    const { setPhone, phone, setStepLogin, setEmail } = useAuthStore()
+    const loginWithOtp = useLoginWithOtp()
+    const checkHasAccount = useCheckHasAccount()
 
     const formik = useFormik<LoginType>({
         initialValues: {
@@ -24,8 +30,28 @@ const LoginStep1: FC = () => {
                 .required(t('errors.required'))
         }),
         onSubmit(values) {
-            setPhone(values.phone_email)
-            setStepLogin(2)
+            if (isEmail(values.phone_email)) {
+                setEmail(values.phone_email)
+                checkHasAccount.mutate({ email: values.phone_email }, {
+                    onSuccess() {
+                        setStepLogin(2)
+                    },
+                    onError(error: ErrorType) {
+                        toast.error(error?.response?.data?.error?.message[0])
+                    },
+                })
+            } else {
+                setPhone(values.phone_email)
+                loginWithOtp.mutate({ phone: values.phone_email }, {
+                    onSuccess() {
+                        setStepLogin(2)
+                        toast.success(t('auth.otp_sent'))
+                    },
+                    onError(error: ErrorType) {
+                        toast.error(error?.response?.data?.error?.message[0])
+                    },
+                })
+            }
         },
     })
 
@@ -65,6 +91,7 @@ const LoginStep1: FC = () => {
                 label={t('auth.next')}
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
+                isLoading={loginWithOtp.isPending || checkHasAccount.isPending}
             />
 
             <div className='mt-6 flex justify-center gap-2 items-center text-sm'>