konnosDashboard
LinkSupportTicketPage.tsx81 lines · main
1import { Check, Mail } from 'lucide-react'
2import Link from 'next/link'
3import { useRouter } from 'next/router'
4import { useState } from 'react'
5import { Button, cn, DialogSectionSeparator } from 'ui'
6import { Admonition } from 'ui-patterns'
7
8import { LinkSupportTicketForm } from './LinkSupportTicketForm'
9
10export function LinkSupportTicketPage() {
11 return (
12 <div className="mx-auto my-16 max-w-2xl w-full px-4 lg:px-6">
13 <LinkSupportTicketPageContent />
14 </div>
15 )
16}
17
18function LinkSupportTicketPageContent() {
19 const router = useRouter()
20 const conversationId = router.query.conversationId as string | undefined
21 const [isSuccess, setIsSuccess] = useState(false)
22
23 // Wait for router to be ready before checking for conversationId
24 if (!router.isReady) {
25 return null
26 }
27
28 if (!conversationId) {
29 return (
30 <Admonition
31 type="warning"
32 title="Missing conversation ID"
33 description="Please provide a conversationId in the URL to link your support ticket."
34 />
35 )
36 }
37
38 return (
39 <div
40 className={cn(
41 'min-w-full w-full space-y-12 rounded-sm border bg-panel-body-light shadow-md border-default'
42 )}
43 >
44 {isSuccess ? (
45 <LinkSupportTicketSuccess />
46 ) : (
47 <LinkSupportTicketForm
48 conversationId={conversationId}
49 onSuccess={() => setIsSuccess(true)}
50 />
51 )}
52 </div>
53 )
54}
55
56function LinkSupportTicketSuccess() {
57 return (
58 <div className="w-full flex flex-col items-center">
59 <div className="flex flex-col items-center gap-y-4 py-8">
60 <div className="relative">
61 <Mail strokeWidth={1.5} size={60} className="text-brand" />
62 <div className="h-6 w-6 rounded-full bg-brand absolute bottom-1 -right-1.5 flex items-center justify-center">
63 <Check strokeWidth={4} size={16} className="text-contrast" />
64 </div>
65 </div>
66 <div className="flex items-center flex-col gap-y-2 text-center">
67 <h3 className="text-xl">Support ticket linked</h3>
68 <p className="text-sm text-foreground-light">
69 Your support conversation has been linked to your account.
70 </p>
71 </div>
72 </div>
73 <DialogSectionSeparator />
74 <div className="w-full py-4 px-4 flex items-center justify-end">
75 <Button asChild type="default">
76 <Link href="/">Finish</Link>
77 </Button>
78 </div>
79 </div>
80 )
81}