feat: shop buy, forum replies, tickets, messages, sessions, and UX hardening
Complete remaining product gaps: credit-based shop purchases, guild thread replies, help ticket detail/reply/close, offline message compose, sign-out-everywhere via JWT version, ads delete confirm, soft-fail feedback, rate limits, loading states, and single auth() in site layout. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
ed7db6e048
commit
803e8f36c1
47 files changed
+2793
-358
No files matched your search
@@ -0,0 +1,297 @@
|
||||
import Link from "next/link";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import type { CSSProperties } from "react";
|
||||
import { closeHelpTicket, replyHelpTicket } from "@/actions/help-tickets";
|
||||
import { ContentCard } from "@/components/public/ui";
|
||||
import { positiveBigInt } from "@/lib/api";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type SearchParams = Promise<{
|
||||
replied?: string;
|
||||
closed?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
|
||||
function feedbackStyle(tone: "success" | "error"): CSSProperties {
|
||||
const accent =
|
||||
tone === "error" ? "var(--color-danger)" : "var(--color-primary)";
|
||||
return {
|
||||
margin: 0,
|
||||
padding: "0.85rem 1rem",
|
||||
borderRadius: "var(--radius-md)",
|
||||
border: `1px solid ${accent}`,
|
||||
color: "var(--color-text-readable, var(--color-text))",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: 600,
|
||||
background: "var(--color-surface)",
|
||||
borderLeft: `4px solid ${accent}`,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function HelpTicketDetailPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
searchParams: SearchParams;
|
||||
}) {
|
||||
const session = await auth();
|
||||
if (!session?.user?.id) redirect("/login");
|
||||
|
||||
const t = await getTranslations("pages.helpTicketDetail");
|
||||
const { id } = await params;
|
||||
const { replied, closed, error } = await searchParams;
|
||||
const ticketId = positiveBigInt(id);
|
||||
if (!ticketId) notFound();
|
||||
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
let ticket: {
|
||||
id: bigint;
|
||||
userId: number | null;
|
||||
title: string;
|
||||
content: string;
|
||||
open: boolean;
|
||||
createdAt: Date | null;
|
||||
} | null = null;
|
||||
let replies: {
|
||||
id: bigint;
|
||||
userId: number;
|
||||
content: string;
|
||||
createdAt: Date | null;
|
||||
}[] = [];
|
||||
|
||||
try {
|
||||
ticket = await prisma.websiteHelpCenterTickets.findUnique({
|
||||
where: { id: ticketId },
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
title: true,
|
||||
content: true,
|
||||
open: true,
|
||||
createdAt: true,
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
ticket = null;
|
||||
}
|
||||
|
||||
if (!ticket || ticket.userId !== userId) notFound();
|
||||
|
||||
try {
|
||||
replies = await prisma.websiteHelpCenterTicketReplies.findMany({
|
||||
where: { ticketId: ticket.id },
|
||||
orderBy: { id: "asc" },
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
content: true,
|
||||
createdAt: true,
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
replies = [];
|
||||
}
|
||||
|
||||
const authorIds = [
|
||||
...new Set([userId, ...replies.map((r) => r.userId)]),
|
||||
];
|
||||
let users: { id: number; username: string }[] = [];
|
||||
try {
|
||||
users = await prisma.user.findMany({
|
||||
where: { id: { in: authorIds } },
|
||||
select: { id: true, username: true },
|
||||
});
|
||||
} catch {
|
||||
users = [];
|
||||
}
|
||||
const usernameById = new Map(users.map((u) => [u.id, u.username]));
|
||||
const openerName =
|
||||
usernameById.get(userId) ?? t("userNumber", { id: userId });
|
||||
|
||||
const errorMessage =
|
||||
error === "invalid"
|
||||
? t("errors.invalid")
|
||||
: error === "not_found"
|
||||
? t("errors.notFound")
|
||||
: error === "closed_ticket"
|
||||
? t("errors.closedTicket")
|
||||
: error === "moderated"
|
||||
? t("errors.moderated")
|
||||
: error === "ratelimit"
|
||||
? t("errors.ratelimit")
|
||||
: error
|
||||
? t("errors.error")
|
||||
: null;
|
||||
|
||||
type MessageRow = {
|
||||
key: string;
|
||||
authorId: number;
|
||||
content: string;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
const messages: MessageRow[] = [
|
||||
{
|
||||
key: "opening",
|
||||
authorId: userId,
|
||||
content: ticket.content,
|
||||
createdAt: ticket.createdAt,
|
||||
},
|
||||
...replies.map((r) => ({
|
||||
key: String(r.id),
|
||||
authorId: r.userId,
|
||||
content: r.content,
|
||||
createdAt: r.createdAt,
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<main style={{ display: "grid", gap: "1.5rem" }}>
|
||||
{replied === "1" ? (
|
||||
<div role="status" style={feedbackStyle("success")}>
|
||||
{t("success.replied")}
|
||||
</div>
|
||||
) : null}
|
||||
{closed === "1" ? (
|
||||
<div role="status" style={feedbackStyle("success")}>
|
||||
{t("success.closed")}
|
||||
</div>
|
||||
) : null}
|
||||
{errorMessage ? (
|
||||
<div role="alert" style={feedbackStyle("error")}>
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<p style={{ margin: 0 }}>
|
||||
<Link href="/help/tickets">{t("backToList")}</Link>
|
||||
</p>
|
||||
|
||||
<ContentCard icon="🎫" title={ticket.title} subtitle={t("ticketId", { id: String(ticket.id) })}>
|
||||
<span className={`online-badge${ticket.open ? " online" : ""}`}>
|
||||
<span className="online-dot" aria-hidden />
|
||||
{ticket.open ? t("statusOpen") : t("statusClosed")}
|
||||
</span>
|
||||
</ContentCard>
|
||||
|
||||
<ContentCard
|
||||
icon="💬"
|
||||
title={t("messagesTitle")}
|
||||
subtitle={t("messagesSubtitle", { count: messages.length })}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
listStyle: "none",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
display: "grid",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
{messages.map((msg, index) => {
|
||||
const username =
|
||||
msg.authorId === userId
|
||||
? openerName
|
||||
: usernameById.get(msg.authorId);
|
||||
return (
|
||||
<li
|
||||
key={msg.key}
|
||||
style={{
|
||||
padding: "0.85rem 1rem",
|
||||
borderRadius: "var(--radius-md)",
|
||||
border: "1px solid var(--color-border, rgba(0,0,0,0.08))",
|
||||
background: "var(--color-surface)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "space-between",
|
||||
gap: "0.35rem",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 700 }}>
|
||||
{index === 0 ? t("you") : username ? (
|
||||
<Link href={`/u/${username}`}>{username}</Link>
|
||||
) : (
|
||||
<span className="muted">
|
||||
{t("userNumber", { id: msg.authorId })}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="muted" style={{ fontSize: "0.85rem" }}>
|
||||
{formatDate(msg.createdAt, "datetime", "")}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</ContentCard>
|
||||
|
||||
{ticket.open ? (
|
||||
<>
|
||||
<ContentCard
|
||||
icon="✍️"
|
||||
title={t("replyTitle")}
|
||||
subtitle={t("replySubtitle")}
|
||||
>
|
||||
<form action={replyHelpTicket}>
|
||||
<input type="hidden" name="ticketId" value={String(ticket.id)} />
|
||||
<textarea
|
||||
name="content"
|
||||
required
|
||||
rows={5}
|
||||
maxLength={5000}
|
||||
placeholder={t("replyPlaceholder")}
|
||||
style={{
|
||||
width: "100%",
|
||||
marginBottom: "0.75rem",
|
||||
resize: "vertical",
|
||||
}}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("replySubmit")}
|
||||
</button>
|
||||
</form>
|
||||
</ContentCard>
|
||||
|
||||
<ContentCard
|
||||
icon="✅"
|
||||
title={t("closeTitle")}
|
||||
subtitle={t("closeSubtitle")}
|
||||
>
|
||||
<form action={closeHelpTicket}>
|
||||
<input type="hidden" name="ticketId" value={String(ticket.id)} />
|
||||
<button type="submit" className="btn btn-outline">
|
||||
{t("closeSubmit")}
|
||||
</button>
|
||||
</form>
|
||||
</ContentCard>
|
||||
</>
|
||||
) : (
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
{t("closedHint")}
|
||||
</p>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "../../friends/loading";
|
||||
@@ -1,3 +1,4 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import type { CSSProperties } from "react";
|
||||
@@ -136,8 +137,12 @@ export default async function HelpTicketsPage({
|
||||
<tbody>
|
||||
{tickets.map((t2) => (
|
||||
<tr key={String(t2.id)}>
|
||||
<td>{String(t2.id)}</td>
|
||||
<td>{t2.title}</td>
|
||||
<td>
|
||||
<Link href={`/help/tickets/${t2.id}`}>{String(t2.id)}</Link>
|
||||
</td>
|
||||
<td>
|
||||
<Link href={`/help/tickets/${t2.id}`}>{t2.title}</Link>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`online-badge${t2.open ? " online" : ""}`}>
|
||||
<span className="online-dot" aria-hidden />
|
||||
|
||||
Reference in new issue
Block a user