Remove the per-route 'export const instant = false' opt-outs now that the root layout carries the single Cache Components opt-out. Child pages inherit the opt-out, so admin/mod/radio leaf pages that only access cached or DB data stay instant while runtime-dependent pages remain dynamic. Update the staff-smoke contract test to assert the root-layout contract.
98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { eq } from "drizzle-orm";
|
|
import { redirect } from "next/navigation";
|
|
import { getTranslations } from "next-intl/server";
|
|
import { ContentCard, StatBlock } from "@/components/public/ui";
|
|
import { auth } from "@/lib/auth";
|
|
import { db, User } from "@/lib/db";
|
|
import {
|
|
creditsPerUnit,
|
|
isPayPalConfigured,
|
|
PAYPAL_CURRENCY,
|
|
} from "@/lib/services/paypal";
|
|
import TopUpForm from "./TopUpForm";
|
|
|
|
export default async function TopUpPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ status?: string }>;
|
|
}) {
|
|
const session = await auth();
|
|
if (!session?.user?.id) redirect("/login");
|
|
|
|
const t = await getTranslations("pages.topup");
|
|
const sp = await searchParams;
|
|
const id = Number(session.user.id);
|
|
|
|
// Current credits balance for context (fail soft).
|
|
let user: { username: string; credits: number } | null = null;
|
|
try {
|
|
const [row] = await db
|
|
.select({ username: User.username, credits: User.credits })
|
|
.from(User)
|
|
.where(eq(User.id, id))
|
|
.limit(1);
|
|
user = row ?? null;
|
|
} catch {
|
|
user = null;
|
|
}
|
|
if (!user) redirect("/login");
|
|
|
|
const configured = isPayPalConfigured();
|
|
const rate = creditsPerUnit();
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<ContentCard icon="💳" title={t("title")} subtitle={t("subtitle")} />
|
|
|
|
{sp.status === "cancel" ? (
|
|
<div className="card" style={{ borderColor: "var(--color-danger)" }}>
|
|
<p style={{ margin: 0 }}>{t("cancelled")}</p>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="card-grid sm-2">
|
|
<ContentCard icon="🪙" title={t("chooseAmount")}>
|
|
{configured ? (
|
|
<TopUpForm currency={PAYPAL_CURRENCY} creditsPerUnit={rate} />
|
|
) : (
|
|
<p className="muted" style={{ margin: 0 }}>
|
|
{t("notConfiguredPre")} <code>PAYPAL_CLIENT_ID</code>{" "}
|
|
{t("notConfiguredAnd")} <code>PAYPAL_SECRET</code>{" "}
|
|
{t("notConfiguredOptional")} <code>PAYPAL_API</code>{" "}
|
|
{t("notConfiguredPost")}
|
|
</p>
|
|
)}
|
|
</ContentCard>
|
|
|
|
<ContentCard
|
|
icon="💰"
|
|
title={t("balanceTitle")}
|
|
subtitle={t("signedInAs", { username: user.username })}
|
|
>
|
|
<div className="stat-grid">
|
|
<StatBlock
|
|
value={user.credits.toLocaleString()}
|
|
label={t("credits")}
|
|
icon="🪙"
|
|
/>
|
|
<StatBlock
|
|
value={rate.toLocaleString()}
|
|
label={t("creditsPerUnit", { currency: PAYPAL_CURRENCY })}
|
|
/>
|
|
</div>
|
|
<p
|
|
className="muted"
|
|
style={{ marginBottom: 0, marginTop: "0.85rem" }}
|
|
>
|
|
{t.rich("rateLine", {
|
|
amount: rate.toLocaleString(),
|
|
currency: PAYPAL_CURRENCY,
|
|
strong: (chunks) => <strong>{chunks}</strong>,
|
|
})}
|
|
</p>
|
|
</ContentCard>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|