利用者情報更新申請 整備

src/api/auth.ts

@@ -3,6 +3,7 @@ import { getUrl } from "./url";
 
 export type Me = {
   customer_name: string;
+  customer_name_kana: string;
   email: string;
   zip_code: string;
   address: string;

src/api/customer.ts

@@ -30,7 +30,14 @@ export const verifyChangeEmail = async (param: VerifyChangeEmailRequest) => {
 };
 
 // -------利用者情報変更申請---------------
-export type UpdateCustomerInfoOrderParam = {};
+export type UpdateCustomerInfoOrderParam = {
+  name: string;
+  name_kana: string;
+  zip_code: string;
+  address: string;
+  phone_no: string;
+  memo?: string;
+};
 export const orderCustomerInfoUpdate = async (
   param: UpdateCustomerInfoOrderParam
 ) => {

src/contexts/AuthContext.tsx

@@ -63,6 +63,7 @@ function AuthContextProvider({ children }: Props) {
     onSuccess: ({ data }) => {
       setEmail(data.email);
       setName(data.customer_name);
+      setUser(data);
     },
   });
 
@@ -76,6 +77,7 @@ function AuthContextProvider({ children }: Props) {
   const clear = () => {
     setName("");
     setEmail("");
+    setUser(null);
   };
 
   const login = async (email: string, password: string) => {

src/pages/dashboard/user/update-user-info.tsx

@@ -1,8 +1,18 @@
-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 { orderCustomerInfoUpdate, startChangeEmail } from "api/customer";
 import RequireChip from "components/chip/RequireChip";
 import InputAlert from "components/form/InputAlert";
+import TextFieldEx from "components/form/TextFieldEx";
 import { FormProvider, RHFTextField } from "components/hook-form";
 import StackRow from "components/stack/StackRow";
 import useAPICall from "hooks/useAPICall";
@@ -37,6 +47,7 @@ type FormProps = {
   zip_code: string;
   address: string;
   phone_no: string;
+  memo: string;
 };
 
 export default function UpdateUserInfo() {
@@ -49,7 +60,8 @@ export default function UpdateUserInfo() {
 
   const { user } = useAuth();
 
-  const [done, setDone] = useState(false);
+  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
+
   const { error } = useSnackbarCustom();
 
   const form = useForm<FormProps>({
@@ -59,6 +71,7 @@ export default function UpdateUserInfo() {
       zip_code: "",
       address: "",
       phone_no: "",
+      memo: "",
     },
   });
 
@@ -71,23 +84,37 @@ export default function UpdateUserInfo() {
     backDrop: true,
     form,
     onSuccess: () => {
-      setDone(true);
+      setMode("done");
     },
     onFailed: () => {
-      error("失敗しました");
+      setMode("input");
     },
   });
 
-  const handleSubmit = (data: FormProps) => {
-    callOrderCustomerInfoUpdate({ ...data });
+  const handleSubmit = () => {
+    setMode("confirm");
+  };
+
+  const send = () => {
+    callOrderCustomerInfoUpdate({ ...form.getValues() });
   };
 
+  useEffect(() => {
+    if (user) {
+      form.setValue("name", user.customer_name);
+      form.setValue("name_kana", user.customer_name_kana);
+      form.setValue("zip_code", user.zip_code);
+      form.setValue("address", user.address);
+      form.setValue("phone_no", user.phone_no);
+    }
+  }, [user]);
+
   useEffect(() => {
     setHeaderTitle("利用者情報変更申請");
     setTabs(null);
   }, []);
 
-  if (done) {
+  if (mode === "done") {
     return (
       <Stack spacing={2}>
         <Box>変更申請を行いました。受理をお待ちください。</Box>
@@ -95,6 +122,97 @@ export default function UpdateUserInfo() {
     );
   }
 
+  if (mode === "confirm") {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Typography>下記内容で申請を行います。</Typography>
+          </Box>
+          <Box>
+            <Table size="small">
+              <TableBody>
+                <TableRow>
+                  <TableCell>氏名</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("name")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>氏名カナ</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("name_kana")}
+                      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("memo")}
+                      readOnly
+                      fullWidth
+                      multiline
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </Box>
+          <StackRow spacing={2}>
+            <Button
+              onClick={() => {
+                setMode("input");
+              }}
+            >
+              戻る
+            </Button>
+            <Button onClick={send} variant="contained">
+              送信
+            </Button>
+          </StackRow>
+        </Stack>
+      </Box>
+    );
+  }
+
   return (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2}>
@@ -107,11 +225,8 @@ export default function UpdateUserInfo() {
             戻る
           </Button>
         </Box>
-        <Typography variant="subtitle1">
-          変更項目のみ入力してください
-        </Typography>
 
-        <InputAlert error={errorMode} message={generalErrorMessage} />
+        <InputAlert formState={form.formState} />
         <AreaBox label="氏名">
           <RHFTextField name="name" />
         </AreaBox>
@@ -119,17 +234,22 @@ export default function UpdateUserInfo() {
           <RHFTextField name="name_kana" />
         </AreaBox>
         <AreaBox label="郵便番号">
+          <Typography variant="body2">ハイフンあり</Typography>
           <RHFTextField name="zip_code" />
         </AreaBox>
         <AreaBox label="住所">
           <RHFTextField name="address" />
         </AreaBox>
         <AreaBox label="電話番号">
-          <RHFTextField name="address" />
+          <Typography variant="body2">ハイフンなし</Typography>
+          <RHFTextField name="phone_no" />
+        </AreaBox>
+        <AreaBox label="備考">
+          <RHFTextField name="memo" multiline minRows={3} maxRows={10} />
         </AreaBox>
         <Box>
           <Button type="submit" variant="contained">
-            送信
+            次へ
           </Button>
         </Box>
       </Stack>