From 92e225118bf662fe00eee89c7c831b0cd20eaf43 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sun, 23 Nov 2025 11:38:28 +0330 Subject: [PATCH] service and hook compelete --- src/pages/paymentMethods/Update.tsx | 138 ++++++++++++++++++ .../components/PaymentMethodTableColumns.tsx | 28 ++-- .../hooks/usePaymentMethodData.ts | 30 +++- .../service/PaymentMethodService.ts | 21 +++ src/pages/paymentMethods/types/Types.ts | 16 +- src/router/Main.tsx | 2 + 6 files changed, 220 insertions(+), 15 deletions(-) create mode 100644 src/pages/paymentMethods/Update.tsx diff --git a/src/pages/paymentMethods/Update.tsx b/src/pages/paymentMethods/Update.tsx new file mode 100644 index 0000000..424d073 --- /dev/null +++ b/src/pages/paymentMethods/Update.tsx @@ -0,0 +1,138 @@ +import { type FC, useEffect } 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 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 { Pages } from '@/config/Pages' +import type { ErrorType } from '@/helpers/types' +import { extractErrorMessage } from '@/config/func' + +const UpdatePaymentMethod: FC = () => { + const navigate = useNavigate() + const { id } = useParams<{ id: string }>() + const { data: restaurantPaymentMethodData, isLoading } = useGetRestaurantPaymentMethod(id || '') + const { data: paymentMethodsData } = useGetPaymentMethods() + const { mutate: updateRestaurantPaymentMethod, isPending } = useUpdateRestaurantPaymentMethod() + + const paymentMethods = paymentMethodsData?.data?.map((method: PaymentMethod) => ({ + label: method.name, + value: method.id + })) || [] + + const restaurantPaymentMethod = restaurantPaymentMethodData?.data + + const formik = useFormik({ + initialValues: { + paymentMethodId: '', + merchantId: '', + isActive: true, + }, + validationSchema: Yup.object().shape({ + paymentMethodId: Yup.string().required('روش پرداخت الزامی است'), + merchantId: Yup.string().required('شناسه مرچنت الزامی است'), + isActive: Yup.boolean(), + }), + onSubmit: (values) => { + if (!id) return + updateRestaurantPaymentMethod( + { id, params: values }, + { + onSuccess: () => { + toast.success('روش پرداخت با موفقیت ویرایش شد') + navigate(Pages.payment_methods.list) + }, + onError: (error: ErrorType) => { + toast.error(extractErrorMessage(error)) + }, + } + ) + }, + }) + + useEffect(() => { + if (restaurantPaymentMethod) { + formik.setValues({ + paymentMethodId: restaurantPaymentMethod.paymentMethodId || '', + merchantId: restaurantPaymentMethod.merchantId || '', + isActive: restaurantPaymentMethod.isActive ?? true, + }) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [restaurantPaymentMethod]) + + if (isLoading) { + return + } + + if (!restaurantPaymentMethod) { + return ( +
+
روش پرداخت یافت نشد
+
+ ) + } + + return ( +
+
+
+ ویرایش روش پرداخت +
+
+ +
+
+ +
+
+
+ +
+
+ formik.setFieldValue('isActive', value)} + label='فعال' + /> +
+
+
+
+ ) +} + +export default UpdatePaymentMethod \ No newline at end of file diff --git a/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx b/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx index 7c10d1d..507de97 100644 --- a/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx +++ b/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx @@ -1,5 +1,5 @@ import type { ColumnType } from '@/components/types/TableTypes' -import type { PaymentMethod } from '../types/Types' +import type { RestaurantPaymentMethod } from '../types/Types' import TrashWithConfrim from '@/components/TrashWithConfrim' import { Eye } from 'iconsax-react' import { Link } from 'react-router-dom' @@ -11,24 +11,33 @@ interface GetPaymentMethodTableColumnsParams { isDeleting?: boolean } -export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymentMethodTableColumnsParams = {}): ColumnType[] => { +export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymentMethodTableColumnsParams = {}): ColumnType[] => { return [ { key: 'name', title: 'نام', + render: (item: RestaurantPaymentMethod) => { + return item.paymentMethod?.name || '-' + } }, { key: 'keyName', title: 'کلید', + render: (item: RestaurantPaymentMethod) => { + return item.paymentMethod?.keyName || '-' + } }, { key: 'description', title: 'توضیحات', + render: (item: RestaurantPaymentMethod) => { + return item.paymentMethod?.description || '-' + } }, { key: 'isActive', title: 'وضعیت', - render: (item: PaymentMethod) => { + render: (item: RestaurantPaymentMethod) => { return ( { - return new Date(item.createdAt).toLocaleDateString('fa-IR') - } + key: 'merchantId', + title: 'شناسه مرچنت', }, { key: 'actions', title: '', - render: (item: PaymentMethod) => { + render: (item: RestaurantPaymentMethod) => { return (
diff --git a/src/pages/paymentMethods/hooks/usePaymentMethodData.ts b/src/pages/paymentMethods/hooks/usePaymentMethodData.ts index 1f2f3a8..4bf787c 100644 --- a/src/pages/paymentMethods/hooks/usePaymentMethodData.ts +++ b/src/pages/paymentMethods/hooks/usePaymentMethodData.ts @@ -1,6 +1,9 @@ import * as api from "../service/PaymentMethodService"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import type { GetRestaurantPaymentMethodsParams } from "../types/Types"; +import type { + CreateRestaurantPaymentMethodType, + GetRestaurantPaymentMethodsParams, +} from "../types/Types"; export const useGetPaymentMethods = () => { return useQuery({ @@ -41,3 +44,28 @@ export const useDeleteRestaurantPaymentMethod = () => { }, }); }; + +export const useGetRestaurantPaymentMethod = (id: string) => { + return useQuery({ + queryKey: ["restaurant-payment-method", id], + queryFn: () => api.getRestaurantPaymentMethod(id), + }); +}; + +export const useUpdateRestaurantPaymentMethod = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: ({ + id, + params, + }: { + id: string; + params: CreateRestaurantPaymentMethodType; + }) => api.updateRestaurantPaymentMethod(id, params), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["restaurant-payment-methods"], + }); + }, + }); +}; diff --git a/src/pages/paymentMethods/service/PaymentMethodService.ts b/src/pages/paymentMethods/service/PaymentMethodService.ts index b6e9b32..a49b9ac 100644 --- a/src/pages/paymentMethods/service/PaymentMethodService.ts +++ b/src/pages/paymentMethods/service/PaymentMethodService.ts @@ -3,6 +3,7 @@ import type { CreateRestaurantPaymentMethodType, GetRestaurantPaymentMethodsParams, PaymentMethodsResponse, + RestaurantPaymentMethodResponse, RestaurantPaymentMethodsResponse, } from "../types/Types"; @@ -39,3 +40,23 @@ export const createRestaurantPaymentMethod = async ( ); return data; }; + +export const getRestaurantPaymentMethod = async ( + id: string +): Promise => { + const { data } = await axios.get( + `/admin/restaurant-payment-methods/${id}` + ); + return data; +}; + +export const updateRestaurantPaymentMethod = async ( + id: string, + params: CreateRestaurantPaymentMethodType +) => { + const { data } = await axios.patch( + `/admin/restaurant-payment-methods/${id}`, + params + ); + return data; +}; diff --git a/src/pages/paymentMethods/types/Types.ts b/src/pages/paymentMethods/types/Types.ts index 4e2e53a..600f759 100644 --- a/src/pages/paymentMethods/types/Types.ts +++ b/src/pages/paymentMethods/types/Types.ts @@ -15,7 +15,21 @@ export type PaymentMethod = { export type PaymentMethodsResponse = IResponse; -export type RestaurantPaymentMethodsResponse = IResponse; +export type RestaurantPaymentMethodsResponse = IResponse< + RestaurantPaymentMethod[] +>; + +export type RestaurantPaymentMethod = { + id: string; + paymentMethodId: string; + merchantId: string; + isActive: boolean; + paymentMethod?: PaymentMethod; +}; + +export type RestaurantPaymentMethodResponse = IResponse< + RestaurantPaymentMethod +>; export type CreateRestaurantPaymentMethodType = { paymentMethodId: string; diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 050b591..609aa03 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -26,6 +26,7 @@ import UpdateSchedule from '@/pages/schedule/Update' import Setting from '@/pages/settings/Setting' import PaymentMethodsList from '@/pages/paymentMethods/List' import CreatePaymentMethod from '@/pages/paymentMethods/Create' +import UpdatePaymentMethod from '@/pages/paymentMethods/Update' const MainRouter: FC = () => { const { hasSubMenu } = useSharedStore() @@ -64,6 +65,7 @@ const MainRouter: FC = () => { } /> } /> + } />