Merge remote-tracking branch 'origin/main'

src/pages/order/page.tsx

@@ -49,7 +49,10 @@ export default function OrderPage() {
   const hasRefetchedRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
-  const [isSplitBillParticipantsBottomSheetOpen, setIsSplitBillParticipantsBottomSheetOpen] = useState(false);
+  const [
+    isSplitBillParticipantsBottomSheetOpen,
+    setIsSplitBillParticipantsBottomSheetOpen,
+  ] = useState(false);
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
       orderID: orderId || "",
@@ -75,6 +78,10 @@ export default function OrderPage() {
     (status) => status?.alias === "closed",
   );
 
+  const hasCanceledByCustomerStatus = orderDetails?.status?.some(
+    (status) => status?.alias === "canceled_by_customer",
+  );
+
   // Reset refetch flag when orderId changes
   useEffect(() => {
     hasRefetchedRef.current = false;
@@ -508,7 +515,7 @@ export default function OrderPage() {
                       display: "flex",
                       flexDirection: "column",
                       marginBottom: 9,
-                      gap: 2  ,
+                      gap: 2,
                     }}
                   >
                     <ProText
@@ -539,8 +546,10 @@ export default function OrderPage() {
                 </>
               }
             >
-              <div className={styles.inviteToBill} 
-              onClick={() => setIsSplitBillParticipantsBottomSheetOpen(true)}>
+              <div
+                className={styles.inviteToBill}
+                onClick={() => setIsSplitBillParticipantsBottomSheetOpen(true)}
+              >
                 <Button
                   shape="circle"
                   iconPlacement="start"
@@ -662,24 +671,30 @@ export default function OrderPage() {
             onClose={() => setIsRateOrderOpen(false)}
           />
 
-          {!hasClosedStatus && <CancelOrderBottomSheet />}
+          {!hasClosedStatus ||
+            (hasCanceledByCustomerStatus && <CancelOrderBottomSheet />)}
         </Layout.Content>
-        {hasClosedStatus && (
-          <Layout.Footer className={styles.checkoutButtonContainer}>
-            <Button
-              type="primary"
-              shape="round"
-              className={styles.checkoutButton}
-              onClick={() => {
-                navigate(`/${restaurant?.subdomain}/menu`);
-              }}
-            >
-              {t("order.newOrder")}
-            </Button>
-          </Layout.Footer>
-        )}
+
+        {hasClosedStatus ||
+          (hasCanceledByCustomerStatus && (
+            <Layout.Footer className={styles.checkoutButtonContainer}>
+              <Button
+                type="primary"
+                shape="round"
+                className={styles.checkoutButton}
+                onClick={() => {
+                  navigate(`/${restaurant?.subdomain}/menu`);
+                }}
+              >
+                {t("order.newOrder")}
+              </Button>
+            </Layout.Footer>
+          ))}
       </Layout>
-      <SplitBillParticipantsBottomSheet isOpen={isSplitBillParticipantsBottomSheetOpen} onClose={() => setIsSplitBillParticipantsBottomSheetOpen(false)} />
+      <SplitBillParticipantsBottomSheet
+        isOpen={isSplitBillParticipantsBottomSheetOpen}
+        onClose={() => setIsSplitBillParticipantsBottomSheetOpen(false)}
+      />
     </>
   );
 }