invoice + plan
This commit is contained in:
hamid zarghami
@@ -107,6 +107,7 @@ const ListService: FC = () => {
|
||||
<Td text={t('service.company_developed')} />
|
||||
<Td text={t('service.category')} />
|
||||
<Td text={t('service.publish_date')} />
|
||||
<Td text={t('service.plans')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''} />
|
||||
@@ -126,6 +127,26 @@ const ListService: FC = () => {
|
||||
<Td text={item.author} />
|
||||
<Td text={item.category?.title} />
|
||||
<Td text={moment(item.createDate).format('jYYYY-jMM-jDD')} />
|
||||
<Td text=''>
|
||||
{
|
||||
item.subscriptionCount === 0 ?
|
||||
<Link to={Pages.services.plan + item.id}>
|
||||
<Button
|
||||
className='h-8 bg-transparent border border-black text-black text-xs'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='black' />
|
||||
<div>{t('service.add_plan')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
:
|
||||
<Link to={Pages.services.plan + item.id} className='flex gap-1 text-sm text-[#0047FF]'>
|
||||
<div>{item.subscriptionCount}</div>
|
||||
<div>{t('service.active_plan')}</div>
|
||||
</Link>
|
||||
}
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<ToggleStatusService
|
||||
id={item.id}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { FC, Fragment } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import CreatePlan from './components/CreatePlan'
|
||||
import { useGetPlans } from './hooks/useServiceData'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Td from '../../components/Td'
|
||||
import { PlanItemType } from './types/ServiceTypes'
|
||||
import ToggleStatusPlan from './components/ToggleStatusPlan'
|
||||
import EditPlan from './components/EditPlan'
|
||||
|
||||
const Plans: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { t } = useTranslation('global')
|
||||
const getPlans = useGetPlans(id)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
{
|
||||
getPlans.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('plan.plans_list') + ' ' + getPlans.data?.data?.service?.name}
|
||||
</div>
|
||||
<CreatePlan />
|
||||
</div>
|
||||
|
||||
<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('title')} />
|
||||
<Td text={t('plan.time')} />
|
||||
<Td text={t('plan.price')} />
|
||||
<Td text={t('status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getPlans.data?.data?.subscriptions.map((item: PlanItemType) => (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.name} />
|
||||
<Td text={item.duration + ''} />
|
||||
<Td text={item.price + ''} />
|
||||
<Td text={''}>
|
||||
<ToggleStatusPlan defaultActive={item.isActive} id={item.id} />
|
||||
</Td>
|
||||
<Td text=''>
|
||||
<EditPlan
|
||||
id={item.id}
|
||||
/>
|
||||
</Td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Plans
|
||||
@@ -0,0 +1,194 @@
|
||||
import { FC, useState } from 'react'
|
||||
import Button from '../../../components/Button'
|
||||
import { Add, AddCircle, TickCircle, Trash } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DefaulModal from '../../../components/DefaulModal'
|
||||
import Input from '../../../components/Input'
|
||||
import { useFormik } from 'formik'
|
||||
import { CreateItemPlanType, CreatePlanType } from '../types/ServiceTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { clx } from '../../../helpers/utils'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useCreatePlan, useGetPlans } from '../hooks/useServiceData'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
const CreatePlan: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { t } = useTranslation('global')
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const [items, setItems] = useState<CreateItemPlanType[]>([])
|
||||
const getPlans = useGetPlans(id)
|
||||
const createPlan = useCreatePlan()
|
||||
|
||||
const formik = useFormik<CreateItemPlanType>({
|
||||
initialValues: {
|
||||
name: '',
|
||||
duration: '',
|
||||
isActive: true,
|
||||
price: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
name: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
duration: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
price: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
const vals = {
|
||||
...values,
|
||||
duration: +values.duration,
|
||||
price: +values.price,
|
||||
}
|
||||
setItems([...items, vals])
|
||||
formik.resetForm()
|
||||
}
|
||||
})
|
||||
|
||||
const handleDeleteItem = (index: number) => {
|
||||
const newItems = items.filter((_, i) => i !== index)
|
||||
setItems(newItems)
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (items.length === 0) {
|
||||
toast.error(t('plan.error_submit'))
|
||||
} else {
|
||||
const params: CreatePlanType = {
|
||||
serviceId: id ? id : '',
|
||||
subs: items
|
||||
}
|
||||
|
||||
createPlan.mutate(params, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
setShowModal(false)
|
||||
toast.success(t('plan.success_submit'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('plan.new_plan')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<DefaulModal
|
||||
open={showModal}
|
||||
close={() => setShowModal(false)}
|
||||
title_header={t('plan.add_plan') + ' ' + getPlans.data?.data?.service?.name}
|
||||
isHeader
|
||||
>
|
||||
<div className='mt-6'>
|
||||
{
|
||||
items.map((item, index: number) => {
|
||||
return (
|
||||
<div className='flex justify-between items-center gap-8 mt-4'>
|
||||
<Input
|
||||
className='bg-description bg-opacity-15 border-none'
|
||||
value={item.name}
|
||||
readOnly
|
||||
/>
|
||||
<Input
|
||||
className='bg-description bg-opacity-15 border-none'
|
||||
value={item.duration}
|
||||
readOnly
|
||||
/>
|
||||
<Input
|
||||
className='bg-description bg-opacity-15 border-none'
|
||||
value={item.price}
|
||||
readOnly
|
||||
/>
|
||||
|
||||
<Trash
|
||||
size={24}
|
||||
color='#D52903'
|
||||
className='min-w-6'
|
||||
onClick={() => handleDeleteItem(index)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<div className={clx(
|
||||
'flex justify-between items-start gap-8',
|
||||
items.length > 0 && 'mt-8',
|
||||
)}>
|
||||
<Input
|
||||
label={t('title')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='name'
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
<Input
|
||||
label={t('plan.time')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='duration'
|
||||
value={formik.values.duration}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.duration && formik.errors.duration ? formik.errors.duration : ''}
|
||||
/>
|
||||
<Input
|
||||
label={t('plan.price')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='price'
|
||||
value={formik.values.price}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
||||
/>
|
||||
|
||||
<div onClick={() => formik.handleSubmit()} className='size-10 min-w-10 mt-7 rounded-xl border border-black flex justify-center items-center'>
|
||||
<AddCircle size={20} color='black' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-12 border-t border-border pt-5 flex justify-end'>
|
||||
<div className='flex gap-5 items-center'>
|
||||
<Button
|
||||
className='w-[150px] bg-white bg-opacity-15 text-description'
|
||||
label={t('plan.cancel')}
|
||||
onClick={() => setShowModal(false)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>
|
||||
{t('plan.submit_plan')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DefaulModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreatePlan
|
||||
@@ -0,0 +1,152 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import Button from '../../../components/Button'
|
||||
import { Edit, TickCircle } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DefaulModal from '../../../components/DefaulModal'
|
||||
import Input from '../../../components/Input'
|
||||
import { useFormik } from 'formik'
|
||||
import { CreateItemPlanType, UpdatePlanType } from '../types/ServiceTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { clx } from '../../../helpers/utils'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useGetPlanDetail, useUpdatePlan } from '../hooks/useServiceData'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
id: string,
|
||||
}
|
||||
|
||||
const EditPlan: FC<Props> = (props: Props) => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { t } = useTranslation('global')
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const getPlanDetail = useGetPlanDetail(showModal ? props.id : undefined)
|
||||
const updatePlan = useUpdatePlan(props.id)
|
||||
|
||||
const formik = useFormik<CreateItemPlanType>({
|
||||
initialValues: {
|
||||
name: '',
|
||||
duration: '',
|
||||
isActive: true,
|
||||
price: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
name: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
duration: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
price: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
const params: UpdatePlanType = {
|
||||
serviceId: id,
|
||||
duration: +values.duration,
|
||||
price: +values.price,
|
||||
name: values.name,
|
||||
}
|
||||
updatePlan.mutate(params, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
setShowModal(false)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (getPlanDetail.data) {
|
||||
formik.setValues({
|
||||
name: getPlanDetail.data.data?.subscription.name,
|
||||
duration: getPlanDetail.data.data?.subscription.duration + '',
|
||||
price: getPlanDetail.data.data?.subscription.price + '',
|
||||
isActive: getPlanDetail.data.data?.subscription.isActive
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getPlanDetail.data])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Edit
|
||||
onClick={() => setShowModal(true)}
|
||||
size={20}
|
||||
color='#0047FF'
|
||||
/>
|
||||
|
||||
<DefaulModal
|
||||
open={showModal}
|
||||
close={() => setShowModal(false)}
|
||||
title_header={t('plan.edit_plan')}
|
||||
isHeader
|
||||
>
|
||||
<div className='mt-6'>
|
||||
|
||||
<div className={clx(
|
||||
'flex justify-between items-start gap-8',
|
||||
)}>
|
||||
<Input
|
||||
label={t('title')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='name'
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
<Input
|
||||
label={t('plan.time')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='duration'
|
||||
value={formik.values.duration}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.duration && formik.errors.duration ? formik.errors.duration : ''}
|
||||
/>
|
||||
<Input
|
||||
label={t('plan.price')}
|
||||
className='bg-white bg-opacity-30'
|
||||
name='price'
|
||||
value={formik.values.price}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-12 border-t border-border pt-5 flex justify-end'>
|
||||
<div className='flex gap-5 items-center'>
|
||||
<Button
|
||||
className='w-[150px] bg-white bg-opacity-15 text-description'
|
||||
label={t('plan.cancel')}
|
||||
onClick={() => setShowModal(false)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={updatePlan.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='white'
|
||||
/>
|
||||
<div>
|
||||
{t('save')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DefaulModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditPlan
|
||||
@@ -0,0 +1,28 @@
|
||||
import { FC, useState } from 'react'
|
||||
import SwitchComponent from '../../../components/Switch'
|
||||
import { useToggleStatusPlan } from '../hooks/useServiceData'
|
||||
|
||||
type Props = {
|
||||
defaultActive: boolean,
|
||||
id: string
|
||||
}
|
||||
|
||||
const ToggleStatusPlan: FC<Props> = (props: Props) => {
|
||||
|
||||
const [isActive, setIsActive] = useState<boolean>(props.defaultActive)
|
||||
const toggleStatus = useToggleStatusPlan()
|
||||
|
||||
const handleChange = (value: boolean) => {
|
||||
setIsActive(value)
|
||||
toggleStatus.mutate(props.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<SwitchComponent
|
||||
active={isActive}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToggleStatusPlan
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import * as api from "../service/ServiceService";
|
||||
import {
|
||||
CreatePlanType,
|
||||
CreateServiceCategoryType,
|
||||
CreateServiceType,
|
||||
ToggleStatusCategoryType,
|
||||
UpdatePlanType,
|
||||
} from "../types/ServiceTypes";
|
||||
|
||||
export const useGetAllServices = (
|
||||
@@ -80,3 +82,37 @@ export const useToggleStatusService = () => {
|
||||
mutationFn: (id: string) => api.toggleStatusService(id),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreatePlan = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreatePlanType) => api.createPlan(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetPlans = (serviceId?: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["plans", serviceId],
|
||||
queryFn: () => api.getPlans(serviceId),
|
||||
enabled: !!serviceId,
|
||||
});
|
||||
};
|
||||
|
||||
export const useToggleStatusPlan = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: string) => api.planToggleStatus(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetPlanDetail = (planId?: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["plans", planId],
|
||||
queryFn: () => api.getPlanDetail(planId),
|
||||
enabled: !!planId,
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdatePlan = (id: string) => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: UpdatePlanType) => api.updatePlan(id, variables),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import axios from "../../../config/axios";
|
||||
import {
|
||||
CreatePlanType,
|
||||
CreateServiceCategoryType,
|
||||
CreateServiceType,
|
||||
ToggleStatusCategoryType,
|
||||
UpdatePlanType,
|
||||
} from "../types/ServiceTypes";
|
||||
|
||||
export const getAllServicess = async (
|
||||
@@ -82,3 +84,28 @@ export const toggleStatusService = async (id: string) => {
|
||||
const { data } = await axios.post(`/danak-services/toggle-status/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createPlan = async (params: CreatePlanType) => {
|
||||
const { data } = await axios.post(`/subscriptions`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getPlans = async (serviceId?: string) => {
|
||||
const { data } = await axios.get(`/subscriptions/service/${serviceId}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const planToggleStatus = async (id: string) => {
|
||||
const { data } = await axios.post(`/subscriptions/toggle-status/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getPlanDetail = async (id?: string) => {
|
||||
const { data } = await axios.get(`/subscriptions/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updatePlan = async (id: string, params: UpdatePlanType) => {
|
||||
const { data } = await axios.patch(`/subscriptions/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -50,4 +50,34 @@ export type ServiceItemType = {
|
||||
createDate: string;
|
||||
isActive: boolean;
|
||||
icon: string;
|
||||
subscriptionCount: number;
|
||||
};
|
||||
|
||||
export type CreateItemPlanType = {
|
||||
name: string;
|
||||
duration: string | number;
|
||||
price: string | number;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export type CreatePlanType = {
|
||||
subs: CreateItemPlanType[];
|
||||
serviceId: string;
|
||||
};
|
||||
|
||||
export type PlanItemType = {
|
||||
id: string;
|
||||
name: string;
|
||||
duration: string | number;
|
||||
price: string | number;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export type UpdatePlanType = {
|
||||
name: string;
|
||||
duration: string | number;
|
||||
price: string | number;
|
||||
isActive?: boolean;
|
||||
serviceId?: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user