refactor(ui): Ensure global errors are translated using localization …

…hook (#3881)
clerk · Aug 2, 2024 · da0035c · da0035c
1 parent a462e6b
commit da0035c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 88 deletions.
diff --git a/.changeset/poor-cougars-visit.md b/.changeset/poor-cougars-visit.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/global-error.tsx b/packages/ui/src/common/global-error.tsx
@@ -0,0 +1,15 @@
+import { GlobalError as ElementsGlobalError } from '@clerk/elements/common';
+
+import { useLocalizations } from '~/hooks/use-localizations';
+import { Alert } from '~/primitives/alert';
+
+export function GlobalError() {
+  const { translateError } = useLocalizations();
+  return (
+    <ElementsGlobalError>
+      {({ message, code }) => {
+        return <Alert>{translateError(message, code)}</Alert>;
+      }}
+    </ElementsGlobalError>
+  );
+}
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -9,6 +9,7 @@ import { EmailField } from '~/common/email-field';
 import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
 import { EmailOrUsernameField } from '~/common/email-or-username-field';
 import { EmailOrUsernameOrPhoneNumberField } from '~/common/email-or-username-or-phone-number-field';
+import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
@@ -21,7 +22,6 @@ import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { useResetPasswordFactor } from '~/hooks/use-reset-password-factor';
 import { useSupportEmail } from '~/hooks/use-support-email';
-import { Alert } from '~/primitives/alert';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
@@ -144,11 +144,7 @@ export function SignInComponentLoaded() {
                     <Card.Description>{t('signIn.start.subtitle', { applicationName })}</Card.Description>
                   </Card.Header>
 
-                  <Common.GlobalError>
-                    {({ message }) => {
-                      return <Alert>{message}</Alert>;
-                    }}
-                  </Common.GlobalError>
+                  <GlobalError />
 
                   <Card.Body>
                     <Connections disabled={isGlobalLoading} />
@@ -313,11 +309,7 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <PasswordField
@@ -403,11 +395,7 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Common.Loading>
                       {isSubmitting => {
@@ -466,11 +454,7 @@ export function SignInComponentLoaded() {
                       <Card.Description>{t('signIn.backupCodeMfa.subtitle')}</Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <BackupCodeField />
@@ -541,11 +525,7 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <OTPField
@@ -631,11 +611,7 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <OTPField
@@ -722,11 +698,7 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <SignIn.Action
@@ -765,11 +737,7 @@ export function SignInComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <OTPField
@@ -832,11 +800,7 @@ export function SignInComponentLoaded() {
                       <Card.Description>{t('signIn.totpMfa.subtitle', { applicationName })}</Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <OTPField
@@ -895,11 +859,7 @@ export function SignInComponentLoaded() {
                     <Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
                   </Card.Header>
 
-                  <Common.GlobalError>
-                    {({ message }) => {
-                      return <Alert>{message}</Alert>;
-                    }}
-                  </Common.GlobalError>
+                  <GlobalError />
 
                   <Card.Body>
                     <div className='flex flex-col gap-6'>
@@ -1046,11 +1006,7 @@ export function SignInComponentLoaded() {
                     <Card.Title>{t('signIn.forgotPasswordAlternativeMethods.title')}</Card.Title>
                   </Card.Header>
 
-                  <Common.GlobalError>
-                    {({ message }) => {
-                      return <Alert>{message}</Alert>;
-                    }}
-                  </Common.GlobalError>
+                  <GlobalError />
 
                   <Card.Body>
                     <SignIn.SupportedStrategy
@@ -1181,11 +1137,7 @@ export function SignInComponentLoaded() {
                     <Card.Title>{t('signIn.resetPassword.title')}</Card.Title>
                   </Card.Header>
 
-                  <Common.GlobalError>
-                    {({ message }) => {
-                      return <Alert>{message}</Alert>;
-                    }}
-                  </Common.GlobalError>
+                  <GlobalError />
 
                   <Card.Body>
                     <div className='flex flex-col justify-center gap-4'>

diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -6,6 +6,7 @@ import { Connections } from '~/common/connections';
 import { EmailField } from '~/common/email-field';
 import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
 import { FirstNameField } from '~/common/first-name-field';
+import { GlobalError } from '~/common/global-error';
 import { LastNameField } from '~/common/last-name-field';
 import { OTPField } from '~/common/otp-field';
 import { PasswordField } from '~/common/password-field';
@@ -16,7 +17,6 @@ import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
-import { Alert } from '~/primitives/alert';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
@@ -74,11 +74,7 @@ function SignUpComponentLoaded() {
                     </Card.Description>
                   </Card.Header>
 
-                  <Common.GlobalError>
-                    {({ message }) => {
-                      return <Alert>{message}</Alert>;
-                    }}
-                  </Common.GlobalError>
+                  <GlobalError />
 
                   <Card.Body>
                     <Connections disabled={isGlobalLoading} />
@@ -201,11 +197,7 @@ function SignUpComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <OTPField
@@ -277,11 +269,7 @@ function SignUpComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <OTPField
@@ -357,11 +345,7 @@ function SignUpComponentLoaded() {
                       </Card.Description>
                     </Card.Header>
 
-                    <Common.GlobalError>
-                      {({ message }) => {
-                        return <Alert>{message}</Alert>;
-                      }}
-                    </Common.GlobalError>
+                    <GlobalError />
 
                     <Card.Body>
                       <SignUp.Action
@@ -398,11 +382,7 @@ function SignUpComponentLoaded() {
                     <Card.Description>{t('signUp.continue.subtitle')}</Card.Description>
                   </Card.Header>
 
-                  <Common.GlobalError>
-                    {({ message }) => {
-                      return <Alert>{message}</Alert>;
-                    }}
-                  </Common.GlobalError>
+                  <GlobalError />
 
                   <Card.Body>
                     <div className='space-y-4'>

diff --git a/packages/ui/src/utils/makeLocalizable.ts b/packages/ui/src/utils/makeLocalizable.ts
@@ -211,7 +211,7 @@ export const makeLocalizeable = (resource: LocalizationResource) => {
    * @example
    * translateError('Invalid email address', 'form_param_format_invalid', 'email_address')
    */
-  const translateError = (message: string, code: string, name: string) => {
+  const translateError = (message: string, code: string, name?: string) => {
     return t(`unstable__errors.${code}__${name}` as any) || t(`unstable__errors.${code}` as any) || message;
   };