FreeProjectLimitWarning.tsx45 lines · main

1	import { Admonition } from 'ui-patterns/admonition'
2
3	import Panel from '@/components/ui/Panel'
4	import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
5	import type { MemberWithFreeProjectLimit } from '@/data/organizations/free-project-limit-check-query'
6
7	interface FreeProjectLimitWarningProps {
8	membersExceededLimit: MemberWithFreeProjectLimit[]
9	}
10
11	export const FreeProjectLimitWarning = ({ membersExceededLimit }: FreeProjectLimitWarningProps) => {
12	return (
13	<Panel.Content>
14	<Admonition
15	type="default"
16	title="The organization has members who have exceeded their free project limits"
17	description={
18	<div className="space-y-3">
19	<p className="text-sm leading-normal">
20	The following members have reached their maximum limits for the number of active free
21	plan projects within organizations where they are an administrator or owner:
22	</p>
23	<ul className="pl-5 list-disc">
24	{membersExceededLimit.map((member, idx: number) => (
25	<li key={`member-${idx}`}>
26	{member.username || member.primary_email} (Limit: {member.free_project_limit} free
27	projects)
28	</li>
29	))}
30	</ul>
31	<p className="text-sm leading-normal">
32	These members will need to either delete, pause, or upgrade one or more of these
33	projects before you're able to create a free project within this organization.
34	</p>
35
36	<UpgradePlanButton
37	source="freeProjectLimitWarning"
38	featureProposition="create more projects"
39	/>
40	</div>
41	}
42	/>
43	</Panel.Content>
44	)
45	}