ok
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user