konnosDashboard
AnalyticsSettings.tsx94 lines · main
1import { zodResolver } from '@hookform/resolvers/zod'
2import { useConsentState } from 'common'
3import { useForm } from 'react-hook-form'
4import { toast } from 'sonner'
5import { Card, CardContent, Form, FormControl, FormField, Switch } from 'ui'
6import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
7import {
8 PageSection,
9 PageSectionContent,
10 PageSectionDescription,
11 PageSectionMeta,
12 PageSectionSummary,
13 PageSectionTitle,
14} from 'ui-patterns/PageSection'
15import * as z from 'zod'
16
17import { useSendResetMutation } from '@/data/telemetry/send-reset-mutation'
18
19const AnalyticsSchema = z.object({
20 telemetryEnabled: z.boolean(),
21})
22
23export const AnalyticsSettings = () => {
24 const { hasAccepted, acceptAll, denyAll, categories } = useConsentState()
25 const hasLoaded = categories !== null
26
27 const { mutate: sendReset } = useSendResetMutation()
28
29 const form = useForm<z.infer<typeof AnalyticsSchema>>({
30 resolver: zodResolver(AnalyticsSchema as any),
31 values: { telemetryEnabled: hasAccepted },
32 })
33
34 const handleToggle = (value: boolean) => {
35 if (!hasLoaded) {
36 toast.error(
37 "We couldn't load the privacy settings due to an ad blocker or network error. Please disable any ad blockers and try again. If the problem persists, please contact support."
38 )
39 form.setValue('telemetryEnabled', !value)
40 return
41 }
42
43 if (value) {
44 acceptAll()
45 } else {
46 denyAll()
47 sendReset()
48 }
49
50 form.setValue('telemetryEnabled', value)
51 }
52
53 return (
54 <PageSection>
55 <PageSectionMeta>
56 <PageSectionSummary>
57 <PageSectionTitle>Analytics and Marketing</PageSectionTitle>
58 <PageSectionDescription>
59 Control whether telemetry and marketing data is sent from Briven services.
60 </PageSectionDescription>
61 </PageSectionSummary>
62 </PageSectionMeta>
63 <PageSectionContent>
64 <Form {...form}>
65 <Card>
66 <CardContent>
67 <FormField
68 control={form.control}
69 name="telemetryEnabled"
70 render={({ field }) => (
71 <FormItemLayout
72 layout="flex-row-reverse"
73 label="Send telemetry data from Briven services"
74 description="By opting in to sharing telemetry data, Briven can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes"
75 >
76 <FormControl>
77 <Switch
78 checked={field.value}
79 onCheckedChange={(value) => {
80 field.onChange(value)
81 handleToggle(value)
82 }}
83 />
84 </FormControl>
85 </FormItemLayout>
86 )}
87 />
88 </CardContent>
89 </Card>
90 </Form>
91 </PageSectionContent>
92 </PageSection>
93 )
94}