Merged PR 602: ライセンス確認画面（第五階層）に会社名を表示する（client側）

## 概要
[Task3225: ライセンス確認画面（第五階層）に会社名を表示する（client側）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3225)

- 何をどう変更したか、追加したライブラリなど
ライセンス確認画面（第5階層）の会社名取得APIを呼び出す実装を追加。
- このPull Requestでの対象/対象外
server側の実装は別ブランチで行うためここでは対象外

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

## UIの変更
- Before/Afterのスクショなど
- スクショ置き場

## 動作確認状況
- ローカルで確認（完了）

dictation_client/src/api/api.ts

@@ -752,6 +752,32 @@ export interface GetAuthorsResponse {
      */
     'authors': Array<Author>;
 }
+/**
+ * 
+ * @export
+ * @interface GetCompanyNameRequest
+ */
+export interface GetCompanyNameRequest {
+    /**
+     * 
+     * @type {number}
+     * @memberof GetCompanyNameRequest
+     */
+    'accountId': number;
+}
+/**
+ * 
+ * @export
+ * @interface GetCompanyNameResponse
+ */
+export interface GetCompanyNameResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof GetCompanyNameResponse
+     */
+    'companyName': string;
+}
 /**
  * 
  * @export
@@ -2739,6 +2765,46 @@ export const AccountsApiAxiosParamCreator = function (configuration?: Configurat
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * 指定したアカウントの会社名を取得します
+         * @summary 
+         * @param {GetCompanyNameRequest} getCompanyNameRequest 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCompanyName: async (getCompanyNameRequest: GetCompanyNameRequest, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'getCompanyNameRequest' is not null or undefined
+            assertParamExists('getCompanyName', 'getCompanyNameRequest', getCompanyNameRequest)
+            const localVarPath = `/accounts/company-name`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(getCompanyNameRequest, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @summary 
@@ -3500,6 +3566,19 @@ export const AccountsApiFp = function(configuration?: Configuration) {
             const operationBasePath = operationServerMap['AccountsApi.getAuthors']?.[index]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, operationBasePath || basePath);
         },
+        /**
+         * 指定したアカウントの会社名を取得します
+         * @summary 
+         * @param {GetCompanyNameRequest} getCompanyNameRequest 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getCompanyName(getCompanyNameRequest: GetCompanyNameRequest, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GetCompanyNameResponse>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getCompanyName(getCompanyNameRequest, options);
+            const index = configuration?.serverIndex ?? 0;
+            const operationBasePath = operationServerMap['AccountsApi.getCompanyName']?.[index]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, operationBasePath || basePath);
+        },
         /**
          * 
          * @summary 
@@ -3816,6 +3895,16 @@ export const AccountsApiFactory = function (configuration?: Configuration, baseP
         getAuthors(options?: any): AxiosPromise<GetAuthorsResponse> {
             return localVarFp.getAuthors(options).then((request) => request(axios, basePath));
         },
+        /**
+         * 指定したアカウントの会社名を取得します
+         * @summary 
+         * @param {GetCompanyNameRequest} getCompanyNameRequest 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getCompanyName(getCompanyNameRequest: GetCompanyNameRequest, options?: any): AxiosPromise<GetCompanyNameResponse> {
+            return localVarFp.getCompanyName(getCompanyNameRequest, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @summary 
@@ -4104,6 +4193,18 @@ export class AccountsApi extends BaseAPI {
         return AccountsApiFp(this.configuration).getAuthors(options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 指定したアカウントの会社名を取得します
+     * @summary 
+     * @param {GetCompanyNameRequest} getCompanyNameRequest 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AccountsApi
+     */
+    public getCompanyName(getCompanyNameRequest: GetCompanyNameRequest, options?: AxiosRequestConfig) {
+        return AccountsApiFp(this.configuration).getCompanyName(getCompanyNameRequest, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @summary 

dictation_client/src/features/license/licenseSummary/licenseSummarySlice.ts

@@ -1,20 +1,25 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { LicenseSummaryState } from "./state";
-import { getLicenseSummaryAsync } from "./operations";
+import { getCompanyNameAsync, getLicenseSummaryAsync } from "./operations";
 
 const initialState: LicenseSummaryState = {
   domain: {
-    totalLicense: 0,
+    licenseSummaryInfo: {
-    allocatedLicense: 0,
+      totalLicense: 0,
-    reusableLicense: 0,
+      allocatedLicense: 0,
-    freeLicense: 0,
+      reusableLicense: 0,
-    expiringWithin14daysLicense: 0,
+      freeLicense: 0,
-    issueRequesting: 0,
+      expiringWithin14daysLicense: 0,
-    numberOfRequesting: 0,
+      issueRequesting: 0,
-    shortage: 0,
+      numberOfRequesting: 0,
-    storageSize: 0,
+      shortage: 0,
-    usedSize: 0,
+      storageSize: 0,
-    isStorageAvailable: false,
+      usedSize: 0,
+      isStorageAvailable: false,
+    },
+    accountInfo: {
+      companyName: "",
+    },
   },
   apps: {
     isLoading: false,
@@ -31,7 +36,10 @@ export const licenseSummarySlice = createSlice({
   },
   extraReducers: (builder) => {
     builder.addCase(getLicenseSummaryAsync.fulfilled, (state, action) => {
-      state.domain = action.payload;
+      state.domain.licenseSummaryInfo = action.payload;
+    });
+    builder.addCase(getCompanyNameAsync.fulfilled, (state, action) => {
+      state.domain.accountInfo.companyName = action.payload.companyName;
     });
   },
 });

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

@@ -5,6 +5,7 @@ import { openSnackbar } from "features/ui/uiSlice";
 import { getAccessToken } from "features/auth";
 import {
   AccountsApi,
+  GetCompanyNameResponse,
   GetLicenseSummaryResponse,
   PartnerLicenseInfo,
 } from "../../../api/api";
@@ -66,3 +67,59 @@ export const getLicenseSummaryAsync = createAsyncThunk<
     return thunkApi.rejectWithValue({ error });
   }
 });
+
+export const getCompanyNameAsync = createAsyncThunk<
+  // 正常時の戻り値の型
+  GetCompanyNameResponse,
+  // 引数
+  { selectedRow?: PartnerLicenseInfo },
+  {
+    // rejectした時の返却値の型
+    rejectValue: {
+      error: ErrorObject;
+    };
+  }
+>("licenses/getCompanyNameAsync", async (args, thunkApi) => {
+  // apiのConfigurationを取得する
+  const { getState } = thunkApi;
+  const state = getState() as RootState;
+  const { configuration } = state.auth;
+  const accessToken = getAccessToken(state.auth);
+  const config = new Configuration(configuration);
+  const accountsApi = new AccountsApi(config);
+  try {
+    const getMyAccountResponse = await accountsApi.getMyAccount({
+      headers: { authorization: `Bearer ${accessToken}` },
+    });
+
+    const { selectedRow } = args;
+    // 引数がない場合は自分のアカウントID取得
+    const accountId =
+      selectedRow?.accountId ?? getMyAccountResponse?.data?.account?.accountId;
+
+    if (accountId !== undefined) {
+      const getCompanyNameResponse = await accountsApi.getCompanyName(
+        { accountId },
+        {
+          headers: { authorization: `Bearer ${accessToken}` },
+        }
+      );
+      return getCompanyNameResponse.data;
+    }
+    throw new Error("accountId is undefined");
+  } catch (e) {
+    // e ⇒ errorObjectに変換"
+    const error = createErrorObject(e);
+
+    const errorMessage = getTranslationID("common.message.internalServerError");
+
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "error",
+        message: errorMessage,
+      })
+    );
+
+    return thunkApi.rejectWithValue({ error });
+  }
+});

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

@@ -2,6 +2,9 @@ import { RootState } from "app/store";
 
 // 各値はそのまま画面に表示するので、licenseSummaryInfoとして値を取得する
 export const selecLicenseSummaryInfo = (state: RootState) =>
-  state.licenseSummary.domain;
+  state.licenseSummary.domain.licenseSummaryInfo;
+
+export const selectCompanyName = (state: RootState) =>
+  state.licenseSummary.domain.accountInfo.companyName;
 
 export const selectIsLoading = (state: RootState) => state.license;

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

@@ -4,17 +4,22 @@ export interface LicenseSummaryState {
 }
 
 export interface Domain {
-  totalLicense: number;
+  licenseSummaryInfo: {
-  allocatedLicense: number;
+    totalLicense: number;
-  reusableLicense: number;
+    allocatedLicense: number;
-  freeLicense: number;
+    reusableLicense: number;
-  expiringWithin14daysLicense: number;
+    freeLicense: number;
-  issueRequesting: number;
+    expiringWithin14daysLicense: number;
-  numberOfRequesting: number;
+    issueRequesting: number;
-  shortage: number;
+    numberOfRequesting: number;
-  storageSize: number;
+    shortage: number;
-  usedSize: number;
+    storageSize: number;
-  isStorageAvailable: boolean;
+    usedSize: number;
+    isStorageAvailable: boolean;
+  };
+  accountInfo: {
+    companyName: string;
+  };
 }
 
 export interface Apps {

dictation_client/src/pages/LicensePage/licenseSummary.tsx

@@ -8,8 +8,10 @@ import { useTranslation } from "react-i18next";
 import { AppDispatch } from "app/store";
 import { useDispatch, useSelector } from "react-redux";
 import {
+  getCompanyNameAsync,
   getLicenseSummaryAsync,
   selecLicenseSummaryInfo,
+  selectCompanyName,
 } from "features/license/licenseSummary";
 import { selectSelectedRow } from "features/license/partnerLicense";
 import { selectDelegationAccessToken } from "features/auth/selectors";
@@ -61,9 +63,11 @@ export const LicenseSummary: React.FC<LicenseSummaryProps> = (
 
   // apiからの値取得関係
   const licenseSummaryInfo = useSelector(selecLicenseSummaryInfo);
+  const companyName = useSelector(selectCompanyName);
 
   useEffect(() => {
     dispatch(getLicenseSummaryAsync({ selectedRow }));
+    dispatch(getCompanyNameAsync({ selectedRow }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch]);
 
@@ -118,7 +122,7 @@ export const LicenseSummary: React.FC<LicenseSummaryProps> = (
               </div>
               <section className={styles.license}>
                 <div>
-                  <h2 className="">{"会社名" /* TODO 会社名を表示する */}</h2>
+                  <h2 className="">{companyName}</h2>
                   <ul className={styles.menuAction}>
                     <li>
                       {/* 他アカウントのライセンス情報を見ている場合は、前画面に戻る用のreturnボタンを表示 */}