ok

src/Checkout.js

@@ -44,9 +44,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
 
   const [activeAccordion, setActiveAccordion] = useState('QRIS');
 
-  let grandTotal = 0;
-  let tax = 0;
-
   useEffect(() => {
     if (!socketId) return;
 
@@ -79,7 +76,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
 
         const result = await response.json();
         if (response.ok) {
-          setValue(result.total_price);
           if (result.pay_timeout && result.time_now) {
             const timeout = new Date(result.pay_timeout).getTime();
             const now = new Date(result.time_now).getTime();
@@ -87,12 +83,9 @@ const Checkout = ({ socketId, transactionSuccess }) => {
             setTimeLeft(timeout - now);
           }
 
+          setValue(result.total_price);
           setQrisData(result.qris_dynamic || null);
           setTransferData(result);
-
-          grandTotal = result.total_price;
-          tax = 0;
-
         } else {
           alert(`Request gagal: ${result?.error || 'Unknown error'}`);
         }
@@ -155,6 +148,10 @@ const Checkout = ({ socketId, transactionSuccess }) => {
     return () => clearInterval(interval);
   }, [payTimeout]);
 
+  const subtotal = products.reduce((acc, item) => acc + (item.price || 0), 0);
+  const grandTotal = subtotal;
+  const tax = 0;
+
   return (
     <div className={styles.page}>
       <div className={styles.checkoutCard}>
@@ -180,7 +177,7 @@ const Checkout = ({ socketId, transactionSuccess }) => {
             <thead>
               <tr>
                 <th>Item</th>
-                <th className={styles.textRight}>{grandTotal}</th>
+                <th className={styles.textRight}>Subtotal</th>
               </tr>
             </thead>
             <tbody>
@@ -198,7 +195,7 @@ const Checkout = ({ socketId, transactionSuccess }) => {
           <div className={styles.summary}>
             <div className={styles.summaryRow}>
               <span>SUBTOTAL</span>
-              <span>Rp{grandTotal.toLocaleString('id-ID')}</span>
+              <span>Rp{subtotal.toLocaleString('id-ID')}</span>
             </div>
             <div className={styles.summaryRow}>
               <span>TAX</span>
@@ -206,7 +203,7 @@ const Checkout = ({ socketId, transactionSuccess }) => {
             </div>
             <div className={styles.summaryTotal}>
               <span>Total</span>
-              <span>Rp{grandTotal.toLocaleString('id-ID')}</span>
+              <span>Rp{value?.toLocaleString('id-ID')}</span>
             </div>
           </div>
         </div>
@@ -227,14 +224,6 @@ const Checkout = ({ socketId, transactionSuccess }) => {
                   {activeAccordion === 'QRIS' && (
                     <div className={styles.accordionBody}>
                       <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 && (
                         <div className={styles.CheckmarkOverlay}>
                           <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>Account No:</strong> {transferData?.bank_account}</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>