diff --git a/src/App.js b/src/App.js index 894a56b..aeb3d6a 100644 --- a/src/App.js +++ b/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} /> {/*