konnosDashboard
DPA.tsx103 lines · main
1import { useState } from 'react'
2import { toast } from 'sonner'
3import { Button } from 'ui'
4
5import {
6 ScaffoldSection,
7 ScaffoldSectionContent,
8 ScaffoldSectionDetail,
9} from '@/components/layouts/Scaffold'
10import { InlineLink } from '@/components/ui/InlineLink'
11import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
12import { useDpaRequestMutation } from '@/data/documents/dpa-request-mutation'
13import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
14import { useProfile } from '@/lib/profile'
15import { useTrack } from '@/lib/telemetry/track'
16
17export const DPA = () => {
18 const { profile } = useProfile()
19 const { data: organization } = useSelectedOrganizationQuery()
20 const slug = organization?.slug
21
22 const [isOpen, setIsOpen] = useState(false)
23
24 const track = useTrack()
25 const { mutate: requestDpa, isPending: isRequesting } = useDpaRequestMutation({
26 onSuccess: () => {
27 toast.success('DPA request sent successfully')
28 setIsOpen(false)
29 },
30 })
31
32 const onConfirmRequest = async () => {
33 if (!slug) return toast.error('Organization not found.')
34 if (!profile?.primary_email) return toast.error('Profile email not found.')
35 requestDpa({ recipient_email: profile?.primary_email, slug: slug })
36 }
37
38 return (
39 <>
40 <ScaffoldSection className="py-12">
41 <ScaffoldSectionDetail>
42 <h4 className="mb-5">Data Processing Addendum (DPA)</h4>
43 <div className="space-y-2 text-sm text-foreground-light [&_p]:m-0">
44 <p>
45 All organizations can sign our Data Processing Addendum ("DPA") as part of their GDPR
46 compliance.
47 </p>
48 <p>
49 You can review a static PDF version of our latest DPA document{' '}
50 <InlineLink
51 href="https://supabase.com/downloads/docs/Supabase+DPA+260317.pdf"
52 onClick={() => track('dpa_pdf_opened', { source: 'studio' })}
53 >
54 here
55 </InlineLink>
56 .
57 </p>
58 </div>
59 </ScaffoldSectionDetail>
60 <ScaffoldSectionContent>
61 <div className="@lg:flex items-center justify-center h-full">
62 <Button
63 onClick={() => {
64 setIsOpen(true)
65 track('dpa_request_button_clicked')
66 }}
67 type="default"
68 >
69 Request DPA
70 </Button>
71 </div>
72 </ScaffoldSectionContent>
73 </ScaffoldSection>
74
75 <TextConfirmModal
76 visible={isOpen}
77 title="Request executable DPA to sign"
78 loading={isRequesting}
79 confirmPlaceholder="Enter your email address"
80 confirmString={profile?.primary_email ?? ''}
81 confirmLabel="Send DPA request"
82 errorMessage="Email must match your account email."
83 onCancel={() => setIsOpen(false)}
84 onConfirm={() => onConfirmRequest()}
85 >
86 <div className="space-y-2 text-sm">
87 <p>
88 To make the DPA legally binding, you need to sign and complete the details through a
89 PandaDoc document that we prepare.
90 </p>
91 <p>
92 Please enter your email address to request an executable version of the DPA. You will
93 receive a document link via PandaDoc in the next 24 hours.
94 </p>
95 <p>
96 Once signed, the DPA will be considered executed and you'll be notified of any future
97 updates via this email.
98 </p>
99 </div>
100 </TextConfirmModal>
101 </>
102 )
103}