feat: ContactForm and ResultForm

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -0,0 +1,33 @@
+import { Box, Typography, Button } from "@mui/material";
+
+import { useCurrentQuiz } from "@root/quizes/hooks";
+
+type ContactFormProps = {
+  showResultForm: boolean;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
+};
+
+export const ContactForm = ({
+  showResultForm,
+  setShowContactForm,
+  setShowResultForm,
+}: ContactFormProps) => {
+  const quiz = useCurrentQuiz();
+
+  const followNextForm = () => {
+    setShowContactForm(false);
+    setShowResultForm(true);
+  };
+
+  return (
+    <Box>
+      <Typography>Форма контактов</Typography>
+      {!showResultForm && quiz?.config.resultInfo.when === "after" && (
+        <Button variant="contained" onClick={followNextForm}>
+          Показать результат
+        </Button>
+      )}
+    </Box>
+  );
+};

src/pages/ViewPublicationPage/Footer.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 
 import { useQuizViewStore } from "@root/quizView";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 
 import type {
   AnyTypedQuizQuestion,
@@ -14,16 +15,21 @@ type FooterProps = {
   questions: AnyTypedQuizQuestion[];
   setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
   question: AnyTypedQuizQuestion;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
 };
 
 export const Footer = ({
   setCurrentQuestion,
   questions,
   question,
+  setShowContactForm,
+  setShowResultForm,
 }: FooterProps) => {
   const [disablePreviousButton, setDisablePreviousButton] =
     useState<boolean>(false);
   const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
+  const quiz = useCurrentQuiz();
   const { answers } = useQuizViewStore();
   const theme = useTheme();
   const linear = !questions.find(
@@ -72,16 +78,9 @@ export const Footer = ({
     }
 
     if (linear) {
-      const questionIndex = questions.findIndex(({ id }) => id === question.id);
+      return;
-
-      const nextQuestion = questions[questionIndex + 1];
-
-      if (nextQuestion) {
-        setDisableNextButton(false);
-      } else {
-        setDisableNextButton(true);
     }
-    } else {
+
     const nextQuestionId = getNextQuestionId();
     if (nextQuestionId) {
       setDisableNextButton(false);
@@ -89,15 +88,21 @@ export const Footer = ({
       const nextQuestion = getQuestionByContentId(
         question.content.rule.default
       );
+
       if (nextQuestion?.type) {
         setDisableNextButton(false);
-        } else {
-          setDisableNextButton(true);
-        }
       }
     }
   }, [question, answers]);
 
+  const showResult = () => {
+    if (quiz?.config.resultInfo.when === "after") {
+      setShowContactForm(true);
+    } else {
+      setShowResultForm(true);
+    }
+  };
+
   const getNextQuestionId = () => {
     if (answers.length) {
       const answer = answers.find(
@@ -171,11 +176,12 @@ export const Footer = ({
   const followNextStep = () => {
     if (linear) {
       const questionIndex = questions.findIndex(({ id }) => id === question.id);
-
       const nextQuestion = questions[questionIndex + 1];
 
       if (nextQuestion) {
         setCurrentQuestion(nextQuestion);
+      } else {
+        showResult();
       }
 
       return;
@@ -199,7 +205,7 @@ export const Footer = ({
       if (nextQuestion?.type) {
         setCurrentQuestion(nextQuestion);
       } else {
-        enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
+        showResult();
       }
     }
   };

src/pages/ViewPublicationPage/Question.tsx

@@ -1,5 +1,9 @@
+import { useState, useEffect } from "react";
 import { Box } from "@mui/material";
 
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { getQuestionByContentId } from "@root/questions/actions";
+
 import { Variant } from "./questions/Variant";
 import { Images } from "./questions/Images";
 import { Varimg } from "./questions/Varimg";
@@ -12,12 +16,11 @@ import { File } from "./questions/File";
 import { Page } from "./questions/Page";
 import { Rating } from "./questions/Rating";
 import { Footer } from "./Footer";
+import { ContactForm } from "./ContactForm";
+import { ResultForm } from "./ResultForm";
 
-import { useState, type FC, useEffect } from "react";
 import type { QuestionType } from "../../model/question/question";
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
-import { useCurrentQuiz } from "@root/quizes/hooks";
-import { getQuestionByContentId } from "@root/questions/actions";
 
 type QuestionProps = {
   questions: AnyTypedQuizQuestion[];
@@ -41,6 +44,8 @@ export const Question = ({ questions }: QuestionProps) => {
   const quiz = useCurrentQuiz();
   const [currentQuestion, setCurrentQuestion] =
     useState<AnyTypedQuizQuestion>();
+  const [showContactForm, setShowContactForm] = useState<boolean>(false);
+  const [showResultForm, setShowResultForm] = useState<boolean>(false);
 
   useEffect(() => {
     const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
@@ -70,13 +75,33 @@ export const Question = ({ questions }: QuestionProps) => {
           margin: "0 auto",
         }}
       >
+        {!showContactForm && !showResultForm && (
           <QuestionComponent currentQuestion={currentQuestion} />
+        )}
+        {showContactForm && (
+          <ContactForm
+            showResultForm={showResultForm}
+            setShowContactForm={setShowContactForm}
+            setShowResultForm={setShowResultForm}
+          />
+        )}
+        {showResultForm && (
+          <ResultForm
+            showContactForm={showContactForm}
+            setShowContactForm={setShowContactForm}
+            setShowResultForm={setShowResultForm}
+          />
+        )}
       </Box>
+      {!showContactForm && !showResultForm && (
         <Footer
           questions={questions}
           question={currentQuestion}
           setCurrentQuestion={setCurrentQuestion}
+          setShowContactForm={setShowContactForm}
+          setShowResultForm={setShowResultForm}
         />
+      )}
     </Box>
   );
 };

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -0,0 +1,33 @@
+import { Box, Typography, Button } from "@mui/material";
+
+import { useCurrentQuiz } from "@root/quizes/hooks";
+
+type ResultFormProps = {
+  showContactForm: boolean;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
+};
+
+export const ResultForm = ({
+  showContactForm,
+  setShowContactForm,
+  setShowResultForm,
+}: ResultFormProps) => {
+  const quiz = useCurrentQuiz();
+
+  const followNextForm = () => {
+    setShowResultForm(false);
+    setShowContactForm(true);
+  };
+
+  return (
+    <Box>
+      <Typography>Форма результатов</Typography>
+      {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
+        <Button variant="contained" onClick={followNextForm}>
+          Показать форму контактов
+        </Button>
+      )}
+    </Box>
+  );
+};