fix startpage preview layout types

src/pages/startPage/StartPageSettings.tsx

@@ -475,6 +475,7 @@ export default function StartPageSettings() {
                         >
                             Расположение элементов
                         </Typography>
+                        {designType !== "centered" &&
                             <Box
                                 sx={{
                                     display: "flex",
@@ -494,7 +495,7 @@ export default function StartPageSettings() {
                                     })}
                                     isActive={quiz.config.startpage.position === "center"}
                                     Icon={AlignCenterIcon}
-                                sx={{ display: designType === "centered" ? "flex" : "none" }}
+                                    sx={{ display: designType === "standard" ? "none" : "flex" }}
                                 />
                                 <SelectableIconButton
                                     onClick={() => updateQuiz(quiz.id, quiz => {
@@ -504,7 +505,7 @@ export default function StartPageSettings() {
                                     Icon={AlignRightIcon}
                                 />
                             </Box>
-
+                        }
                         {(isTablet || !isSmallMonitor) && (
                             <>
                                 <Box

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -1,6 +1,8 @@
 import {
     Box,
     Button,
+    ButtonBase,
+    Link,
     Paper,
     Typography,
     useMediaQuery,
@@ -8,51 +10,53 @@ import {
 } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
+import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
+import { notReachable } from "../../utils/notReachable";
+import { useUADevice } from "../../utils/hooks/useUADevice";
 
 
 export default function QuizPreviewLayout() {
     const theme = useTheme();
     const quiz = useCurrentQuiz();
-    const isTablet = useMediaQuery(theme.breakpoints.down(630));
+    const { isMobileDevice } = useUADevice();
 
     if (!quiz) return null;
 
-    const isMediaFileExist =
+    const handleCopyNumber = () => {
-        (quiz.config.startpage.background.type === "image" &&
+        navigator.clipboard.writeText(quiz.config.info.phonenumber);
-            quiz.config.startpage.background.desktop) ||
+    };
-        (quiz.config.startpage.background.type === "video" &&
+
-            quiz.config.startpage.background.video);
+    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",
+                    }}
+                />
+            )
+            : null
+        : quiz.config.startpage.background.type === "video"
+            ? quiz.config.startpage.background.video
+                ? (
+                    <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
+                )
+                : null
+            : null;
 
     return (
         <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
-            <Box
+            <QuizPreviewLayoutByType
-                sx={{
+                quizHeaderBlock={<>
-                    display: "flex",
+                    <Box sx={{
-                    flexDirection:
-                        quiz.config.startpage.position === "left"
-                            ? "row"
-                            : "row-reverse",
-                    flexGrow: 1,
-                    height: "100%",
-                    "&::-webkit-scrollbar": { width: 0 },
-                }}
-            >
-                <Box
-                    sx={{
-                        width: isMediaFileExist && !isTablet ? "40%" : "100%",
-                        padding: "16px",
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
-                    }}
-                >
-                    <Box
-                        sx={{
                         display: "flex",
                         alignItems: "center",
                         gap: "20px",
-                        }}
+                    }}>
-                    >
                         {quiz.config.startpage.logo && (
                             <img
                                 src={quiz.config.startpage.logo}
@@ -68,15 +72,17 @@ export default function QuizPreviewLayout() {
                             {quiz.config.info.orgname}
                         </Typography>
                     </Box>
-                    <Box
+                </>}
-                        sx={{
+                quizMainBlock={<>
-                            flexGrow: 1,
+                    <Box sx={{
                         display: "flex",
                         gap: "10px",
                         flexDirection: "column",
                         justifyContent: "center",
-                        }}
+                        alignItems: (quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center")
-                    >
+                            ? "center"
+                            : "start",
+                    }}>
                         <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
                         <Typography sx={{ fontSize: "12px" }}>
                             {quiz.config.startpage.description}
@@ -89,42 +95,146 @@ export default function QuizPreviewLayout() {
                                     padding: "10px 15px",
                                 }}
                             >
-                                {quiz.config.startpage.button ? quiz.config.startpage.button : "Пройти тест"}
+                                {quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
                             </Button>
                         </Box>
                     </Box>
                     <Box>
-                        <Typography
+                        {quiz.config.info.clickable ? (
-                            sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
+                            isMobileDevice ? (
-                        >
+                                <Link href={`tel:${quiz.config.info.phonenumber}`}>
+                                    <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
                                         {quiz.config.info.phonenumber}
                                     </Typography>
+                                </Link>
+                            ) : (
+                                <ButtonBase onClick={handleCopyNumber}>
+                                    <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                                        {quiz.config.info.phonenumber}
+                                    </Typography>
+                                </ButtonBase>
+                            )
+                        ) : (
+                            <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                                {quiz.config.info.phonenumber}
+                            </Typography>
+                        )}
                         <Typography sx={{ fontSize: "12px" }}>
                             {quiz.config.info.law}
                         </Typography>
                     </Box>
-                </Box>
+                </>}
-                {!isTablet && isMediaFileExist && (
+                backgroundBlock={background}
-                    <Box sx={{ width: "60%" }}>
+                startpageType={quiz.config.startpageType}
-                        {quiz.config.startpage.background.type === "image" &&
+                alignType={quiz.config.startpage.position}
-                            quiz.config.startpage.background.desktop && (
-                                <img
-                                    src={quiz.config.startpage.background.desktop}
-                                    alt=""
-                                    style={{
-                                        width: "100%",
-                                        height: "100%",
-                                        objectFit: "cover",
-                                    }}
             />
-                            )}
-                        {quiz.config.startpage.background.type === "video" &&
-                            quiz.config.startpage.background.video && (
-                                <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
-                            )}
-                    </Box>
-                )}
-            </Box>
         </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 isTablet = useMediaQuery(theme.breakpoints.down(630));
+
+    switch (startpageType) {
+        case null:
+        case "standard": {
+            return (
+                <Box sx={{
+                    display: "flex",
+                    flexDirection: alignType === "left" ? "row" : "row-reverse",
+                    flexGrow: 1,
+                    height: "100%",
+                    "&::-webkit-scrollbar": { width: 0 },
+                }}>
+                    <Box sx={{
+                        width: !isTablet ? "40%" : "100%",
+                        padding: "16px",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        alignItems: !isTablet ? "flex-start" : "center",
+                    }}>
+                        {quizHeaderBlock}
+                        {quizMainBlock}
+                    </Box>
+                    <Box sx={{
+                        width: "60%",
+                    }}>
+                        {backgroundBlock}
+                    </Box>
+                </Box>
+            );
+        }
+        case "expanded": {
+            return (
+                <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: 2,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        alignItems: alignType === "center" ? "center" : "start",
+                    }}>
+                        {quizHeaderBlock}
+                        {quizMainBlock}
+                    </Box>
+                    <Box sx={{
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        height: "100%",
+                        width: "100%",
+                        zIndex: 1,
+                    }}>
+                        {backgroundBlock}
+                    </Box>
+                </Box>
+            );
+        }
+        case "centered": {
+            return (
+                <Box sx={{
+                    padding: "16px",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    height: "100%",
+                    "&::-webkit-scrollbar": { width: 0 },
+                }}>
+                    {quizHeaderBlock}
+                    {backgroundBlock &&
+                        <Box>
+                            {backgroundBlock}
+                        </Box>
+                    }
+                    {quizMainBlock}
+                </Box>
+            );
+        }
+        default: notReachable(startpageType);
+    }
+}
+
+const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
+    left: "start",
+    center: "center",
+    right: "end",
+};

src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx

@@ -17,6 +17,7 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) {
         <Box sx={{
             width: "100%",
             height: "100%",
+            pointerEvents: "none",
             "& iframe": {
                 width: "100%",
                 height: "100%",

src/ui_kit/StartPagePreview/index.tsx

@@ -107,6 +107,7 @@ export const StartPagePreview = () => {
             topLeft: {
               top: "-1px",
               left: "-1px",
+              zIndex: 100,
             },
           }}
           style={{

src/utils/hooks/useUADevice.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+export function useUADevice(): { isMobileDevice: boolean; } {
+    const [isMobileDevice, setIsMobileDevice] = useState<boolean>(false);
+
+    useEffect(() => {
+        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+        setIsMobileDevice(isMobile);
+    }, [navigator.userAgent]);
+
+    return { isMobileDevice };
+}