handle cancel case in order stepper

src/pages/order/page.tsx

@@ -37,7 +37,6 @@ import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet";
 import NewRateIcon from "components/Icons/order/NewRateIcon";
 import NoteIcon from "components/Icons/NoteIcon";
 import SuccessIcon from "components/Icons/SuccessIcon";
-import ProInputCard from "components/ProInputCard/ProInputCard";
 import { SplitBillParticipantsBottomSheet } from "./components/SplitBillParticipantsBottomSheet";
 
 export default function OrderPage() {
@@ -49,10 +48,6 @@ export default function OrderPage() {
   const hasRefetchedRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
-  const [
-    isSplitBillParticipantsBottomSheetOpen,
-    setIsSplitBillParticipantsBottomSheetOpen,
-  ] = useState(false);
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
       orderID: orderId || "",
@@ -65,6 +60,19 @@ export default function OrderPage() {
       refetchOnMountOrArgChange: true,
     },
   );
+  const hasClosedStatus = orderDetails?.status?.some(
+    (status) => status?.alias === "closed",
+  );
+
+  const hasCanceledByCustomerStatus = orderDetails?.status?.some(
+    (status) => status?.alias === "canceled_by_customer",
+  );
+
+  const [
+    isSplitBillParticipantsBottomSheetOpen,
+    setIsSplitBillParticipantsBottomSheetOpen,
+  ] = useState(false);
+
 
   // Get restaurant subdomain for refetching
   const restaurantSubdomain = restaurant?.subdomain;
@@ -74,13 +82,6 @@ export default function OrderPage() {
       skip: !restaurantSubdomain,
     },
   );
-  const hasClosedStatus = orderDetails?.status?.some(
-    (status) => status?.alias === "closed",
-  );
-
-  const hasCanceledByCustomerStatus = orderDetails?.status?.some(
-    (status) => status?.alias === "canceled_by_customer",
-  );
 
   // Reset refetch flag when orderId changes
   useEffect(() => {
@@ -90,7 +91,10 @@ export default function OrderPage() {
   // Refetch restaurant details when order status has alias "closed"
   useEffect(() => {
     if (orderDetails?.status && !hasRefetchedRef.current) {
-      if (hasClosedStatus && restaurantSubdomain) {
+      if (
+        (hasClosedStatus || hasCanceledByCustomerStatus) &&
+        restaurantSubdomain
+      ) {
         refetchRestaurantDetails();
         hasRefetchedRef.current = true;
       }
@@ -671,7 +675,7 @@ export default function OrderPage() {
             onClose={() => setIsRateOrderOpen(false)}
           />
 
-          {(!hasClosedStatus && !hasCanceledByCustomerStatus) && (
+          {!hasClosedStatus && !hasCanceledByCustomerStatus && (
             <CancelOrderBottomSheet />
           )}
         </Layout.Content>