service and hook compelete

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<CreateRestaurantPaymentMethodType>({
+        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 <PageLoading />
+    }
+
+    if (!restaurantPaymentMethod) {
+        return (
+            <div className='w-full mt-4 flex justify-center items-center'>
+                <div>روش پرداخت یافت نشد</div>
+            </div>
+        )
+    }
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    ویرایش روش پرداخت
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isloading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت تغییرات</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <div className='bg-white rounded-3xl p-6'>
+                    <div className='mb-4'>
+                        <Select
+                            label='روش پرداخت'
+                            name='paymentMethodId'
+                            value={formik.values.paymentMethodId}
+                            onChange={formik.handleChange}
+                            items={paymentMethods}
+                            placeholder='روش پرداخت را انتخاب کنید'
+                            error_text={formik.touched.paymentMethodId && formik.errors.paymentMethodId ? formik.errors.paymentMethodId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='شناسه مرچنت'
+                            name='merchantId'
+                            value={formik.values.merchantId}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.merchantId && formik.errors.merchantId ? formik.errors.merchantId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Switch
+                            active={formik.values.isActive}
+                            onChange={(value) => formik.setFieldValue('isActive', value)}
+                            label='فعال'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdatePaymentMethod

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<PaymentMethod>[] => {
+export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymentMethodTableColumnsParams = {}): ColumnType<RestaurantPaymentMethod>[] => {
     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 (
                     <Status 
                         variant={item.isActive ? 'success' : 'error'} 
@@ -38,20 +47,13 @@ export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymen
             }
         },
         {
-            key: 'order',
+            key: 'merchantId',
-            title: 'ترتیب',
+            title: 'شناسه مرچنت',
-        },
-        {
-            key: 'createdAt',
-            title: 'تاریخ ایجاد',
-            render: (item: PaymentMethod) => {
-                return new Date(item.createdAt).toLocaleDateString('fa-IR')
-            }
         },
         {
             key: 'actions',
             title: '',
-            render: (item: PaymentMethod) => {
+            render: (item: RestaurantPaymentMethod) => {
                 return (
                     <div className='flex gap-2 items-center'>
                         <Link to={Pages.payment_methods.update + item.id}>

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"],
+      });
+    },
+  });
+};

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<RestaurantPaymentMethodResponse> => {
+  const { data } = await axios.get<RestaurantPaymentMethodResponse>(
+    `/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;
+};

src/pages/paymentMethods/types/Types.ts

@@ -15,7 +15,21 @@ export type PaymentMethod = {
 
 export type PaymentMethodsResponse = IResponse<PaymentMethod[]>;
 
-export type RestaurantPaymentMethodsResponse = IResponse<PaymentMethod[]>;
+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;

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 = () => {
 
                             <Route path={Pages.payment_methods.list} element={<PaymentMethodsList />} />
                             <Route path={Pages.payment_methods.add} element={<CreatePaymentMethod />} />
+                            <Route path={Pages.payment_methods.update + ':id'} element={<UpdatePaymentMethod />} />
                         </Routes>
                     </div>
                 </div>