feat(clerk-js): Share breadcrumb title in all Verified domain flows (#…

…1633) * feat(clerk-js): Share breadcrumb title in all Verified domain flows * chore(clerk-js): Add changeset * chore(clerk-js): OrganizationProfile bundle up to 10KB
clerk · Aug 25, 2023 · 5a723c8 · 5a723c8
1 parent 0a5f632
commit 5a723c8
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 29 deletions.
diff --git a/.changeset/cool-bikes-kick.md b/.changeset/cool-bikes-kick.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
@@ -6,7 +6,7 @@
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
-    { "path": "./dist/organizationprofile*.js", "maxSize": "8.7KB" },
+    { "path": "./dist/organizationprofile*.js", "maxSize": "10KB" },
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/signin*.js", "maxSize": "10KB" },
     { "path": "./dist/signup*.js", "maxSize": "10KB" },

diff --git a/packages/clerk-js/src/ui/common/RemoveResourcePage.tsx b/packages/clerk-js/src/ui/common/RemoveResourcePage.tsx
@@ -8,6 +8,7 @@ import { useWizard, Wizard } from './Wizard';
 
 type RemovePageProps = {
   title: LocalizationKey;
+  breadcrumbTitle?: LocalizationKey;
   messageLine1: LocalizationKey;
   messageLine2: LocalizationKey;
   successMessage: LocalizationKey;
@@ -16,7 +17,7 @@ type RemovePageProps = {
 };
 
 export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps) => {
-  const { title, messageLine1, messageLine2, successMessage, deleteResource } = props;
+  const { title, messageLine1, messageLine2, breadcrumbTitle, successMessage, deleteResource } = props;
   const wizard = useWizard();
   const card = useCardState();
 
@@ -32,6 +33,7 @@ export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps)
     <Wizard {...wizard.props}>
       <ContentPage
         headerTitle={title}
+        breadcrumbTitle={breadcrumbTitle}
         Breadcrumbs={props.Breadcrumbs}
       >
         <Form.Root onSubmit={handleSubmit}>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx
@@ -11,14 +11,15 @@ export const AddDomainPage = withCardStateProvider(() => {
   const { organizationSettings } = useEnvironment();
   const title = localizationKeys('organizationProfile.createDomainPage.title');
   const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
+  const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
   const card = useCardState();
   const { organization } = useCoreOrganization();
   const { navigate } = useRouter();
 
   const nameField = useFormControl('name', '', {
     type: 'text',
-    label: localizationKeys('formFieldLabel__organizationEmailDomain'),
-    placeholder: localizationKeys('formFieldInputPlaceholder__organizationEmailDomain'),
+    label: localizationKeys('formFieldLabel__organizationDomain'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationDomain'),
   });
 
   if (!organization || !organizationSettings) {
@@ -47,6 +48,7 @@ export const AddDomainPage = withCardStateProvider(() => {
     <ContentPage
       headerTitle={title}
       headerSubtitle={subtitle}
+      breadcrumbTitle={breadcrumbTitle}
       Breadcrumbs={OrganizationProfileBreadcrumbs}
     >
       <Form.Root onSubmit={onSubmit}>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -51,7 +51,6 @@ export const OrganizationProfileNavbar = (
 
 const pageToRootNavbarRouteMap = {
   'invite-members': organizationProfileRoutes.find(r => r.id === 'members'),
-  'add-domain': organizationProfileRoutes.find(r => r.id === 'settings'),
   domain: organizationProfileRoutes.find(r => r.id === 'settings'),
   profile: organizationProfileRoutes.find(r => r.id === 'settings'),
   leave: organizationProfileRoutes.find(r => r.id === 'settings'),

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx
@@ -27,6 +27,12 @@ export const RemoveDomainPage = () => {
     },
   );
 
+  const { domains } = useCoreOrganization({
+    domains: {
+      infinite: true,
+    },
+  });
+
   if (!organization || !organizationSettings) {
     return null;
   }
@@ -60,7 +66,8 @@ export const RemoveDomainPage = () => {
       successMessage={localizationKeys('organizationProfile.removeDomainPage.successMessage', {
         domain: ref.current?.name,
       })}
-      deleteResource={() => Promise.resolve(domain?.delete())}
+      deleteResource={() => domain?.delete().then((domains as any).unstable__mutate())}
+      breadcrumbTitle={localizationKeys('organizationProfile.profilePage.domainSection.title')}
       Breadcrumbs={OrganizationProfileBreadcrumbs}
     />
   );

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -21,6 +21,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   const { params, navigate, queryParams } = useRouter();
   const mode = (queryParams.mode ?? 'edit') as 'select' | 'edit';
 
+  const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
   const allowsEdit = mode === 'edit';
 
   const enrollmentMode = useFormControl('enrollmentMode', '', {
@@ -133,7 +134,8 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   }
   return (
     <ContentPage
-      headerTitle={domain.name}
+      headerTitle={domain?.name}
+      breadcrumbTitle={breadcrumbTitle}
       gap={4}
       Breadcrumbs={OrganizationProfileBreadcrumbs}
     >

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { useWizard, Wizard } from '../../common';
 import { useCoreOrganization, useEnvironment } from '../../contexts';
@@ -35,6 +35,9 @@ export const VerifyDomainPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.verifyDomainPage.subtitle', {
     domainName: domain?.name ?? '',
   });
+
+  const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
+
   const status = useLoadingStatus();
 
   const codeControlState = useFormControl('code', '');
@@ -44,11 +47,20 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 
   const emailField = useFormControl('affiliationEmailAddress', '', {
     type: 'text',
-    label: localizationKeys('formFieldLabel__organizationEmailDomainEmailAddress'),
-    placeholder: localizationKeys('formFieldInputPlaceholder__organizationEmailDomainEmailAddress'),
-    informationText: localizationKeys('formFieldLabel__organizationEmailDomainEmailAddressDescription'),
+    label: localizationKeys('formFieldLabel__organizationDomainEmailAddress'),
+    placeholder: localizationKeys('formFieldInputPlaceholder__organizationDomainEmailAddress'),
+    informationText: localizationKeys('formFieldLabel__organizationDomainEmailAddressDescription'),
   });
 
+  const affiliationEmailAddressRef = useRef<string>();
+
+  const subtitleVerificationCodeScreen = localizationKeys(
+    'organizationProfile.verifyDomainPage.subtitleVerificationCodeScreen',
+    {
+      emailAddress: affiliationEmailAddressRef.current,
+    },
+  );
+
   const resolve = async () => {
     setSuccess(true);
     await sleep(750);
@@ -96,8 +108,12 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 
   const onSubmitPrepare = (e: React.FormEvent) => {
     e.preventDefault();
+    if (!domain) {
+      return;
+    }
+    affiliationEmailAddressRef.current = `${emailField.value}@${domain.name}`;
     return domain
-      ?.prepareAffiliationVerification({
+      .prepareAffiliationVerification({
         affiliationEmailAddress: `${emailField.value}@${domain.name}`,
       })
       .then(wizard.nextStep)
@@ -129,6 +145,7 @@ export const VerifyDomainPage = withCardStateProvider(() => {
     <Wizard {...wizard.props}>
       <ContentPage
         headerTitle={title}
+        breadcrumbTitle={breadcrumbTitle}
         headerSubtitle={subtitle}
         Breadcrumbs={OrganizationProfileBreadcrumbs}
       >
@@ -147,7 +164,8 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 
       <ContentPage
         headerTitle={title}
-        headerSubtitle={subtitle}
+        breadcrumbTitle={breadcrumbTitle}
+        headerSubtitle={subtitleVerificationCodeScreen}
         Breadcrumbs={OrganizationProfileBreadcrumbs}
       >
         <CodeForm

diff --git a/packages/clerk-js/src/ui/elements/ContentPage.tsx b/packages/clerk-js/src/ui/elements/ContentPage.tsx
@@ -7,12 +7,13 @@ import { CardAlert, Header, NavbarMenuButtonRow, useCardState } from './index';
 
 type PageProps = PropsOfComponent<typeof Col> & {
   headerTitle: LocalizationKey | string;
+  breadcrumbTitle?: LocalizationKey;
   Breadcrumbs?: React.ComponentType<any> | null;
   headerSubtitle?: LocalizationKey;
 };
 
 export const ContentPage = (props: PageProps) => {
-  const { headerTitle, headerSubtitle, children, Breadcrumbs, sx, ...rest } = props;
+  const { headerTitle, headerSubtitle, breadcrumbTitle, children, Breadcrumbs, sx, ...rest } = props;
   const card = useCardState();
 
   return (
@@ -27,7 +28,7 @@ export const ContentPage = (props: PageProps) => {
       <Header.Root>
         {Breadcrumbs && (
           <Breadcrumbs
-            title={headerTitle}
+            title={breadcrumbTitle || headerTitle}
             sx={(t: any) => ({ marginBottom: t.space.$5 })}
           />
         )}
@@ -36,10 +37,12 @@ export const ContentPage = (props: PageProps) => {
           localizationKey={headerTitle}
           textVariant={'xxlargeMedium'}
         />
-        <Header.Subtitle
-          variant={'regularRegular'}
-          localizationKey={headerSubtitle}
-        />
+        {headerSubtitle && (
+          <Header.Subtitle
+            variant={'regularRegular'}
+            localizationKey={headerSubtitle}
+          />
+        )}
       </Header.Root>
       <Col gap={8}>{children}</Col>
     </Col>

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -35,9 +35,9 @@ export const enUS: LocalizationResource = {
   formFieldLabel__backupCode: 'Backup code',
   formFieldLabel__organizationName: 'Organization name',
   formFieldLabel__organizationSlug: 'Slug URL',
-  formFieldLabel__organizationEmailDomain: 'Email domain',
-  formFieldLabel__organizationEmailDomainEmailAddress: 'Verification email address',
-  formFieldLabel__organizationEmailDomainEmailAddressDescription:
+  formFieldLabel__organizationDomain: 'Email domain',
+  formFieldLabel__organizationDomainEmailAddress: 'Verification email address',
+  formFieldLabel__organizationDomainEmailAddressDescription:
     'Enter an email address under this domain to receive a code and verify this domain.',
   formFieldLabel__organizationDomainDeletePending: 'Delete pending invitations and suggestions',
   formFieldLabel__confirmDeletion: 'Confirmation',
@@ -57,8 +57,8 @@ export const enUS: LocalizationResource = {
   formFieldInputPlaceholder__backupCode: '',
   formFieldInputPlaceholder__organizationName: '',
   formFieldInputPlaceholder__organizationSlug: '',
-  formFieldInputPlaceholder__organizationEmailDomain: '',
-  formFieldInputPlaceholder__organizationEmailDomainEmailAddress: '',
+  formFieldInputPlaceholder__organizationDomain: '',
+  formFieldInputPlaceholder__organizationDomainEmailAddress: '',
   formFieldError__notMatchingPasswords: `Passwords don't match.`,
   formFieldError__matchingPasswords: 'Passwords match.',
   formFieldAction__forgotPassword: 'Forgot password?',

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -45,9 +45,9 @@ type _LocalizationResource = {
   formFieldLabel__backupCode: LocalizationValue;
   formFieldLabel__organizationName: LocalizationValue;
   formFieldLabel__organizationSlug: LocalizationValue;
-  formFieldLabel__organizationEmailDomain: LocalizationValue;
-  formFieldLabel__organizationEmailDomainEmailAddress: LocalizationValue;
-  formFieldLabel__organizationEmailDomainEmailAddressDescription: LocalizationValue;
+  formFieldLabel__organizationDomain: LocalizationValue;
+  formFieldLabel__organizationDomainEmailAddress: LocalizationValue;
+  formFieldLabel__organizationDomainEmailAddressDescription: LocalizationValue;
   formFieldLabel__organizationDomainDeletePending: LocalizationValue;
   formFieldLabel__confirmDeletion: LocalizationValue;
   formFieldLabel__role: LocalizationValue;
@@ -74,8 +74,8 @@ type _LocalizationResource = {
   formFieldInputPlaceholder__backupCode: LocalizationValue;
   formFieldInputPlaceholder__organizationName: LocalizationValue;
   formFieldInputPlaceholder__organizationSlug: LocalizationValue;
-  formFieldInputPlaceholder__organizationEmailDomain: LocalizationValue;
-  formFieldInputPlaceholder__organizationEmailDomainEmailAddress: LocalizationValue;
+  formFieldInputPlaceholder__organizationDomain: LocalizationValue;
+  formFieldInputPlaceholder__organizationDomainEmailAddress: LocalizationValue;
   formFieldError__notMatchingPasswords: LocalizationValue;
   formFieldError__matchingPasswords: LocalizationValue;
   formFieldAction__forgotPassword: LocalizationValue;