sarlink-portal/app/(dashboard)/top-ups/[topupId]/page.tsx

import { redirect } from "next/navigation";
import { getTopup } from "@/actions/payment";
import CancelTopupButton from "@/components/billing/cancel-topup-button";
import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
import ClientErrorMessage from "@/components/client-error-message";
import TopupToPay from "@/components/topup-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 TopupPage({
  params,
}: {
  params: Promise<{ topupId: string }>;
}) {
  const topupId = (await params).topupId;
  const [error, topup] = await tryCatch(getTopup({ id: topupId }));
  if (error) {
    if (error.message === "Invalid token.") redirect("/auth/signin");
    return <ClientErrorMessage message={error.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">Topup</h3>
        <div className="flex flex-col gap-4 items-end w-full">
          {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
            <Button
              disabled
              className={cn(
                "rounded-md opacity-100! uppercase font-semibold",
                topup?.paid
                  ? "text-green-900 bg-green-500/20"
                  : "text-inherit bg-yellow-400",
              )}
            >
              {topup.status}
            </Button>
          )}
          {topup.status === "PENDING" && !topup.is_expired && (
            <Button>
              <TextShimmer>Payment Pending</TextShimmer>{" "}
            </Button>
          )}

          {!topup.paid &&
            (topup.is_expired ? (
              <Button
                disabled
                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
              >
                Topup Expired
              </Button>
            ) : topup.status === "PENDING" ? (
              <CancelTopupButton topupId={topupId} />
            ) : topup.status === "CANCELLED" ? (
              <Button disabled>Topup Cancelled</Button>
            ) : (
              ""
            ))}
        </div>
      </div>
      {!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
      )}
      <div
        id="user-topup-details"
        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <TopupToPay
          disabled={
            topup.paid || topup.is_expired || topup.status === "CANCELLED"
          }
          topup={topup || undefined}
        />
      </div>
    </div>
  );
}