MembersExceedLimitModal.tsx57 lines · main

1	import { Button, Modal } from 'ui'
2
3	import { useFreeProjectLimitCheckQuery } from '@/data/organizations/free-project-limit-check-query'
4	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
5
6	export interface MembersExceedLimitModalProps {
7	visible: boolean
8	onClose: () => void
9	}
10
11	const MembersExceedLimitModal = ({ visible, onClose }: MembersExceedLimitModalProps) => {
12	const { data: selectedOrganization } = useSelectedOrganizationQuery()
13	const slug = selectedOrganization?.slug
14	const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery(
15	{ slug },
16	{ enabled: visible }
17	)
18
19	return (
20	<Modal
21	hideFooter
22	visible={visible}
23	size="medium"
24	header="Your organization has members who have exceeded their free project limits"
25	onCancel={onClose}
26	>
27	<Modal.Content>
28	<div className="space-y-2">
29	<p className="text-sm text-foreground-light">
30	The following members have reached their maximum limits for the number of active free
31	plan projects within organizations where they are an administrator or owner:
32	</p>
33	<ul className="pl-5 text-sm list-disc text-foreground-light">
34	{(membersExceededLimit || []).map((member, idx: number) => (
35	<li key={`member-${idx}`}>
36	{member.username || member.primary_email} (Limit: {member.free_project_limit} free
37	projects)
38	</li>
39	))}
40	</ul>
41	<p className="text-sm text-foreground-light">
42	These members will need to either delete, pause, or upgrade one or more of these
43	projects before you're able to downgrade this project.
44	</p>
45	</div>
46	</Modal.Content>
47	<Modal.Separator />
48	<Modal.Content className="flex items-center gap-2">
49	<Button htmlType="button" type="default" onClick={onClose} block>
50	Understood
51	</Button>
52	</Modal.Content>
53	</Modal>
54	)
55	}
56
57	export default MembersExceedLimitModal