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

import { redirect } from "next/navigation";
import { getPayment, getProfile } from "@/actions/payment";
import CancelPaymentButton from "@/components/billing/cancel-payment-button";
import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
import ClientErrorMessage from "@/components/client-error-message";
import DevicesToPay from "@/components/devices-to-pay";
import { Button } from "@/components/ui/button";
import { TextShimmer } from "@/components/ui/text-shimmer";
import { cn } from "@/lib/utils";
import { tryCatch } from "@/utils/tryCatch";
export default async function PaymentPage({
	params,
}: {
	params: Promise<{ paymentId: string }>;
}) {
	const paymentId = (await params).paymentId;
	const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
	if (error) {
		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 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 flex-col gap-4 items-end w-full">
					{!payment.is_expired && payment.paid && payment.status !== "PENDING" && (
						<Button
							disabled
							className={cn(
								"rounded-md opacity-100! uppercase font-semibold",
								payment?.paid
									? "text-green-900 bg-green-500/20"
									: "text-inherit bg-yellow-400",
							)}
						>
							{payment.status}
						</Button>
					)}
					{payment.status === "PENDING" && !payment.is_expired && (
						<Button>
							<TextShimmer>Payment Pending</TextShimmer>{" "}
						</Button>
					)}
					{!payment.paid &&
						(payment.is_expired ? (
							<Button
								disabled
								className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
							>
								Payment Expired
							</Button>
						) : payment.status === "PENDING" ? (
							<CancelPaymentButton paymentId={paymentId} />
						) : payment.status === "CANCELLED" ? (
							<Button disabled>Payment Cancelled</Button>
						) : (
							""
						))}
				</div>
			</div>
			{!payment.paid && (
				<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
			)}
			<div
				id="user-device-payments"
				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<DevicesToPay
					disabled={payment.paid || payment.is_expired}
					user={userProfile || undefined}
					payment={payment || undefined}
				/>
			</div>
		</div>
	);
}