chore(clerk-js): Update copy in OrganizationProfile/Members tabs (#1621)

* chore(clerk-js): Update copy in OrganizationProfile/Members tabs * chore(clerk-js): Add changeset
clerk · Aug 23, 2023 · 873dee6 · 873dee6
1 parent 52d3116
commit 873dee6
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 16 deletions.
diff --git a/.changeset/new-schools-swim.md b/.changeset/new-schools-swim.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/common/BlockButtons.tsx b/packages/clerk-js/src/ui/common/BlockButtons.tsx
@@ -6,20 +6,21 @@ import type { PropsOfComponent } from '../styledSystem';
 type BlockButtonProps = PropsOfComponent<typeof ArrowBlockButton>;
 
 export const BlockButton = (props: BlockButtonProps) => {
+  const { id, ...rest } = props;
   return (
     <ArrowBlockButton
       variant='ghost'
-      {...props}
+      elementDescriptor={descriptors.profileSectionPrimaryButton}
+      elementId={descriptors.profileSectionPrimaryButton?.setId(id as any)}
+      {...rest}
     />
   );
 };
 
 export const AddBlockButton = (props: BlockButtonProps) => {
-  const { id, leftIcon, ...rest } = props;
+  const { leftIcon, ...rest } = props;
   return (
     <BlockButton
-      elementDescriptor={descriptors.profileSectionPrimaryButton}
-      elementId={descriptors.profileSectionPrimaryButton?.setId(id as any)}
       colorScheme='primary'
       {...rest}
       sx={theme => ({ justifyContent: 'flex-start', gap: theme.space.$2 })}

diff --git a/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -1,4 +1,4 @@
-import { AddBlockButton } from '../../common';
+import { BlockButton } from '../../common';
 import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton } from '../../elements';
@@ -55,9 +55,12 @@ export const OrganizationMembersTabInvitations = () => {
           </Header.Root>
           <DomainList
             fallback={
-              <AddBlockButton
-                textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
-                id='addOrganizationDomain'
+              <BlockButton
+                colorScheme='primary'
+                textLocalizationKey={localizationKeys(
+                  'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',
+                )}
+                id='manageVerifiedDomains'
                 onClick={() => navigate('organization-settings/domain')}
               />
             }

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -1,4 +1,4 @@
-import { AddBlockButton } from '../../common';
+import { BlockButton } from '../../common';
 import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
 import { Col, Flex, localizationKeys } from '../../customizables';
 import { Header } from '../../elements';
@@ -48,9 +48,12 @@ export const OrganizationMembersTabRequests = () => {
         </Header.Root>
         <DomainList
           fallback={
-            <AddBlockButton
-              textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
-              id='addOrganizationDomain'
+            <BlockButton
+              colorScheme='primary'
+              textLocalizationKey={localizationKeys(
+                'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
+              )}
+              id='manageVerifiedDomains'
               onClick={() => navigate('organization-settings/domain')}
             />
           }

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -648,12 +648,13 @@ export const enUS: LocalizationResource = {
         table__emptyRow: 'No invitations to display',
         manualInvitations: {
           headerTitle: 'Individual invitations',
-          headerSubtitle: 'Browse and manage invited members.',
+          headerSubtitle: 'Manually invite members and manage existing invitations.',
         },
         autoInvitations: {
-          headerTitle: 'Domain invitations',
+          headerTitle: 'Automatic invitations',
           headerSubtitle:
-            'New and existing users will be able to join anytime as members and will get notified in-app.',
+            'Invite users by connecting an email domain with your organization. Anyone who signs up with a matching email domain will be able to join the organization anytime.',
+          primaryButton: 'Manage verified domains',
         },
       },
       requestsTab: {
@@ -668,7 +669,8 @@ export const enUS: LocalizationResource = {
         autoSuggestions: {
           headerTitle: 'Automatic suggestions',
           headerSubtitle:
-            'Users with an email address on your verified domain will see a suggestion to request to join the organization.',
+            'Users who sign up with a matching email domain, will be able to see a suggestion to request to join your organization.',
+          primaryButton: 'Manage verified domains',
         },
       },
     },

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -674,6 +674,7 @@ type _LocalizationResource = {
         autoInvitations: {
           headerTitle: LocalizationValue;
           headerSubtitle: LocalizationValue;
+          primaryButton: LocalizationValue;
         };
       };
       requestsTab: {
@@ -688,6 +689,7 @@ type _LocalizationResource = {
         autoSuggestions: {
           headerTitle: LocalizationValue;
           headerSubtitle: LocalizationValue;
+          primaryButton: LocalizationValue;
         };
       };
     };