ok
This commit is contained in:
everythingonblack
@@ -9,6 +9,7 @@ import {
|
||||
getTransactionsFromCafe,
|
||||
} from "../helpers/transactionHelpers";
|
||||
import { getTables } from "../helpers/tableHelper";
|
||||
import ButtonWithReplica from "../components/ButtonWithReplica";
|
||||
import TableCanvas from "../components/TableCanvas";
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
@@ -16,90 +17,79 @@ import utc from 'dayjs/plugin/utc';
|
||||
import timezone from 'dayjs/plugin/timezone';
|
||||
|
||||
|
||||
export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType }) {
|
||||
export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl }) {
|
||||
const { shopIdentifier, tableId } = useParams();
|
||||
if (sendParam) sendParam({ shopIdentifier, tableId });
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
|
||||
const [tables, setTables] = useState([]);
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
const [transactions, setTransactions] = useState([]);
|
||||
const [myTransactions, setMyTransactions] = useState([]);
|
||||
const [isPaymentLoading, setIsPaymentLoading] = useState(false);
|
||||
const [isPaymentOpen, setIsPaymentOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTransactions = async () => {
|
||||
try {
|
||||
let response;
|
||||
response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
|
||||
console.log(response)
|
||||
if(response) {
|
||||
setTransactions(response);
|
||||
return;
|
||||
if (deviceType == 'clerk') {
|
||||
try {
|
||||
let response;
|
||||
response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
|
||||
console.log(response)
|
||||
if (response) {
|
||||
setTransactions(response);
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
}
|
||||
try {
|
||||
let response;
|
||||
response = await getMyTransactions(shopId || propsShopId, 5);
|
||||
console.log(response)
|
||||
const combinedTransactions = [];
|
||||
else {
|
||||
try {
|
||||
let response;
|
||||
response = await getMyTransactions(shopId || propsShopId, 5);
|
||||
console.log(response)
|
||||
const combinedTransactions = [];
|
||||
|
||||
response.forEach(cafe => {
|
||||
response.forEach(cafe => {
|
||||
const { cafeId, name: cafeName, transactions } = cafe;
|
||||
|
||||
transactions.forEach(transaction => {
|
||||
const newTransaction = {
|
||||
...transaction,
|
||||
cafeId,
|
||||
cafeName,
|
||||
DetailedTransactions: transaction.detailedTransactions // Rename here
|
||||
};
|
||||
delete newTransaction.detailedTransactions; // Remove the old key
|
||||
combinedTransactions.push(newTransaction);
|
||||
});
|
||||
});
|
||||
|
||||
// combinedTransactions now contains all transactions with cafe info and renamed key
|
||||
console.log(combinedTransactions)
|
||||
|
||||
// combinedTransactions now contains all transactions with cafe info
|
||||
setTransactions(combinedTransactions);
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
transactions.forEach(transaction => {
|
||||
const newTransaction = {
|
||||
...transaction,
|
||||
cafeId,
|
||||
cafeName,
|
||||
DetailedTransactions: transaction.detailedTransactions // Rename here
|
||||
};
|
||||
delete newTransaction.detailedTransactions; // Remove the old key
|
||||
combinedTransactions.push(newTransaction);
|
||||
});
|
||||
});
|
||||
|
||||
// combinedTransactions now contains all transactions with cafe info and renamed key
|
||||
console.log(combinedTransactions)
|
||||
|
||||
// combinedTransactions now contains all transactions with cafe info
|
||||
setTransactions(combinedTransactions);
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchTransactions();
|
||||
}, [shopId || propsShopId]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const fetchedTables = await getTables(shopId || propsShopId);
|
||||
setTables(fetchedTables);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tables:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [shopId || propsShopId]);
|
||||
}, [deviceType]);
|
||||
|
||||
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) => {
|
||||
return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const calculateAllTransactionsTotal = (transactions) => {
|
||||
return transactions.reduce((grandTotal, transaction) => {
|
||||
return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleConfirm = async (transactionId) => {
|
||||
setIsPaymentLoading(true);
|
||||
@@ -146,8 +136,8 @@ const calculateAllTransactionsTotal = (transactions) => {
|
||||
return (
|
||||
<div className={styles.Transactions}>
|
||||
<div style={{ marginTop: "30px" }}></div>
|
||||
<h2 className={styles["Transactions-title"]}>Daftar transaksi
|
||||
Rp {calculateAllTransactionsTotal(transactions)} </h2>
|
||||
<h2 className={styles["Transactions-title"]}>Daftar transaksi
|
||||
Rp {calculateAllTransactionsTotal(transactions)} </h2>
|
||||
<div style={{ marginTop: "30px" }}></div>
|
||||
{/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}
|
||||
<div className={styles.TransactionListContainer} style={{ padding: '0 20px 0 20px' }}>
|
||||
@@ -156,9 +146,7 @@ const calculateAllTransactionsTotal = (transactions) => {
|
||||
<div
|
||||
key={transaction.transactionId}
|
||||
className={styles.RoundedRectangle}
|
||||
onClick={() =>
|
||||
setSelectedTable(transaction.Table || { tableId: 0 })
|
||||
}
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
|
||||
<div className={styles['receipt-header']}>
|
||||
@@ -192,19 +180,34 @@ const calculateAllTransactionsTotal = (transactions) => {
|
||||
|
||||
|
||||
<div className={styles['receipt-info']}>
|
||||
<h3>{transaction.confirmed === 1 ? (
|
||||
"Silahkan cek pembayaran"
|
||||
) : transaction.confirmed === -1 ? (
|
||||
"Dibatalkan oleh kasir"
|
||||
) : transaction.confirmed === -2 ? (
|
||||
"Dibatalkan oleh pelanggan"
|
||||
) : transaction.confirmed === 2 ? (
|
||||
"Sedang diproses"
|
||||
) : transaction.confirmed === 3 ? (
|
||||
"Transaction success"
|
||||
) : (
|
||||
"Silahkan cek ketersediaan"
|
||||
)}</h3>
|
||||
{deviceType == 'clerk' ?
|
||||
<h3>{transaction.confirmed === 1 ? (
|
||||
"Silahkan Cek Pembayaran"
|
||||
) : transaction.confirmed === -1 ? (
|
||||
"Dibatalkan Oleh Kasir"
|
||||
) : transaction.confirmed === -2 ? (
|
||||
"Dibatalkan Oleh Pelanggan"
|
||||
) : transaction.confirmed === 2 ? (
|
||||
"Sedang Diproses"
|
||||
) : transaction.confirmed === 3 ? (
|
||||
"Transaksi Sukses"
|
||||
) : (
|
||||
"Silahkan Cek Ketersediaan"
|
||||
)}</h3>
|
||||
:
|
||||
<h3>{transaction.confirmed === 1 ? (
|
||||
"Silahkan Bayar Dengan QRIS"
|
||||
) : transaction.confirmed === -1 ? (
|
||||
"Dibatalkan Oleh Kasir"
|
||||
) : transaction.confirmed === -2 ? (
|
||||
"Dibatalkan Oleh Pelanggan"
|
||||
) : transaction.confirmed === 2 ? (
|
||||
"Sedang diproses"
|
||||
) : transaction.confirmed === 3 ? (
|
||||
"Transaksi Sukses"
|
||||
) : (
|
||||
"Memeriksa Ketersediaan "
|
||||
)}</h3>}
|
||||
|
||||
<p>Transaction ID: {transaction.transactionId}</p>
|
||||
<p>Payment Type: {transaction.payment_type}</p>
|
||||
@@ -230,7 +233,7 @@ const calculateAllTransactionsTotal = (transactions) => {
|
||||
<ul>
|
||||
{transaction.DetailedTransactions.map((detail) => (
|
||||
<li key={detail.detailedTransactionId}>
|
||||
<span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
|
||||
<span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
|
||||
${detail.promoPrice ? detail.promoPrice : detail.price}`}
|
||||
</li>
|
||||
))}
|
||||
@@ -266,60 +269,95 @@ const calculateAllTransactionsTotal = (transactions) => {
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.TotalContainer}>
|
||||
{(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) ||
|
||||
(deviceType == 'guestDevice' && (transaction.confirmed == 0))&&
|
||||
<button
|
||||
className={styles.PayButton}
|
||||
onClick={() => handleConfirm(transaction.transactionId)}
|
||||
disabled={isPaymentLoading}
|
||||
>
|
||||
{deviceType === "clerk" ? (
|
||||
isPaymentLoading ? (
|
||||
<ColorRing height="50" width="50" color="white" />
|
||||
) : transaction.confirmed === 1 ? (
|
||||
"Konfirmasi Telah Bayar"
|
||||
) : transaction.confirmed === 2 ? (
|
||||
"Confirm item is ready"
|
||||
) : (
|
||||
"Confirm availability"
|
||||
)
|
||||
) :
|
||||
isPaymentLoading ? (
|
||||
<ColorRing height="50" width="50" color="white" />
|
||||
) : (
|
||||
"Transaction success"
|
||||
)}
|
||||
|
||||
</button>
|
||||
}
|
||||
|
||||
{transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
|
||||
<ButtonWithReplica
|
||||
paymentUrl={paymentUrl}
|
||||
price={
|
||||
"Rp" + calculateTotalPrice(transaction.DetailedTransactions)
|
||||
}
|
||||
disabled={isPaymentLoading}
|
||||
isPaymentLoading={isPaymentLoading}
|
||||
handleClick={() => handleConfirm(transaction.transactionId)}
|
||||
Open={() => setIsPaymentOpen(transaction.transactionId)}
|
||||
isPaymentOpen={isPaymentOpen == transaction.transactionId}
|
||||
>
|
||||
{
|
||||
isPaymentLoading ? null : isPaymentOpen == transaction.transactionId ? (
|
||||
transaction.paymentClaimed ? (
|
||||
<>
|
||||
<div style={{ position: 'absolute', left: '15px', top: '9px' }}>
|
||||
<ColorRing height="20" width="20" className={styles['receipt-logo']} />
|
||||
</div> Menunggu konfirmasi
|
||||
</>
|
||||
) : 'Klaim telah bayar'
|
||||
) : 'Tampilkan QR'
|
||||
}
|
||||
|
||||
</ButtonWithReplica>
|
||||
}
|
||||
</div>
|
||||
|
||||
{transaction.payment_type == 'cash' ?
|
||||
<button
|
||||
className={styles.PayButton}
|
||||
onClick={() => handleConfirm(transaction.transactionId)}
|
||||
onClick={() => handleDecline(transaction.transactionId)}
|
||||
disabled={
|
||||
isPaymentLoading || // Disable if loading
|
||||
(deviceType === "clerk" &&
|
||||
transaction.confirmed !== 1 &&
|
||||
transaction.confirmed !== 2 &&
|
||||
transaction.confirmed !== 0) || // Disable for clerk when not Confirm has paid, Confirm item is ready, or Confirm availability
|
||||
(deviceType !== "clerk" &&
|
||||
transaction.confirmed !== 1 &&
|
||||
transaction.paymentClaimed) || // Disable for buyer when not Claim has paid
|
||||
transaction.confirmed === 3 || // Disable if Transaction success
|
||||
transaction.confirmed === -1 || // Disable if Declined
|
||||
transaction.confirmed === -2 || // Disable if Canceled
|
||||
transaction.confirmed === 2 || // Disable if In process
|
||||
(transaction.confirmed === 1 && transaction.paymentClaimed) // Disable if verifying payment
|
||||
}
|
||||
transaction.confirmed === -1 ||
|
||||
transaction.confirmed === 3 ||
|
||||
isPaymentLoading
|
||||
} // Disable button if confirmed (1) or declined (-1) or
|
||||
>
|
||||
{deviceType === "clerk" ? (
|
||||
isPaymentLoading ? (
|
||||
<ColorRing height="50" width="50" color="white" />
|
||||
) : transaction.confirmed === 1 ? (
|
||||
"Confirm has paid"
|
||||
) : transaction.confirmed === -1 ? (
|
||||
"Declined"
|
||||
) : transaction.confirmed === -2 ? (
|
||||
"Canceled"
|
||||
) : transaction.confirmed === 2 ? (
|
||||
"Confirm item is ready"
|
||||
) : transaction.confirmed === 3 ? (
|
||||
"Transaction success"
|
||||
) : (
|
||||
"Confirm availability"
|
||||
)
|
||||
) : isPaymentLoading ? (
|
||||
{isPaymentLoading ? (
|
||||
<ColorRing height="50" width="50" color="white" />
|
||||
) : transaction.confirmed === 1 &&
|
||||
!transaction.paymentClaimed ? (
|
||||
"Claim has paid"
|
||||
) : transaction.confirmed === 1 &&
|
||||
transaction.paymentClaimed ? (
|
||||
"Verifying your payment"
|
||||
) : transaction.confirmed === -1 ? (
|
||||
"Declined"
|
||||
"Ditolak" // Display "Declined" if the transaction is declined (-1)
|
||||
) : transaction.confirmed === -2 ? (
|
||||
"Canceled"
|
||||
) : transaction.confirmed === 2 ? (
|
||||
"In process"
|
||||
"Dibatalkan" // Display "Declined" if the transaction is declined (-1)
|
||||
) : (
|
||||
"Transaction success"
|
||||
"Batalkan" // Display "Confirm availability" if the transaction is not confirmed (0)
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
:
|
||||
((transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
|
||||
<h5
|
||||
className={`${styles.DeclineButton}`}
|
||||
onClick={() =>
|
||||
isPaymentOpen
|
||||
? setIsPaymentOpen(false)
|
||||
: handleDecline(transaction.transactionId)
|
||||
}
|
||||
>
|
||||
{isPaymentOpen ? "kembali" : "batalkan"}
|
||||
</h5>
|
||||
)
|
||||
}
|
||||
{transaction.confirmed == 0 && (
|
||||
<h5
|
||||
className={styles.DeclineButton}
|
||||
|
||||
Reference in New Issue
Block a user