feat(types,clerk-js): Show/Hide Invitations/Requests OrgProfile based… (

#1587) * feat(types,clerk-js): Show/Hide Invitations/Requests OrgProfile based on instance settings * fix(types,clerk-js): Protect individual pages
clerk · Aug 11, 2023 · 47a1b26 · 47a1b26
1 parent f3f3632
commit 47a1b26
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 41 deletions.
diff --git a/.changeset/lucky-plums-rescue.md b/.changeset/lucky-plums-rescue.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 
-import { useCoreOrganization } from '../../contexts';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
 import { handleError, useFormControl } from '../../utils';
 import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const AddDomainPage = withCardStateProvider(() => {
+  const { organizationSettings } = useEnvironment();
   const title = localizationKeys('organizationProfile.createDomainPage.title');
   const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
   const card = useCardState();
@@ -20,7 +21,7 @@ export const AddDomainPage = withCardStateProvider(() => {
     placeholder: localizationKeys('formFieldInputPlaceholder__organizationEmailDomain'),
   });
 
-  if (!organization) {
+  if (!organization || !organizationSettings) {
     return null;
   }
 

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -1,4 +1,4 @@
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   CardAlert,
@@ -18,12 +18,15 @@ import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvit
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const OrganizationMembers = withCardStateProvider(() => {
+  const { organizationSettings } = useEnvironment();
   const card = useCardState();
   const { membership } = useCoreOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl } = useOrganizationProfileContext();
   const isAdmin = membership?.role === 'admin';
 
+  const allowRequests = organizationSettings?.domains?.enabled && isAdmin;
+
   return (
     <Col
       elementDescriptor={descriptors.page}
@@ -51,7 +54,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
                 localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}
               />
             )}
-            {isAdmin && (
+            {allowRequests && (
               <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')} />
             )}
           </TabsList>
@@ -73,7 +76,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
                 <OrganizationMembersTabInvitations />
               </TabPanel>
             )}
-            {isAdmin && (
+            {allowRequests && (
               <TabPanel sx={{ width: '100%' }}>
                 <OrganizationMembersTabRequests />
               </TabPanel>

diff --git a/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -1,5 +1,5 @@
 import { AddBlockButton } from '../../common';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton } from '../../elements';
 import { UserAdd } from '../../icons';
@@ -9,13 +9,16 @@ import { InvitedMembersList } from './InvitedMembersList';
 import { MembershipWidget } from './MembershipWidget';
 
 export const OrganizationMembersTabInvitations = () => {
+  const { organizationSettings } = useEnvironment();
   const { navigate } = useRouter();
   const { membership } = useCoreOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl } = useOrganizationProfileContext();
 
   const isAdmin = membership?.role === 'admin';
 
+  const allowDomains = organizationSettings?.domains?.enabled;
+
   if (!isAdmin) {
     return null;
   }
@@ -28,39 +31,42 @@ export const OrganizationMembersTabInvitations = () => {
       }}
     >
       {__unstable_manageBillingUrl && <MembershipWidget />}
-      <Col
-        gap={2}
-        sx={{
-          width: '100%',
-        }}
-      >
-        <Header.Root>
-          <Header.Title
-            localizationKey={localizationKeys(
-              'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
-            )}
-            textVariant='largeMedium'
-          />
-          <Header.Subtitle
-            localizationKey={localizationKeys(
-              'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
-            )}
-            variant='regularRegular'
-          />
-        </Header.Root>
-        <DomainList
-          fallback={
-            <AddBlockButton
-              textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
-              id='addOrganizationDomain'
-              onClick={() => navigate('organization-settings/domain')}
+
+      {allowDomains && (
+        <Col
+          gap={2}
+          sx={{
+            width: '100%',
+          }}
+        >
+          <Header.Root>
+            <Header.Title
+              localizationKey={localizationKeys(
+                'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
+              )}
+              textVariant='largeMedium'
             />
-          }
-          redirectSubPath={'organization-settings/domain/'}
-          verificationStatus={'verified'}
-          enrollmentMode={'automatic_invitation'}
-        />
-      </Col>
+            <Header.Subtitle
+              localizationKey={localizationKeys(
+                'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
+              )}
+              variant='regularRegular'
+            />
+          </Header.Root>
+          <DomainList
+            fallback={
+              <AddBlockButton
+                textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
+                id='addOrganizationDomain'
+                onClick={() => navigate('organization-settings/domain')}
+              />
+            }
+            redirectSubPath={'organization-settings/domain/'}
+            verificationStatus={'verified'}
+            enrollmentMode={'automatic_invitation'}
+          />
+        </Col>
+      )}
 
       <Flex
         direction='col'

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -2,14 +2,15 @@ import type { OrganizationDomainResource } from '@clerk/types';
 import React from 'react';
 
 import { RemoveResourcePage } from '../../common';
-import { useCoreOrganization } from '../../contexts';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
 import { Flex, Spinner } from '../../customizables';
 import { useFetch } from '../../hooks';
 import { localizationKeys } from '../../localization';
 import { useRouter } from '../../router';
 import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const RemoveDomainPage = () => {
+  const { organizationSettings } = useEnvironment();
   const { organization } = useCoreOrganization();
   const { params } = useRouter();
 
@@ -26,6 +27,10 @@ export const RemoveDomainPage = () => {
     },
   );
 
+  if (!organization || !organizationSettings) {
+    return null;
+  }
+
   if (domainStatus.isLoading || !domain) {
     return (
       <Flex

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization } from '../../contexts';
+import { useCoreOrganization, useEnvironment } from '../../contexts';
 import { Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import {
@@ -23,6 +23,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
 export const VerifyDomainPage = withCardStateProvider(() => {
   const card = useCardState();
+  const { organizationSettings } = useEnvironment();
   const { organization } = useCoreOrganization();
   const { params, navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -80,9 +81,10 @@ export const VerifyDomainPage = withCardStateProvider(() => {
     action(code, resolve, reject);
   });
 
-  if (!organization) {
+  if (!organization || !organizationSettings) {
     return null;
   }
+
   const handleResend = () => {
     codeControl.reset();
     domain?.prepareAffiliationVerification({ affiliationEmailAddress: emailField.value }).catch(err => {