Introduce mutation to enable organization settings

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,
@@ -746,7 +746,7 @@ export class Clerk implements ClerkInterface {
       .then(controls => controls.openModal('enableOrganizationsPrompt', props || {}));
   };
 
-  public __internal_closeEnableOrganizations = (): void => {
+  public __internal_closeEnableOrganizationsPrompt = (): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizationsPrompt'));
   };

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

@@ -66,7 +66,7 @@ export interface FapiClient {
 }
 
 // List of paths that should not receive the session ID parameter in the URL
-const unauthorizedPathPrefixes = ['/client', '/waitlist'];
+const unauthorizedPathPrefixes = ['/client', '/waitlist', '/dev_tools'];
 
 type FapiClientOptions = {
   frontendApi: string;

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

@@ -0,0 +1,21 @@
+import type { ClerkResourceJSON, DevToolsResource, EnableEnvironmentSettingParams } from '@clerk/shared/types';
+
+import { BaseResource } from './Base';
+
+/**
+ * @internal
+ */
+export class DevTools extends BaseResource implements DevToolsResource {
+  pathRoot = '/dev_tools';
+
+  protected fromJSON(_data: ClerkResourceJSON | null): this {
+    return this;
+  }
+
+  async __internal_enableEnvironmentSetting(params: EnableEnvironmentSettingParams) {
+    await this._basePatch({
+      path: `${this.pathRoot}/enable_environment_setting`,
+      body: params,
+    });
+  }
+}

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

@@ -1,16 +1,40 @@
+import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
+import { useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
+import { DevTools } from '../../../../core/resources/DevTools';
 import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, PromptContainer } from '../shared';
 
 const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
   const ctaText = 'componentName' in props ? `<${props.componentName} />` : props.utilityName;
+  const clerk = useClerk();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEnableOrganizations = () => {
+    setIsLoading(true);
+
+    void new DevTools()
+      .__internal_enableEnvironmentSetting({
+        enable_organizations: true,
+      })
+      .then(() => {
+        // Re-fetch environment to get updated settings
+        // @ts-expect-error - __unstable__environment is not typed
+        const environment = clerk?.__unstable__environment;
+        environment.fetch?.();
+        clerk?.__internal_closeEnableOrganizationsPrompt?.();
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
 
   return (
     <Portal>
@@ -152,7 +176,6 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
             `}
           />
 
-          {/* TODO -> Introduce FAPI mutation to enable organizations */}
           <Flex
             direction='col'
             justify='center'
@@ -163,6 +186,8 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
           >
             <button
               type='button'
+              onClick={handleEnableOrganizations}
+              disabled={isLoading}
               css={css`
                 ${mainCTAStyles};
                 min-width: 100%;
@@ -175,14 +200,19 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                   0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
                   0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
 
-                &:hover {
+                &:hover:not(:disabled) {
                   box-shadow:
                     0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
                     0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
                     0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
                     0px 0px 0px 1px rgba(0, 0, 0, 0.1),
                     0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
                 }
+
+                &:disabled {
+                  opacity: 0.6;
+                  cursor: not-allowed;
+                }
               `}
             >
               Enable Organizations

packages/react/src/isomorphicClerk.ts

@@ -872,9 +872,9 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __internal_closeEnableOrganizations = () => {
+  __internal_closeEnableOrganizationsPrompt = () => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__internal_closeEnableOrganizations();
+      this.clerkjs.__internal_closeEnableOrganizationsPrompt();
     }
   };
 

packages/shared/src/organization.ts

@@ -33,7 +33,7 @@ export const withOrganizationSettingsEnabled =
     // @ts-expect-error - __unstable__environment is not typed
     const environment = clerk?.__unstable__environment;
 
-    if (!environment?.organizationSettings.enabled) {
+    if (environment?.isDevelopment?.() && !environment?.organizationSettings.enabled) {
       clerk?.__internal_openEnableOrganizationsPrompt({
         utilityName,
       });

packages/shared/src/types/clerk.ts

@@ -325,7 +325,7 @@ export interface Clerk {
   /**
    * Closes the Clerk Enable Organizations modal.
    */
-  __internal_closeEnableOrganizations: () => void;
+  __internal_closeEnableOrganizationsPrompt: () => void;
 
   /**
    * Opens the Google One Tap component.

packages/shared/src/types/devtools.ts

@@ -0,0 +1,12 @@
+import type { ClerkResource } from './resource';
+
+export type EnableEnvironmentSettingParams = {
+  enable_organizations: boolean;
+};
+
+/**
+ * @internal
+ */
+export interface DevToolsResource extends ClerkResource {
+  __internal_enableEnvironmentSetting: (params: EnableEnvironmentSettingParams) => Promise<void>;
+}

packages/shared/src/types/index.ts

@@ -12,6 +12,7 @@ export type * from './commerceSettings';
 export type * from './customMenuItems';
 export type * from './customPages';
 export type * from './deletedObject';
+export type * from './devtools';
 export type * from './displayConfig';
 export type * from './elementIds';
 export type * from './emailAddress';