Merge branch 'dev' into 'staging'

Dev

See merge request frontend/squzanswerer!105

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -15,17 +15,17 @@ import {
 } from "@mui/material";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
-import {FC, useRef, useState} from "react";
+import { FC, useRef, useState } from "react";
 
-import {sendFC} from "@api/quizRelase";
-import {NameplateLogo} from "@icons/NameplateLogo";
-import {QuizQuestionResult} from "@model/questionTypes/result";
-import {AnyTypedQuizQuestion} from "@model/questionTypes/shared";
-import {quizThemes} from "@utils/themes/Publication/themePublication";
-import {enqueueSnackbar} from "notistack";
-import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
-import {useQuizData} from "@contexts/QuizDataContext";
 import { DESIGN_LIST } from "@/utils/designList";
+import { sendFC } from "@api/quizRelase";
+import { useQuizData } from "@contexts/QuizDataContext";
+import { NameplateLogo } from "@icons/NameplateLogo";
+import { QuizQuestionResult } from "@model/questionTypes/result";
+import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { enqueueSnackbar } from "notistack";
+import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@@ -36,9 +36,9 @@ type Props = {
     onShowResult: () => void;
 };
 
-export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
+export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
     const theme = useTheme();
-    const {settings, questions, quizId, show_badge, preview} = useQuizData();
+    const { settings, questions, quizId, show_badge, preview } = useQuizData();
 
     const [ready, setReady] = useState(false);
     const [name, setName] = useState("");
@@ -68,7 +68,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
         });
 
     if (!resultQuestion) throw new Error("Result question not found");
-    console.log("yfcnhjqrb", settings.cfg.resultInfo.showResultForm)
+
     const inputHC = async () => {
         const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
         const body = {} as any;
@@ -76,7 +76,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
         if (email.length > 0) body.email = email;
         if (phone.length > 0) body.phone = phone;
         if (adress.length > 0) body.address = adress;
-        if (text.length > 0) body.customs = {[FC.text.text || "Фамилия"]: text};
+        if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
 
         if (Object.keys(body).length > 0) {
             try {
@@ -90,7 +90,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                 const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
                 localStorage.setItem(
                     "sessions",
-                    JSON.stringify({...sessions, [quizId]: new Date().getTime()})
+                    JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
                 );
             } catch (e) {
                 enqueueSnackbar("ответ не был засчитан");
@@ -110,7 +110,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
     const isWide = Object.keys(filteredFC).length > 2;
 
     async function handleShowResultsClick() {
-        const FC: any = settings.cfg.formContact.fields
+        const FC: any = settings.cfg.formContact.fields;
         if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
             return enqueueSnackbar("введена некорректная почта");
         }
@@ -142,7 +142,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
             } catch (e) {
                 enqueueSnackbar("повторите попытку позже");
             }
-            if(settings.cfg.resultInfo.showResultForm === "after"){
+            if (settings.cfg.resultInfo.showResultForm === "after") {
                 onShowResult();
             }
 
@@ -170,7 +170,9 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                 backgroundPosition: "center",
                 backgroundSize: "cover",
                 backgroundImage: settings.cfg.design && !isMobile
-                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+                    ? quizThemes[settings.cfg.theme].isLight
+                        ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+                        : `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})`
                     : null,
             }}
         >
@@ -181,11 +183,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                     height: "100%",
                     minHeight: "100%",
                     display: isWide && !isMobile ? "flex" : undefined,
-                    background: settings.cfg.design && !isMobile
+                    background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
-                        ? quizThemes[settings.cfg.theme].isLight
-                            ? "transparent"
-                            : "linear-gradient(90deg,#272626, transparent)"
-                        : theme.palette.background.default,
                 }}
             >
                 <Box
@@ -222,7 +220,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                             }}
                         >
                             {settings.cfg.formContact.title ||
-                            "Заполните форму, чтобы получить результаты теста"}
+                                "Заполните форму, чтобы получить результаты теста"}
                         </Typography>
                         {settings.cfg.formContact.desc && (
                             <Typography
@@ -299,13 +297,13 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                     >
                         <CustomCheckbox
                             label=""
-                            handleChange={({target}) => {
+                            handleChange={({ target }) => {
                                 setReady(target.checked);
                             }}
                             checked={ready}
                             colorIcon={theme.palette.primary.main}
                         />
-                        <Typography sx={{color: theme.palette.text.primary}}>
+                        <Typography sx={{ color: theme.palette.text.primary }}>
                             С&ensp;
                             <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
                                 Положением об обработке персональных данных{" "}
@@ -322,37 +320,37 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                         </Typography>
                     </Box>
                     {show_badge &&
-                    <Box
+                        <Box
-                        component={Link}
+                            component={Link}
-                        target={"_blank"}
+                            target={"_blank"}
-                        href={
+                            href={
-                            `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
+                                `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
                             }
-                        sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            mt: "55px",
-                            mb: "50px",
-                            gap: "15px",
-                            textDecoration: "none",
-                        }}
-                    >
-                        <NameplateLogo
-                            style={{
-                                fontSize: "23px",
-                                color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
-                            }}
-                        />
-                        <Typography
                             sx={{
-                                fontSize: "14px",
+                                display: "flex",
-                                color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
+                                alignItems: "center",
-                                whiteSpace: "nowrap",
+                                mt: "55px",
+                                mb: "50px",
+                                gap: "15px",
+                                textDecoration: "none",
                             }}
                         >
-                            Сделано на PenaQuiz
+                            <NameplateLogo
-                        </Typography>
+                                style={{
-                    </Box>
+                                    fontSize: "23px",
+                                    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>
@@ -362,26 +360,26 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
 };
 
 const Inputs = ({
-                    name,
+    name,
-                    setName,
+    setName,
-                    email,
+    email,
-                    setEmail,
+    setEmail,
-                    phone,
+    phone,
-                    setPhone,
+    setPhone,
-                    text,
+    text,
-                    setText,
+    setText,
-                    adress,
+    adress,
-                    setAdress,
+    setAdress,
-                }: any) => {
+}: any) => {
-    const {settings} = useQuizData();
+    const { settings } = useQuizData();
 
     const FC = settings.cfg.formContact.fields;
 
     if (!FC) return null;
-    console.log(email)
+    console.log(email);
     const Name = (
         <CustomInput
-            onChange={({target}) => setName(target.value)}
+            onChange={({ target }) => setName(target.value)}
             id={name}
             title={FC["name"].innerText || "Введите имя"}
             desc={FC["name"].text || "Имя"}
@@ -390,7 +388,7 @@ const Inputs = ({
     );
     const Email = (
         <CustomInput
-            onChange={({target}) => setEmail(target.value.replaceAll(/\s/g, ''))}
+            onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
             id={email}
             title={FC["email"].innerText || "Введите Email"}
             desc={FC["email"].text || "Email"}
@@ -399,7 +397,7 @@ const Inputs = ({
     );
     const Phone = (
         <CustomInput
-            onChange={({target}) => setPhone(target.value)}
+            onChange={({ target }) => setPhone(target.value)}
             id={phone}
             title={FC["phone"].innerText || "Введите номер телефона"}
             desc={FC["phone"].text || "Номер телефона"}
@@ -408,7 +406,7 @@ const Inputs = ({
     );
     const Text = (
         <CustomInput
-            onChange={({target}) => setText(target.value)}
+            onChange={({ target }) => setText(target.value)}
             id={text}
             title={FC["text"].text || "Введите фамилию"}
             desc={FC["text"].innerText || "Фамилия"}
@@ -417,7 +415,7 @@ const Inputs = ({
     );
     const Adress = (
         <CustomInput
-            onChange={({target}) => setAdress(target.value)}
+            onChange={({ target }) => setAdress(target.value)}
             id={adress}
             title={FC["address"].innerText || "Введите адрес"}
             desc={FC["address"].text || "Адрес"}
@@ -446,16 +444,16 @@ const Inputs = ({
     }
 };
 
-const CustomInput = ({title, desc, Icon, onChange, id}: {
+const CustomInput = ({ title, desc, Icon, onChange, id }: {
     id: string;
     title: string;
     desc: string;
-    Icon: FC<{ color: string; backgroundColor: string }>;
+    Icon: FC<{ color: string; backgroundColor: string; }>;
     onChange: TextFieldProps["onChange"];
 }) => {
     const theme = useTheme();
     const isMobile = useRootContainerSize() < 600;
-    const {settings} = useQuizData();
+    const { settings } = useQuizData();
     return (
         <Box m="10px 0">
             <Typography mb="7px" color={theme.palette.text.primary}>
@@ -486,7 +484,7 @@ const CustomInput = ({title, desc, Icon, onChange, id}: {
                     startAdornment: (
                         <InputAdornment position="start">
                             <Icon color="gray"
-                                  backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/>
+                                backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
                         </InputAdornment>
                     ),
                 }}

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -38,7 +38,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                 height: "100%",
                 minHeight: "100%",
                 width: "100%",
-                overflow: "auto",
                 backgroundColor: theme.palette.background.default,
                 backgroundPosition: "center",
                 backgroundSize: "cover",
@@ -55,8 +54,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                     justifyContent: "space-between",
                     alignItems: "center",
                     pt: "30px",
-                    width: "inherit",
+                    width: "100%",
-                    height: "inherit",
+                    height: "100%",
+                    overflow: "auto",
                     background: settings.cfg.design && !isMobile
                         ? quizThemes[settings.cfg.theme].isLight
                             ? "transparent"
@@ -87,10 +87,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                     <Typography
                         sx={{
                             fontSize: "14px",
-                            color:
+                            color: theme.palette.text.primary,
-                                settings.cfg.startpageType === "expanded"
-                                    ? "white"
-                                    : theme.palette.text.primary,
                             wordBreak: "break-word",
                         }}
                     >

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx

@@ -55,6 +55,7 @@ const StandartLayout = ({
                     justifyContent: "space-between",
                     alignItems: "flex-start",
                     p: "25px",
+                    overflowY: "auto",
                     background:
                         settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
                             ? "linear-gradient(90deg,#272626,transparent)"

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx

@@ -140,7 +140,8 @@ const ExpandedMobileLayout = ({
         left: 0,
         top: 0,
         width: "100%",
-        minHeight: "100%",
+        height: "100%",
+        // minHeight: "100%",
         overflow: "hidden",
         "& > img": {
           display: "block",

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -168,11 +168,12 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                         variant.answer.length <= 60 ? "center" : "flex-start",
                                     position: "relative",
                                     height: "80px",
+                                    justifyContent: "center",
                                     "& .MuiFormControlLabel-label": {
                                         wordBreak: "break-word",
                                         height: variant.answer.length <= 60 ? undefined : "60px",
                                         overflow: "auto",
-                                        paddingLeft: "45px",
+                                        // paddingLeft: "45px",
                                         "&::-webkit-scrollbar": {
                                             width: "4px",
                                         },

lib/components/ViewPublicationPage/questions/Rating.tsx

@@ -83,7 +83,6 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                     gap: "20px",
                     marginTop: "20px",
                     flexDirection: "column",
-                    width: isMobile ? "100%" : undefined,
                 }}
             >
                 <Box
@@ -116,9 +115,9 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                         }}
                         sx={{
                             height: "50px",
-                            gap: isMobile ? undefined : "15px",
                             opacity: "1!important",
-                            "& .MuiRating-root.Mui-disabled": { opacity: "1!important" }
+                            "& .MuiRating-root.Mui-disabled": { opacity: "1!important" },
+                            "& .MuiRating-icon": {mr: isMobile ? undefined : "15px"}
                         }}
                         max={currentQuestion.content.steps}
                         icon={form?.icon(theme.palette.primary.main, isMobile ? 30 : isTablet ? 40 : 50)}
@@ -135,7 +134,6 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                 >
                     <Typography sx={{
                         color: "#9A9AAF"
-                        // color: theme.palette.grey2.main
                     }}>
                         {currentQuestion.content.ratingNegativeDescription}
                     </Typography>

lib/components/ViewPublicationPage/questions/Varimg.tsx

@@ -105,6 +105,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                             : "#9A9AAF",
                                     display: "flex",
                                     margin: 0,
+                                    justifyContent: "space-between",
                                     "&:hover": { borderColor: theme.palette.primary.main },
                                     "& .MuiFormControlLabel-label": {
                                         wordBreak: "break-word",

lib/utils/designList.ts

@@ -1,27 +1,17 @@
 import type { QuizTheme } from "@model/settingsData";
-import Desgin1 from "@icons/designs/design1.jpg";
-import Desgin2 from "@icons/designs/design2.jpg";
-import Desgin3 from "@icons/designs/design3.jpg";
-import Desgin4 from "@icons/designs/design4.jpg";
-import Desgin5 from "@icons/designs/design5.jpg";
-import Desgin6 from "@icons/designs/design6.jpg";
-import Desgin7 from "@icons/designs/design7.jpg";
-import Desgin8 from "@icons/designs/design8.jpg";
-import Desgin9 from "@icons/designs/design9.jpg";
-import Desgin10 from "@icons/designs/design10.jpg";
 
 
 export const DESIGN_LIST: Record<QuizTheme, string> = {
-    Design1: Desgin1,
+    Design1: "https://s.hbpn.link/designs/design1.jpg",
-    Design2: Desgin2,
+    Design2: "https://s.hbpn.link/designs/design2.jpg",
-    Design3: Desgin3,
+    Design3: "https://s.hbpn.link/designs/design3.jpg",
-    Design4: Desgin4,
+    Design4: "https://s.hbpn.link/designs/design4.jpg",
-    Design5: Desgin5,
+    Design5: "https://s.hbpn.link/designs/design5.jpg",
-    Design6: Desgin6,
+    Design6: "https://s.hbpn.link/designs/design6.jpg",
-    Design7: Desgin7,
+    Design7: "https://s.hbpn.link/designs/design7.jpg",
-    Design8: Desgin8,
+    Design8: "https://s.hbpn.link/designs/design8.jpg",
-    Design9: Desgin9,
+    Design9: "https://s.hbpn.link/designs/design9.jpg",
-    Design10: Desgin10,
+    Design10: "https://s.hbpn.link/designs/design10.jpg",
     StandardTheme: "",
     StandardDarkTheme: "",
     PinkTheme: "",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/squzanswerer",
-    "version": "1.0.21",
+    "version": "1.0.23",
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",

src/App.tsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import QuizAnswerer from "../lib/components/QuizAnswerer";
 
 // const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
-const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; //looooong header
+const defaultQuizId = "3c49550d-8c77-4788-bc2d-42586a261514"; //looooong header
 // const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
 
 export default function App() {