ok

src/App.js

@@ -204,11 +204,6 @@ function App() {
       setModal("transaction_failed", data);
     });
 
-    socket.on("transaction_canceled", async (data) => {
-      console.log("transaction notification");
-      setModal("transaction_canceled", data);
-    });
-
 
     const checkNotifications = () => {
       let permission = Notification.permission;
@@ -280,24 +275,34 @@ function App() {
       socket.off("signout-guest-session");
     };
   }, [socket, shopId]);
+  
+  async function checkIfStillViewingOtherTransaction(){
+    
+    console.log("transaction notification");
+    console.log(modalContent);
+
+    let response;
+    response = await getTransactionsFromCafe(shopId, 0, true);
+    transactionList.current = response;
+    console.log(response);
+    
+    // Get current URL's search parameters inside the socket event handler
+    const searchParams = new URLSearchParams(location.search);
+    let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
+    console.log(transaction_info);  // Log the updated transaction_info
+
+    // If transaction_info is an empty string, set the modal
+    if (transaction_info == '') return false;
+    else return true;
+  }
+
   useEffect(() => {
     // This will ensure that searchParams and transaction_info get updated on each render
     socket.on("transaction_created", async (data) => {
       console.log("transaction notification");
-      console.log(modalContent);
-  
-      let response;
-      response = await getTransactionsFromCafe(shopId, 0, true);
-      console.log(data);
-      transactionList.current = response;
-  
-      // Get current URL's search parameters inside the socket event handler
-      const searchParams = new URLSearchParams(location.search);
-      let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
-      console.log(transaction_info);  // Log the updated transaction_info
-  
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
       // If transaction_info is an empty string, set the modal
-      if (transaction_info === '') {
+      if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
       }
   
@@ -312,9 +317,20 @@ function App() {
       });
     });
   
+    socket.on("transaction_canceled", async (data) => {
+      console.log("transaction notification");
+      
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      // If transaction_info is an empty string, set the modal
+      if (!isViewingOtherTransaction) {
+      setModal("new_transaction", data);
+      }
+    });
+
     // Clean up the socket event listener on unmount or when dependencies change
     return () => {
       socket.off("transaction_created");
+      socket.off("transaction_canceled");
     };
   }, [socket, shopId, location]);  // Ensure location is in the dependencies to respond to changes in the URL