add payment

src/pages/orders/Details.tsx

@@ -4,6 +4,7 @@ import {
     useVerifyPayment,
     useChangeOrderStatus,
     useRefundPayment,
+    useAddPayment,
     useUpdateOrderFees,
     useAddOrderItem,
     useUpdateOrderItemQuantity,
@@ -23,6 +24,7 @@ import OrderActions from './components/OrderActions'
 import UpdateOrderFeesModal from './components/UpdateOrderFeesModal'
 import AddOrderItemModal from './components/AddOrderItemModal'
 import RefundPaymentModal from './components/RefundPaymentModal'
+import AddPaymentModal from './components/AddPaymentModal'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
 import { printOrderReceipt } from './print/orderReceiptPrint'
@@ -34,6 +36,7 @@ const OrderDetails: FC = () => {
     const { mutate: verifyPayment, isPending: isVerifyingPayment } = useVerifyPayment()
     const { mutate: changeOrderStatus, isPending: isChangingStatus } = useChangeOrderStatus()
     const { mutate: refundPayment, isPending: isRefunding } = useRefundPayment()
+    const { mutate: addPayment, isPending: isAddingPayment } = useAddPayment()
     const { mutate: updateOrderFees, isPending: isUpdatingFees } = useUpdateOrderFees()
     const { mutate: addOrderItem, isPending: isAddingItem } = useAddOrderItem()
     const { mutate: updateOrderItemQuantity, isPending: isUpdatingItemQuantity } = useUpdateOrderItemQuantity()
@@ -41,6 +44,7 @@ const OrderDetails: FC = () => {
 
     const [showCancelModal, setShowCancelModal] = useState(false)
     const [refundModal, setRefundModal] = useState<{ defaultAmount: number; maxAmount: number } | null>(null)
+    const [showAddPaymentModal, setShowAddPaymentModal] = useState(false)
     const [showEditFeesModal, setShowEditFeesModal] = useState(false)
     const [showAddItemModal, setShowAddItemModal] = useState(false)
     const [itemIdToRemove, setItemIdToRemove] = useState<string | null>(null)
@@ -87,6 +91,7 @@ const OrderDetails: FC = () => {
     const isPendingPayment = order.status === OrderStatus.NEW
     const canEditFees = !isCanceled && !isCompleted
     const canEditItems = !isCanceled && !isCompleted
+    const canAddPayment = !isCanceled && Number(order.balance ?? 0) > 0
     const isUpdatingItem = isAddingItem || isUpdatingItemQuantity || isRemovingItem
     const canCompleteOrder = [
         OrderStatus.DELIVERED_TO_WAITER,
@@ -219,6 +224,27 @@ const OrderDetails: FC = () => {
         )
     }
 
+    const handleAddPayment = (amount: number, description: string) => {
+        addPayment(
+            {
+                orderId: order.id,
+                params: {
+                    amount,
+                    ...(description ? { description } : {}),
+                },
+            },
+            {
+                onSuccess: () => {
+                    toast.success('پرداخت با موفقیت ثبت شد')
+                    setShowAddPaymentModal(false)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
     const handlePrintOrder = () => {
         printOrderReceipt(order)
     }
@@ -281,15 +307,15 @@ const OrderDetails: FC = () => {
     }
 
     return (
-        <div className='mt-5'>
+        <div className='mt-5 pb-8'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>
                     سفارش {formatFaNumber(order.orderNumber)}
                 </h1>
             </div>
 
-            <div className='flex gap-7 mt-9'>
-                <div className='flex-1 space-y-8'>
+            <div className='flex flex-col lg:flex-row gap-5 lg:gap-7 mt-6 sm:mt-9'>
+                <div className='flex-1 min-w-0 space-y-5 sm:space-y-8 order-2 lg:order-1'>
                     <CustomerInfo order={order} />
                     <OrderItemsDetails
                         order={order}
@@ -305,10 +331,12 @@ const OrderDetails: FC = () => {
                         isVerifyingPayment={isVerifyingPayment}
                         verifyingPaymentId={verifyingPaymentId}
                         onVerifyPayment={handleVerifyPayment}
+                        canAddPayment={canAddPayment}
+                        onAddPayment={() => setShowAddPaymentModal(true)}
                     />
                 </div>
 
-                <div>
+                <div className='w-full lg:w-[330px] shrink-0 order-1 lg:order-2'>
                     <PaymentInfo
                         order={order}
                         canEditFees={canEditFees}
@@ -373,6 +401,14 @@ const OrderDetails: FC = () => {
                 onSubmit={handleRefund}
             />
 
+            <AddPaymentModal
+                isOpen={showAddPaymentModal}
+                onClose={() => setShowAddPaymentModal(false)}
+                defaultAmount={Number(order.balance ?? 0)}
+                isLoading={isAddingPayment}
+                onSubmit={handleAddPayment}
+            />
+
             <ModalConfrim
                 isOpen={!!itemIdToRemove}
                 close={() => setItemIdToRemove(null)}