category service

src/pages/auth/components/LoginStep1.tsx

@@ -7,13 +7,17 @@ import * as Yup from 'yup'
 import { useAuthStore } from '../store/AuthStore'
 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 +28,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,16 +89,9 @@ 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'>
-                <p className='text-description'>
-                    {t('auth.have_account')}
-                </p>
-                <Link to={Pages.auth.register}>
-                    <div>{t('auth.register')}</div>
-                </Link>
-            </div>
         </div>
     )
 }