車庫証明の申請画面 説明文を追記

src/contexts/dashboard/SeasonTicketContractContext.tsx

@@ -72,6 +72,10 @@ export function SeasonTicketContractContextProvider({ children }: Props) {
           query: { id },
         })
       );
+    } else {
+      navigateWhenChanged(
+        getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
+      );
     }
   };
 

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

@@ -21,7 +21,6 @@ import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketC
 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";
@@ -117,14 +116,14 @@ export default function ParkingCertificateOrder() {
     ),
   });
 
-  const { navigateWhenChanged, navigate } = useNavigateCustom();
-
   const { error } = useSnackbarCustom();
 
   const { selectedseasonTicketContract, backToDetailHome } =
     useSeasonTicketContractContext();
 
-  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
+  const [mode, setMode] = useState<"announce" | "input" | "confirm" | "done">(
+    "announce"
+  );
 
   const { callAPI: callOrderParkingCertificate } = useAPICall({
     apiMethod: orderParkingCertificate,
@@ -182,6 +181,10 @@ export default function ParkingCertificateOrder() {
     }
   }, [selectedseasonTicketContract, user]);
 
+  useEffect(() => {
+    scrollToTop("auto");
+  }, [mode]);
+
   if (selectedseasonTicketContract === null) {
     return null;
   }
@@ -355,6 +358,106 @@ export default function ParkingCertificateOrder() {
     );
   }
 
+  if (mode === "announce") {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Button onClick={backToDetailHome}>戻る</Button>
+          </Box>
+          <Box>
+            <Typography variant="body2">
+              （一財）京都市都市整備公社が管理運営する定期駐車場の車庫証明書発行申請フォームです。
+            </Typography>
+            <Typography variant="body2">&nbsp;</Typography>
+            <Typography variant="body2">
+              <strong>【注意事項】ご申請前に必ずご一読ください。</strong>
+            </Typography>
+            <Typography variant="body2">
+              <strong>1.</strong>
+              車庫証明書発行手数料として
+              <Typography
+                variant="body2"
+                component="span"
+                style={{ color: "red", fontWeight: "bold" }}
+              >
+                3,000円(税込)
+              </Typography>
+              が必要となります。
+            </Typography>
+            <Typography variant="body2">
+              <strong>2.</strong>
+              京都府内の駐車場は「車両番号(ナンバープレート)」または「車台番号」が必須となります。
+            </Typography>
+            <Typography variant="body2">
+               ※車台番号はお車固有の番号のため、車検証その他ディーラー等にてご確認下さい。
+            </Typography>
+            <Typography variant="body2">
+              <strong>3.</strong>
+              証明書の発行から
+              <strong>
+                到着までは
+                <Typography
+                  variant="body2"
+                  component="span"
+                  style={{ color: "red", fontWeight: "bold" }}
+                >
+                  3~5営業日程度
+                </Typography>
+                お時間を要します。
+              </strong>
+            </Typography>
+            <Typography variant="body2">
+              （土日祝を除く。受付順にて順次対応のため、予めご了承下さい。）
+            </Typography>
+            <Typography variant="body2">
+              <strong>4.</strong>
+              駐車場の新規ご契約と同時にご申請をいただく場合、初回料金のお支払い確認後の発送となります。
+            </Typography>
+            <Typography variant="body2">
+              <strong>
+                （新規ご契約の方は
+                <Typography
+                  variant="body2"
+                  component="span"
+                  style={{ color: "red", fontWeight: "bold" }}
+                >
+                  2箇月分以上
+                </Typography>
+                の駐車料金を前納となります。備考に駐車場新規申込の旨記載下さい。）
+              </strong>
+            </Typography>
+            <Typography variant="body2">
+              また、ご利用開始日より前に警察署へ証明書をご提出いただく事はできません。
+            </Typography>
+            <Typography variant="body2">
+              <strong>5.</strong>
+              弊社で発行する書類は「定期契約証明書又は保管場所使用承諾証明書」「位置図」「場内図」の3点です。
+            </Typography>
+            <Typography variant="body2">
+              <strong>6.</strong>
+              定期利用取扱事項に従い、駐車場契約を解約する場合は所管の警察署に保管場所変更届を提出して下さい。
+            </Typography>
+            <Typography variant="body2">&nbsp;</Typography>
+            <Typography variant="body2">
+              上記ご確認のうえご申請をお願い致します。
+            </Typography>
+          </Box>
+          <Box>
+            <Button
+              variant="contained"
+              onClick={() => {
+                setMode("input");
+              }}
+            >
+              次へ
+            </Button>
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+
   return (
     <FormProvider
       methods={form}
@@ -365,9 +468,6 @@ export default function ParkingCertificateOrder() {
     >
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
-          <Box>
-            <Button onClick={backToDetailHome}>戻る</Button>
-          </Box>
           <InputAlert formState={form.formState} />
           <Box>
             <Typography variant="h6">車庫証明証記載内容</Typography>
@@ -437,6 +537,13 @@ export default function ParkingCertificateOrder() {
           </AreaBox>
 
           <Box>
+            <Button
+              onClick={() => {
+                setMode("announce");
+              }}
+            >
+              戻る
+            </Button>
             <Button variant="contained" type="submit">
               次へ
             </Button>