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

utils/axios-client.ts

@@ -1,12 +1,13 @@
+import { authOptions } from "@/app/auth";
 import axios, { type AxiosError } from "axios";
-import type { Session } from "next-auth";
+import { type Session, getServerSession } from "next-auth";
 import { getSession } from "next-auth/react";
 import { redirect } from "next/navigation";
 
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
-const ApiClient = () => {
+const APIClient = () => {
 	const instance = axios.create({
 		baseURL: process.env.SARLINK_API_BASE_URL,
 		headers: {
@@ -15,11 +16,13 @@ const ApiClient = () => {
 	});
 
 	let lastSession: Session | null = null;
+	console.log("Last session: ", lastSession);
 
 	instance.interceptors.request.use(
 		async (request) => {
 			if (lastSession == null || Date.now() > Date.parse(lastSession.expires)) {
-				const session = await getSession();
+				const session = await getServerSession(authOptions);
+				console.log("Server session: ", session);
 				lastSession = session;
 			}
 
@@ -27,23 +30,24 @@ const ApiClient = () => {
 				request.headers.Authorization = `Token ${lastSession.apiToken}`;
 			} else {
 				request.headers.Authorization = undefined;
-				return redirect("/auth/signin");
 			}
 
 			return request;
 		},
 		(error) => {
-			console.error("API Error: ", error);
+			console.error("API Request Error: ", error);
 			throw error;
 		},
 	);
+
 	instance.interceptors.response.use(
 		async (response) => {
 			return response;
 		},
 		async (error: AxiosError) => {
 			if (error?.response?.status === 401) {
-				return redirect("/auth/signin");
+				// Redirect to the signin page if the user is unauthorized
+				redirect("/auth/signin");
 			}
 			return Promise.reject(error);
 		},
@@ -52,4 +56,4 @@ const ApiClient = () => {
 	return instance;
 };
 
-export const AxiosClient = ApiClient();
+export const AxiosClient = APIClient();