import React, { useState, useEffect } from 'react'; import { Head, Link } from '@inertiajs/react'; import PortalLayout from '@/layouts/portal-layout'; import { CheckCircle2, Clock, XCircle, HeartHandshake, RotateCw, FlaskConical, TriangleAlert, } from 'lucide-react'; import '../../../css/alumni-home.css'; interface StatusProps { donation: { // id TIDAK ada — hanya access_token yang dikirim dari server access_token: string; payment_status: string; amount: number | string; program_name: string; paid_at?: string | null; }; isSandbox?: boolean; } export default function DonationStatusPage({ donation, isSandbox = false, }: StatusProps) { const [currentStatus, setCurrentStatus] = useState(donation.payment_status); const [polling, setPolling] = useState( donation.payment_status === 'PENDING_PAYMENT' || donation.payment_status === 'CREATED', ); const [simLoading, setSimLoading] = useState(false); const [simMessage, setSimMessage] = useState(''); useEffect(() => { if (!polling) return; const interval = setInterval(async () => { try { // Polling pakai access_token — id integer tidak pernah dikirim ke browser const res = await fetch( `/api/v1/alumni-bergerak/donations/${donation.access_token}/status`, ); const json = await res.json(); if (json.payment_status) { setCurrentStatus(json.payment_status); if ( ['PAID', 'FAILED', 'EXPIRED'].includes( json.payment_status, ) ) { setPolling(false); } } } catch { // Ignore transient polling error } }, 3500); return () => clearInterval(interval); }, [polling, donation.access_token]); // Simulasi webhook sandbox — semua via access_token, tidak ada id const simulateStatus = async (status: 'PAID' | 'EXPIRED' | 'FAILED') => { setSimLoading(true); setSimMessage(''); try { const csrfMeta = document.querySelector( 'meta[name="csrf-token"]', ); const res = await fetch( `/dev/simulate-payment/${donation.access_token}?status=${status}`, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrfMeta?.content ?? '', 'Content-Type': 'application/json', }, }, ); const json = await res.json(); setCurrentStatus(json.payment_status ?? status); setPolling(false); setSimMessage( json.message ?? `Status berhasil diubah ke ${status}`, ); } catch { setSimMessage( 'Gagal mengirim simulasi. Pastikan dev server berjalan.', ); } finally { setSimLoading(false); } }; const isPaid = currentStatus === 'PAID'; const isPending = currentStatus === 'PENDING_PAYMENT' || currentStatus === 'CREATED'; return (
{/* SANDBOX BADGE */} {isSandbox && (
Mode Sandbox / Testing — transaksi ini{' '} tidak memotong uang asli.
)}
{isPaid ? (
) : isPending ? (
) : (
)}
STATUS TRANSAKSI{' '} {isSandbox ? '(SANDBOX)' : 'RESMI'}

{isPaid ? 'Pembayaran Donasi Berhasil!' : isPending ? 'Menunggu Konfirmasi Pembayaran' : 'Pembayaran Gagal / Kedaluwarsa'}

{isPaid ? 'Terima kasih atas kontribusi Anda untuk kemajuan Fakultas Teknik Universitas Majalengka.' : isPending ? 'Transaksi sedang diproses. Halaman ini memperbarui status secara otomatis.' : 'Transaksi donasi tidak dapat diselesaikan atau telah melewati batas waktu pembayaran.'}

{/* Rincian Transaksi */}
Program {donation.program_name}
Nominal Donasi Rp{' '} {Number(donation.amount).toLocaleString( 'id-ID', )}
Status {isPaid ? ( ) : isPending ? ( ) : null} {currentStatus}
{/* SANDBOX DEV PANEL — hanya tampil di mode sandbox + status masih pending */} {isSandbox && isPending && (
Panel Simulasi Sandbox

Simulasikan respons webhook Mayar tanpa bayar asli. Hanya aktif saat{' '} APP_ENV=local .

{simMessage && (
✓ {simMessage}
)}

Panel ini tidak tampil di production.

)} {/* Navigasi Balik */}
Kembali ke Alumni Bergerak Ke Halaman Utama
); }