conditioins in login

src/pages/auth/components/LoginStep1.tsx

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