diff --git a/src/api/index.ts b/src/api/index.ts index c0c291e..53cce63 100644 --- a/src/api/index.ts +++ b/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++, diff --git a/src/api/season-ticket-contract.ts b/src/api/season-ticket-contract.ts index 18e6feb..247ef26 100644 --- a/src/api/season-ticket-contract.ts +++ b/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({ + 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), }); diff --git a/src/pages/dashboard/contract/change-plan-order.tsx b/src/pages/dashboard/contract/change-plan-order.tsx index f162c6f..4aeaab7 100644 --- a/src/pages/dashboard/contract/change-plan-order.tsx +++ b/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({ 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([]); + + 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 ( @@ -100,6 +140,58 @@ export default function ChangPaymentIntervalOrder() { ); } + if (mode === "confirm") { + return ( + + + + 下記内容で申請を行います。 + + + + + + 変更先プラン + + + + + + 備考 + + + + + +
+
+ + + + +
+
+ ); + } + return ( @@ -108,6 +200,22 @@ export default function ChangPaymentIntervalOrder() { + + + + + + + ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。 + + +