shop-admin/src/pages/auth/components/RegisterStep2.tsx

import { FC, Fragment } from 'react'
import { useFormik } from 'formik'
import { RegisterType } from '../types/AuthTypes'
import * as Yup from 'yup'
import { useAuthStore } from '../store/AuthStore'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import DatePickerComponent from '../../../components/DatePicker'
import Button from '../../../components/Button'
import { useRegister } from '../hooks/useAuthData'
import { ErrorType } from '../../../helpers/types'
import { toast } from 'react-toastify'
import { Pages } from '../../../config/Pages'

const RegisterStep2: FC = () => {

    const { t } = useTranslation('global')
    const { phone } = useAuthStore()
    const register = useRegister()

    const formik = useFormik<RegisterType>({
        initialValues: {
            firstName: '',
            lastName: '',
            birthDate: '',
            code: 0,
            nationalCode: '',
            password: '',
            phone: phone,
        },
        validationSchema: Yup.object({
            firstName: Yup.string()
                .required(t('errors.required')),
            lastName: Yup.string()
                .required(t('errors.required')),
            birthDate: Yup.string()
                .required(t('errors.required')),
            code: Yup.number()
                .required(t('errors.required')),
            nationalCode: Yup.string()
                .required(t('errors.required')),
            password: Yup.string()
                .required(t('errors.required')),
            phone: Yup.string()
                .required(t('errors.required')),
        }),
        onSubmit(values) {
            register.mutate(values, {
                onSuccess(data) {
                    localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
                    localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
                    window.location.href = Pages.dashboard
                },
                onError(error: ErrorType) {
                    toast.error(error?.response?.data?.error?.message[0])
                },
            })
        },
    })

    return (
        <Fragment>
            <div className='mt-5 rowTwoInput'>
                <Input
                    label={t('auth.name')}
                    placeholder={t('auth.enter_name')}
                    name='firstName'
                    onChange={formik.handleChange}
                    error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
                />

                <Input
                    label={t('auth.family')}
                    placeholder={t('auth.enter_family')}
                    name='lastName'
                    onChange={formik.handleChange}
                    error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                />

            </div>
            <div className='mt-4 min-w-full rowTwoInput'>
                <DatePickerComponent
                    label={t('auth.dateofbirth')}
                    onChange={(date: string) => formik.setFieldValue('birthDate', date)}
                    placeholder={t('auth.select_date')}
                    error_text={formik.touched.birthDate && formik.errors.birthDate ? formik.errors.birthDate : ''}
                />

                <Input
                    label={t('auth.national_code')}
                    placeholder={t('auth.national_code_enter')}
                    name='nationalCode'
                    onChange={formik.handleChange}
                    error_text={formik.touched.nationalCode && formik.errors.nationalCode ? formik.errors.nationalCode : ''}
                />
            </div>

            <div className='mt-4 rowTwoInput'>
                <Input
                    label={t('auth.password')}
                    placeholder={t('auth.enter_password')}
                    type='password'
                    name='password'
                    onChange={formik.handleChange}
                    error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                />
                <Input
                    label={t('auth.phonen_number')}
                    placeholder={t('auth.enter_phone_number')}
                    readOnly
                    value={phone}
                />
            </div>

            <div className='mt-4 rowTwoInput'>
                <Input
                    label={t('auth.verify_code')}
                    placeholder={t('auth.enter_verify_code')}
                    type='tel'
                    name='code'
                    onChange={formik.handleChange}
                    error_text={formik.touched.code && formik.errors.code ? formik.errors.code : ''}
                />
            </div>

            <Button
                label={t('auth.next')}
                className='mt-8'
                onClick={() => formik.handleSubmit()}
                isLoading={register.isPending}
            />
        </Fragment>
    )
}

export default RegisterStep2