Replace throwing error with opening modal

Author: LauraBeatris

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

@@ -23,7 +23,7 @@ import type {
   __experimental_CheckoutInstance,
   __experimental_CheckoutOptions,
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsModalProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -176,7 +176,6 @@ declare global {
 
 const CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE = 'cannot_render_billing_disabled';
 const CANNOT_RENDER_USER_MISSING_ERROR_CODE = 'cannot_render_user_missing';
-const CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE = 'cannot_render_organizations_disabled';
 const CANNOT_RENDER_ORGANIZATION_MISSING_ERROR_CODE = 'cannot_render_organization_missing';
 const CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE = 'cannot_render_single_session_enabled';
 const CANNOT_RENDER_API_KEYS_DISABLED_ERROR_CODE = 'cannot_render_api_keys_disabled';
@@ -740,16 +739,16 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
-  public __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps): void => {
+  public __internal_openEnableOrganizationsPrompt = (props?: __internal_EnableOrganizationsPromptProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls
-      .ensureMounted({ preloadHint: 'EnableOrganizations' })
-      .then(controls => controls.openModal('enableOrganizations', props || {}));
+      .ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })
+      .then(controls => controls.openModal('enableOrganizationsPrompt', props || {}));
   };
 
   public __internal_closeEnableOrganizations = (): void => {
     this.assertComponentsReady(this.#componentControls);
-    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizations'));
+    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizationsPrompt'));
   };
 
   public __internal_openBlankCaptchaModal = (): Promise<unknown> => {
@@ -825,8 +824,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_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -855,8 +854,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -997,8 +996,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_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationProfile',
         });
       }
       return;
@@ -1037,8 +1036,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1068,8 +1067,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_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1107,8 +1106,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_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationList',
         });
       }
       return;
@@ -1294,8 +1293,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_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;

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

@@ -4,18 +4,6 @@ const formatWarning = (msg: string) => {
   return `🔒 Clerk:\n${msg.trim()}\n(This notice only appears in development)`;
 };
 
-const createMessageForDisabledOrganizations = (
-  componentName:
-    | 'OrganizationProfile'
-    | 'OrganizationSwitcher'
-    | 'OrganizationList'
-    | 'CreateOrganization'
-    | 'TaskChooseOrganization',
-) => {
-  return formatWarning(
-    `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`,
-  );
-};
 const createMessageForDisabledBilling = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => {
   return formatWarning(
     `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable billing. Since billing is disabled, this is no-op.`,
@@ -37,7 +25,6 @@ const warnings = {
   cannotRenderComponentWhenUserDoesNotExist:
     '<UserProfile/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
   cannotRenderComponentWhenOrgDoesNotExist: `<OrganizationProfile/> cannot render unless an organization is active. Since no organization is currently active, this is no-op.`,
-  cannotRenderAnyOrganizationComponent: createMessageForDisabledOrganizations,
   cannotRenderAnyBillingComponent: createMessageForDisabledBilling,
   cannotOpenUserProfile:
     'The UserProfile modal cannot render unless a user is signed in. Since no user is signed in, this is no-op.',

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

@@ -1,6 +1,6 @@
 import type {
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
@@ -28,7 +28,7 @@ import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
   CreateOrganizationModal,
-  EnableOrganizationsModal,
+  EnableOrganizationsPrompt,
   ImpersonationFab,
   KeylessPrompt,
   OrganizationProfileModal,
@@ -82,7 +82,7 @@ export type ComponentControls = {
       | 'userVerification'
       | 'waitlist'
       | 'blankCaptcha'
-      | 'enableOrganizations',
+      | 'enableOrganizationsPrompt',
   >(
     modal: T,
     props: T extends 'signIn'
@@ -93,8 +93,8 @@ export type ComponentControls = {
           ? __internal_UserVerificationProps
           : T extends 'waitlist'
             ? WaitlistProps
-            : T extends 'enableOrganizations'
-              ? __internal_EnableOrganizationsProps
+            : T extends 'enableOrganizationsPrompt'
+              ? __internal_EnableOrganizationsPromptProps
               : UserProfileProps,
   ) => void;
   closeModal: (
@@ -108,7 +108,7 @@ export type ComponentControls = {
       | 'userVerification'
       | 'waitlist'
       | 'blankCaptcha'
-      | 'enableOrganizations',
+      | 'enableOrganizationsPrompt',
     options?: {
       notify?: boolean;
     },
@@ -158,7 +158,7 @@ interface ComponentsState {
   userVerificationModal: null | __internal_UserVerificationProps;
   organizationProfileModal: null | OrganizationProfileProps;
   createOrganizationModal: null | CreateOrganizationProps;
-  enableOrganizationsModal: null | __internal_EnableOrganizationsProps;
+  enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps;
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
   waitlistModal: null | WaitlistProps;
@@ -252,7 +252,7 @@ const Components = (props: ComponentsProps) => {
     userVerificationModal: null,
     organizationProfileModal: null,
     createOrganizationModal: null,
-    enableOrganizationsModal: null,
+    enableOrganizationsPromptModal: null,
     organizationSwitcherPrefetch: false,
     waitlistModal: null,
     blankCaptchaModal: null,
@@ -282,7 +282,6 @@ const Components = (props: ComponentsProps) => {
     createOrganizationModal,
     waitlistModal,
     blankCaptchaModal,
-    enableOrganizationsModal,
     checkoutDrawer,
     planDetailsDrawer,
     subscriptionDetailsDrawer,
@@ -352,6 +351,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 === 'enableOrganizationsPrompt') {
+        setState(s => {
+          if (s.enableOrganizationsPromptModal) {
+            return s; // Modal is already open, don't update state
+          }
+          return { ...s, [`${name}Modal`]: props };
+        });
+        return;
+      }
+
       function handleCloseModalForExperimentalUserVerification() {
         if (!('afterVerificationCancelled' in props)) {
           return;
@@ -494,22 +505,6 @@ const Components = (props: ComponentsProps) => {
     </LazyModalRenderer>
   );
 
-  const mountedEnableOrganizationsModal = (
-    <LazyModalRenderer
-      globalAppearance={state.appearance}
-      appearanceKey={'enableOrganizations'}
-      componentAppearance={enableOrganizationsModal?.appearance}
-      flowName={'enableOrganizations'}
-      onClose={() => componentsControls.closeModal('enableOrganizations')}
-      onExternalNavigate={() => componentsControls.closeModal('enableOrganizations')}
-      startPath={buildVirtualRouterUrl({ base: '/enable-organizations', path: urlStateParam?.path })}
-      componentName={'EnableOrganizationsModal'}
-      modalContainerSx={{ alignItems: 'center' }}
-    >
-      <EnableOrganizationsModal {...enableOrganizationsModal} />
-    </LazyModalRenderer>
-  );
-
   const mountedOrganizationProfileModal = (
     <LazyModalRenderer
       globalAppearance={state.appearance}
@@ -613,7 +608,6 @@ const Components = (props: ComponentsProps) => {
         {createOrganizationModal && mountedCreateOrganizationModal}
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
-        {enableOrganizationsModal && mountedEnableOrganizationsModal}
 
         <MountedCheckoutDrawer
           appearance={state.appearance}
@@ -639,6 +633,15 @@ const Components = (props: ComponentsProps) => {
           </LazyImpersonationFabProvider>
         )}
 
+        {state.enableOrganizationsPromptModal && (
+          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
+            <EnableOrganizationsPrompt
+              callerString='useOrganization'
+              {...state.enableOrganizationsPromptModal}
+            />
+          </LazyImpersonationFabProvider>
+        )}
+
         {state.options?.__internal_keyless_claimKeylessApplicationUrl &&
           state.options?.__internal_keyless_copyInstanceKeysUrl && (
             <LazyImpersonationFabProvider globalAppearance={state.appearance}>