Do not display error screen if there are existing resources

Author: LauraBeatris

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx

@@ -240,4 +240,74 @@ describe('TaskChooseOrganization', () => {
       expect(queryByLabelText(/Slug/i)).toBeInTheDocument();
     });
   });
+
+  describe('when users are not allowed to create organizations', () => {
+    it('does not display create organization screen', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withForceOrganizationSelection();
+        f.withUser({
+          create_organization_enabled: false,
+          tasks: [{ key: 'choose-organization' }],
+        });
+      });
+
+      const { queryByText } = render(<TaskChooseOrganization />, { wrapper });
+
+      expect(queryByText(/create new organization/i)).not.toBeInTheDocument();
+      expect(queryByText(/you must belong to an organization/i)).toBeInTheDocument();
+      expect(queryByText(/contact your organization admin for an invitation/i)).toBeInTheDocument();
+    });
+
+    it('with existing memberships or suggestions, displays create organization screen', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withForceOrganizationSelection();
+        f.withUser({
+          create_organization_enabled: false,
+        });
+      });
+
+      fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationMembership({
+              id: '1',
+              organization: {
+                id: '1',
+                name: 'Existing Org',
+                slug: 'org1',
+                membersCount: 1,
+                adminDeleteEnabled: false,
+                maxAllowedMemberships: 1,
+                pendingInvitationsCount: 1,
+              },
+            }),
+          ],
+          total_count: 1,
+        }),
+      );
+
+      fixtures.clerk.user?.getOrganizationSuggestions.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationSuggestion({
+              id: '2',
+              emailAddress: '[email protected]',
+              publicOrganizationData: {
+                name: 'OrgTwoSuggestion',
+              },
+            }),
+          ],
+          total_count: 1,
+        }),
+      );
+
+      const { findByText, queryByRole } = render(<TaskChooseOrganization />, { wrapper });
+
+      expect(await findByText('Existing Org')).toBeInTheDocument();
+      expect(await findByText('Create new organization')).toBeInTheDocument();
+      expect(queryByRole('textbox', { name: /name/i })).not.toBeInTheDocument();
+    });
+  });
 });

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

@@ -1,5 +1,5 @@
 import { useClerk, useSession, useUser } from '@clerk/shared/react';
-import { type ComponentType, useState } from 'react';
+import { useState } from 'react';
 
 import { useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
 import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
@@ -14,10 +14,16 @@ import { ChooseOrganizationScreen } from './ChooseOrganizationScreen';
 import { CreateOrganizationScreen } from './CreateOrganizationScreen';
 
 const TaskChooseOrganizationInternal = () => {
+  const { user } = useUser();
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
 
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasExistingResources = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
+  const isOrganizationCreationDisabled = !isLoading && !user?.createOrganizationEnabled && !hasExistingResources;
+
+  if (isOrganizationCreationDisabled) {
+    return <OrganizationCreationDisabledScreen />;
+  }
 
   return (
     <Flow.Root flow='taskChooseOrganization'>
@@ -113,18 +119,6 @@ const TaskChooseOrganizationFlows = withCardStateProvider((props: TaskChooseOrga
   return <ChooseOrganizationScreen onCreateOrganizationClick={() => setCurrentFlow('create')} />;
 });
 
-export const withOrganizationCreationEnabledGuard = <T extends object>(Component: ComponentType<T>) => {
-  return (props: T) => {
-    const { user } = useUser();
-
-    if (!user?.createOrganizationEnabled) {
-      return <OrganizationCreationDisabledScreen />;
-    }
-
-    return <Component {...props} />;
-  };
-};
-
 function OrganizationCreationDisabledScreen() {
   return (
     <Flow.Root flow='taskChooseOrganization'>
@@ -149,8 +143,5 @@ function OrganizationCreationDisabledScreen() {
 }
 
 export const TaskChooseOrganization = withCoreSessionSwitchGuard(
-  withTaskGuard(
-    withCardStateProvider(withOrganizationCreationEnabledGuard(TaskChooseOrganizationInternal)),
-    'choose-organization',
-  ),
+  withTaskGuard(withCardStateProvider(TaskChooseOrganizationInternal), 'choose-organization'),
 );