Merged PR 601: ヘルプページ画面実装

## 概要
[Task3204: ヘッダ修正対応](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3204)

- ヘルプページを追加して、ヘッダのタブに表示されるようにしました。
  - ヘッダのタブはロールの制限なく見えるようにしています。
  - ヘルプページからさらに個別のヘルプへのリンクは仮のURLにしています。
    - 動作としては別タブで開くようにしています。

## レビューポイント
- パスをタブ名に合わせて`/support`としましたが不自然な点はないでしょうか？
- 仮のURLがxxxとなっているため、別タブで開かれたページがNot Foundとなってしまっていますが問題ないでしょうか？

## UIの変更
- [Task3204](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/Task3204?csf=1&web=1&e=N9yn0D)

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

dictation_client/src/AppRouter.tsx

@@ -23,6 +23,7 @@ import AccountPage from "pages/AccountPage";
 import AcceptToUsePage from "pages/TermsPage";
 import { TemplateFilePage } from "pages/TemplateFilePage";
 import { AccountDeleteSuccess } from "pages/AccountPage/accountDeleteSuccess";
+import SupportPage from "pages/SupportPage";
 
 const AppRouter: React.FC = () => (
   <Routes>
@@ -81,6 +82,10 @@ const AppRouter: React.FC = () => (
       element={<RouteAuthGuard component={<PartnerPage />} />}
     />
     <Route path="/accountDeleteSuccess" element={<AccountDeleteSuccess />} />
+    <Route
+      path="/support"
+      element={<RouteAuthGuard component={<SupportPage />} />}
+    />
 
     <Route path="*" element={<NotFoundPage />} />
   </Routes>

dictation_client/src/components/header/constants.ts

@@ -7,6 +7,7 @@ export const HEADER_MENUS_LICENSE = "License";
 export const HEADER_MENUS_DICTATIONS = "Dictations";
 export const HEADER_MENUS_WORKFLOW = "Workflow";
 export const HEADER_MENUS_PARTNER = "Partners";
+export const HEADER_MENUS_SUPPORT = "Support";
 
 export const HEADER_MENUS: {
   key: HeaderMenus;
@@ -43,6 +44,11 @@ export const HEADER_MENUS: {
     label: getTranslationID("common.label.headerPartners"),
     path: "/partners",
   },
+  {
+    key: HEADER_MENUS_SUPPORT,
+    label: getTranslationID("common.label.headerSupport"),
+    path: "/support",
+  },
 ];
 
 export const HEADER_NAME = getTranslationID("common.label.headerName");

dictation_client/src/components/header/types.ts

@@ -8,7 +8,8 @@ export type HeaderMenus =
   | "License"
   | "Dictations"
   | "Workflow"
-  | "Partners";
+  | "Partners"
+  | "Support";
 
 // ログイン後に遷移しうるパス
 export type LoginedPaths =
@@ -17,4 +18,5 @@ export type LoginedPaths =
   | "/license"
   | "/dictations"
   | "/workflow"
-  | "/partners";
+  | "/partners"
+  | "/support";

dictation_client/src/components/header/utils.ts

@@ -20,6 +20,7 @@ export const isLoginPaths = (d: string): d is LoginedPaths => {
     case "/dictations":
     case "/workflow":
     case "/partners":
+    case "/support":
       return true;
     default: {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars

dictation_client/src/pages/SupportPage/index.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Header from "components/header";
+import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
+import { useTranslation } from "react-i18next";
+import { getTranslationID } from "translation";
+import styles from "styles/app.module.scss";
+
+const SupportPage: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.wrap}>
+      <Header />
+      <UpdateTokenTimer />
+      <main className={styles.main}>
+        <div>
+          <div className={styles.pageHeader}>
+            <h1 className={styles.pageTitle}>
+              {t(getTranslationID("supportPage.label.title"))}
+            </h1>
+          </div>
+
+          <section className={styles.support}>
+            <div>
+              <h2>{t(getTranslationID("supportPage.label.howToUse"))}</h2>
+
+              <div className={styles.txContents}>
+                <ul className={styles.listDocument}>
+                  <li>
+                    <a
+                      // TODO: 将来的に正式なURLに変更する
+                      href="/support"
+                      target="_blank"
+                      className={styles.linkTx}
+                    >
+                      {t(
+                        getTranslationID("supportPage.label.supportPageEnglish")
+                      )}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      // TODO: 将来的に正式なURLに変更する
+                      href="/support"
+                      target="_blank"
+                      className={styles.linkTx}
+                    >
+                      {t(
+                        getTranslationID("supportPage.label.supportPageGerman")
+                      )}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      // TODO: 将来的に正式なURLに変更する
+                      href="/support"
+                      target="_blank"
+                      className={styles.linkTx}
+                    >
+                      {t(
+                        getTranslationID("supportPage.label.supportPageFrench")
+                      )}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      // TODO: 将来的に正式なURLに変更する
+                      href="/support"
+                      target="_blank"
+                      className={styles.linkTx}
+                    >
+                      {t(
+                        getTranslationID("supportPage.label.supportPageSpanish")
+                      )}
+                    </a>
+                  </li>
+                </ul>
+
+                <p className={styles.txNormal}>
+                  {t(getTranslationID("supportPage.text.notResolved"))}
+                </p>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+};
+export default SupportPage;

dictation_client/src/styles/app.module.scss

@@ -2484,8 +2484,8 @@ tr.isSelected .menuInTable li a.isDisable {
 }
 .formChange ul.chooseMember li input:checked + label:hover,
 .formChange ul.holdMember li input:checked + label:hover {
-  background: #e6e6e6 url(../images/arrow_circle_right.svg) no-repeat right
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
-    center;
+    right center;
   background-size: 1.3rem;
 }
 .formChange > p {

dictation_client/src/translation/de.json

@@ -25,6 +25,7 @@
       "headerDictations": "(de)Dictations",
       "headerWorkflow": "(de)Workflow",
       "headerPartners": "(de)Partners",
+      "headerSupport": "(de)Support",
       "tier1": "(de)Admin",
       "tier2": "(de)BC",
       "tier3": "(de)Distributor",
@@ -531,5 +532,18 @@
       "forOdds": "(de)for ODDS.",
       "button": "(de)Continue"
     }
+  },
+  "supportPage": {
+    "label": {
+      "title": "(de)Support",
+      "howToUse": "(de)How to use the system",
+      "supportPageEnglish": "OMDS Cloud User Guide",
+      "supportPageGerman": "OMDS Cloud Benutzerhandbuch",
+      "supportPageFrench": "OMDS Cloud Mode d'emploi",
+      "supportPageSpanish": "OMDS Cloud Guía del usuario"
+    },
+    "text": {
+      "notResolved": "(de)If the problem persists even after referring to the user guide, please contact a higher-level person in charge."
+    }
   }
-}
+}

dictation_client/src/translation/en.json

@@ -25,6 +25,7 @@
       "headerDictations": "Dictations",
       "headerWorkflow": "Workflow",
       "headerPartners": "Partners",
+      "headerSupport": "Support",
       "tier1": "Admin",
       "tier2": "BC",
       "tier3": "Distributor",
@@ -531,5 +532,18 @@
       "forOdds": "for ODDS.",
       "button": "Continue"
     }
+  },
+  "supportPage": {
+    "label": {
+      "title": "Support",
+      "howToUse": "How to use the system",
+      "supportPageEnglish": "OMDS Cloud User Guide",
+      "supportPageGerman": "OMDS Cloud Benutzerhandbuch",
+      "supportPageFrench": "OMDS Cloud Mode d'emploi",
+      "supportPageSpanish": "OMDS Cloud Guía del usuario"
+    },
+    "text": {
+      "notResolved": "If the problem persists even after referring to the user guide, please contact a higher-level person in charge."
+    }
   }
-}
+}

dictation_client/src/translation/es.json

@@ -25,6 +25,7 @@
       "headerDictations": "(es)Dictations",
       "headerWorkflow": "(es)Workflow",
       "headerPartners": "(es)Partners",
+      "headerSupport": "(es)Support",
       "tier1": "(es)Admin",
       "tier2": "(es)BC",
       "tier3": "(es)Distributor",
@@ -531,5 +532,18 @@
       "forOdds": "(es)for ODDS.",
       "button": "(es)Continue"
     }
+  },
+  "supportPage": {
+    "label": {
+      "title": "(es)Support",
+      "howToUse": "(es)How to use the system",
+      "supportPageEnglish": "OMDS Cloud User Guide",
+      "supportPageGerman": "OMDS Cloud Benutzerhandbuch",
+      "supportPageFrench": "OMDS Cloud Mode d'emploi",
+      "supportPageSpanish": "OMDS Cloud Guía del usuario"
+    },
+    "text": {
+      "notResolved": "(es)If the problem persists even after referring to the user guide, please contact a higher-level person in charge."
+    }
   }
-}
+}

dictation_client/src/translation/fr.json

@@ -25,6 +25,7 @@
       "headerDictations": "(fr)Dictations",
       "headerWorkflow": "(fr)Workflow",
       "headerPartners": "(fr)Partners",
+      "headerSupport": "(fr)Support",
       "tier1": "(fr)Admin",
       "tier2": "(fr)BC",
       "tier3": "(fr)Distributor",
@@ -531,5 +532,18 @@
       "forOdds": "(fr)for ODDS.",
       "button": "(fr)Continue"
     }
+  },
+  "supportPage": {
+    "label": {
+      "title": "(fr)Support",
+      "howToUse": "(fr)How to use the system",
+      "supportPageEnglish": "OMDS Cloud User Guide",
+      "supportPageGerman": "OMDS Cloud Benutzerhandbuch",
+      "supportPageFrench": "OMDS Cloud Mode d'emploi",
+      "supportPageSpanish": "OMDS Cloud Guía del usuario"
+    },
+    "text": {
+      "notResolved": "(fr)If the problem persists even after referring to the user guide, please contact a higher-level person in charge."
+    }
   }
-}
+}