crud discount admin
This commit is contained in:
hamid zarghami
@@ -58,6 +58,7 @@ export const Pages = {
|
||||
discount: {
|
||||
list: "/discounts/list",
|
||||
create: "/discounts/create",
|
||||
detail: "/discounts/detail/",
|
||||
},
|
||||
referralCode: {
|
||||
list: "/referral-code/list",
|
||||
|
||||
+4
-1
@@ -329,7 +329,10 @@
|
||||
"DIRECT": "مستقیم",
|
||||
"FIXED": "ثابت",
|
||||
"plan": "پلن",
|
||||
"user": "کاربر"
|
||||
"user": "کاربر",
|
||||
"0": "درصد",
|
||||
"1": "مبلغ",
|
||||
"update_discount": "ویرایش تخفیف"
|
||||
},
|
||||
"blog": {
|
||||
"blog": "بلاگ",
|
||||
|
||||
@@ -1,23 +1,38 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import { Add, Edit, Trash } from 'iconsax-react'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import Input from '../../components/Input'
|
||||
import { useGetDiscounts } from './hooks/useDiscountData'
|
||||
import { useGetDiscounts, useDeleteDiscount } from './hooks/useDiscountData'
|
||||
import { DiscountItemType } from './types/DiscountTypes'
|
||||
import moment from 'moment-jalaali'
|
||||
import ToggleStatusDiscount from './components/ToggleStatusDiscount'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { NumberFormat } from '../../config/func'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
|
||||
const DiscountList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const getDiscounts = useGetDiscounts(search)
|
||||
const deleteDiscount = useDeleteDiscount()
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteDiscount.mutate(id, {
|
||||
onSuccess: () => {
|
||||
getDiscounts.refetch()
|
||||
toast.success(t('success'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
@@ -68,36 +83,48 @@ const DiscountList: FC = () => {
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.user')} />
|
||||
<Td text={t('discount.title')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.plan')} />
|
||||
<Td text={t('discount.status')} />
|
||||
<Td text={t('')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getDiscounts.data?.data?.discounts?.map((item: DiscountItemType, index: number) => {
|
||||
getDiscounts.data?.data?.discounts?.map((item: DiscountItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={String(index + 1)} />
|
||||
<Td text={item.users[0] ? item.users[0].firstName + ' ' + item.users[0].lastName : ''} />
|
||||
<Td text={item.title} />
|
||||
<Td text={t(`discount.${item.type}`)} />
|
||||
<Td text={item.code} />
|
||||
<Td text={moment(item.startDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
|
||||
<Td text={moment(item.endDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
|
||||
<Td text={String(item.amount)} />
|
||||
<Td text={item.subscriptionPlans[0].name} />
|
||||
<Td text={NumberFormat(+item.value)} />
|
||||
<Td text={t('')}>
|
||||
<ToggleStatusDiscount
|
||||
defaultActive={item.isActive}
|
||||
id={item.id}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={t('')}>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Link
|
||||
to={Pages.discount.detail + item.id}
|
||||
>
|
||||
<Edit size={20} color='#888888' />
|
||||
</Link>
|
||||
|
||||
<Trash
|
||||
size={20}
|
||||
color='#888888'
|
||||
onClick={() => handleDelete(item.id)}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
import { FC, Fragment, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../components/Input'
|
||||
import Button from '../../components/Button'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import RadioGroup from '../../components/RadioGroup'
|
||||
import { useFormik } from 'formik'
|
||||
import { CreateDiscountType, SubscriptionPlanType } from './types/DiscountTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { useGetAllServices } from '../service/hooks/useServiceData'
|
||||
import { ServiceItemType } from '../service/types/ServiceTypes'
|
||||
import CheckBoxComponent from '../../components/CheckBoxComponent'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useGetDiscountDetail, useUpdateDiscount } from './hooks/useDiscountData'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
const UpdateDiscount: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [serviceId, setServiceId] = useState<string[]>([])
|
||||
// const [planId, setPlanId] = useState<string>('')
|
||||
// const [customerId, setCustomerId] = useState('')
|
||||
const getServices = useGetAllServices('', 1, '', '', undefined, 50)
|
||||
// const getPlans = useGetPlans(serviceId)
|
||||
// const getCustomers = useGetCustomers()
|
||||
const getDiscountDetail = useGetDiscountDetail(id || '')
|
||||
const updateDiscount = useUpdateDiscount()
|
||||
|
||||
const formik = useFormik<CreateDiscountType>({
|
||||
initialValues: {
|
||||
endDate: '',
|
||||
startDate: '',
|
||||
title: '',
|
||||
type: 1,
|
||||
targetServices: [],
|
||||
direct: true,
|
||||
value: 0,
|
||||
isActive: true
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
value: Yup.number().required(t('errors.required')),
|
||||
endDate: Yup.string().required(t('errors.required')),
|
||||
startDate: Yup.string().required(t('errors.required')),
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
type: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit(values) {
|
||||
values.targetServices = serviceId
|
||||
const params: CreateDiscountType = {
|
||||
...values,
|
||||
startDate: moment(values.startDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
|
||||
endDate: moment(values.endDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
|
||||
value: +values.value
|
||||
}
|
||||
updateDiscount.mutate({ id: id || '', params }, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
navigate(Pages.discount.list)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (getDiscountDetail.data?.data?.discount) {
|
||||
formik.setValues({
|
||||
...getDiscountDetail.data?.data?.discount,
|
||||
startDate: moment(getDiscountDetail.data?.data?.discount.startDate, 'YYYY-MM-DD').format('jYYYY-jMM-jDD'),
|
||||
endDate: moment(getDiscountDetail.data?.data?.discount.endDate, 'YYYY-MM-DD').format('jYYYY-jMM-jDD'),
|
||||
direct: getDiscountDetail.data?.data?.discount.applicationType === 'DIRECT',
|
||||
})
|
||||
|
||||
// delete getDiscountDetail.data?.data?.discount.subscriptionPlans
|
||||
|
||||
const ids = getDiscountDetail.data?.data?.discount.subscriptionPlans.map((item: SubscriptionPlanType) => item?.service?.id)
|
||||
// Create an array of unique service IDs by removing duplicates
|
||||
const uniqueIds = [...new Set(ids)];
|
||||
setServiceId(uniqueIds as string[]);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getDiscountDetail.data])
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('discount.update_discount')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={updateDiscount.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('discount.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex gap-6 xl:mt-8 mt-4'>
|
||||
<div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||||
<div className='mt-6'>
|
||||
{t('discount.type')}
|
||||
<div className='rowTwoInput mt-2'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('discount.direct_discount'),
|
||||
value: true
|
||||
},
|
||||
{
|
||||
label: t('discount.discount_code'),
|
||||
value: false
|
||||
}
|
||||
]}
|
||||
onChange={(value) => formik.setFieldValue('direct', value)}
|
||||
selected={formik.values.direct}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<Input
|
||||
label={t('discount.title')}
|
||||
placeholder={t('discount.enter_discount_description')}
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
{/* <div className='w-full sm:mt-7 flex flex-col xl:flex-row items-center'>
|
||||
<button className='text-xs border h-[39px] xl:h-full w-full xl:w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
|
||||
<Refresh
|
||||
size={18} color='black'
|
||||
/>
|
||||
<p>
|
||||
{t('discount.auto_generate_code')}
|
||||
</p>
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<div className='w-full'>
|
||||
{t('discount.price')}
|
||||
<div className='rowTwoInput mt-2'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('discount.fixed_amount'),
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: t('discount.percent'),
|
||||
value: '0'
|
||||
}
|
||||
]}
|
||||
onChange={(value) => formik.setFieldValue('type', value)}
|
||||
selected={formik.values.type.toString()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
label={t('discount.price_or_percent')}
|
||||
placeholder={t('discount.enter_price_or_percent')}
|
||||
{...formik.getFieldProps('value')}
|
||||
error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<DatePickerComponent
|
||||
label={t('discount.startDate')}
|
||||
onChange={(value) => formik.setFieldValue('startDate', value)}
|
||||
placeholder=''
|
||||
error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
|
||||
defaulValue={formik.values.startDate}
|
||||
/>
|
||||
<DatePickerComponent
|
||||
label={t('discount.endDate')}
|
||||
onChange={(value) => formik.setFieldValue('endDate', value)}
|
||||
placeholder=''
|
||||
error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
|
||||
defaulValue={formik.values.endDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
||||
<div className='text-sm flex items-center justify-between'>
|
||||
<p>
|
||||
{t('discount.service_status')}
|
||||
</p>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
formik.values.direct &&
|
||||
<Fragment>
|
||||
<p className='mt-10 text-sm'>{t('discount.availabe_service')}</p>
|
||||
<div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
/>
|
||||
{
|
||||
getServices.data?.data?.services?.map((item: ServiceItemType) => (
|
||||
<div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={serviceId.includes(item.id)}
|
||||
onChange={(e) => setServiceId(e.target.checked ? [...serviceId, item.id] : serviceId.filter(id => id !== item.id))}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
{/* {
|
||||
getPlans.data &&
|
||||
<div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
|
||||
{
|
||||
getPlans.data?.data?.subscriptions?.map((item: PlanItemType) => (
|
||||
<div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={planId === item.id}
|
||||
onChange={(e) => setPlanId(e.target.checked ? item.id : '')}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
planId && getCustomers.data &&
|
||||
<div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
|
||||
{
|
||||
getCustomers.data?.data?.customers?.map((item: CustomerItemType) => (
|
||||
<div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={customerId === item.id}
|
||||
onChange={(e) => setCustomerId(e.target.checked ? item.id : '')}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
{item.firstName + ' ' + item.lastName}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default UpdateDiscount
|
||||
@@ -21,3 +21,23 @@ export const useToggleStatusDiscount = () => {
|
||||
mutationFn: (variables: string) => api.toggleStatusDiscount(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetDiscountDetail = (id: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["discount", id],
|
||||
queryFn: () => api.getDiscountDetail(id),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateDiscount = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: { id: string; params: CreateDiscountType }) =>
|
||||
api.updateDiscount(variables.id, variables.params),
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteDiscount = () => {
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.deleteDiscount(id),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -15,3 +15,21 @@ export const toggleStatusDiscount = async (id: string) => {
|
||||
const { data } = await axios.patch(`/discounts/${id}/toggle`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getDiscountDetail = async (id: string) => {
|
||||
const { data } = await axios.get(`/discounts/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateDiscount = async (
|
||||
id: string,
|
||||
params: CreateDiscountType
|
||||
) => {
|
||||
const { data } = await axios.patch(`/discounts/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const deleteDiscount = async (id: string) => {
|
||||
const { data } = await axios.delete(`/discounts/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -24,7 +24,7 @@ export type DiscountItemType = {
|
||||
title: string;
|
||||
type: DiscountType;
|
||||
calculationType: DiscountCalculationType;
|
||||
amount: string | number;
|
||||
value: string | number;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
subscriptionPlans: { id: string; createdAt: string; name: string }[];
|
||||
@@ -35,3 +35,16 @@ export type DiscountItemType = {
|
||||
isActive: boolean;
|
||||
users: { firstName: string; lastName: string }[];
|
||||
};
|
||||
|
||||
export type SubscriptionPlanType = {
|
||||
createdAt: string;
|
||||
deletedAt: string | null;
|
||||
duration: number;
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
name: string;
|
||||
originalPrice: number;
|
||||
price: number;
|
||||
service: { id: string; createdAt: string };
|
||||
author: string;
|
||||
};
|
||||
|
||||
+2
-1
@@ -59,7 +59,7 @@ import UpdateService from '../pages/service/UpdateService'
|
||||
import UpdateCustomer from '../pages/customer/Update'
|
||||
import UpdateBlog from '../pages/blog/Update'
|
||||
import Update from '../pages/annoncement/Update'
|
||||
|
||||
import UpdateDiscount from '../pages/discounts/UpdateDiscount'
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
const { hasSubMenu } = useSharedStore()
|
||||
@@ -96,6 +96,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.ads.update + ':id'} element={<UpdateAds />} />
|
||||
<Route path={Pages.discount.list} element={<DiscountsList />} />
|
||||
<Route path={Pages.discount.create} element={<CreateDiscount />} />
|
||||
<Route path={Pages.discount.detail + ':id'} element={<UpdateDiscount />} />
|
||||
<Route path={Pages.blog.list} element={<BlogList />} />
|
||||
<Route path={Pages.blog.create} element={<CreateBlog />} />
|
||||
<Route path={Pages.blog.category} element={<BlogCategory />} />
|
||||
|
||||
Reference in New Issue
Block a user