konnosDashboard
Success.tsx95 lines · main
1import { Check, Mail } from 'lucide-react'
2import Link from 'next/link'
3import { Button, IconDiscord, Separator } from 'ui'
4
5import { NO_PROJECT_MARKER } from './SupportForm.utils'
6import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
7import { useProfile } from '@/lib/profile'
8
9interface SuccessProps {
10 sentCategory?: string
11 selectedProject?: string
12 onFinish?: () => void
13 finishLabel?: string
14}
15
16export const Success = ({
17 sentCategory = '',
18 selectedProject = NO_PROJECT_MARKER,
19 onFinish,
20 finishLabel = 'Finish',
21}: SuccessProps) => {
22 const { profile } = useProfile()
23 const respondToEmail = profile?.primary_email ?? 'your email'
24
25 const { data: project } = useProjectDetailQuery(
26 { ref: selectedProject },
27 { enabled: selectedProject !== NO_PROJECT_MARKER }
28 )
29 const projectName = project ? project.name : 'No specific project'
30
31 const categoriesToShowAdditionalResources = ['Problem', 'Unresponsive', 'Performance']
32
33 return (
34 <div className="mt-10 max-w-[620px] flex flex-col items-center space-y-4">
35 <div className="relative">
36 <Mail strokeWidth={1.5} size={32} className="text-brand" />
37 <div className="absolute -bottom-1 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-brand">
38 <Check strokeWidth={4} size={16} className="text-contrast" />
39 </div>
40 </div>
41 <div className="flex items-center flex-col space-y-2 text-center p-4">
42 <h3 className="text-xl">Support request sent</h3>
43
44 <p className="text-sm text-foreground-light text-balance">
45 {selectedProject !== NO_PROJECT_MARKER && (
46 <>
47 Your ticket has been logged for the project{' '}
48 <span className="text-foreground font-medium">{projectName}</span> with project ID:{' '}
49 <span className="text-foreground font-medium">{selectedProject}</span>.
50 </>
51 )}{' '}
52 We will reach out to you at{' '}
53 <span className="text-foreground font-medium">{respondToEmail}</span>.
54 </p>
55 </div>
56 {categoriesToShowAdditionalResources.includes(sentCategory) && (
57 <>
58 <div className="my-10! w-full">
59 <Separator />
60 </div>
61 <div className="flex flex-col items-center px-12 space-y-2 text-center">
62 <h4 className="text-lg font-normal">Tap into our community</h4>
63 <p className="text-sm text-foreground-light text-balance">
64 Our Discord community can help with code-related issues. Many questions are answered
65 in minutes.
66 </p>
67 </div>
68 <Button
69 asChild
70 type="default"
71 icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
72 >
73 <Link href={'https://discord.supabase.com/'} target="_blank">
74 Join us on Discord
75 </Link>
76 </Button>
77 </>
78 )}
79 <div className="mt-10! w-full">
80 <Separator />
81 </div>
82 <div className="w-full pb-4 px-4 flex items-center justify-end">
83 {onFinish ? (
84 <Button type="default" onClick={onFinish}>
85 {finishLabel}
86 </Button>
87 ) : (
88 <Button asChild type="default">
89 <Link href="/">{finishLabel}</Link>
90 </Button>
91 )}
92 </div>
93 </div>
94 )
95}