fix: publication result logic

This commit is contained in:
IlyaDoronin 2023-12-28 17:10:21 +03:00
parent 60145514e2
commit ceaab812a6

@ -5,9 +5,9 @@ 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"
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx";
import { NameplateLogo } from "@icons/NameplateLogo";
import {modes} from "../../utils/themes/Publication/themePublication";
import { modes } from "../../utils/themes/Publication/themePublication";
type ResultFormProps = {
currentQuestion: AnyTypedQuizQuestion;
@ -21,25 +21,25 @@ export const ResultForm = ({
showContactForm,
setShowContactForm,
setShowResultForm,
}: ResultFormProps) => {
const quiz = useCurrentQuiz();
const mode = modes;
const { questions } = useQuestionsStore();
const resultQuestion = questions.find(
const resultQuestion = (questions.find(
(question) =>
question.type === "result" &&
(question.content.rule.parentId === "line" || currentQuestion.content.id)
);
question.content.rule.parentId === currentQuestion.content.id
) ||
questions.find(
(question) =>
question.type === "result" && question.content.rule.parentId === "line"
)) as AnyTypedQuizQuestion;
const followNextForm = () => {
setShowResultForm(false);
setShowContactForm(true);
};
if (resultQuestion === undefined) return <></>
if (resultQuestion === undefined) return <></>;
return (
<Box
@ -50,10 +50,9 @@ export const ResultForm = ({
justifyContent: "space-between",
height: "100vh",
width: "100vw",
pt: "28px"
pt: "28px",
}}
>
<Box
sx={{
display: "flex",
@ -62,53 +61,57 @@ export const ResultForm = ({
width: "490px",
}}
>
{
!resultQuestion?.content.useImage &&
resultQuestion.content.video &&
{!resultQuestion?.content.useImage && resultQuestion.content.video && (
<YoutubeEmbedIframe
videoUrl={resultQuestion.content.video}
containerSX={{
width: "490px",
height: "280px"
height: "280px",
}}
/>
}
{
resultQuestion?.content.useImage &&
resultQuestion.content.back &&
)}
{resultQuestion?.content.useImage && resultQuestion.content.back && (
<Box
component='img'
component="img"
src={resultQuestion.content.back}
sx={{
width: "490px",
height: "280px"
height: "280px",
}}
>
</Box>
}
{resultQuestion.description !== "" && resultQuestion.description !== " " && <Typography
sx={{
fontSize: "23px",
fontWeight: 700,
m: "20px 0"
}}
>{resultQuestion.description}</Typography>}
></Box>
)}
{resultQuestion.description !== "" &&
resultQuestion.description !== " " && (
<Typography
sx={{
fontSize: "23px",
fontWeight: 700,
m: "20px 0",
}}
>
{resultQuestion.description}
</Typography>
)}
<Typography
sx={{
m: "20px 0"
m: "20px 0",
}}
>{resultQuestion.title || "Форма результатов"}
>
{resultQuestion.title || "Форма результатов"}
</Typography>
{resultQuestion.content.text !== "" && resultQuestion.content.text !== " " && <Typography
sx={{
fontSize: "18px",
m: "20px 0"
}}
>{resultQuestion.content.text}</Typography>}
{resultQuestion.content.text !== "" &&
resultQuestion.content.text !== " " && (
<Typography
sx={{
fontSize: "18px",
m: "20px 0",
}}
>
{resultQuestion.content.text}
</Typography>
)}
</Box>
<Box width="100%">
@ -117,24 +120,30 @@ export const ResultForm = ({
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px"
px: "20px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
mt: "15px"
mt: "15px",
}}
>
<NameplateLogo style={{ fontSize: "34px" }} />
<Typography sx={{ fontSize: "20px", color: mode[quiz.config.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap" }}>Сделано на PenaQuiz</Typography>
<Typography
sx={{
fontSize: "20px",
color: mode[quiz.config.theme] ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
{
quiz?.config.resultInfo.when === "before" &&
{quiz?.config.resultInfo.when === "before" && (
<>
<Box
sx={{
@ -144,7 +153,7 @@ export const ResultForm = ({
display: "flex",
justifyContent: "center",
alignItems: "center",
p: "20px"
p: "20px",
}}
>
<Button
@ -153,17 +162,15 @@ export const ResultForm = ({
sx={{
p: "10px 20px",
width: "210px",
height: "50px"
height: "50px",
}}
>
{resultQuestion.content.hint.text || "Узнать подробнее"}
</Button>
</Box>
</>
}
)}
</Box>
</Box>
);
};