From 72ca39c284d23486701f6fbe96b7d20d7567ab57 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 29 Jun 2026 11:41:03 +0330
Subject: [PATCH] multi card number in payment method

---
 .env                                          |   4 +-
 src/pages/paymentMethods/Create.tsx           |  45 +++-----
 src/pages/paymentMethods/Update.tsx           |  48 +++-----
 .../components/PaymentMethodCardsSection.tsx  | 109 ++++++++++++++++++
 .../components/PaymentMethodTableColumns.tsx  |  10 +-
 src/pages/paymentMethods/types/Types.ts       |  11 +-
 6 files changed, 153 insertions(+), 74 deletions(-)
 create mode 100644 src/pages/paymentMethods/components/PaymentMethodCardsSection.tsx

diff --git a/.env b/.env
index 7b5e9c6..d0609b0 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 VITE_TOKEN_NAME = 'dmnu_a_t'
 VITE_REFRESH_TOKEN_NAME = 'dmnu-a-rt'
 
-VITE_BASE_URL = 'https://dmenu-api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.99.131:2000'
+# VITE_BASE_URL = 'https://dmenu-api.danakcorp.com'
+VITE_BASE_URL = 'http://192.168.99.131:2000'
 
 VITE_SOCKET_URL = 'https://dmenu-api.danakcorp.com'
\ No newline at end of file
diff --git a/src/pages/paymentMethods/Create.tsx b/src/pages/paymentMethods/Create.tsx
index 7f0a030..0db0618 100644
--- a/src/pages/paymentMethods/Create.tsx
+++ b/src/pages/paymentMethods/Create.tsx
@@ -11,6 +11,7 @@ import Select from '@/components/Select'
 import Switch from '@/components/Switch'
 import Textarea from '@/components/Textarea'
 import type { CreateRestaurantPaymentMethodType } from './types/Types'
+import PaymentMethodCardsSection from './components/PaymentMethodCardsSection'
 import { useCreateRestaurantPaymentMethod } from './hooks/usePaymentMethodData'
 import { PaymentMethodEnum, PaymentGatewayEnum } from './enum/Enum'
 import { Pages } from '@/config/Pages'
@@ -41,8 +42,7 @@ const CreatePaymentMethod: FC = () => {
             enabled: true,
             order: 0,
             merchantId: '',
-            cardNumber: '',
-            cardOwner: '',
+            cards: [{ cardNumber: '', owner: '' }],
         },
         validationSchema: Yup.object().shape({
             method: Yup.string().required('روش پرداخت الزامی است'),
@@ -59,14 +59,17 @@ const CreatePaymentMethod: FC = () => {
                 then: (schema) => schema.required('شناسه مرچنت الزامی است'),
                 otherwise: (schema) => schema.notRequired(),
             }),
-            cardNumber: Yup.string().when('method', {
+            cards: Yup.array().when('method', {
                 is: PaymentMethodEnum.CreditCard,
-                then: (schema) => schema.required('شماره کارت الزامی است'),
-                otherwise: (schema) => schema.notRequired(),
-            }),
-            cardOwner: Yup.string().when('method', {
-                is: PaymentMethodEnum.CreditCard,
-                then: (schema) => schema.required('نام صاحب کارت الزامی است'),
+                then: (schema) =>
+                    schema
+                        .min(1, 'حداقل یک کارت الزامی است')
+                        .of(
+                            Yup.object().shape({
+                                cardNumber: Yup.string().required('شماره کارت الزامی است'),
+                                owner: Yup.string().required('نام صاحب کارت الزامی است'),
+                            })
+                        ),
                 otherwise: (schema) => schema.notRequired(),
             }),
         }),
@@ -84,8 +87,7 @@ const CreatePaymentMethod: FC = () => {
                     : {}),
                 ...(values.method === PaymentMethodEnum.CreditCard
                     ? {
-                        cardNumber: values.cardNumber,
-                        cardOwner: values.cardOwner,
+                        cards: values.cards,
                     }
                     : {}),
             }
@@ -160,26 +162,7 @@ const CreatePaymentMethod: FC = () => {
                         </>
                     )}
                     {formik.values.method === PaymentMethodEnum.CreditCard && (
-                        <>
-                            <div className='mt-6'>
-                                <Input
-                                    label='شماره کارت'
-                                    name='cardNumber'
-                                    value={formik.values.cardNumber}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.cardNumber && formik.errors.cardNumber ? formik.errors.cardNumber : ''}
-                                />
-                            </div>
-                            <div className='mt-6'>
-                                <Input
-                                    label='نام صاحب کارت'
-                                    name='cardOwner'
-                                    value={formik.values.cardOwner}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.cardOwner && formik.errors.cardOwner ? formik.errors.cardOwner : ''}
-                                />
-                            </div>
-                        </>
+                        <PaymentMethodCardsSection formik={formik} />
                     )}
                     <div className='mt-6'>
                         <Textarea
diff --git a/src/pages/paymentMethods/Update.tsx b/src/pages/paymentMethods/Update.tsx
index 66f98d9..b459afb 100644
--- a/src/pages/paymentMethods/Update.tsx
+++ b/src/pages/paymentMethods/Update.tsx
@@ -11,6 +11,7 @@ import Select from '@/components/Select'
 import Switch from '@/components/Switch'
 import Textarea from '@/components/Textarea'
 import type { CreateRestaurantPaymentMethodType } from './types/Types'
+import PaymentMethodCardsSection from './components/PaymentMethodCardsSection'
 import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod } from './hooks/usePaymentMethodData'
 import { PaymentMethodEnum, PaymentGatewayEnum } from './enum/Enum'
 import { Pages } from '@/config/Pages'
@@ -45,8 +46,7 @@ const UpdatePaymentMethod: FC = () => {
                 enabled: data.enabled ?? true,
                 order: data.order || 0,
                 merchantId: data.merchantId || '',
-                cardNumber: data.cardNumber || '',
-                cardOwner: data.cardOwner || '',
+                cards: data.cards?.length ? data.cards : [{ cardNumber: '', owner: '' }],
             }
         }
         return {
@@ -56,8 +56,7 @@ const UpdatePaymentMethod: FC = () => {
             enabled: true,
             order: 0,
             merchantId: '',
-            cardNumber: '',
-            cardOwner: '',
+            cards: [{ cardNumber: '', owner: '' }],
         }
     }, [paymentMethodData])
 
@@ -79,14 +78,17 @@ const UpdatePaymentMethod: FC = () => {
                 then: (schema) => schema.required('شناسه مرچنت الزامی است'),
                 otherwise: (schema) => schema.notRequired(),
             }),
-            cardNumber: Yup.string().when('method', {
+            cards: Yup.array().when('method', {
                 is: PaymentMethodEnum.CreditCard,
-                then: (schema) => schema.required('شماره کارت الزامی است'),
-                otherwise: (schema) => schema.notRequired(),
-            }),
-            cardOwner: Yup.string().when('method', {
-                is: PaymentMethodEnum.CreditCard,
-                then: (schema) => schema.required('نام صاحب کارت الزامی است'),
+                then: (schema) =>
+                    schema
+                        .min(1, 'حداقل یک کارت الزامی است')
+                        .of(
+                            Yup.object().shape({
+                                cardNumber: Yup.string().required('شماره کارت الزامی است'),
+                                owner: Yup.string().required('نام صاحب کارت الزامی است'),
+                            })
+                        ),
                 otherwise: (schema) => schema.notRequired(),
             }),
         }),
@@ -106,8 +108,7 @@ const UpdatePaymentMethod: FC = () => {
                     : {}),
                 ...(values.method === PaymentMethodEnum.CreditCard
                     ? {
-                        cardNumber: values.cardNumber,
-                        cardOwner: values.cardOwner,
+                        cards: values.cards,
                     }
                     : {}),
             }
@@ -201,26 +202,7 @@ const UpdatePaymentMethod: FC = () => {
                         </>
                     )}
                     {formik.values.method === PaymentMethodEnum.CreditCard && (
-                        <>
-                            <div className='mt-6'>
-                                <Input
-                                    label='شماره کارت'
-                                    name='cardNumber'
-                                    value={formik.values.cardNumber}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.cardNumber && formik.errors.cardNumber ? formik.errors.cardNumber : ''}
-                                />
-                            </div>
-                            <div className='mt-6'>
-                                <Input
-                                    label='نام صاحب کارت'
-                                    name='cardOwner'
-                                    value={formik.values.cardOwner}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.cardOwner && formik.errors.cardOwner ? formik.errors.cardOwner : ''}
-                                />
-                            </div>
-                        </>
+                        <PaymentMethodCardsSection formik={formik} />
                     )}
                     <div className='mt-6'>
                         <Textarea
diff --git a/src/pages/paymentMethods/components/PaymentMethodCardsSection.tsx b/src/pages/paymentMethods/components/PaymentMethodCardsSection.tsx
new file mode 100644
index 0000000..60da7ab
--- /dev/null
+++ b/src/pages/paymentMethods/components/PaymentMethodCardsSection.tsx
@@ -0,0 +1,109 @@
+import { type FC } from 'react'
+import type { FormikProps } from 'formik'
+import { Add, Card, Trash } from 'iconsax-react'
+import Input from '@/components/Input'
+import type { CreateRestaurantPaymentMethodType } from '../types/Types'
+
+type PaymentMethodCardsSectionProps = {
+    formik: FormikProps<CreateRestaurantPaymentMethodType>
+}
+
+const PaymentMethodCardsSection: FC<PaymentMethodCardsSectionProps> = ({ formik }) => {
+    const cards = formik.values.cards ?? []
+    const cardsError = formik.touched.cards && typeof formik.errors.cards === 'string' ? formik.errors.cards : ''
+    const cardErrors = Array.isArray(formik.errors.cards) ? formik.errors.cards : []
+
+    const getFieldError = (index: number, field: 'cardNumber' | 'owner') => {
+        const fieldErrors = cardErrors[index]
+        if (
+            !formik.touched.cards?.[index]?.[field] ||
+            !fieldErrors ||
+            typeof fieldErrors !== 'object' ||
+            !(field in fieldErrors)
+        ) {
+            return ''
+        }
+        return String(fieldErrors[field])
+    }
+
+    return (
+        <div className='mt-6'>
+            <div className='flex items-center justify-between mb-3'>
+                <div className='text-sm'>کارت‌های بانکی</div>
+                {cards.length > 0 && (
+                    <span className='text-xs text-description'>{cards.length} کارت</span>
+                )}
+            </div>
+
+            <div className='space-y-3'>
+                {cards.map((card, index) => (
+                    <div
+                        key={index}
+                        className='bg-gray-50 rounded-2xl p-4 border border-border'
+                    >
+                        <div className='flex items-center justify-between mb-3'>
+                            <div className='flex items-center gap-2.5'>
+                                <div className='w-9 h-9 rounded-xl bg-white border border-border flex items-center justify-center shrink-0'>
+                                    <Card size={18} color='#8C90A3' variant='Bold' />
+                                </div>
+                                <span className='text-sm text-gray-700'>کارت {index + 1}</span>
+                            </div>
+                            {cards.length > 1 && (
+                                <button
+                                    type='button'
+                                    className='p-2 rounded-xl hover:bg-red-50 transition-colors'
+                                    onClick={() => {
+                                        formik.setFieldValue(
+                                            'cards',
+                                            cards.filter((_, i) => i !== index)
+                                        )
+                                    }}
+                                    aria-label={`حذف کارت ${index + 1}`}
+                                >
+                                    <Trash size={18} color='#EF4444' />
+                                </button>
+                            )}
+                        </div>
+
+                        <div className='grid grid-cols-1 md:grid-cols-2 gap-3'>
+                            <Input
+                                label='شماره کارت'
+                                name={`cards.${index}.cardNumber`}
+                                value={card.cardNumber}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                inputMode='numeric'
+                                placeholder='مثال: ۶۲۱۹۸۶۱۹۲۸۹۴۸۵۹۵'
+                                error_text={getFieldError(index, 'cardNumber')}
+                            />
+                            <Input
+                                label='نام صاحب کارت'
+                                name={`cards.${index}.owner`}
+                                value={card.owner}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                placeholder='نام صاحب حساب'
+                                error_text={getFieldError(index, 'owner')}
+                            />
+                        </div>
+                    </div>
+                ))}
+
+                <button
+                    type='button'
+                    className='w-full flex items-center justify-center gap-2 h-11 rounded-2xl border border-dashed border-border text-sm text-description hover:border-primary hover:text-primary hover:bg-primary/5 transition-colors'
+                    onClick={() => {
+                        formik.setFieldValue('cards', [...cards, { cardNumber: '', owner: '' }])
+                    }}
+                >
+                    <Add size={20} />
+                    افزودن کارت جدید
+                </button>
+
+                {cardsError && <div className='text-xs text-red-500'>{cardsError}</div>}
+            </div>
+        </div>
+    )
+}
+
+export default PaymentMethodCardsSection
diff --git a/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx b/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx
index df36243..053b2ef 100644
--- a/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx
+++ b/src/pages/paymentMethods/components/PaymentMethodTableColumns.tsx
@@ -61,17 +61,19 @@ export const getPaymentMethodTableColumns = ({ onDelete, isDeleting }: GetPaymen
             }
         },
         {
-            key: 'cardNumber',
+            key: 'cards',
             title: 'شماره کارت',
             render: (item: RestaurantPaymentMethod) => {
-                return item.cardNumber || '-'
+                if (!item.cards?.length) return '-'
+                return item.cards.map((card) => card.cardNumber).join('، ')
             }
         },
         {
-            key: 'cardOwner',
+            key: 'cardOwners',
             title: 'نام صاحب کارت',
             render: (item: RestaurantPaymentMethod) => {
-                return item.cardOwner || '-'
+                if (!item.cards?.length) return '-'
+                return item.cards.map((card) => card.owner).join('، ')
             }
         },
         {
diff --git a/src/pages/paymentMethods/types/Types.ts b/src/pages/paymentMethods/types/Types.ts
index cbd7eca..ba3a4dc 100644
--- a/src/pages/paymentMethods/types/Types.ts
+++ b/src/pages/paymentMethods/types/Types.ts
@@ -55,6 +55,11 @@ export type RestaurantPaymentMethodsResponse = IResponse<
   RestaurantPaymentMethod[]
 >;
 
+export type PaymentMethodCard = {
+  cardNumber: string;
+  owner: string;
+};
+
 export type RestaurantPaymentMethod = {
   id: string;
   createdAt: string;
@@ -67,8 +72,7 @@ export type RestaurantPaymentMethod = {
   enabled: boolean;
   order: number;
   merchantId: string;
-  cardNumber?: string;
-  cardOwner?: string;
+  cards?: PaymentMethodCard[];
 };
 
 export type RestaurantPaymentMethodResponse = IResponse<
@@ -82,8 +86,7 @@ export type CreateRestaurantPaymentMethodType = {
   enabled: boolean;
   order: number;
   merchantId?: string;
-  cardNumber?: string;
-  cardOwner?: string;
+  cards?: PaymentMethodCard[];
 };
 
 export type GetRestaurantPaymentMethodsParams = {