Mount components once mutation is resolved

Author: LauraBeatris

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

@@ -36,9 +36,9 @@ import type {
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
   BillingNamespace,
-  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
+  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -826,6 +826,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationProfile',
+          onComplete: () => {
+            this.openOrganizationProfile();
+          },
         });
       }
       return;
@@ -856,6 +859,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.openCreateOrganization();
+          },
         });
       }
       return;
@@ -998,6 +1004,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationProfile',
+          onComplete: () => {
+            this.mountOrganizationProfile(node, props);
+          },
         });
       }
       return;
@@ -1038,6 +1047,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.mountCreateOrganization();
+          },
         });
       }
       return;
@@ -1069,6 +1081,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.mountOrganizationSwitcher(node, props);
+          },
         });
       }
       return;
@@ -1105,9 +1120,14 @@ export class Clerk implements ClerkInterface {
   public mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
+      debugger;
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationList',
+          onComplete: () => {
+            debugger;
+            this.mountOrganizationList(node, props);
+          },
         });
       }
       return;
@@ -1295,6 +1315,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.mountTaskChooseOrganization(node, props);
+          },
         });
       }
       return;

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

@@ -24,12 +24,13 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
       .__internal_enableEnvironmentSetting({
         enable_organizations: true,
       })
-      .then(() => {
+      .then(async () => {
         // Re-fetch environment to get updated settings
         // @ts-expect-error - __unstable__environment is not typed
         const environment = clerk?.__unstable__environment;
-        environment.fetch?.();
+        await environment.fetch?.();
         clerk?.__internal_closeEnableOrganizationsPrompt?.();
+        props.onComplete?.();
       })
       .finally(() => {
         setIsLoading(false);

packages/shared/src/types/clerk.ts

@@ -1436,13 +1436,16 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
-export type __internal_EnableOrganizationsPromptProps =
+export type __internal_EnableOrganizationsPromptProps = {
+  onComplete?: () => void;
+} & (
   | {
       componentName: 'OrganizationSwitcher' | 'OrganizationProfile' | 'OrganizationList';
     }
   | {
       utilityName: 'useOrganizationList' | 'useOrganization';
-    };
+    }
+);
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;