diff --git a/app/(dashboard)/top-ups/[topupId]/page.tsx b/app/(dashboard)/top-ups/[topupId]/page.tsx index 62a8fd3..c981875 100644 --- a/app/(dashboard)/top-ups/[topupId]/page.tsx +++ b/app/(dashboard)/top-ups/[topupId]/page.tsx @@ -20,53 +20,62 @@ export default async function TopupPage({ return ; } - return (

Topup

- {!topup.is_expired && ( - - + ))} + {topup.status === "PENDING" && !topup.is_expired && ( + )} - {!topup.paid && ( - topup.is_expired ? ( + {!topup.paid && + (topup.is_expired ? ( - ) : ( + ) : topup.status === "PENDING" ? ( - ) - )} + ) : topup.status === "CANCELLED" ? ( + + ) : ( + "" + ))}
- {!topup.paid && ( - - )} + { + (!topup.paid && topup.status === "PENDING" && !topup.is_expired) && ( + + ) + }
-
+ ); } diff --git a/components/topup-to-pay.tsx b/components/topup-to-pay.tsx index 8c81780..012895d 100644 --- a/components/topup-to-pay.tsx +++ b/components/topup-to-pay.tsx @@ -7,7 +7,10 @@ import { } from "lucide-react"; import { useActionState, useEffect, useState } from "react"; import { toast } from "sonner"; -import { type VerifyTopupPaymentState, verifyTopupPayment } from "@/actions/payment"; +import { + type VerifyTopupPaymentState, + verifyTopupPayment, +} from "@/actions/payment"; import { Table, TableBody, @@ -19,15 +22,22 @@ import { 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); +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(() => { @@ -38,7 +48,11 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable ? `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) { + } else if ( + !state.success && + state.message && + state.message !== initialState.message + ) { toast.error("Topup Payment Verification Failed", { closeButton: true, description: state.message, @@ -69,16 +83,18 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable ) : (
- +
-
)} @@ -150,32 +165,43 @@ function AccountInfomation({ }) { const [accNo, setAccNo] = useState(false); return ( -
+
Account Information
-
+
Account Name
{accName}
-
-
+
+

Account No

{accountNo} +
-
);