From 70b294dc940a23a926b0d0c3ddcc0fee7503c428 Mon Sep 17 00:00:00 2001
From: "sosuke.iwabuchi" <sosuke.iwabuchi@satellite-tech.co.jp>
Date: Wed, 4 Oct 2023 17:13:23 +0900
Subject: [PATCH] =?UTF-8?q?=E5=88=A9=E7=94=A8=E8=80=85=E6=83=85=E5=A0=B1?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=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/auth.ts                               |   1 +
 src/api/customer.ts                           |   9 +-
 src/contexts/AuthContext.tsx                  |   2 +
 src/pages/dashboard/user/update-user-info.tsx | 146 ++++++++++++++++--
 4 files changed, 144 insertions(+), 14 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 07d609f..1060d4c 100644
--- a/src/api/auth.ts
+++ b/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;
diff --git a/src/api/customer.ts b/src/api/customer.ts
index 2ed9eac..df6827a 100644
--- a/src/api/customer.ts
+++ b/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
 ) => {
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
index ff68ab6..9ae0d06 100644
--- a/src/contexts/AuthContext.tsx
+++ b/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) => {
diff --git a/src/pages/dashboard/user/update-user-info.tsx b/src/pages/dashboard/user/update-user-info.tsx
index 18a09b6..ae860a7 100644
--- a/src/pages/dashboard/user/update-user-info.tsx
+++ b/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>