From b9d8e56c3c112133abe229f67236d7385ca5cc1b Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sun, 6 Jul 2025 19:59:27 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20update=20cancelTopup=20API=20call=20to?=
 =?UTF-8?q?=20use=20PATCH=20method=20and=20enhance=20success=20message=20w?=
 =?UTF-8?q?ith=20topup=20details=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 actions/payment.ts                         | 14 +++-----------
 components/billing/cancel-topup-button.tsx |  8 +++++---
 components/topups-table.tsx                | 22 ++++++++++++----------
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/actions/payment.ts b/actions/payment.ts
index 6098869..9b0eef9 100644
--- a/actions/payment.ts
+++ b/actions/payment.ts
@@ -164,24 +164,16 @@ export async function getTopup({ id }: { id: string }) {
 export async function cancelTopup({ id }: { id: string }) {
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}/delete/`,
+		`${process.env.SARLINK_API_BASE_URL}/api/billing/topup/${id}/cancel/`,
 		{
-			method: "DELETE",
+			method: "PATCH",
 			headers: {
 				"Content-Type": "application/json",
 				Authorization: `Token ${session?.apiToken}`,
 			},
 		},
 	);
-	if (!response.ok) {
-		const errorData = (await response.json()) as ApiError;
-		const errorMessage =
-			errorData.message || errorData.detail || "An error occurred.";
-		const error = new Error(errorMessage);
-		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
-		throw error;
-	}
-	return { message: "Topup successfully canceled." };
+	return handleApiResponse<Topup>(response, "cancelTopup");
 }
 
 export async function cancelPayment({ id }: { id: string }) {
diff --git a/components/billing/cancel-topup-button.tsx b/components/billing/cancel-topup-button.tsx
index a6ca438..21f71b2 100644
--- a/components/billing/cancel-topup-button.tsx
+++ b/components/billing/cancel-topup-button.tsx
@@ -17,13 +17,15 @@ export default function CancelTopupButton({
     <Button
       onClick={async () => {
         setLoading(true);
-        const [error, x] = await tryCatch(cancelTopup({ id: topupId }));
-        console.log(x);
+        const [error, topup] = await tryCatch(cancelTopup({ id: topupId }));
         if (error) {
           toast.error(error.message);
           setLoading(false);
         } else {
-          toast.success("Topup cancelled successfully!")
+          toast.success("Topup cancelled successfully!", {
+            description: `Your topup of ${topup?.amount} MVR has been cancelled.`,
+            closeButton: true,
+          })
           router.replace("/top-ups");
         }
       }}
diff --git a/components/topups-table.tsx b/components/topups-table.tsx
index 739388e..dd5879c 100644
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -203,16 +203,18 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
 						View Details
 					</Button>
 				</Link>
-				<Badge
-					className={cn(
-						topup?.paid
-							? "text-green-500 bg-green-500/20"
-							: "text-yellow-500 bg-yellow-500/20",
-					)}
-					variant={topup.paid ? "outline" : "secondary"}
-				>
-					{topup.paid ? "Paid" : "Unpaid"}
-				</Badge>
+				{topup.status !== "CANCELLED" && (
+					<Badge
+						className={cn(
+							topup?.paid
+								? "text-green-500 bg-green-500/20"
+								: "text-yellow-500 bg-yellow-500/20",
+						)}
+						variant={topup.paid ? "outline" : "secondary"}
+					>
+						{topup.paid ? "Paid" : "Unpaid"}
+					</Badge>
+				)}
 			</div>
 			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
 				<div className="block sm:hidden">