refactor: update axios client import, enhance device and payment handling, and add cancel payment button component

components/billing/cancel-payment-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { cancelPayment } from "@/actions/payment";
+import { tryCatch } from "@/utils/tryCatch";
+import { Loader2, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { toast } from "sonner";
+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, _] = await tryCatch(cancelPayment({ id: paymentId }));
+				if (error) {
+					toast.error(error.message);
+					setLoading(false);
+				} else {
+					router.replace("/devices");
+				}
+			}}
+			disabled={loading}
+			variant={"destructive"}
+		>
+			Cancel Payment
+			{loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
+		</Button>
+	);
+}