conditioins in login

src/pages/auth/components/LoginStep1.tsx

@@ -1,100 +1,99 @@
-import { FC } from 'react'
+import { useFormik } from "formik";
-import Input from '../../../components/Input'
+import { ArrowLeft } from "iconsax-react";
-import { useTranslation } from 'react-i18next'
+import { FC } from "react";
-import { LoginType } from '../types/AuthTypes'
+import { useTranslation } from "react-i18next";
-import { useFormik } from 'formik'
+import { Link } from "react-router-dom";
-import * as Yup from 'yup'
+import * as Yup from "yup";
-import { useAuthStore } from '../store/AuthStore'
+import Button from "../../../components/Button";
-import Error from '../../../components/Error'
+import Error from "../../../components/Error";
-import Button from '../../../components/Button'
+import Input from "../../../components/Input";
-import { isEmail } from '../../../config/func'
+import { toast } from "../../../components/Toast";
-import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData'
+import { isEmail } from "../../../config/func";
-import { ErrorType } from '../../../helpers/types'
+import { Pages } from "../../../config/Pages";
-import { toast } from '../../../components/Toast'
+import { ErrorType } from "../../../helpers/types";
-import { ArrowLeft } from 'iconsax-react'
+import { useCheckHasAccount, useLoginWithOtp } from "../hooks/useAuthData";
-import { Link } from 'react-router-dom'
+import { useAuthStore } from "../store/AuthStore";
-import { Pages } from '../../../config/Pages'
+import { LoginType } from "../types/AuthTypes";
 const LoginStep1: FC = () => {
+  const { t } = useTranslation("global");
+  const { setPhone, phone, setStepLogin, setEmail } = useAuthStore();
+  const loginWithOtp = useLoginWithOtp();
+  const checkHasAccount = useCheckHasAccount();
 
-    const { t } = useTranslation('global')
+  const formik = useFormik<LoginType>({
-    const { setPhone, phone, setStepLogin, setEmail } = useAuthStore()
+    initialValues: {
-    const loginWithOtp = useLoginWithOtp()
+      phone_email: phone,
-    const checkHasAccount = useCheckHasAccount()
+    },
+    validationSchema: Yup.object({
+      phone_email: Yup.string().required(t("errors.required")),
+    }),
+    onSubmit(values) {
+      if (isEmail(values.phone_email)) {
+        setEmail(values.phone_email);
+        checkHasAccount.mutate(
+          { email: values.phone_email },
+          {
+            onSuccess() {
+              setStepLogin(2);
+            },
+            onError(error: ErrorType) {
+              toast(error.response?.data?.error.message?.[0], "error");
+            },
+          },
+        );
+      } else {
+        setPhone(values.phone_email);
+        loginWithOtp.mutate(
+          { phone: values.phone_email },
+          {
+            onSuccess() {
+              setStepLogin(2);
+              toast(t("auth.otp_sent"), "success");
+            },
+            onError(error: ErrorType) {
+              toast(error?.response?.data?.error?.message[0], "error");
+            },
+          },
+        );
+      }
+    },
+  });
 
-    const formik = useFormik<LoginType>({
+  return (
-        initialValues: {
+    <div>
-            phone_email: phone,
+      <div className="mt-5">
-        },
+        <h2 className="text-2xl font-bold">{t("auth.welcome")}</h2>
-        validationSchema: Yup.object({
+        <p className="text-description text-sm mt-2">{t("auth.enter_info_login")}</p>
-            phone_email: Yup.string()
+      </div>
-                .required(t('errors.required'))
-        }),
-        onSubmit(values) {
-            if (isEmail(values.phone_email)) {
-                setEmail(values.phone_email)
-                checkHasAccount.mutate({ email: values.phone_email }, {
-                    onSuccess() {
-                        setStepLogin(2)
-                    },
-                    onError(error: ErrorType) {
-                        toast(error.response?.data?.error.message?.[0], 'error')
-                    },
-                })
-            } else {
-                setPhone(values.phone_email)
-                loginWithOtp.mutate({ phone: values.phone_email }, {
-                    onSuccess() {
-                        setStepLogin(2)
-                        toast(t('auth.otp_sent'), 'success')
-                    },
-                    onError(error: ErrorType) {
-                        toast(error?.response?.data?.error?.message[0], 'error')
-                    },
-                })
-            }
-        },
-    })
 
-    return (
+      <div className="mt-16">
-        <div>
+        <Input
-            <div className='mt-5'>
+          label={t("auth.mobile_or_email")}
-                <h2 className='text-2xl font-bold'>
+          placeholder={t("auth.enter_mobile_or_email")}
-                    {t('auth.welcome')}
+          type="text"
-                </h2>
+          className="text-right"
-                <p className='text-description text-sm mt-2'>
+          name="phone_email"
-                    {t('auth.enter_info_login')}
+          onChange={formik.handleChange}
-                </p>
+          value={formik.values.phone_email}
-            </div>
+        />
 
-            <div className='mt-16'>
+        {formik.touched.phone_email && formik.errors.phone_email && <Error errorText={formik.errors.phone_email} />}
-                <Input
+      </div>
-                    label={t('auth.mobile_or_email')}
-                    placeholder={t('auth.enter_mobile_or_email')}
-                    type='text'
-                    className='text-right'
-                    name='phone_email'
-                    onChange={formik.handleChange}
-                    value={formik.values.phone_email}
-                />
 
-                {
+      <label className="mt-4 flex items-center gap-2 text-sm text-description cursor-pointer">
-                    formik.touched.phone_email && formik.errors.phone_email &&
+        <input type="checkbox" checked readOnly className="mt-1 h-4 w-4 accent-primary" />
-                    <Error
+        <span className="text-xs mt-1">
-                        errorText={formik.errors.phone_email}
+          شما با ثبت‌نام، تمامی{" "}
-                    />
+          <a href="https://danakcorp.com/conditions" target="_blank" rel="noopener noreferrer" className="text-primary">
-                }
+            قوانین و مقررات داناک
+          </a>{" "}
+          را می‌پذیرید.
+        </span>
+      </label>
 
-            </div>
+      <Button 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'>
-            <Button
-                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>
@@ -103,14 +102,12 @@ const LoginStep1: FC = () => {
                 </Link>
             </div> */}
 
-            <Link to={Pages.auth.forgotPassword} className='mt-6 flex gap-1 text-sm justify-center text-description'>
+      <Link to={Pages.auth.forgotPassword} className="mt-6 flex gap-1 text-sm justify-center text-description">
-                <div>
+        <div>{t("auth.forgot_password")}</div>
-                    {t('auth.forgot_password')}
+        <ArrowLeft size={20} color="black" />
-                </div>
+      </Link>
-                <ArrowLeft size={20} color='black' />
+    </div>
-            </Link>
+  );
-        </div>
+};
-    )
-}
 
-export default LoginStep1
+export default LoginStep1;