Merge remote-tracking branch 'origin/staging'

lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx

@@ -20,6 +20,9 @@ import {
   Inputs
 } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
 import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
+import {
+  ContactTextBlock
+} from "@/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx";
 
 
 type Props = {
@@ -143,23 +146,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
         localStorage.setItem("sessions", JSON.stringify(sessions));
 
         //@ts-ignore
-        let YM = window?.ym;
+        const YM = window?.ym;
         //@ts-ignore
-        let VP = window?._tmr;
+        const VP = window?._tmr;
         if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
           YM(
             settings.cfg.yandexMetricNumber,
             "reachGoal",
             "penaquiz-contacts"
           );
-        };
+        }
         if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
           VP.push({
             type: "reachGoal",
             id: settings.cfg.vkMetricNumber,
             goal: "penaquiz-contacts"
           });
-        };
+        }
       } catch (e) {
         enqueueSnackbar("повторите попытку позже");
       }
@@ -172,23 +175,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
   }
   useEffect(() => {
     //@ts-ignore
-    let YM = window?.ym;
+    const YM = window?.ym;
     //@ts-ignore
-    let VP = window?._tmr;
+    const VP = window?._tmr;
     if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
       YM(
         settings.cfg.yandexMetricNumber,
         "reachGoal",
         "penaquiz-form"
       );
-    };
+    }
     if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
       VP.push({
         type: "reachGoal",
         id: settings.cfg.vkMetricNumber,
         goal: "penaquiz-form"
       });
-    };
+    }
   }, [])
 
   return (
@@ -213,7 +216,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
           settings.cfg.design && !isMobile
             ? quizThemes[settings.cfg.theme].isLight
               ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-              : `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]
+                  : `linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%), url(${DESIGN_LIST[settings.cfg.theme]
               })`
             : null,
       }}
@@ -231,65 +234,22 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               : theme.palette.background.default,
         }}
       >
-        <Box
+          <ContactTextBlock settings={settings} />
-          sx={{
+        <Box sx={{
-            width: isMobile ? undefined : "100%",
+          flexGrow: 0,
           display: "flex",
-            flexDirection: "column",
           alignItems: "center",
-            justifyContent: "center",
+          justifyContent: "space-between",
-            borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
-            margin: isMobile ? 0 : "40px 0",
-            padding: isMobile ? "0" : "0 40px"
-          }}
-        >
-          <Box
-            sx={{
-              maxWidth: "630px",
-              width: "100%",
-              display: "flex",
           flexDirection: "column",
-              alignItems: "flex-start",
+          backgroundColor: theme.palette.background.default,
-              justifyContent: "center",
+          height:  "auto",
-              padding: isMobile ? "40px 20px 0 20px" : "0",
+        }}>
-              mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
-            }}
-          >
-            <Typography
-              sx={{
-                textAlign: isTablet ? undefined : "center",
-                fontSize: "24px",
-                lineHeight: "normal",
-                fontWeight: 501,
-                color: theme.palette.text.primary,
-                wordBreak: "break-word",
-              }}
-            >
-              {settings.cfg.formContact.title ||
-                "Заполните форму, чтобы получить результаты теста"}
-            </Typography>
-            {settings.cfg.formContact.desc && (
-              <Typography
-                sx={{
-                  color: theme.palette.text.primary,
-                  m: "20px 0",
-                  fontSize: "18px",
-                  wordBreak: "break-word",
-                }}
-              >
-                {settings.cfg.formContact.desc}
-              </Typography>
-            )}
-          </Box>
-        </Box>
-
           <Box
           sx={{
             display: "flex",
             alignItems: isMobile ? undefined : "center",
             justifyContent: "center",
             flexDirection: "column",
-            backgroundColor: theme.palette.background.default,
             p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
           }}
         >
@@ -345,9 +305,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
               &ensp;ознакомлен
             </Typography>
           </Box>
-          {
+
-            // resultQuestion &&
-            // settings.cfg.resultInfo.when === "after" &&
             <Button
               disabled={!(ready && !fire)}
               variant="contained"
@@ -366,7 +324,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
             >
               {settings.cfg.formContact?.button || "Получить результаты"}
             </Button>
-          }
+          </Box>
           {show_badge && (
               <Box
                   component={Link}
@@ -377,12 +335,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                     display: "flex",
                     alignItems: "center",
                     mt: "55px",
-                mb: "40px",
+                    mb: isMobile? "30px": isTablet? "40px" :"50px",
                     gap: "10px",
                     textDecoration: "none",
-                position: "absolute",
-                bottom: 0,
-                left: isMobile ? "28%" : undefined
                   }}
               >
                 <NameplateLogo
@@ -393,17 +348,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                           : "#FFFFFF",
                     }}
                 />
-              {/*<Typography*/}
-              {/*  sx={{*/}
-              {/*    fontSize: "14px",*/}
-              {/*    color: quizThemes[settings.cfg.theme].isLight*/}
-              {/*      ? "#4D4D4D"*/}
-              {/*      : "#F5F7FF",*/}
-              {/*    whiteSpace: "nowrap",*/}
-              {/*  }}*/}
-              {/*>*/}
-              {/*  Сделано на PenaQuiz*/}
-              {/*</Typography>*/}
               </Box>
           )}
         </Box>

lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx

@@ -0,0 +1,66 @@
+import {Box, Typography, useTheme} from "@mui/material";
+import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
+import {QuizSettingsConfig} from "@model/settingsData.ts";
+import {FC} from "react";
+
+type ContactTextBlockProps = {
+    settings: QuizSettingsConfig;
+}
+
+export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
+    const theme = useTheme();
+    const isMobile = useRootContainerSize() < 850;
+    const isTablet = useRootContainerSize() < 1000;
+    return (
+        <Box
+            sx={{
+                flexGrow: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
+                margin: isMobile ? 0 : "40px 0",
+                padding: isMobile ? "0" : "0 40px"
+            }}
+        >
+            <Box
+                sx={{
+                    maxWidth: isMobile? "100%" : isTablet? "410px" : "630px",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    justifyContent: "center",
+                    padding: isMobile ? "40px 20px 0 20px" : "0",
+                    mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
+                }}
+            >
+                <Typography
+                    sx={{
+                        textAlign: isTablet ? undefined : "center",
+                        fontSize: "24px",
+                        lineHeight: "normal",
+                        fontWeight: 501,
+                        color: theme.palette.text.primary,
+                        wordBreak: "break-word",
+                    }}
+                >
+                    {settings.cfg.formContact.title ||
+                        "Заполните форму, чтобы получить результаты теста"}
+                </Typography>
+                {settings.cfg.formContact.desc && (
+                    <Typography
+                        sx={{
+                            color: theme.palette.text.primary,
+                            m: "20px 0",
+                            fontSize: "18px",
+                            wordBreak: "break-word",
+                        }}
+                    >
+                        {settings.cfg.formContact.desc}
+                    </Typography>
+                )}
+            </Box>
+        </Box>
+    )
+}

lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx

@@ -20,6 +20,13 @@ export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
             value={country}
             onChange={handleChange}
             renderValue={(value) => value}
+            MenuProps={{
+                PaperProps: {
+                    style: {
+                        backgroundColor: theme.palette.background.default,
+                    },
+                },
+            }}
             sx={{
                 minWidth: 50,
                 backgroundColor: theme.palette.background.default,

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -90,6 +90,7 @@ export default function ViewPublicationPage() {
 
       quizStepElement = (
         <Question
+          key={currentQuestion.id}
           currentQuestion={currentQuestion}
           currentQuestionStepNumber={currentQuestionStepNumber}
           prevButton={

lib/components/ViewPublicationPage/questions/Varimg/index.tsx

@@ -100,7 +100,8 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
           {answer ? (
             variant?.extendedText ? (
               <img
-                src={variant?.extendedText}
+                key={variant.extendedText}
+                src={variant.extendedText}
                 style={{ width: "100%", height: "100%", objectFit: "cover" }}
                 alt=""
               />

lib/model/settingsData.ts

@@ -41,9 +41,7 @@ export type FCField = {
   used: boolean;
 };
 
-export type QuizSettings = {
+export type QuizSettingsConfig = {
-  questions: AnyTypedQuizQuestion[];
-  settings: {
   fp: boolean;
   rep: boolean;
   name: string;
@@ -52,7 +50,11 @@ export type QuizSettings = {
   delay: number;
   pausable: boolean;
   cfg: QuizConfig;
-  };
+}
+
+export type QuizSettings = {
+  questions: AnyTypedQuizQuestion[];
+  settings: QuizSettingsConfig;
   cnt: number;
   recentlyCompleted: boolean;
   show_badge: boolean;