feat(types,clerk-js): Show/Hide organization domains based on instanc…

…e settings

This commit updates our logic in the <OrganizationProfile/> logic to show/hide
the Organization Domain feature based on instance settings. We only allow users
to add a domain if the setting is enabled. Also we conditionally render the
available enrollment modes based once again on the instance organization settings

.changeset/dry-worms-lick.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -1,4 +1,4 @@
-import type { OrganizationSettingsJSON, OrganizationSettingsResource } from '@clerk/types';
+import type { OrganizationEnrollmentMode, OrganizationSettingsJSON, OrganizationSettingsResource } from '@clerk/types';
 
 import { BaseResource } from './internal';
 
@@ -8,17 +8,25 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
   actions!: {
     adminDelete: boolean;
   };
+  domains!: {
+    enabled: boolean;
+    enrollmentModes: OrganizationEnrollmentMode[];
+  };
 
   public constructor(data: OrganizationSettingsJSON) {
     super();
     this.fromJSON(data);
   }
 
   protected fromJSON(data: OrganizationSettingsJSON | null): this {
-    const { enabled = false, max_allowed_memberships = 0, actions } = data || {};
+    const { enabled = false, max_allowed_memberships = 0, actions, domains } = data || {};
     this.enabled = enabled;
     this.maxAllowedMemberships = max_allowed_memberships;
     this.actions = { adminDelete: actions?.admin_delete || false };
+    this.domains = {
+      enabled: domains?.enabled || false,
+      enrollmentModes: domains?.enrollment_modes || [],
+    };
     return this;
   }
 }

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

@@ -1,5 +1,5 @@
 import { AddBlockButton, BlockButton } from '../../common';
-import { useCoreOrganization } from '../../contexts';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements';
 import { Times } from '../../icons';
@@ -60,12 +60,17 @@ const OrganizationProfileSection = () => {
 };
 
 const OrganizationDomainsSection = () => {
+  const { organizationSettings } = useEnvironment();
   const { organization, membership } = useCoreOrganization();
 
   const { navigate } = useRouter();
   const isAdmin = membership?.role === 'admin';
 
-  if (!organization || !isAdmin) {
+  if (!organizationSettings || !organization || !isAdmin) {
+    return null;
+  }
+
+  if (!organizationSettings.domains.enabled) {
     return null;
   }
 

packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx

@@ -1,6 +1,6 @@
 import type { OrganizationEnrollmentMode } from '@clerk/types';
 
-import { useCoreOrganization } from '../../contexts';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
 import { Badge, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import {
   BlockWithAction,
@@ -18,30 +18,12 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const VerifiedDomainPage = withCardStateProvider(() => {
   const card = useCardState();
+  const { organizationSettings } = useEnvironment();
   const { organization } = useCoreOrganization();
   const { params, navigate } = useRouter();
 
   const title = localizationKeys('organizationProfile.verifiedDomainPage.title');
 
-  const enrollmentMode = useFormControl('enrollmentMode', '', {
-    type: 'radio',
-    radioOptions: [
-      {
-        value: 'automatic_suggestion',
-        label: 'Automatic suggestion',
-      },
-      {
-        value: 'automatic_invitation',
-        // TODO: Add labels
-        label: 'Automatic invitation',
-      },
-      {
-        value: 'manual_invitation',
-        label: 'Manual invitation',
-      },
-    ],
-  });
-
   const { data: domain, status: domainStatus } = useFetch(
     organization?.getDomain,
     {
@@ -70,10 +52,41 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
     }
   };
 
-  if (!organization) {
+  if (!organization || !organizationSettings) {
     return null;
   }
 
+  const enrollmentMode = useFormControl('enrollmentMode', '', {
+    type: 'radio',
+    // TODO: Add labels
+    radioOptions: [
+      ...(organizationSettings.domains.enrollmentModes.includes('manual_invitation')
+        ? [
+            {
+              value: 'manual_invitation',
+              label: 'Manual invitation',
+            },
+          ]
+        : []),
+      ...(organizationSettings.domains.enrollmentModes.includes('automatic_invitation')
+        ? [
+            {
+              value: 'automatic_invitation',
+              label: 'Automatic invitation',
+            },
+          ]
+        : []),
+      ...(organizationSettings.domains.enrollmentModes.includes('automatic_suggestion')
+        ? [
+            {
+              value: 'automatic_suggestion',
+              label: 'Automatic suggestion',
+            },
+          ]
+        : []),
+    ],
+  });
+
   if (domainStatus.isLoading || !domain) {
     return (
       <Flex

packages/types/src/organizationSettings.ts

@@ -1,4 +1,5 @@
 import type { ClerkResourceJSON } from './json';
+import type { OrganizationEnrollmentMode } from './organizationDomain';
 import type { ClerkResource } from './resource';
 
 export interface OrganizationSettingsJSON extends ClerkResourceJSON {
@@ -9,6 +10,10 @@ export interface OrganizationSettingsJSON extends ClerkResourceJSON {
   actions: {
     admin_delete: boolean;
   };
+  domains: {
+    enabled: boolean;
+    enrollment_modes: OrganizationEnrollmentMode[];
+  };
 }
 
 export interface OrganizationSettingsResource extends ClerkResource {
@@ -17,4 +22,8 @@ export interface OrganizationSettingsResource extends ClerkResource {
   actions: {
     adminDelete: boolean;
   };
+  domains: {
+    enabled: boolean;
+    enrollmentModes: OrganizationEnrollmentMode[];
+  };
 }