Address review comments

Author: LauraBeatris

packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx

@@ -35,7 +35,7 @@ export const ChooseEnterpriseConnectionCard = ({
         <Card.Alert>{card.error}</Card.Alert>
 
         <Grid
-          elementDescriptor={descriptors.chooseEnterpriseConnectionsRoot}
+          elementDescriptor={descriptors.enterpriseConnectionsRoot}
           gap={2}
         >
           {enterpriseConnections?.map(({ id, name }) => (
@@ -71,7 +71,7 @@ const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButto
 
   return (
     <SimpleButton
-      elementDescriptor={descriptors.chooseEnterpriseConnectionButton}
+      elementDescriptor={descriptors.enterpriseConnectionButton}
       variant='outline'
       block
       isLoading={isLoading}
@@ -110,7 +110,7 @@ const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButto
           </Flex>
         )}
         <Text
-          elementDescriptor={descriptors.chooseEnterpriseConnectionButtonText}
+          elementDescriptor={descriptors.enterpriseConnectionButtonText}
           as='span'
           truncate
           variant='buttonLarge'

packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx

@@ -13,10 +13,10 @@ import { localizationKeys } from '../../localization';
 import { useRouter } from '../../router';
 import { AlternativeMethods } from './AlternativeMethods';
 import { hasMultipleEnterpriseConnections } from './shared';
-import { SignInChooseEnterpriseConnection } from './SignInChooseEnterpriseConnection';
 import { SignInFactorOneAlternativePhoneCodeCard } from './SignInFactorOneAlternativePhoneCodeCard';
 import { SignInFactorOneEmailCodeCard } from './SignInFactorOneEmailCodeCard';
 import { SignInFactorOneEmailLinkCard } from './SignInFactorOneEmailLinkCard';
+import { SignInFactorOneEnterpriseConnections } from './SignInFactorOneEnterpriseConnections';
 import { SignInFactorOneForgotPasswordCard } from './SignInFactorOneForgotPasswordCard';
 import { SignInFactorOnePasskey } from './SignInFactorOnePasskey';
 import { SignInFactorOnePasswordCard } from './SignInFactorOnePasswordCard';
@@ -130,7 +130,7 @@ function SignInFactorOneInternal(): JSX.Element {
    * @experimental
    */
   if (hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) {
-    return <SignInChooseEnterpriseConnection />;
+    return <SignInFactorOneEnterpriseConnections />;
   }
 
   if (showAllStrategies || showForgotPasswordStrategies) {

packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx renamed to packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx

@@ -7,12 +7,13 @@ import { useCoreSignIn, useEnvironment, useSignInContext } from '@/ui/contexts';
 import { Flow, localizationKeys } from '@/ui/customizables';
 import type { AvailableComponentProps } from '@/ui/types';
 
+import { withCardStateProvider } from '@/ui/elements/contexts';
 import { hasMultipleEnterpriseConnections } from './shared';
 
 /**
  * @experimental
  */
-const SignInChooseEnterpriseConnectionInternal = () => {
+const SignInFactorOneEnterpriseConnectionsInternal = () => {
   const ctx = useSignInContext();
   const { displayConfig } = useEnvironment();
 
@@ -44,10 +45,10 @@ const SignInChooseEnterpriseConnectionInternal = () => {
   };
 
   return (
-    <Flow.Part part='chooseEnterpriseConnection'>
+    <Flow.Part part='enterpriseConnections'>
       <ChooseEnterpriseConnectionCard
-        title={localizationKeys('signIn.chooseEnterpriseConnection.title')}
-        subtitle={localizationKeys('signIn.chooseEnterpriseConnection.subtitle')}
+        title={localizationKeys('signIn.enterpriseConnections.title')}
+        subtitle={localizationKeys('signIn.enterpriseConnections.subtitle')}
         onClick={handleEnterpriseSSO}
         enterpriseConnections={enterpriseConnections}
       />
@@ -76,6 +77,6 @@ const withEnterpriseConnectionsGuard = <P extends AvailableComponentProps>(Compo
   return HOC;
 };
 
-export const SignInChooseEnterpriseConnection = withEnterpriseConnectionsGuard(
-  SignInChooseEnterpriseConnectionInternal,
+export const SignInFactorOneEnterpriseConnections = withCardStateProvider(
+  withEnterpriseConnectionsGuard(SignInFactorOneEnterpriseConnectionsInternal),
 );

packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx renamed to packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx

@@ -8,7 +8,7 @@ import { withCardStateProvider } from '@/ui/elements/contexts';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 import { useFetch } from '@/ui/hooks';
 
-const SignUpChooseEnterpriseConnectionInternal = () => {
+const SignUpEnterpriseConnectionsInternal = () => {
   const clerk = useClerk();
   const ctx = useSignUpContext();
 
@@ -35,11 +35,11 @@ const SignUpChooseEnterpriseConnectionInternal = () => {
   }
 
   return (
-    <Flow.Part part='chooseEnterpriseConnection'>
+    <Flow.Part part='enterpriseConnections'>
       {enterpriseConnections?.length ? (
         <ChooseEnterpriseConnectionCard
-          title={localizationKeys('signUp.chooseEnterpriseConnection.title')}
-          subtitle={localizationKeys('signUp.chooseEnterpriseConnection.subtitle')}
+          title={localizationKeys('signUp.enterpriseConnections.title')}
+          subtitle={localizationKeys('signUp.enterpriseConnections.subtitle')}
           onClick={handleEnterpriseSSO}
           enterpriseConnections={enterpriseConnections}
         />
@@ -53,6 +53,6 @@ const SignUpChooseEnterpriseConnectionInternal = () => {
 /**
  * @experimental
  */
-export const SignUpChooseEnterpriseConnection = withRedirectToAfterSignUp(
-  withCardStateProvider(SignUpChooseEnterpriseConnectionInternal),
+export const SignUpEnterpriseConnections = withRedirectToAfterSignUp(
+  withCardStateProvider(SignUpEnterpriseConnectionsInternal),
 );

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -364,7 +364,7 @@ function SignUpStartInternal(): JSX.Element {
           isClerkAPIResponseError(err) &&
           err.errors?.[0]?.code === 'enterprise_connection_id_is_required_with_multiple_connections'
         ) {
-          return navigate('./choose-enterprise-connection');
+          return navigate('./enterprise-connections');
         }
 
         return handleError(err, fieldsToSubmit, card.setError);

packages/clerk-js/src/ui/components/SignUp/index.tsx

@@ -9,8 +9,8 @@ import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowC
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
-import { SignUpChooseEnterpriseConnection } from './SignUpChooseEnterpriseConnection';
 import { SignUpContinue } from './SignUpContinue';
+import { SignUpEnterpriseConnections } from './SignUpEnterpriseConnections';
 import { SignUpSSOCallback } from './SignUpSSOCallback';
 import { SignUpStart } from './SignUpStart';
 import { SignUpVerifyEmail } from './SignUpVerifyEmail';
@@ -83,8 +83,8 @@ function SignUpRoutes(): JSX.Element {
         <Route path='tasks'>
           <LazySessionTasks redirectUrlComplete={signUpContext.afterSignUpUrl} />
         </Route>
-        <Route path='choose-enterprise-connection'>
-          <SignUpChooseEnterpriseConnection />
+        <Route path='enterprise-connections'>
+          <SignUpEnterpriseConnections />
         </Route>
         <Route index>
           <SignUpStart />

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -506,9 +506,9 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'subscriptionDetailsDetailRowLabel',
   'subscriptionDetailsDetailRowValue',
 
-  'chooseEnterpriseConnectionsRoot',
-  'chooseEnterpriseConnectionButton',
-  'chooseEnterpriseConnectionButtonText',
+  'enterpriseConnectionsRoot',
+  'enterpriseConnectionButton',
+  'enterpriseConnectionButtonText',
 ] as const).map(camelize) as (keyof ElementsConfig)[];
 
 type TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -124,7 +124,7 @@ export type FlowMetadata = {
     | 'complete'
     | 'accountSwitcher'
     | 'chooseOrganization'
-    | 'chooseEnterpriseConnection';
+    | 'enterpriseConnections';
 };
 
 const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<FlowMetadata>('FlowMetadata');

packages/localizations/src/en-US.ts

@@ -714,7 +714,7 @@ export const enUS: LocalizationResource = {
       subtitle: 'To continue, please enter the verification code generated by your authenticator app',
       title: 'Two-step verification',
     },
-    chooseEnterpriseConnection: {
+    enterpriseConnections: {
       subtitle: 'Select the enterprise account with which you wish to continue.',
       title: 'Choose your enterprise account',
     },
@@ -806,7 +806,7 @@ export const enUS: LocalizationResource = {
       title: 'Create your account',
       titleCombined: 'Create your account',
     },
-    chooseEnterpriseConnection: {
+    enterpriseConnections: {
       subtitle: 'Select the enterprise account with which you wish to continue.',
       title: 'Choose your enterprise account',
     },

packages/types/src/appearance.ts

@@ -641,9 +641,9 @@ export type ElementsConfig = {
   subscriptionDetailsDetailRowLabel: WithOptions;
   subscriptionDetailsDetailRowValue: WithOptions;
 
-  chooseEnterpriseConnectionsRoot: WithOptions;
-  chooseEnterpriseConnectionButton: WithOptions;
-  chooseEnterpriseConnectionButtonText: WithOptions;
+  enterpriseConnectionsRoot: WithOptions;
+  enterpriseConnectionButton: WithOptions;
+  enterpriseConnectionButtonText: WithOptions;
 };
 
 export type Elements = {