Merged PR 253: 画面実装（パートナーライセンス一覧画面）（初期表示部分）

## 概要
[Task2212: 画面実装（パートナーライセンス一覧画面）（初期表示部分）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2212)

パートナーライセンス一覧画面の初期表示を実装しました。
本タスクでのレビュー対象・対象外は以下となりますので、ご確認をお願いします。
■対象
・全体の画面レイアウト
・「Order License」「Order History」「License Card」「Card History」ボタンのログインtierによる表示制御
・「Order License」「License Card」ボタンの押下時の挙動
・表内の値（固定値）
■対象外
・パンくずリストの表示内容、押下時の挙動
・「return」ボタンの表示制御、押下時の挙動
・ページネーション周りの挙動
・「Order History」「Card History」ボタンの押下時の挙動
・表内の「Order History」「View Details」ボタンの表示制御、押下時の挙動
・表内のアカウント押下時の挙動

## レビューポイント
なし

## UIの変更
- スクショ置き場
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/Task2212?csf=1&web=1&e=dASrbE

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

## 補足
パンくずリスト・表・ページネーション部分は、挙動を作成するタスクで外出しして別コンポーネントにする予定です。

dictation_client/src/app/store.ts

@@ -9,6 +9,7 @@ import license from "features/license/licenseOrder/licenseSlice";
 import licenseCardIssue from "features/license/licenseCardIssue/licenseCardIssueSlice";
 import licenseCardActivate from "features/license/licenseCardActivate/licenseCardActivateSlice";
 import licenseSummary from "features/license/licenseSummary/licenseSummarySlice";
+import partnerLicense from "features/license/partnerLicense/partnerLicenseSlice";
 import dictation from "features/dictation/dictationSlice";
 import partner from "features/partner/partnerSlice";
 
@@ -24,6 +25,7 @@ export const store = configureStore({
     licenseCardIssue,
     licenseCardActivate,
     licenseSummary,
+    partnerLicense,
     dictation,
     partner,
   },

dictation_client/src/features/license/partnerLicense/constants.ts

@@ -0,0 +1 @@
+export const ACCOUNTS_VIEW_LIMIT = 10;

dictation_client/src/features/license/partnerLicense/index.ts

@@ -0,0 +1,5 @@
+export * from "./state";
+export * from "./operations";
+export * from "./selectors";
+export * from "./partnerLicenseSlice";
+export * from "./constants";

dictation_client/src/features/license/partnerLicense/operations.ts

@@ -0,0 +1,101 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import type { RootState } from "../../../app/store";
+import { getTranslationID } from "../../../translation";
+import { openSnackbar } from "../../ui/uiSlice";
+import {
+  Account,
+  AccountsApi,
+  GetPartnerLicensesResponse,
+} from "../../../api/api";
+import { Configuration } from "../../../api/configuration";
+import { ErrorObject, createErrorObject } from "../../../common/errors";
+
+export const getMyAccountAsync = createAsyncThunk<
+  // 正常時の戻り値の型
+  Account,
+  // 引数
+  void,
+  {
+    // rejectした時の返却値の型
+    rejectValue: {
+      error: ErrorObject;
+    };
+  }
+>("licenses/getMyAccountAsync", async (args, thunkApi) => {
+  // apiのConfigurationを取得する
+  const { getState } = thunkApi;
+  const state = getState() as RootState;
+  const { configuration, accessToken } = state.auth;
+  const config = new Configuration(configuration);
+  const accountsApi = new AccountsApi(config);
+
+  try {
+    const getMyAccountResponse = await accountsApi.getMyAccount({
+      headers: { authorization: `Bearer ${accessToken}` },
+    });
+
+    // accountIDを返す
+    return getMyAccountResponse.data.account;
+  } catch (e) {
+    // e ⇒ errorObjectに変換"
+    const error = createErrorObject(e);
+
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "error",
+        message: getTranslationID("common.message.internalServerError"),
+      })
+    );
+
+    return thunkApi.rejectWithValue({ error });
+  }
+});
+
+// サービスAPIからアカウント情報をもらう
+export const getPartnerLicenseAsync = createAsyncThunk<
+  // 正常時の戻り値の型
+  GetPartnerLicensesResponse,
+  // 引数
+  {
+    limit: number;
+    offset: number;
+    accountId: number;
+  },
+  {
+    // rejectした時の返却値の型
+    rejectValue: {
+      error: ErrorObject;
+    };
+  }
+>("licenses/getPartnerLicenseAsync", async (args, thunkApi) => {
+  // apiのConfigurationを取得する
+  const { getState } = thunkApi;
+  const state = getState() as RootState;
+  const { configuration, accessToken } = state.auth;
+  const config = new Configuration(configuration);
+  const accountsApi = new AccountsApi(config);
+
+  try {
+    const getPartnerLicenseResponse = await accountsApi.getPartnerLicenses(
+      {
+        limit: args.limit,
+        offset: args.offset,
+        accountId: args.accountId,
+      },
+      { headers: { authorization: `Bearer ${accessToken}` } }
+    );
+    return getPartnerLicenseResponse.data;
+  } catch (e) {
+    // e ⇒ errorObjectに変換"
+    const error = createErrorObject(e);
+
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "error",
+        message: getTranslationID("common.message.internalServerError"),
+      })
+    );
+
+    return thunkApi.rejectWithValue({ error });
+  }
+});

dictation_client/src/features/license/partnerLicense/partnerLicenseSlice.ts

@@ -0,0 +1,70 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { PartnerLicensesState } from "./state";
+import { PartnerLicenseInfo } from "../../../api/api";
+import { getMyAccountAsync, getPartnerLicenseAsync } from "./operations";
+
+const initialState: PartnerLicensesState = {
+  domain: {
+    total: 0,
+    ownPartnerLicense: {
+      accountId: 0,
+      tier: 0,
+      companyName: "",
+      stockLicense: 0,
+      issuedRequested: 0,
+      shortage: 0,
+      issueRequesting: 0,
+    },
+    childrenPartnerLicenses: [],
+    acountInfo: { accountId: 0 },
+  },
+  apps: {
+    limit: 1,
+    offset: 0,
+  },
+};
+
+export const partnerLicenseSlice = createSlice({
+  name: "partnerLicense",
+  initialState,
+  reducers: {
+    changeTotal: (state, action: PayloadAction<{ total: number }>) => {
+      const { total } = action.payload;
+      state.domain.total = total;
+    },
+    changeOwnPartnerLicense: (
+      state,
+      action: PayloadAction<{ ownPartnerLicense: PartnerLicenseInfo }>
+    ) => {
+      const { ownPartnerLicense } = action.payload;
+      state.domain.ownPartnerLicense = ownPartnerLicense;
+    },
+    changeChildrenPartnerLicenses: (
+      state,
+      action: PayloadAction<{
+        childrenPartnerLicenses: PartnerLicenseInfo[];
+      }>
+    ) => {
+      const { childrenPartnerLicenses } = action.payload;
+      state.domain.childrenPartnerLicenses = childrenPartnerLicenses;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(getMyAccountAsync.fulfilled, (state, action) => {
+      state.domain.acountInfo = action.payload;
+    });
+    builder.addCase(getPartnerLicenseAsync.fulfilled, (state, action) => {
+      state.domain.total = action.payload.total;
+      state.domain.ownPartnerLicense = action.payload.ownPartnerLicense;
+      state.domain.childrenPartnerLicenses =
+        action.payload.childrenPartnerLicenses;
+    });
+  },
+});
+export const {
+  changeTotal,
+  changeOwnPartnerLicense,
+  changeChildrenPartnerLicenses,
+} = partnerLicenseSlice.actions;
+
+export default partnerLicenseSlice.reducer;

dictation_client/src/features/license/partnerLicense/selectors.ts

@@ -0,0 +1,10 @@
+import { RootState } from "../../../app/store";
+
+export const selectTotal = (state: RootState) =>
+  state.partnerLicense.domain.total;
+export const selectOwnPartnerLicense = (state: RootState) =>
+  state.partnerLicense.domain.ownPartnerLicense;
+export const selectChildrenPartnerLicenses = (state: RootState) =>
+  state.partnerLicense.domain.childrenPartnerLicenses;
+export const selectAccountInfo = (state: RootState) =>
+  state.partnerLicense.domain.acountInfo;

dictation_client/src/features/license/partnerLicense/state.ts

@@ -0,0 +1,18 @@
+import { Account, PartnerLicenseInfo } from "../../../api/api";
+
+export interface PartnerLicensesState {
+  domain: Domain;
+  apps: Apps;
+}
+
+export interface Domain {
+  total: number;
+  ownPartnerLicense: PartnerLicenseInfo;
+  childrenPartnerLicenses: PartnerLicenseInfo[];
+  acountInfo: Account;
+}
+
+export interface Apps {
+  limit: number;
+  offset: number;
+}

dictation_client/src/pages/LicensePage/partnerLicense.tsx

@@ -1,16 +1,29 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { useMsal } from "@azure/msal-react";
 import Footer from "components/footer";
 import Header from "components/header";
 import styles from "styles/app.module.scss";
 import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
 import { clearToken } from "features/auth";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch } from "app/store";
 import { getTranslationID } from "translation";
 import { useTranslation } from "react-i18next";
 import { CardLicenseIssuePopup } from "./cardLicenseIssuePopup";
 import postAdd from "../../assets/images/post_add.svg";
+import history from "../../assets/images/history.svg";
+import { isApproveTier } from "../../features/auth/utils";
+import { TIERS } from "../../components/auth/constants";
+import {
+  getMyAccountAsync,
+  getPartnerLicenseAsync,
+  ACCOUNTS_VIEW_LIMIT,
+  selectTotal,
+  selectOwnPartnerLicense,
+  selectChildrenPartnerLicenses,
+  selectAccountInfo,
+} from "../../features/license/partnerLicense";
+import { LicenseOrderPopup } from "./licenseOrderPopup";
 
 const PartnerLicense: React.FC = (): JSX.Element => {
   const { instance } = useMsal();
@@ -20,11 +33,74 @@ const PartnerLicense: React.FC = (): JSX.Element => {
   // popup制御関係
   const [isCardLicenseIssuePopupOpen, setIsCardLicenseIssuePopupOpen] =
     useState(false);
+  const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
+
+  // 階層表示用
+  const tierNames: { [key: number]: string } = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    1: t(getTranslationID("common.label.tier1")),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    2: t(getTranslationID("common.label.tier2")),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    3: t(getTranslationID("common.label.tier3")),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    4: t(getTranslationID("common.label.tier4")),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    5: t(getTranslationID("common.label.tier5")),
+  };
 
   const onlicenseIssueOpen = useCallback(() => {
     setIsCardLicenseIssuePopupOpen(true);
   }, [setIsCardLicenseIssuePopupOpen]);
 
+  const onlicenseOrderOpen = useCallback(() => {
+    setIslicenseOrderPopupOpen(true);
+  }, [setIslicenseOrderPopupOpen]);
+
+  // apiからの値取得関係
+  const myAccountInfo = useSelector(selectAccountInfo);
+  const total = useSelector(selectTotal);
+  const ownPartnerLicenseInfo = useSelector(selectOwnPartnerLicense);
+  const childrenPartnerLicensesInfo = useSelector(
+    selectChildrenPartnerLicenses
+  );
+
+  // ログイン時に階層をチェック
+  const isTier1 = isApproveTier([TIERS.TIER1]);
+  const isTier2ToTier4 = isApproveTier([TIERS.TIER2, TIERS.TIER3, TIERS.TIER4]);
+
+  // パラメーターを入れておく空配列
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const hierarchicalElements: HierarchicalElements[] = [];
+
+  // マウント時のみ実行
+  useEffect(() => {
+    dispatch(getMyAccountAsync());
+    dispatch(
+      getPartnerLicenseAsync({
+        limit: ACCOUNTS_VIEW_LIMIT,
+        offset: 0,
+        accountId: myAccountInfo.accountId,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 画面遷移時に実行
+  // TODO 仮実装なので挙動は未検証
+  useEffect(() => {
+    if (hierarchicalElements.length === 1) {
+      dispatch(getMyAccountAsync());
+    }
+    dispatch(
+      getPartnerLicenseAsync({
+        limit: ACCOUNTS_VIEW_LIMIT,
+        offset: 0,
+        accountId: myAccountInfo.accountId,
+      })
+    );
+  }, [dispatch, hierarchicalElements, myAccountInfo]);
+
   return (
     <>
       {/* 表示確認用の仮画面 */}
@@ -36,29 +112,218 @@ const PartnerLicense: React.FC = (): JSX.Element => {
           }}
         />
       )}
+      {islicenseOrderPopupOpen && (
+        <LicenseOrderPopup
+          onClose={() => {
+            setIslicenseOrderPopupOpen(false);
+          }}
+        />
+      )}
+
       <div className={styles.wrap}>
         <Header userName="XXXXXX" />
         <UpdateTokenTimer />
         <main className={styles.main}>
           <div className="">
             <div className={styles.pageHeader}>
-              <h1 className={styles.pageTitle}>第一～四階層です</h1>
+              <h1 className={styles.pageTitle}>
+                {t(getTranslationID("partnerLicense.label.title"))}
+              </h1>
             </div>
           </div>
-          <ul className={styles.menuAction}>
+
-            <li>
+          <section className={styles.license}>
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+            <div>
-              <a
+              <h2>{t(getTranslationID("partnerLicense.label.subTitle"))}</h2>
-                className={`${styles.menuLink} ${styles.isActive}`}
+              <ul className={styles.menuAction}>
-                onClick={onlicenseIssueOpen}
+                <li>
-              >
+                  <a
-                <img src={postAdd} alt="" className={styles.menuIcon} />
+                    href="license_partner.html"
-                {t(
+                    className={`${styles.menuLink} ${styles.isActive}`}
-                  getTranslationID("partnerLicensePage.label.cardLicenseButton")
+                  >
-                )}
+                    <img
-              </a>
+                      src="images/undo.svg"
-            </li>
+                      alt=""
-          </ul>
+                      className={styles.menuIcon}
+                    />
+                    {t(getTranslationID("partnerLicense.label.returnButton"))}
+                  </a>
+                </li>
+                <li>
+                  {isTier2ToTier4 && (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                    <a
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                      onClick={onlicenseOrderOpen}
+                    >
+                      <img src={postAdd} alt="" className={styles.menuIcon} />
+                      {t(
+                        getTranslationID(
+                          "partnerLicense.label.orderLicenseButton"
+                        )
+                      )}
+                    </a>
+                  )}
+                </li>
+                <li>
+                  {isTier2ToTier4 && (
+                    <a
+                      href="license_history.html"
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                    >
+                      <img src={history} alt="" className={styles.menuIcon} />
+                      {t(
+                        getTranslationID(
+                          "partnerLicense.label.orderHistoryButton"
+                        )
+                      )}
+                    </a>
+                  )}
+                </li>
+                {/* 第1階層 */}
+                <li>
+                  {isTier1 && (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                    <a
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                      onClick={onlicenseIssueOpen}
+                    >
+                      <img src={postAdd} alt="" className={styles.menuIcon} />
+                      {t(
+                        getTranslationID(
+                          "partnerLicense.label.IssueLicenseCardButton"
+                        )
+                      )}
+                    </a>
+                  )}
+                </li>
+                <li>
+                  <a
+                    href="license_partner_card_history.html"
+                    className={`${styles.menuLink} ${styles.isActive}`}
+                  >
+                    <img src={history} alt="" className={styles.menuIcon} />
+                    {t(
+                      getTranslationID(
+                        "partnerLicense.label.displayCardHistoryButton"
+                      )
+                    )}
+                  </a>
+                </li>
+              </ul>
+              {/* TODO パンくずリストの表示内容、リンク先は仮 */}
+              <ul className={styles.brCrumbLicense}>
+                <li>
+                  <a href="">OMDS US</a>
+                </li>
+                <li>
+                  <a href="">BBBB inc.</a>
+                </li>
+                <li>ABCDEFGHIJKLM corp.</li>
+              </ul>
+              <table className={`${styles.table} ${styles.partner}`}>
+                <tr className={styles.tableHeader}>
+                  <th>{t(getTranslationID("partnerLicense.label.name"))}</th>
+                  <th>
+                    {t(getTranslationID("partnerLicense.label.category"))}
+                  </th>
+                  <th>
+                    {t(getTranslationID("partnerLicense.label.accountId"))}
+                  </th>
+                  <th>
+                    {t(getTranslationID("partnerLicense.label.stockLicense"))}
+                  </th>
+                  <th>
+                    {t(getTranslationID("partnerLicense.label.issueRequested"))}
+                  </th>
+                  <th>
+                    {t(getTranslationID("partnerLicense.label.shortage"))}
+                  </th>
+                  <th className={styles.noLine}>
+                    {t(
+                      getTranslationID("partnerLicense.label.issueRequesting")
+                    )}
+                  </th>
+                  {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                  <th />
+                </tr>
+                <tr className={styles.isOpen}>
+                  <td>{ownPartnerLicenseInfo.companyName}</td>
+                  <td>{tierNames[ownPartnerLicenseInfo.tier]}</td>
+                  <td>{ownPartnerLicenseInfo.accountId}</td>
+                  <td>{ownPartnerLicenseInfo.stockLicense}</td>
+                  <td>{ownPartnerLicenseInfo.issuedRequested}</td>
+                  <td>{ownPartnerLicenseInfo.shortage}</td>
+                  <td>{ownPartnerLicenseInfo.issueRequesting}</td>
+                  <td>
+                    <ul
+                      className={`${styles.menuAction} ${styles.menuInTable}`}
+                    >
+                      <li>
+                        {/* TODO リンク先は仮 ボタン表示制御未実装 */}
+                        <a
+                          href="license_partner_history.html"
+                          className={styles.menuLink}
+                        >
+                          {t(
+                            getTranslationID(
+                              "partnerLicense.label.orderHistoryButton"
+                            )
+                          )}
+                        </a>
+                      </li>
+                    </ul>
+                  </td>
+                </tr>
+                {childrenPartnerLicensesInfo.map((value) => (
+                  <tr key={value.accountId}>
+                    <td title="">{value.companyName}</td>
+                    <td>{tierNames[value.tier]}</td>
+                    <td>{value.accountId}</td>
+                    <td>{value.stockLicense}</td>
+                    <td>{value.issuedRequested}</td>
+                    <td>{value.shortage}</td>
+                    <td>{value.issueRequesting}</td>
+                    <td>
+                      <ul className={`${styles.menuAction} ${styles.inTable}`}>
+                        <li>
+                          {/* TODO リンク先は仮 ボタン表示制御未実装 */}
+                          <a
+                            href="license_partner_5.html"
+                            className={`${styles.menuLink} ${styles.isActive}`}
+                          >
+                            {t(
+                              getTranslationID(
+                                "partnerLicense.label.viewDetails"
+                              )
+                            )}
+                          </a>
+                        </li>
+                      </ul>
+                    </td>
+                  </tr>
+                ))}
+              </table>
+              {/* pagenation */}
+              <div className={styles.pagenation}>
+                <nav className={styles.pagenationNav}>
+                  <span className={styles.pagenationTotal}>
+                    {total}{" "}
+                    {t(getTranslationID("partnerLicense.label.accounts"))}
+                  </span>
+                  {/* TODO ページ数は仮、ページ遷移、ボタン表示制御未実装 */}
+                  <a href="">«</a>
+                  <a href="">‹</a>1 of 2
+                  <a href="" className={` ${styles.isActive}`}>
+                    ›
+                  </a>
+                  <a href="" className={` ${styles.isActive}`}>
+                    »
+                  </a>
+                </nav>
+              </div>
+            </div>
+          </section>
         </main>
         <div>
           <button
@@ -78,4 +343,8 @@ const PartnerLicense: React.FC = (): JSX.Element => {
   );
 };
 
+export interface HierarchicalElements {
+  accountId: string;
+  companyName: string;
+}
 export default PartnerLicense;

dictation_client/src/styles/app.module.scss

@@ -379,6 +379,36 @@ h3 .brCrumb .tlIcon {
   margin-left: 2.2rem;
 }
 
+.brCrumbLicense {
+  margin: 1rem 0 0.6rem;
+}
+.brCrumbLicense li {
+  display: inline-block;
+  padding-right: 1.4rem;
+  font-size: 1.1rem;
+  line-height: 1.4;
+  letter-spacing: 0.04rem;
+  font-weight: normal;
+  position: relative;
+}
+.brCrumbLicense li:not(:last-child)::after {
+  content: "";
+  border-top: 5px transparent solid;
+  border-bottom: 5px transparent solid;
+  border-left: 7px #333333 solid;
+  position: absolute;
+  top: 45%;
+  right: 0.4rem;
+  transform: translateY(-50%);
+}
+.brCrumbLicense li a {
+  color: #333333;
+  text-decoration: none;
+}
+.brCrumbLicense li a:hover {
+  color: #0084b2;
+}
+
 .buttonNormal {
   display: inline-block;
   width: 15rem;
@@ -1612,7 +1642,7 @@ tr.isSelected .menuInTable li a {
   left: 0.4rem;
   border-top: 6px transparent solid;
   border-bottom: 6px transparent solid;
-  border-left: 8px #0084b2 solid;
+  border-left: 8px #282828 solid;
   transform: translateY(-50%);
 }
 .license .table.partner tr td[title="Return"] {
@@ -1622,23 +1652,10 @@ tr.isSelected .menuInTable li a {
 .license .table.partner tr td[title="Return"]:hover {
   color: #0084b2;
 }
-.license .table.partner tr.role3 td[title="View child accounts"]::before {
-  border-top: 6px transparent solid;
-  border-bottom: 6px transparent solid;
-  border-left: 8px #00b4aa solid;
-}
-.license .table.partner tr.role4 td[title="View child accounts"]::before {
-  border-top: 6px transparent solid;
-  border-bottom: 6px transparent solid;
-  border-left: 8px #faa306 solid;
-}
-.license .table.partner tr.role5 td:first-child::before {
-  display: none;
-}
 .license .table.partner tr.isOpen::after {
   content: "";
   width: 100%;
-  border-bottom: 3px #0084b2 solid;
+  border-bottom: 1px #999999 solid;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1657,7 +1674,7 @@ tr.isSelected .menuInTable li a {
   position: absolute;
   top: 50%;
   left: 0.4rem;
-  border-top: 8px #0084b2 solid;
+  border-top: 8px #282828 solid;
   border-right: 6px transparent solid;
   border-left: 6px transparent solid;
   transform: translateY(-50%);
@@ -1669,54 +1686,10 @@ tr.isSelected .menuInTable li a {
   top: 50%;
   left: 1.4rem;
 }
-.license .table.partner tr.isOpen + .isOpen::after {
-  width: calc(100% - 1.4rem);
-  left: 1.4rem;
-}
-.license .table.partner tr.isOpen + .isOpen ~ tr td:first-child {
-  padding-left: 3.5rem;
-}
-.license .table.partner tr.isOpen + .isOpen ~ tr td:first-child::before {
-  top: 50%;
-  left: 2.4rem;
-}
-.license .table.partner tr.isOpen + .isOpen + .isOpen::after {
-  width: calc(100% - 2.4rem);
-  left: 2.4rem;
-}
-.license .table.partner tr.isOpen.role2,
-.license .table.partner tr.isOpen.role3,
-.license .table.partner tr.isOpen.role4 {
-  background: #fafafa;
-}
-.license .table.partner tr.isOpen.role3::after {
-  border-bottom: 3px #00b4aa solid;
-}
-.license .table.partner tr.isOpen.role3 td:first-child::before {
-  border-top: 8px #00b4aa solid;
-  border-right: 6px transparent solid;
-  border-left: 6px transparent solid;
-}
-.license .table.partner tr.isOpen.role4::after {
-  border-bottom: 3px #faa306 solid;
-}
-.license .table.partner tr.isOpen.role4 td:first-child::before {
-  border-top: 8px #faa306 solid;
-  border-right: 6px transparent solid;
-  border-left: 6px transparent solid;
-}
 .license .table.partner td:last-child {
   width: 120px;
   text-align: right;
 }
-.license .table.partner td img[src*="circle"] {
-  filter: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(5814%)
-    hue-rotate(143deg) brightness(96%) contrast(101%);
-}
-.license .table.partner td img[src*="block"] {
-  filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(2633%)
-    hue-rotate(340deg) brightness(102%) contrast(101%);
-}
 
 .dictation .displayOptions {
   display: none;

dictation_client/src/styles/app.module.scss.d.ts

@@ -14,6 +14,7 @@ declare const classNames: {
   readonly brCrumb: "brCrumb";
   readonly tlIcon: "tlIcon";
   readonly brCrumbAcc: "brCrumbAcc";
+  readonly brCrumbLicense: "brCrumbLicense";
   readonly buttonNormal: "buttonNormal";
   readonly small: "small";
   readonly red: "red";
@@ -104,11 +105,7 @@ declare const classNames: {
   readonly history: "history";
   readonly cardHistory: "cardHistory";
   readonly partner: "partner";
-  readonly role3: "role3";
-  readonly role4: "role4";
-  readonly role5: "role5";
   readonly isOpen: "isOpen";
-  readonly role2: "role2";
   readonly displayOptions: "displayOptions";
   readonly tableFilter: "tableFilter";
   readonly tableFilter2: "tableFilter2";
@@ -176,6 +173,7 @@ declare const classNames: {
   readonly chooseMember: "chooseMember";
   readonly holdMember: "holdMember";
   readonly changeTitle: "changeTitle";
+  readonly role4: "role4";
   readonly alignCenter: "alignCenter";
   readonly alignLeft: "alignLeft";
   readonly linkTx: "linkTx";

dictation_client/src/translation/de.json

@@ -12,7 +12,12 @@
     "label": {
       "cancel": "(de)Cancel",
       "headerTitle": "(de)ODMS Cloud",
-      "copyRight": "(de)OM Digital Solutions 2023"
+      "copyRight": "(de)OM Digital Solutions 2023",
+      "tier1": "(de)Admin",
+      "tier2": "(de)BC",
+      "tier3": "(de)Distributer",
+      "tier4": "(de)Dealer",
+      "tier5": "(de)Customer"
     }
   },
   "topPage": {
@@ -271,5 +276,25 @@
       "email": "(de)Email",
       "createAccountButton": "(de)Add account"
     }
+  },
+  "partnerLicense": {
+    "label": {
+      "title": "(de)License",
+      "subTitle": "(de)License for partners",
+      "returnButton": "(de)Return",
+      "orderLicenseButton": "(de)Order License",
+      "orderHistoryButton": "(de)Order History",
+      "IssueLicenseCardButton": "(de)License Card",
+      "displayCardHistoryButton": "(de)Card History",
+      "name": "(de)Name",
+      "category": "(de)Category",
+      "accountId": "(de)Account ID",
+      "stockLicense": "(de)Stock license",
+      "issueRequested": "(de)Issue Requested",
+      "shortage": "(de)Shortage",
+      "issueRequesting": "(de)Issue Requesting",
+      "viewDetails": "(de)View details",
+      "accounts": "(de)accounts"
+    }
   }
 }

dictation_client/src/translation/en.json

@@ -12,7 +12,12 @@
     "label": {
       "cancel": "Cancel",
       "headerTitle": "ODMS Cloud",
-      "copyRight": "OM Digital Solutions 2023"
+      "copyRight": "OM Digital Solutions 2023",
+      "tier1": "Admin",
+      "tier2": "BC",
+      "tier3": "Distributer",
+      "tier4": "Dealer",
+      "tier5": "Customer"
     }
   },
   "topPage": {
@@ -271,5 +276,25 @@
       "email": "Email",
       "createAccountButton": "Add account"
     }
+  },
+  "partnerLicense": {
+    "label": {
+      "title": "License",
+      "subTitle": "License for partners",
+      "returnButton": "Return",
+      "orderLicenseButton": "Order License",
+      "orderHistoryButton": "Order History",
+      "IssueLicenseCardButton": "License Card",
+      "displayCardHistoryButton": "Card History",
+      "name": "Name",
+      "category": "Category",
+      "accountId": "Account ID",
+      "stockLicense": "Stock license",
+      "issueRequested": "Issue Requested",
+      "shortage": "Shortage",
+      "issueRequesting": "Issue Requesting",
+      "viewDetails": "View details",
+      "accounts": "accounts"
+    }
   }
 }

dictation_client/src/translation/es.json

@@ -12,7 +12,12 @@
     "label": {
       "cancel": "(es)Cancel",
       "headerTitle": "(es)ODMS Cloud",
-      "copyRight": "(es)OM Digital Solutions 2023"
+      "copyRight": "(es)OM Digital Solutions 2023",
+      "tier1": "(es)Admin",
+      "tier2": "(es)BC",
+      "tier3": "(es)Distributer",
+      "tier4": "(es)Dealer",
+      "tier5": "(es)Customer"
     }
   },
   "topPage": {
@@ -271,5 +276,25 @@
       "email": "(es)Email",
       "createAccountButton": "(es)Add account"
     }
+  },
+  "partnerLicense": {
+    "label": {
+      "title": "(es)License",
+      "subTitle": "(es)License for partners",
+      "returnButton": "(es)Return",
+      "orderLicenseButton": "(es)Order License",
+      "orderHistoryButton": "(es)Order History",
+      "IssueLicenseCardButton": "(es)License Card",
+      "displayCardHistoryButton": "(es)Card History",
+      "name": "(es)Name",
+      "category": "(es)Category",
+      "accountId": "(es)Account ID",
+      "stockLicense": "(es)Stock license",
+      "issueRequested": "(es)Issue Requested",
+      "shortage": "(es)Shortage",
+      "issueRequesting": "(es)Issue Requesting",
+      "viewDetails": "(es)View details",
+      "accounts": "(es)accounts"
+    }
   }
 }

dictation_client/src/translation/fr.json

@@ -12,7 +12,12 @@
     "label": {
       "cancel": "(fr)Cancel",
       "headerTitle": "(fr)ODMS Cloud",
-      "copyRight": "(fr)OM Digital Solutions 2023"
+      "copyRight": "(fr)OM Digital Solutions 2023",
+      "tier1": "(fr)Admin",
+      "tier2": "(fr)BC",
+      "tier3": "(fr)Distributer",
+      "tier4": "(fr)Dealer",
+      "tier5": "(fr)Customer"
     }
   },
   "topPage": {
@@ -271,5 +276,25 @@
       "email": "(fr)Email",
       "createAccountButton": "(fr)Add account"
     }
+  },
+  "partnerLicense": {
+    "label": {
+      "title": "(fr)License",
+      "subTitle": "(fr)License for partners",
+      "returnButton": "(fr)Return",
+      "orderLicenseButton": "(fr)Order License",
+      "orderHistoryButton": "(fr)Order History",
+      "IssueLicenseCardButton": "(fr)License Card",
+      "displayCardHistoryButton": "(fr)Card History",
+      "name": "(fr)Name",
+      "category": "(fr)Category",
+      "accountId": "(fr)Account ID",
+      "stockLicense": "(fr)Stock license",
+      "issueRequested": "(fr)Issue Requested",
+      "shortage": "(fr)Shortage",
+      "issueRequesting": "(fr)Issue Requesting",
+      "viewDetails": "(fr)View details",
+      "accounts": "(fr)accounts"
+    }
   }
 }