ok

src/App.js

@@ -211,7 +211,7 @@ function App() {
       // Check current permission
       const searchParams = new URLSearchParams(location.search);
       let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string
-      
+
       if (permission !== "granted" && searchModal == '') {
         setModal("req_notification");
       }
@@ -275,9 +275,9 @@ function App() {
       socket.off("signout-guest-session");
     };
   }, [socket, shopId]);
-  
-  async function checkIfStillViewingOtherTransaction(){
-    
+
+  async function checkIfStillViewingOtherTransaction() {
+
     console.log("transaction notification");
     console.log(modalContent);
 
@@ -285,7 +285,7 @@ function App() {
     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
@@ -305,7 +305,7 @@ function App() {
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
       }
-  
+
       // Show browser notification
       let permission = Notification.permission;
       if (permission !== "granted") return;
@@ -316,14 +316,14 @@ 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);
+        setModal("new_transaction", data);
       }
     });
 
@@ -333,7 +333,7 @@ function App() {
       socket.off("transaction_canceled");
     };
   }, [socket, shopId, location]);  // Ensure location is in the dependencies to respond to changes in the URL
-  
+
   useEffect(() => {
     if (user.cafeId != null && user.cafeId !== shopId) {
       // Preserve existing query parameters
@@ -344,14 +344,14 @@ function App() {
     }
 
   }, [user, shopId]);
-  
+
   function handleMoveToTransaction(direction, from) {
     console.log(direction);
     console.log(from);
 
     // 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') {
@@ -365,18 +365,18 @@ function App() {
         ? transactionList.current[currentIndex - 1].transactionId
         : from; // If already at the beginning, stay on the current transactionId
     }
-  
+
     // Log the new transactionId
     console.log('New Transaction ID:', newTransactionId);
-  
+
     // Update the URL with the new transactionId using navigate
     navigate(`?transactionId=${newTransactionId}`, { replace: true });
-  
+
     // Optionally, update state or perform further actions based on the new transactionId
     // Example:
     // setModalContent({ cafeId: shopId, transactionId: newTransactionId });
   }
-  
+
 
   const handleModalFromURL = () => {
     const queryParams = new URLSearchParams(location.search);
@@ -651,11 +651,12 @@ function App() {
         </Routes>
       </header>
       <Modal
+        user={user}
         shop={shop}
         isOpen={isModalOpen}
         modalContent={modalContent}
         handleMoveToTransaction={handleMoveToTransaction}
-        welcomePageConfig={shop.welcomePageConfig} 
+        welcomePageConfig={shop.welcomePageConfig}
         onClose={closeModal}
         setModal={setModal}
       />