konnosDashboard
page.tsx180 lines · main
1import Link from 'next/link';
2
3import { apiJson } from '@/lib/api';
4import { toValidDate } from '@/lib/utils';
5
6import { ContactForm } from '../../../../components/marketing/contact-form';
7import { detectCountry } from '../../../../lib/geo-country';
8import { requireUser } from '../../../../lib/session';
9
10export const dynamic = 'force-dynamic';
11
12interface HelpLink {
13 href: string;
14 title: string;
15 body: string;
16}
17
18interface UserTicket {
19 id: string;
20 ticketNumber: string;
21 status: string;
22 subject: string;
23 createdAt: string;
24}
25
26const TICKET_STATUS_LABELS: Record<string, string> = {
27 no_response: 'no response',
28 in_review: 'in review',
29 replied: 'new reply',
30 closed: 'closed',
31};
32
33function ticketStatusBadgeClass(status: string): string {
34 switch (status) {
35 case 'in_review':
36 return 'border-[var(--color-warning)] text-[var(--color-warning)]';
37 case 'replied':
38 return 'border-[var(--color-primary)] bg-[var(--color-primary-subtle)] text-[var(--color-primary)]';
39 case 'closed':
40 return 'border-[var(--color-border)] text-[var(--color-text-muted)]';
41 default: // no_response
42 return 'border-[var(--color-border-subtle)] text-[var(--color-text-subtle)]';
43 }
44}
45
46// Non-email self-serve routes — same set as the public /contact page.
47// Some folks get unblocked faster here than by waiting on a reply.
48const HELP_LINKS: readonly HelpLink[] = [
49 {
50 href: 'https://docs.briven.tech/support',
51 title: 'docs & support',
52 body: 'guides, troubleshooting and the support handbook — the fastest path for most questions.',
53 },
54 {
55 href: 'https://github.com/flndrn-dev/briven',
56 title: 'source & issues',
57 body: 'briven is open. read the code, file a bug, or follow along with what we’re building.',
58 },
59 {
60 href: 'https://docs.briven.tech/status',
61 title: 'system status',
62 body: 'checking whether something’s down? the live status page shows current uptime and incidents.',
63 },
64];
65
66export default async function SupportPage() {
67 const [user, country, ticketsResult] = await Promise.all([
68 requireUser(),
69 detectCountry().catch(() => null),
70 apiJson<{ tickets: UserTicket[] }>('/v1/me/tickets').catch(() => ({
71 tickets: [] as UserTicket[],
72 })),
73 ]);
74
75 const tickets = ticketsResult.tickets;
76 const replyCount = tickets.filter((t) => t.status === 'replied').length;
77
78 return (
79 <div className="flex max-w-3xl flex-col gap-8 pb-12">
80 <header>
81 <div className="flex items-baseline justify-between gap-3">
82 <h1 className="text-3xl font-bold tracking-tight text-[var(--color-text)]">
83 contact support
84 </h1>
85 <Link
86 href="/dashboard/support/tickets"
87 className="font-mono text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
88 >
89 my tickets →
90 </Link>
91 </div>
92 <p className="mt-1 text-sm text-[var(--color-text-muted)]">
93 something broken, or just a question? send us a message — we reply right here in your
94 tickets and to your account email, usually within one business day. no marketing emails,
95 ever.
96 </p>
97 </header>
98
99 {/* Your tickets — surfaced here so a reply is visible in the support
100 section itself, not only in the inbox. A 'replied' ticket means a new
101 response is waiting; click through to read the full conversation. */}
102 {tickets.length > 0 ? (
103 <section className="flex flex-col gap-3">
104 <div className="flex items-baseline justify-between gap-3">
105 <h2 className="font-mono text-sm text-[var(--color-text)]">your tickets</h2>
106 {replyCount > 0 ? (
107 <span className="font-mono text-xs text-[var(--color-primary)]">
108 {replyCount} new repl{replyCount === 1 ? 'y' : 'ies'} waiting
109 </span>
110 ) : null}
111 </div>
112 <ul className="flex flex-col gap-2">
113 {tickets.map((t) => {
114 const created = toValidDate(t.createdAt);
115 return (
116 <li key={t.id}>
117 <Link
118 // '#' is display-only; a '#' in a URL is the fragment marker and 404s the thread.
119 href={`/dashboard/support/tickets/${encodeURIComponent(t.ticketNumber.replace(/^#/, ''))}`}
120 className="flex items-center gap-3 rounded-[var(--radius-md)] border border-[var(--color-border-subtle)] bg-[var(--color-surface)] px-4 py-2.5 transition hover:border-[var(--color-border-strong)]"
121 >
122 <span
123 className={`shrink-0 rounded-full border px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider ${ticketStatusBadgeClass(t.status)}`}
124 >
125 {TICKET_STATUS_LABELS[t.status] ?? t.status}
126 </span>
127 <span className="truncate font-mono text-xs text-[var(--color-text)]">
128 {t.subject || '(no subject)'}
129 </span>
130 <span className="ml-auto shrink-0 font-mono text-[10px] text-[var(--color-text-subtle)]">
131 {t.ticketNumber}
132 {created ? ` · ${created.toISOString().slice(0, 10)}` : ''}
133 </span>
134 </Link>
135 </li>
136 );
137 })}
138 </ul>
139 </section>
140 ) : null}
141
142 <section>
143 <ContactForm
144 apiOrigin={process.env.NEXT_PUBLIC_BRIVEN_API_ORIGIN ?? ''}
145 initialTopic="support"
146 initialCountry={country}
147 initialName={user.name ?? ''}
148 initialEmail={user.email}
149 />
150 </section>
151
152 <section>
153 <h2 className="font-mono text-sm text-[var(--color-text)]">quick links</h2>
154 <p className="mt-1 text-xs text-[var(--color-text-muted)]">
155 for a lot of questions you can get unblocked right now, without waiting on a reply.
156 </p>
157 <ul className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
158 {HELP_LINKS.map((l) => (
159 <li key={l.href}>
160 <Link
161 href={l.href}
162 className="group flex h-full flex-col gap-1 rounded-[var(--radius-md)] border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-3 transition hover:border-[var(--color-border-strong)]"
163 >
164 <span className="font-sans font-medium tracking-[-0.02em] text-[var(--color-text)] text-[var(--text-small)]">
165 {l.title}
166 </span>
167 <span className="leading-[1.5] text-[var(--color-text-muted)] text-xs">
168 {l.body}
169 </span>
170 <span className="mt-1 font-mono text-xs text-[var(--color-text-link)] group-hover:underline">
171 open →
172 </span>
173 </Link>
174 </li>
175 ))}
176 </ul>
177 </section>
178 </div>
179 );
180}