Merged PR 444: 画面実装（アカウント削除成功ページ）

## 概要
[Task2715: 画面実装（アカウント削除成功ページ）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2715)

- 元PBI or タスクへのリンク（内容・目的などはそちらにあるはず）
- 何をどう変更したか、追加したライブラリなど
・アカウント削除成功後に、アカウント削除成功ページに遷移するよう実装
・ログオフ状態にする

- このPull Requestでの対象/対象外
- 影響範囲（他の機能にも影響があるか）

## レビューポイント
- 特にレビューしてほしい箇所
・レイアウトやメッセージの文言
・ログオフ状態にするタイミング
→Back to TOP Pageを押下時にログオフ状態になるようにしています
・Delete Accountボタン（ポップアップ上の）押下時のページ遷移のコード
・その他、漏れがないか

- 軽微なものや自明なものは記載不要
- 修正範囲が大きい場合などに記載
- 全体的にや仕様を満たしているか等は本当に必要な時のみ記載

## UIの変更
- Before/Afterのスクショなど
- スクショ置き場
https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2715?csf=1&web=1&e=0M85t6

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば

dictation_client/src/AppRouter.tsx

@@ -21,6 +21,7 @@ import TypistGroupSettingPage from "pages/TypistGroupSettingPage";
 import WorktypeIdSettingPage from "pages/WorkTypeIdSettingPage";
 import AccountPage from "pages/AccountPage";
 import { TemplateFilePage } from "pages/TemplateFilePage";
+import { AccountDeleteSuccess } from "pages/AccountPage/accountDeleteSuccess";
 
 const AppRouter: React.FC = () => (
   <Routes>
@@ -81,6 +82,8 @@ const AppRouter: React.FC = () => (
       path="/partners"
       element={<RouteAuthGuard component={<PartnerPage />} />}
     />
+    <Route path="/accountDeleteSuccess" element={<AccountDeleteSuccess />} />
+
     <Route path="*" element={<NotFoundPage />} />
   </Routes>
 );

dictation_client/src/pages/AccountPage/accountDeleteSuccess.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { getTranslationID } from "translation";
+import Header from "components/header";
+import Footer from "components/footer";
+import styles from "styles/app.module.scss";
+import { Link } from "react-router-dom";
+import { clearToken } from "features/auth";
+import { AppDispatch } from "app/store";
+import { useDispatch } from "react-redux";
+
+export const AccountDeleteSuccess: React.FC = (): JSX.Element => {
+  const { t } = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
+
+  // アカウントの削除完了時に遷移するページなので、遷移と同時にログアウト状態とする
+  useEffect(() => {
+    dispatch(clearToken());
+  }, [dispatch]);
+
+  return (
+    <div className={styles.wrap}>
+      <Header />
+      <main className={styles.main}>
+        <div className={styles.mainSmall}>
+          <div>
+            <h1 className={styles.marginBtm1}>
+              {t(getTranslationID("accountDeleteSuccess.label.title"))}
+            </h1>
+          </div>
+
+          <section>
+            <dl className={`${styles.formList} ${styles.hasbg}`}>
+              <dt className={styles.formTitle} />
+              <dd className={`${styles.full} ${styles.alignCenter}`}>
+                {t(getTranslationID("accountDeleteSuccess.label.message"))}
+              </dd>
+              <dd className={`${styles.full} ${styles.alignCenter}`}>
+                <Link to="/">
+                  {t(
+                    getTranslationID(
+                      "accountDeleteSuccess.label.backToTopPageLink"
+                    )
+                  )}
+                </Link>
+              </dd>
+            </dl>
+          </section>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+};

dictation_client/src/pages/AccountPage/deleteAccountPopup.tsx

@@ -2,18 +2,19 @@ import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { AppDispatch } from "app/store";
 import { useDispatch, useSelector } from "react-redux";
+import { selectAccountInfo, selectIsLoading } from "features/account";
+import { deleteAccountAsync } from "features/account/operations";
+import { useMsal } from "@azure/msal-react";
 import styles from "../../styles/app.module.scss";
 import { getTranslationID } from "../../translation";
 import close from "../../assets/images/close.svg";
 import deleteButton from "../../assets/images/delete.svg";
-import { selectAccountInfo, selectIsLoading } from "features/account";
-import { deleteAccountAsync } from "features/account/operations";
 
-interface deleteAccountPopupProps {
+interface DeleteAccountPopupProps {
   onClose: () => void;
 }
 
-export const DeleteAccountPopup: React.FC<deleteAccountPopupProps> = (
+export const DeleteAccountPopup: React.FC<DeleteAccountPopupProps> = (
   props
 ) => {
   const { onClose } = props;
@@ -21,6 +22,8 @@ export const DeleteAccountPopup: React.FC<deleteAccountPopupProps> = (
   const dispatch: AppDispatch = useDispatch();
   const isLoading = useSelector(selectIsLoading);
 
+  const { instance } = useMsal();
+
   const accountInfo = useSelector(selectAccountInfo);
 
   // ポップアップを閉じる処理
@@ -31,13 +34,21 @@ export const DeleteAccountPopup: React.FC<deleteAccountPopupProps> = (
     onClose();
   }, [isLoading, onClose]);
 
-  const onDeleteAccount = useCallback(() => {
-    dispatch(
+  const onDeleteAccount = useCallback(async () => {
+    const { meta } = await dispatch(
       deleteAccountAsync({
         accountId: accountInfo.account.accountId,
       })
     );
-  }, [dispatch]);
+
+    // 削除成功後にAccountDeleteSuccess ページに遷移
+    if (meta.requestStatus === "fulfilled") {
+      instance.logoutRedirect({
+        postLogoutRedirectUri: "/accountDeleteSuccess",
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instance]);
 
   // HTML
   return (
@@ -74,7 +85,7 @@ export const DeleteAccountPopup: React.FC<deleteAccountPopupProps> = (
             </dd>
             <dd className={`${styles.full} ${styles.alignCenter}`}>
               <input
-                type="submit"
+                type="button"
                 name="submit"
                 value={t(
                   getTranslationID("deleteAccountPopup.label.deleteButton")

dictation_client/src/translation/de.json

@@ -468,5 +468,12 @@
       "deleteButton": "(de)Delete account",
       "cancelButton": "(de)Cancel"
     }
+  },
+  "accountDeleteSuccess": {
+    "label": {
+      "title": "(de)Account Delete Success",
+      "message": "(de)Your account has been deleted. Thank you for using our services.",
+      "backToTopPageLink": "(de)Back to TOP Page"
+    }
   }
 }

dictation_client/src/translation/en.json

@@ -468,5 +468,12 @@
       "deleteButton": "Delete account",
       "cancelButton": "Cancel"
     }
+  },
+  "accountDeleteSuccess": {
+    "label": {
+      "title": "Account Delete Success",
+      "message": "Your account has been deleted. Thank you for using our services.",
+      "backToTopPageLink": "Back to TOP Page"
+    }
   }
 }

dictation_client/src/translation/es.json

@@ -468,5 +468,12 @@
       "deleteButton": "(es)Delete account",
       "cancelButton": "(es)Cancel"
     }
+  },
+  "accountDeleteSuccess": {
+    "label": {
+      "title": "(es)Account Delete Success",
+      "message": "(es)Your account has been deleted. Thank you for using our services.",
+      "backToTopPageLink": "(es)Back to TOP Page"
+    }
   }
 }

dictation_client/src/translation/fr.json

@@ -468,5 +468,12 @@
       "deleteButton": "(fr)Delete account",
       "cancelButton": "(fr)Cancel"
     }
+  },
+  "accountDeleteSuccess": {
+    "label": {
+      "title": "(fr)Account Delete Success",
+      "message": "(fr)Your account has been deleted. Thank you for using our services.",
+      "backToTopPageLink": "(fr)Back to TOP Page"
+    }
   }
 }