プラン変更申請 対応

src/api/index.ts

@@ -26,7 +26,9 @@ export const ApiId = {
   SEASON_TICKET_CONTRACT_TERMINATE_ORDER: id++,
   SEASON_TICKET_CONTRACT_TERMINATE_ORDER_OPTIONS: id++,
   SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER: id++,
-  SEASON_TICKET_CONTRACT_CHANGE_PAYMENT_INTERVAL_ORDER: id++,
+  SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER_PARAMS: id++,
+  SEASON_TICKET_CONTRACT_CHANGE_PLAN_ORDER: id++,
+  SEASON_TICKET_CONTRACT_CHANGE_PLAN_ORDER_PARAMS: id++,
   SEASON_TICKET_CONTRACT_UPLOAD_STUDENT_LICENSE_IMAGES: id++,
   SEASON_TICKET_CONTRACT_UPLOAD_OTHER_LICENSE_IMAGES: id++,
 

src/api/season-ticket-contract.ts

@@ -183,15 +183,31 @@ export const orderUpdateVehicleInfo = async (
   return res;
 };
 
-// -------振替頻度変更依頼------------------
-type ChangePaymentIntervalOrderRequest = {
+// -------プラン変更依頼------------------
+type GetChangePlanOrderParamsRequest = {
   season_ticket_contract_record_no: string;
 };
-export const orderChangePaymentInterval = async (
-  data: ChangePaymentIntervalOrderRequest
+type GetChangePlanOrderParamsResponse = {
+  data: string[];
+} & APICommonResponse;
+export const getChangePlanOrderParams = async (
+  data: GetChangePlanOrderParamsRequest
 ) => {
+  const res = await request<GetChangePlanOrderParamsResponse>({
+    url: getUrl(ApiId.SEASON_TICKET_CONTRACT_CHANGE_PLAN_ORDER_PARAMS),
+    method: HttpMethod.GET,
+    data: new URLSearchParams(data),
+  });
+  return res;
+};
+// -------プラン変更依頼------------------
+type ChangePlanOrderRequest = {
+  season_ticket_contract_record_no: string;
+  plan_name: string;
+};
+export const orderChangePlan = async (data: ChangePlanOrderRequest) => {
   const res = await request({
-    url: getUrl(ApiId.SEASON_TICKET_CONTRACT_CHANGE_PAYMENT_INTERVAL_ORDER),
+    url: getUrl(ApiId.SEASON_TICKET_CONTRACT_CHANGE_PLAN_ORDER),
     method: HttpMethod.POST,
     data: makeParam(data),
   });

src/pages/dashboard/contract/change-plan-order.tsx

@@ -1,17 +1,29 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
 import { HasChildren } from "@types";
 import {
-  orderChangePaymentInterval,
-  reOrderSticker,
+  getChangePlanOrderParams,
+  orderChangePlan,
 } from "api/season-ticket-contract";
+import TextFieldEx from "components/form/TextFieldEx";
 import { FormProvider, RHFTextField } from "components/hook-form";
+import RHFSelect, { 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, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { getPath } from "routes/path";
 
@@ -28,7 +40,8 @@ function AreaBox({ label, children }: AreaBoxProps) {
 }
 
 type FormProps = {
-  upload1: File[];
+  plan_name: string;
+  memo: string;
 };
 
 export default function ChangPaymentIntervalOrder() {
@@ -39,7 +52,8 @@ export default function ChangPaymentIntervalOrder() {
 
   const form = useForm<FormProps>({
     defaultValues: {
-      upload1: [],
+      plan_name: "",
+      memo: "",
     },
   });
 
@@ -50,24 +64,45 @@ export default function ChangPaymentIntervalOrder() {
   const { selectedseasonTicketContract, backToDetailHome } =
     useSeasonTicketContractContext();
 
-  const [done, setDone] = useState(false);
+  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
+
+  const [plans, setPlans] = useState<string[]>([]);
+
+  const planOptions: SelectOptionProps[] = useMemo(() => {
+    return plans.map((planName) => ({
+      value: planName,
+      label: planName,
+    }));
+  }, [plans]);
+
+  const { callAPI: callGetChangePlanOrderParams } = useAPICall({
+    apiMethod: getChangePlanOrderParams,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      setPlans(data);
+    },
+  });
 
-  const { callAPI: callOrderChangePaymentInterval } = useAPICall({
-    apiMethod: orderChangePaymentInterval,
+  const { callAPI: callOrderChangePlan } = useAPICall({
+    apiMethod: orderChangePlan,
     backDrop: true,
     onSuccess: () => {
-      setDone(true);
+      setMode("done");
     },
     onFailed: () => {
       error("依頼失敗しました");
     },
   });
 
-  const handleSubmit = (data: FormProps) => {
-    callOrderChangePaymentInterval({
+  const handleSubmit = () => {
+    setMode("confirm");
+  };
+
+  const send = () => {
+    callOrderChangePlan({
       season_ticket_contract_record_no:
         selectedseasonTicketContract?.season_ticekt_contract_record_no ?? "",
-      ...data,
+      ...form.getValues(),
     });
   };
 
@@ -81,13 +116,18 @@ export default function ChangPaymentIntervalOrder() {
       navigateWhenChanged(
         getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)
       );
+    } else {
+      callGetChangePlanOrderParams({
+        season_ticket_contract_record_no:
+          selectedseasonTicketContract.season_ticekt_contract_record_no ?? "",
+      });
     }
   }, [selectedseasonTicketContract]);
 
   if (selectedseasonTicketContract === null) {
     return null;
   }
-  if (done) {
+  if (mode === "done") {
     return (
       <Box sx={{ mt: 1 }}>
         <Stack spacing={2}>
@@ -100,6 +140,58 @@ export default function ChangPaymentIntervalOrder() {
     );
   }
 
+  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("plan_name")}
+                      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 }}>
@@ -108,6 +200,22 @@ export default function ChangPaymentIntervalOrder() {
             <Button onClick={backToDetailHome}>戻る</Button>
           </Box>
 
+          <AreaBox label="変更先プラン">
+            <RHFSelect name="plan_name" options={planOptions} size="small" />
+          </AreaBox>
+
+          <AreaBox label="備考">
+            <Typography variant="body2">
+              ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。
+            </Typography>
+            <RHFTextField
+              name="memo"
+              size="small"
+              multiline
+              minRows={3}
+              maxRows={10}
+            />
+          </AreaBox>
           <Box>
             <Button variant="contained" type="submit">
               確定