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

"use client";

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

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