From 013befa43308f73ab1a0c4c9812dff620347bda8 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 5 Jul 2025 15:34:02 +0500
Subject: [PATCH] =?UTF-8?q?refactor:=20enhance=20topup=20payment=20verific?=
 =?UTF-8?q?ation=20with=20improved=20state=20management=20and=20error=20ha?=
 =?UTF-8?q?ndling=20=F0=9F=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 actions/payment.ts          | 77 +++++++++++++++++++++++++-------
 components/topup-to-pay.tsx | 89 +++++++++++++++++++------------------
 2 files changed, 108 insertions(+), 58 deletions(-)

diff --git a/actions/payment.ts b/actions/payment.ts
index fdc0544..3a3f478 100644
--- a/actions/payment.ts
+++ b/actions/payment.ts
@@ -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() {
diff --git a/components/topup-to-pay.tsx b/components/topup-to-pay.tsx
index e3d160d..65b51f9 100644
--- a/components/topup-to-pay.tsx
+++ b/components/topup-to-pay.tsx
@@ -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>