From 8318edac7e64c84f033dd60f98cac6a6a82ec302 Mon Sep 17 00:00:00 2001 From: "sosuke.iwabuchi" Date: Thu, 28 Sep 2023 17:34:02 +0900 Subject: [PATCH] =?UTF-8?q?=E7=94=B3=E8=AB=8B=E3=80=80=E6=95=B4=E5=82=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/season-ticket-contract.ts | 11 + src/components/form/InputAlert.tsx | 4 +- src/layouts/dashbord/navigator.tsx | 10 +- .../contract/parking-certificate-order.tsx | 322 ++++++++++++++---- .../contract/season-ticket-re-order.tsx | 2 +- .../dashboard/contract/sticker-re-order.tsx | 2 +- .../dashboard/contract/terminate-order.tsx | 2 +- .../contract/update-vehicle-info-order.tsx | 2 +- 8 files changed, 282 insertions(+), 73 deletions(-) diff --git a/src/api/season-ticket-contract.ts b/src/api/season-ticket-contract.ts index e2cd9e2..f762023 100644 --- a/src/api/season-ticket-contract.ts +++ b/src/api/season-ticket-contract.ts @@ -95,6 +95,17 @@ export const reOrderSeasonTicket = async (data: SeasonTicketReOrderRequest) => { // -------車庫証明発行依頼------------------ type ParkingCertificateOrderRequest = { season_ticket_contract_record_no: string; + parking_name: string; + name: string; + zip_code: string; + address: string; + phone_no: string; + vehicle_no: string; + chassis_no: string; + paying_method: string; + mail_name: string; + mail_zip_code: string; + mail_address: string; memo?: string; }; export const orderParkingCertificate = async ( diff --git a/src/components/form/InputAlert.tsx b/src/components/form/InputAlert.tsx index 76ffcc0..9323c1a 100644 --- a/src/components/form/InputAlert.tsx +++ b/src/components/form/InputAlert.tsx @@ -31,7 +31,7 @@ const InputAlert = ({ return m; } } - if (!!formState && formState.isSubmitted && !formState.isValid) + if (!!formState && Object.keys(formState.errors).length !== 0) return "入力項目を確認してください。"; if (error === APIErrorType.INPUT) return "入力項目を確認してください。"; if (error === APIErrorType.SERVER) @@ -50,7 +50,7 @@ const InputAlert = ({ } }, [error, ref]); - if (message === "" && error === APIErrorType.NONE) return null; + if (message === "") return null; return ( {message} diff --git a/src/layouts/dashbord/navigator.tsx b/src/layouts/dashbord/navigator.tsx index e975737..63c76bf 100644 --- a/src/layouts/dashbord/navigator.tsx +++ b/src/layouts/dashbord/navigator.tsx @@ -86,11 +86,11 @@ export default function Navigator(props: DrawerProps) { icon: , id: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_ENTRY, }, - { - label: "領収証ダウンロード", - icon: , - id: PageID.DASHBOARD_RECEIPT_DOWNLOAD, - }, + // { + // label: "領収証ダウンロード", + // icon: , + // id: PageID.DASHBOARD_RECEIPT_DOWNLOAD, + // }, { label: "問い合わせ", icon: , diff --git a/src/pages/dashboard/contract/parking-certificate-order.tsx b/src/pages/dashboard/contract/parking-certificate-order.tsx index 6ae180f..fd04ff6 100644 --- a/src/pages/dashboard/contract/parking-certificate-order.tsx +++ b/src/pages/dashboard/contract/parking-certificate-order.tsx @@ -1,31 +1,33 @@ -import { Box, Button, Stack, Typography } from "@mui/material"; -import { HasChildren } from "@types"; +import { yupResolver } from "@hookform/resolvers/yup"; import { - getSeasonTicketContractTerminateOptions, - orderParkingCertificate, - orderSeasonTicketContractTerminate, - reOrderSticker, -} from "api/season-ticket-contract"; + Box, + Button, + Stack, + Table, + TableBody, + TableCell, + TableRow, + Typography, +} from "@mui/material"; +import { HasChildren } from "@types"; +import { orderParkingCertificate } 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 InputAlert from "components/form/InputAlert"; +import TextFieldEx from "components/form/TextFieldEx"; +import { FormProvider, RHFSelect, RHFTextField } from "components/hook-form"; 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 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"; import { useForm } from "react-hook-form"; -import { getPath } from "routes/path"; +import { scrollToTop } from "utils/page"; +import { object, string } from "yup"; type AreaBoxProps = { label: string; @@ -44,7 +46,7 @@ function AreaBox({ label, children, require }: AreaBoxProps) { } type FormProps = { - paying_type: string; + paying_method: string; name: string; zip_code: string; @@ -57,8 +59,6 @@ type FormProps = { mail_zip_code: string; mail_address: string; memo: string; - - is_same_mail_to: "" | "same" | "deferent"; }; export default function ParkingCertificateOrder() { @@ -67,9 +67,11 @@ export default function ParkingCertificateOrder() { TabID.NONE ); + const { user } = useAuth(); + const form = useForm({ defaultValues: { - paying_type: "", + paying_method: "", name: "", zip_code: "", address: "", @@ -80,12 +82,41 @@ export default function ParkingCertificateOrder() { mail_zip_code: "", mail_address: "", memo: "", - is_same_mail_to: "", }, + resolver: yupResolver( + object().shape({ + paying_method: string().required("入力してください"), + name: string().required("入力してください"), + zip_code: string() + .required("入力してください") + .matches(/^\d{3}-\d{4}$/, { + message: "ハイフン付の形式で入力してください", + }), + phone_no: string() + .required("入力してください") + .matches(/^\d+$/, { message: "ハイフンなしで入力してください" }), + mail_name: string().required("入力してください"), + vehicle_no: string().required("入力してください"), + chassis_no: string().test( + "関連チェック", + "入力してください", + function (value) { + if (this.parent.vehicle_no === "不明") { + return !!value; + } + return true; + } + ), + mail_zip_code: string() + .required("入力してください") + .matches(/^\d{3}-\d{4}$/, { + message: "ハイフン付の形式で入力してください", + }), + mail_address: string().required("入力してください"), + }) + ), }); - const isSameMailTo = form.watch("is_same_mail_to"); - const { navigateWhenChanged, navigate } = useNavigateCustom(); const { error } = useSnackbarCustom(); @@ -93,26 +124,30 @@ export default function ParkingCertificateOrder() { const { selectedseasonTicketContract, backToDetailHome } = useSeasonTicketContractContext(); - const [done, setDone] = useState(false); + const [mode, setMode] = useState<"input" | "confirm" | "done">("input"); const { callAPI: callOrderParkingCertificate } = useAPICall({ apiMethod: orderParkingCertificate, backDrop: true, form, onSuccess: () => { - setDone(true); + setMode("done"); }, onFailed: () => { error("失敗しました"); + setMode("input"); }, }); - - const handleSubmit = (data: FormProps) => { - console.log(data); + const handleSubmit = () => { + setMode("confirm"); + }; + const send = () => { + if (selectedseasonTicketContract === null) return; callOrderParkingCertificate({ + ...form.getValues(), season_ticket_contract_record_no: selectedseasonTicketContract?.season_ticekt_contract_record_no ?? "", - ...data, + parking_name: selectedseasonTicketContract.parking_name ?? "", }); }; @@ -124,26 +159,33 @@ export default function ParkingCertificateOrder() { }; }); }, []); - const mailAddresses: SelectOptionProps[] = useMemo(() => { - return [ - { label: "契約者住所と同一", value: "same" }, - { label: "契約者住所と異なる", value: "deferent" }, - ]; - }, []); - - const showMailAddress = useMemo(() => { - return isSameMailTo === "deferent"; - }, [isSameMailTo]); useEffect(() => { setHeaderTitle("車庫証明発行申請"); setTabs(null); }, [setHeaderTitle, setTabs]); + useEffect(() => { + if (selectedseasonTicketContract && user) { + form.setValue("name", user.customer_name); + form.setValue("zip_code", user.zip_code); + form.setValue("address", user.address); + form.setValue( + "vehicle_no", + selectedseasonTicketContract.vehicle_no ?? "" + ); + form.setValue("mail_name", user.customer_name); + form.setValue("mail_zip_code", user.zip_code); + form.setValue("mail_address", user.address); + } else { + backToDetailHome(); + } + }, [selectedseasonTicketContract, user]); + if (selectedseasonTicketContract === null) { return null; } - if (done) { + if (mode === "done") { return ( @@ -156,13 +198,177 @@ export default function ParkingCertificateOrder() { ); } + if (mode === "confirm") { + return ( + + + + 下記内容で申請を行います。 + + + + + + + --- 車庫証明記載内容 --- + + + + 氏名 + + + + + + 郵便番号 + + + + + + 住所 + + + + + + 電話番号 + + + + + + 車両番号 + + + + + + 車体番号 + + + + + + + + --- 郵送先 --- + + + + 郵送先　宛名 + + + + + + 郵送先　郵便番号 + + + + + + 郵送先　住所 + + + + + + + --- その他 --- + + + + お支払い方法 + + + + + + 備考 + + + + + +
+ + + + + + + + ); + } + return ( - + { + console.log(ee); + scrollToTop(); + })} + > + 車庫証明証記載内容 @@ -197,34 +403,26 @@ export default function ParkingCertificateOrder() { + + + + + + + + + + 車庫証明書の発行には3,000円(税込)が必要となります。お支払い方法をお選びください。※「口座引落」は現在定期利用料金を口座引落でお支払いいただいている場合もしくは口座引落でお支払い予定の場合のみご選択ください。 - - - - 郵送先を選択してください - {showMailAddress && ( - <> - - - - - ハイフンなし - - - - - - - )} ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。 @@ -240,7 +438,7 @@ export default function ParkingCertificateOrder() { diff --git a/src/pages/dashboard/contract/season-ticket-re-order.tsx b/src/pages/dashboard/contract/season-ticket-re-order.tsx index 7ce1e03..58fd704 100644 --- a/src/pages/dashboard/contract/season-ticket-re-order.tsx +++ b/src/pages/dashboard/contract/season-ticket-re-order.tsx @@ -208,7 +208,7 @@ export default function SeasonTicketReOrder() { diff --git a/src/pages/dashboard/contract/sticker-re-order.tsx b/src/pages/dashboard/contract/sticker-re-order.tsx index 0909383..691e055 100644 --- a/src/pages/dashboard/contract/sticker-re-order.tsx +++ b/src/pages/dashboard/contract/sticker-re-order.tsx @@ -209,7 +209,7 @@ export default function StickerReOrder() { diff --git a/src/pages/dashboard/contract/terminate-order.tsx b/src/pages/dashboard/contract/terminate-order.tsx index 3421969..99f8842 100644 --- a/src/pages/dashboard/contract/terminate-order.tsx +++ b/src/pages/dashboard/contract/terminate-order.tsx @@ -358,7 +358,7 @@ export default function TerminateOrder() { diff --git a/src/pages/dashboard/contract/update-vehicle-info-order.tsx b/src/pages/dashboard/contract/update-vehicle-info-order.tsx index 9457226..019b3d9 100644 --- a/src/pages/dashboard/contract/update-vehicle-info-order.tsx +++ b/src/pages/dashboard/contract/update-vehicle-info-order.tsx @@ -244,7 +244,7 @@ export default function UpdateVehicleInfoOrder() {