input slug

src/pages/auth/components/LoginStep1.tsx

@@ -9,30 +9,33 @@ import Button from '../../../components/Button'
 import { useLoginWithOtp } from '../hooks/useAuthData'
 import { toast } from 'react-toastify'
 import { type ErrorType } from '../../../helpers/types'
-import { useParams } from 'react-router-dom'
 
 type LoginStep1FormType = {
     phone: string;
+    slug: string;
 }
 
 const LoginStep1: FC = () => {
 
     const { t } = useTranslation('global')
-    const { setPhone, phone, setStepLogin } = useAuthStore()
+    const { setPhone, phone, setStepLogin, setSlug } = useAuthStore()
     const loginWithOtp = useLoginWithOtp()
-    const { slug } = useParams()
 
     const formik = useFormik<LoginStep1FormType>({
         initialValues: {
             phone: phone,
+            slug: ''
         },
         validationSchema: Yup.object({
             phone: Yup.string()
+                .required(t('errors.required')),
+            slug: Yup.string()
                 .required(t('errors.required'))
         }),
         onSubmit(values) {
             setPhone(values.phone)
-            loginWithOtp.mutate({ phone: values.phone, slug: slug as string }, {
+            setSlug(values.slug)
+            loginWithOtp.mutate(values, {
                 onSuccess() {
                     setStepLogin(2)
                     toast.success(t('auth.otp_sent'))
@@ -75,6 +78,26 @@ const LoginStep1: FC = () => {
 
             </div>
 
+            <div className='mt-4'>
+                <Input
+                    label={t('auth.slug')}
+                    placeholder={t('auth.enter_slug')}
+                    type='text'
+                    className='text-right'
+                    name='slug'
+                    onChange={formik.handleChange}
+                    value={formik.values.slug}
+                />
+
+                {
+                    formik.touched.slug && formik.errors.slug &&
+                    <Error
+                        errorText={formik.errors.slug}
+                    />
+                }
+
+            </div>
+
 
             <Button
                 label={t('auth.next')}

src/pages/auth/components/LoginStep2.tsx

@@ -12,15 +12,13 @@ import { useOtpVerify } from '../hooks/useAuthData'
 import { type ErrorType } from '../../../helpers/types'
 import { toast } from 'react-toastify'
 import { setToken, setRefreshToken } from '../../../config/func'
-import { useParams } from 'react-router-dom'
 
 const LoginStep2: FC = () => {
 
     const { t } = useTranslation('global')
-    const { phone, setStepLogin } = useAuthStore()
+    const { phone, setStepLogin, slug } = useAuthStore()
     const { value } = useCountDown(2, true)
     const otpVerify = useOtpVerify()
-    const { slug } = useParams()
 
     const formik = useFormik<{ otp: string }>({
         initialValues: {
@@ -34,7 +32,7 @@ const LoginStep2: FC = () => {
             const params: OtpVerifyType = {
                 phone: phone,
                 otp: values.otp,
-                slug: slug as string
+                slug: slug
             }
             otpVerify.mutate(params, {
                 onSuccess(data) {

src/pages/auth/store/AuthStore.ts

@@ -3,6 +3,10 @@ import { type AuthStoreType } from "../../auth/types/AuthTypes";
 
 export const useAuthStore = create<AuthStoreType>((set) => ({
   phone: "",
+  slug: "",
+  setSlug(value) {
+    set({ slug: value });
+  },
   setPhone(value) {
     set({ phone: value });
   },

src/pages/auth/types/AuthTypes.ts

@@ -9,6 +9,8 @@ export type LoginPasswordType = {
 
 export type AuthStoreType = {
   phone: string;
+  slug: string;
+  setSlug: (value: string) => void;
   setPhone: (value: string) => void;
   email: string;
   setEmail: (value: string) => void;