申請 整備

src/api/season-ticket-contract.ts

@@ -95,6 +95,17 @@ export const reOrderSeasonTicket = async (data: SeasonTicketReOrderRequest) => {
 // -------車庫証明発行依頼------------------
 type ParkingCertificateOrderRequest = {
   season_ticket_contract_record_no: string;
+  parking_name: string;
+  name: string;
+  zip_code: string;
+  address: string;
+  phone_no: string;
+  vehicle_no: string;
+  chassis_no: string;
+  paying_method: string;
+  mail_name: string;
+  mail_zip_code: string;
+  mail_address: string;
   memo?: string;
 };
 export const orderParkingCertificate = async (

src/components/form/InputAlert.tsx

@@ -31,7 +31,7 @@ const InputAlert = ({
         return m;
       }
     }
-    if (!!formState && formState.isSubmitted && !formState.isValid)
+    if (!!formState && Object.keys(formState.errors).length !== 0)
       return "入力項目を確認してください。";
     if (error === APIErrorType.INPUT) return "入力項目を確認してください。";
     if (error === APIErrorType.SERVER)
@@ -50,7 +50,7 @@ const InputAlert = ({
     }
   }, [error, ref]);
 
-  if (message === "" && error === APIErrorType.NONE) return null;
+  if (message === "") return null;
   return (
     <Alert severity="error" sx={sx} ref={ref}>
       {message}

src/layouts/dashbord/navigator.tsx

@@ -86,11 +86,11 @@ export default function Navigator(props: DrawerProps) {
           icon: <ArticleIcon />,
           id: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_ENTRY,
         },
-        {
-          label: "領収証ダウンロード",
-          icon: <ArticleIcon />,
-          id: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
-        },
+        // {
+        //   label: "領収証ダウンロード",
+        //   icon: <ArticleIcon />,
+        //   id: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
+        // },
         {
           label: "問い合わせ",
           icon: <InfoIcon />,

src/pages/dashboard/contract/parking-certificate-order.tsx

@@ -1,31 +1,33 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
-import { HasChildren } from "@types";
+import { yupResolver } from "@hookform/resolvers/yup";
 import {
-  getSeasonTicketContractTerminateOptions,
-  orderParkingCertificate,
-  orderSeasonTicketContractTerminate,
-  reOrderSticker,
-} from "api/season-ticket-contract";
+  Box,
+  Button,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import { HasChildren } from "@types";
+import { orderParkingCertificate } from "api/season-ticket-contract";
 import RequireChip from "components/chip/RequireChip";
-import {
-  FormProvider,
-  RHFCheckbox,
-  RHFMultiCheckbox,
-  RHFSelect,
-  RHFTextField,
-} from "components/hook-form";
-import RHFDatePicker from "components/hook-form/RHFDatePicker";
+import InputAlert from "components/form/InputAlert";
+import TextFieldEx from "components/form/TextFieldEx";
+import { FormProvider, RHFSelect, RHFTextField } from "components/hook-form";
 import { SelectOptionProps } from "components/hook-form/RHFSelect";
 import StackRow from "components/stack/StackRow";
 import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
 import useAPICall from "hooks/useAPICall";
+import useAuth from "hooks/useAuth";
 import useDashboard from "hooks/useDashBoard";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import useSnackbarCustom from "hooks/useSnackbarCustom";
 import { PageID, TabID } from "pages";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-import { getPath } from "routes/path";
+import { scrollToTop } from "utils/page";
+import { object, string } from "yup";
 
 type AreaBoxProps = {
   label: string;
@@ -44,7 +46,7 @@ function AreaBox({ label, children, require }: AreaBoxProps) {
 }
 
 type FormProps = {
-  paying_type: string;
+  paying_method: string;
 
   name: string;
   zip_code: string;
@@ -57,8 +59,6 @@ type FormProps = {
   mail_zip_code: string;
   mail_address: string;
   memo: string;
-
-  is_same_mail_to: "" | "same" | "deferent";
 };
 
 export default function ParkingCertificateOrder() {
@@ -67,9 +67,11 @@ export default function ParkingCertificateOrder() {
     TabID.NONE
   );
 
+  const { user } = useAuth();
+
   const form = useForm<FormProps>({
     defaultValues: {
-      paying_type: "",
+      paying_method: "",
       name: "",
       zip_code: "",
       address: "",
@@ -80,12 +82,41 @@ export default function ParkingCertificateOrder() {
       mail_zip_code: "",
       mail_address: "",
       memo: "",
-      is_same_mail_to: "",
     },
+    resolver: yupResolver(
+      object().shape({
+        paying_method: string().required("入力してください"),
+        name: string().required("入力してください"),
+        zip_code: string()
+          .required("入力してください")
+          .matches(/^\d{3}-\d{4}$/, {
+            message: "ハイフン付の形式で入力してください",
+          }),
+        phone_no: string()
+          .required("入力してください")
+          .matches(/^\d+$/, { message: "ハイフンなしで入力してください" }),
+        mail_name: string().required("入力してください"),
+        vehicle_no: string().required("入力してください"),
+        chassis_no: string().test(
+          "関連チェック",
+          "入力してください",
+          function (value) {
+            if (this.parent.vehicle_no === "不明") {
+              return !!value;
+            }
+            return true;
+          }
+        ),
+        mail_zip_code: string()
+          .required("入力してください")
+          .matches(/^\d{3}-\d{4}$/, {
+            message: "ハイフン付の形式で入力してください",
+          }),
+        mail_address: string().required("入力してください"),
+      })
+    ),
   });
 
-  const isSameMailTo = form.watch("is_same_mail_to");
-
   const { navigateWhenChanged, navigate } = useNavigateCustom();
 
   const { error } = useSnackbarCustom();
@@ -93,26 +124,30 @@ export default function ParkingCertificateOrder() {
   const { selectedseasonTicketContract, backToDetailHome } =
     useSeasonTicketContractContext();
 
-  const [done, setDone] = useState(false);
+  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
 
   const { callAPI: callOrderParkingCertificate } = useAPICall({
     apiMethod: orderParkingCertificate,
     backDrop: true,
     form,
     onSuccess: () => {
-      setDone(true);
+      setMode("done");
     },
     onFailed: () => {
       error("失敗しました");
+      setMode("input");
     },
   });
-
-  const handleSubmit = (data: FormProps) => {
-    console.log(data);
+  const handleSubmit = () => {
+    setMode("confirm");
+  };
+  const send = () => {
+    if (selectedseasonTicketContract === null) return;
     callOrderParkingCertificate({
+      ...form.getValues(),
       season_ticket_contract_record_no:
         selectedseasonTicketContract?.season_ticekt_contract_record_no ?? "",
-      ...data,
+      parking_name: selectedseasonTicketContract.parking_name ?? "",
     });
   };
 
@@ -124,26 +159,33 @@ export default function ParkingCertificateOrder() {
       };
     });
   }, []);
-  const mailAddresses: SelectOptionProps[] = useMemo(() => {
-    return [
-      { label: "契約者住所と同一", value: "same" },
-      { label: "契約者住所と異なる", value: "deferent" },
-    ];
-  }, []);
-
-  const showMailAddress = useMemo(() => {
-    return isSameMailTo === "deferent";
-  }, [isSameMailTo]);
 
   useEffect(() => {
     setHeaderTitle("車庫証明発行申請");
     setTabs(null);
   }, [setHeaderTitle, setTabs]);
 
+  useEffect(() => {
+    if (selectedseasonTicketContract && user) {
+      form.setValue("name", user.customer_name);
+      form.setValue("zip_code", user.zip_code);
+      form.setValue("address", user.address);
+      form.setValue(
+        "vehicle_no",
+        selectedseasonTicketContract.vehicle_no ?? ""
+      );
+      form.setValue("mail_name", user.customer_name);
+      form.setValue("mail_zip_code", user.zip_code);
+      form.setValue("mail_address", user.address);
+    } else {
+      backToDetailHome();
+    }
+  }, [selectedseasonTicketContract, user]);
+
   if (selectedseasonTicketContract === null) {
     return null;
   }
-  if (done) {
+  if (mode === "done") {
     return (
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
@@ -156,13 +198,177 @@ export default function ParkingCertificateOrder() {
     );
   }
 
+  if (mode === "confirm") {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Typography>下記内容で申請を行います。</Typography>
+          </Box>
+          <Box>
+            <Table size="small">
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={2}>
+                    <Box textAlign="center">--- 車庫証明記載内容 ---</Box>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>氏名</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("name")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>郵便番号</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("zip_code")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>住所</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("address")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>電話番号</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("phone_no")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>車両番号</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("vehicle_no")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>車体番号</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("chassis_no")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+
+                <TableRow>
+                  <TableCell colSpan={2}>
+                    <Box textAlign="center">--- 郵送先 ---</Box>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>郵送先　宛名</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("mail_name")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>郵送先　郵便番号</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("mail_zip_code")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>郵送先　住所</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("mail_address")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={2}>
+                    <Box textAlign="center">--- その他 ---</Box>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>お支払い方法</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("paying_method")}
+                      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)}>
+    <FormProvider
+      methods={form}
+      onSubmit={form.handleSubmit(handleSubmit, (ee) => {
+        console.log(ee);
+        scrollToTop();
+      })}
+    >
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
           <Box>
             <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
+          <InputAlert formState={form.formState} />
           <Box>
             <Typography variant="h6">車庫証明証記載内容</Typography>
             <Typography variant="body2">
@@ -197,34 +403,26 @@ export default function ParkingCertificateOrder() {
             </Typography>
             <RHFTextField name="chassis_no" placeholder="例：MXPBXX-200XXXX" />
           </AreaBox>
+
+          <AreaBox label="郵送先　宛名" require>
+            <RHFTextField name="mail_name" />
+          </AreaBox>
+          <AreaBox label="郵送先　郵便番号" require>
+            <RHFTextField name="mail_zip_code" />
+          </AreaBox>
+          <AreaBox label="郵送先　住所" require>
+            <RHFTextField name="mail_address" />
+          </AreaBox>
           <AreaBox label="お支払方法" require>
             <Typography variant="body2">
               車庫証明書の発行には3,000円(税込)が必要となります。お支払い方法をお選びください。※「口座引落」は現在定期利用料金を口座引落でお支払いいただいている場合もしくは口座引落でお支払い予定の場合のみご選択ください。
             </Typography>
-            <RHFSelect name="paying_type" options={payingTypes} size="small" />
-          </AreaBox>
-          <AreaBox label="郵送先について" require>
-            <Typography variant="body2">郵送先を選択してください</Typography>
             <RHFSelect
-              name="is_same_mail_to"
-              options={mailAddresses}
+              name="paying_method"
+              options={payingTypes}
               size="small"
             />
           </AreaBox>
-          {showMailAddress && (
-            <>
-              <AreaBox label="郵送先　宛名" require>
-                <RHFTextField name="mail_name" />
-              </AreaBox>
-              <AreaBox label="郵送先　郵便番号" require>
-                <Typography variant="body2">ハイフンなし</Typography>
-                <RHFTextField name="mail_zip_code" />
-              </AreaBox>
-              <AreaBox label="郵送先　住所" require>
-                <RHFTextField name="mail_address" />
-              </AreaBox>
-            </>
-          )}
           <AreaBox label="備考">
             <Typography variant="body2">
               ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。
@@ -240,7 +438,7 @@ export default function ParkingCertificateOrder() {
 
           <Box>
             <Button variant="contained" type="submit">
-              確定
+              次へ
             </Button>
           </Box>
         </Stack>

src/pages/dashboard/contract/season-ticket-re-order.tsx

@@ -208,7 +208,7 @@ export default function SeasonTicketReOrder() {
 
           <Box>
             <Button variant="contained" type="submit">
-              確定
+              次へ
             </Button>
           </Box>
         </Stack>

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

@@ -209,7 +209,7 @@ export default function StickerReOrder() {
 
           <Box>
             <Button variant="contained" type="submit">
-              確定
+              次へ
             </Button>
           </Box>
         </Stack>

src/pages/dashboard/contract/terminate-order.tsx

@@ -358,7 +358,7 @@ export default function TerminateOrder() {
 
           <Box>
             <Button variant="contained" type="submit">
-              確定
+              次へ
             </Button>
           </Box>
         </Stack>

src/pages/dashboard/contract/update-vehicle-info-order.tsx

@@ -244,7 +244,7 @@ export default function UpdateVehicleInfoOrder() {
 
           <Box>
             <Button variant="contained" type="submit">
-              確定
+              次へ
             </Button>
           </Box>
         </Stack>