feat(clerk-js): Display a callout when updating or removing a verifie…

…d domain (#1641) * feat(clerk-js): Display a callout when updating or removing a verified domain * chore(clerk-js): Add changeset * test(clerk-js): Update snapshot of OrganizationDomain * chore(clerk-js): CallWithAction default icon styling * fix(clerk-js): Remove complex logic for localizations
clerk · Sep 1, 2023 · d2ffb25 · d2ffb25
1 parent 899441f
commit d2ffb25
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 36 deletions.
diff --git a/.changeset/nasty-doors-watch.md b/.changeset/nasty-doors-watch.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/core/resources/OrganizationDomain.ts b/packages/clerk-js/src/core/resources/OrganizationDomain.ts
@@ -20,6 +20,8 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
   affiliationEmailAddress!: string | null;
   createdAt!: Date;
   updatedAt!: Date;
+  totalPendingInvitations!: number;
+  totalPendingSuggestions!: number;
 
   constructor(data: OrganizationDomainJSON) {
     super();
@@ -77,6 +79,8 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma
       this.organizationId = data.organization_id;
       this.enrollmentMode = data.enrollment_mode;
       this.affiliationEmailAddress = data.affiliation_email_address;
+      this.totalPendingSuggestions = data.total_pending_suggestions;
+      this.totalPendingInvitations = data.total_pending_invitations;
       if (data.verification) {
         this.verification = {
           status: data.verification.status,

diff --git a/packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap b/packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap
@@ -11,6 +11,8 @@ OrganizationDomain {
   "organizationId": "test_org_id",
   "pathRoot": "",
   "prepareAffiliationVerification": [Function],
+  "totalPendingInvitations": undefined,
+  "totalPendingSuggestions": undefined,
   "updateEnrollmentMode": [Function],
   "verification": null,
 }
@@ -27,6 +29,8 @@ OrganizationDomain {
   "organizationId": "test_org_id",
   "pathRoot": "",
   "prepareAffiliationVerification": [Function],
+  "totalPendingInvitations": undefined,
+  "totalPendingSuggestions": undefined,
   "updateEnrollmentMode": [Function],
   "verification": {
     "attempts": 1,

diff --git a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx
@@ -1,47 +1,67 @@
-import type { MouseEvent } from 'react';
+import type { ComponentType, MouseEvent, PropsWithChildren } from 'react';
 
-import { Col, Flex, Link, Text } from '../customizables';
+import { Col, Flex, Link, Text, Icon } from '../customizables';
 import type { LocalizationKey } from '../localization';
+import type { ThemableCssProp } from '../styledSystem';
 
 type CalloutWithActionProps = {
-  text: LocalizationKey;
+  text?: LocalizationKey | string;
+  textSx?: ThemableCssProp;
   actionLabel?: LocalizationKey;
   onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<any>;
+  icon: ComponentType;
 };
-export const CalloutWithAction = (props: CalloutWithActionProps) => {
-  const { text, actionLabel, onClick: onClickProp } = props;
+export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProps>) => {
+  const { icon, text, textSx, actionLabel, onClick: onClickProp } = props;
 
   const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
     if (onClickProp) {
       void onClickProp?.(e);
     }
   };
 
+  console.log(props.children);
+
   return (
     <Flex
       sx={theme => ({
         background: theme.colors.$blackAlpha50,
-        padding: theme.space.$4,
+        padding: `${theme.space.$2x5} ${theme.space.$4}`,
         justifyContent: 'space-between',
         alignItems: 'flex-start',
         borderRadius: theme.radii.$md,
       })}
     >
-      <Col gap={4}>
-        <Text
-          sx={t => ({
-            lineHeight: t.lineHeights.$tall,
-          })}
-          localizationKey={text}
+      <Flex gap={2}>
+        <Icon
+          colorScheme='neutral'
+          icon={icon}
+          sx={t => ({ marginTop: t.space.$1 })}
         />
+        <Col gap={4}>
+          <Text
+            colorScheme='neutral'
+            sx={[
+              t => ({
+                lineHeight: t.lineHeights.$base,
+              }),
+              textSx,
+            ]}
+            localizationKey={text}
+          >
+            {props.children}
+          </Text>
 
-        <Link
-          colorScheme={'primary'}
-          variant='regularMedium'
-          localizationKey={actionLabel}
-          onClick={onClick}
-        />
-      </Col>
+          {actionLabel && (
+            <Link
+              colorScheme={'primary'}
+              variant='regularMedium'
+              localizationKey={actionLabel}
+              onClick={onClick}
+            />
+          )}
+        </Col>
+      </Flex>
     </Flex>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -1,7 +1,9 @@
-import type { OrganizationEnrollmentMode } from '@clerk/types';
+import type { OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
 
+import { CalloutWithAction } from '../../common';
 import { useCoreOrganization, useEnvironment } from '../../contexts';
-import { Col, Flex, localizationKeys, Spinner } from '../../customizables';
+import type { LocalizationKey } from '../../customizables';
+import { Col, Flex, localizationKeys, Spinner, Text } from '../../customizables';
 import {
   ContentPage,
   Form,
@@ -16,11 +18,39 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useFetch, useNavigateToFlowStart } from '../../hooks';
+import { InformationCircle } from '../../icons';
 import { useRouter } from '../../router';
 import { handleError, useFormControl } from '../../utils';
 import { LinkButtonWithDescription } from '../UserProfile/LinkButtonWithDescription';
 import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 
+const useCalloutLabel = (
+  domain: OrganizationDomainResource | null,
+  {
+    infoLabel: infoLabelKey,
+  }: {
+    infoLabel: LocalizationKey;
+  },
+) => {
+  const totalInvitations = domain?.totalPendingInvitations || 0;
+  const totalSuggestions = domain?.totalPendingSuggestions || 0;
+  const totalPending = totalSuggestions + totalInvitations;
+
+  if (totalPending === 0) {
+    return [] as string[];
+  }
+
+  return [
+    infoLabelKey,
+    localizationKeys(`organizationProfile.verifiedDomainPage.enrollmentTab.calloutInvitationCountLabel`, {
+      count: totalInvitations,
+    }),
+    localizationKeys(`organizationProfile.verifiedDomainPage.enrollmentTab.calloutSuggestionCountLabel`, {
+      count: totalInvitations,
+    }),
+  ];
+};
+
 export const VerifiedDomainPage = withCardStateProvider(() => {
   const card = useCardState();
   const { organizationSettings } = useEnvironment();
@@ -30,6 +60,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
       infinite: true,
     },
   });
+
   const { navigateToFlowStart } = useNavigateToFlowStart();
   const { params, navigate, queryParams } = useRouter();
   const mode = (queryParams.mode || 'edit') as 'select' | 'edit';
@@ -104,6 +135,14 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
     domain: domain?.name,
   });
 
+  const calloutLabel = useCalloutLabel(domain, {
+    infoLabel: localizationKeys(`organizationProfile.verifiedDomainPage.enrollmentTab.calloutInfoLabel`),
+  });
+
+  const dangerCalloutLabel = useCalloutLabel(domain, {
+    infoLabel: localizationKeys(`organizationProfile.verifiedDomainPage.dangerTab.calloutInfoLabel`),
+  });
+
   const updateEnrollmentMode = async () => {
     if (!domain || !organization) {
       return;
@@ -149,6 +188,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   if (!(domain.verification && domain.verification.status === 'verified')) {
     void navigateToFlowStart();
   }
+
   return (
     <ContentPage
       headerTitle={domain.name}
@@ -175,6 +215,24 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
               direction={'col'}
               gap={4}
             >
+              {calloutLabel.length > 0 && (
+                <CalloutWithAction icon={InformationCircle}>
+                  {calloutLabel.map((label, index) => (
+                    <Text
+                      key={index}
+                      as={'span'}
+                      sx={[
+                        t => ({
+                          lineHeight: t.lineHeights.$short,
+                          color: 'inherit',
+                          display: 'block',
+                        }),
+                      ]}
+                      localizationKey={label}
+                    />
+                  ))}
+                </CalloutWithAction>
+              )}
               <Header.Root>
                 <Header.Subtitle
                   localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.subtitle')}
@@ -207,22 +265,42 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
             {allowsEdit && (
               <TabPanel
                 direction={'col'}
-                sx={[
-                  { width: '100%' },
-                  t => ({
-                    padding: `${t.space.$none} ${t.space.$4}`,
-                  }),
-                ]}
+                gap={4}
+                sx={{ width: '100%' }}
               >
-                <LinkButtonWithDescription
-                  title={localizationKeys('organizationProfile.verifiedDomainPage.dangerTab.removeDomainTitle')}
-                  subtitle={localizationKeys('organizationProfile.verifiedDomainPage.dangerTab.removeDomainSubtitle')}
-                  actionLabel={localizationKeys(
-                    'organizationProfile.verifiedDomainPage.dangerTab.removeDomainActionLabel__remove',
-                  )}
-                  colorScheme='danger'
-                  onClick={() => navigate(`../../domain/${domain.id}/remove`)}
-                />
+                {dangerCalloutLabel.length > 0 && (
+                  <CalloutWithAction icon={InformationCircle}>
+                    {dangerCalloutLabel.map((label, index) => (
+                      <Text
+                        key={index}
+                        as={'span'}
+                        sx={[
+                          t => ({
+                            lineHeight: t.lineHeights.$short,
+                            color: 'inherit',
+                            display: 'block',
+                          }),
+                        ]}
+                        localizationKey={label}
+                      />
+                    ))}
+                  </CalloutWithAction>
+                )}
+                <Col
+                  sx={t => ({
+                    padding: `${t.space.$none} ${t.space.$4}`,
+                  })}
+                >
+                  <LinkButtonWithDescription
+                    title={localizationKeys('organizationProfile.verifiedDomainPage.dangerTab.removeDomainTitle')}
+                    subtitle={localizationKeys('organizationProfile.verifiedDomainPage.dangerTab.removeDomainSubtitle')}
+                    actionLabel={localizationKeys(
+                      'organizationProfile.verifiedDomainPage.dangerTab.removeDomainActionLabel__remove',
+                    )}
+                    colorScheme='danger'
+                    onClick={() => navigate(`../../domain/${domain.id}/remove`)}
+                  />
+                </Col>
               </TabPanel>
             )}
           </TabPanels>

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -616,11 +616,15 @@ export const enUS: LocalizationResource = {
         automaticSuggestionOption__description:
           'Users receive a suggestion to request to join, but must be approved by an admin before they are able to join the organization.',
         formButton__save: 'Save',
+        calloutInfoLabel: 'Changing the enrollment mode will only affect new users.',
+        calloutInvitationCountLabel: 'Pending invitations sent to users: {{count}}',
+        calloutSuggestionCountLabel: 'Pending suggestions sent to users: {{count}}',
       },
       dangerTab: {
         removeDomainTitle: 'Remove domain',
         removeDomainSubtitle: 'Remove this domain from your verified domains',
         removeDomainActionLabel__remove: 'Remove domain',
+        calloutInfoLabel: 'Removing this domain will affect invited users.',
       },
     },
     invitePage: {

diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
@@ -362,6 +362,8 @@ export interface OrganizationDomainJSON extends ClerkResourceJSON {
   affiliation_email_address: string | null;
   created_at: number;
   updated_at: number;
+  total_pending_invitations: number;
+  total_pending_suggestions: number;
 }
 
 export interface PublicOrganizationDataJSON {

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -631,11 +631,15 @@ type _LocalizationResource = {
         automaticSuggestionOption__label: LocalizationValue;
         automaticSuggestionOption__description: LocalizationValue;
         formButton__save: LocalizationValue;
+        calloutInfoLabel: LocalizationValue;
+        calloutInvitationCountLabel: LocalizationValue;
+        calloutSuggestionCountLabel: LocalizationValue;
       };
       dangerTab: {
         removeDomainTitle: LocalizationValue;
         removeDomainSubtitle: LocalizationValue;
         removeDomainActionLabel__remove: LocalizationValue;
+        calloutInfoLabel: LocalizationValue;
       };
     };
     removeDomainPage: {

diff --git a/packages/types/src/organizationDomain.ts b/packages/types/src/organizationDomain.ts
@@ -20,6 +20,8 @@ export interface OrganizationDomainResource extends ClerkResource {
   createdAt: Date;
   updatedAt: Date;
   affiliationEmailAddress: string | null;
+  totalPendingInvitations: number;
+  totalPendingSuggestions: number;
   prepareAffiliationVerification: (params: PrepareAffiliationVerificationParams) => Promise<OrganizationDomainResource>;
 
   attemptAffiliationVerification: (params: AttemptAffiliationVerificationParams) => Promise<OrganizationDomainResource>;