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>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import Input from '../../../components/Input'
|
||||
import { Edit, TickCircle } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import { isEmail } from '../../../config/func'
|
||||
import DefaulModal from '../../../components/DefaulModal'
|
||||
import OTPInput from 'react-otp-input'
|
||||
import { useUpdateEmail } from '../hooks/useProfileData'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
type Props = {
|
||||
email: string | null,
|
||||
isVerified: boolean
|
||||
}
|
||||
|
||||
const Email: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [email, setEmail] = useState<string>(props.email ? props.email : '')
|
||||
const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const [code, setCode] = useState<string>('')
|
||||
const updateEmail = useUpdateEmail()
|
||||
|
||||
const handleShowModal = () => {
|
||||
updateEmail.mutate({ email: email }, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('profile.link_email'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className='flex relative items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('email')}
|
||||
value={email}
|
||||
readOnly={isReadOnly}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
{
|
||||
!props.isVerified &&
|
||||
<div className='text-[10px] absolute left-24 text-red-400 top-[34px]'>
|
||||
{t('profile.email_not_verified')}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
isReadOnly ?
|
||||
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<Button
|
||||
label={t('save')}
|
||||
className='px-4 w-fit'
|
||||
disabled={!isEmail(email)}
|
||||
onClick={handleShowModal}
|
||||
isLoading={updateEmail.isPending}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<DefaulModal
|
||||
open={showModal}
|
||||
close={() => setShowModal(false)}
|
||||
isHeader
|
||||
title_header={t('profile.confrim_email')}
|
||||
>
|
||||
<div className='mt-7'>
|
||||
<div className='text-xs text-center'>
|
||||
کد تایید به ایمیل {email} ارسال شده است.برای تایید کد مربوطه را وارد کنید.
|
||||
</div>
|
||||
|
||||
<div className='mt-10'>کد تایید</div>
|
||||
<div className='mt-2 w-full flex justify-center dltr otp'>
|
||||
<OTPInput
|
||||
value={code}
|
||||
onChange={setCode}
|
||||
shouldAutoFocus
|
||||
renderInput={(props) =>
|
||||
<input
|
||||
{...props}
|
||||
type='tel'
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
className='w-full h-[50px] flex-1 mx-2 bg-white bg-opacity-30 border rounded-2.5' />
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-14 flex justify-end border-t border-border pt-8'>
|
||||
<div className='flex gap-5'>
|
||||
<Button
|
||||
className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
|
||||
label='لغو'
|
||||
onClick={() => setShowModal(false)}
|
||||
/>
|
||||
<Button
|
||||
className='w-[150px] text-xs'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>{t('wallet.submit_slip')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DefaulModal>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default Email
|
||||
@@ -0,0 +1,143 @@
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import Input from '../../../components/Input'
|
||||
import { Edit, TickCircle } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import DefaulModal from '../../../components/DefaulModal'
|
||||
import OTPInput from 'react-otp-input'
|
||||
import { useUpdatePhone, useVerifyPhone } from '../hooks/useProfileData'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { toast } from 'react-toastify'
|
||||
import { VerifyPhoneType } from '../types/ProfileTypes'
|
||||
|
||||
type Props = {
|
||||
phone: string,
|
||||
}
|
||||
|
||||
const Phone: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [phone, setPhone] = useState<string>(props.phone)
|
||||
const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const [code, setCode] = useState<string>('')
|
||||
const updatePhone = useUpdatePhone()
|
||||
const verifyPhone = useVerifyPhone()
|
||||
|
||||
const handleShowModal = () => {
|
||||
updatePhone.mutate({ phone: phone }, {
|
||||
onSuccess: () => {
|
||||
setShowModal(true)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
const params: VerifyPhoneType = {
|
||||
code: code,
|
||||
phone: phone
|
||||
}
|
||||
|
||||
verifyPhone.mutate(params, {
|
||||
onSuccess: () => {
|
||||
setShowModal(false)
|
||||
setIsReadOnly(true)
|
||||
toast.success(t('success'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
|
||||
<Input
|
||||
label={t('profile.phone_call')}
|
||||
value={phone}
|
||||
readOnly={isReadOnly}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
{
|
||||
isReadOnly ?
|
||||
<div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<Button
|
||||
label={t('save')}
|
||||
className='px-4 w-fit'
|
||||
disabled={phone.length !== 11}
|
||||
onClick={handleShowModal}
|
||||
isLoading={updatePhone.isPending}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<DefaulModal
|
||||
open={showModal}
|
||||
close={() => setShowModal(false)}
|
||||
isHeader
|
||||
title_header={t('profile.confrim_email')}
|
||||
>
|
||||
<div className='mt-7'>
|
||||
<div className='text-xs text-center'>
|
||||
کد تایید به شماره {phone} ارسال شده است.برای تایید کد مربوطه را وارد کنید.
|
||||
</div>
|
||||
|
||||
<div className='mt-10'>کد تایید</div>
|
||||
<div className='mt-2 w-full flex justify-center dltr otp'>
|
||||
<OTPInput
|
||||
value={code}
|
||||
onChange={setCode}
|
||||
shouldAutoFocus
|
||||
numInputs={5}
|
||||
renderInput={(props) =>
|
||||
<input
|
||||
{...props}
|
||||
type='tel'
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
className='w-full h-[50px] flex-1 mx-2 bg-white bg-opacity-30 border rounded-2.5' />
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-14 flex justify-end border-t border-border pt-8'>
|
||||
<div className='flex gap-5'>
|
||||
<Button
|
||||
className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
|
||||
label='لغو'
|
||||
onClick={() => setShowModal(false)}
|
||||
/>
|
||||
<Button
|
||||
className='w-[150px] text-xs'
|
||||
onClick={handleSubmit}
|
||||
disabled={code.length !== 5}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>{t('save')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DefaulModal>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default Phone
|
||||
@@ -0,0 +1,132 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import Input from '../../../components/Input'
|
||||
import { Edit } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import { useCheckUserName, useUpdateProfile } from '../hooks/useProfileData'
|
||||
import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
username: string | null,
|
||||
}
|
||||
const Username: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [username, setUsername] = useState<string>(props.username ? props.username : '')
|
||||
const [canSave, setCanSave] = useState<boolean>(false)
|
||||
const [canEdit, setCanEdit] = useState<boolean>(false)
|
||||
const [status, setStatus] = useState<'success' | 'error' | ''>('')
|
||||
const checkUsername = useCheckUserName()
|
||||
const updateProfile = useUpdateProfile()
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value
|
||||
setCanSave(false)
|
||||
if (value.indexOf(' ') === -1) {
|
||||
if (value.length <= 3) {
|
||||
setUsername(value)
|
||||
return
|
||||
}
|
||||
setStatus('')
|
||||
const params: CheckUserNameType = {
|
||||
value: e.target.value,
|
||||
type: 'userName'
|
||||
}
|
||||
setUsername(e.target.value)
|
||||
checkUsername.mutate(params, {
|
||||
onSuccess() {
|
||||
setStatus('success')
|
||||
setCanSave(true)
|
||||
},
|
||||
onError() {
|
||||
setStatus('error')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
const params: UpdateProfileType = {
|
||||
userName: username
|
||||
}
|
||||
|
||||
updateProfile.mutate(params, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('profile.username_save_success'))
|
||||
setCanEdit(false)
|
||||
setCanSave(false)
|
||||
setStatus('')
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error.response?.data?.error?.message?.[0])
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (username !== props.username) {
|
||||
setUsername(props.username ? props.username : '')
|
||||
}
|
||||
}, [props.username])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='flex items-end xl:gap-6 gap-3'>
|
||||
<div className='relative w-full'>
|
||||
<Input
|
||||
label={t('profile.username')}
|
||||
value={username}
|
||||
readOnly={!canEdit}
|
||||
onChange={handleChange}
|
||||
minLength={3}
|
||||
maxLength={20}
|
||||
/>
|
||||
|
||||
{
|
||||
checkUsername.isPending &&
|
||||
<div className='absolute left-4 top-8'>
|
||||
<div className='loader'></div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className='flex relative gap-1 text-[#0047FF] text-xs items-center'>
|
||||
{
|
||||
!canEdit ?
|
||||
<div onClick={() => setCanEdit(true)} className='flex gap-1 cursor-pointer relative -top-3'>
|
||||
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<Button
|
||||
label={t('save')}
|
||||
onClick={handleSave}
|
||||
className='px-4'
|
||||
disabled={!canSave}
|
||||
isLoading={updateProfile.isPending}
|
||||
/>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
status === 'success' ?
|
||||
<div className='text-xs text-green-500 mt-2'>
|
||||
{t('profile.username_available')}
|
||||
</div>
|
||||
:
|
||||
status === 'error' ?
|
||||
<div className='text-xs text-red-500 mt-2'>
|
||||
{t('profile.username_not_available')}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Username
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import * as api from '../service/ProfileService'
|
||||
import { CheckUserNameType, UpdateEmailType, UpdatePhoneType, UpdateProfileType, VerifyPhoneType } from '../types/ProfileTypes';
|
||||
|
||||
export const useGetProfile = () => {
|
||||
return useQuery({
|
||||
queryKey: ["profile"],
|
||||
queryFn: () => api.getProfile(),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCheckUserName = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CheckUserNameType) => api.checkUserName(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateProfile = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: UpdateProfileType) => api.updateProfile(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateEmail = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: UpdateEmailType) => api.updateEmail(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdatePhone = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: UpdatePhoneType) => api.updatePhone(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useVerifyPhone = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: VerifyPhoneType) => api.verifyPhone(variables),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import axios from "../../../config/axios";
|
||||
import {
|
||||
CheckUserNameType,
|
||||
UpdateEmailType,
|
||||
UpdatePhoneType,
|
||||
UpdateProfileType,
|
||||
VerifyPhoneType,
|
||||
} from "../types/ProfileTypes";
|
||||
|
||||
export const getProfile = async () => {
|
||||
const { data } = await axios.get(`/users/me`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const checkUserName = async (params: CheckUserNameType) => {
|
||||
const { data } = await axios.post(`/users/check-validity`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateProfile = async (params: UpdateProfileType) => {
|
||||
const { data } = await axios.patch(`/users/update-profile`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateEmail = async (params: UpdateEmailType) => {
|
||||
const { data } = await axios.patch(`/users/change-email`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updatePhone = async (params: UpdatePhoneType) => {
|
||||
const { data } = await axios.patch(`/users/change-phone`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const verifyPhone = async (params: VerifyPhoneType) => {
|
||||
const { data } = await axios.patch(`/users/verify-phone`, params);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
export type CheckUserNameType = {
|
||||
type: "userName";
|
||||
value: string;
|
||||
};
|
||||
|
||||
export type UpdateProfileType = {
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
birthDate?: string;
|
||||
userName?: string;
|
||||
profilePic?: string;
|
||||
cityId?: string;
|
||||
postalCode?: string;
|
||||
userAddress?: string;
|
||||
};
|
||||
|
||||
export type UpdateEmailType = {
|
||||
email: string;
|
||||
};
|
||||
|
||||
export type UpdatePhoneType = {
|
||||
phone: string;
|
||||
};
|
||||
|
||||
export type VerifyPhoneType = {
|
||||
phone: string;
|
||||
code: string;
|
||||
};
|
||||
Reference in New Issue
Block a user