payment with card to card

2026-06-15 12:18:25 +03:30
parent 1dd639c0b1
commit 22e443cf7b
7 changed files with 221 additions and 200 deletions
@@ -1,7 +1,7 @@
 import { type FC, useState } from 'react'
 import {
    useGetOrderById,
-    useVerifyCashPayment,
+    useVerifyPayment,
    useChangeOrderStatus,
    useRefundPayment
 } from './hooks/useOrderData'
@@ -14,6 +14,7 @@ import ModalConfrim from '@/components/ModalConfrim'
 import CustomerInfo from './components/CustomerInfo'
 import OrderItemsDetails from './components/OrderItemsDetails'
 import PaymentInfo from './components/PaymentInfo'
+import PaymentVerificationBox from './components/PaymentVerificationBox'
 import OrderActions from './components/OrderActions'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
@@ -22,7 +23,7 @@ import { printOrderReceipt } from './print/orderReceiptPrint'
 const OrderDetails: FC = () => {
    const { id } = useParams()
    const { data: orderData, isLoading } = useGetOrderById(id!)
-    const { mutate: verifyCashPayment, isPending: isVerifyingPayment } = useVerifyCashPayment()
+    const { mutate: verifyPayment, isPending: isVerifyingPayment } = useVerifyPayment()
    const { mutate: changeOrderStatus, isPending: isChangingStatus } = useChangeOrderStatus()
    const { mutate: refundPayment, isPending: isRefunding } = useRefundPayment()

@@ -89,6 +90,7 @@ const OrderDetails: FC = () => {

    // منطق نمایش دکمه‌ها
    const isCashPayment = order.paymentMethod?.method === PaymentMethodEnum.Cash
+    const isCreditCardPayment = order.paymentMethod?.method === PaymentMethodEnum.CreditCard
    const isPendingPayment = order.status === OrderStatus.PENDING_PAYMENT
    const isOrderPaid = order.status === OrderStatus.PAID
    const isPreparing = order.status === OrderStatus.PREPARING
@@ -102,9 +104,7 @@ const OrderDetails: FC = () => {
    const isDineInOrCarDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DineIn || order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCar
    const isCustomerPickup = order.deliveryMethod?.method === DeliveryMethodEnum.CustomerPickup

-    // نمایش دکمه تایید پرداخت نقدی
-    // وقتی روش پرداخت نقدی است و وضعیت پرداخت Pending باشد
-    const showVerifyCashPaymentButton = isCashPayment && isPaymentPending
+    const showVerifyPaymentBox = (isCashPayment || isCreditCardPayment) && isPaymentPending && !isCanceled

    // نمایش دکمه ارسال به آشپزخانه
    // برای pendingPayment با پرداخت نقدی یا برای paid
@@ -114,10 +114,10 @@ const OrderDetails: FC = () => {
    // همیشه نمایش داده می‌شود مگر اینکه سفارش قبلاً کنسل شده باشد
    const showCancelButton = !isCanceled

-    const handleVerifyCashPayment = () => {
+    const handleVerifyPayment = () => {
        const paymentId = order.paymentId || order.payments?.[0]?.id
        if (paymentId) {
-            verifyCashPayment(paymentId, {
+            verifyPayment(paymentId, {
                onSuccess: () => {
                    // Success handled by query invalidation
                },
@@ -232,9 +232,15 @@ const OrderDetails: FC = () => {
                        getPaymentStatusTextColor={getPaymentStatusTextColor}
                        getPaymentStatusText={getPaymentStatusText}
                    />
+                    {showVerifyPaymentBox && (
+                        <PaymentVerificationBox
+                            order={order}
+                            isVerifyingPayment={isVerifyingPayment}
+                            onVerifyPayment={handleVerifyPayment}
+                        />
+                    )}
                    <OrderActions
                        onPrint={handlePrintOrder}
-                        showVerifyCashPaymentButton={showVerifyCashPaymentButton}
                        showSendToKitchenButton={showSendToKitchenButton}
                        showCancelButton={showCancelButton}
                        isPreparing={isPreparing}
@@ -242,9 +248,7 @@ const OrderDetails: FC = () => {
                        isDineInOrCarDelivery={isDineInOrCarDelivery}
                        isCustomerPickup={isCustomerPickup}
                        isCanceled={isCanceled}
-                        isVerifyingPayment={isVerifyingPayment}
                        isChangingStatus={isChangingStatus}
-                        onVerifyCashPayment={handleVerifyCashPayment}
                        onSendToKitchen={handleSendToKitchen}
                        onDeliverToCourier={handleDeliverToCourier}
                        onDeliverToWaiter={handleDeliverToWaiter}
@@ -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='ارسال به آشپزخانه'
@@ -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;
@@ -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
@@ -28,10 +28,10 @@ export const useConfirmOrder = () => {
  });
 };

-export const useVerifyCashPayment = () => {
+export const useVerifyPayment = () => {
  const queryClient = useQueryClient();
  return useMutation({
-    mutationFn: (paymentId: string) => api.verifyCashPayment(paymentId),
+    mutationFn: (paymentId: string) => api.verifyPayment(paymentId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["order"] });
      queryClient.invalidateQueries({ queryKey: ["orders"] });
@@ -64,8 +64,8 @@ export const confirmOrder = async (orderId: string): Promise<void> => {
  await axios.patch(`/admin/orders/${orderId}/confirm`);
 };

-export const verifyCashPayment = async (paymentId: string): Promise<void> => {
-  await axios.post(`/admin/payments/verify-cash-method/${paymentId}`);
+export const verifyPayment = async (paymentId: string): Promise<void> => {
+  await axios.post(`/admin/payments/verify/${paymentId}`);
 };

 export const changeOrderStatus = async (
@@ -45,7 +45,7 @@ export interface OrderRestaurant {
  menuColor: string | null;
  latitude: number | null;
  longitude: number | null;
-  serviceArea: ServiceArea;
+  serviceArea: ServiceArea | null;
  isActive: boolean;
  establishedYear: number | null;
  phone: string;
@@ -62,6 +62,8 @@ export interface OrderRestaurant {
  score: RestaurantScore;
  plan: string;
  subscriptionId: string;
+  subscriptionStartDate: string;
+  subscriptionEndDate: string;
 }

 export interface OrderDeliveryMethod {
@@ -108,6 +110,7 @@ export interface OrderPaymentMethod {
  method: string;
  gateway: string | null;
  description: string;
+  cardNumber: string | null;
  enabled: boolean;
  order: number;
  merchantId: string | null;
@@ -122,7 +125,7 @@ export interface OrderFood {
  category: string;
  title: string;
  desc: string;
-  content: string[];
+  content: string[] | null;
  price: number;
  order: number | null;
  prepareTime: number | null;
@@ -172,6 +175,7 @@ export interface OrderPayment {
  paidAt: string | null;
  failedAt: string | null;
  description: string | null;
+  attachments: string[] | null;
 }

 export interface CouponDetail {