Port changes from core 3

Author: LauraBeatris

.changeset/nice-loops-fail.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+Display message in `TaskChooseOrganization` when user is not allowed to create organizations

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

@@ -1,10 +1,11 @@
 import { useClerk, useSession, useUser } from '@clerk/shared/react';
-import { useState } from 'react';
+import { type ComponentType, useState } from 'react';
 
 import { useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
 import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
+import { Header } from '@/ui/elements/Header';
 import { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';
 import { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView';
 
@@ -13,24 +14,10 @@ import { ChooseOrganizationScreen } from './ChooseOrganizationScreen';
 import { CreateOrganizationScreen } from './CreateOrganizationScreen';
 
 const TaskChooseOrganizationInternal = () => {
-  const { signOut } = useClerk();
-  const { user } = useUser();
-  const { session } = useSession();
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
-  const { otherSessions } = useMultipleSessions({ user });
-  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();
-
-  const handleSignOut = () => {
-    if (otherSessions.length === 0) {
-      return signOut(navigateAfterSignOut);
-    }
-
-    return signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: session?.id });
-  };
 
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasExistingResources = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
-  const identifier = user?.primaryEmailAddress?.emailAddress ?? user?.username;
 
   return (
     <Flow.Root flow='taskChooseOrganization'>
@@ -58,34 +45,56 @@ const TaskChooseOrganizationInternal = () => {
             )}
           </Card.Content>
 
-          <Card.Footer>
-            <Card.Action
-              elementId='signOut'
-              gap={2}
-              justify='center'
-              sx={() => ({ width: '100%' })}
-            >
-              {identifier && (
-                <Card.ActionText
-                  truncate
-                  localizationKey={localizationKeys('taskChooseOrganization.signOut.actionText', {
-                    identifier,
-                  })}
-                />
-              )}
-              <Card.ActionLink
-                sx={() => ({ flexShrink: 0 })}
-                onClick={handleSignOut}
-                localizationKey={localizationKeys('taskChooseOrganization.signOut.actionLink')}
-              />
-            </Card.Action>
-          </Card.Footer>
+          <TaskChooseOrganizationCardFooter />
         </Card.Root>
       </Flow.Part>
     </Flow.Root>
   );
 };
 
+const TaskChooseOrganizationCardFooter = () => {
+  const { signOut } = useClerk();
+  const { user } = useUser();
+  const { session } = useSession();
+  const { otherSessions } = useMultipleSessions({ user });
+  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();
+
+  const handleSignOut = () => {
+    if (otherSessions.length === 0) {
+      return signOut(navigateAfterSignOut);
+    }
+
+    return signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: session?.id });
+  };
+
+  const identifier = user?.primaryEmailAddress?.emailAddress ?? user?.username;
+
+  return (
+    <Card.Footer>
+      <Card.Action
+        elementId='signOut'
+        gap={2}
+        justify='center'
+        sx={() => ({ width: '100%' })}
+      >
+        {identifier && (
+          <Card.ActionText
+            truncate
+            localizationKey={localizationKeys('taskChooseOrganization.signOut.actionText', {
+              identifier,
+            })}
+          />
+        )}
+        <Card.ActionLink
+          sx={() => ({ flexShrink: 0 })}
+          onClick={handleSignOut}
+          localizationKey={localizationKeys('taskChooseOrganization.signOut.actionLink')}
+        />
+      </Card.Action>
+    </Card.Footer>
+  );
+};
+
 type TaskChooseOrganizationFlowsProps = {
   initialFlow: 'create' | 'choose';
 };
@@ -104,6 +113,44 @@ 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'>
+      <Flow.Part part='organizationCreationDisabled'>
+        <Card.Root>
+          <Card.Content>
+            <Header.Root showLogo>
+              <Header.Title
+                localizationKey={localizationKeys('taskChooseOrganization.organizationCreationDisabled.title')}
+              />
+              <Header.Subtitle
+                localizationKey={localizationKeys('taskChooseOrganization.organizationCreationDisabled.subtitle')}
+              />
+            </Header.Root>
+          </Card.Content>
+
+          <TaskChooseOrganizationCardFooter />
+        </Card.Root>
+      </Flow.Part>
+    </Flow.Root>
+  );
+}
+
 export const TaskChooseOrganization = withCoreSessionSwitchGuard(
-  withTaskGuard(withCardStateProvider(TaskChooseOrganizationInternal), 'choose-organization'),
+  withTaskGuard(
+    withCardStateProvider(withOrganizationCreationEnabledGuard(TaskChooseOrganizationInternal)),
+    'choose-organization',
+  ),
 );

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -128,6 +128,7 @@ export type FlowMetadata = {
     | 'complete'
     | 'accountSwitcher'
     | 'chooseOrganization'
+    | 'organizationCreationDisabled'
     | 'enterpriseConnections'
     | 'chooseWallet';
 };

packages/localizations/src/ar-SA.ts

@@ -867,6 +867,10 @@ export const arSA: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'يجب أن تنتمي إلى منظمة',
+      subtitle: 'تواصل مع مسؤول منظمتك للحصول على دعوة.',
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/be-BY.ts

@@ -875,6 +875,10 @@ export const beBY: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'Вы павінны належаць да арганізацыі',
+      subtitle: 'Звярніцеся да адміністратара вашай арганізацыі для атрымання запрашэння.',
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/bg-BG.ts

@@ -871,6 +871,10 @@ export const bgBG: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'Трябва да принадлежите към организация',
+      subtitle: 'Свържете се с администратора на вашата организация за покана.',
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/bn-IN.ts

@@ -875,6 +875,10 @@ export const bnIN: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'আপনাকে অবশ্যই একটি সংগঠনের অন্তর্ভুক্ত হতে হবে',
+      subtitle: 'আমন্ত্রণের জন্য আপনার সংগঠনের প্রশাসকের সাথে যোগাযোগ করুন।',
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/ca-ES.ts

@@ -870,6 +870,10 @@ export const caES: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'Heu de pertànyer a una organització',
+      subtitle: "Contacteu amb l'administrador de la vostra organització per obtenir una invitació.",
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/cs-CZ.ts

@@ -881,6 +881,10 @@ export const csCZ: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'Musíte patřit do organizace',
+      subtitle: 'Kontaktujte administrátora vaší organizace pro pozvánku.',
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/da-DK.ts

@@ -868,6 +868,10 @@ export const daDK: LocalizationResource = {
       subtitle: undefined,
       title: undefined,
     },
+    organizationCreationDisabled: {
+      title: 'Du skal tilhøre en organisation',
+      subtitle: 'Kontakt din organisationsadministrator for en invitation.',
+    },
     signOut: {
       actionLink: undefined,
       actionText: undefined,