diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 95d14949135..0ca2b521bfa 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -1037,7 +1037,8 @@ export const enUS: LocalizationResource = { organization_domain_blocked: undefined, organization_domain_common: undefined, organization_domain_exists_for_enterprise_connection: undefined, - organization_membership_quota_exceeded: undefined, + organization_membership_quota_exceeded: + 'You have reached your limit of organization memberships, including outstanding invitations.', organization_minimum_permissions_needed: undefined, organization_not_found_or_unauthorized: 'You are no longer a member of this organization. Please choose or create another one.', diff --git a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx index c4fe5caf852..bf7824ef1af 100644 --- a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx +++ b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx @@ -1,4 +1,7 @@ +import { useMemo, type ReactNode } from 'react'; +import { useOrganization } from '@clerk/shared/react'; import { Animated } from '@/ui/elements/Animated'; +import { Tooltip } from '@/ui/elements/Tooltip'; import { useProtect } from '../../common'; import { Button, descriptors, Flex, localizationKeys } from '../../customizables'; @@ -11,6 +14,48 @@ type MembersActionsRowProps = { export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => { const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' }); + const { organization } = useOrganization(); + + const isBelowLimit = useMemo(() => { + if (!organization) { + return false; + } + + // A value of 0 means unlimited memberships, thus the organization is always below the limit + if (organization.maxAllowedMemberships === 0) { + return true; + } + + return organization.membersCount + organization.pendingInvitationsCount < organization.maxAllowedMemberships; + }, [organization]); + + const inviteButton = ( +