Replace throwing error with opening modal

Author: LauraBeatris

packages/clerk-js/src/core/clerk.ts

@@ -801,8 +801,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizations({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1044,8 +1044,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizations({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1083,8 +1083,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizations({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1270,8 +1270,8 @@ export class Clerk implements ClerkInterface {
 
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizations({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;

packages/clerk-js/src/ui/Components.tsx

@@ -352,6 +352,18 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.openModal = (name, props) => {
+      // Prevent opening enableOrganizations modal if it's already open
+      // to avoid duplicate mounting when component is called multiple times
+      if (name === 'enableOrganizations') {
+        setState(s => {
+          if (s.enableOrganizationsModal) {
+            return s; // Modal is already open, don't update state
+          }
+          return { ...s, [`${name}Modal`]: props };
+        });
+        return;
+      }
+
       function handleCloseModalForExperimentalUserVerification() {
         if (!('afterVerificationCancelled' in props)) {
           return;
@@ -496,11 +508,15 @@ const Components = (props: ComponentsProps) => {
 
   const mountedEnableOrganizationsModal = (
     <LazyModalRenderer
+      canCloseModal={false}
       globalAppearance={state.appearance}
       appearanceKey={'enableOrganizations'}
       componentAppearance={enableOrganizationsModal?.appearance}
       flowName={'enableOrganizations'}
-      onClose={() => componentsControls.closeModal('enableOrganizations')}
+      onClose={() => {
+        enableOrganizationsModal?.onDismiss?.();
+        componentsControls.closeModal('enableOrganizations');
+      }}
       onExternalNavigate={() => componentsControls.closeModal('enableOrganizations')}
       startPath={buildVirtualRouterUrl({ base: '/enable-organizations', path: urlStateParam?.path })}
       componentName={'EnableOrganizationsModal'}

packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx

@@ -4,44 +4,35 @@ import type {
 } from '@clerk/shared/types';
 import React from 'react';
 
-import { EnableOrganizationsContext } from '@/ui/contexts/components/EnableOrganizations';
+import {
+  EnableOrganizationsContext,
+  useEnableOrganizationsContext,
+} from '@/ui/contexts/components/EnableOrganizations';
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
-import { Header } from '@/ui/elements/Header';
 
 import { withCoreSessionSwitchGuard } from '../../contexts';
-import { Flow } from '../../customizables';
-import { Route, Switch } from '../../router';
+import { Text } from '../../customizables';
+import { Route } from '../../router';
 
-const EnableOrganizationsContent = withCardStateProvider(() => (
-  <Card.Root>
-    <Card.Content>
-      <Header.Root>
-        <Header.Title>Enable organizations</Header.Title>
-      </Header.Root>
-    </Card.Content>
-    <Card.Footer />
-  </Card.Root>
-));
+const EnableOrganizationsContent = withCardStateProvider(() => {
+  const { callerName } = useEnableOrganizationsContext();
 
-function EnableOrganizationsRoutes(): JSX.Element {
   return (
-    <Flow.Root flow='enableOrganizations'>
-      <Switch>
-        <Route index>
-          <EnableOrganizationsContent />
-        </Route>
-      </Switch>
-    </Flow.Root>
+    <Card.Root>
+      <Card.Content>
+        <Text>
+          In order to use <code>{callerName}</code>, you need to enable organizations.
+        </Text>
+      </Card.Content>
+      <Card.Footer />
+    </Card.Root>
   );
-}
-
-EnableOrganizationsRoutes.displayName = 'EnableOrganizations';
+});
 
 const EnableOrganizations: React.ComponentType<__internal_EnableOrganizationsProps> =
-  withCoreSessionSwitchGuard(EnableOrganizationsRoutes);
+  withCoreSessionSwitchGuard(EnableOrganizationsContent);
 
-// TODO -> Maybe move this to a inner folder for all in-app modals
 const EnableOrganizationsModal = (props: __internal_EnableOrganizationsModalProps): JSX.Element => {
   return (
     <Route path='enable-organizations'>
@@ -53,7 +44,10 @@ const EnableOrganizationsModal = (props: __internal_EnableOrganizationsModalProp
         }}
       >
         <div>
-          <EnableOrganizations routing='virtual' />
+          <EnableOrganizations
+            routing='virtual'
+            {...props}
+          />
         </div>
       </EnableOrganizationsContext.Provider>
     </Route>

packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx

@@ -6,7 +6,7 @@ export type EnableOrganizationsContextType = EnableOrganizationsCtx;
 
 export const EnableOrganizationsContext = createContext<EnableOrganizationsCtx | null>(null);
 
-export const useEnableOrganizations = (): EnableOrganizationsContextType => {
+export const useEnableOrganizationsContext = (): EnableOrganizationsContextType => {
   const context = useContext(EnableOrganizationsContext);
 
   if (!context || context.componentName !== 'EnableOrganizations') {

packages/shared/src/organization.ts

@@ -1,4 +1,4 @@
-import type { EnvironmentResource, LoadedClerk, OrganizationMembershipResource } from './types';
+import type { LoadedClerk, OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
@@ -16,15 +16,6 @@ export function getCurrentOrganizationMembership(
   );
 }
 
-/**
- * Clerk instance with unstable environment access
- *
- * @internal
- */
-export type ClerkWithEnvironment = {
-  __unstable__environment?: EnvironmentResource | null;
-};
-
 /**
  * Wraps a hook function in a check to see if organization settings is enabled
  *
@@ -36,14 +27,17 @@ export const withOrganizationSettingsEnabled =
   <TParams extends any[], TReturn>(
     hook: (...args: TParams) => TReturn,
     getLoadedClerk: () => LoadedClerk | null | undefined,
+    callerName?: string,
   ) =>
   (...args: TParams): TReturn => {
     const clerk = getLoadedClerk();
     // @ts-expect-error - __unstable__environment is not typed
     const environment = clerk?.__unstable__environment;
 
     if (!environment?.organizationSettings.enabled) {
-      clerk?.__internal_openEnableOrganizations({});
+      clerk?.__internal_openEnableOrganizations({
+        callerName,
+      });
     }
 
     return hook(...args);

packages/shared/src/react/hooks/useOrganization.tsx

@@ -472,4 +472,8 @@ function useOrganizationInternal<T extends UseOrganizationParams>(params?: T): U
   };
 }
 
-export const useOrganization = withOrganizationSettingsEnabled(useOrganizationInternal, () => useClerk());
+export const useOrganization = withOrganizationSettingsEnabled(
+  useOrganizationInternal,
+  () => useClerk(),
+  'useOrganization',
+);

packages/shared/src/react/hooks/useOrganizationList.tsx

@@ -386,4 +386,8 @@ function useOrganizationListInternal<T extends UseOrganizationListParams>(params
   };
 }
 
-export const useOrganizationList = withOrganizationSettingsEnabled(useOrganizationListInternal, () => useClerk());
+export const useOrganizationList = withOrganizationSettingsEnabled(
+  useOrganizationListInternal,
+  () => useClerk(),
+  'useOrganizationList',
+);

packages/shared/src/types/appearance.ts

@@ -1121,7 +1121,6 @@ export type Appearance<T = Theme> = T &
     taskChooseOrganization?: T;
     /**
      * Theme overrides that only apply to the `<EnableOrganizations/>` component
-     * TODO -> Change to __internal
      */
     enableOrganizations?: T;
   };

packages/shared/src/types/clerk.ts

@@ -1440,6 +1440,8 @@ export type __internal_UserVerificationModalProps = WithoutRouting<__internal_Us
 
 export type __internal_EnableOrganizationsProps = RoutingOptions & {
   appearance?: EnableOrganizationsTheme;
+  callerName?: string;
+  onDismiss?: () => void;
 };
 
 export type __internal_EnableOrganizationsModalProps = WithoutRouting<__internal_EnableOrganizationsProps>;

packages/vue/src/composables/useOrganization.ts

@@ -92,4 +92,5 @@ const useOrganizationInternal: UseOrganization = () => {
 export const useOrganization = withOrganizationSettingsEnabled(
   useOrganizationInternal,
   () => useClerk().value as LoadedClerk,
+  'useOrganization',
 );