問い合わせ 確認対応

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>