sidebar + permission header
This commit is contained in:
hamid zarghami
+229
-143
@@ -1,16 +1,104 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, useCallback, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import AvatarImage from '../../assets/images/avatar_image.png'
|
||||
import Button from '../../components/Button'
|
||||
import { DocumentUpload, Edit } from 'iconsax-react'
|
||||
import { DocumentUpload } from 'iconsax-react'
|
||||
import Input from '../../components/Input'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import Select from '../../components/Select'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import { useGetProfile, useUpdateProfile } from './hooks/useProfileData'
|
||||
import Username from './components/Username'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import { UpdateProfileType } from './types/ProfileTypes'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import Email from './components/Email'
|
||||
import Phone from './components/Phone'
|
||||
import { useGetProvines } from '../customer/hooks/useCustomerData'
|
||||
import { useSingleUpload } from '../service/hooks/useServiceData'
|
||||
|
||||
const Profile: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const getProvines = useGetProvines()
|
||||
const getProfile = useGetProfile()
|
||||
const singleUpload = useSingleUpload()
|
||||
const updateProfile = useUpdateProfile()
|
||||
|
||||
const formik = useFormik<UpdateProfileType>({
|
||||
initialValues: {
|
||||
cityId: '',
|
||||
userAddress: '',
|
||||
postalCode: '',
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
cityId: Yup.string().required(t('errors.required')),
|
||||
userAddress: Yup.string().required(t('errors.required')),
|
||||
postalCode: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
updateProfile.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (getProfile.data) {
|
||||
formik.setValues({
|
||||
cityId: getProfile.data.data.user.city?.id || '',
|
||||
userAddress: getProfile.data.data.user.userAddress || '',
|
||||
postalCode: getProfile.data.data.user.postalCode || '',
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getProfile.data])
|
||||
|
||||
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
|
||||
if (acceptedFiles.length > 0) {
|
||||
const file = acceptedFiles[0];
|
||||
if (file.type.startsWith('image/')) {
|
||||
setFile(file);
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
singleUpload.mutate(formData, {
|
||||
onSuccess: (data) => {
|
||||
const params: UpdateProfileType = {
|
||||
profilePic: data.data?.url
|
||||
}
|
||||
updateProfile.mutate(params, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('profile.image_uploaded_successfully'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
toast.error(t('errors.is_not_image'))
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
return (
|
||||
<div className='mt-4 '>
|
||||
@@ -18,161 +106,159 @@ const Profile: FC = () => {
|
||||
{t('profile.account_user')}
|
||||
</div>
|
||||
|
||||
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
|
||||
<div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.image_profile')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.image_profile_desc')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 flex xl:gap-6 gap-4'>
|
||||
<img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
|
||||
<div>
|
||||
<Button
|
||||
className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
|
||||
>
|
||||
<div className='flex items-center gap-3'>
|
||||
<DocumentUpload color='white' size={18} />
|
||||
<div>{t('profile.upload_image')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
<p className='mt-3 text-description'>
|
||||
{t('profile.format_image')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.info_account')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.auth_after_change_info')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 '>
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<Input
|
||||
label={t('profile.username')}
|
||||
value={'mehrdad'}
|
||||
readOnly
|
||||
/>
|
||||
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
{
|
||||
getProfile.isPending || getProvines.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
|
||||
<div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('edit')}
|
||||
{t('profile.image_profile')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.image_profile_desc')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 flex xl:gap-6 gap-4'>
|
||||
<img src={file ? URL.createObjectURL(file) : getProfile.data?.data?.user?.profilePic ? getProfile.data?.data?.user?.profilePic : AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
|
||||
<div>
|
||||
<Button
|
||||
isLoading={singleUpload.isPending || updateProfile.isPending}
|
||||
className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div {...getRootProps()} className='flex items-center gap-3'>
|
||||
<DocumentUpload color='white' size={18} />
|
||||
<div>{t('profile.upload_image')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
<p className='mt-3 items-center flex gap-0.5 text-description'>
|
||||
{t('profile.formats')}
|
||||
<div className='-mt-0.5'>{t('profile.format_image')}</div>
|
||||
<span>{t('profile.max_size')}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('email')}
|
||||
value={'info@example.com'}
|
||||
readOnly
|
||||
/>
|
||||
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('edit')}
|
||||
{t('profile.info_account')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.auth_after_change_info')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 '>
|
||||
<Username
|
||||
username={getProfile.data?.data?.user?.userName}
|
||||
/>
|
||||
<Email
|
||||
email={getProfile.data?.data?.user?.email}
|
||||
isVerified={getProfile.data?.data?.user?.emailVerified}
|
||||
/>
|
||||
<Phone
|
||||
phone={getProfile.data?.data?.user?.phone}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.personal_information')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.enter_carefully_your_information')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<DatePickerComponent
|
||||
label={t('profile.date_of_birth')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue={getProfile.data?.data?.user?.birthDate}
|
||||
/>
|
||||
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.national_code')}
|
||||
value={getProfile.data?.data?.user?.nationalCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.phone_call')}
|
||||
value={'۰۹۱۲۹۲۸۳۳۹۵'}
|
||||
readOnly
|
||||
/>
|
||||
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
|
||||
{/* <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('edit')}
|
||||
{t('profile.address')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.address_live')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='rowTwoInput'>
|
||||
<Select
|
||||
label={t('profile.province')}
|
||||
items={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
|
||||
onChange={(e) => setProvinesId(e.target.value)}
|
||||
className='bg-white border'
|
||||
placeholder={t('select')}
|
||||
value={provinesId}
|
||||
/>
|
||||
<Select
|
||||
label={t('profile.city')}
|
||||
items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
|
||||
placeholder={t('select')}
|
||||
{...formik.getFieldProps('cityId')}
|
||||
error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.personal_information')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.enter_carefully_your_information')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<DatePickerComponent
|
||||
label={t('profile.date_of_birth')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.postal_code')}
|
||||
{...formik.getFieldProps('postalCode')}
|
||||
error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
|
||||
value={formik.values.postalCode}
|
||||
/>
|
||||
</div>
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Textarea
|
||||
label={t('profile.address')}
|
||||
defaultValue={formik.values.userAddress}
|
||||
{...formik.getFieldProps('userAddress')}
|
||||
error_text={formik.touched.userAddress && formik.errors.userAddress ? formik.errors.userAddress : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.national_code')}
|
||||
value={'۰۰۱۲۳۴۵۳۴۴'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-end mt-5'>
|
||||
<Button
|
||||
className='xl:w-fit px-10'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={updateProfile.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('save')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
|
||||
<div className='flex-1'>
|
||||
<div>
|
||||
{t('profile.address')}
|
||||
</div>
|
||||
<div className='text-description text-xs mt-2'>
|
||||
{t('profile.address_live')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='rowTwoInput'>
|
||||
<Select
|
||||
label={t('profile.province')}
|
||||
items={[
|
||||
{
|
||||
label: 'تهران',
|
||||
value: 'tehran'
|
||||
}
|
||||
]}
|
||||
className='bg-white border'
|
||||
/>
|
||||
<Select
|
||||
label={t('profile.city')}
|
||||
items={[
|
||||
{
|
||||
label: 'تهران',
|
||||
value: 'tehran'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.postal_code')}
|
||||
value={'۱۲۳۴۵۶۷۸'}
|
||||
/>
|
||||
</div>
|
||||
<div className='xl:mt-7 mt-4'>
|
||||
<Textarea
|
||||
label={t('profile.address')}
|
||||
value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-20 xl:hidden'></div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className='h-20 xl:hidden'></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user