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

actions/payment.ts

@@ -24,7 +24,6 @@ export async function createPayment(data: NewPayment) {
 			body: JSON.stringify(data),
 		},
 	);
-
 	if (!response.ok) {
 		const errorData = await response.json();
 		// Throw an error with the message from the API
@@ -32,7 +31,7 @@ export async function createPayment(data: NewPayment) {
 	}
 	const payment = (await response.json()) as Payment;
 	revalidatePath("/devices");
-	redirect(`/payments/${payment.id}`);
+	return payment;
 }
 
 export async function getPayment({ id }: { id: string }) {
@@ -48,8 +47,13 @@ export async function getPayment({ id }: { id: string }) {
 		},
 	);
 
+	if (response.status === 404) {
+		throw new Error("Payment not found");
+	}
+
 	if (!response.ok) {
 		const errorData = await response.json();
+		console.log(errorData);
 		// Throw an error with the message from the API
 		throw new Error(errorData.message || "Something went wrong.");
 	}
@@ -59,7 +63,7 @@ export async function getPayment({ id }: { id: string }) {
 
 export async function getPayments() {
 	const session = await getServerSession(authOptions);
-	const respose = await fetch(
+	const response = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/`,
 		{
 			method: "GET",
@@ -69,10 +73,35 @@ export async function getPayments() {
 			},
 		},
 	);
-	const data = (await respose.json()) as ApiResponse<Payment>;
+	console.log("response statys", response.status);
+	if (response.status === 401) {
+		// Redirect to the signin page if the user is unauthorized
+		throw new Error("Unauthorized; redirect to /auth/signin");
+	}
+	const data = (await response.json()) as ApiResponse<Payment>;
 	return data;
 }
 
+export async function cancelPayment({ id }: { id: string }) {
+	const session = await getServerSession(authOptions);
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/${id}/delete/`,
+		{
+			method: "DELETE",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Token ${session?.apiToken}`,
+			},
+		},
+	);
+	if (response.status === 401) {
+		// Redirect to the signin page if the user is unauthorized
+		throw new Error("Unauthorized; redirect to /auth/signin");
+	}
+	// Since the response is 204 No Content, there's no JSON to parse
+	return { message: "Payment successfully canceled." };
+}
+
 type UpdatePayment = Pick<
 	Payment,
 	"id" | "paid" | "paid_at" | "method" | "number_of_months"