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.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 No
{accountNo}
+
{
+ setTimeout(() => {
+ setAccNo(true);
+ navigator.clipboard.writeText(accountNo);
+ }, 2000);
+ toast.success("Account number copied!");
+ setAccNo((prev) => !prev);
+ }}
+ className="mt-2 w-full"
+ variant={"secondary"}
+ >
+ {accNo ? (
+
+ Copy Account Number
+
+
+ ) : (
+
+ Copy Account Number
+
+
+ )}
+
-
{
- setTimeout(() => {
- setAccNo(true);
- navigator.clipboard.writeText(accountNo);
- }, 2000);
- toast.success("Account number copied!");
- setAccNo((prev) => !prev);
- }}
- variant={"link"}
- >
- {accNo ? : }
-
);