各種画面遷移 整備

src/contexts/dashboard/SeasonTicketContractContext.tsx

@@ -5,6 +5,8 @@ import {
 } from "api/season-ticket-contract";
 import useAPICall from "hooks/useAPICall";
 import useAuth from "hooks/useAuth";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import { PageID } from "pages";
 import {
   createContext,
   useContext,
@@ -12,6 +14,7 @@ import {
   useLayoutEffect,
   useState,
 } from "react";
+import { getPath } from "routes/path";
 
 type ContextProps = {
   initialized: boolean;
@@ -20,6 +23,7 @@ type ContextProps = {
 
   fetch: VoidFunction;
   select: (target: SeasonTicketContract | null) => void;
+  backToDetailHome: VoidFunction;
 };
 export const SeasonTicketContractContext = createContext<ContextProps>({
   initialized: false,
@@ -28,11 +32,13 @@ export const SeasonTicketContractContext = createContext<ContextProps>({
 
   fetch: () => {},
   select: (target: SeasonTicketContract | null) => {},
+  backToDetailHome: () => {},
 });
 
 type Props = HasChildren;
 export function SeasonTicketContractContextProvider({ children }: Props) {
   const { initialized, authenticated } = useAuth();
+  const { navigateWhenChanged } = useNavigateCustom();
   const [fetchInitialized, setFetchInitialized] = useState(false);
 
   const [seasonTicketContracts, setSeasonTicketContracts] = useState<
@@ -58,6 +64,17 @@ export function SeasonTicketContractContextProvider({ children }: Props) {
     callGetSeasonTicketContracts({});
   };
 
+  const backToDetailHome = () => {
+    const id = selectedseasonTicketContract?.season_ticekt_contract_record_no;
+    if (id) {
+      navigateWhenChanged(
+        getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL, {
+          query: { id },
+        })
+      );
+    }
+  };
+
   useEffect(() => {
     if (authenticated) {
       fetch();
@@ -72,6 +89,7 @@ export function SeasonTicketContractContextProvider({ children }: Props) {
         selectedseasonTicketContract,
         fetch,
         select: setSelectedseasonTicketContract,
+        backToDetailHome,
       }}
     >
       {children}

src/pages/dashboard/contract/change-paying-interval-order.tsx

@@ -0,0 +1,119 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { HasChildren } from "@types";
+import { reOrderSticker } from "api/season-ticket-contract";
+import { FormProvider, RHFTextField } from "components/hook-form";
+import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
+import useAPICall from "hooks/useAPICall";
+import useDashboard from "hooks/useDashBoard";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { PageID, TabID } from "pages";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getPath } from "routes/path";
+
+type AreaBoxProps = {
+  label: string;
+} & HasChildren;
+function AreaBox({ label, children }: AreaBoxProps) {
+  return (
+    <Box>
+      <Typography variant="body2">{label}</Typography>
+      {children}
+    </Box>
+  );
+}
+
+type FormProps = {
+  upload1: File[];
+};
+
+export default function ChangePayingIntervalOrder() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER,
+    TabID.NONE
+  );
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      upload1: [],
+    },
+  });
+
+  const { navigateWhenChanged, navigate } = useNavigateCustom();
+
+  const { error } = useSnackbarCustom();
+
+  const { selectedseasonTicketContract, backToDetailHome } =
+    useSeasonTicketContractContext();
+
+  const [done, setDone] = useState(false);
+
+  const { callAPI: callReOrderSticker } = useAPICall({
+    apiMethod: reOrderSticker,
+    backDrop: true,
+    onSuccess: () => {
+      setDone(true);
+    },
+    onFailed: () => {
+      error("依頼失敗しました");
+    },
+  });
+
+  const handleSubmit = (data: FormProps) => {
+    console.log(data);
+    return;
+    // if (selectedseasonTicketContract === null) return;
+    // callReOrderSticker({
+    //   season_ticket_contract_record_no:
+    //     selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+    // });
+  };
+
+  useEffect(() => {
+    setHeaderTitle("振替頻度変更申請");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  useEffect(() => {
+    if (selectedseasonTicketContract === null) {
+      navigateWhenChanged(
+        getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
+      );
+    }
+  }, [selectedseasonTicketContract]);
+
+  if (selectedseasonTicketContract === null) {
+    return null;
+  }
+  if (done) {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>依頼しました</Box>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+
+          <Box>
+            <Button variant="contained" type="submit">
+              確定
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+    </FormProvider>
+  );
+}

src/pages/dashboard/contract/component/PayingPlanList.tsx

@@ -0,0 +1,78 @@
+import {
+  Button,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  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 { useEffect, useState } from "react";
+
+export type PayingPlanListProps = {};
+export default function PayingPlanList({}: PayingPlanListProps) {
+  const [paymentPlans, setPaymentPlans] = useState<PaymentPlan[]>([]);
+  const [maxRowCount, setMaxRowCount] = useState(3);
+
+  const { selectedseasonTicketContract } = useSeasonTicketContractContext();
+
+  const { callAPI: callGetPaymentPlans, sending } = useAPICall({
+    apiMethod: getPaymentPlans,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      setPaymentPlans(data);
+    },
+    onFailed: () => {},
+  });
+
+  const moreRead = () => {
+    setMaxRowCount(maxRowCount + 5);
+  };
+
+  useEffect(() => {
+    if (selectedseasonTicketContract) {
+      callGetPaymentPlans({
+        season_ticket_contract_record_no:
+          selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+      });
+    }
+  }, [selectedseasonTicketContract]);
+
+  if (sending) {
+    return null;
+  }
+
+  return (
+    <Paper sx={{ p: 2 }}>
+      <Typography variant="h5">お支払い状況</Typography>
+      <Table>
+        <TableBody>
+          {paymentPlans
+            .filter((ele, index) => {
+              return index <= maxRowCount;
+            })
+            .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>
+      {maxRowCount < paymentPlans.length && (
+        <Button onClick={moreRead}>更に読込</Button>
+      )}
+    </Paper>
+  );
+}

src/pages/dashboard/contract/detail.tsx

@@ -19,6 +19,7 @@ import { useEffect, useMemo, useState } 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(
@@ -37,20 +38,6 @@ export default function ContractDetail() {
 
   const { navigate, navigateWhenChanged } = useNavigateCustom();
 
-  const [paymentPlans, setPaymentPlans] = useState<PaymentPlan[]>([]);
-
-  const { callAPI: callGetPaymentPlans } = useAPICall({
-    apiMethod: getPaymentPlans,
-    backDrop: true,
-    onSuccess: ({ data }) => {
-      setPaymentPlans(data);
-    },
-    onFailed: () => {
-      select(null);
-      moveToList();
-    },
-  });
-
   const moveToList = () => {
     navigateWhenChanged(getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST));
   };
@@ -88,11 +75,6 @@ export default function ContractDetail() {
       });
       if (target) {
         select(target);
-
-        callGetPaymentPlans({
-          season_ticket_contract_record_no:
-            target.season_ticekt_contract_record_no ?? "",
-        });
       } else {
         select(null);
         moveToList();
@@ -140,27 +122,7 @@ export default function ContractDetail() {
             </TableBody>
           </Table>
         </Paper>
-        <Paper sx={{ p: 2 }}>
-          <Typography variant="h5">お支払い状況</Typography>
-          <Table>
-            <TableBody>
-              {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>
-        </Paper>
+        <PayingPlanList />
         <Paper sx={{ p: 2 }}>
           <Typography variant="h5">各種申請</Typography>
           <Stack spacing={2} mt={2}>
@@ -179,7 +141,32 @@ export default function ContractDetail() {
               </Button>
             </Box>
             <Box>
-              <Button variant="contained">駐車証明証申請</Button>
+              <Button
+                variant="contained"
+                onClick={() => {
+                  navigateWhenChanged(
+                    getPath(
+                      PageID.DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER
+                    )
+                  );
+                }}
+              >
+                定期券再発行申請
+              </Button>
+            </Box>
+            <Box>
+              <Button
+                variant="contained"
+                onClick={() => {
+                  navigateWhenChanged(
+                    getPath(
+                      PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER
+                    )
+                  );
+                }}
+              >
+                駐車証明証申請
+              </Button>
             </Box>
             <Box>
               <Button
@@ -196,7 +183,32 @@ export default function ContractDetail() {
               </Button>
             </Box>
             <Box>
-              <Button variant="contained">車両情報変更申請</Button>
+              <Button
+                variant="contained"
+                onClick={() => {
+                  navigateWhenChanged(
+                    getPath(
+                      PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER
+                    )
+                  );
+                }}
+              >
+                車両情報変更申請
+              </Button>
+            </Box>
+            <Box>
+              <Button
+                variant="contained"
+                onClick={() => {
+                  navigateWhenChanged(
+                    getPath(
+                      PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER
+                    )
+                  );
+                }}
+              >
+                振替頻度変更申請
+              </Button>
             </Box>
             <Box>
               <Button

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

@@ -0,0 +1,234 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { HasChildren } from "@types";
+import {
+  getSeasonTicketContractTerminateOptions,
+  orderSeasonTicketContractTerminate,
+  reOrderSticker,
+} 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 { SelectOptionProps } from "components/hook-form/RHFSelect";
+import StackRow from "components/stack/StackRow";
+import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
+import useAPICall from "hooks/useAPICall";
+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";
+
+type AreaBoxProps = {
+  label: string;
+  require?: boolean;
+} & HasChildren;
+function AreaBox({ label, children, require }: AreaBoxProps) {
+  return (
+    <Box>
+      <StackRow>
+        <Typography variant="subtitle1">〇{label}</Typography>
+        <RequireChip require={require ?? false} />
+      </StackRow>
+      {children}
+    </Box>
+  );
+}
+
+type FormProps = {
+  paying_type: string;
+
+  name: string;
+  zip_code: string;
+  address: string;
+  phone_no: string;
+  vehicle_no: string;
+  chassis_no: string;
+
+  mail_name: string;
+  mail_zip_code: string;
+  mail_address: string;
+  memo: string;
+
+  is_same_mail_to: "" | "same" | "deferent";
+};
+
+export default function ParkingCertificateOrder() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER,
+    TabID.NONE
+  );
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      paying_type: "",
+      name: "",
+      zip_code: "",
+      address: "",
+      phone_no: "",
+      vehicle_no: "",
+      chassis_no: "",
+      mail_name: "",
+      mail_zip_code: "",
+      mail_address: "",
+      memo: "",
+      is_same_mail_to: "",
+    },
+  });
+
+  const isSameMailTo = form.watch("is_same_mail_to");
+
+  const { navigateWhenChanged, navigate } = useNavigateCustom();
+
+  const { error } = useSnackbarCustom();
+
+  const { selectedseasonTicketContract, backToDetailHome } =
+    useSeasonTicketContractContext();
+
+  const [monthes, setMonthes] = useState<string[]>([]);
+
+  const [done, setDone] = useState(false);
+
+  const handleSubmit = (data: FormProps) => {
+    console.log(data);
+  };
+
+  const payingTypes: SelectOptionProps[] = useMemo(() => {
+    return ["口座引落", "お振込"].map((ele) => {
+      return {
+        label: ele,
+        value: ele,
+      };
+    });
+  }, []);
+  const mailAddresses: SelectOptionProps[] = useMemo(() => {
+    return [
+      { label: "契約者住所と同一", value: "same" },
+      { label: "契約者住所と異なる", value: "deferent" },
+    ];
+  }, []);
+
+  const showMailAddress = useMemo(() => {
+    return isSameMailTo === "deferent";
+  }, [isSameMailTo]);
+
+  useEffect(() => {
+    setHeaderTitle("車庫証明発行申請");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  if (selectedseasonTicketContract === null) {
+    return null;
+  }
+  if (done) {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>依頼しました</Box>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+          <Box>
+            <Typography variant="h6">車庫証明証記載内容</Typography>
+            <Typography variant="body2">
+              車庫証明書に記載する氏名等をご記入ください。
+            </Typography>
+          </Box>
+          <AreaBox label="氏名" require>
+            <RHFTextField name="name" />
+          </AreaBox>
+          <AreaBox label="郵便番号" require>
+            <RHFTextField name="zip_code" />
+          </AreaBox>
+          <AreaBox label="住所" require>
+            <RHFTextField name="address" />
+          </AreaBox>
+          <AreaBox label="電話番号" require>
+            <Typography variant="body2">ハイフンなし</Typography>
+            <RHFTextField name="phone_no" />
+          </AreaBox>
+          <AreaBox label="車両番号" require>
+            <Typography variant="body2">
+              申請されるお車の車両番号または車台番号をご記入ください。新車ご購入時などナンバープレート未交付の場合、「不明」と入力し下記の車台番号を入力してください。
+            </Typography>
+            <RHFTextField
+              name="vehicle_no"
+              placeholder="例：京都 300 あ 3456"
+            />
+          </AreaBox>
+          <AreaBox label="車台番号">
+            <Typography variant="body2">
+              車両番号が不明の場合のみ入力が必要です。
+            </Typography>
+            <RHFTextField name="chassis_no" placeholder="例：MXPBXX-200XXXX" />
+          </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}
+              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">
+              ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。
+            </Typography>
+            <RHFTextField
+              name="memo"
+              size="small"
+              multiline
+              minRows={3}
+              maxRows={10}
+            />
+          </AreaBox>
+
+          <Box>
+            <Button variant="contained" type="submit">
+              確定
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+    </FormProvider>
+  );
+}

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

@@ -0,0 +1,129 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { HasChildren } from "@types";
+import { reOrderSticker } from "api/season-ticket-contract";
+import { FormProvider, RHFTextField } from "components/hook-form";
+import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
+import useAPICall from "hooks/useAPICall";
+import useDashboard from "hooks/useDashBoard";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { PageID, TabID } from "pages";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getPath } from "routes/path";
+
+type AreaBoxProps = {
+  label: string;
+} & HasChildren;
+function AreaBox({ label, children }: AreaBoxProps) {
+  return (
+    <Box>
+      <Typography variant="body2">{label}</Typography>
+      {children}
+    </Box>
+  );
+}
+
+type FormProps = {
+  upload1: File[];
+};
+
+export default function SeasonTicketReOrder() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER,
+    TabID.NONE
+  );
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      upload1: [],
+    },
+  });
+
+  const { navigateWhenChanged, navigate } = useNavigateCustom();
+
+  const { error } = useSnackbarCustom();
+
+  const { selectedseasonTicketContract, backToDetailHome, initialized } =
+    useSeasonTicketContractContext();
+
+  const [done, setDone] = useState(false);
+
+  const { callAPI: callReOrderSticker } = useAPICall({
+    apiMethod: reOrderSticker,
+    backDrop: true,
+    onSuccess: () => {
+      setDone(true);
+    },
+    onFailed: () => {
+      error("依頼失敗しました");
+    },
+  });
+
+  const handleSubmit = (data: FormProps) => {
+    console.log(data);
+    return;
+    // if (selectedseasonTicketContract === null) return;
+    // callReOrderSticker({
+    //   season_ticket_contract_record_no:
+    //     selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+    // });
+  };
+
+  useEffect(() => {
+    setHeaderTitle("定期券再発行申請");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  useEffect(() => {
+    if (initialized && selectedseasonTicketContract === null) {
+      navigateWhenChanged(
+        getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
+      );
+    }
+  }, [selectedseasonTicketContract, initialized]);
+
+  if (selectedseasonTicketContract === null) {
+    return null;
+  }
+  if (done) {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>依頼しました</Box>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+
+          <AreaBox label="申請理由">
+            <RHFTextField
+              name="reason"
+              size="small"
+              multiline
+              minRows={3}
+              maxRows={10}
+            />
+          </AreaBox>
+
+          <Box>
+            <Button variant="contained" type="submit">
+              確定
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+    </FormProvider>
+  );
+}

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

@@ -44,7 +44,8 @@ export default function StickerReOrder() {
 
   const { error } = useSnackbarCustom();
 
-  const { selectedseasonTicketContract } = useSeasonTicketContractContext();
+  const { selectedseasonTicketContract, backToDetailHome } =
+    useSeasonTicketContractContext();
 
   const [done, setDone] = useState(false);
 
@@ -91,13 +92,7 @@ export default function StickerReOrder() {
         <Stack spacing={2}>
           <Box>依頼しました</Box>
           <Box>
-            <Button
-              onClick={() => {
-                navigate(-1);
-              }}
-            >
-              戻る
-            </Button>
+            <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
         </Stack>
       </Box>
@@ -109,13 +104,7 @@ export default function StickerReOrder() {
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
           <Box>
-            <Button
-              onClick={() => {
-                navigate(-1);
-              }}
-            >
-              戻る
-            </Button>
+            <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
 
           <AreaBox label="申請理由">

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

@@ -70,7 +70,8 @@ export default function TerminateOrder() {
 
   const { error } = useSnackbarCustom();
 
-  const { selectedseasonTicketContract } = useSeasonTicketContractContext();
+  const { selectedseasonTicketContract, backToDetailHome } =
+    useSeasonTicketContractContext();
 
   const [monthes, setMonthes] = useState<string[]>([]);
 
@@ -158,13 +159,7 @@ export default function TerminateOrder() {
         <Stack spacing={2}>
           <Box>依頼しました</Box>
           <Box>
-            <Button
-              onClick={() => {
-                navigate(-1);
-              }}
-            >
-              戻る
-            </Button>
+            <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
         </Stack>
       </Box>
@@ -176,13 +171,7 @@ export default function TerminateOrder() {
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
           <Box>
-            <Button
-              onClick={() => {
-                navigate(-1);
-              }}
-            >
-              戻る
-            </Button>
+            <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
 
           <AreaBox label="解約希望日" require>

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

@@ -0,0 +1,126 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { HasChildren } from "@types";
+import { reOrderSticker } from "api/season-ticket-contract";
+import { FormProvider, RHFTextField } from "components/hook-form";
+import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
+import useAPICall from "hooks/useAPICall";
+import useDashboard from "hooks/useDashBoard";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { PageID, TabID } from "pages";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getPath } from "routes/path";
+
+type AreaBoxProps = {
+  label: string;
+} & HasChildren;
+function AreaBox({ label, children }: AreaBoxProps) {
+  return (
+    <Box>
+      <Typography variant="body2">{label}</Typography>
+      {children}
+    </Box>
+  );
+}
+
+type FormProps = {
+  upload1: File[];
+};
+
+export default function UpdateVehicleInfoOrder() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER,
+    TabID.NONE
+  );
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      upload1: [],
+    },
+  });
+
+  const { navigateWhenChanged, navigate } = useNavigateCustom();
+
+  const { error } = useSnackbarCustom();
+
+  const { selectedseasonTicketContract, backToDetailHome } =
+    useSeasonTicketContractContext();
+
+  const [done, setDone] = useState(false);
+
+  const { callAPI: callReOrderSticker } = useAPICall({
+    apiMethod: reOrderSticker,
+    backDrop: true,
+    onSuccess: () => {
+      setDone(true);
+    },
+    onFailed: () => {
+      error("依頼失敗しました");
+    },
+  });
+
+  const handleSubmit = (data: FormProps) => {
+    console.log(data);
+    return;
+    // if (selectedseasonTicketContract === null) return;
+    // callReOrderSticker({
+    //   season_ticket_contract_record_no:
+    //     selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+    // });
+  };
+
+  useEffect(() => {
+    setHeaderTitle("車両情報変更申請");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  useEffect(() => {
+    if (selectedseasonTicketContract === null) {
+      navigateWhenChanged(
+        getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
+      );
+    }
+  }, [selectedseasonTicketContract]);
+
+  if (selectedseasonTicketContract === null) {
+    return null;
+  }
+  if (done) {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>依頼しました</Box>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+
+          <AreaBox label="車両番号">
+            <RHFTextField name="vehicle_no" />
+          </AreaBox>
+          <AreaBox label="車体番号">
+            <RHFTextField name="chassis_no" />
+          </AreaBox>
+
+          <Box>
+            <Button variant="contained" type="submit">
+              確定
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+    </FormProvider>
+  );
+}

src/pages/dashboard/contract/upload-other-license-images.tsx

@@ -48,7 +48,7 @@ export default function OtherLicenseImagesUpload() {
   );
 
   const { navigateWhenChanged, navigate } = useNavigateCustom();
-  const { selectedseasonTicketContract, initialized } =
+  const { selectedseasonTicketContract, initialized, backToDetailHome } =
     useSeasonTicketContractContext();
 
   const [done, setDone] = useState(false);
@@ -129,13 +129,7 @@ export default function OtherLicenseImagesUpload() {
       <Stack spacing={2}>
         <Box>アップロードしました</Box>
         <Box>
-          <Button
-            onClick={() => {
-              navigate(-1);
-            }}
-          >
-            戻る
-          </Button>
+          <Button onClick={backToDetailHome}>戻る</Button>
         </Box>
       </Stack>
     );
@@ -145,13 +139,7 @@ export default function OtherLicenseImagesUpload() {
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2}>
         <Box>
-          <Button
-            onClick={() => {
-              navigate(-1);
-            }}
-          >
-            戻る
-          </Button>
+          <Button onClick={backToDetailHome}>戻る</Button>
         </Box>
         <AreaBox label="前回アップロード日時">
           <Typography>

src/pages/dashboard/contract/upload-student-license-images.tsx

@@ -45,7 +45,7 @@ export default function StudentLicenseImagesUpload() {
   );
 
   const { navigateWhenChanged, navigate } = useNavigateCustom();
-  const { selectedseasonTicketContract, initialized } =
+  const { selectedseasonTicketContract, initialized, backToDetailHome } =
     useSeasonTicketContractContext();
 
   const [done, setDone] = useState(false);
@@ -126,13 +126,7 @@ export default function StudentLicenseImagesUpload() {
       <Stack spacing={2}>
         <Box>アップロードしました</Box>
         <Box>
-          <Button
-            onClick={() => {
-              navigate(-1);
-            }}
-          >
-            戻る
-          </Button>
+          <Button onClick={backToDetailHome}>戻る</Button>
         </Box>
       </Stack>
     );
@@ -142,13 +136,7 @@ export default function StudentLicenseImagesUpload() {
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2}>
         <Box>
-          <Button
-            onClick={() => {
-              navigate(-1);
-            }}
-          >
-            戻る
-          </Button>
+          <Button onClick={backToDetailHome}>戻る</Button>
         </Box>
         <AreaBox label="前回アップロード日時">
           <Typography>

src/pages/dashboard/user/change-email-start.tsx

@@ -9,10 +9,12 @@ import StackRow from "components/stack/StackRow";
 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, useState } from "react";
 import { useForm } from "react-hook-form";
+import { getPath } from "routes/path";
 import * as Yup from "yup";
 
 type AreaBoxProps = {
@@ -43,6 +45,7 @@ export default function ChangeEmailStart() {
   );
 
   const { user } = useAuth();
+  const { navigateWhenChanged } = useNavigateCustom();
 
   const [done, setDone] = useState(false);
   const { error } = useSnackbarCustom();
@@ -100,6 +103,15 @@ export default function ChangeEmailStart() {
   return (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2}>
+        <Box>
+          <Button
+            onClick={() => {
+              navigateWhenChanged(getPath(PageID.DASHBOARD_USER_DETAIL));
+            }}
+          >
+            戻る
+          </Button>
+        </Box>
         <InputAlert error={errorMode} message={generalErrorMessage} />
         <AreaBox label="新規Email" require={true}>
           <RHFTextField name="new_email" />

src/pages/dashboard/user/detail.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack } from "@mui/material";
+import { Box, Button, Paper, Stack, Typography } from "@mui/material";
 import useDashboard from "hooks/useDashBoard";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import { PageID, TabID } from "pages";
@@ -19,18 +19,37 @@ export default function UserDetail() {
   }, []);
 
   return (
-    <Stack>
-      <Button>ユーザー情報変更</Button>
-      <Button
-        onClick={() => {
-          navigateWhenChanged(
-            getPath(PageID.DASHBOARD_USER_CHANGE_EMAIL_START)
-          );
-        }}
-      >
-        Email変更
-      </Button>
-      <Button>口座情報変更</Button>
-    </Stack>
+    <Paper sx={{ p: 2 }}>
+      <Typography variant="h5">各種申請</Typography>
+      <Stack spacing={2} mt={2}>
+        <Box>
+          <Button
+            variant="contained"
+            onClick={() => {
+              navigateWhenChanged(
+                getPath(PageID.DASHBOARD_USER_UPDATE_USER_INFO)
+              );
+            }}
+          >
+            ユーザー情報変更
+          </Button>
+        </Box>
+        <Box>
+          <Button
+            variant="contained"
+            onClick={() => {
+              navigateWhenChanged(
+                getPath(PageID.DASHBOARD_USER_CHANGE_EMAIL_START)
+              );
+            }}
+          >
+            Email変更
+          </Button>
+        </Box>
+        <Box>
+          <Button variant="contained">口座情報変更</Button>
+        </Box>
+      </Stack>
+    </Paper>
   );
 }

src/pages/dashboard/user/update-user-info.tsx

@@ -0,0 +1,138 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { HasChildren } from "@types";
+import { startChangeEmail } from "api/customer";
+import RequireChip from "components/chip/RequireChip";
+import InputAlert from "components/form/InputAlert";
+import { FormProvider, RHFTextField } from "components/hook-form";
+import StackRow from "components/stack/StackRow";
+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, useState } from "react";
+import { useForm } from "react-hook-form";
+import { getPath } from "routes/path";
+
+type AreaBoxProps = {
+  label: string;
+  require?: boolean;
+} & HasChildren;
+function AreaBox({ label, children, require }: AreaBoxProps) {
+  return (
+    <Box>
+      <StackRow>
+        <Typography variant="subtitle1">〇{label}</Typography>
+        <RequireChip require={require ?? false} />
+      </StackRow>
+      {children}
+    </Box>
+  );
+}
+
+type FormProps = {
+  name: string;
+  name_kana: string;
+  zip_code: string;
+  address: string;
+  phone_no: string;
+};
+
+export default function UpdateUserInfo() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_USER_UPDATE_USER_INFO,
+    TabID.NONE
+  );
+
+  const { navigateWhenChanged } = useNavigateCustom();
+
+  const { user } = useAuth();
+
+  const [done, setDone] = useState(false);
+  const { error } = useSnackbarCustom();
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      name: "",
+      name_kana: "",
+      zip_code: "",
+      address: "",
+      phone_no: "",
+    },
+  });
+
+  const {
+    callAPI: callStartChangeEmail,
+    errorMode,
+    generalErrorMessage,
+  } = useAPICall({
+    apiMethod: startChangeEmail,
+    backDrop: true,
+    form,
+    onSuccess: () => {
+      setDone(true);
+    },
+    onFailed: () => {
+      error("失敗しました");
+    },
+  });
+
+  const handleSubmit = (data: FormProps) => {
+    // callStartChangeEmail({ new_email: data.new_email });
+  };
+
+  useEffect(() => {
+    setHeaderTitle("利用者情報変更申請");
+    setTabs(null);
+  }, []);
+
+  if (done) {
+    return (
+      <Stack spacing={2}>
+        <Box>変更申請を行いました。受理をお待ちください。</Box>
+      </Stack>
+    );
+  }
+
+  return (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <Stack spacing={2}>
+        <Box>
+          <Button
+            onClick={() => {
+              navigateWhenChanged(getPath(PageID.DASHBOARD_USER_DETAIL));
+            }}
+          >
+            戻る
+          </Button>
+        </Box>
+        <Typography variant="subtitle1">
+          変更項目のみ入力してください
+        </Typography>
+
+        <InputAlert error={errorMode} message={generalErrorMessage} />
+        <AreaBox label="氏名">
+          <RHFTextField name="name" />
+        </AreaBox>
+        <AreaBox label="氏名カナ">
+          <RHFTextField name="name_kana" />
+        </AreaBox>
+        <AreaBox label="郵便番号">
+          <RHFTextField name="zip_code" />
+        </AreaBox>
+        <AreaBox label="住所">
+          <RHFTextField name="address" />
+        </AreaBox>
+        <AreaBox label="電話番号">
+          <RHFTextField name="address" />
+        </AreaBox>
+        <Box>
+          <Button type="submit" variant="contained">
+            送信
+          </Button>
+        </Box>
+      </Stack>
+    </FormProvider>
+  );
+}

src/pages/index.ts

@@ -14,9 +14,11 @@ export const PageID = {
   DASHBOARD_SEASON_TICKET_CONTRACT_LIST: id++,
   DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL: id++,
   DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER: id++,
+  DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER: id++,
   DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER: id++,
   DASHBOARD_SEASON_TICKET_CONTRACT_TERMINATE_ORDER: id++,
   DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER: id++,
+  DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER: id++,
 
   DASHBOARD_RECEIPT_DOWNLOAD: id++,
 
@@ -26,6 +28,7 @@ export const PageID = {
 
   DASHBOARD_ASK: id++,
   DASHBOARD_USER_CHANGE_EMAIL_START: id++,
+  DASHBOARD_USER_UPDATE_USER_INFO: id++,
 
   PAGE_403: id++,
   PAGE_404: id++,

src/routes/path.ts

@@ -39,6 +39,8 @@ const PATHS_DASHBOARD = {
     "/dashboard/contract/detail/:id",
   [makePathKey(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER)]:
     "/dashboard/contract/sticker-re-order",
+  [makePathKey(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER)]:
+    "/dashboard/contract/season-ticket-re-order",
   [makePathKey(
     PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER
   )]: "/dashboard/contract/parking-certificate-order",
@@ -47,6 +49,9 @@ const PATHS_DASHBOARD = {
   [makePathKey(
     PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER
   )]: "/dashboard/contract/update-vehicle-info-order",
+  [makePathKey(
+    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER
+  )]: "/dashboard/contract/change-paying-interval-order",
   [makePathKey(PageID.DASHBOARD_USER_STUDENT_LICENSE_IMAGES_UPLOAD)]:
     "/dashboard/contract/upload/student-license",
   [makePathKey(PageID.DASHBOARD_USER_OTHER_LICENSE_IMAGES_UPLOAD)]:
@@ -57,6 +62,8 @@ const PATHS_DASHBOARD = {
   [makePathKey(PageID.DASHBOARD_ASK)]: "/dashboard/ask",
   [makePathKey(PageID.DASHBOARD_USER_CHANGE_EMAIL_START)]:
     "/dashboard/change/email/start",
+  [makePathKey(PageID.DASHBOARD_USER_UPDATE_USER_INFO)]:
+    "/dashboard/update/user/info",
 };
 
 const PATHS = {

src/routes/sub/dashboard.tsx

@@ -28,6 +28,9 @@ export default function DashboardRoutes(): RouteObject[] {
     const ChangeEmailStart = Loadable(
       lazy(() => import("pages/dashboard/user/change-email-start"))
     );
+    const UpdateUserInfo = Loadable(
+      lazy(() => import("pages/dashboard/user/update-user-info"))
+    );
 
     const allChildren = [
       {
@@ -55,6 +58,10 @@ export default function DashboardRoutes(): RouteObject[] {
         pageId: PageID.DASHBOARD_USER_CHANGE_EMAIL_START,
         element: <ChangeEmailStart />,
       },
+      {
+        pageId: PageID.DASHBOARD_USER_UPDATE_USER_INFO,
+        element: <UpdateUserInfo />,
+      },
     ];
     return allChildren.map(({ pageId, ...others }) => ({
       ...others,
@@ -74,9 +81,23 @@ export default function DashboardRoutes(): RouteObject[] {
     const StickerReOrder = Loadable(
       lazy(() => import("pages/dashboard/contract/sticker-re-order"))
     );
+    const SeasonTicketReOrder = Loadable(
+      lazy(() => import("pages/dashboard/contract/season-ticket-re-order"))
+    );
     const TerminateOrder = Loadable(
       lazy(() => import("pages/dashboard/contract/terminate-order"))
     );
+    const ParkingCertificateOrder = Loadable(
+      lazy(() => import("pages/dashboard/contract/parking-certificate-order"))
+    );
+    const UpdateVehicleInfoOrder = Loadable(
+      lazy(() => import("pages/dashboard/contract/update-vehicle-info-order"))
+    );
+    const ChangePayingIntervalOrder = Loadable(
+      lazy(
+        () => import("pages/dashboard/contract/change-paying-interval-order")
+      )
+    );
     const StudentLicenseImagesUpload = Loadable(
       lazy(
         () => import("pages/dashboard/contract/upload-student-license-images")
@@ -99,10 +120,29 @@ export default function DashboardRoutes(): RouteObject[] {
         pageId: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER,
         element: <StickerReOrder />,
       },
+      {
+        pageId: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER,
+        element: <SeasonTicketReOrder />,
+      },
       {
         pageId: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_TERMINATE_ORDER,
         element: <TerminateOrder />,
       },
+      {
+        pageId:
+          PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER,
+        element: <ParkingCertificateOrder />,
+      },
+      {
+        pageId:
+          PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER,
+        element: <UpdateVehicleInfoOrder />,
+      },
+      {
+        pageId:
+          PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER,
+        element: <ChangePayingIntervalOrder />,
+      },
       {
         pageId: PageID.DASHBOARD_USER_STUDENT_LICENSE_IMAGES_UPLOAD,
         element: <StudentLicenseImagesUpload />,