129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
import { Box, Typography, Button } from "@mui/material";
|
|
import { getQuestionByContentId } from "@root/questions/actions";
|
|
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|
import { useQuestionsStore } from "@root/questions/store";
|
|
|
|
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
|
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx"
|
|
|
|
type ResultFormProps = {
|
|
currentQuestion: AnyTypedQuizQuestion;
|
|
showContactForm: boolean;
|
|
setShowContactForm: (show: boolean) => void;
|
|
setShowResultForm: (show: boolean) => void;
|
|
};
|
|
|
|
export const ResultForm = ({
|
|
currentQuestion,
|
|
showContactForm,
|
|
setShowContactForm,
|
|
setShowResultForm,
|
|
|
|
}: ResultFormProps) => {
|
|
const quiz = useCurrentQuiz();
|
|
const { questions } = useQuestionsStore();
|
|
const resultQuestion = questions.find(
|
|
(question) =>
|
|
question.type === "result" &&
|
|
question.content.rule.parentId === currentQuestion.content.id || "line"
|
|
);
|
|
console.log(currentQuestion)
|
|
console.log(questions)
|
|
console.log(quiz?.config.resultInfo.when)
|
|
const followNextForm = () => {
|
|
setShowResultForm(false);
|
|
setShowContactForm(true);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
height: "100vh",
|
|
width: "100vw",
|
|
pt: "28px"
|
|
}}
|
|
>
|
|
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "start",
|
|
width: "490px",
|
|
}}
|
|
>
|
|
{
|
|
!resultQuestion?.content.useImage &&
|
|
resultQuestion.content.video &&
|
|
<YoutubeEmbedIframe
|
|
videoUrl={resultQuestion.content.video}
|
|
containerSX={{
|
|
width: "490px",
|
|
height: "280px"
|
|
}}
|
|
/>
|
|
}
|
|
{
|
|
resultQuestion?.content.useImage &&
|
|
resultQuestion.content.back &&
|
|
<Box
|
|
component='img'
|
|
src={resultQuestion.content.back}
|
|
sx={{
|
|
width: "490px",
|
|
height: "280px"
|
|
}}
|
|
>
|
|
</Box>
|
|
}
|
|
{resultQuestion.description !== "" && resultQuestion.description !== " " && <Typography
|
|
sx={{
|
|
fontSize: "23px",
|
|
fontWeight: 700,
|
|
m: "20px 0"
|
|
}}
|
|
>{resultQuestion.description}</Typography>}
|
|
|
|
<Typography
|
|
sx={{
|
|
m: "20px 0"
|
|
}}
|
|
>{resultQuestion.title || "Форма результатов"}
|
|
</Typography>
|
|
|
|
</Box>
|
|
|
|
{
|
|
quiz?.config.resultInfo.when === "before" &&
|
|
<Box
|
|
sx={{
|
|
height: "100px",
|
|
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<Button
|
|
onClick={followNextForm}
|
|
variant="contained"
|
|
sx={{
|
|
p: "10px 20px",
|
|
width: "210px",
|
|
height: "50px"
|
|
}}
|
|
>
|
|
{resultQuestion.content.hint.text || "Узнать подробнее"}
|
|
</Button>
|
|
</Box>
|
|
}
|
|
</Box>
|
|
);
|
|
};
|