From 75f1fa7015ec9c0aaf913a5f1f7900a565f48941 Mon Sep 17 00:00:00 2001 From: "sosuke.iwabuchi" Date: Mon, 25 Sep 2023 19:52:49 +0900 Subject: [PATCH] =?UTF-8?q?=E5=90=84=E7=A8=AE=E7=94=BB=E9=9D=A2=E9=81=B7?= =?UTF-8?q?=E7=A7=BB=E3=80=80=E6=95=B4=E5=82=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/SeasonTicketContractContext.tsx | 18 ++ .../contract/change-paying-interval-order.tsx | 119 +++++++++ .../contract/component/PayingPlanList.tsx | 78 ++++++ src/pages/dashboard/contract/detail.tsx | 96 +++---- .../contract/parking-certificate-order.tsx | 234 ++++++++++++++++++ .../contract/season-ticket-re-order.tsx | 129 ++++++++++ .../dashboard/contract/sticker-re-order.tsx | 19 +- .../dashboard/contract/terminate-order.tsx | 19 +- .../contract/update-vehicle-info-order.tsx | 126 ++++++++++ .../contract/upload-other-license-images.tsx | 18 +- .../upload-student-license-images.tsx | 18 +- .../dashboard/user/change-email-start.tsx | 12 + src/pages/dashboard/user/detail.tsx | 47 ++-- src/pages/dashboard/user/update-user-info.tsx | 138 +++++++++++ src/pages/index.ts | 3 + src/routes/path.ts | 7 + src/routes/sub/dashboard.tsx | 40 +++ 17 files changed, 1005 insertions(+), 116 deletions(-) create mode 100644 src/pages/dashboard/contract/change-paying-interval-order.tsx create mode 100644 src/pages/dashboard/contract/component/PayingPlanList.tsx create mode 100644 src/pages/dashboard/contract/parking-certificate-order.tsx create mode 100644 src/pages/dashboard/contract/season-ticket-re-order.tsx create mode 100644 src/pages/dashboard/contract/update-vehicle-info-order.tsx create mode 100644 src/pages/dashboard/user/update-user-info.tsx diff --git a/src/contexts/dashboard/SeasonTicketContractContext.tsx b/src/contexts/dashboard/SeasonTicketContractContext.tsx index f5a2d10..12235a0 100644 --- a/src/contexts/dashboard/SeasonTicketContractContext.tsx +++ b/src/contexts/dashboard/SeasonTicketContractContext.tsx @@ -5,6 +5,8 @@ import { } from "api/season-ticket-contract"; import useAPICall from "hooks/useAPICall"; import useAuth from "hooks/useAuth"; +import useNavigateCustom from "hooks/useNavigateCustom"; +import { PageID } from "pages"; import { createContext, useContext, @@ -12,6 +14,7 @@ import { useLayoutEffect, useState, } from "react"; +import { getPath } from "routes/path"; type ContextProps = { initialized: boolean; @@ -20,6 +23,7 @@ type ContextProps = { fetch: VoidFunction; select: (target: SeasonTicketContract | null) => void; + backToDetailHome: VoidFunction; }; export const SeasonTicketContractContext = createContext({ initialized: false, @@ -28,11 +32,13 @@ export const SeasonTicketContractContext = createContext({ fetch: () => {}, select: (target: SeasonTicketContract | null) => {}, + backToDetailHome: () => {}, }); type Props = HasChildren; export function SeasonTicketContractContextProvider({ children }: Props) { const { initialized, authenticated } = useAuth(); + const { navigateWhenChanged } = useNavigateCustom(); const [fetchInitialized, setFetchInitialized] = useState(false); const [seasonTicketContracts, setSeasonTicketContracts] = useState< @@ -58,6 +64,17 @@ export function SeasonTicketContractContextProvider({ children }: Props) { callGetSeasonTicketContracts({}); }; + const backToDetailHome = () => { + const id = selectedseasonTicketContract?.season_ticekt_contract_record_no; + if (id) { + navigateWhenChanged( + getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL, { + query: { id }, + }) + ); + } + }; + useEffect(() => { if (authenticated) { fetch(); @@ -72,6 +89,7 @@ export function SeasonTicketContractContextProvider({ children }: Props) { selectedseasonTicketContract, fetch, select: setSelectedseasonTicketContract, + backToDetailHome, }} > {children} diff --git a/src/pages/dashboard/contract/change-paying-interval-order.tsx b/src/pages/dashboard/contract/change-paying-interval-order.tsx new file mode 100644 index 0000000..4761ff3 --- /dev/null +++ b/src/pages/dashboard/contract/change-paying-interval-order.tsx @@ -0,0 +1,119 @@ +import { Box, Button, Stack, Typography } from "@mui/material"; +import { HasChildren } from "@types"; +import { reOrderSticker } from "api/season-ticket-contract"; +import { FormProvider, RHFTextField } from "components/hook-form"; +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 { useForm } from "react-hook-form"; +import { getPath } from "routes/path"; + +type AreaBoxProps = { + label: string; +} & HasChildren; +function AreaBox({ label, children }: AreaBoxProps) { + return ( + + {label} + {children} + + ); +} + +type FormProps = { + upload1: File[]; +}; + +export default function ChangePayingIntervalOrder() { + const { setHeaderTitle, setTabs } = useDashboard( + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER, + TabID.NONE + ); + + const form = useForm({ + defaultValues: { + upload1: [], + }, + }); + + const { navigateWhenChanged, navigate } = useNavigateCustom(); + + const { error } = useSnackbarCustom(); + + const { selectedseasonTicketContract, backToDetailHome } = + useSeasonTicketContractContext(); + + const [done, setDone] = useState(false); + + const { callAPI: callReOrderSticker } = useAPICall({ + apiMethod: reOrderSticker, + backDrop: true, + onSuccess: () => { + setDone(true); + }, + onFailed: () => { + error("依頼失敗しました"); + }, + }); + + const handleSubmit = (data: FormProps) => { + console.log(data); + return; + // if (selectedseasonTicketContract === null) return; + // callReOrderSticker({ + // season_ticket_contract_record_no: + // selectedseasonTicketContract.season_ticekt_contract_record_no ?? "", + // }); + }; + + useEffect(() => { + setHeaderTitle("振替頻度変更申請"); + setTabs(null); + }, [setHeaderTitle, setTabs]); + + useEffect(() => { + if (selectedseasonTicketContract === null) { + navigateWhenChanged( + getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST) + ); + } + }, [selectedseasonTicketContract]); + + if (selectedseasonTicketContract === null) { + return null; + } + if (done) { + return ( + + + 依頼しました + + + + + + ); + } + + return ( + + + + + + + + + + + + + + ); +} diff --git a/src/pages/dashboard/contract/component/PayingPlanList.tsx b/src/pages/dashboard/contract/component/PayingPlanList.tsx new file mode 100644 index 0000000..d018376 --- /dev/null +++ b/src/pages/dashboard/contract/component/PayingPlanList.tsx @@ -0,0 +1,78 @@ +import { + Button, + Paper, + Table, + TableBody, + TableCell, + TableRow, + Typography, +} from "@mui/material"; +import { PaymentPlan, getPaymentPlans } from "api/season-ticket-contract"; +import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext"; +import useAPICall from "hooks/useAPICall"; +import { useEffect, useState } from "react"; + +export type PayingPlanListProps = {}; +export default function PayingPlanList({}: PayingPlanListProps) { + const [paymentPlans, setPaymentPlans] = useState([]); + const [maxRowCount, setMaxRowCount] = useState(3); + + const { selectedseasonTicketContract } = useSeasonTicketContractContext(); + + const { callAPI: callGetPaymentPlans, sending } = useAPICall({ + apiMethod: getPaymentPlans, + backDrop: true, + onSuccess: ({ data }) => { + setPaymentPlans(data); + }, + onFailed: () => {}, + }); + + const moreRead = () => { + setMaxRowCount(maxRowCount + 5); + }; + + useEffect(() => { + if (selectedseasonTicketContract) { + callGetPaymentPlans({ + season_ticket_contract_record_no: + selectedseasonTicketContract.season_ticekt_contract_record_no ?? "", + }); + } + }, [selectedseasonTicketContract]); + + if (sending) { + return null; + } + + return ( + + お支払い状況 + + + {paymentPlans + .filter((ele, index) => { + return index <= maxRowCount; + }) + .map((ele, index) => { + return ( + + {ele.payment_plan_date} + {ele.payment_method} + {ele.payment_status} + + ); + })} + {paymentPlans.length === 0 && ( + + データなし + + )} + +
+ {maxRowCount < paymentPlans.length && ( + + )} + + ); +} diff --git a/src/pages/dashboard/contract/detail.tsx b/src/pages/dashboard/contract/detail.tsx index 1c33598..c446744 100644 --- a/src/pages/dashboard/contract/detail.tsx +++ b/src/pages/dashboard/contract/detail.tsx @@ -19,6 +19,7 @@ import { useEffect, useMemo, useState } from "react"; import { useParams } from "react-router-dom"; import { getPath } from "routes/path"; import { numberFormat } from "utils/string"; +import PayingPlanList from "./component/PayingPlanList"; export default function ContractDetail() { const { setHeaderTitle, setTabs } = useDashboard( @@ -37,20 +38,6 @@ export default function ContractDetail() { const { navigate, navigateWhenChanged } = useNavigateCustom(); - const [paymentPlans, setPaymentPlans] = useState([]); - - const { callAPI: callGetPaymentPlans } = useAPICall({ - apiMethod: getPaymentPlans, - backDrop: true, - onSuccess: ({ data }) => { - setPaymentPlans(data); - }, - onFailed: () => { - select(null); - moveToList(); - }, - }); - const moveToList = () => { navigateWhenChanged(getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST)); }; @@ -88,11 +75,6 @@ export default function ContractDetail() { }); if (target) { select(target); - - callGetPaymentPlans({ - season_ticket_contract_record_no: - target.season_ticekt_contract_record_no ?? "", - }); } else { select(null); moveToList(); @@ -140,27 +122,7 @@ export default function ContractDetail() { - - お支払い状況 - - - {paymentPlans.map((ele, index) => { - return ( - - {ele.payment_plan_date} - {ele.payment_method} - {ele.payment_status} - - ); - })} - {paymentPlans.length === 0 && ( - - データなし - - )} - -
- + 各種申請 @@ -179,7 +141,32 @@ export default function ContractDetail() { - + + + + + + + + + + + + ); + } + + return ( + + + + + + + + 車庫証明証記載内容 + + 車庫証明書に記載する氏名等をご記入ください。 + + + + + + + + + + + + + ハイフンなし + + + + + 申請されるお車の車両番号または車台番号をご記入ください。新車ご購入時などナンバープレート未交付の場合、「不明」と入力し下記の車台番号を入力してください。 + + + + + + 車両番号が不明の場合のみ入力が必要です。 + + + + + + 車庫証明書の発行には3,000円(税込)が必要となります。お支払い方法をお選びください。※「口座引落」は現在定期利用料金を口座引落でお支払いいただいている場合もしくは口座引落でお支払い予定の場合のみご選択ください。 + + + + + 郵送先を選択してください + + + {showMailAddress && ( + <> + + + + + ハイフンなし + + + + + + + )} + + + ご不明点等がございましたらご入力ください。お電話またはメールにて回答させていただきます。 + + + + + + + + + + + ); +} diff --git a/src/pages/dashboard/contract/season-ticket-re-order.tsx b/src/pages/dashboard/contract/season-ticket-re-order.tsx new file mode 100644 index 0000000..0af637e --- /dev/null +++ b/src/pages/dashboard/contract/season-ticket-re-order.tsx @@ -0,0 +1,129 @@ +import { Box, Button, Stack, Typography } from "@mui/material"; +import { HasChildren } from "@types"; +import { reOrderSticker } from "api/season-ticket-contract"; +import { FormProvider, RHFTextField } from "components/hook-form"; +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 { useForm } from "react-hook-form"; +import { getPath } from "routes/path"; + +type AreaBoxProps = { + label: string; +} & HasChildren; +function AreaBox({ label, children }: AreaBoxProps) { + return ( + + {label} + {children} + + ); +} + +type FormProps = { + upload1: File[]; +}; + +export default function SeasonTicketReOrder() { + const { setHeaderTitle, setTabs } = useDashboard( + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER, + TabID.NONE + ); + + const form = useForm({ + defaultValues: { + upload1: [], + }, + }); + + const { navigateWhenChanged, navigate } = useNavigateCustom(); + + const { error } = useSnackbarCustom(); + + const { selectedseasonTicketContract, backToDetailHome, initialized } = + useSeasonTicketContractContext(); + + const [done, setDone] = useState(false); + + const { callAPI: callReOrderSticker } = useAPICall({ + apiMethod: reOrderSticker, + backDrop: true, + onSuccess: () => { + setDone(true); + }, + onFailed: () => { + error("依頼失敗しました"); + }, + }); + + const handleSubmit = (data: FormProps) => { + console.log(data); + return; + // if (selectedseasonTicketContract === null) return; + // callReOrderSticker({ + // season_ticket_contract_record_no: + // selectedseasonTicketContract.season_ticekt_contract_record_no ?? "", + // }); + }; + + useEffect(() => { + setHeaderTitle("定期券再発行申請"); + setTabs(null); + }, [setHeaderTitle, setTabs]); + + useEffect(() => { + if (initialized && selectedseasonTicketContract === null) { + navigateWhenChanged( + getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST) + ); + } + }, [selectedseasonTicketContract, initialized]); + + if (selectedseasonTicketContract === null) { + return null; + } + if (done) { + return ( + + + 依頼しました + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/dashboard/contract/sticker-re-order.tsx b/src/pages/dashboard/contract/sticker-re-order.tsx index 23565a0..3ebe194 100644 --- a/src/pages/dashboard/contract/sticker-re-order.tsx +++ b/src/pages/dashboard/contract/sticker-re-order.tsx @@ -44,7 +44,8 @@ export default function StickerReOrder() { const { error } = useSnackbarCustom(); - const { selectedseasonTicketContract } = useSeasonTicketContractContext(); + const { selectedseasonTicketContract, backToDetailHome } = + useSeasonTicketContractContext(); const [done, setDone] = useState(false); @@ -91,13 +92,7 @@ export default function StickerReOrder() { 依頼しました - + @@ -109,13 +104,7 @@ export default function StickerReOrder() { - + diff --git a/src/pages/dashboard/contract/terminate-order.tsx b/src/pages/dashboard/contract/terminate-order.tsx index 45bb394..1a401f0 100644 --- a/src/pages/dashboard/contract/terminate-order.tsx +++ b/src/pages/dashboard/contract/terminate-order.tsx @@ -70,7 +70,8 @@ export default function TerminateOrder() { const { error } = useSnackbarCustom(); - const { selectedseasonTicketContract } = useSeasonTicketContractContext(); + const { selectedseasonTicketContract, backToDetailHome } = + useSeasonTicketContractContext(); const [monthes, setMonthes] = useState([]); @@ -158,13 +159,7 @@ export default function TerminateOrder() { 依頼しました - + @@ -176,13 +171,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 new file mode 100644 index 0000000..aca1c9c --- /dev/null +++ b/src/pages/dashboard/contract/update-vehicle-info-order.tsx @@ -0,0 +1,126 @@ +import { Box, Button, Stack, Typography } from "@mui/material"; +import { HasChildren } from "@types"; +import { reOrderSticker } from "api/season-ticket-contract"; +import { FormProvider, RHFTextField } from "components/hook-form"; +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 { useForm } from "react-hook-form"; +import { getPath } from "routes/path"; + +type AreaBoxProps = { + label: string; +} & HasChildren; +function AreaBox({ label, children }: AreaBoxProps) { + return ( + + {label} + {children} + + ); +} + +type FormProps = { + upload1: File[]; +}; + +export default function UpdateVehicleInfoOrder() { + const { setHeaderTitle, setTabs } = useDashboard( + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER, + TabID.NONE + ); + + const form = useForm({ + defaultValues: { + upload1: [], + }, + }); + + const { navigateWhenChanged, navigate } = useNavigateCustom(); + + const { error } = useSnackbarCustom(); + + const { selectedseasonTicketContract, backToDetailHome } = + useSeasonTicketContractContext(); + + const [done, setDone] = useState(false); + + const { callAPI: callReOrderSticker } = useAPICall({ + apiMethod: reOrderSticker, + backDrop: true, + onSuccess: () => { + setDone(true); + }, + onFailed: () => { + error("依頼失敗しました"); + }, + }); + + const handleSubmit = (data: FormProps) => { + console.log(data); + return; + // if (selectedseasonTicketContract === null) return; + // callReOrderSticker({ + // season_ticket_contract_record_no: + // selectedseasonTicketContract.season_ticekt_contract_record_no ?? "", + // }); + }; + + useEffect(() => { + setHeaderTitle("車両情報変更申請"); + setTabs(null); + }, [setHeaderTitle, setTabs]); + + useEffect(() => { + if (selectedseasonTicketContract === null) { + navigateWhenChanged( + getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST) + ); + } + }, [selectedseasonTicketContract]); + + if (selectedseasonTicketContract === null) { + return null; + } + if (done) { + return ( + + + 依頼しました + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/dashboard/contract/upload-other-license-images.tsx b/src/pages/dashboard/contract/upload-other-license-images.tsx index 25b5732..a177abd 100644 --- a/src/pages/dashboard/contract/upload-other-license-images.tsx +++ b/src/pages/dashboard/contract/upload-other-license-images.tsx @@ -48,7 +48,7 @@ export default function OtherLicenseImagesUpload() { ); const { navigateWhenChanged, navigate } = useNavigateCustom(); - const { selectedseasonTicketContract, initialized } = + const { selectedseasonTicketContract, initialized, backToDetailHome } = useSeasonTicketContractContext(); const [done, setDone] = useState(false); @@ -129,13 +129,7 @@ export default function OtherLicenseImagesUpload() { アップロードしました - + ); @@ -145,13 +139,7 @@ export default function OtherLicenseImagesUpload() { - + diff --git a/src/pages/dashboard/contract/upload-student-license-images.tsx b/src/pages/dashboard/contract/upload-student-license-images.tsx index 31fb670..cb3c377 100644 --- a/src/pages/dashboard/contract/upload-student-license-images.tsx +++ b/src/pages/dashboard/contract/upload-student-license-images.tsx @@ -45,7 +45,7 @@ export default function StudentLicenseImagesUpload() { ); const { navigateWhenChanged, navigate } = useNavigateCustom(); - const { selectedseasonTicketContract, initialized } = + const { selectedseasonTicketContract, initialized, backToDetailHome } = useSeasonTicketContractContext(); const [done, setDone] = useState(false); @@ -126,13 +126,7 @@ export default function StudentLicenseImagesUpload() { アップロードしました - + ); @@ -142,13 +136,7 @@ export default function StudentLicenseImagesUpload() { - + diff --git a/src/pages/dashboard/user/change-email-start.tsx b/src/pages/dashboard/user/change-email-start.tsx index eaa4466..e8918d8 100644 --- a/src/pages/dashboard/user/change-email-start.tsx +++ b/src/pages/dashboard/user/change-email-start.tsx @@ -9,10 +9,12 @@ import StackRow from "components/stack/StackRow"; 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, useState } from "react"; import { useForm } from "react-hook-form"; +import { getPath } from "routes/path"; import * as Yup from "yup"; type AreaBoxProps = { @@ -43,6 +45,7 @@ export default function ChangeEmailStart() { ); const { user } = useAuth(); + const { navigateWhenChanged } = useNavigateCustom(); const [done, setDone] = useState(false); const { error } = useSnackbarCustom(); @@ -100,6 +103,15 @@ export default function ChangeEmailStart() { return ( + + + diff --git a/src/pages/dashboard/user/detail.tsx b/src/pages/dashboard/user/detail.tsx index 43286fa..84f5f66 100644 --- a/src/pages/dashboard/user/detail.tsx +++ b/src/pages/dashboard/user/detail.tsx @@ -1,4 +1,4 @@ -import { Button, Stack } from "@mui/material"; +import { Box, Button, Paper, Stack, Typography } from "@mui/material"; import useDashboard from "hooks/useDashBoard"; import useNavigateCustom from "hooks/useNavigateCustom"; import { PageID, TabID } from "pages"; @@ -19,18 +19,37 @@ export default function UserDetail() { }, []); return ( - - - - - + + 各種申請 + + + + + + + + + + + + ); } diff --git a/src/pages/dashboard/user/update-user-info.tsx b/src/pages/dashboard/user/update-user-info.tsx new file mode 100644 index 0000000..6b16546 --- /dev/null +++ b/src/pages/dashboard/user/update-user-info.tsx @@ -0,0 +1,138 @@ +import { Box, Button, Stack, Typography } from "@mui/material"; +import { HasChildren } from "@types"; +import { startChangeEmail } from "api/customer"; +import RequireChip from "components/chip/RequireChip"; +import InputAlert from "components/form/InputAlert"; +import { FormProvider, RHFTextField } from "components/hook-form"; +import StackRow from "components/stack/StackRow"; +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, useState } from "react"; +import { useForm } from "react-hook-form"; +import { getPath } from "routes/path"; + +type AreaBoxProps = { + label: string; + require?: boolean; +} & HasChildren; +function AreaBox({ label, children, require }: AreaBoxProps) { + return ( + + + 〇{label} + + + {children} + + ); +} + +type FormProps = { + name: string; + name_kana: string; + zip_code: string; + address: string; + phone_no: string; +}; + +export default function UpdateUserInfo() { + const { setHeaderTitle, setTabs } = useDashboard( + PageID.DASHBOARD_USER_UPDATE_USER_INFO, + TabID.NONE + ); + + const { navigateWhenChanged } = useNavigateCustom(); + + const { user } = useAuth(); + + const [done, setDone] = useState(false); + const { error } = useSnackbarCustom(); + + const form = useForm({ + defaultValues: { + name: "", + name_kana: "", + zip_code: "", + address: "", + phone_no: "", + }, + }); + + const { + callAPI: callStartChangeEmail, + errorMode, + generalErrorMessage, + } = useAPICall({ + apiMethod: startChangeEmail, + backDrop: true, + form, + onSuccess: () => { + setDone(true); + }, + onFailed: () => { + error("失敗しました"); + }, + }); + + const handleSubmit = (data: FormProps) => { + // callStartChangeEmail({ new_email: data.new_email }); + }; + + useEffect(() => { + setHeaderTitle("利用者情報変更申請"); + setTabs(null); + }, []); + + if (done) { + return ( + + 変更申請を行いました。受理をお待ちください。 + + ); + } + + return ( + + + + + + + 変更項目のみ入力してください + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/index.ts b/src/pages/index.ts index 3f48ac4..07f1c43 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -14,9 +14,11 @@ export const PageID = { DASHBOARD_SEASON_TICKET_CONTRACT_LIST: id++, DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL: id++, DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER: id++, + DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER: id++, DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER: id++, DASHBOARD_SEASON_TICKET_CONTRACT_TERMINATE_ORDER: id++, DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER: id++, + DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER: id++, DASHBOARD_RECEIPT_DOWNLOAD: id++, @@ -26,6 +28,7 @@ export const PageID = { DASHBOARD_ASK: id++, DASHBOARD_USER_CHANGE_EMAIL_START: id++, + DASHBOARD_USER_UPDATE_USER_INFO: id++, PAGE_403: id++, PAGE_404: id++, diff --git a/src/routes/path.ts b/src/routes/path.ts index 67d8531..139bad0 100644 --- a/src/routes/path.ts +++ b/src/routes/path.ts @@ -39,6 +39,8 @@ const PATHS_DASHBOARD = { "/dashboard/contract/detail/:id", [makePathKey(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER)]: "/dashboard/contract/sticker-re-order", + [makePathKey(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER)]: + "/dashboard/contract/season-ticket-re-order", [makePathKey( PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER )]: "/dashboard/contract/parking-certificate-order", @@ -47,6 +49,9 @@ const PATHS_DASHBOARD = { [makePathKey( PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER )]: "/dashboard/contract/update-vehicle-info-order", + [makePathKey( + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER + )]: "/dashboard/contract/change-paying-interval-order", [makePathKey(PageID.DASHBOARD_USER_STUDENT_LICENSE_IMAGES_UPLOAD)]: "/dashboard/contract/upload/student-license", [makePathKey(PageID.DASHBOARD_USER_OTHER_LICENSE_IMAGES_UPLOAD)]: @@ -57,6 +62,8 @@ const PATHS_DASHBOARD = { [makePathKey(PageID.DASHBOARD_ASK)]: "/dashboard/ask", [makePathKey(PageID.DASHBOARD_USER_CHANGE_EMAIL_START)]: "/dashboard/change/email/start", + [makePathKey(PageID.DASHBOARD_USER_UPDATE_USER_INFO)]: + "/dashboard/update/user/info", }; const PATHS = { diff --git a/src/routes/sub/dashboard.tsx b/src/routes/sub/dashboard.tsx index ef01196..547c4e2 100644 --- a/src/routes/sub/dashboard.tsx +++ b/src/routes/sub/dashboard.tsx @@ -28,6 +28,9 @@ export default function DashboardRoutes(): RouteObject[] { const ChangeEmailStart = Loadable( lazy(() => import("pages/dashboard/user/change-email-start")) ); + const UpdateUserInfo = Loadable( + lazy(() => import("pages/dashboard/user/update-user-info")) + ); const allChildren = [ { @@ -55,6 +58,10 @@ export default function DashboardRoutes(): RouteObject[] { pageId: PageID.DASHBOARD_USER_CHANGE_EMAIL_START, element: , }, + { + pageId: PageID.DASHBOARD_USER_UPDATE_USER_INFO, + element: , + }, ]; return allChildren.map(({ pageId, ...others }) => ({ ...others, @@ -74,9 +81,23 @@ export default function DashboardRoutes(): RouteObject[] { const StickerReOrder = Loadable( lazy(() => import("pages/dashboard/contract/sticker-re-order")) ); + const SeasonTicketReOrder = Loadable( + lazy(() => import("pages/dashboard/contract/season-ticket-re-order")) + ); const TerminateOrder = Loadable( lazy(() => import("pages/dashboard/contract/terminate-order")) ); + const ParkingCertificateOrder = Loadable( + lazy(() => import("pages/dashboard/contract/parking-certificate-order")) + ); + const UpdateVehicleInfoOrder = Loadable( + lazy(() => import("pages/dashboard/contract/update-vehicle-info-order")) + ); + const ChangePayingIntervalOrder = Loadable( + lazy( + () => import("pages/dashboard/contract/change-paying-interval-order") + ) + ); const StudentLicenseImagesUpload = Loadable( lazy( () => import("pages/dashboard/contract/upload-student-license-images") @@ -99,10 +120,29 @@ export default function DashboardRoutes(): RouteObject[] { pageId: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_STICKER_RE_ORDER, element: , }, + { + pageId: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_SEASON_TICKET_RE_ORDER, + element: , + }, { pageId: PageID.DASHBOARD_SEASON_TICKET_CONTRACT_TERMINATE_ORDER, element: , }, + { + pageId: + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_PARKING_CERTIFICATE_ORDER, + element: , + }, + { + pageId: + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_UPDATE_VEHICLE_INFO_ORDER, + element: , + }, + { + pageId: + PageID.DASHBOARD_SEASON_TICKET_CONTRACT_CHANGE_PAYING_INTERVAL_ORDER, + element: , + }, { pageId: PageID.DASHBOARD_USER_STUDENT_LICENSE_IMAGES_UPLOAD, element: ,