275 lines
11 KiB
TypeScript
275 lines
11 KiB
TypeScript
import {
|
||
Box,
|
||
Button, Link,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
|
||
import {NameplateLogo} from "@icons/NameplateLogo";
|
||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||
|
||
import {useQuizData} from "@contexts/QuizDataContext";
|
||
import {quizThemes} from "@utils/themes/Publication/themePublication";
|
||
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
|
||
import type {QuizQuestionResult} from "../../model/questionTypes/result";
|
||
import {setCurrentQuizStep} from "@stores/quizView";
|
||
import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question";
|
||
|
||
type ResultFormProps = {
|
||
resultQuestion: QuizQuestionResult;
|
||
};
|
||
|
||
export const ResultForm = ({resultQuestion}: ResultFormProps) => {
|
||
const theme = useTheme();
|
||
const isMobile = useRootContainerSize() < 650;
|
||
const isTablet = useRootContainerSize() < 1000;
|
||
const {settings, show_badge, quizId} = useQuizData();
|
||
const spec = settings.cfg.spec
|
||
console.log(quizThemes[settings.cfg.theme].isLight)
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
height: "100%",
|
||
minHeight: "100vh",
|
||
width: "100%",
|
||
overflow: "auto",
|
||
backgroundColor: theme.palette.background.default,
|
||
backgroundPosition: "center",
|
||
backgroundSize: "cover",
|
||
backgroundImage: settings.cfg.design && !isMobile
|
||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||
: null,
|
||
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
pt: "30px",
|
||
width: "inherit",
|
||
height: "inherit",
|
||
background: settings.cfg.design && !isMobile
|
||
? quizThemes[settings.cfg.theme].isLight
|
||
? "transparent"
|
||
: "linear-gradient(90deg,#272626, transparent)"
|
||
: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
flexWrap: "wrap",
|
||
gap: "30px",
|
||
mb: "7px",
|
||
}}
|
||
>
|
||
{settings.cfg.startpage.logo &&
|
||
<img
|
||
src={settings.cfg.startpage.logo}
|
||
style={{
|
||
height: "40px",
|
||
maxWidth: "110px",
|
||
objectFit: "cover",
|
||
}}
|
||
alt=""
|
||
/>
|
||
}
|
||
<Typography
|
||
sx={{
|
||
fontSize: "14px",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
wordBreak: "break-word",
|
||
}}
|
||
>
|
||
{settings.cfg.info.orgname}
|
||
</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "flex-start",
|
||
width: "100%",
|
||
maxWidth: "844px",
|
||
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
||
}}>
|
||
{
|
||
!resultQuestion?.content.useImage && resultQuestion.content.video && (
|
||
<YoutubeEmbedIframe
|
||
videoUrl={resultQuestion.content.video}
|
||
containerSX={{
|
||
width: "100%",
|
||
maxWidth: "844px",
|
||
height: isMobile ? "100%" : "306px",
|
||
}}
|
||
/>
|
||
)
|
||
}
|
||
{
|
||
resultQuestion?.content.useImage && resultQuestion.content.back && (
|
||
<Box
|
||
component="img"
|
||
src={resultQuestion.content.back}
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "844px",
|
||
height: spec ? "auto" : isMobile ? "236px" : "306px",
|
||
borderRadius: "8px",
|
||
objectFit: "contain",
|
||
}}
|
||
/>
|
||
)
|
||
}
|
||
{resultQuestion.description !== "" &&
|
||
resultQuestion.description !== " " && (
|
||
<Typography
|
||
sx={{
|
||
fontSize: "23px",
|
||
fontWeight: 700,
|
||
m: "20px 0",
|
||
color: theme.palette.text.primary,
|
||
wordBreak: "break-word"
|
||
}}
|
||
>
|
||
{resultQuestion.description}
|
||
</Typography>
|
||
)}
|
||
|
||
<Typography
|
||
sx={{
|
||
m: "20px 0",
|
||
color: theme.palette.text.primary,
|
||
wordBreak: "break-word"
|
||
}}
|
||
>
|
||
{resultQuestion.title}
|
||
</Typography>
|
||
|
||
{
|
||
resultQuestion.content.text !== "" &&
|
||
resultQuestion.content.text !== " " && (
|
||
<Typography
|
||
sx={{
|
||
fontSize: "18px",
|
||
m: "20px 0",
|
||
wordBreak: "break-word",
|
||
color: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{
|
||
resultQuestion.content.text
|
||
}
|
||
</Typography>
|
||
)
|
||
}
|
||
</Box>
|
||
|
||
|
||
<Box width="100%">
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
width: "100%",
|
||
justifyContent: "end",
|
||
px: "20px",
|
||
}}
|
||
>
|
||
{show_badge &&
|
||
<Box
|
||
component={Link}
|
||
target={"_blank"}
|
||
href={
|
||
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
|
||
}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
mt: "15px",
|
||
gap: "10px",
|
||
textDecoration: "none",
|
||
mb: "15px"
|
||
}}
|
||
>
|
||
<NameplateLogo
|
||
style={{
|
||
fontSize: "23px",
|
||
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
|
||
}}
|
||
/>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "14px",
|
||
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",
|
||
borderTop: "1px solid #9A9AAF80",
|
||
p:
|
||
(
|
||
settings.cfg.resultInfo.showResultForm === "before" &&
|
||
!Boolean(settings.cfg.score)
|
||
) ||
|
||
(
|
||
settings.cfg.resultInfo.showResultForm === "after" &&
|
||
resultQuestion.content.redirect
|
||
)
|
||
? "20px" : "0",
|
||
}}
|
||
>
|
||
{settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
|
||
<Button
|
||
onClick={() => setCurrentQuizStep("contactform")}
|
||
variant="contained"
|
||
sx={{
|
||
p: "10px 20px",
|
||
width: "auto",
|
||
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: "auto", height: "50px"}}
|
||
>
|
||
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|