konnosDashboard
CustomDomainDelete.tsx108 lines · main
1import { Trash } from 'lucide-react'
2import { useEffect, useState } from 'react'
3import { toast } from 'sonner'
4import { Button, Checkbox } from 'ui'
5import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
6import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
7
8import { DocsButton } from '@/components/ui/DocsButton'
9import Panel from '@/components/ui/Panel'
10import { useCustomDomainDeleteMutation } from '@/data/custom-domains/custom-domains-delete-mutation'
11import type { CustomDomainResponse } from '@/data/custom-domains/custom-domains-query'
12import { DOCS_URL } from '@/lib/constants'
13
14export type CustomDomainDeleteProps = {
15 projectRef?: string
16 customDomain: CustomDomainResponse
17}
18
19export const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDeleteProps) => {
20 const [removeCustomDomain, setRemoveCustomDomain] = useState(false)
21 const [isDeleteConfirmModalVisible, setIsDeleteConfirmModalVisible] = useState(false)
22
23 const { mutate: deleteCustomDomain, isPending: isDeletingCustomDomain } =
24 useCustomDomainDeleteMutation({
25 onSuccess: () => {
26 toast.success(
27 `Successfully deleted custom domain. Refresh your browser to see the changes.`
28 )
29 setIsDeleteConfirmModalVisible(false)
30 },
31 })
32
33 const onDeleteCustomDomain = async () => {
34 if (!projectRef) return console.error('Project ref is required')
35 deleteCustomDomain({ projectRef, removeAddon: removeCustomDomain })
36 }
37
38 useEffect(() => {
39 if (!isDeleteConfirmModalVisible) setRemoveCustomDomain(false)
40 }, [isDeleteConfirmModalVisible])
41
42 return (
43 <>
44 <Panel.Content>
45 <div className="w-full space-y-2">
46 <p className="text-xs text-foreground-light">Active custom domain:</p>
47 <div className="flex items-center space-x-2">
48 <code className="text-lg mx-0 flex items-center space-x-2">
49 <div className="h-2 w-2 rounded-full bg-brand" />
50 <span>
51 <code className="text-code-inline">{customDomain.hostname}</code>
52 </span>
53 </code>
54 </div>
55 <p className="text-sm text-foreground-light">
56 Your custom domain is currently active and is serving traffic
57 </p>
58 </div>
59 </Panel.Content>
60
61 <div className="w-full border-t border-muted" />
62
63 <Panel.Content className="w-full">
64 <div className="flex items-center justify-between">
65 <DocsButton href={`${DOCS_URL}/guides/platform/custom-domains`} />
66 <Button
67 type="danger"
68 icon={<Trash />}
69 onClick={() => setIsDeleteConfirmModalVisible(true)}
70 >
71 Delete custom domain
72 </Button>
73 </div>
74 </Panel.Content>
75
76 <ConfirmationModal
77 visible={isDeleteConfirmModalVisible}
78 variant="destructive"
79 title="Delete custom domain"
80 confirmLabel="Delete"
81 confirmLabelLoading="Deleting"
82 loading={isDeletingCustomDomain}
83 onCancel={() => setIsDeleteConfirmModalVisible(false)}
84 onConfirm={onDeleteCustomDomain}
85 >
86 <p className="text-sm mb-4">
87 Are you sure you want to delete the custom domain{' '}
88 <code className="text-code-inline break-normal!">{customDomain.hostname}</code> for your
89 project? You will need to re-verify this domain if you want to use it again.
90 </p>
91
92 <FormItemLayout
93 isReactForm={false}
94 layout="flex"
95 name="removeCustomDomain"
96 label="Also remove custom domain add-on"
97 description="Stops the monthly add-on charge for this project"
98 className="[&>div:first-child>button]:translate-y-0.5"
99 >
100 <Checkbox
101 checked={removeCustomDomain}
102 onCheckedChange={(value) => setRemoveCustomDomain(!!value)}
103 />
104 </FormItemLayout>
105 </ConfirmationModal>
106 </>
107 )
108}