From 90e0b70722290eebdb367450d21009dca67751c8 Mon Sep 17 00:00:00 2001
From: "sosuke.iwabuchi" <sosuke.iwabuchi@satellite-tech.co.jp>
Date: Mon, 2 Oct 2023 21:58:44 +0900
Subject: [PATCH] =?UTF-8?q?=E5=95=8F=E3=81=84=E5=90=88=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=80=80=E7=A2=BA=E8=AA=8D=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/other/ask.tsx | 75 +++++++++++++++++++++++++++----
 1 file changed, 67 insertions(+), 8 deletions(-)

diff --git a/src/pages/dashboard/other/ask.tsx b/src/pages/dashboard/other/ask.tsx
index 50927fc..1e6a448 100644
--- a/src/pages/dashboard/other/ask.tsx
+++ b/src/pages/dashboard/other/ask.tsx
@@ -6,6 +6,10 @@ import {
   Box,
   Button,
   Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
   Typography,
 } from "@mui/material";
 import useDashboard from "hooks/useDashBoard";
@@ -23,6 +27,7 @@ import RequireChip from "components/chip/RequireChip";
 import { SelectOptionProps } from "components/hook-form/RHFSelect";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import useSnackbarCustom from "hooks/useSnackbarCustom";
+import TextFieldEx from "components/form/TextFieldEx";
 
 type AreaBoxProps = {
   label: string;
@@ -62,6 +67,8 @@ export default function Ask() {
 
   const [FAQ, setFAQ] = useState<FAQGroup[]>([]);
 
+  const [mode, setMode] = useState<"input" | "confirm" | "done">("input");
+
   const { callAPI: callGetFAQs } = useAPICall({
     apiMethod: getFAQs,
     backDrop: true,
@@ -97,7 +104,6 @@ export default function Ask() {
 
   const [asking, setAsking] = useState(false);
   const [genres, setGenres] = useState<string[]>([]);
-  const [done, setDone] = useState(false);
   const genreOptions: SelectOptionProps[] = useMemo(() => {
     return genres.map((ele) => {
       return {
@@ -127,15 +133,22 @@ export default function Ask() {
     backDrop: true,
     form,
     onSuccess: () => {
-      setDone(true);
+      setMode("done");
     },
     onFailed: () => {
       error("失敗しました");
+      setMode("input");
     },
   });
 
-  const handleSubmit = (data: FormProps) => {
-    callAsk(data);
+  const handleSubmit = () => {
+    setMode("confirm");
+  };
+
+  const send = () => {
+    callAsk({
+      ...form.getValues(),
+    });
   };
 
   useEffect(() => {
@@ -155,10 +168,56 @@ export default function Ask() {
     }
   }, [asking, genres]);
 
-  if (done) {
+  if (mode === "done") {
+    return <Box>問い合わせしました。</Box>;
+  }
+
+  if (mode === "confirm") {
     return (
-      <Box>
-        <Typography variant="h6">問い合わせしました。</Typography>
+      <Box sx={{ mt: 1 }}>
+        <Stack spacing={2}>
+          <Box>
+            <Typography>下記内容で問い合わせを行います。</Typography>
+          </Box>
+          <Box>
+            <Table size="small">
+              <TableBody>
+                <TableRow>
+                  <TableCell>ジャンル</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("genre")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>問い合わせ</TableCell>
+                  <TableCell>
+                    <TextFieldEx
+                      value={form.getValues("ask")}
+                      readOnly
+                      fullWidth
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </Box>
+          <StackRow spacing={2}>
+            <Button
+              onClick={() => {
+                setMode("input");
+              }}
+            >
+              戻る
+            </Button>
+            <Button onClick={send} variant="contained">
+              送信
+            </Button>
+          </StackRow>
+        </Stack>
       </Box>
     );
   }
@@ -234,7 +293,7 @@ export default function Ask() {
 
             <Box>
               <Button variant="contained" type="submit">
-                確定
+                次へ
               </Button>
             </Box>
           </Stack>