This commit is contained in:
198
src/components/support/ticket-thread.tsx
Normal file
198
src/components/support/ticket-thread.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations, useFormatter } from "next-intl";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { formatDateTime } from "@/lib/format";
|
||||
import type { SupportTicketComment, SupportTicketStatus } from "@/types";
|
||||
|
||||
interface Props {
|
||||
ticketId: string;
|
||||
ticketStatus: SupportTicketStatus;
|
||||
comments: SupportTicketComment[];
|
||||
isPlatform: boolean;
|
||||
/** True when the viewer is the customer who created this ticket. */
|
||||
isOwnTicket: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Thread of comments + reply box. Customer-side viewers see a
|
||||
* "Close ticket" button as well, mapping to the customer-self-close
|
||||
* path on the PATCH endpoint.
|
||||
*
|
||||
* Reply submission: posts the comment, then router.refresh() so the
|
||||
* server-rendered page re-fetches and renders the new entry. Avoids
|
||||
* duplicating the comment-rendering logic on the client.
|
||||
*
|
||||
* Empty body submissions are blocked at HTML level (required) AND
|
||||
* by the API; we trust both layers.
|
||||
*/
|
||||
export function TicketThread({
|
||||
ticketId,
|
||||
ticketStatus,
|
||||
comments,
|
||||
isPlatform,
|
||||
isOwnTicket,
|
||||
}: Props) {
|
||||
const t = useTranslations("support");
|
||||
const tCommon = useTranslations("common");
|
||||
const f = useFormatter();
|
||||
const router = useRouter();
|
||||
|
||||
const [body, setBody] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [closing, setClosing] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const onSubmitComment = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/support/tickets/${encodeURIComponent(ticketId)}/comments`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ body }),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("commentFailed"));
|
||||
}
|
||||
setBody("");
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Customer-self-close: confirms because it's a state change, then
|
||||
// hits PATCH with status=resolved. The API allows this for
|
||||
// own-ticket regardless of role; the button only shows when the
|
||||
// ticket is in a non-resolved state.
|
||||
const onCustomerClose = async () => {
|
||||
if (!confirm(t("confirmClose"))) return;
|
||||
setClosing(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/support/tickets/${encodeURIComponent(ticketId)}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: "resolved" }),
|
||||
}
|
||||
);
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || t("closeFailed"));
|
||||
}
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setClosing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isResolved = ticketStatus === "resolved";
|
||||
const canCustomerClose =
|
||||
isOwnTicket && !isResolved;
|
||||
|
||||
return (
|
||||
<>
|
||||
{comments.map((c) => (
|
||||
<Card
|
||||
key={c.id}
|
||||
className={
|
||||
c.authorKind === "admin"
|
||||
? "border-blue-400/30 bg-blue-400/5"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-between text-xs text-text-muted mb-2">
|
||||
<span className="font-medium text-text-primary">
|
||||
{c.authorName}
|
||||
{c.authorKind === "admin" && (
|
||||
<span className="ml-2 text-blue-400 text-[10px] uppercase tracking-wider">
|
||||
{t("authorTagAdmin")}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span>{formatDateTime(c.createdAt, f)}</span>
|
||||
</div>
|
||||
<div className="text-sm text-text-primary whitespace-pre-wrap">
|
||||
{c.body}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{isResolved && (
|
||||
<Card className="border-success/30 bg-success/5">
|
||||
<p className="text-sm text-text-secondary text-center">
|
||||
{t("resolvedBanner")}
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Reply box. Visible regardless of status — customer can
|
||||
reply even on a resolved ticket (which auto-reopens it
|
||||
server-side). The semantic is "reply means the ticket is
|
||||
alive again", which is friendlier than blocking the reply. */}
|
||||
<Card>
|
||||
<form onSubmit={onSubmitComment} className="space-y-3">
|
||||
<label className="block text-xs uppercase tracking-wider text-text-muted">
|
||||
{t("replyLabel")}
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
minLength={1}
|
||||
maxLength={10_000}
|
||||
rows={4}
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
placeholder={
|
||||
isResolved && isOwnTicket
|
||||
? t("replyPlaceholderReopen")
|
||||
: t("replyPlaceholder")
|
||||
}
|
||||
className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
{canCustomerClose ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCustomerClose}
|
||||
disabled={closing || submitting}
|
||||
className="text-xs text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
|
||||
>
|
||||
{closing ? tCommon("loading") : t("closeTicket")}
|
||||
</button>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || closing || body.trim().length === 0}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{submitting ? tCommon("loading") : t("sendReply")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user