konnosDashboard
AIOptInModal.tsx91 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useEffect } from 'react'
3import {
4 Button,
5 cn,
6 Dialog,
7 DialogContent,
8 DialogFooter,
9 DialogHeader,
10 DialogSection,
11 DialogSectionSeparator,
12 DialogTitle,
13 Form,
14} from 'ui'
15
16import { AIOptInLevelSelector } from '@/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector'
17import { useAIOptInForm } from '@/hooks/forms/useAIOptInForm'
18import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
19
20interface AIOptInModalProps {
21 visible: boolean
22 onCancel: () => void
23}
24
25export const AIOptInModal = ({ visible, onCancel }: AIOptInModalProps) => {
26 const { form, onSubmit, isUpdating, currentOptInLevel } = useAIOptInForm(onCancel)
27 const { can: canUpdateOrganization } = useAsyncCheckPermissions(
28 PermissionAction.UPDATE,
29 'organizations'
30 )
31
32 const onOpenChange = (open: boolean) => {
33 if (!open) {
34 onCancel()
35 }
36 }
37
38 useEffect(() => {
39 if (visible) {
40 form.reset({ aiOptInLevel: currentOptInLevel })
41 }
42 }, [visible, currentOptInLevel, form])
43
44 return (
45 <Dialog open={visible} onOpenChange={onOpenChange}>
46 <DialogContent size="large" aria-describedby={undefined}>
47 <Form {...form}>
48 <form id="ai-opt-in-form" onSubmit={form.handleSubmit(onSubmit)}>
49 <DialogHeader padding="small">
50 <DialogTitle>Update Briven Assistant Opt-in Level</DialogTitle>
51 </DialogHeader>
52
53 <DialogSectionSeparator />
54
55 <DialogSection className="space-y-4 pb-0" padding="small">
56 <AIOptInLevelSelector
57 control={form.control}
58 disabled={!canUpdateOrganization || isUpdating}
59 />
60 </DialogSection>
61
62 <DialogFooter
63 padding="small"
64 className={cn(!canUpdateOrganization && 'justify-between!')}
65 >
66 {!canUpdateOrganization && (
67 <p className="text-sm text-foreground-lighter">
68 You need additional permissions to update the opt-in level
69 </p>
70 )}
71 <div className="flex items-center gap-x-2">
72 <Button type="default" disabled={isUpdating} onClick={onCancel}>
73 Cancel
74 </Button>
75 <Button
76 type="primary"
77 htmlType="submit"
78 form="ai-opt-in-form"
79 loading={isUpdating}
80 disabled={isUpdating || !canUpdateOrganization || !form.formState.isDirty}
81 >
82 Confirm
83 </Button>
84 </div>
85 </DialogFooter>
86 </form>
87 </Form>
88 </DialogContent>
89 </Dialog>
90 )
91}