sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-07 12:46:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: enhance topup payment verification with improved state management and error handling 🔨

Browse Source
This commit is contained in:
i701
2025-07-05 15:34:02 +05:00
parent f6e60c0188
commit 013befa433
2 changed files with 108 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
components/topup-to-pay.tsx
View File

@ -5,9 +5,9 @@ import {
ClipboardCheck,
Loader2,
} from "lucide-react";
import { useState } from "react";
import { useActionState, useEffect, useState } from "react";
import { toast } from "sonner";
import { verifyTopupPayment } from "@/actions/payment";
import { type VerifyTopupPaymentState, verifyTopupPayment } from "@/actions/payment";
import {
Table,
TableBody,
@ -19,9 +19,32 @@ 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 [verifyingTransferPayment, setVerifyingTransferPayment] =
useState(false);
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 (
<div className="w-full">
@ -45,45 +68,25 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
</Button>
) : (
<div className="flex flex-col gap-2">
<Button
disabled={disabled || verifyingTransferPayment}
onClick={async () => {
setVerifyingTransferPayment(true);
try {
const response = await verifyTopupPayment({
id: topup?.id ?? "",
});
toast.success("Topup successful!", {
closeButton: true,
description:
`Your topup payment has been verified successfully using ${response.transaction?.sourceBank} bank transfer on ${response.transaction?.trxDate}.` || response.message,
});
} catch (error: unknown) {
if (error instanceof Error) {
toast.error("Topup Payment Verification Failed", {
closeButton: true,
description:
error.message || "Please check your payment details and try again.",
});
} else {
toast.error("Topup verification failed.");
}
} finally {
setVerifyingTransferPayment(false);
}
}}
size={"lg"}
className="mb-4"
>
{verifyingTransferPayment
? "Processing payment..."
: "I have paid"}
{verifyingTransferPayment ? (
<Loader2 className="animate-spin" />
) : (
<BadgeDollarSign />
)}
</Button>
<form action={formAction}>
<input type="hidden" name="topupId" value={topup?.id ?? ""} />
<Button
disabled={disabled || isPending}
type="submit"
size={"lg"}
className="mb-4"
>
{isPending
? "Processing payment..."
: "I have paid"}
{isPending ? (
<Loader2 className="animate-spin" />
) : (
<BadgeDollarSign />
)}
</Button>
</form>
</div>
)}
</div>