支払状況対応

src/api/index.ts

@@ -15,6 +15,7 @@ export const ApiId = {
   LOGOUT: id++,
 
   SEASON_TICKET_CONTRACTS: id++,
+  PAYMENT_PLANS: id++,
 } as const;
 export type ApiId = (typeof ApiId)[keyof typeof ApiId];
 

src/api/season-ticket-contract.ts

@@ -1,4 +1,4 @@
-import { APICommonResponse, ApiId, HttpMethod, request } from "api";
+import { APICommonResponse, ApiId, HttpMethod, makeParam, request } from "api";
 import { getUrl } from "./url";
 
 export type SeasonTicketContract = {
@@ -13,6 +13,16 @@ export type SeasonTicketContract = {
   revision: number;
 };
 
+export type PaymentPlan = {
+  season_ticket_contract_record_no: string | null;
+  payment_type: string | null;
+  payment_method: string | null;
+  payment_plan_date: string | null;
+  payment_status: string | null;
+  revision: number;
+};
+
+// -------定期契約情報一覧取得---------------
 type SeasonTicketContractsResponse = {
   data: SeasonTicketContract[];
 } & APICommonResponse;
@@ -24,3 +34,21 @@ export const getSeasonTicketContracts = async () => {
   });
   return res;
 };
+
+// -------入金予定結果一覧取得------------------
+type PaymentPlansRequest = {
+  season_ticket_contract_record_no: string;
+};
+
+type PaymentPlansResponse = {
+  data: PaymentPlan[];
+} & APICommonResponse;
+
+export const getPaymentPlans = async (data: PaymentPlansRequest) => {
+  const res = await request<PaymentPlansResponse>({
+    url: getUrl(ApiId.PAYMENT_PLANS),
+    method: HttpMethod.GET,
+    data: new URLSearchParams(data),
+  });
+  return res;
+};

src/api/url.ts

@@ -7,6 +7,7 @@ const urls = {
   [A.LOGIN]: "login",
   [A.LOGOUT]: "logout",
   [A.SEASON_TICKET_CONTRACTS]: "season-ticket-contracts",
+  [A.PAYMENT_PLANS]: "season-ticket-contract/payment-plans",
 };
 
 const prefixs = {

src/pages/dashboard/contract/detail.tsx

@@ -9,11 +9,13 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
+import { PaymentPlan, getPaymentPlans } from "api/season-ticket-contract";
 import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
+import useAPICall from "hooks/useAPICall";
 import useDashboard from "hooks/useDashBoard";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import { PageID, TabID } from "pages";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { getPath } from "routes/path";
 
@@ -34,6 +36,18 @@ export default function ContractDetail() {
 
   const { navigate, navigateWhenChanged } = useNavigateCustom();
 
+  const [paymentPlans, setPaymentPlans] = useState<PaymentPlan[]>([]);
+
+  const { callAPI: callGetPaymentPlans } = useAPICall({
+    apiMethod: getPaymentPlans,
+    backDrop: true,
+    onSuccess: ({ data }) => {},
+    onFailed: () => {
+      select(null);
+      moveToList();
+    },
+  });
+
   const moveToList = () => {
     navigateWhenChanged(getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST));
   };
@@ -50,6 +64,11 @@ export default function ContractDetail() {
       });
       if (target) {
         select(target);
+
+        callGetPaymentPlans({
+          season_ticket_contract_record_no:
+            target.season_ticekt_contract_record_no ?? "",
+        });
       } else {
         select(null);
         moveToList();
@@ -92,21 +111,22 @@ export default function ContractDetail() {
           <Typography variant="h5">お支払い状況</Typography>
           <Table>
             <TableBody>
-              <TableRow>
-                <TableCell>2023/09</TableCell>
-                <TableCell>未請求</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>2023/08</TableCell>
-                <TableCell>支払済み</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>2023/07</TableCell>
-                <TableCell>支払済み</TableCell>
-              </TableRow>
+              {paymentPlans.map((ele, index) => {
+                return (
+                  <TableRow key={index}>
+                    <TableCell>{ele.payment_plan_date}</TableCell>
+                    <TableCell>{ele.payment_method}</TableCell>
+                    <TableCell>{ele.payment_status}</TableCell>
+                  </TableRow>
+                );
+              })}
+              {paymentPlans.length === 0 && (
+                <TableRow>
+                  <TableCell>データなし</TableCell>
+                </TableRow>
+              )}
             </TableBody>
           </Table>
-          <Button>更に表示</Button>
         </Paper>
         <Paper sx={{ p: 2 }}>
           <Typography variant="h5">各種申請</Typography>