konnosDashboard
UpgradePrompt.tsx83 lines · main
1import Link from 'next/link'
2import { Button, Modal } from 'ui'
3
4import { TIER_QUERY_LIMITS } from './Logs.constants'
5import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
6
7interface Props {
8 show: boolean
9 setShowUpgradePrompt: (value: boolean) => void
10 title?: string
11 description?: string
12 source?: string
13}
14/**
15 * @param show - whether to show the modal
16 * @param setShowUpgradePrompt - function to set the show state
17 * @param title - title of the modal
18 * @param description - description of the modal
19 * @param source - source of the upgrade prompt used to track the source of the upgrade prompt in the billing page
20 * @returns
21 */
22const UpgradePrompt: React.FC<Props> = ({
23 show,
24 setShowUpgradePrompt,
25 title = 'Log retention',
26 description = 'Logs can be retained up to a duration of 3 months depending on the plan that your project is on.',
27 source = 'logsRetentionUpgradePrompt',
28}) => {
29 const { data: organization } = useSelectedOrganizationQuery()
30
31 return (
32 <Modal
33 hideFooter
34 visible={show}
35 size="medium"
36 header={title}
37 onCancel={() => setShowUpgradePrompt(false)}
38 >
39 <Modal.Content>
40 <div className="space-y-4">
41 <p className="text-sm">{description}</p>
42 <div className="border-control bg-surface-300 rounded-sm border">
43 <div className="flex items-center px-4 pt-2 pb-1">
44 <p className="text-foreground-light w-[40%] text-sm">Plan</p>
45 <p className="text-foreground-light w-[60%] text-sm">Retention duration</p>
46 </div>
47 <div className="py-1">
48 <div className="flex items-center px-4 py-1">
49 <p className="w-[40%] text-sm">Free</p>
50 <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.FREE.text}</p>
51 </div>
52 <div className="flex items-center px-4 py-1">
53 <p className="w-[40%] text-sm">Pro</p>
54 <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.PRO.text}</p>
55 </div>
56 <div className="flex items-center px-4 py-1">
57 <p className="w-[40%] text-sm">Team</p>
58 <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.TEAM.text}</p>
59 </div>
60 <div className="flex items-center px-4 py-1">
61 <p className="w-[40%] text-sm">Enterprise</p>
62 <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.ENTERPRISE.text}</p>
63 </div>
64 </div>
65 </div>
66 </div>
67 </Modal.Content>
68 <Modal.Separator />
69 <Modal.Content className="flex justify-end gap-3">
70 <Button type="default" onClick={() => setShowUpgradePrompt(false)}>
71 Close
72 </Button>
73 <Button asChild size="tiny">
74 <Link href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=${source}`}>
75 Upgrade
76 </Link>
77 </Button>
78 </Modal.Content>
79 </Modal>
80 )
81}
82
83export default UpgradePrompt