"use client"; import { BadgeDollarSign, Clipboard, ClipboardCheck, Loader2, } from "lucide-react"; import { useActionState, useEffect, useState } from "react"; import { toast } from "sonner"; import { type VerifyTopupPaymentState, verifyTopupPayment } from "@/actions/payment"; import { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow, } from "@/components/ui/table"; import type { Topup } from "@/lib/backend-types"; import { Button } from "./ui/button"; const initialState: VerifyTopupPaymentState = { message: "", success: false, fieldErrors: {}, }; export default function TopupToPay({ topup, disabled }: { topup?: Topup, disabled?: boolean }) { const [state, formAction, isPending] = useActionState(verifyTopupPayment, initialState); // Handle toast notifications based on state changes useEffect(() => { if (state.success && state.message) { toast.success("Topup successful!", { closeButton: true, description: state.transaction ? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.` : state.message, }); } else if (!state.success && state.message && state.message !== initialState.message) { toast.error("Topup Payment Verification Failed", { closeButton: true, description: state.message, }); } }, [state]); return (

Please send the following amount to the payment address

{topup?.paid ? ( ) : (
)}
Topup created at {new Date(topup?.created_at ?? "").toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric", minute: "2-digit", hour: "2-digit", second: "2-digit", })} Topup expires at {new Date(topup?.expires_at ?? "").toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric", minute: "2-digit", hour: "2-digit", second: "2-digit", })} MIB Reference {topup?.mib_reference ? topup.mib_reference : "N/A"} Total Due {topup?.amount?.toFixed(2)}
); } function AccountInfomation({ accountNo, accName, }: { accountNo: string; accName: string; }) { const [accNo, setAccNo] = useState(false); return (
Account Information
Account Name
{accName}

Account No

{accountNo}
); }