sosuke.iwabuchi
/
KT-MyPage-front
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

申請　整備

develop
sosuke.iwabuchi 2 years ago
parent
2b33471154
commit
8318edac7e
8 changed files with 282 additions and 73 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -0
      src/api/season-ticket-contract.ts
  2. +2
    -2
      src/components/form/InputAlert.tsx
  3. +5
    -5
      src/layouts/dashbord/navigator.tsx
  4. +260
    -62
      src/pages/dashboard/contract/parking-certificate-order.tsx
  5. +1
    -1
      src/pages/dashboard/contract/season-ticket-re-order.tsx
  6. +1
    -1
      src/pages/dashboard/contract/sticker-re-order.tsx
  7. +1
    -1
      src/pages/dashboard/contract/terminate-order.tsx
  8. +1
    -1
      src/pages/dashboard/contract/update-vehicle-info-order.tsx

+ 11
- 0
src/api/season-ticket-contract.ts View File

@@ -95,6 +95,17 @@ export const reOrderSeasonTicket = async (data: SeasonTicketReOrderRequest) => {
// -------車庫証明発行依頼------------------ // -------車庫証明発行依頼------------------
type ParkingCertificateOrderRequest = { type ParkingCertificateOrderRequest = {
season_ticket_contract_record_no: string; 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; memo?: string;
}; };
export const orderParkingCertificate = async ( export const orderParkingCertificate = async (


+ 2
- 2
src/components/form/InputAlert.tsx View File

@@ -31,7 +31,7 @@ const InputAlert = ({
return m; return m;
} }
} }
if (!!formState && formState.isSubmitted && !formState.isValid)
if (!!formState && Object.keys(formState.errors).length !== 0)
return "入力項目を確認してください。"; return "入力項目を確認してください。";
if (error === APIErrorType.INPUT) return "入力項目を確認してください。"; if (error === APIErrorType.INPUT) return "入力項目を確認してください。";
if (error === APIErrorType.SERVER) if (error === APIErrorType.SERVER)
@@ -50,7 +50,7 @@ const InputAlert = ({
} }
}, [error, ref]); }, [error, ref]);


if (message === "" && error === APIErrorType.NONE) return null;
if (message === "") return null;
return ( return (
<Alert severity="error" sx={sx} ref={ref}> <Alert severity="error" sx={sx} ref={ref}>
{message} {message}


+ 5
- 5
src/layouts/dashbord/navigator.tsx View File

@@ -86,11 +86,11 @@ export default function Navigator(props: DrawerProps) {
icon: <ArticleIcon />, icon: <ArticleIcon />,
id: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_ENTRY, id: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_ENTRY,
}, },
{
label: "領収証ダウンロード",
icon: <ArticleIcon />,
id: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
},
// {
// label: "領収証ダウンロード",
// icon: <ArticleIcon />,
// id: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
// },
{ {
label: "問い合わせ", label: "問い合わせ",
icon: <InfoIcon />, icon: <InfoIcon />,


+ 260
- 62
src/pages/dashboard/contract/parking-certificate-order.tsx View File

@@ -1,31 +1,33 @@
import { Box, Button, Stack, Typography } from "@mui/material";
import { HasChildren } from "@types";
import { yupResolver } from "@hookform/resolvers/yup";
import { 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 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 { SelectOptionProps } from "components/hook-form/RHFSelect";
import StackRow from "components/stack/StackRow"; import StackRow from "components/stack/StackRow";
import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext"; import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
import useAPICall from "hooks/useAPICall"; import useAPICall from "hooks/useAPICall";
import useAuth from "hooks/useAuth";
import useDashboard from "hooks/useDashBoard"; import useDashboard from "hooks/useDashBoard";
import useNavigateCustom from "hooks/useNavigateCustom"; import useNavigateCustom from "hooks/useNavigateCustom";
import useSnackbarCustom from "hooks/useSnackbarCustom"; import useSnackbarCustom from "hooks/useSnackbarCustom";
import { PageID, TabID } from "pages"; import { PageID, TabID } from "pages";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { getPath } from "routes/path";
import { scrollToTop } from "utils/page";
import { object, string } from "yup";


type AreaBoxProps = { type AreaBoxProps = {
label: string; label: string;
@@ -44,7 +46,7 @@ function AreaBox({ label, children, require }: AreaBoxProps) {
} }


type FormProps = { type FormProps = {
paying_type: string;
paying_method: string;


name: string; name: string;
zip_code: string; zip_code: string;
@@ -57,8 +59,6 @@ type FormProps = {
mail_zip_code: string; mail_zip_code: string;
mail_address: string; mail_address: string;
memo: string; memo: string;

is_same_mail_to: "" | "same" | "deferent";
}; };


export default function ParkingCertificateOrder() { export default function ParkingCertificateOrder() {
@@ -67,9 +67,11 @@ export default function ParkingCertificateOrder() {
TabID.NONE TabID.NONE
); );


const { user } = useAuth();

const form = useForm<FormProps>({ const form = useForm<FormProps>({
defaultValues: { defaultValues: {
paying_type: "",
paying_method: "",
name: "", name: "",
zip_code: "", zip_code: "",
address: "", address: "",
@@ -80,12 +82,41 @@ export default function ParkingCertificateOrder() {
mail_zip_code: "", mail_zip_code: "",
mail_address: "", mail_address: "",
memo: "", 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 { navigateWhenChanged, navigate } = useNavigateCustom();


const { error } = useSnackbarCustom(); const { error } = useSnackbarCustom();
@@ -93,26 +124,30 @@ export default function ParkingCertificateOrder() {
const { selectedseasonTicketContract, backToDetailHome } = const { selectedseasonTicketContract, backToDetailHome } =
useSeasonTicketContractContext(); useSeasonTicketContractContext();


const [done, setDone] = useState(false);
const [mode, setMode] = useState<"input" | "confirm" | "done">("input");


const { callAPI: callOrderParkingCertificate } = useAPICall({ const { callAPI: callOrderParkingCertificate } = useAPICall({
apiMethod: orderParkingCertificate, apiMethod: orderParkingCertificate,
backDrop: true, backDrop: true,
form, form,
onSuccess: () => { onSuccess: () => {
setDone(true);
setMode("done");
}, },
onFailed: () => { onFailed: () => {
error("失敗しました"); error("失敗しました");
setMode("input");
}, },
}); });

const handleSubmit = (data: FormProps) => {
console.log(data);
const handleSubmit = () => {
setMode("confirm");
};
const send = () => {
if (selectedseasonTicketContract === null) return;
callOrderParkingCertificate({ callOrderParkingCertificate({
...form.getValues(),
season_ticket_contract_record_no: season_ticket_contract_record_no:
selectedseasonTicketContract?.season_ticekt_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(() => { useEffect(() => {
setHeaderTitle("車庫証明発行申請"); setHeaderTitle("車庫証明発行申請");
setTabs(null); setTabs(null);
}, [setHeaderTitle, setTabs]); }, [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) { if (selectedseasonTicketContract === null) {
return null; return null;
} }
if (done) {
if (mode === "done") {
return ( return (
<Box sx={{ mt: 1 }}> <Box sx={{ mt: 1 }}>
<Stack spacing={2}> <Stack spacing={2}>
@@ -156,13 +198,177 @@ export default function ParkingCertificateOrder() {
); );
} }


if (mode === "confirm") {
return (
<Box sx={{ mt: 1 }}>
<Stack spacing={2}>
<Box>
<Typography>下記内容で申請を行います。</Typography>
</Box>
<Box>
<Table size="small">
<TableBody>
<TableRow>
<TableCell colSpan={2}>
<Box textAlign="center">--- 車庫証明記載内容 ---</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell>氏名</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("name")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>郵便番号</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("zip_code")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>住所</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("address")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>電話番号</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("phone_no")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>車両番号</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("vehicle_no")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>車体番号</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("chassis_no")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>

<TableRow>
<TableCell colSpan={2}>
<Box textAlign="center">--- 郵送先 ---</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell>郵送先　宛名</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("mail_name")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>郵送先　郵便番号</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("mail_zip_code")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>郵送先　住所</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("mail_address")}
readOnly
fullWidth
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>
<Box textAlign="center">--- その他 ---</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell>お支払い方法</TableCell>
<TableCell>
<TextFieldEx
value={form.getValues("paying_method")}
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 ( return (
<FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
<FormProvider
methods={form}
onSubmit={form.handleSubmit(handleSubmit, (ee) => {
console.log(ee);
scrollToTop();
})}
>
<Box sx={{ mt: 1 }}> <Box sx={{ mt: 1 }}>
<Stack spacing={2}> <Stack spacing={2}>
<Box> <Box>
<Button onClick={backToDetailHome}>戻る</Button> <Button onClick={backToDetailHome}>戻る</Button>
</Box> </Box>
<InputAlert formState={form.formState} />
<Box> <Box>
<Typography variant="h6">車庫証明証記載内容</Typography> <Typography variant="h6">車庫証明証記載内容</Typography>
<Typography variant="body2"> <Typography variant="body2">
@@ -197,34 +403,26 @@ export default function ParkingCertificateOrder() {
</Typography> </Typography>
<RHFTextField name="chassis_no" placeholder="例：MXPBXX-200XXXX" /> <RHFTextField name="chassis_no" placeholder="例：MXPBXX-200XXXX" />
</AreaBox> </AreaBox>

<AreaBox label="郵送先　宛名" require>
<RHFTextField name="mail_name" />
</AreaBox>
<AreaBox label="郵送先　郵便番号" require>
<RHFTextField name="mail_zip_code" />
</AreaBox>
<AreaBox label="郵送先　住所" require>
<RHFTextField name="mail_address" />
</AreaBox>
<AreaBox label="お支払方法" require> <AreaBox label="お支払方法" require>
<Typography variant="body2"> <Typography variant="body2">
車庫証明書の発行には3,000円(税込)が必要となります。お支払い方法をお選びください。※「口座引落」は現在定期利用料金を口座引落でお支払いいただいている場合もしくは口座引落でお支払い予定の場合のみご選択ください。 車庫証明書の発行には3,000円(税込)が必要となります。お支払い方法をお選びください。※「口座引落」は現在定期利用料金を口座引落でお支払いいただいている場合もしくは口座引落でお支払い予定の場合のみご選択ください。
</Typography> </Typography>
<RHFSelect name="paying_type" options={payingTypes} size="small" />
</AreaBox>
<AreaBox label="郵送先について" require>
<Typography variant="body2">郵送先を選択してください</Typography>
<RHFSelect <RHFSelect
name="is_same_mail_to"
options={mailAddresses}
name="paying_method"
options={payingTypes}
size="small" size="small"
/> />
</AreaBox> </AreaBox>
{showMailAddress && (
<>
<AreaBox label="郵送先　宛名" require>
<RHFTextField name="mail_name" />
</AreaBox>
<AreaBox label="郵送先　郵便番号" require>
<Typography variant="body2">ハイフンなし</Typography>
<RHFTextField name="mail_zip_code" />
</AreaBox>
<AreaBox label="郵送先　住所" require>
<RHFTextField name="mail_address" />
</AreaBox>
</>
)}
<AreaBox label="備考"> <AreaBox label="備考">
<Typography variant="body2"> <Typography variant="body2">
ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。 ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。
@@ -240,7 +438,7 @@ export default function ParkingCertificateOrder() {


<Box> <Box>
<Button variant="contained" type="submit"> <Button variant="contained" type="submit">
確定
次へ
</Button> </Button>
</Box> </Box>
</Stack> </Stack>


+ 1
- 1
src/pages/dashboard/contract/season-ticket-re-order.tsx View File

@@ -208,7 +208,7 @@ export default function SeasonTicketReOrder() {


<Box> <Box>
<Button variant="contained" type="submit"> <Button variant="contained" type="submit">
確定
次へ
</Button> </Button>
</Box> </Box>
</Stack> </Stack>


+ 1
- 1
src/pages/dashboard/contract/sticker-re-order.tsx View File

@@ -209,7 +209,7 @@ export default function StickerReOrder() {


<Box> <Box>
<Button variant="contained" type="submit"> <Button variant="contained" type="submit">
確定
次へ
</Button> </Button>
</Box> </Box>
</Stack> </Stack>


+ 1
- 1
src/pages/dashboard/contract/terminate-order.tsx View File

@@ -358,7 +358,7 @@ export default function TerminateOrder() {


<Box> <Box>
<Button variant="contained" type="submit"> <Button variant="contained" type="submit">
確定
次へ
</Button> </Button>
</Box> </Box>
</Stack> </Stack>


+ 1
- 1
src/pages/dashboard/contract/update-vehicle-info-order.tsx View File

@@ -244,7 +244,7 @@ export default function UpdateVehicleInfoOrder() {


<Box> <Box>
<Button variant="contained" type="submit"> <Button variant="contained" type="submit">
確定
次へ
</Button> </Button>
</Box> </Box>
</Stack> </Stack>


Write Preview
Loading…
Cancel
Save