口座変更 対応

src/api/auth.ts

@@ -4,10 +4,12 @@ import { getUrl } from "./url";
 export type Me = {
   customer_name: string;
   customer_name_kana: string;
+  customer_name_kana_hankaku: string;
   email: string;
   zip_code: string;
   address: string;
   phone_no: string;
+  customer_code: string;
 };
 
 type MeResponse = {

src/api/customer.ts

@@ -1,4 +1,5 @@
-import { ApiId, HttpMethod, makeFormData, makeParam, request } from "api";
+import { Dictionary } from "@types";
+import { APICommonResponse, ApiId, HttpMethod, makeParam, request } from "api";
 import { getUrl } from "./url";
 
 // -------Email変更手続き開始---------------
@@ -49,3 +50,18 @@ export const orderCustomerInfoUpdate = async (
   });
   return res;
 };
+
+// -------利用者情報変更申請---------------
+export type GetRegisterBankAccountStartParamResponse = {
+  data: {
+    url: string;
+    param: Dictionary;
+  };
+} & APICommonResponse;
+export const getRegisterBankAccountStartParam = async () => {
+  const res = await request<GetRegisterBankAccountStartParamResponse>({
+    url: getUrl(ApiId.CUSTOMER_REGISTER_BANK_ACCOUNT_START_PARAM),
+    method: HttpMethod.GET,
+  });
+  return res;
+};

src/api/index.ts

@@ -39,6 +39,7 @@ export const ApiId = {
   START_CHANGE_EMAIL: id++,
   VERIFY_CHANGE_EMAIL: id++,
   CUSTOMER_UPDATE_INFO_ORDER: id++,
+  CUSTOMER_REGISTER_BANK_ACCOUNT_START_PARAM: id++,
 } as const;
 export type ApiId = (typeof ApiId)[keyof typeof ApiId];
 

src/api/url.ts

@@ -34,6 +34,8 @@ const urls = {
   [A.START_CHANGE_EMAIL]: "email/change/start",
   [A.VERIFY_CHANGE_EMAIL]: "email/change/verify",
   [A.CUSTOMER_UPDATE_INFO_ORDER]: "customer/update-info-order",
+  [A.CUSTOMER_REGISTER_BANK_ACCOUNT_START_PARAM]:
+    "customer/bank-account-register/start",
 };
 
 const prefixs = {

src/pages/dashboard/user/bank-register.tsx

@@ -0,0 +1,77 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { Dictionary } from "@types";
+import { getRegisterBankAccountStartParam } from "api/customer";
+import useAPICall from "hooks/useAPICall";
+import useAuth from "hooks/useAuth";
+import useDashboard from "hooks/useDashBoard";
+import { get } from "lodash";
+import { PageID, TabID } from "pages";
+import { useEffect, useState } from "react";
+
+export default function BankRegister() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_USER_BANK_REGISTER,
+    TabID.NONE
+  );
+  const { user, authenticated } = useAuth();
+
+  const [url, setUrl] = useState("");
+  const [param, setParam] = useState<Dictionary>({});
+
+  const { callAPI: callGetRegisterBankAccountStartParam } = useAPICall({
+    apiMethod: getRegisterBankAccountStartParam,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      setParam(data.param);
+      setUrl(data.url);
+    },
+  });
+
+  useEffect(() => {
+    if (authenticated) {
+      callGetRegisterBankAccountStartParam({});
+    }
+  }, [authenticated]);
+
+  useEffect(() => {
+    setHeaderTitle("口座情報登録");
+    setTabs(null);
+  }, []);
+
+  if (!user) return null;
+
+  return (
+    <Box mt={3}>
+      <Stack spacing={4}>
+        <Box>
+          <form
+            method="post"
+            acceptCharset="shift_jis"
+            action={url}
+            target="_blank"
+          >
+            {Object.keys(param).map((name, index) => {
+              const value: string = get(param, name);
+              return (
+                <input type="hidden" name={name} value={value} key={index} />
+              );
+            })}
+
+            <Button type="submit" variant="contained">
+              口座振替用のページへ移動する（外部サイト）
+            </Button>
+          </form>
+        </Box>
+        <Box>
+          <Typography variant="body2">
+            *遷移先でエラーが発生する場合、ご利用者様の登録情報に不備がある可能性があります。
+            登録済みの氏名、氏名カナをご確認ください。
+          </Typography>
+          <Typography variant="body2">
+            *それでも解決しない場合は、恐れ入りますがお問い合わせください。
+          </Typography>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

src/pages/dashboard/user/detail.tsx

@@ -47,7 +47,14 @@ export default function UserDetail() {
           </Button>
         </Box>
         <Box>
-          <Button variant="contained">口座情報変更</Button>
+          <Button
+            variant="contained"
+            onClick={() => {
+              navigateWhenChanged(getPath(PageID.DASHBOARD_USER_BANK_REGISTER));
+            }}
+          >
+            口座情報変更
+          </Button>
         </Box>
       </Stack>
     </Paper>

src/pages/index.ts

@@ -29,6 +29,7 @@ export const PageID = {
   DASHBOARD_ASK: id++,
   DASHBOARD_USER_CHANGE_EMAIL_START: id++,
   DASHBOARD_USER_UPDATE_USER_INFO: id++,
+  DASHBOARD_USER_BANK_REGISTER: id++,
 
   PAGE_403: id++,
   PAGE_404: id++,

src/providers/CsrfTokenProvider.tsx

@@ -9,7 +9,7 @@ function CsrfTokenProvider() {
       setDone(true);
       csrfToken();
     }
-  }, []);
+  }, [done]);
 
   return null;
 }

src/routes/path.ts

@@ -64,6 +64,8 @@ const PATHS_DASHBOARD = {
     "/dashboard/change/email/start",
   [makePathKey(PageID.DASHBOARD_USER_UPDATE_USER_INFO)]:
     "/dashboard/update/user/info",
+  [makePathKey(PageID.DASHBOARD_USER_BANK_REGISTER)]:
+    "/dashboard/update/user/back-register",
 };
 
 const PATHS = {

src/routes/sub/dashboard.tsx

@@ -31,6 +31,9 @@ export default function DashboardRoutes(): RouteObject[] {
     const UpdateUserInfo = Loadable(
       lazy(() => import("pages/dashboard/user/update-user-info"))
     );
+    const BankRegister = Loadable(
+      lazy(() => import("pages/dashboard/user/bank-register"))
+    );
 
     const allChildren = [
       {
@@ -62,6 +65,10 @@ export default function DashboardRoutes(): RouteObject[] {
         pageId: PageID.DASHBOARD_USER_UPDATE_USER_INFO,
         element: <UpdateUserInfo />,
       },
+      {
+        pageId: PageID.DASHBOARD_USER_BANK_REGISTER,
+        element: <BankRegister />,
+      },
     ];
     return allChildren.map(({ pageId, ...others }) => ({
       ...others,