From 373febf707ea7c09073bc560ba97176cb740e2b5 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 3 Mar 2023 14:27:01 +0800
Subject: [PATCH] feat(console): add delete account dialog in profile page
 (#3276)

---
 .../DeleteAccountModal/index.module.scss      | 17 ++++++
 .../containers/DeleteAccountModal/index.tsx   | 59 +++++++++++++++++++
 packages/console/src/pages/Profile/index.tsx  | 11 +++-
 .../en/translation/admin-console/profile.ts   |  2 +-
 4 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 packages/console/src/pages/Profile/containers/DeleteAccountModal/index.module.scss
 create mode 100644 packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx

diff --git a/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.module.scss b/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.module.scss
new file mode 100644
index 000000000..4d8263c78
--- /dev/null
+++ b/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.module.scss
@@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  font: var(--font-body-2);
+}
+
+p {
+  margin: 0;
+}
+
+p + p {
+  margin-top: _.unit(6);
+}
+
+.mail {
+  font-weight: bold;
+}
diff --git a/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx b/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx
new file mode 100644
index 000000000..370d2364e
--- /dev/null
+++ b/packages/console/src/pages/Profile/containers/DeleteAccountModal/index.tsx
@@ -0,0 +1,59 @@
+import { Trans, useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import Button from '@/components/Button';
+import ModalLayout from '@/components/ModalLayout';
+import * as modalStyles from '@/scss/modal.module.scss';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const contactUsEmail = 'logto@silverhand.io';
+const mailToLink = `mailto:${contactUsEmail}?subject=Account%20Deletion%20Request`;
+
+const DeleteAccountModal = ({ isOpen, onClose }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <ReactModal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={() => {
+        onClose();
+      }}
+    >
+      <ModalLayout
+        title="profile.delete_account.label"
+        footer={<Button size="large" title="general.got_it" onClick={onClose} />}
+        onClose={() => {
+          onClose();
+        }}
+      >
+        <div className={styles.container}>
+          <p>{t('profile.delete_account.dialog_paragraph_1')}</p>
+          <p>
+            <Trans
+              components={{
+                a: (
+                  // eslint-disable-next-line jsx-a11y/anchor-has-content
+                  <a href={mailToLink} className={styles.mail} />
+                ),
+              }}
+            >
+              {t('profile.delete_account.dialog_paragraph_2', { mail: contactUsEmail })}
+            </Trans>
+          </p>
+          <p>{t('profile.delete_account.dialog_paragraph_3')}</p>
+        </div>
+      </ModalLayout>
+    </ReactModal>
+  );
+};
+
+export default DeleteAccountModal;
diff --git a/packages/console/src/pages/Profile/index.tsx b/packages/console/src/pages/Profile/index.tsx
index b31f92d59..561cf6b8e 100644
--- a/packages/console/src/pages/Profile/index.tsx
+++ b/packages/console/src/pages/Profile/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,12 +11,14 @@ import * as resourcesStyles from '@/scss/resources.module.scss';
 import BasicUserInfoSection from './components/BasicUserInfoSection';
 import CardContent from './components/CardContent';
 import Section from './components/Section';
+import DeleteAccountModal from './containers/DeleteAccountModal';
 import * as styles from './index.module.scss';
 
 const Profile = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const [user, fetchUser] = useLogtoUserInfo();
+  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
 
   if (!user) {
     return null;
@@ -68,10 +71,16 @@ const Profile = () => {
             <Button
               title="profile.delete_account.button"
               onClick={() => {
-                console.log('Not implemented.');
+                setShowDeleteAccountModal(true);
               }}
             />
           </div>
+          <DeleteAccountModal
+            isOpen={showDeleteAccountModal}
+            onClose={() => {
+              setShowDeleteAccountModal(false);
+            }}
+          />
         </Section>
       )}
     </div>
diff --git a/packages/phrases/src/locales/en/translation/admin-console/profile.ts b/packages/phrases/src/locales/en/translation/admin-console/profile.ts
index 1d78725ee..fa25e1053 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/profile.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/profile.ts
@@ -52,7 +52,7 @@ const profile = {
     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.',
+      '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.',
   },