This commit is contained in:
everythingonblack
2025-05-22 16:43:50 +07:00
parent b012517568
commit 69a07be3cd
5 changed files with 53 additions and 44 deletions

View File

@@ -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}

View File

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
// Disable console methods
// console.log = () => {};
// console.warn = () => {};
// console.error = () => {};
console.log = () => {};
console.warn = () => {};
console.error = () => {};
root.render(
<React.StrictMode>

View File

@@ -297,7 +297,6 @@ const LinktreePage = ({ user, setModal }) => {
Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
</div>
{getLocalStorage('auth') == null && (
<div className={styles.LoginForm}>
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
<label htmlFor="username" className={styles.usernameLabel}>---- Masuk -----------------------------</label>
@@ -340,7 +339,6 @@ const LinktreePage = ({ user, setModal }) => {
</button>
</div>
</div>
)}
<div className={styles.footer}>
<div className={styles.footerLinks}>

View File

@@ -253,7 +253,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
: `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
}`}
</h2>
{transaction.notes != null && (
{transaction.notes != '' && (
<>
<div className={styles.NoteContainer}>
<span>Note :</span>

View File

@@ -18,7 +18,7 @@ import ButtonWithReplica from "../components/ButtonWithReplica";
dayjs.extend(utc);
dayjs.extend(timezone);
export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl, setModal }) {
export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl, setModal, newTransaction }) {
const { shopIdentifier, tableId } = useParams();
if (sendParam) sendParam({ shopIdentifier, tableId });
@@ -34,38 +34,38 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
}, [searchTerm, transactions]);
useEffect(() => {
const fetchTransactions = async () => {
try {
// response = await getMyTransactions(shopId || propsShopId, 5);
// setMyTransactions(response);
setLoading(true);
let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
setLoading(false);
if (response) setTransactions(response);
// response = await getMyTransactions(shopId || propsShopId, 5);
// setMyTransactions(response);
} catch (error) {
console.error("Error fetching transactions:", error);
}
};
fetchTransactions();
}, [deviceType]);
}, [deviceType, newTransaction]);
const calculateTotalPrice = (detailedTransactions) => {
return detailedTransactions.reduce((total, dt) => {
return total + dt.qty * (dt.promoPrice ? dt.promoPrice : dt.price);
}, 0);
};
const calculateAllTransactionsTotal = (transactions) => {
return transactions.reduce((grandTotal, transaction) => {
const calculateAllTransactionsTotal = (transactions) => {
return transactions
.filter(transaction => transaction.confirmed > 1) // Filter transactions where confirmed > 1
.reduce((grandTotal, transaction) => {
return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
}, 0);
};
};
const searchAndAggregateItems = (transactions, searchTerm) => {
if (!searchTerm.trim()) return [];
@@ -148,7 +148,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
return (
<div className={styles.Transactions}>
<h2 className={styles["Transactions-title"]}>
Daftar transaksi Rp {calculateAllTransactionsTotal(transactions)}
Transaksi selesai Rp {calculateAllTransactionsTotal(transactions)}
</h2>
<input