From 6e3c9d5c8134ab147292f367918c3cf230b28a85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E6=9C=AC=20=E7=A5=90=E5=B8=8C?=
 <mizumoto.y@nds-tyo.co.jp>
Date: Wed, 19 Jul 2023 00:43:09 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20244:=20Partner=E4=B8=80=E8=A6=A7?=
 =?UTF-8?q?=E4=BB=AE=E7=94=BB=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task2229: Partner一覧仮画面](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/OMDSDictation/_workitems/edit/2229/)

- 何をどう変更したか、追加したライブラリなど
・Partner一覧の仮画面を作成しました。
　ボタン追加とアカウント階層の画面表示
- このPull Requestでの対象/対象外
・仮画面なので、レイアウトに関しては対象外です。
・46行目にonClickをコメントアウトしています。
　後々使用すると思い、わざと消していないですが、レビューで消すか否かを
　コメントいただければと思います。

## レビューポイント
- 特にレビューしてほしい箇所
・ヘッダのpartnerタブ押下により画面が表示できること
・第1～3階層で「Add Account」ボタンが表示されるか
・第4階層で「Add Account」ボタンが非表示かどうか
・第1～4階層で正しく階層が表示されるか
　例：第１階層でログイン→Tier:１と表示

## 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/Task2155?csf=1&web=1&e=d1MRi8

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

## 補足
- 相談、参考資料などがあれば
---
 dictation_client/src/AppRouter.tsx            |  5 +
 .../src/pages/PartnerPage/index.tsx           | 92 +++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 dictation_client/src/pages/PartnerPage/index.tsx

diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx
index a3d4ffd..c337f86 100644
--- a/dictation_client/src/AppRouter.tsx
+++ b/dictation_client/src/AppRouter.tsx
@@ -16,6 +16,7 @@ import UserListPage from "pages/UserListPage";
 import LicensePage from "pages/LicensePage";
 import DictationPage from "pages/DictationPage";
 import LicenseOrderHistoryPage from "pages/LicenseOrderHistoryPage";
+import PartnerPage from "pages/PartnerPage";
 
 const AppRouter: React.FC = () => (
   <Routes>
@@ -64,6 +65,10 @@ const AppRouter: React.FC = () => (
       path="/workflow"
       element={<RouteAuthGuard component={<SamplePage />} />}
     />
+    <Route
+      path="/partners"
+      element={<RouteAuthGuard component={<PartnerPage />} />}
+    />
     <Route path="*" element={<NotFoundPage />} />
   </Routes>
 );
diff --git a/dictation_client/src/pages/PartnerPage/index.tsx b/dictation_client/src/pages/PartnerPage/index.tsx
new file mode 100644
index 0000000..1b81e82
--- /dev/null
+++ b/dictation_client/src/pages/PartnerPage/index.tsx
@@ -0,0 +1,92 @@
+import { useMsal } from "@azure/msal-react";
+import { AppDispatch } from "app/store";
+import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
+import Footer from "components/footer";
+import Header from "components/header";
+import { clearToken } from "features/auth";
+import React from "react";
+import { useDispatch } from "react-redux";
+import styles from "styles/app.module.scss";
+import { loadAccessToken, isApproveTier } from "features/auth/utils";
+import postAdd from "../../assets/images/post_add.svg";
+import { decodeToken } from "../../common/decodeToken";
+import { TIERS } from "../../components/auth/constants";
+
+const PartnerPage: React.FC = (): JSX.Element => {
+  const { instance } = useMsal();
+  const dispatch: AppDispatch = useDispatch();
+
+  /* 本実装の際に消す想定です。
+  POデモ時に階層情報を表示するための実装です。 */
+  const getUserTier = () => {
+    const jwt = loadAccessToken(); // トークンを取得
+    const token = jwt && decodeToken(jwt); // トークンをデコード
+
+    if (token && token.tier) {
+      return token.tier.toString(); // ユーザーの階層情報を取得
+    }
+
+    return "error!"; // 階層情報が見つからない場合はerror!を返す
+  };
+
+  /* 本実装の際に消す想定です。
+  ログインしているアカウントの階層を確認するために実装 */
+  const userTier = getUserTier();
+  // 第1～3階層にボタンを表示する
+  const isVisible = isApproveTier([TIERS.TIER1, TIERS.TIER2, TIERS.TIER3]);
+
+  // HTML
+  return (
+    <div className={styles.wrap}>
+      <Header userName="XXXXXX" />
+      <UpdateTokenTimer />
+      <main className={styles.main}>
+        <ul className={styles.menuAction}>
+          <li>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+            {isVisible && (
+              <a
+                className={`${styles.menuLink} ${styles.isActive}`}
+                // onClick={}
+              >
+                <img src={postAdd} alt="" className={styles.menuIcon} />
+                Add Account
+              </a>
+            )}
+          </li>
+        </ul>
+        <form className={styles.form}>
+          <dl className={`${styles.formList} ${styles.hasbg}`}>
+            <dt className={styles.formTitle} />
+            <dt />
+            <dd className="">
+              <input
+                type="text"
+                size={40}
+                name=""
+                value={`Tier:${userTier}`}
+                maxLength={20}
+                className={styles.formInput}
+              />
+            </dd>
+          </dl>
+        </form>
+      </main>
+      <div>
+        <button
+          type="button"
+          className={styles.buttonText}
+          onClick={() => {
+            instance.logout({ postLogoutRedirectUri: "/" });
+            dispatch(clearToken());
+          }}
+        >
+          sign out
+        </button>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default PartnerPage;