399 lines
20 KiB
TypeScript
399 lines
20 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
ButtonBase,
|
||
Link,
|
||
Paper,
|
||
Typography,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
|
||
import {QuizPreviewLayoutByType} from "./QuizPreviewLayoutByType";
|
||
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
|
||
|
||
import {useQuizData} from "@contexts/QuizDataContext";
|
||
import {useRootContainerSize} from "@contexts/RootContainerWidthContext";
|
||
|
||
import {useUADevice} from "@utils/hooks/useUADevice";
|
||
import {quizThemes} from "@utils/themes/Publication/themePublication";
|
||
|
||
import {NameplateLogo} from "@icons/NameplateLogo";
|
||
import {useQuizViewStore} from "@/stores/quizView";
|
||
import {DESIGN_LIST} from "@/utils/designList";
|
||
|
||
export const StartPageViewPublication = () => {
|
||
const theme = useTheme();
|
||
const { settings, show_badge, quizId, questions } = useQuizData();
|
||
const { isMobileDevice } = useUADevice();
|
||
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
|
||
|
||
const isMobile = useRootContainerSize() < 700;
|
||
const isTablet = useRootContainerSize() < 800;
|
||
|
||
const handleCopyNumber = () => {
|
||
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
|
||
};
|
||
|
||
const background =
|
||
settings.cfg.startpage.background.type === "image" ? (
|
||
<img
|
||
src={
|
||
settings.cfg.startpage.background.desktop ||
|
||
DESIGN_LIST[settings.cfg.theme] ||
|
||
""
|
||
}
|
||
alt=""
|
||
style={{
|
||
display: "block",
|
||
width:
|
||
isMobile || settings.cfg.startpageType === "expanded"
|
||
? "100%"
|
||
: undefined,
|
||
height: "100%",
|
||
minWidth: "100%",
|
||
maxHeight: "100%",
|
||
objectFit: "cover",
|
||
overflow: "hidden",
|
||
}}
|
||
/>
|
||
) : settings.cfg.startpage.background.type === "video" ? (
|
||
settings.cfg.startpage.background.video ? (
|
||
<YoutubeEmbedIframe
|
||
videoUrl={settings.cfg.startpage.background.video}
|
||
containerSX={{
|
||
width: settings.cfg.startpageType === "centered" ? "550px" : "100%",
|
||
height:
|
||
settings.cfg.startpageType === "centered" ? "275px" : "100%",
|
||
borderRadius:
|
||
settings.cfg.startpageType === "centered" ? "10px" : "0",
|
||
overflow: "hidden",
|
||
"& iframe": {
|
||
width: "100%",
|
||
height: "100%",
|
||
transform:
|
||
settings.cfg.startpageType === "centered"
|
||
? ""
|
||
: settings.cfg.startpageType === "expanded"
|
||
? "scale(1.5)"
|
||
: "scale(2.4)",
|
||
},
|
||
}}
|
||
/>
|
||
) : null
|
||
) : null;
|
||
|
||
const quizHeaderBlock = (<Box
|
||
sx={{
|
||
margin:
|
||
settings.cfg.startpageType === "centered" ? "0 auto" : null,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "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: "12px",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
wordBreak: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "normal" : "break-word",
|
||
fontFamily: "Helvetica Neue",
|
||
}}
|
||
>
|
||
{settings.cfg.info.orgname}
|
||
</Typography>
|
||
</Box>
|
||
</Box>)
|
||
|
||
const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
|
||
|
||
return (
|
||
<Paper
|
||
className="settings-preview-draghandle"
|
||
sx={{
|
||
borderRadius: 0,
|
||
height: "100%",
|
||
width: "100%",
|
||
background:
|
||
settings.cfg.startpageType === "expanded"
|
||
? settings.cfg.startpage.position === "left"
|
||
? "linear-gradient(90deg,#272626,transparent)"
|
||
: settings.cfg.startpage.position === "center"
|
||
? "linear-gradient(180deg,transparent,#272626)"
|
||
: "linear-gradient(270deg,#272626,transparent)"
|
||
: theme.palette.background.default,
|
||
|
||
color: settings.cfg.startpageType === "expanded" ? "white" : "black",
|
||
}}
|
||
>
|
||
<QuizPreviewLayoutByType
|
||
quizHeaderBlock={quizHeaderBlock
|
||
}
|
||
quizMainBlock={
|
||
<>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
|
||
alignItems:
|
||
settings.cfg.startpageType === "centered"
|
||
? "center"
|
||
: settings.cfg.startpageType === "expanded"
|
||
? settings.cfg.startpage.position === "center"
|
||
? "center"
|
||
: "start"
|
||
: "start",
|
||
marginTop: "28px",
|
||
width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontFamily: "Helvetica Neue",
|
||
fontWeight: "500",
|
||
fontSize: "26px",
|
||
fontStyle: "normal",
|
||
fontStretch: "normal",
|
||
lineHeight: "1.2",
|
||
overflowWrap: "break-word",
|
||
width: "100%",
|
||
textAlign:
|
||
settings.cfg.startpageType === "centered" ||
|
||
settings.cfg.startpage.position === "center"
|
||
? "center"
|
||
: "-moz-initial",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{settings.name}
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontFamily: "Helvetica Neue",
|
||
fontSize: "17px",
|
||
fontWeight: "400",
|
||
margin: "16px 0 30px",
|
||
overflowWrap: "break-word",
|
||
width: "100%",
|
||
textAlign:
|
||
settings.cfg.startpageType === "centered" ||
|
||
settings.cfg.startpage.position === "center"
|
||
? "center"
|
||
: "-moz-initial",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{settings.cfg.startpage.description}
|
||
</Typography>
|
||
<Box
|
||
width={
|
||
settings.cfg.startpageType === "standard" ? "100%" : "auto"
|
||
}
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
disabled={realQuestionsCount === 0}
|
||
sx={{
|
||
fontFamily: "Helvetica Neue",
|
||
fontSize: "18px",
|
||
padding: "10px 20px",
|
||
width: "auto",
|
||
background: theme.palette.primary.main,
|
||
borderRadius: "12px",
|
||
}}
|
||
onClick={() => setCurrentQuizStep("question")}
|
||
>
|
||
{settings.cfg.startpage.button.trim()
|
||
? settings.cfg.startpage.button
|
||
: "Пройти тест"}
|
||
</Button>
|
||
</Box>
|
||
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexGrow:
|
||
settings.cfg.startpageType === "centered"
|
||
? isMobile
|
||
? 0
|
||
: 1
|
||
: 0,
|
||
gap: "20px",
|
||
alignItems: "flex-end",
|
||
justifyContent: settings.cfg.startpageType === "centered" && isMobile? "center" :"space-between",
|
||
width: "100%",
|
||
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" :"wrap",
|
||
}}
|
||
>
|
||
{settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"&& !isMobile && quizHeaderBlock}
|
||
<Box sx={{ maxWidth: "300px",
|
||
display: settings.cfg.startpageType === "centered" && isMobile? "flex" : "block",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
|
||
{settings.cfg.info.site && (
|
||
<Link href={settings.cfg.info.site}
|
||
sx={{marginBottom: settings.cfg.startpageType === "centered" && isMobile ? "0" : "16px"}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontFamily: "Helvetica Neue",
|
||
fontSize: "16px",
|
||
color: theme.palette.primary.main,
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
maxWidth: isTablet ? "200px" : "300px",
|
||
}}
|
||
>
|
||
{settings.cfg.info.site}
|
||
</Typography>
|
||
</Link>
|
||
)}
|
||
{settings.cfg.info.clickable ? (
|
||
isMobileDevice ? (
|
||
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
fontFamily: "Helvetica Neue",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "#FFFFFF"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{settings.cfg.info.phonenumber}
|
||
</Typography>
|
||
</Link>
|
||
) : (
|
||
<ButtonBase onClick={handleCopyNumber}>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
fontFamily: "Helvetica Neue",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "#FFFFFF"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{settings.cfg.info.phonenumber}
|
||
</Typography>
|
||
</ButtonBase>
|
||
)
|
||
) : (
|
||
<Typography
|
||
sx={{
|
||
fontFamily: "Helvetica Neue",
|
||
fontSize: "16px",
|
||
marginTop: "5px",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "#FFFFFF"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{settings.cfg.info.phonenumber}
|
||
</Typography>
|
||
)}
|
||
<Typography
|
||
sx={{
|
||
fontFamily: "Helvetica Neue",
|
||
width: "100%",
|
||
overflowWrap: "break-word",
|
||
fontSize: "12px",
|
||
maxHeight: "120px",
|
||
overflow: "auto",
|
||
marginTop: "5px",
|
||
"&::-webkit-scrollbar": { width: 0 },
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "white"
|
||
: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{settings.cfg.info.law}
|
||
</Typography>
|
||
</Box>
|
||
|
||
{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",
|
||
gap: "15px",
|
||
textDecoration: "none",
|
||
}}
|
||
>
|
||
<NameplateLogo
|
||
style={{
|
||
fontSize: "23px",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "#FFFFFF"
|
||
: quizThemes[settings.cfg.theme].isLight
|
||
? "#151515"
|
||
: "#FFFFFF",
|
||
}}
|
||
/>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "14px",
|
||
color:
|
||
settings.cfg.startpageType === "expanded"
|
||
? "#F5F7FF"
|
||
: quizThemes[settings.cfg.theme].isLight
|
||
? "#4D4D4D"
|
||
: "#F5F7FF",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
Сделано на PenaQuiz
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</>
|
||
}
|
||
backgroundBlock={background}
|
||
startpageType={settings.cfg.startpageType}
|
||
alignType={settings.cfg.startpage.position}
|
||
/>
|
||
</Paper>
|
||
);
|
||
};
|