cancel order

src/app/profile/orders/[id]/page.tsx

@@ -8,8 +8,7 @@ import Menu from '../../components/Menu'
 import OrderSidebar from './components/OrderSidebar'
 import OrderMainContent from './components/OrderMainContent'
 import CancelOrderModal from './components/CancelOrderModal'
-import { useGetOrderDetail } from '../hooks/useOrdersData'
-import * as api from '../service/Service'
+import { useCancelOrder, useGetOrderDetail } from '../hooks/useOrdersData'
 import { toast } from '@/components/Toast'
 
 
@@ -17,7 +16,7 @@ const OrderDetail: FC = () => {
     const { id } = useParams()
     const { data: orderDetail } = useGetOrderDetail(id as string)
     const [showModalCancel, setShowModalCancel] = useState<boolean>(false)
-    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const cancelOrderMutation = useCancelOrder()
     const router = useRouter()
 
     const getStatusText = (status: string) => {
@@ -32,11 +31,24 @@ const OrderDetail: FC = () => {
 
     const onSubmit = async (cancelData: { reason: string; count: string; description: string }) => {
         try {
-            setIsLoading(true)
-            await api.cancelOrder(id as string, {
-                reason: cancelData.reason,
-                count: parseInt(cancelData.count),
-                description: cancelData.description
+            // Prepare cancel items from all order items
+            const cancelItems = orderDetail?.results.order.orderItems.flatMap(orderItem =>
+                orderItem.shipmentItems.map(shipmentItem => {
+                    const availableQuantity = shipmentItem.quantity - shipmentItem.cancelled_quantity - shipmentItem.returned_quantity
+
+                    return {
+                        orderItemId: orderItem._id,
+                        shipmentItemId: shipmentItem._id,
+                        quantity: availableQuantity,
+                        comment: cancelData.description,
+                        reason: cancelData.reason
+                    }
+                })
+            ) || []
+
+            await cancelOrderMutation.mutateAsync({
+                orderId: Number(id),
+                items: cancelItems
             })
 
             toast("درخواست لغو سفارش با موفقیت ثبت شد", "success")
@@ -45,8 +57,6 @@ const OrderDetail: FC = () => {
             router.push('/profile/orders')
         } catch {
             toast("مشکلی در ثبت درخواست لغو سفارش رخ داد", "error")
-        } finally {
-            setIsLoading(false)
         }
     }
 
@@ -66,7 +76,7 @@ const OrderDetail: FC = () => {
                     <div className="text-lg font-semibold">جزئیات سفارش</div>
                 </div>
 
-                {isLoading ? (
+                {cancelOrderMutation.isPending ? (
                     <PageLoading />
                 ) : orderDetail?.results.order ? (
                     <div className='mt-6 lg:flex-row flex-col flex gap-6 items-start'>
@@ -99,7 +109,7 @@ const OrderDetail: FC = () => {
                 showModalCancel={showModalCancel}
                 setShowModalCancel={setShowModalCancel}
                 onSubmit={onSubmit}
-                isLoading={isLoading}
+                isLoading={cancelOrderMutation.isPending}
                 cancelReasons={orderDetail?.results.order.cancelReasons}
             />
         </div>