Skip to content

Commit

Permalink
refactor(experience,phrases): update resend passcode phrases
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoyijun committed Jun 24, 2024
1 parent 593db0d commit 9c33b43
Show file tree
Hide file tree
Showing 18 changed files with 91 additions and 52 deletions.
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import resource from '@logto/phrases-experience';
import { SignInIdentifier } from '@logto/schemas';
import { act, fireEvent, waitFor } from '@testing-library/react';

Expand All @@ -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 '.';
Expand Down Expand Up @@ -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', () => {
Expand Down
36 changes: 21 additions & 15 deletions packages/experience/src/containers/VerificationCode/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
)}
Expand Down
23 changes: 17 additions & 6 deletions packages/experience/src/jest.setup.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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();
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/de/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/en/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
5 changes: 3 additions & 2 deletions packages/phrases-experience/src/locales/es/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/fr/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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?',
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/it/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/ja/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}}でアカウントが既に存在しています。リンクしますか?',
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/ko/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}}와/과 연동된 계정이 이미 존재해요. 연동할까요?',
Expand Down
5 changes: 3 additions & 2 deletions packages/phrases-experience/src/locales/pl-pl/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/pt-br/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/pt-pt/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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?',
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/ru/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/tr-tr/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/zh-cn/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}} 的帐号不存在,你要创建一个新帐号吗?',
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/zh-hk/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}} 的帳號不存在,你要創建一個新帳號嗎?',
Expand Down
4 changes: 2 additions & 2 deletions packages/phrases-experience/src/locales/zh-tw/description.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}} 的帳號不存在,你要創建一個新帳號嗎?',
Expand Down

0 comments on commit 9c33b43

Please sign in to comment.