chore: add i18n phrases

packages/console/src/pages/Profile/containers/DeleteAccountModal/components/DeletionConfirmationModal/index.tsx

@@ -1,6 +1,7 @@
 import { type IdTokenClaims, useLogto } from '@logto/react';
 import { TenantRole, getTenantIdFromOrganizationId } from '@logto/schemas';
 import { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import AppLoading from '@/components/AppLoading';
 import { TenantsContext } from '@/contexts/TenantsProvider';
@@ -33,7 +34,12 @@ const getRoleMap = (organizationRoles: string[]) =>
     };
   }, {});
 
-export default function DeletionConfirmationModal() {
+type Props = {
+  readonly onClose: () => void;
+};
+
+export default function DeletionConfirmationModal({ onClose }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
   const [isFinalConfirmationOpen, setIsFinalConfirmationOpen] = useState(false);
   const [claims, setClaims] = useState<IdTokenClaims>();
   const { getIdTokenClaims } = useLogto();
@@ -65,7 +71,7 @@ export default function DeletionConfirmationModal() {
       title="profile.delete_account.label"
       footer={
         <>
-          <Button size="large" title="general.cancel" />
+          <Button size="large" title="general.cancel" onClick={onClose} />
           <Button
             size="large"
             type="danger"
@@ -88,30 +94,21 @@ export default function DeletionConfirmationModal() {
         />
       )}
       <div className={styles.container}>
-        <p>
-          We&apos;re sorry to hear that you want to delete your account. Please check the following
-          information carefully before you proceed.
-        </p>
+        <p>{t('p.check_information')}</p>
         {tenantsToDelete.length > 0 && (
           <TenantsList
-            description="Since you have the admin role in the following tenants, they will be deleted along with your account:"
+            description={t('p.has_admin_role', { count: tenantsToDelete.length })}
             tenants={tenantsToDelete}
           />
         )}
         {tenantsToQuit.length > 0 && (
           <TenantsList
-            description="You are about to quit the following tenants:"
+            description={t('p.quit_tenant', { count: tenantsToQuit.length })}
             tenants={tenantsToQuit}
           />
         )}
-        <p>
-          Deleting your account will permanently remove all data about you in Logto Cloud. So please
-          make sure to backup any important data before proceeding.
-        </p>
-        <p>
-          Please confirm that the information above is what you expected. Once you delete your
-          account, we will not be able to recover it.
-        </p>
+        <p>{t('p.remove_all_data')}</p>
+        <p>{t('p.confirm_information')}</p>
       </div>
     </ModalLayout>
   );

packages/console/src/pages/Profile/containers/DeleteAccountModal/components/FinalConfirmationModal/index.tsx

@@ -1,6 +1,7 @@
 import { useLogto } from '@logto/react';
 import { ResponseError } from '@withtyped/client';
 import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import { useCloudApi, useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
@@ -27,6 +28,7 @@ export default function FinalConfirmationModal({
   tenantsToQuit,
   onClose,
 }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
   const { signOut } = useLogto();
   const { removeTenant } = useContext(TenantsContext);
   const postSignOutRedirectUri = useRedirectUri('signOut');
@@ -62,6 +64,7 @@ export default function FinalConfirmationModal({
         removeTenant(tenant.id);
       }
 
+      // TODO:
       // @ts-expect-error bump the version of @logto/cloud will fix this
       await cloudApi.delete('/api/me', {});
       await signOut(postSignOutRedirectUri.href);
@@ -82,29 +85,26 @@ export default function FinalConfirmationModal({
     >
       {deletionError ? (
         <ModalLayout
-          title="An error occurred"
+          title="profile.delete_account.error_occurred"
           footer={<Button size="large" title="general.got_it" onClick={onClose} />}
         >
           <div className={styles.container}>
-            <p>Sorry, something went wrong while deleting your account:</p>
+            <p>{t('error_occurred_description')}</p>
             <p>
               <code>{deletionError.message}</code>
               {errorRequestId && (
                 <>
                   <br />
-                  <code>Request ID: {errorRequestId}</code>
+                  <code>{t('request_id', { requestId: errorRequestId })}</code>
                 </>
               )}
             </p>
-            <p>
-              Please try again later. If the problem persists, please contact Logto team with the
-              request ID.
-            </p>
+            <p>{t('try_again_later')}</p>
           </div>
         </ModalLayout>
       ) : (
         <ModalLayout
-          title="Final confirmation"
+          title="profile.delete_account.final_confirmation"
           footer={
             <>
               <Button size="large" disabled={isDeleting} title="general.cancel" onClick={onClose} />
@@ -119,9 +119,7 @@ export default function FinalConfirmationModal({
             </>
           }
         >
-          <div className={styles.container}>
-            You are about to start the deletion process and this action cannot be undone.
-          </div>
+          <div className={styles.container}>{t('about_to_start_deletion')}</div>
         </ModalLayout>
       )}
     </ReactModal>

packages/console/src/pages/Profile/containers/DeleteAccountModal/components/TenantsIssuesModal/index.tsx

@@ -1,3 +1,6 @@
+import { type LocalePhrase } from '@logto/phrases';
+import { useTranslation } from 'react-i18next';
+
 import { type TenantResponse } from '@/cloud/types/router';
 import Button from '@/ds-components/Button';
 import ModalLayout from '@/ds-components/ModalLayout';
@@ -7,32 +10,34 @@ import TenantsList from '../TenantsList';
 
 type Props = {
   readonly issues: ReadonlyArray<{
-    readonly description: string;
+    readonly description: keyof LocalePhrase['translation']['admin_console']['profile']['delete_account']['issues'];
     readonly tenants: readonly TenantResponse[];
   }>;
+  readonly onClose: () => void;
 };
 
-export default function TenantsIssuesModal({ issues }: Props) {
+export default function TenantsIssuesModal({ issues, onClose }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
+
   return (
     <ModalLayout
       title="profile.delete_account.label"
-      footer={<Button size="large" title="general.got_it" />}
+      footer={<Button size="large" title="general.got_it" onClick={onClose} />}
     >
       <div className={styles.container}>
-        <p>
-          We&apos;re sorry to hear that you want to delete your account. Before you can delete your
-          account, you need to resolve the following issues.
-        </p>
+        <p>{t('p.has_issue')}</p>
         {issues.map(
           ({ description, tenants }) =>
             tenants.length > 0 && (
-              <TenantsList key={description} description={description} tenants={tenants} />
+              <TenantsList
+                key={description}
+                // eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- false positive
+                description={t(`issues.${description}`, { count: tenants.length })}
+                tenants={tenants}
+              />
             )
         )}
-        <p>
-          Once you have resolved the issues, you can delete your account. Please do not hesitate to
-          contact us if you need any assistance.
-        </p>
+        <p>{t('p.after_resolved')}</p>
       </div>
     </ModalLayout>
   );

packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx

@@ -36,20 +36,14 @@ export default function DeleteAccountModal({ isOpen, onClose }: Props) {
       {hasIssues ? (
         <TenantsIssuesModal
           issues={[
-            {
-              description:
-                'The following tenants have paid plans, please cancel the subscription first:',
-              tenants: paidPlans,
-            },
-            {
-              description: 'The following tenants have subscription issues:',
-              tenants: subscriptionStatusIssues,
-            },
-            { description: 'The following tenants have open invoices:', tenants: openInvoices },
+            { description: 'paid_plan', tenants: paidPlans },
+            { description: 'subscription_status', tenants: subscriptionStatusIssues },
+            { description: 'open_invoice', tenants: openInvoices },
           ]}
+          onClose={onClose}
         />
       ) : (
-        <DeletionConfirmationModal />
+        <DeletionConfirmationModal onClose={onClose} />
       )}
     </ReactModal>
   );

packages/phrases/src/locales/en/translation/admin-console/profile.ts

@@ -51,12 +51,41 @@ const profile = {
     description:
       'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.',
     button: 'Delete account',
-    dialog_paragraph_1:
-      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.",
-    dialog_paragraph_2:
-      'To proceed with the account deletion process, please email our support team at <a>{{mail}}</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.',
-    dialog_paragraph_3:
-      'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.',
+    p: {
+      has_issue:
+        "We're sorry to hear that you want to delete your account. Before you can delete your account, you need to resolve the following issues.",
+      after_resolved:
+        'Once you have resolved the issues, you can delete your account. Please do not hesitate to contact us if you need any assistance.',
+      check_information:
+        "We're sorry to hear that you want to delete your account. Please check the following information carefully before you proceed.",
+      remove_all_data:
+        'Deleting your account will permanently remove all data about you in Logto Cloud. So please make sure to backup any important data before proceeding.',
+      confirm_information:
+        'Please confirm that the information above is what you expected. Once you delete your account, we will not be able to recover it.',
+      has_admin_role:
+        'Since you have the admin role in the following tenant, it will be deleted along with your account:',
+      has_admin_role_other:
+        'Since you have the admin role in the following tenants, they will be deleted along with your account:',
+      quit_tenant: 'You are about to quit the following tenant:',
+      quit_tenant_other: 'You are about to quit the following tenants:',
+    },
+    issues: {
+      paid_plan: 'The following tenant has a paid plan, please cancel the subscription first:',
+      paid_plan_other:
+        'The following tenants have paid plans, please cancel the subscription first:',
+      subscription_status: 'The following tenant has a subscription status issue:',
+      subscription_status_other: 'The following tenants have subscription status issues:',
+      open_invoice: 'The following tenant has an open invoice:',
+      open_invoice_other: 'The following tenants have open invoices:',
+    },
+    error_occurred: 'An error occurred',
+    error_occurred_description: 'Sorry, something went wrong while deleting your account:',
+    request_id: 'Request ID: {{requestId}}',
+    try_again_later:
+      'Please try again later. If the problem persists, please contact Logto team with the request ID.',
+    final_confirmation: 'Final confirmation',
+    about_to_start_deletion:
+      'You are about to start the deletion process and this action cannot be undone.',
   },
   set: 'Set',
   change: 'Change',