feat: https to every link
This commit is contained in:
IlyaDoronin
parent
88d1d904a8
commit
49258e859b
@ -1,9 +1,4 @@
|
|||||||
import {
|
import { Box, Button, Link, Typography, useTheme } from "@mui/material";
|
||||||
Box,
|
|
||||||
Button, Link,
|
|
||||||
Typography,
|
|
||||||
useTheme
|
|
||||||
} from "@mui/material";
|
|
||||||
|
|
||||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||||
@ -16,264 +11,266 @@ import { useQuizViewStore } from "@/stores/quizView";
|
|||||||
import { DESIGN_LIST } from "@/utils/designList";
|
import { DESIGN_LIST } from "@/utils/designList";
|
||||||
|
|
||||||
type ResultFormProps = {
|
type ResultFormProps = {
|
||||||
resultQuestion: QuizQuestionResult;
|
resultQuestion: QuizQuestionResult;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useRootContainerSize() < 650;
|
const isMobile = useRootContainerSize() < 650;
|
||||||
const isTablet = useRootContainerSize() < 1000;
|
const isTablet = useRootContainerSize() < 1000;
|
||||||
const { settings, show_badge, quizId } = useQuizData();
|
const { settings, show_badge, quizId } = useQuizData();
|
||||||
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
|
const setCurrentQuizStep = useQuizViewStore(
|
||||||
const spec = settings.cfg.spec;
|
(state) => state.setCurrentQuizStep
|
||||||
console.log(quizThemes[settings.cfg.theme].isLight);
|
);
|
||||||
|
const spec = settings.cfg.spec;
|
||||||
|
console.log(quizThemes[settings.cfg.theme].isLight);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
height: "100%",
|
||||||
|
minHeight: "100%",
|
||||||
|
width: "100%",
|
||||||
|
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: "100%",
|
||||||
|
height: "100%",
|
||||||
|
overflow: "auto",
|
||||||
|
background:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "transparent"
|
||||||
|
: "linear-gradient(90deg,#272626, transparent)"
|
||||||
|
: theme.palette.background.default,
|
||||||
|
scrollbarWidth: "none",
|
||||||
|
"&::-webkit-scrollbar": {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
alignItems: "center",
|
||||||
alignItems: "center",
|
flexWrap: "wrap",
|
||||||
justifyContent: "space-between",
|
gap: "30px",
|
||||||
height: "100%",
|
mb: "7px",
|
||||||
minHeight: "100%",
|
}}
|
||||||
width: "100%",
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
backgroundPosition: "center",
|
|
||||||
backgroundSize: "cover",
|
|
||||||
backgroundImage: settings.cfg.design && !isMobile
|
|
||||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
|
||||||
: null,
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Box
|
{settings.cfg.startpage.logo && (
|
||||||
sx={{
|
<img
|
||||||
display: "flex",
|
src={settings.cfg.startpage.logo}
|
||||||
flexDirection: "column",
|
style={{
|
||||||
justifyContent: "space-between",
|
height: "40px",
|
||||||
alignItems: "center",
|
maxWidth: "110px",
|
||||||
pt: "30px",
|
objectFit: "cover",
|
||||||
width: "100%",
|
}}
|
||||||
height: "100%",
|
alt=""
|
||||||
overflow: "auto",
|
/>
|
||||||
background: settings.cfg.design && !isMobile
|
)}
|
||||||
? quizThemes[settings.cfg.theme].isLight
|
<Typography
|
||||||
? "transparent"
|
sx={{
|
||||||
: "linear-gradient(90deg,#272626, transparent)"
|
fontSize: "14px",
|
||||||
: theme.palette.background.default,
|
color: theme.palette.text.primary,
|
||||||
scrollbarWidth: "none",
|
wordBreak: "break-word",
|
||||||
"&::-webkit-scrollbar": {
|
}}
|
||||||
width: 0,
|
>
|
||||||
},
|
{settings.cfg.info.orgname}
|
||||||
}}
|
</Typography>
|
||||||
>
|
|
||||||
<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: 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 sx={{width: "100%", display: "flex", justifyContent: "center"}}>
|
|
||||||
<Box
|
|
||||||
component="img"
|
|
||||||
src={resultQuestion.content.back}
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
maxWidth: "306px",
|
|
||||||
height: spec ? "auto" : isMobile ? "236px" : "306px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
objectFit: "contain",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{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" &&
|
|
||||||
!settings.cfg.score
|
|
||||||
) ||
|
|
||||||
(
|
|
||||||
settings.cfg.resultInfo.showResultForm === "after" &&
|
|
||||||
resultQuestion.content.redirect
|
|
||||||
)
|
|
||||||
? "20px" : "0",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{settings.cfg.resultInfo.showResultForm === "before" && !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>
|
</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
|
||||||
|
sx={{ width: "100%", display: "flex", justifyContent: "center" }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
component="img"
|
||||||
|
src={resultQuestion.content.back}
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: "306px",
|
||||||
|
height: spec ? "auto" : isMobile ? "236px" : "306px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
objectFit: "contain",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{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" &&
|
||||||
|
!settings.cfg.score) ||
|
||||||
|
(settings.cfg.resultInfo.showResultForm === "after" &&
|
||||||
|
resultQuestion.content.redirect)
|
||||||
|
? "20px"
|
||||||
|
: "0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{settings.cfg.resultInfo.showResultForm === "before" &&
|
||||||
|
!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.includes("https")
|
||||||
|
? resultQuestion.content.redirect
|
||||||
|
: `https://${resultQuestion.content.redirect}`
|
||||||
|
}
|
||||||
|
variant="contained"
|
||||||
|
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
|
||||||
|
>
|
||||||
|
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user