change payment method

src/langs/fa.json

@@ -763,6 +763,11 @@
     "add_account": "افزودن حساب"
   },
   "payment": {
+    "Online": "آنلاین",
+    "Cash": "نقدی",
+    "CardOnDelivery": "کارت هنگام تحویل",
+    "Wallet": "کیف پول",
+    "zarinpal": "زرین‌پال",
     "payments": "پرداخت ها",
     "status_payment": "وضعیت پرداخت",
     "user": "کاربر",

src/pages/paymentMethods/Create.tsx

@@ -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 Textarea from '@/components/Textarea'
-import { useCreateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
+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) => ({
+    const paymentMethods = [
-        label: method.name,
+        { label: t(`payment.${PaymentMethodEnum.Online}`), value: PaymentMethodEnum.Online },
-        value: method.id
+        { 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'
+                            name='method'
-                            value={formik.values.paymentMethodId}
+                            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}
+                            active={formik.values.enabled}
-                            onChange={(value) => formik.setFieldValue('isActive', value)}
+                            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

@@ -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 Textarea from '@/components/Textarea'
-import type { CreateRestaurantPaymentMethodType, PaymentMethod } from './types/Types'
+import type { CreateRestaurantPaymentMethodType } from './types/Types'
-import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
+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) => ({
+    const paymentMethods = [
-        label: method.name,
+        { label: t(`payment.${PaymentMethodEnum.Online}`), value: PaymentMethodEnum.Online },
-        value: method.id
+        { 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: {
+        initialValues,
-            paymentMethodId: '',
+        enableReinitialize: true,
-            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) => {
             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'
+                            name='method'
-                            value={formik.values.paymentMethodId}
+                            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}
+                            active={formik.values.enabled}
-                            onChange={(value) => formik.setFieldValue('isActive', value)}
+                            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

@@ -14,38 +14,52 @@ interface GetPaymentMethodTableColumnsParams {
 export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymentMethodTableColumnsParams = {}): ColumnType<RestaurantPaymentMethod>[] => {
     return [
         {
-            key: 'name',
+            key: 'title',
-            title: 'نام',
+            title: 'عنوان',
             render: (item: RestaurantPaymentMethod) => {
-                return item.paymentMethod?.name || '-'
+                return item.title || '-'
             }
         },
         {
-            key: 'keyName',
+            key: 'method',
-            title: 'کلید',
+            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'} 
+                        variant={item.enabled ? 'success' : 'error'} 
-                        label={item.isActive ? 'فعال' : 'غیرفعال'} 
+                        label={item.enabled ? 'فعال' : 'غیرفعال'} 
                     />
                 )
             }
         },
+        {
+            key: 'order',
+            title: 'ترتیب',
+            render: (item: RestaurantPaymentMethod) => {
+                return item.order || '-'
+            }
+        },
         {
             key: 'merchantId',
             title: 'شناسه مرچنت',

src/pages/paymentMethods/enum/Enum.ts

@@ -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

@@ -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

@@ -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(
+  const { data } = await axios.delete(`/admin/payments/methods/${id}`);
-    `/admin/payments/methods/restaurant/${id}`
-  );
   return data;
 };
 
 export const createRestaurantPaymentMethod = async (
   params: CreateRestaurantPaymentMethodType
 ) => {
-  const { data } = await axios.post(
+  const { data } = await axios.post("/admin/payments/methods", params);
-    "/admin/payments/methods/restaurant",
-    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(
+  const { data } = await axios.patch(`/admin/payments/methods/${id}`, params);
-    `/admin/payments/methods/restaurant/${id}`,
-    params
-  );
   return data;
 };

src/pages/paymentMethods/types/Types.ts

@@ -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;
+  title: string;
-  merchantId: string | null;
+  method: string;
-  isActive: boolean;
+  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 = {