konnosDashboard
SupportAccessToggle.tsx97 lines · main
1// End of third-party imports
2
3import { SupportCategories } from '@supabase/shared-types/out/constants'
4import { ChevronRight } from 'lucide-react'
5import Link from 'next/link'
6import type { UseFormReturn } from 'react-hook-form'
7import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
8import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
9
10import type { ExtendedSupportCategories } from './Support.constants'
11import type { SupportFormValues } from './SupportForm.schema'
12
13export const DISABLE_SUPPORT_ACCESS_CATEGORIES: ExtendedSupportCategories[] = [
14 SupportCategories.ACCOUNT_DELETION,
15 SupportCategories.SALES_ENQUIRY,
16 SupportCategories.REFUND,
17]
18
19interface SupportAccessToggleProps {
20 form: UseFormReturn<SupportFormValues>
21 align?: 'left' | 'right'
22 className?: string
23}
24
25export function SupportAccessToggle({ form, align = 'left', className }: SupportAccessToggleProps) {
26 return (
27 <FormField
28 name="allowSupportAccess"
29 control={form.control}
30 render={({ field }) => {
31 return (
32 <FormItemLayout
33 hideMessage
34 name="allowSupportAccess"
35 className={className}
36 layout="flex"
37 align={align}
38 label={
39 <div className="flex items-center gap-x-2">
40 <span className="text-foreground">Allow support access to your project</span>
41 <Badge>Recommended</Badge>
42 </div>
43 }
44 description={
45 <div className="flex flex-col">
46 <span className="text-foreground-light">
47 Human support and AI diagnostic access.
48 </span>
49 <Collapsible className="mt-2">
50 <CollapsibleTrigger
51 className={
52 'group flex items-center gap-x-1 group-data-open:text-foreground hover:text-foreground transition'
53 }
54 >
55 <ChevronRight
56 size={14}
57 className="transition-all group-data-open:rotate-90 text-foreground-muted -ml-1"
58 />
59 <span className="text-sm">More information</span>
60 </CollapsibleTrigger>
61 <CollapsibleContent className="text-sm text-foreground-light mt-2 space-y-2">
62 <p>
63 By enabling this, you grant permission for our support team to access your
64 project temporarily and, if applicable, to use AI tools to assist in
65 diagnosing and resolving issues. This access may involve analyzing database
66 configurations, query performance, and other relevant data to expedite
67 troubleshooting and enhance support accuracy.
68 </p>
69 <p>
70 We are committed to maintaining strict data privacy and security standards in
71 all support activities.{' '}
72 <Link
73 href="https://supabase.com/privacy"
74 target="_blank"
75 rel="noreferrer"
76 className="text-foreground-light underline hover:text-foreground transition"
77 >
78 Privacy Policy
79 </Link>
80 </p>
81 </CollapsibleContent>
82 </Collapsible>
83 </div>
84 }
85 >
86 <Switch
87 size="large"
88 id="allowSupportAccess"
89 checked={field.value}
90 onCheckedChange={field.onChange}
91 />
92 </FormItemLayout>
93 )
94 }}
95 />
96 )
97}