ok

src/App.js

@@ -71,6 +71,8 @@ function App() {
   const [depth, setDepth] = useState(-1);
   const [queue, setQueue] = useState([]);
 
+  const [newTransaction, setNewTransaction] = useState({});
+
 
   const validTransactionStates = [
     'new_transaction',
@@ -104,9 +106,9 @@ function App() {
     const init = async () => {
       await checkLastTransaction();
     };
-  
+
     init(); // call the async function
-  
+
     const handleStorageChange = () => {
       calculateTotalsFromLocalStorage();
 
@@ -114,32 +116,32 @@ function App() {
         setLastTransaction(null);
       }
     };
-  
+
     window.addEventListener("localStorageUpdated", handleStorageChange);
-  
+
     return () => {
       window.removeEventListener("localStorageUpdated", handleStorageChange);
     };
   }, [shopId]);
-  
+
   const checkLastTransaction = async () => {
     const { totalCount, totalPrice } = calculateTotals(shopId);
     setTotalItemsCount(totalCount);
     setTotalPrice(totalPrice);
-  
+
     const lastTransactionStr = localStorage.getItem("lastTransaction");
-  
+
     if (!lastTransactionStr) return;
-  
+
     const lastTransaction = JSON.parse(lastTransactionStr);
     console.log(lastTransaction);
-  
+
     if (!lastTransaction || !lastTransaction.transactionId) {
       localStorage.removeItem("lastTransaction");
       return;
     }
-  
-      setModal('transaction_confirmed',{transactionId: lastTransaction.transactionId})
+
+    setModal('transaction_confirmed', { transactionId: lastTransaction.transactionId })
     const myLastTransaction = await checkIsMyTransaction(lastTransaction.transactionId);
     console.log(myLastTransaction)
     if (myLastTransaction.isMyTransaction) {
@@ -148,7 +150,7 @@ function App() {
       localStorage.removeItem("lastTransaction");
     }
   };
-  
+
 
   const handleSetParam = async ({ shopIdentifier, tableCode }) => {
     setShopIdentifier(shopIdentifier);
@@ -241,7 +243,7 @@ function App() {
     });
 
     socket.on("transaction_confirmed", async (data) => {
-      console.log( JSON.stringify(data));
+      console.log(JSON.stringify(data));
       setModal("transaction_confirmed", data);
 
       localStorage.setItem('cart', []);
@@ -341,7 +343,7 @@ function App() {
         setDeviceType("guestDevice");
       } else {
         console.log(data)
-        if(data.data.user.cafeId != null) navigate(`/${data.data.user.cafeIdentityName}`, { replace: true });
+        if (data.data.user.cafeId != null) navigate(`/${data.data.user.cafeIdentityName}`, { replace: true });
         setUser(data.data.user);
         if (data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
         if (
@@ -395,30 +397,32 @@ function App() {
     };
   }, [socket, shopId]);
 
-  async function checkIfStillViewingOtherTransaction() {
+  async function checkIfStillViewingOtherTransaction(data) {
 
     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(response[0].transactionId != transaction_info) transactionList.current = response;
+    
     let depthh = transactionList.current.findIndex(
       item => item.transactionId.toString() === transaction_info.toString()
     );
-    if(depthh == 0 && transaction_info.toString() != '') depthh = 1;
-    setDepth(depthh);
+
+    if (transaction_info != response[0].transactionId)
+      setDepth(depthh);
+    else setModal("new_transaction", data);
+
     console.log(transaction_info == response[0].transactionId)
     // If transaction_info is an empty string, set the modal
-    if (transaction_info.toString() == '' || transaction_info.toString() == response[0].transactionId) return false;
+    if (transaction_info.toString() == '') return false;
     else return true;
   }
 
@@ -426,12 +430,15 @@ function App() {
     // This will ensure that searchParams and transaction_info get updated on each render
     socket.on("transaction_created", async (data) => {
       console.log("transaction notification");
-      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      setNewTransaction(data);
+
+      if(!location.pathname.endsWith('/transactions')){
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction(data);
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
       }
-
+    }
       // Show browser notification
       let permission = Notification.permission;
       if (permission !== "granted") return;
@@ -446,12 +453,15 @@ function App() {
     socket.on("transaction_canceled", async (data) => {
       console.log("transaction notification");
 
-      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      setNewTransaction(data);
+      if(location.pathname != '/transactions'){
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction(data);
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
         navigate(`?transactionId=${data.transactionId}`, { replace: true });
       }
+      }
     });
 
     // Clean up the socket event listener on unmount or when dependencies change
@@ -478,7 +488,7 @@ function App() {
 
     // Find the current index based on the 'from' transactionId
     const currentIndex = transactionList.current.findIndex(item => item.transactionId == from);
-    
+
     // Determine the new transactionId based on the direction
     let newTransactionId;
     if (direction === 'next') {
@@ -489,7 +499,7 @@ function App() {
         : from; // If already at the end, stay on the current transactionId
     } else if (direction === 'previous') {
 
-    setDepth(currentIndex -1);
+      setDepth(currentIndex - 1);
       // If we're not at the first transaction, get the previous transactionId
       newTransactionId = currentIndex > 0
         ? transactionList.current[currentIndex - 1].transactionId
@@ -789,6 +799,7 @@ function App() {
                   deviceType={deviceType}
                   paymentUrl={shop.qrPayment}
                   setModal={setModal}
+                  newTransaction={newTransaction}
                 />
                 {/* <Footer
                   shopId={shopIdentifier}