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

discount

Browse Source
This commit is contained in:
hamid zarghami
2025-02-17 11:57:03 +03:30
parent df8c000aa6
commit 71a11ff2e7
11 changed files with 348 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Radio.tsx
+2 -2
View File
@@ -2,8 +2,8 @@ import { FC } from 'react'
type Props = {
isActive: boolean,
value: 'year' | '3month' | 'month',
onChange: (value: 'year' | '3month' | 'month') => void
value: string,
onChange: (value: string) => void
}
const Radio: FC<Props> = (props: Props) => {
src/components/RadioGroup.tsx
+2 -2
View File
@@ -5,10 +5,10 @@ import Radio from './Radio'
type Props = {
items: {
label: string
value: 'year' | '3month' | 'month'
value: string
}[]
selected: string
onChange: (value: 'year' | '3month' | 'month') => void
onChange: (value: string) => void
}
const RadioGroup: FC<Props> = (props: Props) => {
src/langs/fa.json
+6 -1
View File
@@ -296,7 +296,12 @@
"discount_code": "کد تخفیف",
"direct_discount": "تخفیف مستقیم",
"fixed_amount": "مبلغ ثابت",
"percent": "درصد"
"percent": "درصد",
"errors_plan": "سرویس و پلن را انتخاب کنید",
"DIRECT": "مستقیم",
"FIXED": "ثابت",
"plan": "پلن",
"user": "کاربر"
},
"blog": {
"blog": "بلاگ",
src/pages/discounts/CreateDiscount.tsx
+147 -42
View File
@@ -1,13 +1,80 @@
import { FC } from 'react'
import { FC, 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, TickSquare, Refresh } from 'iconsax-react'
import { TickCircle } from 'iconsax-react'
import DatePickerComponent from '../../components/DatePicker'
import RadioGroup from '../../components/RadioGroup'
import { useFormik } from 'formik'
import { CreateDiscountType, DiscountCalculationType, DiscountType } from './types/DiscountTypes'
import * as Yup from 'yup'
import { useGetAllServices, useGetPlans } from '../service/hooks/useServiceData'
import { PlanItemType, ServiceItemType } from '../service/types/ServiceTypes'
import CheckBoxComponent from '../../components/CheckBoxComponent'
import { toast } from 'react-toastify'
import { useCreateDiscount } from './hooks/useDiscountData'
import { useGetCustomers } from '../customer/hooks/useCustomerData'
import { CustomerItemType } from '../customer/types/CustomerTypes'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { ErrorType } from '../../helpers/types'
const CreateDiscount: FC = () => {
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 createDiscount = useCreateDiscount()
const formik = useFormik<CreateDiscountType>({
initialValues: {
amount: '',
calculationType: DiscountCalculationType.FIXED,
endDate: '',
startDate: '',
title: '',
type: DiscountType.DIRECT,
subscriptionPlanIds: [],
userIds: []
},
validationSchema: Yup.object({
amount: Yup.string().required(t('errors.required')),
calculationType: Yup.string().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) {
if (serviceId && planId) {
values.subscriptionPlanIds = [planId]
values.userIds = [customerId]
const params: CreateDiscountType = {
...values,
startDate: new Date(values.startDate).toISOString(),
endDate: new Date(values.endDate).toISOString(),
amount: +values.amount
}
createDiscount.mutate(params, {
onSuccess: () => {
toast.success(t('success'))
navigate(Pages.discount.list)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
} else {
toast.error(t('discount.errors_plan'))
}
},
})
return (
<div className='mt-4'>
<div className='flex justify-between items-center'>
@@ -16,6 +83,7 @@ const CreateDiscount: FC = () => {
</div>
<Button
className='w-[172px]'
onClick={() => formik.handleSubmit()}
>
<div className='flex gap-2 items-center'>
<TickCircle size={20} color='white' />
@@ -34,15 +102,15 @@ const CreateDiscount: FC = () => {
items={[
{
label: t('discount.direct_discount'),
value: '3month'
value: DiscountType.DIRECT
},
{
label: t('discount.discount_code'),
value: 'year'
value: DiscountType.CODE
}
]}
onChange={() => ''}
selected={''}
onChange={(value) => formik.setFieldValue('type', value)}
selected={formik.values.type}
/>
</div>
</div>
@@ -50,8 +118,10 @@ const CreateDiscount: FC = () => {
<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'>
{/* <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'
@@ -60,7 +130,7 @@ const CreateDiscount: FC = () => {
{t('discount.auto_generate_code')}
</p>
</button>
</div>
</div> */}
</div>
<div className='mt-6 rowTwoInput'>
<div className='w-full'>
@@ -70,35 +140,37 @@ const CreateDiscount: FC = () => {
items={[
{
label: t('discount.fixed_amount'),
value: '3month'
value: DiscountCalculationType.FIXED
},
{
label: t('discount.percent'),
value: 'year'
value: DiscountCalculationType.PERCENTAGE
}
]}
onChange={() => ''}
selected={''}
onChange={(value) => formik.setFieldValue('calculationType', value)}
selected={formik.values.calculationType}
/>
</div>
</div>
<Input
label={t('discount.price_or_percent')}
placeholder={t('discount.enter_price_or_percent')}
{...formik.getFieldProps('amount')}
error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
/>
</div>
<div className='mt-6 rowTwoInput'>
<DatePickerComponent
label={t('discount.startDate')}
onChange={() => { }}
onChange={(value) => formik.setFieldValue('startDate', value)}
placeholder=''
defaulValue='1400-01-01'
error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
/>
<DatePickerComponent
label={t('discount.endDate')}
onChange={() => { }}
onChange={(value) => formik.setFieldValue('endDate', value)}
placeholder=''
defaulValue='1400-01-01'
error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
/>
</div>
</div>
@@ -117,37 +189,70 @@ const CreateDiscount: FC = () => {
/>
</div>
</div>
<p className='mt-6 text-sm'>{t('discount.availabe_service')}</p>
<div className='p-2 border border-[##D0D0D0] rounded-lg mt-2'>
<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')}
/>
<div className='flex items-start gap-2 py-2'>
<div>
<TickSquare size={20} color='black' variant='Bold' />
</div>
<div className='text-xs leading-5'>
لورم ایپسوم
</div>
</div>
<div className='flex items-start gap-2 py-2'>
<div>
<TickSquare size={20} color='black' variant='Bold' />
</div>
<div className='text-xs leading-5'>
لورم ایپسوم
</div>
</div>
<div className='flex items-start gap-2 py-2'>
<div>
<TickSquare size={20} color='black' variant='Bold' />
</div>
<div className='text-xs leading-5'>
لورم ایپسوم
</div>
</div>
{
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 === item.id}
onChange={(e) => setServiceId(e.target.checked ? item.id : '')}
/>
</div>
<div className='text-xs leading-5'>
{item.name}
</div>
</div>
))
}
</div>
{
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>
src/pages/discounts/DiscountsList.tsx
+59 -62
View File
@@ -1,14 +1,23 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import { Add } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import SwitchComponent from '../../components/Switch'
import Input from '../../components/Input'
import { useGetDiscounts } from './hooks/useDiscountData'
import { DiscountItemType } from './types/DiscountTypes'
import moment from 'moment-jalaali'
import ToggleStatusDiscount from './components/ToggleStatusDiscount'
import PageLoading from '../../components/PageLoading'
const DiscountList: FC = () => {
const { t } = useTranslation('global')
const [search, setSearch] = useState<string>('')
const getDiscounts = useGetDiscounts(search)
return (
<div className='mt-4 min-h-[500px]'>
<div className='flex justify-between items-center'>
@@ -41,6 +50,7 @@ const DiscountList: FC = () => {
variant='search'
placeholder={t('ads.search')}
className='bg-white w-full'
onChangeSearchFinal={(value) => setSearch(value)}
/>
</div>
@@ -50,65 +60,52 @@ const DiscountList: FC = () => {
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
<Td text={t('discount.number')} />
<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.service')} />
<Td text={t('discount.status')} />
<Td text={''} />
</tr>
</thead>
<tbody>
<tr className='tr'>
<Td text={t('discount.number')} />
<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.service')} />
<Td text={t('')}>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</Td>
<Td text={''}>
<Link to={Pages.ticket.detail + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
</tr>
<tr className='tr'>
<Td text={t('discount.number')} />
<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.service')} />
<Td text={t('')}>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</Td>
<Td text={''}>
<Link to={Pages.discount + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
</tr>
</tbody>
</table>
</div>
{
getDiscounts.isPending ?
<PageLoading />
:
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
<Td text={t('discount.number')} />
<Td text={t('discount.user')} />
<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')} />
</tr>
</thead>
<tbody>
{
getDiscounts.data?.data?.discounts?.map((item: DiscountItemType, index: number) => {
return (
<tr key={item.id} className='tr'>
<Td text={String(index + 1)} />
<Td text={item.users[0].firstName + ' ' + item.users[0].lastName} />
<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={t('')}>
<ToggleStatusDiscount
defaultActive={item.isActive}
id={item.id}
/>
</Td>
</tr>
)
})
}
</tbody>
</table>
</div>
}
</div>
)
}
src/pages/discounts/components/ToggleStatusDiscount.tsx
+28
View File
@@ -0,0 +1,28 @@
import { FC, useState } from 'react'
import SwitchComponent from '../../../components/Switch'
import { useToggleStatusDiscount } from '../hooks/useDiscountData'
type Props = {
defaultActive: boolean,
id: string
}
const ToggleStatusDiscount: FC<Props> = (props: Props) => {
const [isActive, setIsActive] = useState<boolean>(props.defaultActive)
const toggleStatus = useToggleStatusDiscount()
const handleChange = (value: boolean) => {
setIsActive(value)
toggleStatus.mutate(props.id)
}
return (
<SwitchComponent
active={isActive}
onChange={handleChange}
/>
)
}
export default ToggleStatusDiscount
src/pages/discounts/hooks/useDiscountData.ts
+23
View File
@@ -0,0 +1,23 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import * as api from "../service/DiscountService";
import { CreateDiscountType } from "../types/DiscountTypes";
export const useCreateDiscount = () => {
return useMutation({
mutationFn: (variables: CreateDiscountType) =>
api.createDiscount(variables),
});
};
export const useGetDiscounts = (search: string) => {
return useQuery({
queryKey: ["discounts", search],
queryFn: () => api.getDiscounts(search),
});
};
export const useToggleStatusDiscount = () => {
return useMutation({
mutationFn: (variables: string) => api.toggleStatusDiscount(variables),
});
};
src/pages/discounts/service/DiscountService.ts
+17
View File
@@ -0,0 +1,17 @@
import axios from "../../../config/axios";
import { CreateDiscountType } from "../types/DiscountTypes";
export const createDiscount = async (params: CreateDiscountType) => {
const { data } = await axios.post(`/discounts`, params);
return data;
};
export const getDiscounts = async (search: string) => {
const { data } = await axios.get(`/discounts?q=${search}`);
return data;
};
export const toggleStatusDiscount = async (id: string) => {
const { data } = await axios.patch(`/discounts/${id}/toggle`);
return data;
};
src/pages/discounts/types/DiscountTypes.ts
+37
View File
@@ -0,0 +1,37 @@
export type CreateDiscountType = {
title: string;
type: string;
calculationType: DiscountCalculationType;
amount: string | number;
startDate: string;
endDate: string;
subscriptionPlanIds: string[];
userIds: string[];
};
export enum DiscountType {
DIRECT = "DIRECT",
CODE = "CODE",
}
export enum DiscountCalculationType {
FIXED = "FIXED",
PERCENTAGE = "PERCENTAGE",
}
export type DiscountItemType = {
id: string;
title: string;
type: DiscountType;
calculationType: DiscountCalculationType;
amount: string | number;
startDate: string;
endDate: string;
subscriptionPlans: { id: string; createdAt: string; name: string }[];
userIds: string[];
code: string;
createdAt: string;
updatedAt: string;
isActive: boolean;
users: { firstName: string; lastName: string }[];
};
src/pages/service/hooks/useServiceData.ts
+19 -3
View File
@@ -13,12 +13,28 @@ export const useGetAllServices = (
page: number,
category: string,
status: string,
isDanakSuggest: boolean
isDanakSuggest?: boolean,
limit?: number
) => {
return useQuery({
queryKey: ["services", search, page, category, status, isDanakSuggest],
queryKey: [
"services",
search,
page,
category,
status,
isDanakSuggest,
limit,
],
queryFn: () =>
api.getAllServicess(search, page, category, status, isDanakSuggest),
api.getAllServicess(
search,
page,
category,
status,
isDanakSuggest,
limit
),
});
};
src/pages/service/service/ServiceService.ts
+8 -2
View File
@@ -12,7 +12,8 @@ export const getAllServicess = async (
page: number,
category: string,
status: string,
isDanakSuggest: boolean
isDanakSuggest?: boolean,
limit?: number
) => {
let query = `?page=${page}`;
if (status) {
@@ -25,9 +26,14 @@ export const getAllServicess = async (
query += `&q=${search}`;
}
if (isDanakSuggest) {
if (isDanakSuggest !== undefined) {
query += `&isDanakSuggest=${isDanakSuggest}`;
}
if (limit) {
query += `&limit=${limit}`;
}
const { data } = await axios.get(`/danak-services${query}`);
return data;
};