- {event.tickets.map((ticket) => (
+ {event.tickets.map((ticket) => {
+ const hasInsurance = insuranceSelections[ticket.id] || false;
+ const totalPrice = ticket.basePrice + (hasInsurance && ticket.insurancePrice ? ticket.insurancePrice : 0);
+
+ return (
{ticket.name}
@@ -182,16 +185,51 @@ export default function EventDetail() {
-
-
- {ticket.price}
+
+ {ticket.insurancePrice && (
+
toggleInsurance(ticket.id)}
+ >
+ {}}
+ className="w-5 h-5 accent-black brutal-border cursor-pointer"
+ />
+
+
+ )}
+
+
+
+ IDR {totalPrice.toLocaleString('id-ID')}
+
+
-
- ))}
+ )})}
)}
diff --git a/src/pages/Payment.tsx b/src/pages/Payment.tsx
new file mode 100644
index 0000000..1a61b8a
--- /dev/null
+++ b/src/pages/Payment.tsx
@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import QRCode from 'react-qr-code';
+import { ArrowLeft, CheckCircle2 } from 'lucide-react';
+
+export default function Payment() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const checkoutPayload = location.state?.checkoutPayload;
+ const [transactionId, setTransactionId] = useState('');
+ const [isPaid, setIsPaid] = useState(false);
+
+ useEffect(() => {
+ // Generate a mock Xendit Transaction ID when component mounts
+ if (checkoutPayload && !transactionId) {
+ const randomStr = Math.random().toString(36).substring(2, 10).toUpperCase();
+ setTransactionId(`XND-QRIS-${randomStr}`);
+ }
+ }, [checkoutPayload, transactionId]);
+
+ if (!checkoutPayload) {
+ return (
+
+
+
Invalid Payment Session
+
+
+
+ );
+ }
+
+ const handleSimulatePayment = () => {
+ setIsPaid(true);
+ setTimeout(() => {
+ navigate('/events');
+ }, 4000);
+ };
+
+ if (isPaid) {
+ return (
+
+
+
+
+
+
Payment Success!
+
Your ticket has been booked successfully. Redirecting...
+
+
Transaction ID
+
{transactionId}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {/* Header Xendit Mock */}
+
+
+
Merchant
+
SMART TICKET INC.
+
+
+ QRIS
+
+
+
+
+
+
Total Amount
+
+ IDR {checkoutPayload.totalPrice.toLocaleString('id-ID')}
+
+
TRX ID: {transactionId}
+
+
+
+
+ {transactionId ? (
+
+ ) : (
+
Loading QR...
+ )}
+
+
+
+
+
How to pay:
+
+ - Open your payment app (Gopay, OVO, BCA, dll).
+ - Scan the QR Code above.
+ - Check the details and amount.
+ - Enter your PIN to confirm payment.
+
+
+
+
+
+
+
+
+ );
+}