danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enteghad + edit phone + edit email

Browse Source
This commit is contained in:
hamid zarghami
2025-02-24 12:06:22 +03:30
parent 158da6ce8a
commit e5d321e041
11 changed files with 413 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/langs/fa.json
+2 -1
View File
@@ -371,7 +371,8 @@
"username_available": "نام کاربری موجود",
"username_not_available": "نام کاربری موجود نیست",
"username_save_success": "نام کاربری با موفقیت ذخیره شد",
"image_uploaded_successfully": "تصویر با موفقیت آپلود شد"
"image_uploaded_successfully": "تصویر با موفقیت آپلود شد",
"confrim_email": "تایید ایمیل"
},
"email": "ایمیل",
"save": "ذخیره",
src/pages/criticisms/Add.tsx
+63 -1
View File
@@ -1,14 +1,68 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Button from '../../components/Button'
import { TickSquare } from 'iconsax-react'
import { useMultiUpload } from '../ticket/hooks/useTicketData'
import { useFormik } from 'formik'
import { CreateCriticismsTypes } from './types/CriticismsTypes'
import * as Yup from 'yup'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import { useCreateCriticisms } from './hooks/useCriticismsData'
const AddCriticisms: FC = () => {
const { t } = useTranslation('global')
const [files, setFiles] = useState<File[]>([])
const multiUpload = useMultiUpload()
const createCriticisms = useCreateCriticisms()
const formik = useFormik<CreateCriticismsTypes>({
initialValues: {
content: '',
files: [],
title: '',
},
validationSchema: Yup.object({
title: Yup.string().required(t('errors.required')),
content: Yup.string().required(t('errors.required')),
}),
onSubmit: async (values) => {
if (files.length > 0) {
const images = new FormData()
files.forEach(file => {
images.append('files', file)
})
await multiUpload.mutateAsync(images, {
onSuccess: async (data) => {
values.files = await data.data.map((item: { url: string }) => item?.url)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
} else {
delete values.files
}
createCriticisms.mutate(values, {
onSuccess: () => {
toast.success(t('success'))
formik.resetForm()
setTimeout(() => {
window.location.reload()
}, 1000);
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
}
})
return (
<div className='mt-4 text-sm'>
@@ -30,6 +84,8 @@ const AddCriticisms: FC = () => {
<Input
label={t('criticisms.subject')}
placeholder={t('criticisms.enter_your_subject')}
{...formik.getFieldProps('title')}
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
/>
</div>
@@ -37,12 +93,16 @@ const AddCriticisms: FC = () => {
<Textarea
label={t('criticisms.description')}
placeholder={t('criticisms.enter_description')}
{...formik.getFieldProps('content')}
error_text={formik.touched.content && formik.errors.content ? formik.errors.content : ''}
/>
</div>
<div className='mt-7'>
<UploadBox
label={t('attachment')}
isMultiple
onChange={setFiles}
/>
</div>
@@ -51,6 +111,8 @@ const AddCriticisms: FC = () => {
<Button
label={t('ticket.send')}
className='max-w-[100px]'
onClick={() => formik.handleSubmit()}
isLoading={createCriticisms.isPending || multiUpload.isPending}
/>
</div>
</div>
src/pages/criticisms/hooks/useCriticismsData.ts
+10
View File
@@ -0,0 +1,10 @@
import { useMutation } from "@tanstack/react-query";
import { CreateCriticismsTypes } from "../types/CriticismsTypes";
import * as api from "../service/CriticismsService";
export const useCreateCriticisms = () => {
return useMutation({
mutationFn: (variables: CreateCriticismsTypes) =>
api.createCriticisms(variables),
});
};
src/pages/criticisms/service/CriticismsService.ts
+7
View File
@@ -0,0 +1,7 @@
import axios from "../../../config/axios";
import { CreateCriticismsTypes } from "../types/CriticismsTypes";
export const createCriticisms = async (params: CreateCriticismsTypes) => {
const { data } = await axios.post(`/criticisms`, params);
return data;
};
src/pages/criticisms/types/CriticismsTypes.ts
+5
View File
@@ -0,0 +1,5 @@
export type CreateCriticismsTypes = {
title: string;
content: string;
files?: string[];
};
src/pages/profile/Profile.tsx
+7 -25
View File
@@ -2,7 +2,7 @@ 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, TickCircle } from 'iconsax-react'
import { DocumentUpload, TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
@@ -19,6 +19,8 @@ import { useGetCities, useGetProvines } from '../financial/hooks/useFinancialDat
import { ProvinesItemType } from '../financial/types/FinancialTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import Email from './components/Email'
import Phone from './components/Phone'
const Profile: FC = () => {
@@ -159,32 +161,12 @@ const Profile: FC = () => {
<Username
username={getProfile.data?.data?.user?.userName}
/>
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
<Input
label={t('email')}
value={getProfile.data?.data?.user?.email}
readOnly
<Email
email={getProfile.data?.data?.user?.email}
/>
<div className='flex 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>
</div>
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
<Input
label={t('profile.phone_call')}
value={getProfile.data?.data?.user?.phone}
readOnly
<Phone
phone={getProfile.data?.data?.user?.phone}
/>
<div className='flex 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>
</div>
</div>
</div>
src/pages/profile/components/Email.tsx
+120
View File
@@ -0,0 +1,120 @@
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,
}
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: () => {
setShowModal(true)
},
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('email')}
value={email}
readOnly={isReadOnly}
onChange={(e) => setEmail(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={!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
src/pages/profile/components/Phone.tsx
+143
View File
@@ -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
src/pages/profile/hooks/useProfileData.tsx
+19 -1
View File
@@ -1,6 +1,6 @@
import { useMutation, useQuery } from '@tanstack/react-query';
import * as api from '../service/ProfileService'
import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes';
import { CheckUserNameType, UpdateEmailType, UpdatePhoneType, UpdateProfileType, VerifyPhoneType } from '../types/ProfileTypes';
export const useGetProfile = () => {
return useQuery({
@@ -20,3 +20,21 @@ export const useUpdateProfile = () => {
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),
});
};
src/pages/profile/service/ProfileService.ts
+22 -1
View File
@@ -1,5 +1,11 @@
import axios from "../../../config/axios";
import { CheckUserNameType, UpdateProfileType } from "../types/ProfileTypes";
import {
CheckUserNameType,
UpdateEmailType,
UpdatePhoneType,
UpdateProfileType,
VerifyPhoneType,
} from "../types/ProfileTypes";
export const getProfile = async () => {
const { data } = await axios.get(`/users/me`);
@@ -15,3 +21,18 @@ 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/update-email`, params);
return data;
};
export const updatePhone = async (params: UpdatePhoneType) => {
const { data } = await axios.patch(`/users/update-phone`, params);
return data;
};
export const verifyPhone = async (params: VerifyPhoneType) => {
const { data } = await axios.patch(`/users/verify-phone`, params);
return data;
};
src/pages/profile/types/ProfileTypes.ts
+13
View File
@@ -13,3 +13,16 @@ export type UpdateProfileType = {
postalCode?: string;
userAddress?: string;
};
export type UpdateEmailType = {
email: string;
};
export type UpdatePhoneType = {
phone: string;
};
export type VerifyPhoneType = {
phone: string;
code: string;
};