Merge branch 'dev' into 'staging'

Dev See merge request frontend/squzanswerer!144
2024-05-07 18:19:25 +00:00 · 2024-05-07 18:19:25 +00:00 · 496d78ce07
commit 496d78ce07
parent b95fe54d9a 021ecdfa47
6 changed files with 148 additions and 127 deletions
--- a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
+++ b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
@ -1,17 +1,17 @@
-import { useEffect, useRef, useState, } from "react";
-import { Box, Button, Link, Typography, useTheme, } from "@mui/material";
+import {useEffect, useRef, useState,} from "react";
+import {Box, Button, Link, Typography, useTheme,} from "@mui/material";

 import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";

-import { DESIGN_LIST } from "@utils/designList.ts";
-import { sendFC, SendFCParams } from "@api/quizRelase.ts";
-import { useQuizData } from "@contexts/QuizDataContext.ts";
-import { NameplateLogo } from "@icons/NameplateLogo.tsx";
-import { QuizQuestionResult } from "@model/questionTypes/result.ts";
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared.ts";
-import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
-import { enqueueSnackbar } from "notistack";
-import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
+import {DESIGN_LIST} from "@utils/designList.ts";
+import {sendFC, SendFCParams} from "@api/quizRelase.ts";
+import {useQuizData} from "@contexts/QuizDataContext.ts";
+import {NameplateLogo} from "@icons/NameplateLogo.tsx";
+import {QuizQuestionResult} from "@model/questionTypes/result.ts";
+import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
+import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
+import {enqueueSnackbar} from "notistack";
+import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
 import {
  FormContactFieldData,
  FormContactFieldName,
@ -19,7 +19,10 @@ import {
 import {
  Inputs
 } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
-import { EMAIL_REGEXP } from "@utils/emailRegexp.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
-          sx={{
-            width: isMobile ? undefined : "100%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
-            margin: isMobile ? 0 : "40px 0",
-            padding: isMobile ? "0" : "0 40px"
-          }}
-        >
+          <ContactTextBlock settings={settings} />
+        <Box sx={{
+          flexGrow: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexDirection: "column",
+          backgroundColor: theme.palette.background.default,
+          height:  "auto",
+        }}>
          <Box
-            sx={{
-              maxWidth: "630px",
-              width: "100%",
-              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>
-
-        <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,45 +324,31 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
            >
              {settings.cfg.formContact?.button || "Получить результаты"}
            </Button>
-          }
+          </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",
-                mt: "55px",
-                mb: "40px",
-                gap: "10px",
-                textDecoration: "none",
-                position: "absolute",
-                bottom: 0,
-                left: isMobile ? "28%" : undefined
-              }}
-            >
-              <NameplateLogo
-                style={{
-                  fontSize: "20px",
-                  color: quizThemes[settings.cfg.theme].isLight
-                    ? "#151515"
-                    : "#FFFFFF",
-                }}
-              />
-              {/*<Typography*/}
-              {/*  sx={{*/}
-              {/*    fontSize: "14px",*/}
-              {/*    color: quizThemes[settings.cfg.theme].isLight*/}
-              {/*      ? "#4D4D4D"*/}
-              {/*      : "#F5F7FF",*/}
-              {/*    whiteSpace: "nowrap",*/}
-              {/*  }}*/}
-              {/*>*/}
-              {/*  Сделано на PenaQuiz*/}
-              {/*</Typography>*/}
-            </Box>
+              <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",
+                    mt: "55px",
+                    mb: isMobile? "30px": isTablet? "40px" :"50px",
+                    gap: "10px",
+                    textDecoration: "none",
+                  }}
+              >
+                <NameplateLogo
+                    style={{
+                      fontSize: "20px",
+                      color: quizThemes[settings.cfg.theme].isLight
+                          ? "#151515"
+                          : "#FFFFFF",
+                    }}
+                />
+              </Box>
          )}
        </Box>
      </Box>
--- a/lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx
+++ b/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>
+    )
+}
--- a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx
+++ b/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,
--- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
+++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
@ -90,6 +90,7 @@ export default function ViewPublicationPage() {

      quizStepElement = (
        <Question
+          key={currentQuestion.id}
          currentQuestion={currentQuestion}
          currentQuestionStepNumber={currentQuestionStepNumber}
          prevButton={
--- a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx
+++ b/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=""
              />
--- a/lib/model/settingsData.ts
+++ b/lib/model/settingsData.ts
@ -1,4 +1,4 @@
-import { AnyTypedQuizQuestion } from "./questionTypes/shared";
+import {AnyTypedQuizQuestion} from "./questionTypes/shared";

 export type QuizStartpageType = "standard" | "expanded" | "centered" | null;

@ -41,18 +41,20 @@ export type FCField = {
  used: boolean;
 };

+export type QuizSettingsConfig = {
+  fp: boolean;
+  rep: boolean;
+  name: string;
+  lim: number;
+  due: number;
+  delay: number;
+  pausable: boolean;
+  cfg: QuizConfig;
+}
+
 export type QuizSettings = {
  questions: AnyTypedQuizQuestion[];
-  settings: {
-    fp: boolean;
-    rep: boolean;
-    name: string;
-    lim: number;
-    due: number;
-    delay: number;
-    pausable: boolean;
-    cfg: QuizConfig;
-  };
+  settings: QuizSettingsConfig;
  cnt: number;
  recentlyCompleted: boolean;
  show_badge: boolean;