refactor(experience,phrases): update phrases for link identities page (…

…#6104)
logto-io · Jul 8, 2024 · a5fd7ff · a5fd7ff
1 parent 07316cf
commit a5fd7ff
Show file tree

Hide file tree

Showing 36 changed files with 83 additions and 78 deletions.
diff --git a/packages/experience/src/containers/SocialLinkAccount/index.module.scss b/packages/experience/src/containers/SocialLinkAccount/index.module.scss
@@ -14,8 +14,10 @@
   text-align: left;
 }
 
-.divider {
-  margin: _.unit(5) 0;
+.hint {
+  @include _.text-hint;
+  text-align: left;
+  margin-top: _.unit(6);
 }
 
 :global(body.mobile) {

diff --git a/packages/experience/src/containers/SocialLinkAccount/index.test.tsx b/packages/experience/src/containers/SocialLinkAccount/index.test.tsx
@@ -61,7 +61,7 @@ describe('SocialLinkAccount', () => {
       </SettingsProvider>
     );
 
-    expect(queryByText('description.social_link_email')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
     expect(queryByText('action.link_another_email')).not.toBeNull();
   });
 
@@ -81,7 +81,7 @@ describe('SocialLinkAccount', () => {
       </SettingsProvider>
     );
 
-    expect(queryByText('description.social_link_phone')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
     expect(queryByText('action.link_another_phone')).not.toBeNull();
   });
 
@@ -101,7 +101,7 @@ describe('SocialLinkAccount', () => {
       </SettingsProvider>
     );
 
-    expect(queryByText('description.social_link_email_or_phone')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
     expect(queryByText('action.link_another_email_or_phone')).not.toBeNull();
   });
 

diff --git a/packages/experience/src/containers/SocialLinkAccount/index.tsx b/packages/experience/src/containers/SocialLinkAccount/index.tsx
@@ -4,8 +4,8 @@ import type { TFuncKey } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
-import Divider from '@/components/Divider';
 import DynamicT from '@/components/DynamicT';
+import TextLink from '@/components/TextLink';
 import { useSieMethods } from '@/hooks/use-sie';
 import useSocialRegister from '@/hooks/use-social-register';
 import type { SocialRelatedUserInfo } from '@/types/guard';
@@ -20,37 +20,23 @@ type Props = {
   readonly relatedUser: SocialRelatedUserInfo;
 };
 
-const getCreateAccountContent = (
-  signUpMethods: string[]
-): { desc: TFuncKey; buttonText: TFuncKey } => {
+const getCreateAccountActionText = (signUpMethods: string[]): TFuncKey => {
   if (
     signUpMethods.includes(SignInIdentifier.Email) &&
     signUpMethods.includes(SignInIdentifier.Phone)
   ) {
-    return {
-      desc: 'description.social_link_email_or_phone',
-      buttonText: 'action.link_another_email_or_phone',
-    };
+    return 'action.link_another_email_or_phone';
   }
 
   if (signUpMethods.includes(SignInIdentifier.Email)) {
-    return {
-      desc: 'description.social_link_email',
-      buttonText: 'action.link_another_email',
-    };
+    return 'action.link_another_email';
   }
 
   if (signUpMethods.includes(SignInIdentifier.Phone)) {
-    return {
-      desc: 'description.social_link_phone',
-      buttonText: 'action.link_another_phone',
-    };
+    return 'action.link_another_phone';
   }
 
-  return {
-    desc: 'description.social_create_account',
-    buttonText: 'action.create_account_without_linking',
-  };
+  return 'action.create_account_without_linking';
 };
 
 const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
@@ -60,7 +46,7 @@ const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
   const bindSocialRelatedUser = useBindSocialRelatedUser();
   const registerWithSocial = useSocialRegister(connectorId);
 
-  const content = getCreateAccountContent(signUpMethods);
+  const actionText = getCreateAccountActionText(signUpMethods);
 
   const { type, value } = relatedUser;
 
@@ -79,19 +65,17 @@ const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
         }}
       />
 
-      <Divider label="description.or" className={styles.divider} />
-
-      <div className={styles.desc}>
-        <DynamicT forKey={content.desc} />
+      <div className={styles.hint}>
+        <div>
+          <DynamicT forKey="description.skip_social_linking" />
+        </div>
+        <TextLink
+          text={actionText}
+          onClick={() => {
+            void registerWithSocial(connectorId);
+          }}
+        />
       </div>
-
-      <Button
-        title={content.buttonText}
-        type="secondary"
-        onClick={() => {
-          void registerWithSocial(connectorId);
-        }}
-      />
     </div>
   );
 };

diff --git a/packages/experience/src/pages/SocialLinkAccount/index.test.tsx b/packages/experience/src/pages/SocialLinkAccount/index.test.tsx
@@ -24,8 +24,8 @@ describe('SocialRegister', () => {
       </SettingsProvider>,
       { initialEntries: ['/social/link/github'] }
     );
-    expect(queryByText('description.bind_account_title')).not.toBeNull();
-    expect(queryByText('description.social_create_account')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
+    expect(queryByText('action.create_account_without_linking')).not.toBeNull();
   });
 
   it('render link email', () => {
@@ -46,8 +46,8 @@ describe('SocialRegister', () => {
       </SettingsProvider>,
       { initialEntries: ['/social/link/github'] }
     );
-    expect(queryByText('description.link_email')).not.toBeNull();
-    expect(queryByText('description.social_link_email')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
+    expect(queryByText('action.link_another_email')).not.toBeNull();
   });
 
   it('render link phone', () => {
@@ -68,8 +68,8 @@ describe('SocialRegister', () => {
       </SettingsProvider>,
       { initialEntries: ['/social/link/github'] }
     );
-    expect(queryByText('description.link_phone')).not.toBeNull();
-    expect(queryByText('description.social_link_phone')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
+    expect(queryByText('action.link_another_phone')).not.toBeNull();
   });
 
   it('render link email or phone', () => {
@@ -90,7 +90,7 @@ describe('SocialRegister', () => {
       </SettingsProvider>,
       { initialEntries: ['/social/link/github'] }
     );
-    expect(queryByText('description.link_email_or_phone')).not.toBeNull();
-    expect(queryByText('description.social_link_email_or_phone')).not.toBeNull();
+    expect(queryByText('description.skip_social_linking')).not.toBeNull();
+    expect(queryByText('action.link_another_email_or_phone')).not.toBeNull();
   });
 });
diff --git a/packages/integration-tests/src/tests/experience/automatic-account-linking.test.ts b/packages/integration-tests/src/tests/experience/automatic-account-linking.test.ts
@@ -100,7 +100,7 @@ describe('automatic account linking', () => {
       socialEmail: user.primaryEmail!,
     });
 
-    await experience.toClick('button', /create account without linking/i);
+    await experience.toClick('a', 'Create new one instead');
     experience.toMatchUrl(demoAppUrl);
     try {
       await experience.toMatchElement('div', { text: `User ID: ${user.id}`, timeout: 100 });

diff --git a/packages/integration-tests/src/tests/experience/mfa/totp/social-flow.test.ts b/packages/integration-tests/src/tests/experience/mfa/totp/social-flow.test.ts
@@ -77,7 +77,7 @@ describe('MFA - TOTP', () => {
         socialUserId,
         socialEmail: userProfile.primaryEmail,
       });
-      await experience.toClick('button', 'Create account without linking');
+      await experience.toClick('a', 'Create new one instead');
       await experience.toBindTotp();
       await experience.verifyThenEnd();
       await deleteUser(user.id);

diff --git a/packages/phrases-experience/src/locales/de/action.ts b/packages/phrases-experience/src/locales/de/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Anmelden',
   continue: 'Weiter',
   create_account: 'Konto erstellen',
-  create_account_without_linking: 'Erstelle ein Konto ohne Verknüpfung',
+  create_account_without_linking: 'Stattdessen ein neues erstellen',
   create: 'Erstellen',
   enter_passcode: 'Bestätigungscode eingeben',
   confirm: 'Bestätigen',

diff --git a/packages/phrases-experience/src/locales/de/description.ts b/packages/phrases-experience/src/locales/de/description.ts
@@ -33,7 +33,8 @@ const description = {
   social_link_phone: 'Du kannst eine weitere Telefonnummer verknüpfen',
   social_link_email_or_phone: 'Du kannst eine weitere Email oder Telefonnummer verknüpfen',
   social_bind_with_existing:
-    'Wir haben ein verwandtes Konto gefunden, du kannst es direkt verknüpfen.',
+    'Wir haben ein zugehöriges Konto gefunden, das bereits registriert wurde, und Sie können es direkt verknüpfen.',
+  skip_social_linking: 'Verknüpfung mit vorhandenem Konto überspringen?',
   reset_password: 'Passwort vergessen',
   reset_password_description:
     'Gib die {{types, list(type: disjunction;)}} deines Kontos ein und wir senden dir einen Bestätigungscode um dein Passwort zurückzusetzen.',

diff --git a/packages/phrases-experience/src/locales/en/action.ts b/packages/phrases-experience/src/locales/en/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Sign in',
   continue: 'Continue',
   create_account: 'Create account',
-  create_account_without_linking: 'Create account without linking',
+  create_account_without_linking: 'Create new one instead',
   create: 'Create',
   enter_passcode: 'Enter verification code',
   confirm: 'Confirm',

diff --git a/packages/phrases-experience/src/locales/en/description.ts b/packages/phrases-experience/src/locales/en/description.ts
@@ -32,7 +32,9 @@ const description = {
   social_link_email: 'You can link another email',
   social_link_phone: 'You can link another phone',
   social_link_email_or_phone: 'You can link another email or phone',
-  social_bind_with_existing: 'We find a related account, you can link it directly.',
+  social_bind_with_existing:
+    'We found a related account which had been registered, and you can link it directly.',
+  skip_social_linking: 'Skip linking to existing account?',
   reset_password: 'Reset password',
   reset_password_description:
     'Enter the {{types, list(type: disjunction;)}} associated with your account, and we’ll send you the verification code to reset your password.',

diff --git a/packages/phrases-experience/src/locales/es/action.ts b/packages/phrases-experience/src/locales/es/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Iniciar sesión',
   continue: 'Continuar',
   create_account: 'Crear una cuenta',
-  create_account_without_linking: 'Crear una cuenta sin vinculación',
+  create_account_without_linking: 'Crear uno nuevo en su lugar',
   create: 'Crear',
   enter_passcode: 'Ingresar código de verificación',
   confirm: 'Confirmar',

diff --git a/packages/phrases-experience/src/locales/es/description.ts b/packages/phrases-experience/src/locales/es/description.ts
@@ -32,7 +32,8 @@ const description = {
   social_link_phone: 'Puede vincular otro teléfono',
   social_link_email_or_phone: 'Puede vincular otro correo electrónico o teléfono',
   social_bind_with_existing:
-    'Hemos encontrado una cuenta relacionada, puede vincularla directamente.',
+    'Hemos encontrado una cuenta relacionada que ya ha sido registrada, y puede vincularla directamente.',
+  skip_social_linking: '¿Omitir vinculación a la cuenta existente?',
   reset_password: 'Restablecer contraseña',
   reset_password_description:
     'Ingrese los {{types, lista(type: disyunción;)}} asociados a su cuenta, y le enviaremos el código de verificación para restablecer su contraseña.',

diff --git a/packages/phrases-experience/src/locales/fr/action.ts b/packages/phrases-experience/src/locales/fr/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Connexion',
   continue: 'Continuer',
   create_account: 'Créer un compte',
-  create_account_without_linking: 'Créer un compte sans lier',
+  create_account_without_linking: 'Créer un nouveau à la place',
   create: 'Créer',
   enter_passcode: 'Entrer le code',
   confirm: 'Confirmer',

diff --git a/packages/phrases-experience/src/locales/fr/description.ts b/packages/phrases-experience/src/locales/fr/description.ts
@@ -33,7 +33,8 @@ const description = {
   social_link_email_or_phone:
     'Vous pouvez lier une autre adresse e-mail ou un autre numéro de téléphone',
   social_bind_with_existing:
-    'Nous avons trouvé un compte associé, vous pouvez le lier directement.',
+    'Nous avons trouvé un compte associé qui a été enregistré, et vous pouvez le lier directement.',
+  skip_social_linking: 'Ignorer le lien avec le compte existant ?',
   reset_password: 'Mot de passe oublié',
   reset_password_description:
     'Entrez le {{types, list(type: disjunction;)}} associé à votre compte et nous vous enverrons le code de vérification pour réinitialiser votre mot de passe.',

diff --git a/packages/phrases-experience/src/locales/it/action.ts b/packages/phrases-experience/src/locales/it/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Accedi',
   continue: 'Continua',
   create_account: 'Crea account',
-  create_account_without_linking: 'Crea account senza collegare',
+  create_account_without_linking: 'Creare uno nuovo invece',
   create: 'Crea',
   enter_passcode: 'Inserisci il codice di verifica',
   confirm: 'Conferma',

diff --git a/packages/phrases-experience/src/locales/it/description.ts b/packages/phrases-experience/src/locales/it/description.ts
@@ -30,7 +30,9 @@ const description = {
   social_link_email: "Puoi collegare un'altra email",
   social_link_phone: 'Puoi collegare un altro telefono',
   social_link_email_or_phone: "Puoi collegare un'altra email o telefono",
-  social_bind_with_existing: 'Abbiamo trovato un account correlato, puoi collegarlo direttamente.',
+  social_bind_with_existing:
+    'Abbiamo trovato un account correlato che era già stato registrato, e puoi collegarlo direttamente.',
+  skip_social_linking: "Saltare il collegamento all'account esistente?",
   reset_password: 'Resetta la password',
   reset_password_description:
     'Inserisci il {{types, list(type: disjunction;)}} associato al tuo account, e ti invieremo il codice di verifica per resettare la password.',

diff --git a/packages/phrases-experience/src/locales/ja/action.ts b/packages/phrases-experience/src/locales/ja/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'サインイン',
   continue: '続ける',
   create_account: 'アカウントを作成する',
-  create_account_without_linking: 'リンクなしでアカウントを作成する',
+  create_account_without_linking: '代わりに新しいアカウントを作成する',
   create: '作成する',
   enter_passcode: '認証コードを入力してください',
   confirm: '確認する',

diff --git a/packages/phrases-experience/src/locales/ja/description.ts b/packages/phrases-experience/src/locales/ja/description.ts
@@ -31,7 +31,9 @@ const description = {
   social_link_email: '別のメールアドレスをリンクできます。',
   social_link_phone: '他の電話番号にリンクできます。',
   social_link_email_or_phone: '他のメールアドレスまたは電話番号にリンクできます。',
-  social_bind_with_existing: '関連するアカウントが見つかりました。それを直接リンクできます。',
+  social_bind_with_existing:
+    '関連するアカウントが登録されているのが見つかりましたので、直接リンクできます。',
+  skip_social_linking: '既存のアカウントとのリンクをスキップしますか？',
   reset_password: 'パスワードを再設定する',
   reset_password_description:
     'アカウントに関連する{{types, list(type: disjunction;)}}を入力すると、パスワードの再設定に必要な確認コードが送信されます。',

diff --git a/packages/phrases-experience/src/locales/ko/action.ts b/packages/phrases-experience/src/locales/ko/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: '로그인',
   continue: '계속',
   create_account: '계정 생성',
-  create_account_without_linking: '연동 없이 계정 생성하기',
+  create_account_without_linking: '대신 새로 만들기',
   create: '생성',
   enter_passcode: '비밀번호 입력',
   confirm: '확인',

diff --git a/packages/phrases-experience/src/locales/ko/description.ts b/packages/phrases-experience/src/locales/ko/description.ts
@@ -29,7 +29,8 @@ const description = {
   social_link_email: '다른 이메일을 연동할 수 있어요',
   social_link_phone: '다른 휴대전화를 연동할 수 있어요',
   social_link_email_or_phone: '다른 이메일이나 휴대전화를 연동할 수 있어요',
-  social_bind_with_existing: '관련된 계정을 찾았어요. 직접 연동할 수 있어요.',
+  social_bind_with_existing: '이미 등록된 관련 계정을 찾았으며, 직접 연결할 수 있습니다.',
+  skip_social_linking: '기존 계정 연결 건너뛰기?',
   reset_password: '비밀번호를 잊으셨나요',
   reset_password_description:
     '귀하의 계정과 연결된 {{types, list(type: disjunction;)}}를 입력하면 비밀번호 재설정을 위한 인증 코드를 보내드립니다.',

diff --git a/packages/phrases-experience/src/locales/pl-pl/action.ts b/packages/phrases-experience/src/locales/pl-pl/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Zaloguj się',
   continue: 'Kontynuuj',
   create_account: 'Utwórz konto',
-  create_account_without_linking: 'Utwórz konto bez łączenia',
+  create_account_without_linking: 'Zamiast tego utwórz nowy',
   create: 'Utwórz',
   enter_passcode: 'Wprowadź kod weryfikacyjny',
   confirm: 'Potwierdź',

diff --git a/packages/phrases-experience/src/locales/pl-pl/description.ts b/packages/phrases-experience/src/locales/pl-pl/description.ts
@@ -30,7 +30,9 @@ const description = {
   social_link_email: 'Możesz połączyć kolejny adres email',
   social_link_phone: 'Możesz połączyć kolejny numer telefonu',
   social_link_email_or_phone: 'Możesz połączyć kolejny adres email lub numer telefonu',
-  social_bind_with_existing: 'Znaleźliśmy powiązane konto, możesz je połączyć bezpośrednio.',
+  social_bind_with_existing:
+    'Znaleźliśmy powiązane konto, które zostało zarejestrowane, i możesz je bezpośrednio połączyć.',
+  skip_social_linking: 'Pominąć połączenie z istniejącym kontem?',
   reset_password: 'Zresetuj hasło',
   reset_password_description:
     'Wpisz {{types, lista(type: złączonych;)}} związanego z twoim kontem, a wyślemy ci kod weryfikacyjny do zresetowania hasła.',

diff --git a/packages/phrases-experience/src/locales/pt-br/action.ts b/packages/phrases-experience/src/locales/pt-br/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Entrar',
   continue: 'Continuar',
   create_account: 'Criar conta',
-  create_account_without_linking: 'Criar conta sem vincular',
+  create_account_without_linking: 'Criar um novo em vez disso',
   create: 'Criar',
   enter_passcode: 'Inserir código de verificação',
   confirm: 'Confirmar',

diff --git a/packages/phrases-experience/src/locales/pt-br/description.ts b/packages/phrases-experience/src/locales/pt-br/description.ts
@@ -31,7 +31,8 @@ const description = {
   social_link_phone: 'É possível vincular outro telefone',
   social_link_email_or_phone: 'É possível vincular outro e-mail ou telefone',
   social_bind_with_existing:
-    'Encontramos uma conta relacionada registrada e você pode vinculá-la diretamente.',
+    'Encontramos uma conta relacionada que já foi registrada, e você pode vinculá-la diretamente.',
+  skip_social_linking: 'Pular vinculação à conta existente?',
   reset_password: 'Esqueceu a senha',
   reset_password_description:
     'Digite o {{types, list(type: disjunction;)}} à sua conta e enviaremos a você o código de verificação para redefinir sua senha.',

diff --git a/packages/phrases-experience/src/locales/pt-pt/action.ts b/packages/phrases-experience/src/locales/pt-pt/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Entrar',
   continue: 'Continuar',
   create_account: 'Criar uma conta',
-  create_account_without_linking: 'Criar conta sem vinculação',
+  create_account_without_linking: 'Criar um novo em vez disso',
   create: 'Criar',
   enter_passcode: 'Introduzir código de verificação',
   confirm: 'Confirmar',

diff --git a/packages/phrases-experience/src/locales/pt-pt/description.ts b/packages/phrases-experience/src/locales/pt-pt/description.ts
@@ -30,7 +30,8 @@ const description = {
   social_link_phone: 'Pode vincular outro telefone',
   social_link_email_or_phone: 'Pode vincular outro email ou telefone',
   social_bind_with_existing:
-    'Encontramos uma conta relacionada registrada e você pode vinculá-la diretamente.',
+    'Encontrámos uma conta relacionada que já foi registada, e você pode vinculá-la diretamente.',
+  skip_social_linking: 'Pular vinculação à conta existente?',
   reset_password: 'Esqueceu a senha',
   reset_password_description:
     'Insira os {{types, list(type: disjunction;)}} associados à sua conta e enviaremos o código de verificação para redefinir sua senha.',

diff --git a/packages/phrases-experience/src/locales/ru/action.ts b/packages/phrases-experience/src/locales/ru/action.ts
@@ -2,7 +2,7 @@ const action = {
   sign_in: 'Войти',
   continue: 'Продолжить',
   create_account: 'Создать аккаунт',
-  create_account_without_linking: 'Создать аккаунт без связывания',
+  create_account_without_linking: 'Создать новый вместо этого',
   create: 'Создать',
   enter_passcode: 'Введите код подтверждения',
   confirm: 'Подтвердить',