OMDSCloud/dictation_client/src/pages/LicensePage/licenseSummary.tsx

import React, { useCallback, useEffect, useState } 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 {
  getLicenseSummaryAsync,
  selecLicenseSummaryInfo,
} from "features/license/licenseSummary";
import postAdd from "../../assets/images/post_add.svg";
import history from "../../assets/images/history.svg";
import key from "../../assets/images/key.svg";
import lock from "../../assets/images/lock.svg";
import lockOpen from "../../assets/images/lock_open.svg";
import { LicenseOrderPopup } from "./licenseOrderPopup";
import { CardLicenseImportPopup } from "./cardLicenseImportPopup";

const LicenseSummary: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();

  // popup制御関係
  const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
  const [isCardLicenseImportPopupOpen, setIsCardLicenseImportPopupOpen] =
    useState(false);

  const onlicenseOrderOpen = useCallback(() => {
    setIslicenseOrderPopupOpen(true);
  }, [setIslicenseOrderPopupOpen]);

  const onCardLicenseImportOpen = useCallback(() => {
    setIsCardLicenseImportPopupOpen(true);
  }, [setIsCardLicenseImportPopupOpen]);

  // apiからの値取得関係
  const licenseSummaryInfo = useSelector(selecLicenseSummaryInfo);

  useEffect(() => {
    dispatch(getLicenseSummaryAsync());
  }, [dispatch]);

  return (
    <>
      {/* isPopupOpenがfalseの場合はポップアップのhtmlを生成しないように対応。これによりポップアップは都度生成されて初期化の考慮が減る */}
      {islicenseOrderPopupOpen && (
        <LicenseOrderPopup
          onClose={() => {
            setIslicenseOrderPopupOpen(false);
          }}
        />
      )}
      {isCardLicenseImportPopupOpen && (
        <CardLicenseImportPopup
          onClose={() => {
            setIsCardLicenseImportPopupOpen(false);
          }}
        />
      )}
      <div className={styles.wrap}>
        <Header userName="XXXXXX" />

        <UpdateTokenTimer />
        <main className={styles.main}>
          <div className="">
            <div className={styles.pageHeader}>
              <h1 className={styles.pageTitle}>
                {t(getTranslationID("LicenseSummaryPage.label.title"))}
              </h1>
            </div>
            <section className={styles.license}>
              <div>
                <h2 className="">
                  {t(getTranslationID("LicenseSummaryPage.label.subTitle"))}
                </h2>
                <ul className={styles.menuAction}>
                  <li>
                    {/* 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(
                          "LicenseSummaryPage.label.orderLicense"
                        )
                      )}
                    </a>
                  </li>
                  <li>
                    <a
                      href="/licenseOrderHistory"
                      className={`${styles.menuLink} ${styles.isActive}`}
                    >
                      <img src={history} alt="" className={styles.menuIcon} />
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.orderHistory"
                        )
                      )}
                    </a>
                  </li>
                  <li>
                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                    <a
                      className={`${styles.menuLink} ${styles.isActive}`}
                      onClick={onCardLicenseImportOpen}
                    >
                      <img src={key} alt="" className={styles.menuIcon} />
                      {t(
                        getTranslationID(
                          "LicenseSummaryPage.label.importLicenseKey"
                        )
                      )}
                    </a>
                  </li>
                </ul>
                <dl className={`${styles.listVertical} ${styles.marginBtm5}`}>
                  <dt>
                    {t(
                      getTranslationID("LicenseSummaryPage.label.totalLicense")
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.totalLicense}</dd>
                  <dt>
                    {t(
                      getTranslationID(
                        "LicenseSummaryPage.label.allocatedLicense"
                      )
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.allocatedLicense}</dd>
                  <dt>
                    {t(
                      getTranslationID(
                        "LicenseSummaryPage.label.reusableLicense"
                      )
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.reusableLicense}</dd>
                  <dt>
                    {t(
                      getTranslationID("LicenseSummaryPage.label.freeLicense")
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.freeLicense}</dd>
                  <dt>
                    {t(
                      getTranslationID(
                        "LicenseSummaryPage.label.expiringWithin14daysLicense"
                      )
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.expiringWithin14daysLicense}</dd>
                  <dt>
                    {t(
                      getTranslationID(
                        "LicenseSummaryPage.label.issueRequesting"
                      )
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.issueRequesting}</dd>
                  <dt>
                    {t(
                      getTranslationID(
                        "LicenseSummaryPage.label.numberOfRequesting"
                      )
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.numberOfRequesting}</dd>
                  <dt>
                    {t(getTranslationID("LicenseSummaryPage.label.shortage"))}
                  </dt>
                  <dd>{licenseSummaryInfo.shortage}</dd>
                  <dt>
                    {t(
                      getTranslationID("LicenseSummaryPage.label.storageSize")
                    )}
                  </dt>
                  <dd>{licenseSummaryInfo.storageSize}GB</dd>
                  <dt>
                    {t(getTranslationID("LicenseSummaryPage.label.usedSize"))}
                  </dt>
                  <dd>{licenseSummaryInfo.usedSize}GB</dd>
                  <dt>
                    {t(
                      getTranslationID("LicenseSummaryPage.label.accountLock")
                    )}
                  </dt>
                  <dd>
                    {licenseSummaryInfo.isAccountLock && (
                      <img src={lock} alt="" className={styles.icCheckCircle} />
                    )}
                    {!licenseSummaryInfo.isAccountLock && (
                      <img
                        src={lockOpen}
                        alt=""
                        className={styles.icCheckCircle}
                      />
                    )}
                  </dd>
                </dl>
              </div>
            </section>
          </div>
        </main>
        <Footer />
      </div>
    </>
  );
};

export default LicenseSummary;