ok
This commit is contained in:
63
src/App.js
63
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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user