payment with card to card

src/pages/orders/components/OrderActions.tsx

@@ -3,7 +3,6 @@ import { type FC, useState, useEffect } from 'react'
 
 interface OrderActionsProps {
     onPrint: () => void
-    showVerifyCashPaymentButton: boolean
     showSendToKitchenButton: boolean
     showCancelButton: boolean
     isPreparing: boolean
@@ -11,9 +10,7 @@ interface OrderActionsProps {
     isDineInOrCarDelivery: boolean
     isCustomerPickup: boolean
     isCanceled: boolean
-    isVerifyingPayment: boolean
     isChangingStatus: boolean
-    onVerifyCashPayment: () => void
     onSendToKitchen: () => void
     onDeliverToCourier: () => void
     onDeliverToWaiter: () => void
@@ -23,7 +20,6 @@ interface OrderActionsProps {
 
 const OrderActions: FC<OrderActionsProps> = ({
     onPrint,
-    showVerifyCashPaymentButton,
     showSendToKitchenButton,
     showCancelButton,
     isPreparing,
@@ -31,9 +27,7 @@ const OrderActions: FC<OrderActionsProps> = ({
     isDineInOrCarDelivery,
     isCustomerPickup,
     isCanceled,
-    isVerifyingPayment,
     isChangingStatus,
-    onVerifyCashPayment,
     onSendToKitchen,
     onDeliverToCourier,
     onDeliverToWaiter,
@@ -43,10 +37,10 @@ const OrderActions: FC<OrderActionsProps> = ({
     const [loadingAction, setLoadingAction] = useState<string | null>(null)
 
     useEffect(() => {
-        if (!isChangingStatus && !isVerifyingPayment) {
+        if (!isChangingStatus) {
             setLoadingAction(null)
         }
-    }, [isChangingStatus, isVerifyingPayment])
+    }, [isChangingStatus])
 
     const handleSendToKitchen = () => {
         setLoadingAction('sendToKitchen')
@@ -81,15 +75,6 @@ const OrderActions: FC<OrderActionsProps> = ({
                 className='bg-slate-700 hover:bg-slate-800'
             />
 
-            {!isCanceled && showVerifyCashPaymentButton && (
-                <Button
-                    label='تایید پرداخت'
-                    onClick={onVerifyCashPayment}
-                    isloading={isVerifyingPayment}
-                    className='bg-green-600 hover:bg-green-700'
-                />
-            )}
-
             {!isCanceled && showSendToKitchenButton && (
                 <Button
                     label='ارسال به آشپزخانه'

src/pages/orders/components/PaymentInfo.tsx

@@ -1,178 +1,139 @@
-import type { FC } from 'react'
-import type { Order } from '../types/Types'
-import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
-import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
-import { formatPrice, formatFaNumber } from '@/helpers/func'
+import { formatFaNumber, formatPrice } from "@/helpers/func";
+import { PaymentMethodEnum } from "@/pages/paymentMethods/enum/Enum";
+import { DeliveryMethodEnum } from "@/pages/shipmentMethod/enum/Enum";
+import type { FC } from "react";
+import type { Order } from "../types/Types";
 
 interface PaymentInfoProps {
-    order: Order
-    getPaymentStatusColor: (status: string) => string
-    getPaymentStatusTextColor: (status: string) => string
-    getPaymentStatusText: (status: string) => string
+  order: Order;
+  getPaymentStatusColor: (status: string) => string;
+  getPaymentStatusTextColor: (status: string) => string;
+  getPaymentStatusText: (status: string) => string;
 }
 
-const PaymentInfo: FC<PaymentInfoProps> = ({
-    order,
-    getPaymentStatusColor,
-    getPaymentStatusTextColor,
-    getPaymentStatusText
-}) => {
+const PaymentInfo: FC<PaymentInfoProps> = ({ order, getPaymentStatusColor, getPaymentStatusTextColor, getPaymentStatusText }) => {
+  const paymentStatus = order.payments?.[0]?.status;
 
-    const paymentStatus = order.payments?.[0]?.status
+  const getDeliveryMethodText = (method: string): string => {
+    const methodMap: Record<string, string> = {
+      [DeliveryMethodEnum.DineIn]: "سرو در رستوران",
+      [DeliveryMethodEnum.CustomerPickup]: "دریافت از محل",
+      [DeliveryMethodEnum.DeliveryCar]: "تحویل به خودرو",
+      [DeliveryMethodEnum.DeliveryCourier]: "بیرون بر",
+    };
+    return methodMap[method] || method;
+  };
 
-    const getDeliveryMethodText = (method: string): string => {
-        const methodMap: Record<string, string> = {
-            [DeliveryMethodEnum.DineIn]: 'سرو در رستوران',
-            [DeliveryMethodEnum.CustomerPickup]: 'دریافت از محل',
-            [DeliveryMethodEnum.DeliveryCar]: 'تحویل به خودرو',
-            [DeliveryMethodEnum.DeliveryCourier]: 'بیرون بر',
-        }
-        return methodMap[method] || method
-    }
+  const getPaymentMethodText = (method: string): string => {
+    const methodMap: Record<string, string> = {
+      [PaymentMethodEnum.Cash]: "پرداخت نقدی",
+      [PaymentMethodEnum.Online]: "پرداخت آنلاین",
+      [PaymentMethodEnum.CreditCard]: "پرداخت کارت به کارت",
+      [PaymentMethodEnum.Wallet]: "کیف پول",
+    };
+    return methodMap[method] || method;
+  };
 
-    const getPaymentMethodText = (method: string): string => {
-        const methodMap: Record<string, string> = {
-            [PaymentMethodEnum.Cash]: 'پرداخت نقدی',
-            [PaymentMethodEnum.Online]: 'پرداخت آنلاین',
-            [PaymentMethodEnum.CreditCard]: 'پرداخت کارتی',
-            [PaymentMethodEnum.Wallet]: 'کیف پول',
-        }
-        return methodMap[method] || method
-    }
+  return (
+    <div className="w-[330px] h-fit bg-white rounded-4xl p-8">
+      <div className="flex justify-between items-center">
+        <div className="font-light">اطلاعات پرداخت</div>
 
-    return (
-        <div className='w-[330px] h-fit bg-white rounded-4xl p-8'>
-            <div className='flex justify-between items-center'>
-                <div className='font-light'>
-                    اطلاعات پرداخت
-                </div>
-
-                <div className='flex gap-1.5 items-center'>
-                    <div className={`size-2 rounded-full ${getPaymentStatusColor(paymentStatus)}`}></div>
-                    <div className={`text-[13px] ${getPaymentStatusTextColor(paymentStatus)}`}>
-                        {getPaymentStatusText(paymentStatus)}
-                    </div>
-                </div>
-            </div>
-
-            <div className='mt-10'>
-                <div className='flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                    <div className='text-description'>
-                        روش ارسال
-                    </div>
-                    <div>{order.deliveryMethod ? getDeliveryMethodText(order.deliveryMethod.method) : '-'}</div>
-                </div>
-
-                {order.deliveryMethod?.description && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            توضیحات روش ارسال
-                        </div>
-                        <div>{order.deliveryMethod.description}</div>
-                    </div>
-                )}
-
-                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                    <div className='text-description'>
-                        روش پرداخت
-                    </div>
-                    <div>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : '-'}</div>
-                </div>
-
-                {order.paymentMethod?.description && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            توضیحات روش پرداخت
-                        </div>
-                        <div>{order.paymentMethod.description}</div>
-                    </div>
-                )}
-
-                {order.paymentMethod?.gateway && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            درگاه پرداخت
-                        </div>
-                        <div>{order.paymentMethod.gateway}</div>
-                    </div>
-                )}
-
-                {order.paymentId && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            شناسه پرداخت
-                        </div>
-                        <div className='font-mono text-xs'>{order.paymentId}</div>
-                    </div>
-                )}
-
-                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                    <div className='text-description'>
-                        جمع آیتم‌ها
-                    </div>
-                    <div>{formatPrice(order.subTotal)}</div>
-                </div>
-
-                {order.itemsDiscount > 0 && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            تخفیف آیتم‌ها
-                        </div>
-                        <div className='text-green-600'>-{formatPrice(order.itemsDiscount)}</div>
-                    </div>
-                )}
-
-                {order.couponDiscount > 0 && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            تخفیف کوپن
-                        </div>
-                        <div className='text-green-600'>-{formatPrice(order.couponDiscount)}</div>
-                    </div>
-                )}
-
-                {order.totalDiscount > 0 && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description font-medium'>
-                            جمع تخفیف‌ها
-                        </div>
-                        <div className='text-green-600 font-medium'>-{formatPrice(order.totalDiscount)}</div>
-                    </div>
-                )}
-
-                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                    <div className='text-description'>
-                        هزینه ارسال
-                    </div>
-                    <div>{formatPrice(order.deliveryFee)}</div>
-                </div>
-
-                {order.tax > 0 && (
-                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                        <div className='text-description'>
-                            مالیات
-                        </div>
-                        <div>{formatPrice(order.tax)}</div>
-                    </div>
-                )}
-
-                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
-                    <div className='text-description'>
-                        تعداد آیتم‌ها
-                    </div>
-                    <div>{formatFaNumber(order.totalItems)}</div>
-                </div>
-
-                <div className='flex mt-4 text-[13px] font-bold justify-between items-center'>
-                    <div>
-                        مبلغ کل
-                    </div>
-                    <div>{formatPrice(order.total)}</div>
-                </div>
-            </div>
+        <div className="flex gap-1.5 items-center">
+          <div className={`size-2 rounded-full ${getPaymentStatusColor(paymentStatus)}`}></div>
+          <div className={`text-[13px] ${getPaymentStatusTextColor(paymentStatus)}`}>{getPaymentStatusText(paymentStatus)}</div>
         </div>
-    )
-}
+      </div>
 
-export default PaymentInfo
+      <div className="mt-10">
+        <div className="flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+          <div className="text-description">روش ارسال</div>
+          <div>{order.deliveryMethod ? getDeliveryMethodText(order.deliveryMethod.method) : "-"}</div>
+        </div>
 
+        {order.deliveryMethod?.description && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">توضیحات روش ارسال</div>
+            <div>{order.deliveryMethod.description}</div>
+          </div>
+        )}
+
+        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+          <div className="text-description">روش پرداخت</div>
+          <div>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : "-"}</div>
+        </div>
+
+        {order.paymentMethod?.description && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">توضیحات روش پرداخت</div>
+            <div>{order.paymentMethod.description}</div>
+          </div>
+        )}
+
+        {order.paymentMethod?.gateway && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">درگاه پرداخت</div>
+            <div>{order.paymentMethod.gateway}</div>
+          </div>
+        )}
+
+        {order.paymentId && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">شناسه پرداخت</div>
+            <div className="font-mono text-xs">{order.paymentId}</div>
+          </div>
+        )}
+
+        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+          <div className="text-description">جمع آیتم‌ها</div>
+          <div>{formatPrice(order.subTotal)}</div>
+        </div>
+
+        {order.itemsDiscount > 0 && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">تخفیف آیتم‌ها</div>
+            <div className="text-green-600">-{formatPrice(order.itemsDiscount)}</div>
+          </div>
+        )}
+
+        {order.couponDiscount > 0 && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">تخفیف کوپن</div>
+            <div className="text-green-600">-{formatPrice(order.couponDiscount)}</div>
+          </div>
+        )}
+
+        {order.totalDiscount > 0 && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description font-medium">جمع تخفیف‌ها</div>
+            <div className="text-green-600 font-medium">-{formatPrice(order.totalDiscount)}</div>
+          </div>
+        )}
+
+        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+          <div className="text-description">هزینه ارسال</div>
+          <div>{formatPrice(order.deliveryFee)}</div>
+        </div>
+
+        {order.tax > 0 && (
+          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+            <div className="text-description">مالیات</div>
+            <div>{formatPrice(order.tax)}</div>
+          </div>
+        )}
+
+        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
+          <div className="text-description">تعداد آیتم‌ها</div>
+          <div>{formatFaNumber(order.totalItems)}</div>
+        </div>
+
+        <div className="flex mt-4 text-[13px] font-bold justify-between items-center">
+          <div>مبلغ کل</div>
+          <div>{formatPrice(order.total)}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentInfo;

src/pages/orders/components/PaymentVerificationBox.tsx

@@ -0,0 +1,67 @@
+import Button from '@/components/Button'
+import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
+import type { FC } from 'react'
+import type { Order } from '../types/Types'
+
+interface PaymentVerificationBoxProps {
+    order: Order
+    isVerifyingPayment: boolean
+    onVerifyPayment: () => void
+}
+
+const PaymentVerificationBox: FC<PaymentVerificationBoxProps> = ({
+    order,
+    isVerifyingPayment,
+    onVerifyPayment,
+}) => {
+    const payment = order.payments?.[0]
+    const isCreditCard = order.paymentMethod?.method === PaymentMethodEnum.CreditCard
+    const hasDescription = Boolean(payment?.description)
+    const hasAttachments = Boolean(payment?.attachments && payment.attachments.length > 0)
+
+    return (
+        <div className='w-[330px] h-fit bg-white rounded-4xl p-8 mt-6'>
+            <div className='font-light'>اطلاعات تایید پرداخت</div>
+
+            <div className='mt-6 space-y-4 text-[13px] font-light'>
+                {isCreditCard && hasDescription && (
+                    <div>
+                        <div className='text-description mb-2'>توضیحات پرداخت</div>
+                        <div className='text-gray-700 bg-gray-50 p-3 rounded-lg'>{payment?.description}</div>
+                    </div>
+                )}
+
+                {isCreditCard && hasAttachments && (
+                    <div>
+                        <div className='text-description mb-2'>پیوست پرداخت</div>
+                        <div className='flex gap-3 flex-wrap'>
+                            {payment?.attachments?.map((attachment, index) => (
+                                <a
+                                    key={index}
+                                    href={attachment}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    <img
+                                        src={attachment}
+                                        alt={`پیوست پرداخت ${index + 1}`}
+                                        className='w-24 h-24 object-cover rounded-xl border border-border'
+                                    />
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                <Button
+                    label='تایید پرداخت'
+                    onClick={onVerifyPayment}
+                    isloading={isVerifyingPayment}
+                    className='bg-green-600 hover:bg-green-700 w-full'
+                />
+            </div>
+        </div>
+    )
+}
+
+export default PaymentVerificationBox