frontAnswerer/src/pages/ViewPublicationPage/ResultForm.tsx

229 lines
8.2 KiB
TypeScript
Raw Normal View History

2024-01-10 18:02:37 +00:00
import {
Box,
Button,
Typography,
useMediaQuery,
useTheme,
2024-01-10 18:02:37 +00:00
} from "@mui/material";
2023-12-16 14:55:56 +00:00
import { NameplateLogo } from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
2023-12-16 14:55:56 +00:00
import { useQuestionsStore } from "@stores/quizData/store";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useCallback, useEffect, useMemo } from "react";
2024-01-10 18:02:37 +00:00
import type { QuizQuestionResult } from "../../model/questionTypes/result";
2023-12-16 14:55:56 +00:00
type ResultFormProps = {
currentQuestion: any;
showContactForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
2023-12-16 14:55:56 +00:00
};
export const ResultForm = ({
currentQuestion,
showContactForm,
setShowContactForm,
setShowResultForm,
2023-12-16 14:55:56 +00:00
}: ResultFormProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { settings, items } = useQuestionsStore();
if (!settings) throw new Error("settings is null");
const resultQuestion = useMemo(() => {
if (settings?.cfg.haveRoot) {
//ищём для ветвления
return (items.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
) || items.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === "line"
));
} else {
return items.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === "line"
);
}
}, [currentQuestion.content.id, items, settings?.cfg.haveRoot]);
const followNextForm = useCallback(() => {
setShowResultForm(false);
setShowContactForm(true);
},[setShowContactForm, setShowResultForm]);
2023-12-29 00:58:19 +00:00
useEffect(() => {
if (!resultQuestion) {
followNextForm();
}
}, [followNextForm, resultQuestion]);
if (!resultQuestion) return null;
2023-12-16 14:55:56 +00:00
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
height: "100vh",
width: "100vw",
pt: "28px",
overflow: "auto",
}}
>
<Box
2023-12-29 00:58:19 +00:00
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
width: isMobile ? "100%" : "490px",
padding: isMobile ? "0 16px" : undefined,
2023-12-29 00:58:19 +00:00
}}
>
{
!resultQuestion?.content.useImage && resultQuestion.content.video && (
<YoutubeEmbedIframe
videoUrl={resultQuestion.content.video}
containerSX={{
width: isMobile ? "100%" : "490px",
height: isMobile ? "100%" : "280px",
}}
/>
)
}
{
resultQuestion?.content.useImage && resultQuestion.content.back && (
<Box
component="img"
src={resultQuestion.content.back}
sx={{
width: isMobile ? "100%" : "490px",
height: isMobile ? "100%" : "280px",
}}
></Box>
)
}
{resultQuestion.description !== "" &&
resultQuestion.description !== " " && (
<Typography
sx={{
fontSize: "23px",
fontWeight: 700,
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{resultQuestion.description}
</Typography>
)}
2024-01-10 18:02:37 +00:00
<Typography
sx={{
m: "20px 0",
color: theme.palette.text.primary,
}}
2024-01-10 18:02:37 +00:00
>
{resultQuestion.title}
2024-01-10 18:02:37 +00:00
</Typography>
{
resultQuestion.content.text !== "" &&
resultQuestion.content.text !== " " && (
<Typography
sx={{
fontSize: "18px",
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{
resultQuestion.content.text
}
</Typography>
)
}
</Box>
<Box width="100%">
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
mt: "15px",
gap: "10px",
}}
>
<NameplateLogo
style={{
fontSize: "34px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
}}
/>
<Typography
sx={{
fontSize: "20px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
<Box
sx={{
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
width: "100%",
flexDirection: "column",
display: "flex",
justifyContent: "center",
alignItems: "center",
p: "20px",
}}
2023-12-29 00:58:19 +00:00
>
{settings?.cfg.resultInfo.showResultForm === "before" && (
<Button
onClick={followNextForm}
variant="contained"
sx={{
p: "10px 20px",
width: "210px",
height: "50px",
}}
>
{resultQuestion.content.hint.text || "Узнать подробнее"}
</Button>
)}
{settings?.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && (
<Button
href={resultQuestion.content.redirect}
variant="contained"
sx={{ p: "10px 20px", width: "210px", height: "50px" }}
>
{resultQuestion.content.hint.text || "Перейти на сайт"}
</Button>
)}
</Box>
</Box>
</Box>
);
2024-01-10 18:02:37 +00:00
};