sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-06 18:19:33 +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

77
actions/payment.ts
View File

@ -225,24 +225,71 @@ export async function verifyPayment({ id, method }: UpdatePayment) {
return handleApiResponse<Payment>(response, "updatePayment");
}
type UpdateTopupPayment = {
id: string;
};
export async function verifyTopupPayment({ id }: UpdateTopupPayment) {
export type VerifyTopupPaymentState = {
transaction?: {
sourceBank: string;
trxDate: string;
};
message: string;
success: boolean;
fieldErrors: Record<string, string>;
payload?: FormData;
}
export async function verifyTopupPayment(
_prevState: VerifyTopupPaymentState,
formData: FormData
): Promise<VerifyTopupPaymentState> {
const session = await getServerSession(authOptions);
const response = await fetch(
`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}/verify/`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${session?.apiToken}`,
// Get the topup ID from the form data or use a hidden input
const topupId = formData.get('topupId') as string;
if (!topupId) {
return {
message: "Topup ID is required",
success: false,
fieldErrors: { topupId: "Topup ID is required" },
};
}
try {
const response = await fetch(
`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${topupId}/verify/`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${session?.apiToken}`,
},
},
},
);
revalidatePath("/top-ups/[topupId]", "page");
return handleApiResponse<TopupResponse>(response, "verifyTopupPayment");
);
const result = await handleApiResponse<TopupResponse>(response, "verifyTopupPayment");
revalidatePath("/top-ups/[topupId]", "page");
return {
message: result.message || "Topup payment verified successfully",
success: true,
fieldErrors: {},
transaction: result.transaction,
};
} catch (error: unknown) {
if (error instanceof Error) {
return {
message: error.message || "Please check your payment details and try again.",
success: false,
fieldErrors: {},
};
} else {
return {
message: "Topup verification failed.",
success: false,
fieldErrors: {},
};
}
}
}
export async function getProfile() {

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>