feat: add getProfile function and integrate user profile retrieval in payment and layout components

actions/payment.ts

@@ -9,7 +9,7 @@ import type {
 } from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
 import { checkSession } from "@/utils/session";
-import { tryCatch } from "@/utils/tryCatch";
+import { handleApiResponse, tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
@@ -201,6 +201,22 @@ type VerifyPaymentType = {
 	type?: "TRANSFER" | "WALLET";
 };
 
+export async function getProfile() {
+	const session = await getServerSession(authOptions);
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/profile/`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Token ${session?.apiToken}`,
+			},
+		},
+	);
+
+	return handleApiResponse<User>(response, "getProfile");
+}
+
 export async function processWalletPayment({
 	payment,
 	amount,

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -1,8 +1,9 @@
-import { getPayment } from "@/actions/payment";
+import { getPayment, getProfile } from "@/actions/payment";
 import { authOptions } from "@/app/auth";
 import CancelPaymentButton from "@/components/billing/cancel-payment-button";
 import ClientErrorMessage from "@/components/client-error-message";
 import DevicesToPay from "@/components/devices-to-pay";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
@@ -20,21 +21,28 @@ export default async function PaymentPage({
 		if (error.message === "Invalid token.") redirect("/auth/signin");
 		return <ClientErrorMessage message={error.message} />;
 	}
+	const [userError, userProfile] = await tryCatch(getProfile());
+	if (userError) {
+		if (userError.message === "Invalid token.") redirect("/auth/signin");
+		return <ClientErrorMessage message={userError.message} />;
+	}
+
 	return (
 		<div>
 			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
 				<h3 className="text-sarLinkOrange text-2xl">Payment</h3>
-				<div className="flex gap-4 items-center">
+				<div className="flex flex-col gap-4 items-end w-full">
-					<span
+					<Button
+						disabled
 						className={cn(
-							"text-sm border px-4 py-2 rounded-md uppercase font-semibold",
+							"rounded-md !opacity-100 uppercase font-semibold",
 							payment?.paid
 								? "text-green-500 bg-green-500/20"
-								: "text-yellow-500 bg-yellow-700",
+								: "text-yellow-500 bg-yellow-900",
 						)}
 					>
 						{payment?.paid ? "Paid" : "Pending"}
-					</span>
+					</Button>
 					<CancelPaymentButton paymentId={paymentId} />
 				</div>
 			</div>
@@ -44,7 +52,7 @@ export default async function PaymentPage({
 				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
 				<DevicesToPay
-					user={session?.user || undefined}
+					user={userProfile || undefined}
 					payment={payment || undefined}
 				/>
 			</div>

components/auth/application-layout.tsx

@@ -4,6 +4,7 @@ import { Wallet } from "@/components/wallet";
 import { ModeToggle } from "@/components/theme-toggle";
 import { AppSidebar } from "@/components/ui/app-sidebar";
 
+import { getProfile } from "@/actions/payment";
 import { authOptions } from "@/app/auth";
 import { Separator } from "@/components/ui/separator";
 import {
@@ -11,6 +12,7 @@ import {
 	SidebarProvider,
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AccountPopover } from "./account-popver";
@@ -21,6 +23,11 @@ export async function ApplicationLayout({
 	const session = await getServerSession(authOptions);
 
 	if (!session) return redirect("/auth/signin");
+	const [userError, userProfile] = await tryCatch(getProfile());
+	if (userError) {
+		if (userError.message === "Invalid token.") redirect("/auth/signin");
+		return null;
+	}
 	return (
 		<SidebarProvider>
 			<AppSidebar />
@@ -30,7 +37,7 @@ export async function ApplicationLayout({
 					<div className="flex items-center gap-2 ">
 						<SidebarTrigger className="-ml-1" />
 						<Separator orientation="vertical" className="mr-2 h-4" />
-						<div className="text-sm font-mono px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
+						<div className="text-xs font-mono px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
 							Welcome,{" "}
 							<span className="font-semibold">
 								{session?.user?.first_name} {session?.user?.last_name}
@@ -39,7 +46,7 @@ export async function ApplicationLayout({
 					</div>
 
 					<div className="flex items-center gap-2">
-						<Wallet walletBalance={session?.user?.wallet_balance || 0} />
+						<Wallet walletBalance={userProfile?.wallet_balance || 0} />
 						<ModeToggle />
 						<AccountPopover />
 					</div>

components/devices-to-pay.tsx

@@ -9,6 +9,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import type { Payment } from "@/lib/backend-types";
+import type { User } from "@/lib/types/user";
 import {
 	BadgeDollarSign,
 	Clipboard,
@@ -16,7 +17,6 @@ import {
 	Loader2,
 	Wallet,
 } from "lucide-react";
-import type { User } from "next-auth";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "./ui/button";
@@ -33,9 +33,7 @@ export default function DevicesToPay({
 		return null;
 	}
 	// 100+(n−1)×75
-	// const walletBalance = user?.walletBalance ?? 0;
+	const walletBalance = user?.wallet_balance ?? 0;
-	// TODO - get wallet balance from backend
-	const walletBalance = 110;
 
 	const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
 

queries/authentication.ts

@@ -198,10 +198,14 @@ export async function VerifyRegistrationOTP(
 		// 	redirect(`/auth/verify-otp?phone_number=${mobile}`);
 		// }
 	}
+	if (data.message !== "User created successfully.") {
 		return {
-		message:
+			message: "Your account could not be verified. Please contact support.",
-			data.message ||
-			"Your account could not be verified. Please contact support.",
 			status: "verify_error",
 		};
+	}
+	return {
+		message: data.message,
+		status: "verify_success",
+	};
 }