シール再発行依頼 整備

src/api/season-ticket-contract.ts

@@ -63,6 +63,9 @@ export const getPaymentPlans = async (data: PaymentPlansRequest) => {
 // -------シール再発行依頼------------------
 type StickerReOrderRequest = {
   season_ticket_contract_record_no: string;
+  parking_name: string;
+  reason: string;
+  memo?: string;
 };
 export const reOrderSticker = async (data: StickerReOrderRequest) => {
   const res = await request({

src/pages/dashboard/contract/sticker-re-order.tsx

@@ -1,7 +1,20 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { yupResolver } from "@hookform/resolvers/yup";
+import {
+  Box,
+  Button,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
 import { HasChildren } from "@types";
 import { reOrderSticker } from "api/season-ticket-contract";
+import InputAlert from "components/form/InputAlert";
+import TextFieldEx from "components/form/TextFieldEx";
 import { FormProvider, RHFTextField } from "components/hook-form";
+import StackRow from "components/stack/StackRow";
 import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
 import useAPICall from "hooks/useAPICall";
 import useDashboard from "hooks/useDashBoard";
@@ -11,6 +24,7 @@ import { PageID, TabID } from "pages";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { getPath } from "routes/path";
+import { object, string } from "yup";
 
 type AreaBoxProps = {
   label: string;
@@ -25,7 +39,8 @@ function AreaBox({ label, children }: AreaBoxProps) {
 }
 
 type FormProps = {
-  upload1: File[];
+  reason: string;
+  memo: string;
 };
 
 export default function StickerReOrder() {
@@ -36,38 +51,50 @@ export default function StickerReOrder() {
 
   const form = useForm<FormProps>({
     defaultValues: {
-      upload1: [],
+      reason: "",
+      memo: "",
     },
+    resolver: yupResolver(
+      object().shape({
+        reason: string().required("入力してください"),
+      })
+    ),
   });
 
-  const { navigateWhenChanged, navigate } = useNavigateCustom();
+  const { navigateWhenChanged } = useNavigateCustom();
 
   const { error } = useSnackbarCustom();
 
   const { selectedseasonTicketContract, backToDetailHome } =
     useSeasonTicketContractContext();
 
-  const [done, setDone] = useState(false);
+  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
 
-  const { callAPI: callReOrderSticker } = useAPICall({
+  const { callAPI: callReOrderSticker, errorMode } = useAPICall({
     apiMethod: reOrderSticker,
     backDrop: true,
+    form,
     onSuccess: () => {
-      setDone(true);
+      setMode("done");
     },
     onFailed: () => {
       error("依頼失敗しました");
+      setMode("input");
     },
   });
 
-  const handleSubmit = (data: FormProps) => {
-    console.log(data);
-    return;
-    // if (selectedseasonTicketContract === null) return;
-    // callReOrderSticker({
-    //   season_ticket_contract_record_no:
-    //     selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
-    // });
+  const handleSubmit = () => {
+    setMode("confirm");
+  };
+
+  const send = () => {
+    if (selectedseasonTicketContract === null) return;
+    callReOrderSticker({
+      season_ticket_contract_record_no:
+        selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+      parking_name: selectedseasonTicketContract.parking_name ?? "",
+      ...form.getValues(),
+    });
   };
 
   useEffect(() => {
@@ -86,7 +113,7 @@ export default function StickerReOrder() {
   if (selectedseasonTicketContract === null) {
     return null;
   }
-  if (done) {
+  if (mode === "done") {
     return (
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
@@ -99,6 +126,58 @@ export default function StickerReOrder() {
     );
   }
 
+  if (mode === "confirm") {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Typography>下記内容で申請を行います。</Typography>
+          </Box>
+          <Box>
+            <Table size="small">
+              <TableBody>
+                <TableRow>
+                  <TableCell>理由</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      multiline
+                      value={form.getValues("reason")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>備考</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      multiline
+                      value={form.getValues("memo")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </Box>
+          <StackRow spacing={2}>
+            <Button
+              onClick={() => {
+                setMode("input");
+              }}
+            >
+              戻る
+            </Button>
+            <Button onClick={send} variant="contained">
+              送信
+            </Button>
+          </StackRow>
+        </Stack>
+      </Box>
+    );
+  }
+
   return (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Box sx={{ mt: 1 }}>
@@ -107,6 +186,8 @@ export default function StickerReOrder() {
             <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
 
+          <InputAlert error={errorMode} />
+
           <AreaBox label="申請理由">
             <RHFTextField
               name="reason"
@@ -116,6 +197,15 @@ export default function StickerReOrder() {
               maxRows={10}
             />
           </AreaBox>
+          <AreaBox label="備考">
+            <RHFTextField
+              name="memo"
+              size="small"
+              multiline
+              minRows={3}
+              maxRows={10}
+            />
+          </AreaBox>
 
           <Box>
             <Button variant="contained" type="submit">