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

change payment method

Browse Source
This commit is contained in:
hamid zarghami
2025-12-03 10:26:42 +03:30
parent 66a3eaef67
commit f62b7a8070
8 changed files with 237 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/langs/fa.json
+5
View File
@@ -763,6 +763,11 @@
"add_account": "افزودن حساب"
},
"payment": {
"Online": "آنلاین",
"Cash": "نقدی",
"CardOnDelivery": "کارت هنگام تحویل",
"Wallet": "کیف پول",
"zarinpal": "زرین‌پال",
"payments": "پرداخت ها",
"status_payment": "وضعیت پرداخت",
"user": "کاربر",
src/pages/paymentMethods/Create.tsx
+76 -17
View File
@@ -4,36 +4,53 @@ import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import Button from '@/components/Button'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Switch from '@/components/Switch'
import type { CreateRestaurantPaymentMethodType, PaymentMethod } from './types/Types'
import { useCreateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
import Textarea from '@/components/Textarea'
import type { CreateRestaurantPaymentMethodType } from './types/Types'
import { useCreateRestaurantPaymentMethod } from './hooks/usePaymentMethodData'
import { PaymentMethodEnum, PaymentGatewayEnum } from './enum/Enum'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'
const CreatePaymentMethod: FC = () => {
const { t } = useTranslation('global')
const navigate = useNavigate()
const { mutate: createPaymentMethod, isPending } = useCreateRestaurantPaymentMethod()
const { data: paymentMethodsData } = useGetPaymentMethods()
const paymentMethods = paymentMethodsData?.data?.map((method: PaymentMethod) => ({
label: method.name,
value: method.id
})) || []
const paymentMethods = [
{ label: t(`payment.${PaymentMethodEnum.Online}`), value: PaymentMethodEnum.Online },
{ label: t(`payment.${PaymentMethodEnum.Cash}`), value: PaymentMethodEnum.Cash },
{ label: t(`payment.${PaymentMethodEnum.CardOnDelivery}`), value: PaymentMethodEnum.CardOnDelivery },
{ label: t(`payment.${PaymentMethodEnum.Wallet}`), value: PaymentMethodEnum.Wallet },
]
const paymentGateways = [
{ label: t(`payment.${PaymentGatewayEnum.ZarinPal}`), value: PaymentGatewayEnum.ZarinPal },
]
const formik = useFormik<CreateRestaurantPaymentMethodType>({
initialValues: {
paymentMethodId: '',
title: '',
method: '',
gateway: '',
description: '',
enabled: true,
order: 0,
merchantId: '',
isActive: true,
},
validationSchema: Yup.object().shape({
paymentMethodId: Yup.string().required('روش پرداخت الزامی است'),
title: Yup.string().required('عنوان الزامی است'),
method: Yup.string().required('روش پرداخت الزامی است'),
gateway: Yup.string().required('درگاه پرداخت الزامی است'),
description: Yup.string().required('توضیحات الزامی است'),
enabled: Yup.boolean(),
order: Yup.number().required('ترتیب الزامی است').min(0, 'ترتیب باید مثبت باشد'),
merchantId: Yup.string().required('شناسه مرچنت الزامی است'),
isActive: Yup.boolean(),
}),
onSubmit: (values) => {
createPaymentMethod(values, {
@@ -73,12 +90,32 @@ const CreatePaymentMethod: FC = () => {
<div className='mb-4'>
<Select
label='روش پرداخت'
name='paymentMethodId'
value={formik.values.paymentMethodId}
name='method'
value={formik.values.method}
onChange={formik.handleChange}
items={paymentMethods}
placeholder='روش پرداخت را انتخاب کنید'
error_text={formik.touched.paymentMethodId && formik.errors.paymentMethodId ? formik.errors.paymentMethodId : ''}
error_text={formik.touched.method && formik.errors.method ? formik.errors.method : ''}
/>
</div>
<div className='mt-6'>
<Input
label='عنوان'
name='title'
value={formik.values.title}
onChange={formik.handleChange}
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
/>
</div>
<div className='mt-6'>
<Select
label='درگاه پرداخت'
name='gateway'
value={formik.values.gateway}
onChange={formik.handleChange}
items={paymentGateways}
placeholder='درگاه پرداخت را انتخاب کنید'
error_text={formik.touched.gateway && formik.errors.gateway ? formik.errors.gateway : ''}
/>
</div>
<div className='mt-6'>
@@ -90,10 +127,32 @@ const CreatePaymentMethod: FC = () => {
error_text={formik.touched.merchantId && formik.errors.merchantId ? formik.errors.merchantId : ''}
/>
</div>
<div className='mt-6'>
<Textarea
label='توضیحات'
name='description'
value={formik.values.description}
onChange={formik.handleChange}
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
/>
</div>
<div className='mt-6'>
<Input
label='ترتیب'
name='order'
type='number'
value={formik.values.order ?? ''}
onChange={(e) => {
const value = e.target.value === '' ? 0 : Number(e.target.value)
formik.setFieldValue('order', value)
}}
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
/>
</div>
<div className='mt-6'>
<Switch
active={formik.values.isActive}
onChange={(value) => formik.setFieldValue('isActive', value)}
active={formik.values.enabled}
onChange={(value) => formik.setFieldValue('enabled', value)}
label='فعال'
/>
</div>
@@ -103,4 +162,4 @@ const CreatePaymentMethod: FC = () => {
)
}
export default CreatePaymentMethod
export default CreatePaymentMethod
src/pages/paymentMethods/Update.tsx
+103 -37
View File
@@ -1,44 +1,75 @@
import { type FC, useEffect } from 'react'
import { type FC, useMemo } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { useNavigate, useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import Button from '@/components/Button'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Switch from '@/components/Switch'
import PageLoading from '@/components/PageLoading'
import type { CreateRestaurantPaymentMethodType, PaymentMethod } from './types/Types'
import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
import Textarea from '@/components/Textarea'
import type { CreateRestaurantPaymentMethodType } from './types/Types'
import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod } from './hooks/usePaymentMethodData'
import { PaymentMethodEnum, PaymentGatewayEnum } from './enum/Enum'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'
const UpdatePaymentMethod: FC = () => {
const { t } = useTranslation('global')
const navigate = useNavigate()
const { id } = useParams<{ id: string }>()
const { data: restaurantPaymentMethodData, isLoading } = useGetRestaurantPaymentMethod(id || '')
const { data: paymentMethodsData } = useGetPaymentMethods()
const { mutate: updateRestaurantPaymentMethod, isPending } = useUpdateRestaurantPaymentMethod()
const { data: paymentMethodData, isLoading } = useGetRestaurantPaymentMethod(id || '')
const paymentMethods = paymentMethodsData?.data?.map((method: PaymentMethod) => ({
label: method.name,
value: method.id
})) || []
const paymentMethods = [
{ label: t(`payment.${PaymentMethodEnum.Online}`), value: PaymentMethodEnum.Online },
{ label: t(`payment.${PaymentMethodEnum.Cash}`), value: PaymentMethodEnum.Cash },
{ label: t(`payment.${PaymentMethodEnum.CardOnDelivery}`), value: PaymentMethodEnum.CardOnDelivery },
{ label: t(`payment.${PaymentMethodEnum.Wallet}`), value: PaymentMethodEnum.Wallet },
]
const restaurantPaymentMethod = restaurantPaymentMethodData?.data
const paymentGateways = [
{ label: t(`payment.${PaymentGatewayEnum.ZarinPal}`), value: PaymentGatewayEnum.ZarinPal },
]
const initialValues = useMemo<CreateRestaurantPaymentMethodType>(() => {
if (paymentMethodData?.data) {
const data = paymentMethodData.data as CreateRestaurantPaymentMethodType & { id: string }
return {
title: data.title || '',
method: data.method || '',
gateway: data.gateway || '',
description: data.description || '',
enabled: data.enabled ?? true,
order: data.order || 0,
merchantId: data.merchantId || '',
}
}
return {
title: '',
method: '',
gateway: '',
description: '',
enabled: true,
order: 0,
merchantId: '',
}
}, [paymentMethodData])
const formik = useFormik<CreateRestaurantPaymentMethodType>({
initialValues: {
paymentMethodId: '',
merchantId: '',
isActive: true,
},
initialValues,
enableReinitialize: true,
validationSchema: Yup.object().shape({
paymentMethodId: Yup.string().required('روش پرداخت الزامی است'),
title: Yup.string().required('عنوان الزامی است'),
method: Yup.string().required('روش پرداخت الزامی است'),
gateway: Yup.string().required('درگاه پرداخت الزامی است'),
description: Yup.string().required('توضیحات الزامی است'),
enabled: Yup.boolean(),
order: Yup.number().required('ترتیب الزامی است').min(0, 'ترتیب باید مثبت باشد'),
merchantId: Yup.string().required('شناسه مرچنت الزامی است'),
isActive: Yup.boolean(),
}),
onSubmit: (values) => {
if (!id) return
@@ -57,22 +88,15 @@ const UpdatePaymentMethod: FC = () => {
},
})
useEffect(() => {
if (restaurantPaymentMethod) {
formik.setValues({
paymentMethodId: restaurantPaymentMethod.paymentMethod?.id || '',
merchantId: restaurantPaymentMethod.merchantId || '',
isActive: restaurantPaymentMethod.isActive ?? true,
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [restaurantPaymentMethod])
if (isLoading) {
return <PageLoading />
return (
<div className='mt-5'>
<div className='text-lg font-light'>در حال بارگذاری...</div>
</div>
)
}
if (!restaurantPaymentMethod) {
if (!paymentMethodData?.data) {
return (
<div className='w-full mt-4 flex justify-center items-center'>
<div>روش پرداخت یافت نشد</div>
@@ -105,12 +129,32 @@ const UpdatePaymentMethod: FC = () => {
<div className='mb-4'>
<Select
label='روش پرداخت'
name='paymentMethodId'
value={formik.values.paymentMethodId}
name='method'
value={formik.values.method}
onChange={formik.handleChange}
items={paymentMethods}
placeholder='روش پرداخت را انتخاب کنید'
error_text={formik.touched.paymentMethodId && formik.errors.paymentMethodId ? formik.errors.paymentMethodId : ''}
error_text={formik.touched.method && formik.errors.method ? formik.errors.method : ''}
/>
</div>
<div className='mt-6'>
<Input
label='عنوان'
name='title'
value={formik.values.title}
onChange={formik.handleChange}
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
/>
</div>
<div className='mt-6'>
<Select
label='درگاه پرداخت'
name='gateway'
value={formik.values.gateway}
onChange={formik.handleChange}
items={paymentGateways}
placeholder='درگاه پرداخت را انتخاب کنید'
error_text={formik.touched.gateway && formik.errors.gateway ? formik.errors.gateway : ''}
/>
</div>
<div className='mt-6'>
@@ -122,10 +166,32 @@ const UpdatePaymentMethod: FC = () => {
error_text={formik.touched.merchantId && formik.errors.merchantId ? formik.errors.merchantId : ''}
/>
</div>
<div className='mt-6'>
<Textarea
label='توضیحات'
name='description'
value={formik.values.description}
onChange={formik.handleChange}
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
/>
</div>
<div className='mt-6'>
<Input
label='ترتیب'
name='order'
type='number'
value={formik.values.order ?? ''}
onChange={(e) => {
const value = e.target.value === '' ? 0 : Number(e.target.value)
formik.setFieldValue('order', value)
}}
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
/>
</div>
<div className='mt-6'>
<Switch
active={formik.values.isActive}
onChange={(value) => formik.setFieldValue('isActive', value)}
active={formik.values.enabled}
onChange={(value) => formik.setFieldValue('enabled', value)}
label='فعال'
/>
</div>
@@ -135,4 +201,4 @@ const UpdatePaymentMethod: FC = () => {
)
}
export default UpdatePaymentMethod
export default UpdatePaymentMethod
src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx
+24 -10
View File
@@ -14,38 +14,52 @@ interface GetPaymentMethodTableColumnsParams {
export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymentMethodTableColumnsParams = {}): ColumnType<RestaurantPaymentMethod>[] => {
return [
{
key: 'name',
title: 'نام',
key: 'title',
title: 'عنوان',
render: (item: RestaurantPaymentMethod) => {
return item.paymentMethod?.name || '-'
return item.title || '-'
}
},
{
key: 'keyName',
title: 'کلید',
key: 'method',
title: 'روش',
render: (item: RestaurantPaymentMethod) => {
return item.paymentMethod?.keyName || '-'
return item.method || '-'
}
},
{
key: 'gateway',
title: 'درگاه',
render: (item: RestaurantPaymentMethod) => {
return item.gateway || '-'
}
},
{
key: 'description',
title: 'توضیحات',
render: (item: RestaurantPaymentMethod) => {
return item.paymentMethod?.description || '-'
return item.description || '-'
}
},
{
key: 'isActive',
key: 'enabled',
title: 'وضعیت',
render: (item: RestaurantPaymentMethod) => {
return (
<Status
variant={item.isActive ? 'success' : 'error'}
label={item.isActive ? 'فعال' : 'غیرفعال'}
variant={item.enabled ? 'success' : 'error'}
label={item.enabled ? 'فعال' : 'غیرفعال'}
/>
)
}
},
{
key: 'order',
title: 'ترتیب',
render: (item: RestaurantPaymentMethod) => {
return item.order || '-'
}
},
{
key: 'merchantId',
title: 'شناسه مرچنت',
src/pages/paymentMethods/enum/Enum.ts
+10
View File
@@ -0,0 +1,10 @@
export const enum PaymentMethodEnum {
Online = "Online",
Cash = "Cash",
CardOnDelivery = "CardOnDelivery",
Wallet = "Wallet",
}
export const enum PaymentGatewayEnum {
ZarinPal = "zarinpal",
}
src/pages/paymentMethods/hooks/usePaymentMethodData.ts
-7
View File
@@ -5,13 +5,6 @@ import type {
GetRestaurantPaymentMethodsParams,
} from "../types/Types";
export const useGetPaymentMethods = () => {
return useQuery({
queryKey: ["payment-methods"],
queryFn: api.getPaymentMethods,
});
};
export const useGetRestaurantPaymentMethods = (
params?: GetRestaurantPaymentMethodsParams
) => {
src/pages/paymentMethods/service/PaymentMethodService.ts
+5 -21
View File
@@ -2,42 +2,29 @@ import axios from "@/config/axios";
import type {
CreateRestaurantPaymentMethodType,
GetRestaurantPaymentMethodsParams,
PaymentMethodsResponse,
RestaurantPaymentMethodResponse,
RestaurantPaymentMethodsResponse,
} from "../types/Types";
export const getPaymentMethods = async (): Promise<PaymentMethodsResponse> => {
const { data } = await axios.get<PaymentMethodsResponse>(
"/admin/payments/methods"
);
return data;
};
export const getRestaurantPaymentMethods = async (
params?: GetRestaurantPaymentMethodsParams
): Promise<RestaurantPaymentMethodsResponse> => {
const { data } = await axios.get<RestaurantPaymentMethodsResponse>(
"/admin/payments/methods/restaurant",
"/admin/payments/methods",
{ params }
);
return data;
};
export const deleteRestaurantPaymentMethod = async (id: string) => {
const { data } = await axios.delete(
`/admin/payments/methods/restaurant/${id}`
);
const { data } = await axios.delete(`/admin/payments/methods/${id}`);
return data;
};
export const createRestaurantPaymentMethod = async (
params: CreateRestaurantPaymentMethodType
) => {
const { data } = await axios.post(
"/admin/payments/methods/restaurant",
params
);
const { data } = await axios.post("/admin/payments/methods", params);
return data;
};
@@ -45,7 +32,7 @@ export const getRestaurantPaymentMethod = async (
id: string
): Promise<RestaurantPaymentMethodResponse> => {
const { data } = await axios.get<RestaurantPaymentMethodResponse>(
`/admin/payments/methods/restaurant/${id}`
`/admin/payments/methods/${id}`
);
return data;
};
@@ -54,9 +41,6 @@ export const updateRestaurantPaymentMethod = async (
id: string,
params: CreateRestaurantPaymentMethodType
) => {
const { data } = await axios.patch(
`/admin/payments/methods/restaurant/${id}`,
params
);
const { data } = await axios.patch(`/admin/payments/methods/${id}`, params);
return data;
};
src/pages/paymentMethods/types/Types.ts
+14 -5
View File
@@ -48,6 +48,7 @@ export type Restaurant = {
tagNames: unknown | null;
images: unknown | null;
vat: number;
domain: string;
};
export type RestaurantPaymentMethodsResponse = IResponse<
@@ -60,9 +61,13 @@ export type RestaurantPaymentMethod = {
updatedAt: string;
deletedAt: string | null;
restaurant: Restaurant;
paymentMethod: PaymentMethod;
merchantId: string | null;
isActive: boolean;
title: string;
method: string;
gateway: string;
description: string;
enabled: boolean;
order: number;
merchantId: string;
};
export type RestaurantPaymentMethodResponse = IResponse<
@@ -70,9 +75,13 @@ export type RestaurantPaymentMethodResponse = IResponse<
>;
export type CreateRestaurantPaymentMethodType = {
paymentMethodId: string;
title: string;
method: string;
gateway: string;
description: string;
enabled: boolean;
order: number;
merchantId: string;
isActive: boolean;
};
export type GetRestaurantPaymentMethodsParams = {