diff --git a/src/pages/ViewPublicationPage/ContactForm.tsx b/src/pages/ViewPublicationPage/ContactForm.tsx new file mode 100644 index 00000000..5bd41ebf --- /dev/null +++ b/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 ( + + Форма контактов + {!showResultForm && quiz?.config.resultInfo.when === "after" && ( + + )} + + ); +}; diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx index 8b116b9e..198eef91 100644 --- a/src/pages/ViewPublicationPage/Footer.tsx +++ b/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(false); const [disableNextButton, setDisableNextButton] = useState(false); + const quiz = useCurrentQuiz(); const { answers } = useQuizViewStore(); const theme = useTheme(); const linear = !questions.find( @@ -72,32 +78,31 @@ 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); - } + const nextQuestionId = getNextQuestionId(); + if (nextQuestionId) { + setDisableNextButton(false); } else { - const nextQuestionId = getNextQuestionId(); - if (nextQuestionId) { + const nextQuestion = getQuestionByContentId( + question.content.rule.default + ); + + if (nextQuestion?.type) { setDisableNextButton(false); - } else { - 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(); } } }; diff --git a/src/pages/ViewPublicationPage/Question.tsx b/src/pages/ViewPublicationPage/Question.tsx index c0d3cee2..52629302 100644 --- a/src/pages/ViewPublicationPage/Question.tsx +++ b/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(); + const [showContactForm, setShowContactForm] = useState(false); + const [showResultForm, setShowResultForm] = useState(false); useEffect(() => { const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || ""); @@ -70,13 +75,33 @@ export const Question = ({ questions }: QuestionProps) => { margin: "0 auto", }} > - + {!showContactForm && !showResultForm && ( + + )} + {showContactForm && ( + + )} + {showResultForm && ( + + )} -