refactor(experience,phrases): update resend passcode phrases (#6103)

2024-12-30 20:33:54 -05:00 · 2024-06-25 10:36:31 +08:00 · 2024-06-25 10:36:31 +08:00 · f2c7799ee6
commit f2c7799ee6
parent d123d46ebc
18 changed files with 91 additions and 52 deletions
--- a/packages/experience/src/containers/VerificationCode/index.test.tsx
+++ b/packages/experience/src/containers/VerificationCode/index.test.tsx
@ -1,3 +1,4 @@
+import resource from '@logto/phrases-experience';
 import { SignInIdentifier } from '@logto/schemas';
 import { act, fireEvent, waitFor } from '@testing-library/react';

@ -8,6 +9,7 @@ import {
  addProfileWithVerificationCodeIdentifier,
 } from '@/apis/interaction';
 import { sendVerificationCodeApi } from '@/apis/utils';
+import { setupI18nForTesting } from '@/jest.setup';
 import { UserFlow } from '@/types';

 import VerificationCode from '.';
@ -69,19 +71,37 @@ describe('<VerificationCode />', () => {
  });

  it('fire resend event', async () => {
+    /**
+     * Apply the resource with resend_passcode for testing nested translation
+     * Since the 'resend_passcode' phrase need be rendered into the following structure for testing:
+     * ```
+     * <div>Not received yet? <a>Resend verification code</a></div>
+     * ```
+     * otherwise this phrase will be rendered as 'description.resend_passcode'.
+     * That will cause the resend button cannot be clicked.
+     */
+    await setupI18nForTesting({
+      translation: {
+        description: { resend_passcode: resource.en.translation.description.resend_passcode },
+      },
+    });
+
    const { getByText } = renderWithPageContext(
      <VerificationCode flow={UserFlow.SignIn} identifier={SignInIdentifier.Email} target={email} />
    );
    act(() => {
      jest.advanceTimersByTime(1e3 * 60);
    });
-    const resendButton = getByText('description.resend_passcode');
+    const resendButton = getByText('Resend verification code');

    await waitFor(() => {
      fireEvent.click(resendButton);
    });

    expect(sendVerificationCodeApi).toBeCalledWith(UserFlow.SignIn, { email });
+
+    // Reset i18n
+    await setupI18nForTesting();
  });

  describe('sign-in', () => {
--- a/packages/experience/src/containers/VerificationCode/index.tsx
+++ b/packages/experience/src/containers/VerificationCode/index.tsx
@ -61,24 +61,30 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
        error={errorMessage}
        onChange={setCode}
      />
-      {isRunning ? (
-        <div className={styles.message}>
+      <div className={styles.message}>
+        {isRunning ? (
          <Trans components={{ span: <span key="counter" /> }}>
            {t('description.resend_after_seconds', { seconds })}
          </Trans>
-        </div>
-      ) : (
-        <TextLink
-          className={styles.link}
-          text="description.resend_passcode"
-          onClick={async () => {
-            clearErrorMessage();
-            await onResendVerificationCode();
-            setCode([]);
-          }}
-        />
-      )}
-
+        ) : (
+          <Trans
+            components={{
+              a: (
+                <TextLink
+                  className={styles.link}
+                  onClick={async () => {
+                    clearErrorMessage();
+                    await onResendVerificationCode();
+                    setCode([]);
+                  }}
+                />
+              ),
+            }}
+          >
+            {t('description.resend_passcode')}
+          </Trans>
+        )}
+      </div>
      {flow === UserFlow.SignIn && hasPasswordButton && (
        <PasswordSignInLink method={identifier} target={target} className={styles.switch} />
      )}
--- a/packages/experience/src/jest.setup.ts
+++ b/packages/experience/src/jest.setup.ts
@ -1,5 +1,7 @@
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

+import { type LocalePhrase } from '@logto/phrases-experience';
+import { type DeepPartial } from '@silverhand/essentials';
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';

@ -19,9 +21,18 @@ Object.defineProperty(window, 'matchMedia', {
  })),
 });

-void i18next.use(initReactI18next).init({
-  // Simple resources for testing
-  resources: { en: { translation: { action: { agree: 'Agree' } } } },
-  lng: 'en',
-  react: { useSuspense: false },
-});
+// Simple resources for testing
+const defaultI18nResources: DeepPartial<LocalePhrase> = {
+  translation: { action: { agree: 'Agree' } },
+};
+
+export const setupI18nForTesting = async (
+  enPhrase: DeepPartial<LocalePhrase> = defaultI18nResources
+) =>
+  i18next.use(initReactI18next).init({
+    resources: { en: enPhrase },
+    lng: 'en',
+    react: { useSuspense: false },
+  });
+
+void setupI18nForTesting();
--- a/packages/phrases-experience/src/locales/de/description.ts
+++ b/packages/phrases-experience/src/locales/de/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'und',
  enter_passcode: 'Der Bestätigungscode wurde an deine {{address}} gesendet',
  passcode_sent: 'Der Bestätigungscode wurde erneut gesendet',
-  resend_after_seconds: 'Nach <span>{{seconds}}</span> Sekunden erneut senden',
-  resend_passcode: 'Bestätigungscode erneut senden',
+  resend_after_seconds: 'Noch nicht erhalten? Erneut senden nach <span>{{seconds}}</span> Sekunden',
+  resend_passcode: 'Noch nicht erhalten? <a>Bestätigungscode erneut senden</a>',
  create_account_id_exists:
    'Das Konto mit {{type}} {{value}} existiert bereits, möchtest du dich anmelden?',
  link_account_id_exists:
--- a/packages/phrases-experience/src/locales/en/description.ts
+++ b/packages/phrases-experience/src/locales/en/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'and',
  enter_passcode: 'The verification code has been sent to your {{address}} {{target}}',
  passcode_sent: 'The verification code has been resent',
-  resend_after_seconds: 'Resend after <span>{{seconds}}</span> seconds',
-  resend_passcode: 'Resend verification code',
+  resend_after_seconds: 'Not received yet? Resend after <span>{{seconds}}</span> seconds',
+  resend_passcode: 'Not received yet? <a>Resend verification code</a>',
  create_account_id_exists:
    'The account with {{type}} {{value}} already exists, would you like to sign in?',
  link_account_id_exists:
--- a/packages/phrases-experience/src/locales/es/description.ts
+++ b/packages/phrases-experience/src/locales/es/description.ts
@ -14,8 +14,9 @@ const description = {
  and: 'y',
  enter_passcode: 'El código de verificación ha sido enviado a su {{address}} {{target}}',
  passcode_sent: 'El código de verificación ha sido reenviado',
-  resend_after_seconds: 'Reenviar después de <span>{{seconds}}</span> segundos',
-  resend_passcode: 'Reenviar código de verificación',
+  resend_after_seconds:
+    '¿No lo has recibido? Reenviar después de <span>{{seconds}}</span> segundos',
+  resend_passcode: '¿No lo has recibido? <a>Reenviar código de verificación</a>',
  create_account_id_exists: 'La cuenta con {{type}} {{value}} ya existe, ¿desea iniciar sesión?',
  link_account_id_exists: 'La cuenta con {{type}} {{value}} ya existe. ¿Desea vincular?',
  sign_in_id_does_not_exist:
--- a/packages/phrases-experience/src/locales/fr/description.ts
+++ b/packages/phrases-experience/src/locales/fr/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'et',
  enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',
  passcode_sent: 'Le code a été renvoyé',
-  resend_after_seconds: 'Renvoyer après <span>{{seconds}}</span> secondes',
-  resend_passcode: 'Renvoyer le code',
+  resend_after_seconds: 'Pas encore reçu ? Renvoyer après <span>{{seconds}}</span> secondes',
+  resend_passcode: 'Pas encore reçu ? <a>Renvoyer le code de vérification</a>',
  create_account_id_exists:
    'Le compte avec {{type}} {{value}} existe déjà, voulez-vous vous connecter?',
  link_account_id_exists: 'Le compte avec {{type}} {{value}} existe déjà, voulez-vous le lier?',
--- a/packages/phrases-experience/src/locales/it/description.ts
+++ b/packages/phrases-experience/src/locales/it/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'e',
  enter_passcode: 'Il codice di verifica è stato inviato alla tua {{address}} {{target}}',
  passcode_sent: 'Il codice di verifica è stato inviato di nuovo',
-  resend_after_seconds: 'Inviare di nuovo dopo <span>{{seconds}}</span> secondi',
-  resend_passcode: 'Inviare nuovamente il codice di verifica',
+  resend_after_seconds: 'Non ricevuto? Invia di nuovo dopo <span>{{seconds}}</span> secondi',
+  resend_passcode: 'Non ricevuto? <a>Invia di nuovo il codice di verifica</a>',
  create_account_id_exists: "L'account con {{type}} {{value}} già esiste, vuoi accedere?",
  link_account_id_exists: "L'account con {{type}} {{value}} è già esistente. Vuoi collegarlo?",
  sign_in_id_does_not_exist:
--- a/packages/phrases-experience/src/locales/ja/description.ts
+++ b/packages/phrases-experience/src/locales/ja/description.ts
@ -14,8 +14,8 @@ const description = {
  and: '及び',
  enter_passcode: '確認コードが{{address}} {{target}}に送信されました',
  passcode_sent: '確認コードを再送します',
-  resend_after_seconds: '<span>{{seconds}}</span>秒後に再送信',
-  resend_passcode: '確認コードを再送信します',
+  resend_after_seconds: 'まだ届いていませんか？ <span>{{seconds}}</span> 秒後に再送',
+  resend_passcode: 'まだ届いていませんか？ <a>認証コードを再送</a>',
  create_account_id_exists:
    '{{type}} {{value}}でアカウントが既に存在しています。ログインしますか？',
  link_account_id_exists: '{{type}} {{value}}でアカウントが既に存在しています。リンクしますか？',
--- a/packages/phrases-experience/src/locales/ko/description.ts
+++ b/packages/phrases-experience/src/locales/ko/description.ts
@ -14,8 +14,8 @@ const description = {
  and: '그리고',
  enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.',
  passcode_sent: '비밀번호가 재전송되었어요.',
-  resend_after_seconds: '<span>{{seconds}}</span> 초 후에 재전송',
-  resend_passcode: '비밀번호 재전송',
+  resend_after_seconds: '아직 못 받으셨나요? <span>{{seconds}}</span> 초 후에 다시 보내기',
+  resend_passcode: '아직 못 받으셨나요? <a>인증 코드를 다시 보내기</a>',
  create_account_id_exists:
    '{{type}} {{value}} 계정은 다른 계정과 연결되어 있습니다. 다른 {{type}}을(를) 시도해주세요.',
  link_account_id_exists: '{{type}} {{value}}와/과 연동된 계정이 이미 존재해요. 연동할까요?',
--- a/packages/phrases-experience/src/locales/pl-pl/description.ts
+++ b/packages/phrases-experience/src/locales/pl-pl/description.ts
@ -14,8 +14,9 @@ const description = {
  and: 'i',
  enter_passcode: 'Kod weryfikacyjny został wysłany na twoje {{address}} {{target}}',
  passcode_sent: 'Kod weryfikacyjny został wysłany ponownie',
-  resend_after_seconds: 'Wyślij ponownie po <span>{{seconds}}</span> sekundach',
-  resend_passcode: 'Wyślij kod weryfikacyjny ponownie',
+  resend_after_seconds:
+    'Nie otrzymałeś jeszcze? Wyślij ponownie za <span>{{seconds}}</span> sekund',
+  resend_passcode: 'Nie otrzymałeś jeszcze? <a>Wyślij ponownie kod weryfikacyjny</a>',
  create_account_id_exists: 'Konto z {{type}} {{value}} już istnieje. Czy chcesz się zalogować?',
  link_account_id_exists: 'Konto z {{type}} {{value}} już istnieje. Czy chcesz je połączyć?',
  sign_in_id_does_not_exist:
--- a/packages/phrases-experience/src/locales/pt-br/description.ts
+++ b/packages/phrases-experience/src/locales/pt-br/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'e',
  enter_passcode: 'O código de verificação foi enviado para o seu {{address}} {{target}}',
  passcode_sent: 'O código de verificação foi reenviado',
-  resend_after_seconds: 'Reenviar depois <span>{{seconds}}</span> segundos',
-  resend_passcode: 'Reenviar código de verificação',
+  resend_after_seconds: 'Ainda não recebeu? Reenviar após <span>{{seconds}}</span> segundos',
+  resend_passcode: 'Ainda não recebeu? <a>Reenviar código de verificação</a>',
  create_account_id_exists: 'A conta com {{type}} {{value}} já existe, gostaria de entrar?',
  link_account_id_exists: 'A conta com {{type}} {{value}} já existe, gostaria de vincular?',
  sign_in_id_does_not_exist:
--- a/packages/phrases-experience/src/locales/pt-pt/description.ts
+++ b/packages/phrases-experience/src/locales/pt-pt/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'e',
  enter_passcode: 'O código de verificação foi enviado para o seu {{address}} {{target}}',
  passcode_sent: 'O código de verificação foi reenviado',
-  resend_after_seconds: 'Reenviar após <span>{{seconds}}</span> segundos',
-  resend_passcode: 'Reenviar código de verificação',
+  resend_after_seconds: 'Ainda não recebeu? Reenviar após <span>{{seconds}}</span> segundos',
+  resend_passcode: 'Ainda não recebeu? <a>Reenviar código de verificação</a>',
  create_account_id_exists: 'A conta com {{type}} {{value}} já existe, gostaria de fazer login?',
  link_account_id_exists: 'A conta com {{type}} {{value}} já existe, gostaria de vinculá-la?',
  sign_in_id_does_not_exist: 'A conta com {{type}} {{value}} não existe, gostaria de criar uma?',
--- a/packages/phrases-experience/src/locales/ru/description.ts
+++ b/packages/phrases-experience/src/locales/ru/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 'и',
  enter_passcode: 'Код подтверждения был отправлен на {{address}}',
  passcode_sent: 'Код подтверждения был отправлен повторно',
-  resend_after_seconds: 'Отправить повторно через <span>{{seconds}}</span> сек.',
-  resend_passcode: 'Отправить повторно',
+  resend_after_seconds: 'Еще не получили? Отправить повторно через <span>{{seconds}}</span> секунд',
+  resend_passcode: 'Еще не получили? <a>Отправить повторно код подтверждения</a>',
  create_account_id_exists: 'Учетная запись для {{value}} уже существует, хотите войти?',
  link_account_id_exists: 'Учетная запись для {{value}} уже существует, хотите привязать?',
  sign_in_id_does_not_exist:
--- a/packages/phrases-experience/src/locales/tr-tr/description.ts
+++ b/packages/phrases-experience/src/locales/tr-tr/description.ts
@ -14,8 +14,8 @@ const description = {
  and: 've',
  enter_passcode: 'Doğrulama kodu {{address}} {{target}} adresinize gönderildi',
  passcode_sent: 'Doğrulama kodu yeniden gönderildi',
-  resend_after_seconds: '<span>{{seconds}}</span> saniye sonra tekrar gönder',
-  resend_passcode: 'Doğrulama kodunu tekrar gönder',
+  resend_after_seconds: 'Henüz almadınız mı? <span>{{seconds}}</span> saniye sonra tekrar gönderin',
+  resend_passcode: 'Henüz almadınız mı? <a>Doğrulama kodunu tekrar gönderin</a>',
  create_account_id_exists: '{{type}} {{value}} ile hesap mevcut, giriş yapmak ister misiniz?',
  link_account_id_exists: '{{type}} {{value}} olan hesap zaten var, bağlamak ister misiniz?',
  sign_in_id_does_not_exist:
--- a/packages/phrases-experience/src/locales/zh-cn/description.ts
+++ b/packages/phrases-experience/src/locales/zh-cn/description.ts
@ -14,8 +14,8 @@ const description = {
  and: '和',
  enter_passcode: '验证码已经发送至你的{{ address }} {{target}}',
  passcode_sent: '验证码已经发送',
-  resend_after_seconds: '在 <span>{{ seconds }}</span> 秒后重发',
-  resend_passcode: '重发验证码',
+  resend_after_seconds: '还没收到？ <span>{{seconds}}</span> 秒后重发',
+  resend_passcode: '还没收到？ <a>重发验证码</a>',
  create_account_id_exists: '{{type}}为 {{value}} 的帐号已存在，你要登录吗？',
  link_account_id_exists: ' {{type}}为 {{value}} 的账号已注册，你要绑定至这个账号吗？',
  sign_in_id_does_not_exist: '{{type}}为 {{value}} 的帐号不存在，你要创建一个新帐号吗？',
--- a/packages/phrases-experience/src/locales/zh-hk/description.ts
+++ b/packages/phrases-experience/src/locales/zh-hk/description.ts
@ -14,8 +14,8 @@ const description = {
  and: '和',
  enter_passcode: '驗證碼已經發送至你的{{ address }} {{target}}',
  passcode_sent: '驗證碼已經發送',
-  resend_after_seconds: '在 <span>{{ seconds }}</span> 秒後重發',
-  resend_passcode: '重發驗證碼',
+  resend_after_seconds: '還沒收到？ <span>{{seconds}}</span> 秒後重發',
+  resend_passcode: '還沒收到？ <a>重發驗證碼</a>',
  create_account_id_exists: '{{type}}為 {{value}} 的帳號已存在，你要登錄嗎？',
  link_account_id_exists: ' {{type}}為 {{value}} 的帳號已註冊，你要綁定至這個帳號嗎？',
  sign_in_id_does_not_exist: '{{type}}為 {{value}} 的帳號不存在，你要創建一個新帳號嗎？',
--- a/packages/phrases-experience/src/locales/zh-tw/description.ts
+++ b/packages/phrases-experience/src/locales/zh-tw/description.ts
@ -14,8 +14,8 @@ const description = {
  and: '和',
  enter_passcode: '驗證碼已經發送至你的{{address}} {{target}}',
  passcode_sent: '驗證碼已經發送',
-  resend_after_seconds: '在 <span>{{seconds}}</span> 秒後重新發送',
-  resend_passcode: '重新發送驗證碼',
+  resend_after_seconds: '還沒收到？ <span>{{seconds}}</span> 秒後重發',
+  resend_passcode: '還沒收到？ <a>重發驗證碼</a>',
  create_account_id_exists: '{{type}} 為 {{value}} 的帳號已存在，你要登錄嗎？',
  link_account_id_exists: ' {{type}} 為 {{value}} 的帳號已註冊，你要綁定至這個帳號嗎？',
  sign_in_id_does_not_exist: '{{type}} 為 {{value}} 的帳號不存在，你要創建一個新帳號嗎？',