import { Head } from "@inertiajs/react"; import { useState } from "react"; import { useI18n } from "@/lib/i18n"; type Props = { payment: { reference: string; status: string; amount: number; currency: string; expires_at: string | null; plan: string | null; }; statuses: string[]; }; function csrf(): string | undefined { return document.querySelector("meta[name=csrf-token]")?.content; } export default function SandboxCheckout({ payment, statuses }: Props) { const { t } = useI18n(); const [status, setStatus] = useState(payment.status); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const simulate = async (nextStatus: string) => { setBusy(true); setError(""); try { const response = await fetch(`/subscription/sandbox/${encodeURIComponent(payment.reference)}/simulate`, { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", ...(csrf() ? { "X-CSRF-TOKEN": csrf() as string } : {}), }, body: JSON.stringify({ status: nextStatus }), }); const data = await response.json().catch(() => ({})); if (!response.ok) throw new Error(data.message ?? "Sandbox payment gagal diproses."); const resultingStatus = String(data.payment?.status ?? nextStatus); setStatus(resultingStatus); // Both provider states are normalized to `paid` by PaymentService. // Redirect based on the server result, not the selected simulator label. if (resultingStatus === "paid") { window.setTimeout(() => { window.location.href = `/pricing?payment=success&reference=${encodeURIComponent(payment.reference)}`; }, 500); } } catch (e) { setError(e instanceof Error ? e.message : "Sandbox payment gagal diproses."); } finally { setBusy(false); } }; return ( <>

{t("Developer Sandbox")}

{t("Simulate NOWPayments lifecycle")}

{t("Tidak ada cryptocurrency yang dikirim. Simulator ini melewati signature verification dan payment service yang sama dengan webhook.")}

{status}

{t("Reference")}

{payment.reference}

{t("Plan")}

{payment.plan ?? "Pro"}

{t("Amount")}

{new Intl.NumberFormat("en-US", { style: "currency", currency: payment.currency }).format(payment.amount)}

{t("Expires")}

{payment.expires_at ?? "—"}

{error &&

{error}

}

{t("Simulate provider status")}

{statuses.map((value) => ( ))}

{t("Gunakan")}{t("confirmed")} {t("atau")}{t("finished")} {t("untuk mensimulasikan pembayaran selesai dan mengaktifkan Pro. Gunakan status lain untuk memeriksa pending/failure/expiry/refund handling.")}

); }