KT-MyPage-front/src/pages/dashboard/contract/detail.tsx

import {
  Box,
  Button,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableRow,
  Typography,
} from "@mui/material";
import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
import useDashboard from "hooks/useDashBoard";
import useNavigateCustom from "hooks/useNavigateCustom";
import { PageID, TabID } from "pages";
import { useEffect, useMemo } from "react";
import { useParams } from "react-router-dom";
import { getPath } from "routes/path";
import { numberFormat } from "utils/string";
import PayingPlanList from "./component/PayingPlanList";

export default function ContractDetail() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL,
    TabID.NONE
  );

  const { id: paramId } = useParams();

  const {
    initialized,
    selectedseasonTicketContract: seasonTicketContract,
    seasonTicketContracts,
    select,
  } = useSeasonTicketContractContext();

  const { navigate, navigateWhenChanged } = useNavigateCustom();

  const moveToList = () => {
    navigateWhenChanged(getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST));
  };

  const endDate = useMemo(() => {
    if (seasonTicketContract) {
      const { contract_end_date } = seasonTicketContract;
      if (contract_end_date === "2121/12/31") {
        return "";
      }
      return contract_end_date;
    }
    return "";
  }, [seasonTicketContract]);
  const vehcleNo = useMemo(() => {
    if (seasonTicketContract) {
      const { vehicle_no } = seasonTicketContract;
      if (vehicle_no !== "") {
        return vehicle_no;
      }
      return "未登録";
    }
    return "";
  }, [seasonTicketContract]);

  useEffect(() => {
    setHeaderTitle("契約詳細");
    setTabs(null);
  }, [setHeaderTitle, setTabs]);

  useEffect(() => {
    if (initialized && !!paramId) {
      const target = seasonTicketContracts.find((ele) => {
        return ele.season_ticekt_contract_record_no === paramId;
      });
      if (target) {
        select(target);
      } else {
        select(null);
        moveToList();
      }
    }
  }, [initialized]);

  if (!initialized || seasonTicketContract === null) {
    return null;
  }
  return (
    <Box>
      <Stack spacing={2}>
        <Box>
          <Button onClick={moveToList}>戻る</Button>
        </Box>
        <Paper sx={{ p: 2 }}>
          <Typography variant="h5">契約情報</Typography>
          <Table>
            <TableBody>
              <TableRow>
                <TableCell>駐車場名</TableCell>
                <TableCell>{seasonTicketContract.parking_name}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>区画</TableCell>
                <TableCell>{seasonTicketContract.room_no}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>契約金額</TableCell>
                <TableCell>
                  {numberFormat(seasonTicketContract.contract_amount)}円
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>車両番号</TableCell>
                <TableCell>{vehcleNo}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>契約期間</TableCell>
                <TableCell>
                  {seasonTicketContract.contract_start_date}-{endDate}
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </Paper>
        <PayingPlanList />

        {seasonTicketContract.can_some_apply && (
          <>
            <Paper sx={{ p: 2 }}>
              <Typography variant="h5">各種申請</Typography>
              <Stack spacing={2} mt={2}>
                {seasonTicketContract.has_sticker && (
                  <Box>
                    <Button
                      variant="contained"
                      onClick={() => {
                        navigateWhenChanged(
                          getPath(
                            PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER
                          )
                        );
                      }}
                    >
                      シール再発行申請
                    </Button>
                  </Box>
                )}
                {seasonTicketContract.has_season_ticket && (
                  <Box>
                    <Button
                      variant="contained"
                      onClick={() => {
                        navigateWhenChanged(
                          getPath(
                            PageID.DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER
                          )
                        );
                      }}
                    >
                      定期券再発行申請
                    </Button>
                  </Box>
                )}
                {seasonTicketContract.can_parking_certificate_apply && (
                  <Box>
                    <Button
                      variant="contained"
                      onClick={() => {
                        navigateWhenChanged(
                          getPath(
                            PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER
                          )
                        );
                      }}
                    >
                      駐車証明証申請
                    </Button>
                  </Box>
                )}
                <Box>
                  <Button
                    variant="contained"
                    onClick={() => {
                      navigateWhenChanged(
                        getPath(
                          PageID.DASHBOARD_SEASON_TICKET_CONTRACT_TERMINATE_ORDER
                        )
                      );
                    }}
                  >
                    解約申請
                  </Button>
                </Box>
                <Box>
                  <Button
                    variant="contained"
                    onClick={() => {
                      navigateWhenChanged(
                        getPath(
                          PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER
                        )
                      );
                    }}
                  >
                    車両情報変更申請
                  </Button>
                </Box>
                {seasonTicketContract.can_change_plan_apply && (
                  <Box>
                    <Button
                      variant="contained"
                      onClick={() => {
                        navigateWhenChanged(
                          getPath(
                            PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PLAN
                          )
                        );
                      }}
                    >
                      プラン変更
                    </Button>
                  </Box>
                )}
              </Stack>
            </Paper>
            <Paper sx={{ p: 2 }}>
              <Typography variant="h5">各種証明証提出</Typography>
              <Stack spacing={2} mt={2}>
                <Box>
                  <Button
                    variant="contained"
                    onClick={() => {
                      navigateWhenChanged(
                        getPath(
                          PageID.DASHBOARD_USER_STUDENT_LICENSE_IMAGES_UPLOAD
                        )
                      );
                    }}
                  >
                    学生証画像アップロード
                  </Button>
                </Box>
                <Box>
                  <Button
                    variant="contained"
                    onClick={() => {
                      navigateWhenChanged(
                        getPath(
                          PageID.DASHBOARD_USER_OTHER_LICENSE_IMAGES_UPLOAD
                        )
                      );
                    }}
                  >
                    障がい者手帳画像アップロード
                  </Button>
                </Box>
              </Stack>
            </Paper>
          </>
        )}
      </Stack>
    </Box>
  );
}