konnosDashboard
PITRNotice.tsx65 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { Calendar } from 'lucide-react'
4import Link from 'next/link'
5
6import { getPITRRetentionDuration } from './PITR.utils'
7import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
8import { FormPanel } from '@/components/ui/Forms/FormPanel'
9import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
10import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
11
12export const PITRNotice = () => {
13 const { ref: projectRef } = useParams()
14 const { data: addonsResponse } = useProjectAddonsQuery({ projectRef })
15 const retentionPeriod = getPITRRetentionDuration(addonsResponse?.selected_addons ?? [])
16
17 const { can: canUpdateSubscription } = useAsyncCheckPermissions(
18 PermissionAction.BILLING_WRITE,
19 'stripe.subscriptions'
20 )
21
22 return (
23 <FormPanel
24 disabled={true}
25 footer={
26 <div className="flex items-center justify-between p-6">
27 <span className="text-sm text-foreground-light">
28 You can also increase your recovery retention period updating your PITR add-on
29 </span>
30 <ButtonTooltip
31 asChild
32 disabled={!canUpdateSubscription}
33 type="default"
34 tooltip={{
35 content: {
36 side: 'bottom',
37 text: !canUpdateSubscription
38 ? 'You need additional permissions to amend subscriptions'
39 : undefined,
40 },
41 }}
42 >
43 <Link href={`/project/${projectRef}/settings/addons?panel=pitr`}>
44 Increase retention period
45 </Link>
46 </ButtonTooltip>
47 </div>
48 }
49 >
50 <div className="flex p-6 space-x-6">
51 <div className="flex items-center justify-center w-10 h-10 rounded-sm bg-border-strong">
52 <Calendar strokeWidth={2} />
53 </div>
54 <div className="space-y-2">
55 <p className="text-sm">Recovery retention period</p>
56 <p className="text-sm text-foreground-light">
57 Database changes are logged every <span className="text-foreground">2 minutes</span>,
58 with a total recovery period of up to{' '}
59 <span className="text-brand">{retentionPeriod} days</span>.
60 </p>
61 </div>
62 </div>
63 </FormPanel>
64 )
65}