解約日をSELECTへ変更

src/api/index.ts

@@ -20,6 +20,7 @@ export const ApiId = {
   STICKER_RE_ORDER: id++,
   PARKING_CERTIFICATE_ORDER: id++,
   SEASON_TICKET_CONTRACT_TERMINATE_ORDER: id++,
+  SEASON_TICKET_CONTRACT_TERMINATE_ORDER_OPTIONS: id++,
   UPDATE_VEHICLE_INFO_ORDER: id++,
 
   FAQ: id++,

src/api/season-ticket-contract.ts

@@ -87,7 +87,7 @@ export const orderParkingCertificate = async (
 // -------解約依頼------------------
 type TerminateOrderRequest = {
   season_ticket_contract_record_no: string;
-  date: Date;
+  date: string;
   reason: string;
   other_reason: string;
   opinion: string;
@@ -103,6 +103,25 @@ export const orderSeasonTicketContractTerminate = async (
   });
   return res;
 };
+// -------解約依頼オプション取得------------------
+type TerminateOrderOptionsRequest = {
+  season_ticket_contract_record_no: string;
+};
+type TerminateOrderOptionsResponse = {
+  data: {
+    monthes: string[];
+  };
+} & APICommonResponse;
+export const getSeasonTicketContractTerminateOptions = async (
+  data: TerminateOrderOptionsRequest
+) => {
+  const res = await request<TerminateOrderOptionsResponse>({
+    url: getUrl(ApiId.SEASON_TICKET_CONTRACT_TERMINATE_ORDER_OPTIONS),
+    method: HttpMethod.GET,
+    data: new URLSearchParams(data),
+  });
+  return res;
+};
 
 // -------車両情報変更依頼------------------
 type UpdateVehicleInfoOrderRequest = {

src/api/url.ts

@@ -13,6 +13,8 @@ const urls = {
     "season-ticket-contract/parking-certificate-order",
   [A.SEASON_TICKET_CONTRACT_TERMINATE_ORDER]:
     "season-ticket-contract/termination-order",
+  [A.SEASON_TICKET_CONTRACT_TERMINATE_ORDER_OPTIONS]:
+    "season-ticket-contract/termination-order/options",
   [A.UPDATE_VEHICLE_INFO_ORDER]:
     "season-ticket-contract/update-vehicle-info-order",
   [A.FAQ]: "faq",

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

@@ -1,6 +1,7 @@
 import { Box, Button, Stack, Typography } from "@mui/material";
 import { HasChildren } from "@types";
 import {
+  getSeasonTicketContractTerminateOptions,
   orderSeasonTicketContractTerminate,
   reOrderSticker,
 } from "api/season-ticket-contract";
@@ -42,7 +43,7 @@ function AreaBox({ label, children, require }: AreaBoxProps) {
 }
 
 type FormProps = {
-  date: Date | null;
+  date: string;
   reason: string[];
   other_reason: string;
   opinion: string;
@@ -57,7 +58,7 @@ export default function TerminateOrder() {
 
   const form = useForm<FormProps>({
     defaultValues: {
-      date: null,
+      date: "",
       reason: [],
       other_reason: "",
       opinion: "",
@@ -71,6 +72,15 @@ export default function TerminateOrder() {
 
   const { selectedseasonTicketContract } = useSeasonTicketContractContext();
 
+  const [monthes, setMonthes] = useState<string[]>([]);
+
+  const monthOptions: SelectOptionProps[] = useMemo(() => {
+    return monthes.map((ele) => ({
+      value: ele,
+      label: ele,
+    }));
+  }, [monthes]);
+
   const [done, setDone] = useState(false);
 
   const { callAPI: callOrderSeasonTicketContractTerminate } = useAPICall({
@@ -84,16 +94,21 @@ export default function TerminateOrder() {
     },
   });
 
+  const { callAPI: callGetSeasonTicketContractTerminateOptions } = useAPICall({
+    apiMethod: getSeasonTicketContractTerminateOptions,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      setMonthes(data.monthes);
+    },
+  });
+
   const handleSubmit = (data: FormProps) => {
     console.log(data);
 
     if (selectedseasonTicketContract === null) return;
-    const date = data.date;
-    if (date === null) return;
 
     callOrderSeasonTicketContractTerminate({
       ...data,
-      date,
       season_ticket_contract_record_no:
         selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
       reason: data.reason.join(","),
@@ -126,7 +141,12 @@ export default function TerminateOrder() {
       navigateWhenChanged(
         getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
       );
+      return;
     }
+    callGetSeasonTicketContractTerminateOptions({
+      season_ticket_contract_record_no:
+        selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+    });
   }, [selectedseasonTicketContract]);
 
   if (selectedseasonTicketContract === null) {
@@ -166,7 +186,7 @@ export default function TerminateOrder() {
           </Box>
 
           <AreaBox label="解約希望日" require>
-            <RHFDatePicker name="date" size="small" />
+            <RHFSelect name="date" size="small" options={monthOptions} />
           </AreaBox>
           <AreaBox label="解約理由(複数選択可)" require>
             <Typography variant="body2">