order: stop polling when the order has "closed" or "canceled_by_customer" status.

src/pages/order/page.tsx

@@ -8,7 +8,6 @@ import {
   Progress,
   Tooltip,
 } from "antd";
-import Ads2 from "components/Ads/Ads2";
 import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
 import LocationIcon from "components/Icons/LocationIcon";
 import InvoiceIcon from "components/Icons/order/InvoiceIcon";
@@ -19,7 +18,7 @@ import ProHeader from "components/ProHeader/ProHeader";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import dayjs from "dayjs";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -48,6 +47,26 @@ export default function OrderPage() {
   const hasRefetchedRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
+
+  // Track order details in state to trigger re-evaluation of polling
+  const [lastOrderDetails, setLastOrderDetails] = useState<any>(null);
+
+  // Compute polling interval based on order status
+  const pollingInterval = useMemo(() => {
+    const orderDetailsToCheck = lastOrderDetails;
+    if (orderDetailsToCheck?.status) {
+      const hasClosedOrCanceled = orderDetailsToCheck.status.some(
+        (status: any) =>
+          status?.alias === "closed" ||
+          status?.alias === "canceled_by_customer",
+      );
+      if (hasClosedOrCanceled) {
+        return 0; // Stop polling
+      }
+    }
+    return 10000; // Continue polling
+  }, [lastOrderDetails]);
+
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
       orderID: orderId || "",
@@ -56,10 +75,19 @@ export default function OrderPage() {
     {
       skip: !orderId,
       // return it t0 60000 after finish testing
-      pollingInterval: 10000,
+      // Stop polling if order is closed or canceled
+      pollingInterval,
       refetchOnMountOrArgChange: true,
     },
   );
+
+  // Update state when orderDetails changes to trigger polling re-evaluation
+  useEffect(() => {
+    if (orderDetails) {
+      setLastOrderDetails(orderDetails);
+    }
+  }, [orderDetails]);
+
   const hasClosedStatus = orderDetails?.status?.some(
     (status) => status?.alias === "closed",
   );
@@ -73,7 +101,6 @@ export default function OrderPage() {
     setIsSplitBillParticipantsBottomSheetOpen,
   ] = useState(false);
 
-
   // Get restaurant subdomain for refetching
   const restaurantSubdomain = restaurant?.subdomain;
   const { refetch: refetchRestaurantDetails } = useGetRestaurantDetailsQuery(
@@ -293,7 +320,7 @@ export default function OrderPage() {
             </div>
 
             {isInProgress ? (
-              <Flex gap="small" wrap justify="center">
+              <Flex gap="small" wrap justify="center" style={{ marginTop: 16 }}>
                 <Tooltip title="3 done / 3 in progress / 4 to do">
                   <div
                     style={{