Create custom subtitle when org creation is disabled

Author: LauraBeatris

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

@@ -33,6 +33,7 @@ type ChooseOrganizationScreenProps = {
 
 export const ChooseOrganizationScreen = (props: ChooseOrganizationScreenProps) => {
   const card = useCardState();
+  const { user } = useUser();
   const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
 
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
@@ -50,7 +51,13 @@ export const ChooseOrganizationScreen = (props: ChooseOrganizationScreenProps) =
         sx={t => ({ padding: `${t.space.$none} ${t.space.$8}` })}
       >
         <Header.Title localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.title')} />
-        <Header.Subtitle localizationKey={localizationKeys('taskChooseOrganization.chooseOrganization.subtitle')} />
+        <Header.Subtitle
+          localizationKey={
+            user?.createOrganizationEnabled
+              ? localizationKeys('taskChooseOrganization.chooseOrganization.subtitle')
+              : localizationKeys('taskChooseOrganization.chooseOrganization.subtitle__createOrganizationDisabled')
+          }
+        />
       </Header.Root>
       <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$8}` })}>{card.error}</Card.Alert>
       <Col elementDescriptor={descriptors.main}>

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

@@ -307,11 +307,11 @@ describe('TaskChooseOrganization', () => {
         }),
       );
 
-      const { findByText, queryByText, queryByRole } = render(<TaskChooseOrganization />, { wrapper });
+      const { findByText, queryByText } = render(<TaskChooseOrganization />, { wrapper });
 
-      expect(await findByText('Existing Org')).toBeInTheDocument();
+      expect(await findByText('Join an existing organization')).toBeInTheDocument();
       expect(await queryByText('Create new organization')).not.toBeInTheDocument();
-      expect(queryByRole('textbox', { name: /name/i })).not.toBeInTheDocument();
+      expect(await findByText('Existing Org')).toBeInTheDocument();
     });
   });
 });

packages/localizations/src/en-US.ts

@@ -862,6 +862,7 @@ export const enUS: LocalizationResource = {
       action__invitationAccept: 'Join',
       action__suggestionsAccept: 'Request to join',
       subtitle: 'Join an existing organization or create a new one',
+      subtitle__createOrganizationDisabled: 'Join an existing organization',
       suggestionsAcceptedLabel: 'Pending approval',
       title: 'Choose an organization',
     },

packages/shared/src/types/localization.ts

@@ -1304,6 +1304,7 @@ export type __internal_LocalizationResource = {
     chooseOrganization: {
       title: LocalizationValue;
       subtitle: LocalizationValue;
+      subtitle__createOrganizationDisabled: LocalizationValue;
       suggestionsAcceptedLabel: LocalizationValue;
       action__suggestionsAccept: LocalizationValue;
       action__createOrganization: LocalizationValue;