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>
  );
}