резулт ищет себя в зависимости от линейности опросника + правки визуала

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Button, Paper, TextField, Link, InputAdornment, useTheme } from "@mui/material";
+import { Box, Typography, Button, useMediaQuery, TextField, Link, InputAdornment, useTheme } from "@mui/material";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
@@ -19,6 +19,10 @@ import { modes } from "../../utils/themes/Publication/themePublication";
 import { QuizQuestionResult } from "@model/questionTypes/result";
 import { ApologyPage } from "./ApologyPage";
 
+
+
+const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
+
 type ContactFormProps = {
   currentQuestion: any;
   showResultForm: boolean;
@@ -40,6 +44,7 @@ export const ContactForm = ({
   setShowContactForm,
   setShowResultForm,
 }: ContactFormProps) => {
+  const theme = useTheme();
   const { settings, items } = useQuestionsStore()
 
   const [ready, setReady] = useState(false)
@@ -51,12 +56,12 @@ export const ContactForm = ({
 
   const fireOnce = useRef(true)
   const [fire, setFire] = useState(false)
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   const followNextForm = () => {
     setShowContactForm(false);
     setShowResultForm(true);
   };
-  const theme = useTheme();
   const mode = modes;
   //@ts-ignore
   const resultQuestion: QuizQuestionResult = items.find((question) => {
@@ -120,9 +125,10 @@ export const ContactForm = ({
     >
       <Box
         sx={{
-          width: "530px",
+          width: isMobile ? "330px" : "530px",
           borderRadius: "4px",
-          boxShadow: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px"
+          overflow: "auto",
+          height: "90vh",
         }}
       >
 
@@ -142,6 +148,7 @@ export const ContactForm = ({
             settings?.cfg.formContact.desc &&
             <Typography
               sx={{
+                color: theme.palette.text.primary,
                 textAlign: "center",
                 m: "20px 0",
                 fontSize: "18px"
@@ -187,7 +194,9 @@ export const ContactForm = ({
             (
               <Button
                 disabled={!(ready && !fire)}
-                variant="contained" onClick={async () => {
+                variant="contained"
+                onClick={async () => {
+                  if (EMAIL_REGEXP.test(email)) {//почта валидна
                     setFire(true)
 
 
@@ -218,6 +227,10 @@ export const ContactForm = ({
                     }
   
                     setFire(false)
+                  } else {
+                      enqueueSnackbar("введена некорректная почта")
+                    }
+                  
                 }}
               >
                 {settings?.cfg.formContact?.button || "Получить результаты"}
@@ -228,11 +241,11 @@ export const ContactForm = ({
             sx={{
               display: "flex",
               mt: "20px",
-              width: "450px",
+              width: isMobile ? "300px" : "450px",
             }}
           >
             <CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} />
-            <Typography>
+            <Typography sx={{ color: theme.palette.text.primary }}>
               С&ensp;
               <Link> Положением об обработке персональных данных </Link>
               &ensp;и&ensp;
@@ -259,7 +272,7 @@ export const ContactForm = ({
               //@ts-ignore
               color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
             }}>
-              Сделано на Penasettings
+              Сделано на PenaQuiz
             </Typography>
           </Box>
         </Box>
@@ -277,6 +290,8 @@ const Inputs = ({
 }: any) => {
   const { settings, items } = useQuestionsStore()
 
+  console.log("______________________EMAIL_REGEXP.test(email)")
+  console.log(EMAIL_REGEXP.test(email))
 
   //@ts-ignore
   const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
@@ -284,7 +299,12 @@ const Inputs = ({
   //@ts-ignore
   const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
   //@ts-ignore
-  const Email = <CustomInput onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
+  const Email = <CustomInput 
+
+  error = {!EMAIL_REGEXP.test(email)}
+  label={!EMAIL_REGEXP.test(email) ? "" : "Некорректная почта"}
+  //@ts-ignore
+  onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
   //@ts-ignore
   const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
   //@ts-ignore
@@ -311,9 +331,11 @@ const Inputs = ({
 }
 
 const CustomInput = ({ title, desc, Icon, onChange }: any) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   //@ts-ignore
   return <Box m="15px 0">
-    <Typography mb="7px">{title}</Typography>
+    <Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
 
     <TextField
       onChange={onChange}

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography, Button, useMediaQuery, useTheme } from "@mui/material";
 
 import { useQuestionsStore } from "@root/quizData/store"
 
@@ -20,25 +20,38 @@ export const ResultForm = ({
   setShowResultForm,
 
 }: ResultFormProps) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const { settings, items } = useQuestionsStore()
-
-  const resultQuestion = (items.find(
-    (question) =>
-      question.type === "result" &&
-      (question.content.rule.parentId === "line" || currentQuestion.id)
-  )) ||
-  items.find(
-    (question) =>
-      question.type === "result" && question.content.rule.parentId === "line"
-  )
   const mode = modes;
 
+  const searchResult = () => {
+    if (Boolean(settings?.cfg.haveRoot)) {
+      //ищём для ветвления
+      return (items.find(
+        (question) =>
+          question.type === "result" &&
+          question.content.rule.parentId === currentQuestion.content.id,
+      ) ||
+      items.find(
+          (question) =>
+            question.type === "result" &&
+            question.content.rule.parentId === "line",
+        ))
+    } else {
+      return items.find(
+        (question) =>
+          question.type === "result" &&
+          question.content.rule.parentId === "line",
+      ) 
+    }
+  };
+  const resultQuestion = searchResult();
 
   const followNextForm = () => {
     setShowResultForm(false);
     setShowContactForm(true);
   };
-
   if (resultQuestion === null || resultQuestion === undefined) {
 
     followNextForm()
@@ -63,7 +76,8 @@ export const ResultForm = ({
             display: "flex",
             flexDirection: "column",
             alignItems: "start",
-            width: "490px",
+            width: isMobile ? "100%" : "490px",
+            padding: isMobile ? "0 16px" : undefined,
           }}
         >
           {
@@ -73,8 +87,8 @@ export const ResultForm = ({
                 //@ts-ignore
                 videoUrl={resultQuestion.content.video}
                 containerSX={{
-                  width: "490px",
+                  width: isMobile ? "100%" : "490px",
-                  height: "280px",
+                  height: isMobile ? "100%" : "280px",
                 }}
               />
             )}
@@ -85,8 +99,8 @@ export const ResultForm = ({
                 component="img"
                 src={resultQuestion.content.back}
                 sx={{
-                  width: "490px",
+                  width: isMobile ? "100%" : "490px",
-                  height: "280px",
+                  height: isMobile ? "100%" : "280px",
                 }}
               ></Box>
             )}
@@ -97,6 +111,7 @@ export const ResultForm = ({
                   fontSize: "23px",
                   fontWeight: 700,
                   m: "20px 0",
+                  color: theme.palette.text.primary,
                 }}
               >
                 {resultQuestion.description}
@@ -106,9 +121,10 @@ export const ResultForm = ({
           <Typography
             sx={{
               m: "20px 0",
+              color: theme.palette.text.primary,
             }}
           >
-            {resultQuestion.title || "Форма результатов"}
+            {resultQuestion.title}
           </Typography>
 
           {
@@ -120,6 +136,7 @@ export const ResultForm = ({
                 sx={{
                   fontSize: "18px",
                   m: "20px 0",
+                  color: theme.palette.text.primary,
                 }}
               >
                 {
@@ -143,9 +160,15 @@ export const ResultForm = ({
                 display: "flex",
                 alignItems: "center",
                 mt: "15px",
+                gap: "10px",
               }}
             >
-              <NameplateLogo style={{ fontSize: "34px" }} />
+            <NameplateLogo
+              style={{
+                fontSize: "34px",
+                color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
+              }}
+            />
               <Typography
                 sx={{
                   fontSize: "20px",

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -5,7 +5,7 @@ import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
 import { useQuestionsStore } from "@root/quizData/store";
 import { NameplateLogo } from "@icons/NameplateLogo";
-import {modes} from "../../utils/themes/Publication/themePublication";
+import { modes } from "../../utils/themes/Publication/themePublication";
 
 
 interface Props {
@@ -18,6 +18,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
   const mode = modes;
   const { isMobileDevice } = useUADevice();
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   if (!settings) return null;
 
@@ -115,7 +116,13 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                   alt=""
                 />
               )}
-              <Typography sx={{ fontSize: "14px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary}}>{settings.cfg.info.orgname}</Typography>
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  color: settings.cfg.startpageType === "expanded"
+                    && !isMobile ? "white" : theme.palette.text.primary
+                }}
+              >{settings.cfg.info.orgname}</Typography>
             </Box>
             <Link mb="16px" href={settings.cfg.info.site}>
               <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
@@ -214,7 +221,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                     {settings.cfg.info.phonenumber}
                   </Typography>
                 )}
-                <Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
+                <Typography sx={{ width: "100%",
+                overflowWrap: "break-word",
+                fontSize: "12px", textAlign: "end",
+                color:
+                  settings.cfg.startpageType === "expanded" && !isMobile
+                    ? "white"
+                    : theme.palette.text.primary,                
+                }}>
                   {settings.cfg.info.law}
                 </Typography>
               </Box>
@@ -259,7 +273,7 @@ function QuizPreviewLayoutByType({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
   function StartPageMobile() {
-      return(
+    return (
       <Box
         sx={{
           display: "flex",
@@ -314,7 +328,7 @@ function QuizPreviewLayoutByType({
       return (
         <>
           {isMobile ? (
-                  <StartPageMobile/>
+            <StartPageMobile />
           ) : (
             <Box
               sx={{
@@ -360,7 +374,7 @@ function QuizPreviewLayoutByType({
       return (
         <>
           {isMobile ? (
-                  <StartPageMobile/>
+            <StartPageMobile />
           ) : (
             <Box
               sx={{
@@ -411,7 +425,7 @@ function QuizPreviewLayoutByType({
       return (
         <>
           {isMobile ? (
-                  <StartPageMobile/>
+            <StartPageMobile />
           ) : (
             <Box
               sx={{

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -115,7 +115,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           onChange={async (_, value) => {
 
 
-            const range = String(value).replace(",", "—");
+
+            const range = String(value).replace(",", "—").replace (/\D/, '');
 
 
             updateAnswer(currentQuestion.id, range);
@@ -144,7 +145,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             placeholder="0"
             value={answer}
             onChange={async ({ target }) => {
-              updateMinRangeDebounced(window.Number(target.value) > max
+              updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max
                 ? String(max)
                 : window.Number(target.value) < min
                   ? String(min)
@@ -174,7 +175,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               placeholder="0"
               value={minRange}
               onChange={({ target }) => {
-                setMinRange(target.value);
+                setMinRange(target.value.replace (/\D/, ''));
 
                 if (window.Number(target.value) >= window.Number(maxRange)) {
                   updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
@@ -198,7 +199,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
               placeholder="0"
               value={maxRange}
               onChange={({ target }) => {
-                setMaxRange(target.value);
+                setMaxRange(target.value.replace (/\D/, ''));
 
                 if (window.Number(target.value) <= window.Number(minRange)) {
                   updateMaxRangeDebounced(`${minRange}—${minRange}`, true);

src/pages/ViewPublicationPage/questions/Page.tsx

@@ -43,7 +43,12 @@ export const Page = ({ currentQuestion }: PageProps) => {
           </Box>
         ) : (
           <YoutubeEmbedIframe
-            containerSX={{ width: "100%", height: "100%", maxHeight: "80vh", objectFit: "contain" }}
+          containerSX={{
+            width: "100%",
+            height: "calc( 100vh - 270px)",
+            maxHeight: "80vh",
+            objectFit: "contain",
+          }}
           videoUrl={currentQuestion.content.video}
           />
         )}

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -78,15 +78,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
           alignItems: "center",
           gap: "20px",
           marginTop: "20px",
-          width: isMobile ? "100%" : undefined
+          flexDirection: "column",
+          width: isMobile ? "100%" : undefined,
         }}
       >
-        <Typography sx={{
-          color: "#9A9AAF"
-          // color: theme.palette.grey2.main
-        }}>
-          {currentQuestion.content.ratingNegativeDescription}
-        </Typography>
         <Box
           sx={{
             display: "inline-block",
@@ -113,7 +108,8 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                 enqueueSnackbar("ответ не был засчитан")
               }
             }}
-            sx={{ height: "50px",
+            sx={{
+              height: "50px",
               gap: isMobile ? undefined : "15px",
               justifyContent: isMobile ? "space-between" : undefined,
               width: isMobile ? "100%" : undefined
@@ -123,11 +119,26 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
             emptyIcon={form?.icon("#9A9AAF")}
           />
         </Box>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            gap: 2,
+            width: "100%",
+          }}
+        >
+          <Typography sx={{
+            color: "#9A9AAF"
+            // color: theme.palette.grey2.main
+          }}>
+            {currentQuestion.content.ratingNegativeDescription}
+          </Typography>
           <Typography sx={{ color: "#9A9AAF" }}>
             {currentQuestion.content.ratingPositiveDescription}
           </Typography>
         </Box>
       </Box>
+    </Box>
   );
 
 };

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -145,16 +145,19 @@ const VariantItem = ({
         color: theme.palette.text.primary,
         padding: "15px",
         border: `1px solid`,
-        borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+        borderColor:
-        backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
+          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+        backgroundColor: mode[settings.cfg.theme]
+          ? "white"
+          : theme.palette.background.default,
         display: "flex",
         maxWidth: "685px",
+        maxHeight: "85px",
         justifyContent: "space-between",
         width: "100%",
         "&.MuiFormControl-root": {
           width: "100%",
-
+        },
-        }
       }}
       value={index}
       labelPlacement="start"

src/pages/ViewPublicationPage/questions/Varimg.tsx

@@ -143,18 +143,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
               color: "#9A9AAF"
             }}
           >
-            {
+            {answer ? (
-              answer ?
             <img
-              src={
+              src={variant?.extendedText || gag}
-                variant?.extendedText || gag
-              }
               style={{ width: "100%", height: "100%", objectFit: "cover" }}
               alt=""
             />
-              :
+          ) : variant?.extendedText || isMobile ? (
-              (variant?.extendedText || isMobile ? ("Выберите вариант ответа ниже") : ("Выберите вариант ответа слева"))
+            "Выберите вариант ответа ниже"
-            }
+          ) : (
+            "Выберите вариант ответа слева"
+          )}
             
           </Box>
          {/* )} */}

src/pages/ViewPublicationPage/tools/YoutubeEmbedIframe.tsx

@@ -1,21 +1,22 @@
 import { Box, SxProps } from "@mui/material";
 
-
-
 interface Props {
   videoUrl: string;
   containerSX?: SxProps;
 }
 
 export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
-    const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
+  const extractYoutubeVideoId =
+    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
   const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
-    if (!videoId) return null;
+  // if (!videoId) return null;
 
   const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
-
+  // https://www.youtube.com/shorts/9VgqBPd6RPA
+  // https://www.youtube.com/watch?v=I2N8hTHhvGY
   return (
-        <Box sx={{
+    <Box
+      sx={{
         width: "100%",
         height: "100%",
         pointerEvents: "none",
@@ -23,15 +24,26 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
           width: "100%",
           height: "100%",
         },
-            ...containerSX
+        ...containerSX,
-        }}>
+      }}
-            <iframe
+    >
+      <Box
+        component="video"
+        sx={{
+          width: "100%",
+          height: "100%",
+        }}
+        autoPlay
+        muted
+        src={videoUrl}
+      />
+      {/* <iframe
         src={embedUrl}
         title="YouTube video player"
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
-            />
+      /> */}
     </Box>
   );
 }