539 lines
16 KiB
TypeScript
539 lines
16 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
ButtonBase,
|
||
Link,
|
||
Paper,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
|
||
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
|
||
import { notReachable } from "../../utils/notReachable";
|
||
import { useUADevice } from "../../utils/hooks/useUADevice";
|
||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||
|
||
interface Props {
|
||
setVisualStartPage: (a: boolean) => void;
|
||
}
|
||
|
||
export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||
const theme = useTheme();
|
||
const quiz = useCurrentQuiz();
|
||
const mode = modes;
|
||
const { isMobileDevice } = useUADevice();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||
|
||
if (!quiz) return null;
|
||
|
||
console.log(quiz);
|
||
|
||
const handleCopyNumber = () => {
|
||
navigator.clipboard.writeText(quiz.config.info.phonenumber);
|
||
};
|
||
|
||
const background =
|
||
quiz.config.startpage.background.type === "image" ? (
|
||
quiz.config.startpage.background.desktop ? (
|
||
<img
|
||
src={quiz.config.startpage.background.desktop}
|
||
alt=""
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
objectFit: "cover",
|
||
overflow: "hidden",
|
||
}}
|
||
/>
|
||
) : null
|
||
) : quiz.config.startpage.background.type === "video" ? (
|
||
quiz.config.startpage.background.video ? (
|
||
<YoutubeEmbedIframe
|
||
videoUrl={quiz.config.startpage.background.video}
|
||
containerSX={{
|
||
width:
|
||
quiz.config.startpageType === "centered"
|
||
? "550px"
|
||
: quiz.config.startpageType === "expanded"
|
||
? "100vw"
|
||
: "100%",
|
||
height:
|
||
quiz.config.startpageType === "centered"
|
||
? "275px"
|
||
: quiz.config.startpageType === "expanded"
|
||
? "100vh"
|
||
: "100%",
|
||
borderRadius:
|
||
quiz.config.startpageType === "centered" ? "10px" : "0",
|
||
overflow: "hidden",
|
||
"& iframe": {
|
||
width: "100%",
|
||
height: "100%",
|
||
transform:
|
||
quiz.config.startpageType === "centered"
|
||
? ""
|
||
: quiz.config.startpageType === "expanded"
|
||
? "scale(1.5)"
|
||
: "scale(2.4)",
|
||
},
|
||
}}
|
||
/>
|
||
) : null
|
||
) : null;
|
||
|
||
console.log(background);
|
||
|
||
return (
|
||
<Paper
|
||
className="quiz-preview-draghandle"
|
||
sx={{
|
||
height: "100vh",
|
||
width: "100vw",
|
||
background:
|
||
quiz.config.startpageType === "expanded" && !isMobile
|
||
? quiz.config.startpage.position === "left"
|
||
? "linear-gradient(90deg,#272626,transparent)"
|
||
: quiz.config.startpage.position === "center"
|
||
? "linear-gradient(180deg,transparent,#272626)"
|
||
: "linear-gradient(270deg,#272626,transparent)"
|
||
: theme.palette.background.default,
|
||
|
||
color: quiz.config.startpageType === "expanded" ? "white" : "black",
|
||
}}
|
||
>
|
||
<QuizPreviewLayoutByType
|
||
quizHeaderBlock={
|
||
<Box p={quiz.config.startpageType === "standard" ? "" : "16px"}>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
mb: "7px",
|
||
}}
|
||
>
|
||
{quiz.config.startpage.logo && (
|
||
<img
|
||
src={quiz.config.startpage.logo}
|
||
style={{
|
||
height: "37px",
|
||
maxWidth: "43px",
|
||
objectFit: "cover",
|
||
}}
|
||
alt=""
|
||
/>
|
||
)}
|
||
<Typography
|
||
sx={{
|
||
fontSize: "14px",
|
||
color:
|
||
quiz.config.startpageType === "expanded" && !isMobile
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{quiz.config.info.orgname}
|
||
</Typography>
|
||
</Box>
|
||
<Link mb="16px" href={quiz.config.info.site}>
|
||
<Typography
|
||
sx={{ fontSize: "16px", color: theme.palette.primary.main }}
|
||
>
|
||
{quiz.config.info.site}
|
||
</Typography>
|
||
</Link>
|
||
</Box>
|
||
}
|
||
quizMainBlock={
|
||
<>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems:
|
||
quiz.config.startpageType === "centered"
|
||
? "center"
|
||
: quiz.config.startpageType === "expanded"
|
||
? quiz.config.startpage.position === "center"
|
||
? "center"
|
||
: "start"
|
||
: "start",
|
||
mt: "28px",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: "bold",
|
||
fontSize: "26px",
|
||
fontStyle: "normal",
|
||
fontStretch: "normal",
|
||
lineHeight: "1.2",
|
||
overflowWrap: "break-word",
|
||
width: "100%",
|
||
textAlign:
|
||
quiz.config.startpageType === "centered"
|
||
? "center"
|
||
: "-moz-initial",
|
||
color:
|
||
quiz.config.startpageType === "expanded" && !isMobile
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{quiz.name}
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
m: "16px 0",
|
||
overflowWrap: "break-word",
|
||
width: "100%",
|
||
textAlign:
|
||
quiz.config.startpageType === "centered"
|
||
? "center"
|
||
: "-moz-initial",
|
||
}}
|
||
>
|
||
{quiz.config.startpage.description}
|
||
</Typography>
|
||
<Box
|
||
width={
|
||
quiz.config.startpageType === "standard" ? "100%" : "auto"
|
||
}
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
fontSize: "16px",
|
||
padding: "10px 15px",
|
||
width:
|
||
quiz.config.startpageType === "standard"
|
||
? "100%"
|
||
: "auto",
|
||
}}
|
||
onClick={() => setVisualStartPage(true)}
|
||
>
|
||
{quiz.config.startpage.button.trim()
|
||
? quiz.config.startpage.button
|
||
: "Пройти тест"}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
mt: "46px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
flexDirection: isMobile ? "column" : "row",
|
||
}}
|
||
>
|
||
<Box sx={{ maxWidth: "300px" }}>
|
||
{quiz.config.info.clickable ? (
|
||
isMobileDevice ? (
|
||
<Link href={`tel:${quiz.config.info.phonenumber}`}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
color: theme.palette.primary.main,
|
||
}}
|
||
>
|
||
{quiz.config.info.phonenumber}
|
||
</Typography>
|
||
</Link>
|
||
) : (
|
||
<ButtonBase onClick={handleCopyNumber}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
color: theme.palette.primary.main,
|
||
}}
|
||
>
|
||
{quiz.config.info.phonenumber}
|
||
</Typography>
|
||
</ButtonBase>
|
||
)
|
||
) : (
|
||
<Typography
|
||
sx={{ fontSize: "16px", color: theme.palette.primary.main }}
|
||
>
|
||
{quiz.config.info.phonenumber}
|
||
</Typography>
|
||
)}
|
||
<Typography
|
||
sx={{
|
||
width: "100%",
|
||
overflowWrap: "break-word",
|
||
fontSize: "12px",
|
||
textAlign: "end",
|
||
}}
|
||
>
|
||
{quiz.config.info.law}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "15px",
|
||
}}
|
||
>
|
||
<NameplateLogo
|
||
style={{
|
||
fontSize: "34px",
|
||
color:
|
||
quiz.config.startpageType === "expanded" && !isMobile
|
||
? "#FFFFFF"
|
||
: mode[quiz.config.theme]
|
||
? "#151515"
|
||
: "#FFFFFF",
|
||
}}
|
||
/>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "20px",
|
||
color:
|
||
quiz.config.startpageType === "expanded" && !isMobile
|
||
? "#F5F7FF"
|
||
: mode[quiz.config.theme]
|
||
? "#4D4D4D"
|
||
: "#F5F7FF",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
Сделано на PenaQuiz
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</>
|
||
}
|
||
backgroundBlock={background}
|
||
startpageType={quiz.config.startpageType}
|
||
alignType={quiz.config.startpage.position}
|
||
/>
|
||
</Paper>
|
||
);
|
||
};
|
||
|
||
function QuizPreviewLayoutByType({
|
||
quizHeaderBlock,
|
||
quizMainBlock,
|
||
backgroundBlock,
|
||
startpageType,
|
||
alignType,
|
||
}: {
|
||
quizHeaderBlock: JSX.Element;
|
||
quizMainBlock: JSX.Element;
|
||
backgroundBlock: JSX.Element | null;
|
||
startpageType: QuizStartpageType;
|
||
alignType: QuizStartpageAlignType;
|
||
}) {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||
function StartPageMobile() {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column-reverse",
|
||
flexGrow: 1,
|
||
justifyContent: "flex-end",
|
||
height: "100vh",
|
||
"&::-webkit-scrollbar": { width: 0 },
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "flex-start",
|
||
p: "25px",
|
||
height: "80%",
|
||
}}
|
||
>
|
||
{quizHeaderBlock}
|
||
<Box
|
||
sx={{
|
||
height: "80%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
{quizMainBlock}
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{backgroundBlock}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
switch (startpageType) {
|
||
case null:
|
||
case "standard": {
|
||
return (
|
||
<>
|
||
{isMobile ? (
|
||
<StartPageMobile />
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection:
|
||
alignType === "left"
|
||
? isMobile
|
||
? "column-reverse"
|
||
: "row"
|
||
: "row-reverse",
|
||
flexGrow: 1,
|
||
justifyContent: isMobile ? "flex-end" : undefined,
|
||
height: "100vh",
|
||
"&::-webkit-scrollbar": { width: 0 },
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: isMobile ? "100%" : "40%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "flex-start",
|
||
p: "25px",
|
||
height: isMobile ? "80%" : undefined,
|
||
}}
|
||
>
|
||
{quizHeaderBlock}
|
||
{quizMainBlock}
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
width: isMobile ? "100%" : "60%",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{backgroundBlock}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
case "expanded": {
|
||
return (
|
||
<>
|
||
{isMobile ? (
|
||
<StartPageMobile />
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
position: "relative",
|
||
display: "flex",
|
||
justifyContent: startpageAlignTypeToJustifyContent[alignType],
|
||
flexGrow: 1,
|
||
height: "100%",
|
||
"&::-webkit-scrollbar": { width: 0 },
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "40%",
|
||
position: "relative",
|
||
padding: "16px",
|
||
zIndex: 3,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: alignType === "center" ? "center" : "start",
|
||
}}
|
||
>
|
||
{quizHeaderBlock}
|
||
{quizMainBlock}
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
zIndex: -1,
|
||
left: 0,
|
||
top: 0,
|
||
height: "100%",
|
||
width: "100%",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{backgroundBlock}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
case "centered": {
|
||
return (
|
||
<>
|
||
{isMobile ? (
|
||
<StartPageMobile />
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
padding: "16px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
height: "100%",
|
||
"&::-webkit-scrollbar": { width: 0 },
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{quizHeaderBlock}
|
||
{backgroundBlock && (
|
||
<Box
|
||
sx={{
|
||
width: "60%",
|
||
overflow: "hidden",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
{backgroundBlock}
|
||
</Box>
|
||
)}
|
||
{quizMainBlock}
|
||
</Box>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
default:
|
||
notReachable(startpageType);
|
||
}
|
||
}
|
||
|
||
const startpageAlignTypeToJustifyContent: Record<
|
||
QuizStartpageAlignType,
|
||
"start" | "center" | "end"
|
||
> = {
|
||
left: "start",
|
||
center: "center",
|
||
right: "end",
|
||
};
|