fix(clerk-js,localizations,types): Add formFieldError__verificationLinkExpired key (#1738)

Author: LekoArts

.changeset/orange-masks-rush.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+This PR replaces `The verification link expired. Please resend it.` message with the localization key `formFieldError__verificationLinkExpired`. The english message was also adjust to `The verification link expired. Please request a new link.` to make the second sentence clearer.

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { EmailLinkStatusCard } from '../../common';
 import { buildMagicLinkRedirectUrl } from '../../common/redirects';
 import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
-import { Flow, localizationKeys } from '../../customizables';
+import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import type { VerificationCodeCardProps } from '../../elements';
 import { VerificationLinkCard } from '../../elements';
 import { useCardState } from '../../elements/contexts';
@@ -19,6 +19,7 @@ type SignInFactorOneEmailLinkCardProps = Pick<VerificationCodeCardProps, 'onShow
 };
 
 export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCardProps) => {
+  const { t } = useLocalizations();
   const card = useCardState();
   const signIn = useCoreSignIn();
   const signInContext = useSignInContext();
@@ -50,7 +51,7 @@ export const SignInFactorOneEmailLinkCard = (props: SignInFactorOneEmailLinkCard
   const handleVerificationResult = async (si: SignInResource) => {
     const ver = si.firstFactorVerification;
     if (ver.status === 'expired') {
-      card.setError('The verification link expired. Please resend it.');
+      card.setError(t(localizationKeys('formFieldError__verificationLinkExpired')));
     } else if (ver.verifiedFromTheSameClient()) {
       setShowVerifyModal(true);
     } else {

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { EmailLinkStatusCard } from '../../common';
 import { buildMagicLinkRedirectUrl } from '../../common/redirects';
 import { useCoreClerk, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
-import { Flow, localizationKeys } from '../../customizables';
+import { Flow, localizationKeys, useLocalizations } from '../../customizables';
 import { VerificationLinkCard } from '../../elements';
 import { useCardState } from '../../elements/contexts';
 import { useMagicLink } from '../../hooks/useMagicLink';
@@ -13,6 +13,7 @@ import { handleError } from '../../utils';
 import { completeSignUpFlow } from './util';
 
 export const SignUpEmailLinkCard = () => {
+  const { t } = useLocalizations();
   const signUp = useCoreSignUp();
   const signUpContext = useSignUpContext();
   const { navigateAfterSignUp } = signUpContext;
@@ -44,7 +45,7 @@ export const SignUpEmailLinkCard = () => {
   const handleVerificationResult = async (su: SignUpResource) => {
     const ver = su.verifications.emailAddress;
     if (ver.status === 'expired') {
-      card.setError('The verification link expired. Please resend it.');
+      card.setError(t(localizationKeys('formFieldError__verificationLinkExpired')));
     } else if (ver.verifiedFromTheSameClient()) {
       setShowVerifyModal(true);
     } else {

packages/localizations/src/de-DE.ts

@@ -36,6 +36,10 @@ export const deDE: LocalizationResource = {
   formFieldInputPlaceholder__lastName: '',
   formFieldInputPlaceholder__backupCode: '',
   formFieldInputPlaceholder__organizationName: '',
+  formFieldError__notMatchingPasswords: `Passwörter stimmen nicht überein.`,
+  formFieldError__matchingPasswords: 'Passwörter stimmen überein.',
+  formFieldError__verificationLinkExpired:
+    'Der Bestätigungslink ist abgelaufen. Bitte fordern Sie einen neuen Link an.',
   formFieldAction__forgotPassword: 'Passwort vergessen?',
   formFieldHintText__optional: 'Optional',
   formButtonPrimary: 'Fortsetzen',

packages/localizations/src/en-US.ts

@@ -61,6 +61,7 @@ export const enUS: LocalizationResource = {
   formFieldInputPlaceholder__organizationDomainEmailAddress: '',
   formFieldError__notMatchingPasswords: `Passwords don't match.`,
   formFieldError__matchingPasswords: 'Passwords match.',
+  formFieldError__verificationLinkExpired: 'The verification link expired. Please request a new link.',
   formFieldAction__forgotPassword: 'Forgot password?',
   formFieldHintText__optional: 'Optional',
   formButtonPrimary: 'Continue',

packages/types/src/localization.ts

@@ -8,7 +8,7 @@ export type LocalizationValue = string;
  * Users aiming to customise a few strings can also peak at the `data-localization-key` attribute by inspecting
  * the DOM and updating the corresponding key.
  * Users aiming to completely localize the components by providing a complete translation can use
- * the default english resource object from {@link https://github.com/clerkinc/javascript our open source repo}
+ * the default english resource object from {@link https://github.com/clerkinc/javascript Clerk's open source repo}
  * as a starting point.
  */
 export type LocalizationResource = DeepPartial<_LocalizationResource>;
@@ -78,6 +78,7 @@ type _LocalizationResource = {
   formFieldInputPlaceholder__organizationDomainEmailAddress: LocalizationValue;
   formFieldError__notMatchingPasswords: LocalizationValue;
   formFieldError__matchingPasswords: LocalizationValue;
+  formFieldError__verificationLinkExpired: LocalizationValue;
   formFieldAction__forgotPassword: LocalizationValue;
   formFieldHintText__optional: LocalizationValue;
   formButtonPrimary: LocalizationValue;