fix(ui): Allow creating additional memberships on unlimited maxAllowedMemberships (#7555)

Author: LauraBeatris

.changeset/some-donkeys-dress.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Allow creating additional memberships on unlimited `environment.organizationSettings.maxAllowedMemberships`

packages/ui/src/common/CreateOrganizationAction.tsx

@@ -11,7 +11,8 @@ export const CreateOrganizationAction = (props: CreateOrganizationActionProps) =
   const { organizationSettings } = useEnvironment();
 
   const currentMembershipCount = (user?.organizationMemberships ?? []).length;
-  const canCreateAdditionalMembership = currentMembershipCount < organizationSettings.maxAllowedMemberships;
+  const canCreateAdditionalMembership =
+    !organizationSettings.maxAllowedMemberships || currentMembershipCount < organizationSettings.maxAllowedMemberships;
 
   if (!user?.createOrganizationEnabled || !canCreateAdditionalMembership) {
     return null;

packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -291,7 +291,7 @@ describe('OrganizationSwitcher', () => {
       expect(getByText('Org2')).toBeInTheDocument();
     });
 
-    it('does not allow creating organization if not allowed to create additional membership', async () => {
+    it('does not allow creating organization if max allowed memberships is reached', async () => {
       const { wrapper, props } = await createFixtures(f => {
         f.withOrganizations();
         f.withMaxAllowedMemberships({ max: 1 });
@@ -308,6 +308,40 @@ describe('OrganizationSwitcher', () => {
       expect(queryByText('Create organization')).not.toBeInTheDocument();
     });
 
+    it('does allow creating organization if max allowed memberships is not reached', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withMaxAllowedMemberships({ max: 2 });
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          create_organization_enabled: true,
+          organization_memberships: [{ name: 'Org1', id: '1', role: 'admin' }],
+        });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { queryByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
+      expect(queryByText('Create organization')).toBeInTheDocument();
+    });
+
+    it('does allow creating organization if max allowed memberships is unlimited', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withMaxAllowedMemberships({ max: 0 });
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          create_organization_enabled: true,
+          organization_memberships: [{ name: 'Org1', id: '1', role: 'admin' }],
+        });
+      });
+
+      props.setProps({ hidePersonal: true });
+      const { queryByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
+      expect(queryByText('Create organization')).toBeInTheDocument();
+    });
+
     it.each([
       ['Admin', 'admin'],
       ['Member', 'basic_member'],