Add HOC to open modal based on org settings

Author: LauraBeatris

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

@@ -23,6 +23,7 @@ import type {
   __experimental_CheckoutInstance,
   __experimental_CheckoutOptions,
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsModalProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -35,9 +36,9 @@ import type {
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
   BillingNamespace,
-  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
+  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -715,6 +716,18 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
+  public __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'EnableOrganizations' })
+      .then(controls => controls.openModal('enableOrganizations', props || {}));
+  };
+
+  public __internal_closeEnableOrganizations = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizations'));
+  };
+
   public __internal_openBlankCaptchaModal = (): Promise<unknown> => {
     this.assertComponentsReady(this.#componentControls);
     return this.#componentControls

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

@@ -1,5 +1,6 @@
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
@@ -27,6 +28,7 @@ import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
   CreateOrganizationModal,
+  EnableOrganizationsModal,
   ImpersonationFab,
   KeylessPrompt,
   OrganizationProfileModal,
@@ -79,7 +81,8 @@ export type ComponentControls = {
       | 'createOrganization'
       | 'userVerification'
       | 'waitlist'
-      | 'blankCaptcha',
+      | 'blankCaptcha'
+      | 'enableOrganizations',
   >(
     modal: T,
     props: T extends 'signIn'
@@ -90,7 +93,9 @@ export type ComponentControls = {
           ? __internal_UserVerificationProps
           : T extends 'waitlist'
             ? WaitlistProps
-            : UserProfileProps,
+            : T extends 'enableOrganizations'
+              ? __internal_EnableOrganizationsProps
+              : UserProfileProps,
   ) => void;
   closeModal: (
     modal:
@@ -102,7 +107,8 @@ export type ComponentControls = {
       | 'createOrganization'
       | 'userVerification'
       | 'waitlist'
-      | 'blankCaptcha',
+      | 'blankCaptcha'
+      | 'enableOrganizations',
     options?: {
       notify?: boolean;
     },
@@ -152,6 +158,7 @@ interface ComponentsState {
   userVerificationModal: null | __internal_UserVerificationProps;
   organizationProfileModal: null | OrganizationProfileProps;
   createOrganizationModal: null | CreateOrganizationProps;
+  enableOrganizationsModal: null | __internal_EnableOrganizationsProps;
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
   waitlistModal: null | WaitlistProps;
@@ -245,6 +252,7 @@ const Components = (props: ComponentsProps) => {
     userVerificationModal: null,
     organizationProfileModal: null,
     createOrganizationModal: null,
+    enableOrganizationsModal: null,
     organizationSwitcherPrefetch: false,
     waitlistModal: null,
     blankCaptchaModal: null,
@@ -274,6 +282,7 @@ const Components = (props: ComponentsProps) => {
     createOrganizationModal,
     waitlistModal,
     blankCaptchaModal,
+    enableOrganizationsModal,
     checkoutDrawer,
     planDetailsDrawer,
     subscriptionDetailsDrawer,
@@ -325,9 +334,10 @@ const Components = (props: ComponentsProps) => {
       clearUrlStateParam();
       setState(s => {
         function handleCloseModalForExperimentalUserVerification() {
-          const modal = s[`${name}Modal`] || {};
+          const modal = s[`${name}Modal`];
           if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {
-            modal.afterVerificationCancelled?.();
+            // TypeScript doesn't narrow properly with template literal access and 'in' operator
+            (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();
           }
         }
 
@@ -484,6 +494,22 @@ 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}
@@ -587,6 +613,7 @@ const Components = (props: ComponentsProps) => {
         {createOrganizationModal && mountedCreateOrganizationModal}
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
+        {enableOrganizationsModal && mountedEnableOrganizationsModal}
 
         <MountedCheckoutDrawer
           appearance={state.appearance}

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

@@ -0,0 +1,63 @@
+import type {
+  __internal_EnableOrganizationsModalProps,
+  __internal_EnableOrganizationsProps,
+} from '@clerk/shared/types';
+import React from 'react';
+
+import { EnableOrganizationsContext } 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';
+
+const EnableOrganizationsContent = withCardStateProvider(() => (
+  <Card.Root>
+    <Card.Content>
+      <Header.Root>
+        <Header.Title>Enable organizations</Header.Title>
+      </Header.Root>
+    </Card.Content>
+    <Card.Footer />
+  </Card.Root>
+));
+
+function EnableOrganizationsRoutes(): JSX.Element {
+  return (
+    <Flow.Root flow='enableOrganizations'>
+      <Switch>
+        <Route index>
+          <EnableOrganizationsContent />
+        </Route>
+      </Switch>
+    </Flow.Root>
+  );
+}
+
+EnableOrganizationsRoutes.displayName = 'EnableOrganizations';
+
+const EnableOrganizations: React.ComponentType<__internal_EnableOrganizationsProps> =
+  withCoreSessionSwitchGuard(EnableOrganizationsRoutes);
+
+// 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'>
+      <EnableOrganizationsContext.Provider
+        value={{
+          componentName: 'EnableOrganizations',
+          routing: 'virtual',
+          ...props,
+        }}
+      >
+        <div>
+          <EnableOrganizations routing='virtual' />
+        </div>
+      </EnableOrganizationsContext.Provider>
+    </Route>
+  );
+};
+
+export { EnableOrganizations, EnableOrganizationsModal };

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

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+import type { EnableOrganizationsCtx } from '../../types';
+
+export type EnableOrganizationsContextType = EnableOrganizationsCtx;
+
+export const EnableOrganizationsContext = createContext<EnableOrganizationsCtx | null>(null);
+
+export const useEnableOrganizations = (): EnableOrganizationsContextType => {
+  const context = useContext(EnableOrganizationsContext);
+
+  if (!context || context.componentName !== 'EnableOrganizations') {
+    throw new Error(
+      'Clerk: useEnableOrganizationsContext called outside of the mounted EnableOrganizations component.',
+    );
+  }
+
+  const { componentName, ...ctx } = context;
+
+  return {
+    ...ctx,
+    componentName,
+  };
+};

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

@@ -101,7 +101,8 @@ export type FlowMetadata = {
     | 'oauthConsent'
     | 'subscriptionDetails'
     | 'tasks'
-    | 'taskChooseOrganization';
+    | 'taskChooseOrganization'
+    | 'enableOrganizations';
   part?:
     | 'start'
     | 'emailCode'

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -27,6 +27,7 @@ const componentImportPaths = {
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
+  EnableOrganizations: () => import(/* webpackChunkName: "enableOrganizations" */ '../components/EnableOrganizations'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -44,6 +45,14 @@ export const UserVerificationModal = lazy(() =>
   componentImportPaths.UserVerification().then(module => ({ default: module.UserVerificationModal })),
 );
 
+export const EnableOrganizations = lazy(() =>
+  componentImportPaths.EnableOrganizations().then(module => ({ default: module.EnableOrganizations })),
+);
+
+export const EnableOrganizationsModal = lazy(() =>
+  componentImportPaths.EnableOrganizations().then(module => ({ default: module.EnableOrganizationsModal })),
+);
+
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
 export const SignUpModal = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUpModal })));
@@ -144,6 +153,7 @@ export const ClerkComponents = {
   UserButton,
   UserProfile,
   UserVerification,
+  EnableOrganizations,
   OrganizationSwitcher,
   OrganizationList,
   OrganizationProfile,
@@ -154,6 +164,7 @@ export const ClerkComponents = {
   OrganizationProfileModal,
   CreateOrganizationModal,
   UserVerificationModal,
+  EnableOrganizationsModal,
   GoogleOneTap,
   Waitlist,
   WaitlistModal,

packages/clerk-js/src/ui/types.ts

@@ -1,5 +1,6 @@
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -75,6 +76,11 @@ export type UserVerificationCtx = __internal_UserVerificationProps & {
   mode?: ComponentMode;
 };
 
+export type EnableOrganizationsCtx = __internal_EnableOrganizationsProps & {
+  componentName: 'EnableOrganizations';
+  mode?: ComponentMode;
+};
+
 export type UserProfileCtx = UserProfileProps & {
   componentName: 'UserProfile';
   mode?: ComponentMode;

packages/react/src/isomorphicClerk.ts

@@ -3,6 +3,7 @@ import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsModalProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -131,6 +132,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private preopenOrganizationProfile?: null | OrganizationProfileProps = null;
   private preopenCreateOrganization?: null | CreateOrganizationProps = null;
   private preOpenWaitlist?: null | WaitlistProps = null;
+  private preopenEnableOrganizations?: null | __internal_EnableOrganizationsModalProps = null;
   private premountSignInNodes = new Map<HTMLDivElement, SignInProps | undefined>();
   private premountSignUpNodes = new Map<HTMLDivElement, SignUpProps | undefined>();
   private premountUserAvatarNodes = new Map<HTMLDivElement, UserAvatarProps | undefined>();
@@ -611,6 +613,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.openWaitlist(this.preOpenWaitlist);
     }
 
+    if (this.preopenEnableOrganizations !== null) {
+      clerkjs.__internal_openEnableOrganizations(this.preopenEnableOrganizations);
+    }
+
     this.premountSignInNodes.forEach((props, node) => {
       clerkjs.mountSignIn(node, props);
     });
@@ -852,6 +858,22 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__internal_openEnableOrganizations(props);
+    } else {
+      this.preopenEnableOrganizations = props;
+    }
+  };
+
+  __internal_closeEnableOrganizations = () => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__internal_closeEnableOrganizations();
+    } else {
+      this.preopenEnableOrganizations = null;
+    }
+  };
+
   openGoogleOneTap = (props?: GoogleOneTapProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.openGoogleOneTap(props);