sarlink-portal/components/billing/cancel-topup-button.tsx

"use client";

import { Loader2, Trash2 } from "lucide-react";
import { useRouter } from "next/navigation";
import React from "react";
import { toast } from "sonner";
import { cancelTopup } from "@/actions/payment";
import { tryCatch } from "@/utils/tryCatch";
import { Button } from "../ui/button";

export default function CancelTopupButton({ topupId }: { topupId: string }) {
	const router = useRouter();
	const [loading, setLoading] = React.useState(false);
	return (
		<Button
			onClick={async () => {
				setLoading(true);
				const [error, topup] = await tryCatch(cancelTopup({ id: topupId }));
				if (error) {
					toast.error(error.message);
					setLoading(false);
				} else {
					toast.success("Topup cancelled successfully!", {
						description: `Your topup of ${topup?.amount} MVR has been cancelled.`,
						closeButton: true,
					});
					router.replace("/top-ups");
				}
			}}
			disabled={loading}
			variant={"destructive"}
		>
			Cancel Topup
			{loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
		</Button>
	);
}