124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import React, { useCallback, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { AppDispatch } from "app/store";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
issueTrialLicenseAsync,
|
|
cleanupApps,
|
|
selectIsLoading,
|
|
selectNumberOfLicenses,
|
|
selectExpirationDate,
|
|
setExpirationDate,
|
|
} from "features/license/licenseTrialIssue";
|
|
import styles from "../../styles/app.module.scss";
|
|
import { getTranslationID } from "../../translation";
|
|
import close from "../../assets/images/close.svg";
|
|
import progress_activit from "../../assets/images/progress_activit.svg";
|
|
import { SearchPartner, PartnerLicenseInfo } from "../../api";
|
|
|
|
interface TrialLicenseIssuePopupProps {
|
|
onClose: () => void;
|
|
selectedRow?: PartnerLicenseInfo | SearchPartner;
|
|
}
|
|
|
|
export const TrialLicenseIssuePopup: React.FC<TrialLicenseIssuePopupProps> = (
|
|
props
|
|
) => {
|
|
const { onClose, selectedRow } = props;
|
|
const { t } = useTranslation();
|
|
const dispatch: AppDispatch = useDispatch();
|
|
const isLoading = useSelector(selectIsLoading);
|
|
|
|
const numberOfLicenses = useSelector(selectNumberOfLicenses);
|
|
const expirationDate = useSelector(selectExpirationDate);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
// useEffectのreturnとしてcleanupAppsを実行することで、ポップアップのアンマウント時に初期化を行う
|
|
dispatch(cleanupApps());
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
// ポップアップ表示時
|
|
useEffect(() => {
|
|
// トライアルライセンスの有効期限を設定。
|
|
dispatch(setExpirationDate());
|
|
}, [dispatch]);
|
|
|
|
// ポップアップを閉じる処理
|
|
const closePopup = useCallback(() => {
|
|
if (isLoading) {
|
|
return;
|
|
}
|
|
onClose();
|
|
}, [isLoading, onClose]);
|
|
|
|
// 発行ボタン押下時
|
|
const onIssueTrialLicense = useCallback(async () => {
|
|
// トライアルライセンス発行APIの呼び出し
|
|
const { meta } = await dispatch(issueTrialLicenseAsync({ selectedRow }));
|
|
if (meta.requestStatus === "fulfilled") {
|
|
closePopup();
|
|
}
|
|
}, [dispatch, closePopup, selectedRow]);
|
|
|
|
// HTML
|
|
return (
|
|
<div className={`${styles.modal} ${styles.isShow}`}>
|
|
<div className={styles.modalBox}>
|
|
<p className={styles.modalTitle}>
|
|
{t(getTranslationID("trialLicenseIssuePopupPage.label.title"))}
|
|
<button type="button" onClick={closePopup}>
|
|
<img src={close} className={styles.modalTitleIcon} alt="close" />
|
|
</button>
|
|
</p>
|
|
<form className={styles.form}>
|
|
<dl className={`${styles.formList} ${styles.hasbg}`}>
|
|
<dt className={styles.formTitle}>
|
|
{t(getTranslationID("trialLicenseIssuePopupPage.label.subTitle"))}
|
|
</dt>
|
|
<dt className={styles.overLine}>
|
|
{t(
|
|
getTranslationID(
|
|
"trialLicenseIssuePopupPage.label.numberOfLicenses"
|
|
)
|
|
)}
|
|
</dt>
|
|
<dd>{numberOfLicenses}</dd>
|
|
<dt>
|
|
{t(
|
|
getTranslationID(
|
|
"trialLicenseIssuePopupPage.label.expirationDate"
|
|
)
|
|
)}
|
|
</dt>
|
|
<dd>{expirationDate}</dd>
|
|
<dd className={`${styles.full} ${styles.alignCenter}`}>
|
|
<input
|
|
type="button"
|
|
name="submit"
|
|
value={t(
|
|
getTranslationID(
|
|
"trialLicenseIssuePopupPage.label.issueButton"
|
|
)
|
|
)}
|
|
className={`${styles.formSubmit} ${styles.marginBtm1} ${
|
|
!isLoading ? styles.isActive : ""
|
|
}`}
|
|
onClick={onIssueTrialLicense}
|
|
/>
|
|
<img
|
|
style={{ display: isLoading ? "inline" : "none" }}
|
|
src={progress_activit}
|
|
className={styles.icLoading}
|
|
alt="Loading"
|
|
/>
|
|
</dd>
|
|
</dl>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|