This commit is contained in:
Vassshhh
2025-08-25 11:22:52 +07:00
parent aa75247bd0
commit 2ea7ce8bf3

View File

@@ -44,9 +44,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
const [activeAccordion, setActiveAccordion] = useState('QRIS'); const [activeAccordion, setActiveAccordion] = useState('QRIS');
let grandTotal = 0;
let tax = 0;
useEffect(() => { useEffect(() => {
if (!socketId) return; if (!socketId) return;
@@ -79,7 +76,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
const result = await response.json(); const result = await response.json();
if (response.ok) { if (response.ok) {
setValue(result.total_price);
if (result.pay_timeout && result.time_now) { if (result.pay_timeout && result.time_now) {
const timeout = new Date(result.pay_timeout).getTime(); const timeout = new Date(result.pay_timeout).getTime();
const now = new Date(result.time_now).getTime(); const now = new Date(result.time_now).getTime();
@@ -87,12 +83,9 @@ const Checkout = ({ socketId, transactionSuccess }) => {
setTimeLeft(timeout - now); setTimeLeft(timeout - now);
} }
setValue(result.total_price);
setQrisData(result.qris_dynamic || null); setQrisData(result.qris_dynamic || null);
setTransferData(result); setTransferData(result);
grandTotal = result.total_price;
tax = 0;
} else { } else {
alert(`Request gagal: ${result?.error || 'Unknown error'}`); alert(`Request gagal: ${result?.error || 'Unknown error'}`);
} }
@@ -155,6 +148,10 @@ const Checkout = ({ socketId, transactionSuccess }) => {
return () => clearInterval(interval); return () => clearInterval(interval);
}, [payTimeout]); }, [payTimeout]);
const subtotal = products.reduce((acc, item) => acc + (item.price || 0), 0);
const grandTotal = subtotal;
const tax = 0;
return ( return (
<div className={styles.page}> <div className={styles.page}>
<div className={styles.checkoutCard}> <div className={styles.checkoutCard}>
@@ -180,7 +177,7 @@ const Checkout = ({ socketId, transactionSuccess }) => {
<thead> <thead>
<tr> <tr>
<th>Item</th> <th>Item</th>
<th className={styles.textRight}>{grandTotal}</th> <th className={styles.textRight}>Subtotal</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -198,7 +195,7 @@ const Checkout = ({ socketId, transactionSuccess }) => {
<div className={styles.summary}> <div className={styles.summary}>
<div className={styles.summaryRow}> <div className={styles.summaryRow}>
<span>SUBTOTAL</span> <span>SUBTOTAL</span>
<span>Rp{grandTotal.toLocaleString('id-ID')}</span> <span>Rp{subtotal.toLocaleString('id-ID')}</span>
</div> </div>
<div className={styles.summaryRow}> <div className={styles.summaryRow}>
<span>TAX</span> <span>TAX</span>
@@ -206,7 +203,7 @@ const Checkout = ({ socketId, transactionSuccess }) => {
</div> </div>
<div className={styles.summaryTotal}> <div className={styles.summaryTotal}>
<span>Total</span> <span>Total</span>
<span>Rp{grandTotal.toLocaleString('id-ID')}</span> <span>Rp{value?.toLocaleString('id-ID')}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -227,14 +224,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
{activeAccordion === 'QRIS' && ( {activeAccordion === 'QRIS' && (
<div className={styles.accordionBody}> <div className={styles.accordionBody}>
<QRCodeCanvas value={qrisData} size={200} /> <QRCodeCanvas value={qrisData} size={200} />
{!transactionSuccess && (
<>
<h5 className="mt-3">Rp{value?.toLocaleString('id-ID')}</h5>
{timeLeft !== null && (
<p>Waktu tersisa: <strong>{formatTimeLeft(timeLeft)}</strong></p>
)}
</>
)}
{transactionSuccess && ( {transactionSuccess && (
<div className={styles.CheckmarkOverlay}> <div className={styles.CheckmarkOverlay}>
<svg className={styles.Checkmark} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> <svg className={styles.Checkmark} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
@@ -263,10 +252,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
<div><strong>Bank:</strong> {transferData?.bank_name}</div> <div><strong>Bank:</strong> {transferData?.bank_name}</div>
<div><strong>Account No:</strong> {transferData?.bank_account}</div> <div><strong>Account No:</strong> {transferData?.bank_account}</div>
<div><strong>Account Name:</strong> {transferData?.account_name}</div> <div><strong>Account Name:</strong> {transferData?.account_name}</div>
<div><strong>Total:</strong> Rp{value?.toLocaleString('id-ID')}</div>
{timeLeft !== null && (
<div><strong>Waktu Tersisa:</strong> {formatTimeLeft(timeLeft)}</div>
)}
</div> </div>
)} )}
</div> </div>