diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx index c337f86..048d72e 100644 --- a/dictation_client/src/AppRouter.tsx +++ b/dictation_client/src/AppRouter.tsx @@ -15,7 +15,6 @@ import SignupCompletePage from "pages/SignupCompletePage"; 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 = () => ( @@ -44,10 +43,6 @@ const AppRouter: React.FC = () => ( path="/license" element={} />} /> - } />} - /> } />} diff --git a/dictation_client/src/api/api.ts b/dictation_client/src/api/api.ts index 8f36c96..6a20eaf 100644 --- a/dictation_client/src/api/api.ts +++ b/dictation_client/src/api/api.ts @@ -375,7 +375,7 @@ export interface CreatePartnerAccountRequest { * @type {string} * @memberof CreatePartnerAccountRequest */ - email?: string; + email: string; } /** * @@ -495,6 +495,50 @@ export interface GetMyAccountResponse { */ account: Account; } +/** + * + * @export + * @interface GetOrderHistoriesRequest + */ +export interface GetOrderHistoriesRequest { + /** + * 取得件数 + * @type {number} + * @memberof GetOrderHistoriesRequest + */ + limit: number; + /** + * 開始位置 + * @type {number} + * @memberof GetOrderHistoriesRequest + */ + offset: number; + /** + * アカウントID + * @type {number} + * @memberof GetOrderHistoriesRequest + */ + accountId: number; +} +/** + * + * @export + * @interface GetOrderHistoriesResponce + */ +export interface GetOrderHistoriesResponce { + /** + * 合計件数 + * @type {number} + * @memberof GetOrderHistoriesResponce + */ + total: number; + /** + * + * @type {Array} + * @memberof GetOrderHistoriesResponce + */ + orderHistories: Array; +} /** * * @export @@ -684,6 +728,43 @@ export interface IssueCardLicensesResponse { */ cardLicenseKeys: Array; } +/** + * + * @export + * @interface LicenseOrder + */ +export interface LicenseOrder { + /** + * 注文日付 + * @type {string} + * @memberof LicenseOrder + */ + orderDate: string; + /** + * 発行日付 + * @type {string} + * @memberof LicenseOrder + */ + issueDate: string; + /** + * 注文数 + * @type {number} + * @memberof LicenseOrder + */ + numberOfOrder: number; + /** + * POナンバー + * @type {string} + * @memberof LicenseOrder + */ + poNumber: string; + /** + * 注文状態 + * @type {string} + * @memberof LicenseOrder + */ + status: string; +} /** * * @export @@ -1178,13 +1259,13 @@ export interface User { * @type {string} * @memberof User */ - authorId: string | null; + authorId?: string; /** * - * @type {string} + * @type {Array} * @memberof User */ - typistGroupName: string | null; + typistGroupName: string; /** * * @type {string} @@ -1215,6 +1296,36 @@ export interface User { * @memberof User */ notification: boolean; + /** + * + * @type {boolean} + * @memberof User + */ + encryption: boolean; + /** + * + * @type {boolean} + * @memberof User + */ + prompt: boolean; + /** + * + * @type {string} + * @memberof User + */ + expiration?: string; + /** + * + * @type {number} + * @memberof User + */ + remaining?: number; + /** + * Normal/NoLicense/Alert/Renew + * @type {string} + * @memberof User + */ + licenseStatus: string; } /** @@ -1438,6 +1549,64 @@ export const AccountsApiAxiosParamCreator = function ( options: localVarRequestOptions, }; }, + /** + * + * @summary + * @param {GetOrderHistoriesRequest} getOrderHistoriesRequest + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + getOrderHistories: async ( + getOrderHistoriesRequest: GetOrderHistoriesRequest, + options: AxiosRequestConfig = {} + ): Promise => { + // verify required parameter 'getOrderHistoriesRequest' is not null or undefined + assertParamExists( + "getOrderHistories", + "getOrderHistoriesRequest", + getOrderHistoriesRequest + ); + const localVarPath = `/accounts/order-histories`; + // 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( + getOrderHistoriesRequest, + localVarRequestOptions, + configuration + ); + + return { + url: toPathString(localVarUrlObj), + options: localVarRequestOptions, + }; + }, /** * * @summary @@ -1693,6 +1862,34 @@ export const AccountsApiFp = function (configuration?: Configuration) { configuration ); }, + /** + * + * @summary + * @param {GetOrderHistoriesRequest} getOrderHistoriesRequest + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + async getOrderHistories( + getOrderHistoriesRequest: GetOrderHistoriesRequest, + options?: AxiosRequestConfig + ): Promise< + ( + axios?: AxiosInstance, + basePath?: string + ) => AxiosPromise + > { + const localVarAxiosArgs = + await localVarAxiosParamCreator.getOrderHistories( + getOrderHistoriesRequest, + options + ); + return createRequestFunction( + localVarAxiosArgs, + globalAxios, + BASE_PATH, + configuration + ); + }, /** * * @summary @@ -1839,6 +2036,21 @@ export const AccountsApiFactory = function ( .getMyAccount(options) .then((request) => request(axios, basePath)); }, + /** + * + * @summary + * @param {GetOrderHistoriesRequest} getOrderHistoriesRequest + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + getOrderHistories( + getOrderHistoriesRequest: GetOrderHistoriesRequest, + options?: any + ): AxiosPromise { + return localVarFp + .getOrderHistories(getOrderHistoriesRequest, options) + .then((request) => request(axios, basePath)); + }, /** * * @summary @@ -1950,6 +2162,23 @@ export class AccountsApi extends BaseAPI { .then((request) => request(this.axios, this.basePath)); } + /** + * + * @summary + * @param {GetOrderHistoriesRequest} getOrderHistoriesRequest + * @param {*} [options] Override http request option. + * @throws {RequiredError} + * @memberof AccountsApi + */ + public getOrderHistories( + getOrderHistoriesRequest: GetOrderHistoriesRequest, + options?: AxiosRequestConfig + ) { + return AccountsApiFp(this.configuration) + .getOrderHistories(getOrderHistoriesRequest, options) + .then((request) => request(this.axios, this.basePath)); + } + /** * * @summary diff --git a/dictation_client/src/app/store.ts b/dictation_client/src/app/store.ts index 56a8518..3299991 100644 --- a/dictation_client/src/app/store.ts +++ b/dictation_client/src/app/store.ts @@ -12,6 +12,7 @@ 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"; +import licenseOrderHistory from "features/license/licenseOrderHistory/licenseOrderHistorySlice"; export const store = configureStore({ reducer: { @@ -25,6 +26,7 @@ export const store = configureStore({ licenseCardIssue, licenseCardActivate, licenseSummary, + licenseOrderHistory, partnerLicense, dictation, partner, diff --git a/dictation_client/src/features/license/licenseOrderHistory/constants.ts b/dictation_client/src/features/license/licenseOrderHistory/constants.ts new file mode 100644 index 0000000..c0b9ec4 --- /dev/null +++ b/dictation_client/src/features/license/licenseOrderHistory/constants.ts @@ -0,0 +1,9 @@ +export const LIMIT_ORDER_HISORY_NUM = 50; + +export const STATUS = { + // eslint-disable-next-line @typescript-eslint/naming-convention + ISSUE_REQESTING: "Issue Requesting", + ISSUED: "Issued", + // eslint-disable-next-line @typescript-eslint/naming-convention + ORDER_CANCELED: "Order Canceled", +} as const; diff --git a/dictation_client/src/features/license/licenseOrderHistory/index.ts b/dictation_client/src/features/license/licenseOrderHistory/index.ts new file mode 100644 index 0000000..17b7989 --- /dev/null +++ b/dictation_client/src/features/license/licenseOrderHistory/index.ts @@ -0,0 +1,5 @@ +export * from "./state"; +export * from "./constants"; +export * from "./operations"; +export * from "./selectors"; +export * from "./licenseOrderHistorySlice"; diff --git a/dictation_client/src/features/license/licenseOrderHistory/licenseOrderHistorySlice.ts b/dictation_client/src/features/license/licenseOrderHistory/licenseOrderHistorySlice.ts new file mode 100644 index 0000000..60eca5f --- /dev/null +++ b/dictation_client/src/features/license/licenseOrderHistory/licenseOrderHistorySlice.ts @@ -0,0 +1,48 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { LicenseOrderHistoryState } from "./state"; +import { getLicenseOrderHistoriesAsync } from "./operations"; +import { LIMIT_ORDER_HISORY_NUM } from "./constants"; + +const initialState: LicenseOrderHistoryState = { + domain: { + total: 0, + orderHistories: [], + }, + apps: { + limit: LIMIT_ORDER_HISORY_NUM, + offset: 0, + accountId: 0, + isLoading: false, + LicenseOrder: undefined, + }, +}; + +export const licenseOrderHistorySlice = createSlice({ + name: "licenseOrderHistory", + initialState, + reducers: { + cleanupApps: (state) => { + state.domain = initialState.domain; + }, + }, + extraReducers: (builder) => { + builder.addCase(getLicenseOrderHistoriesAsync.pending, (state) => { + state.apps.isLoading = true; + }); + builder.addCase( + getLicenseOrderHistoriesAsync.fulfilled, + (state, action) => { + state.domain.total = action.payload.total; + state.domain.orderHistories = action.payload.orderHistories; + state.apps.isLoading = false; + } + ); + builder.addCase(getLicenseOrderHistoriesAsync.rejected, (state) => { + state.apps.isLoading = false; + }); + }, +}); + +export const { cleanupApps } = licenseOrderHistorySlice.actions; + +export default licenseOrderHistorySlice.reducer; diff --git a/dictation_client/src/features/license/licenseOrderHistory/operations.ts b/dictation_client/src/features/license/licenseOrderHistory/operations.ts new file mode 100644 index 0000000..e6f9864 --- /dev/null +++ b/dictation_client/src/features/license/licenseOrderHistory/operations.ts @@ -0,0 +1,56 @@ +import { createAsyncThunk } from "@reduxjs/toolkit"; +import type { RootState } from "app/store"; +import { getTranslationID } from "translation"; +import { openSnackbar } from "features/ui/uiSlice"; +import { AccountsApi, GetOrderHistoriesResponce } from "../../../api/api"; +import { Configuration } from "../../../api/configuration"; +import { ErrorObject, createErrorObject } from "../../../common/errors"; + +export const getLicenseOrderHistoriesAsync = createAsyncThunk< + // 正常時の戻り値の型 + GetOrderHistoriesResponce, + { + // パラメータ + limit: number; + offset: number; + accountId: number; + }, + { + // rejectした時の返却値の型 + rejectValue: { + error: ErrorObject; + }; + } +>("licenses/licenseOrderHisotyAsync", async (args, thunkApi) => { + const { limit, offset, accountId } = args; + // 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 res = await accountsApi.getOrderHistories( + { + limit, + offset, + accountId, + }, + { + headers: { authorization: `Bearer ${accessToken}` }, + } + ); + return res.data; + } catch (e) { + // e ⇒ errorObjectに変換" + const error = createErrorObject(e); + thunkApi.dispatch( + openSnackbar({ + level: "error", + message: getTranslationID("common.message.internalServerError"), + }) + ); + return thunkApi.rejectWithValue({ error }); + } +}); diff --git a/dictation_client/src/features/license/licenseOrderHistory/selectors.ts b/dictation_client/src/features/license/licenseOrderHistory/selectors.ts new file mode 100644 index 0000000..e2e6914 --- /dev/null +++ b/dictation_client/src/features/license/licenseOrderHistory/selectors.ts @@ -0,0 +1,36 @@ +import { RootState } from "app/store"; +import { ceil, floor } from "lodash"; + +export const selectOrderHisory = (state: RootState) => + state.licenseOrderHistory.domain.orderHistories; + +export const selectTotal = (state: RootState) => + state.licenseOrderHistory.domain.total; + +export const seletctLimit = (state: RootState) => + state.licenseOrderHistory.apps.limit; + +export const selectOffset = (state: RootState) => + state.licenseOrderHistory.apps.offset; + +export const selectAccountId = (state: RootState) => + state.licenseOrderHistory.apps.accountId; + +export const selectTotalPage = (state: RootState) => { + const { limit } = state.licenseOrderHistory.apps; + const { total } = state.licenseOrderHistory.domain; + const page = ceil(total / limit); + return page; +}; + +export const selectCurrentPage = (state: RootState) => { + const { limit, offset } = state.licenseOrderHistory.apps; + const page = floor(offset / limit) + 1; + return page; +}; + +export const selectSelectedTask = (state: RootState) => + state.licenseOrderHistory.apps.LicenseOrder; + +export const selectIsLoading = (state: RootState) => + state.licenseOrderHistory.apps.isLoading; diff --git a/dictation_client/src/features/license/licenseOrderHistory/state.ts b/dictation_client/src/features/license/licenseOrderHistory/state.ts new file mode 100644 index 0000000..d2d3798 --- /dev/null +++ b/dictation_client/src/features/license/licenseOrderHistory/state.ts @@ -0,0 +1,19 @@ +import { LicenseOrder } from "../../../api/api"; + +export interface LicenseOrderHistoryState { + domain: Domain; + apps: Apps; +} + +export interface Domain { + total: number; + orderHistories: LicenseOrder[]; +} + +export interface Apps { + limit: number; + offset: number; + accountId: number; + LicenseOrder?: LicenseOrder; + isLoading: boolean; +} diff --git a/dictation_client/src/features/user/userSlice.ts b/dictation_client/src/features/user/userSlice.ts index 25fcc89..ea5486c 100644 --- a/dictation_client/src/features/user/userSlice.ts +++ b/dictation_client/src/features/user/userSlice.ts @@ -16,6 +16,10 @@ const initialState: UsersState = { autoRenew: true, licenseAlert: true, notification: true, + // XXX エラー回避、api.ts生成時にエラー発生 + encryption: false, + prompt: false, + licenseStatus: "", }, isLoading: false, }, @@ -42,7 +46,8 @@ export const userSlice = createSlice({ action: PayloadAction<{ authorId: string | undefined }> ) => { const { authorId } = action.payload; - state.apps.addUser.authorId = authorId ?? null; + // XXX エラー回避、api.ts生成時にエラー発生、null →　undefined + state.apps.addUser.authorId = authorId ?? undefined; }, changeTypistGroupId: ( state, diff --git a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx new file mode 100644 index 0000000..d1e9275 --- /dev/null +++ b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx @@ -0,0 +1,290 @@ +/* eslint-disable jsx-a11y/control-has-associated-label */ +import React, { useCallback, useEffect } from "react"; +import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; +import Footer from "components/footer"; +import Header from "components/header"; +import styles from "styles/app.module.scss"; +import { getTranslationID } from "translation"; +import { useTranslation } from "react-i18next"; +import { AppDispatch } from "app/store"; +import { useDispatch, useSelector } from "react-redux"; +import { + LIMIT_ORDER_HISORY_NUM, + STATUS, + getLicenseOrderHistoriesAsync, + selectAccountId, + selectCurrentPage, + selectIsLoading, + selectOrderHisory, + selectTotal, + selectTotalPage, +} from "features/license/licenseOrderHistory"; +import undo from "../../assets/images/undo.svg"; +import history from "../../assets/images/history.svg"; +import progress_activit from "../../assets/images/progress_activit.svg"; + +interface LicenseOrderHistoryProps { + onReturn: () => void; +} +export const LicenseOrderHistory: React.FC = ( + props +): JSX.Element => { + const { onReturn } = props; + const dispatch: AppDispatch = useDispatch(); + const [t] = useTranslation(); + const total = useSelector(selectTotal); + const totalPage = useSelector(selectTotalPage); + const currentPage = useSelector(selectCurrentPage); + const accountId = useSelector(selectAccountId); + const isLoading = useSelector(selectIsLoading); + + // Return押下時の処理 + const returnGui = useCallback(() => { + if (isLoading) { + return; + } + onReturn(); + }, [isLoading, onReturn]); + + // ページネーションのボタンクリック時のアクション + const getFirstPage = useCallback(() => { + dispatch( + getLicenseOrderHistoriesAsync({ + limit: LIMIT_ORDER_HISORY_NUM, + offset: 0, + accountId, + }) + ); + }, [dispatch, accountId]); + + const getLastPage = useCallback(() => { + const lastPageOffset = (totalPage - 1) * LIMIT_ORDER_HISORY_NUM; + dispatch( + getLicenseOrderHistoriesAsync({ + limit: LIMIT_ORDER_HISORY_NUM, + offset: lastPageOffset, + accountId, + }) + ); + }, [dispatch, totalPage, accountId]); + + const getPrevPage = useCallback(() => { + const prevPageOffset = (currentPage - 2) * LIMIT_ORDER_HISORY_NUM; + dispatch( + getLicenseOrderHistoriesAsync({ + limit: LIMIT_ORDER_HISORY_NUM, + offset: prevPageOffset, + accountId, + }) + ); + }, [dispatch, currentPage, accountId]); + + const getNextPage = useCallback(() => { + const nextPageOffset = currentPage * LIMIT_ORDER_HISORY_NUM; + dispatch( + getLicenseOrderHistoriesAsync({ + limit: LIMIT_ORDER_HISORY_NUM, + offset: nextPageOffset, + accountId, + }) + ); + }, [dispatch, currentPage, accountId]); + + // apiからの値取得関係 + const licenseOrderHistory = useSelector(selectOrderHisory); + + useEffect(() => { + dispatch( + getLicenseOrderHistoriesAsync({ + limit: LIMIT_ORDER_HISORY_NUM, + offset: 0, + accountId, + }) + ); + }, [dispatch, accountId]); + + return ( +
+
+ + +
+
+
+

+ {t(getTranslationID("orderHistoriesPage.label.title"))} +

+
+
+
+

+ {t(getTranslationID("orderHistoriesPage.label.subTitle"))} +

+ + {t(getTranslationID("orderHistoriesPage.label.orderHistory"))} +

+

+ +
+ + + + + + + + + {!isLoading && + licenseOrderHistory.length !== 0 && + licenseOrderHistory.map((x) => ( + // eslint-disable-next-line react/jsx-key + + + + + + + + + ))} +
+ {t( + getTranslationID("orderHistoriesPage.label.orderDate") + )} + + {t( + getTranslationID("orderHistoriesPage.label.issueDate") + )} + + {t( + getTranslationID( + "orderHistoriesPage.label.numberOfOrder" + ) + )} + + {t(getTranslationID("orderHistoriesPage.label.poNumber"))} + + {t(getTranslationID("orderHistoriesPage.label.status"))} + + +
{x.orderDate}{x.issueDate}{x.numberOfOrder}{x.poNumber} + {(() => { + // eslint-disable-next-line default-case + switch (x.status) { + case STATUS.ISSUE_REQESTING: + return t( + getTranslationID( + "orderHistoriesPage.label.issueRequesting" + ) + ); + case STATUS.ISSUED: + return t( + getTranslationID( + "orderHistoriesPage.label.issued" + ) + ); + case STATUS.ORDER_CANCELED: + return t( + getTranslationID( + "orderHistoriesPage.label.orderCanceled" + ) + ); + } + })()} + + +
+
+ {isLoading && ( + Loading + )} + {/** pagenation */} +
+ +
+
+
+
+
+
+
+ ); +}; + +export default LicenseOrderHistory; diff --git a/dictation_client/src/pages/LicensePage/licenseSummary.tsx b/dictation_client/src/pages/LicensePage/licenseSummary.tsx index 0652617..c6d9365 100644 --- a/dictation_client/src/pages/LicensePage/licenseSummary.tsx +++ b/dictation_client/src/pages/LicensePage/licenseSummary.tsx @@ -18,6 +18,8 @@ import block from "../../assets/images/block.svg"; import circle from "../../assets/images/circle.svg"; import { LicenseOrderPopup } from "./licenseOrderPopup"; import { CardLicenseActivatePopup } from "./cardLicenseActivatePopup"; +// eslint-disable-next-line import/no-named-as-default +import LicenseOrderHistory from "./licenseOrderHistory"; const LicenseSummary: React.FC = (): JSX.Element => { const dispatch: AppDispatch = useDispatch(); @@ -36,6 +38,14 @@ const LicenseSummary: React.FC = (): JSX.Element => { setIsCardLicenseActivatePopupOpen(true); }, [setIsCardLicenseActivatePopupOpen]); + // 呼び出し画面制御関係 + const [islicenseOrderHistoryOpen, setIsLicenseOrderHistoryOpen] = + useState(false); + + const onLicenseOrderHistoryOpen = useCallback(() => { + setIsLicenseOrderHistoryOpen(true); + }, [setIsLicenseOrderHistoryOpen]); + // apiからの値取得関係 const licenseSummaryInfo = useSelector(selecLicenseSummaryInfo); @@ -61,154 +71,166 @@ const LicenseSummary: React.FC = (): JSX.Element => { }} /> )} -
-
+ {islicenseOrderHistoryOpen && ( + { + setIsLicenseOrderHistoryOpen(false); + }} + /> + )} + {!islicenseOrderHistoryOpen && ( +
+
- -
-
-
-

- {t(getTranslationID("LicenseSummaryPage.label.title"))} -

-
-
-
-

- {t(getTranslationID("LicenseSummaryPage.label.subTitle"))} -

- -
-
- {t( - getTranslationID("LicenseSummaryPage.label.totalLicense") - )} -
-
{licenseSummaryInfo.totalLicense}
-
- {t( - getTranslationID( - "LicenseSummaryPage.label.allocatedLicense" - ) - )} -
-
{licenseSummaryInfo.allocatedLicense}
-
- {t( - getTranslationID( - "LicenseSummaryPage.label.reusableLicense" - ) - )} -
-
{licenseSummaryInfo.reusableLicense}
-
- {t( - getTranslationID("LicenseSummaryPage.label.freeLicense") - )} -
-
{licenseSummaryInfo.freeLicense}
-
- {t( - getTranslationID( - "LicenseSummaryPage.label.expiringWithin14daysLicense" - ) - )} -
-
{licenseSummaryInfo.expiringWithin14daysLicense}
-
- {t( - getTranslationID( - "LicenseSummaryPage.label.issueRequesting" - ) - )} -
-
{licenseSummaryInfo.issueRequesting}
-
- {t( - getTranslationID( - "LicenseSummaryPage.label.numberOfRequesting" - ) - )} -
-
{licenseSummaryInfo.numberOfRequesting}
-
- {t(getTranslationID("LicenseSummaryPage.label.shortage"))} -
-
{licenseSummaryInfo.shortage}
-
- {t( - getTranslationID("LicenseSummaryPage.label.storageSize") - )} -
-
{licenseSummaryInfo.storageSize}GB
-
- {t(getTranslationID("LicenseSummaryPage.label.usedSize"))} -
-
{licenseSummaryInfo.usedSize}GB
-
- {t( - getTranslationID( - "LicenseSummaryPage.label.storageAvailable" - ) - )} -
-
- {licenseSummaryInfo.isStorageAvailable && ( - - )} - {!licenseSummaryInfo.isStorageAvailable && ( - - )} -
-
+ +
+
+
+

+ {t(getTranslationID("LicenseSummaryPage.label.title"))} +

-
-
-
-
-
+
+
+

+ {t(getTranslationID("LicenseSummaryPage.label.subTitle"))} +

+ +
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.totalLicense" + ) + )} +
+
{licenseSummaryInfo.totalLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.allocatedLicense" + ) + )} +
+
{licenseSummaryInfo.allocatedLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.reusableLicense" + ) + )} +
+
{licenseSummaryInfo.reusableLicense}
+
+ {t( + getTranslationID("LicenseSummaryPage.label.freeLicense") + )} +
+
{licenseSummaryInfo.freeLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.expiringWithin14daysLicense" + ) + )} +
+
{licenseSummaryInfo.expiringWithin14daysLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.issueRequesting" + ) + )} +
+
{licenseSummaryInfo.issueRequesting}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.numberOfRequesting" + ) + )} +
+
{licenseSummaryInfo.numberOfRequesting}
+
+ {t(getTranslationID("LicenseSummaryPage.label.shortage"))} +
+
{licenseSummaryInfo.shortage}
+
+ {t( + getTranslationID("LicenseSummaryPage.label.storageSize") + )} +
+
{licenseSummaryInfo.storageSize}GB
+
+ {t(getTranslationID("LicenseSummaryPage.label.usedSize"))} +
+
{licenseSummaryInfo.usedSize}GB
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.storageAvailable" + ) + )} +
+
+ {licenseSummaryInfo.isStorageAvailable && ( + + )} + {!licenseSummaryInfo.isStorageAvailable && ( + + )} +
+
+
+
+
+ +