Merge branch 'dev' into 'main'

chore: Restrict image uploads to JPG and PNG formats

See merge request frontend/squiz!76

cypress/e2e/quizPublish.cy.ts

@@ -0,0 +1,296 @@
+import "cypress-file-upload";
+
+describe("Форма Входа", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000");
+    cy.wait(1000);
+    cy.contains("Регистрация / Войти").click();
+    const login = "valid_user@exammple.com";
+    const password = "valid_password";
+
+    cy.get("#email").type(login);
+    cy.get("#password").type(password);
+    cy.get('button[type="submit"]').click();
+  });
+
+  it("Тестирование создания, публикации и удаления опросника с проверкой обязательных вопросов", () => {
+    cy.get('[data-cy="create-quiz"]').click();
+    cy.wait(1000);
+    cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
+    cy.wait(1000);
+    cy.get('button[data-cy="select-quiz-layout-standard"]').click();
+
+    cy.get('input[type="checkbox"]').click();
+
+    cy.get('[data-cy="setup-questions"]').click();
+    cy.contains("button", "Варианты с картинками").click();
+
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("div", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Варианты ответов +
+
+    cy.contains("button", "Варианты ответов").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("label", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+
+    cy.get('[data-cy="create-question"]').click();
+
+    // Варианты и картинка +
+
+    cy.contains("button", "Варианты и картинка").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("div", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Эмоджи +
+
+    cy.contains("button", "Эмоджи").click();
+    cy.contains("label", "Необязательный вопрос").click();
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("div", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Своё поле для ввода +
+
+    cy.contains("button", "Своё поле для ввода").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.get('input[placeholder="Пример ответа"]').eq(0).type("1").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('input[type="text"]').type("email@invalid.com");
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Выпадающий список +
+
+    cy.contains("button", "Выпадающий список").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get("#display-select").click();
+    cy.get("li").eq(0).click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Дата +
+
+    cy.contains("button", "Дата").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('button[data-cy="open-datepicker"]').click();
+
+    cy.wait(500);
+
+    cy.get('button[role="gridcell"]').eq(16).click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Ползунок +
+
+    cy.contains("button", "Ползунок").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('input[aria-invalid="false"][id=":r0:"][placeholder="0"]').type("10");
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Загрузка файла +
+
+    cy.contains("button", "Загрузка файла").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('label.MuiButtonBase-root input[type="file"]').attachFile("./image/Bunner.png");
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Рейтинг
+
+    cy.contains("button", "Рейтинг").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("label", "4 Stars").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Удаления Квиза
+
+    cy.visit("http://localhost:3000/list");
+    cy.wait(500);
+    cy.get('[data-cy="delete-quiz"]').each(($button) => {
+      cy.wrap($button).click();
+      cy.wait(500);
+      cy.contains("button", "Удалить").click();
+    });
+  });
+});

package.json

@@ -21,6 +21,7 @@
         "@types/react-dnd": "^3.0.2",
         "@types/react-dom": "^18.0.0",
         "axios": "^1.5.1",
+        "cypress-file-upload": "^5.0.8",
         "cytoscape": "^3.26.0",
         "cytoscape-popper": "^2.0.0",
         "dayjs": "^1.11.10",
@@ -78,6 +79,6 @@
         "@types/react-beautiful-dnd": "^13.1.4",
         "@types/react-cytoscapejs": "^1.2.4",
         "craco-alias": "^3.0.1",
-        "cypress": "^13.4.0"
+        "cypress": "^13.6.1"
     }
 }

src/assets/icons/ArrowLeftSP.tsx

@@ -0,0 +1,27 @@
+import {Box, SxProps, Theme, useTheme} from "@mui/material";
+
+
+interface Props {
+    right: boolean
+}
+
+export default function ArrowLeftSP({right} : Props) {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: "14px",
+                width: "19px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transform: right ? "rotate(180deg)" : undefined
+            }}
+        >
+            <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z" fill={theme.palette.brightPurple.main}/>
+            </svg>
+        </Box>
+    );
+}

src/assets/icons/CropIcon.tsx

@@ -1,40 +1,10 @@
 import { FC, SVGProps } from "react";
 
-export const CropIcon: FC = () => (
+export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
-  <svg
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    xmlns="http://www.w3.org/2000/svg"
+    <path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    width="24"
+    <path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    height="24"
+    <path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    viewBox="0 0 24 24"
+    <path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    fill="none"
-  >
-    <path
-      d="M6 6H2.25"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6 2.25V18H21.75"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18 15V6H9"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18 21.75V18"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
   </svg>
 );

src/model/questionTypes/shared.ts

@@ -96,6 +96,8 @@ export type AnyTypedQuizQuestion =
     | QuizQuestionRating
     | QuizQuestionResult;
 
+
+
 type FilterQuestionsWithVariants<T> = T extends {
     content: { variants: QuestionVariant[]; };
 } ? T : never;

src/model/quizSettings.ts

@@ -58,6 +58,16 @@ export interface QuizConfig {
             cycle: boolean;
         };
     };
+    formContact: {
+        title: string;
+        desc: string;
+        name: FCField;
+        email: FCField;
+        phone: FCField;
+        text: FCField;
+        address: FCField;
+        button: string
+    };
     info: {
         phonenumber: string;
         clickable: boolean;
@@ -68,6 +78,14 @@ export interface QuizConfig {
     meta: string;
 }
 
+type FCField = {
+    text: string
+    innerText: string
+    key: string
+    required: boolean
+    used: boolean
+}
+
 export const defaultQuizConfig: QuizConfig = {
     type: null,
     noStartPage: false,
@@ -106,5 +124,45 @@ export const defaultQuizConfig: QuizConfig = {
         site: "",
         law: "",
     },
+    formContact: {
+        title: "",
+        desc: "",
+        name: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: true
+        },
+        email: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: true
+        },
+        phone: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: true
+        },
+        text: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: false
+        },
+        address: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: false
+        },
+        button: ""
+    },
     meta: "",
 };

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -1,73 +1,305 @@
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme } from "@mui/material";
+import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material";
-import { incrementCurrentStep } from "@root/quizes/actions";
+import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
 import React from "react";
-import InfoIcon from "../../assets/icons/InfoIcon";
+import Info from "../../assets/icons/Info";
+import Trash from "@icons/trash";
 import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
 import AddPlus from "../../assets/icons/questionsPage/addPlus";
 import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
+import { decrementCurrentStep } from "@root/quizes/actions";
 import ButtonSettingForms from "./ButtonSettingForms";
 import DrawerNewField from "./DrawerParent";
 import WindowMessengers from "./Massengers/WindowMessengers";
 import WindowNewField from "./NewField/WindowNewField";
 import SwitchContactForm from "./switchContactForm";
+import GearIcon from "@icons/GearIcon";
+import { useQuestionsStore } from "@root/questions/store";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+
+
+const buttons = [
+  {
+    name: "Имя",
+    desc: "Дмитрий",
+    key: "name"
+  },
+  {
+    name: "Email",
+    desc: "mail@xample.ru",
+    key: "email"
+  },
+  {
+    name: "Номер",
+    desc: "+7 900 000 00 00",
+    key: "phone"
+  },
+  {
+    name: "Фамилия",
+    desc: "Иванов",
+    key: "text"
+  },
+  {
+    name: "Адрес",
+    desc: "Москва, Лаврушинский пер., 10",
+    key: "address"
+  },
+]
 
 export default function ContactFormPage() {
-  const [drawerNewField, setDrawerNewField] = React.useState(false);
+  const theme = useTheme();
+
+  const quiz = useCurrentQuiz()
+
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+
+  const [drawerNewField, setDrawerNewField] = React.useState("");
   const [drawerMessenger, setDrawerMessenger] = React.useState(false);
 
-  const drawerNewFieldHC = (bool: boolean) => {
+  const drawerNewFieldHC = (str: string) => {
-    setDrawerNewField(bool);
+    setDrawerNewField(str);
   };
   const drawerMessengerHC = (bool: boolean) => {
     setDrawerMessenger(bool);
   };
 
-  const theme = useTheme();
   return (
-    <>
+    <Box
-      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+      sx={{
+        p: isTablet ? "0 0 150px 0" : "0"
+      }}
+    >
+
+
+      <Box sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        m: "67px 0 41px 0",
+      }}>
         <Link
           sx={{
             fontSize: "16px",
             lineHeight: "19px",
             color: theme.palette.brightPurple.main,
             textDecorationColor: theme.palette.brightPurple.main,
+
           }}
         >
           Как собрать данные посетителя
         </Link>{" "}
-        <InfoIcon />
+        {/* <Popover>
+          <Info />
+        </Popover> */}
+
       </Box>
+
+
+      {
+        !quiz?.config.formContact.name.used &&
+          !quiz?.config.formContact.email.used &&
+          !quiz?.config.formContact.phone.used &&
+          !quiz?.config.formContact.text.used &&
+          !quiz?.config.formContact.address.used ?
           <ContactFormParent>
-        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
+            <EmptyCard drawerNewFieldHC={drawerNewFieldHC} />
-          <OneIcon />
+          </ContactFormParent>
-          <IconButton>
+          :
-            {" "}
+          <ContactFormParent>
-            <ExpandMoreIcon />{" "}
+            <ButtonsCard drawerNewFieldHC={drawerNewFieldHC} />
+          </ContactFormParent>
+      }
+
+
+      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
+        <Box sx={{ display: "flex", gap: "8px" }}>
+          <Button
+            onClick={decrementCurrentStep}
+            variant="outlined">
+            <ArrowLeft />
+          </Button>
+          <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
+            Установка квиза
+          </Button>
+        </Box>
+      </Box>
+
+
+      <DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
+        <WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
+      </DrawerNewField>
+
+    </Box>
+  );
+}
+
+interface Props {
+  outerContainerSx?: SxProps<Theme>;
+  children?: React.ReactNode;
+}
+
+function ContactFormParent({ outerContainerSx: sx, children }: Props) {
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+  const quiz = useCurrentQuiz()
+  return (
+    <Paper
+      sx={{
+        maxWidth: "796px",
+        width: "100%",
+        borderRadius: "12px",
+        margin: "20px 0",
+        display: "flex",
+      }}
+    >
+      <Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
+        <Box
+          sx={{
+            // borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
+            maxWidth: "386px",
+            width: "100%",
+            padding: "100px 20px 20px 20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+          }}
+        >
+          <CustomTextField
+            onChange={({ target }) => {
+              updateQuiz(quiz.id, (quiz) => {
+                quiz.config.formContact.title = target.value
+              })
+            }}
+            value={quiz.config.formContact.title}
+            placeholder="Заголовок формы" text={""} />
+          <TextField
+
+            onChange={({ target }) => {
+              updateQuiz(quiz.id, (quiz) => {
+                quiz.config.formContact.desc = target.value
+              })
+            }}
+            value={quiz.config.formContact.desc}
+            id="outlined-multiline-static"
+            multiline
+            rows={8}
+            placeholder="Дополнительный текст формы"
+            sx={{
+              backgroundColor: theme.palette.background.default,
+
+              "& .MuiInputBase-root": {
+                borderRadius: "10px",
+                alignItems: "start",
+                color: theme.palette.grey2.main,
+              color:"black",
+              },
+            }}
+          />
+        </Box>
+        <Divider sx={{
+          height: isTablet ? "1px" : "80%",
+          width: isTablet ? "80%" : "1px",
+          margin: "auto"
+        }}
+          orientation={isTablet ? "horisontal" : "vertical"}
+        />
+        {children}
+      </Box>
+    </Paper>
+  );
+}
+
+
+const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => {
+  const theme = useTheme();
+  const quiz = useCurrentQuiz()
+  return (
+    <>
+      <Typography>{quiz.config.formContact[type].text || name}</Typography>
+      <Box
+        sx={{ display: "flex", mb: "10px" }}
+      >
+        <Typography
+          sx={{
+            color: quiz.config.formContact[type].innerText ? "black" : "#9A9AAF",
+            fontSize: "20px",
+            backgroundColor: theme.palette.background.default,
+            height: "48px",
+            borderRadius: "10px",
+            border: "1px #9A9AAF solid",
+            lineHeight: "21px",
+            p: " 0 25px 0 14px ",
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            position: "relative"
+          }}
+        >
+          {quiz.config.formContact[type].innerText || placeholder}
+          <IconButton
+            onClick={() => drawerNewFieldHC(type)}
+            sx={{
+              position: "absolute",
+              right: "0"
+            }}>
+            <GearIcon height="20px" width="20px" color="#7e2aea" />
+          </IconButton>
+        </Typography>
+        <IconButton
+          onClick={() => updateQuiz(quiz?.id, (quiz) => {
+            quiz.config.formContact[type].used = false
+          })}
+          sx={{
+            width: "48px",
+            ml: "5px"
+          }}
+        >
+          <Trash />
+
         </IconButton>
       </Box>
-        <Box sx={{ display: "flex", flexDirection: "column", gap: "20px", padding: "10px 20px" }}>
+    </>
-          <Typography>Имя*</Typography>
+  )
-          <CustomTextField placeholder="Дмитрий" text={""} />
+}
-          <Typography>E-mail*</Typography>
+
-          <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+const ButtonsCard = ({ drawerNewFieldHC }: any) => {
-          <Typography>Телефон*</Typography>
+  const theme = useTheme();
-          <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+  const quiz = useCurrentQuiz()
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
+
+      {
+        buttons.map((contentData) => {
+          const content = quiz?.config.formContact[contentData.key]
+          return content.used ? <SettingField drawerNewFieldHC={drawerNewFieldHC} key={contentData.key} type={contentData.key} name={content.text || contentData.name} placeholder={content.innerText || contentData.desc} /> : <></>
+        })
+      }
+
+      {
+        (
+          quiz?.config.formContact.name.used &&
+          quiz?.config.formContact.email.used &&
+          quiz?.config.formContact.phone.used &&
+          quiz?.config.formContact.text.used &&
+          quiz?.config.formContact.address.used
+        ) ?
+          <></>
+          :
           <Button
-            onClick={() => drawerNewFieldHC(true)}
+            onClick={() => drawerNewFieldHC("all")}
             variant="contained"
             sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
           >
             Добавить поле +
           </Button>
-          <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}>
+      }
-            <WindowNewField />
-          </DrawerNewField>
       <Link
         component="button"
-            onClick={() => drawerMessengerHC(true)}
+        // onClick={() => drawerMessengerHC(true)}
         sx={{
           fontSize: "16px",
           lineHeight: "19px",
@@ -78,30 +310,50 @@ export default function ContactFormPage() {
       >
         Добавить мессенджеры
       </Link>
-          <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
-            <WindowMessengers />
-          </DrawerNewField>
 
-          <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
+      <PseudoButton />
-            Название кнопки
-          </Button>
     </Box>
-      </ContactFormParent>
+  )
+}
+const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void }) => {
+  const theme = useTheme();
+  const [FC, setFC] = React.useState(false)
+  const openFC = () => setFC(true)
+  const closeFC = () => setFC(false)
+  const popover = React.useRef(null);
 
-      <ContactFormParent>
+  return (
-        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
-          <OneIcon />
+      <Button
-          <IconButton>
+        onClick={() => drawerNewFieldHC("all")}
-            {" "}
+        variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
-            <ExpandMoreIcon />{" "}
-          </IconButton>
-        </Box>
-        <Button variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
         Добавить поле +
       </Button>
       <Box sx={{ display: "flex" }}>
         <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
-          <InfoIcon />
+        <Box ref={popover}>
+          <Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
+        </Box>
+
+        <Popover
+          open={FC}
+          onClose={closeFC}
+          anchorEl={popover.current}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+          disableRestoreFocus
+        >
+          <Typography sx={{ m: "20px", textAlign: "center" }}>
+            Если вам не нужно собирать контакты, <br></br> отключите форму контактов
+          </Typography>
+
+        </Popover>
       </Box>
       <Link
         sx={{
@@ -114,86 +366,42 @@ export default function ContactFormPage() {
       >
         Добавить мессенджеры
       </Link>
-        <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
+      <PseudoButton />
-          Название кнопки
-        </Button>
-      </ContactFormParent>
-      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
-        <IconButton>
-          <AddPlus />
-        </IconButton>
-        <Box sx={{ display: "flex", gap: "8px" }}>
-          <Button variant="outlined">
-            <ArrowLeft />
-          </Button>
-          <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
-            Установка квиза
-          </Button>
     </Box>
-      </Box>
+  )
-    </>
-  );
 }
 
-interface Props {
+const PseudoButton = () => {
-  outerContainerSx?: SxProps<Theme>;
+  const quiz = useCurrentQuiz()
-  children?: React.ReactNode;
-}
-
-function ContactFormParent({ outerContainerSx: sx, children }: Props) {
-  const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
-  const SSHC = (data: string) => {
-    setSwitchState(data);
-  };
   return (
-    <Paper
-      sx={{
-        maxWidth: "796px",
-        width: "100%",
-        borderRadius: "12px",
-        margin: "20px 0",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <Box sx={{ width: "100%", display: "flex" }}>
-        <Box
-          sx={{
-            borderRight: `1px solid ${theme.palette.grey2.main}`,
-            maxWidth: "386px",
-            width: "100%",
-            padding: "113px 20px 20px 20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px",
-          }}
-        >
-          <CustomTextField placeholder="Заголовок формы" text={""} />
     <TextField
-            id="outlined-multiline-static"
+      onChange={({ target }) => {
-            multiline
+        updateQuiz(quiz.id, (quiz) => {
-            rows={8}
+          quiz.config.formContact.button = target.value
-            placeholder="Дополнительный текст формы"
+        })
-            sx={{
-              backgroundColor: theme.palette.background.default,
-
-              "& .MuiInputBase-root": {
-                borderRadius: "10px",
-                alignItems: "start",
-                color: theme.palette.grey2.main,
-              },
       }}
-          />
+      value={quiz.config.formContact.button}
-        </Box>
+      sx={{
-        <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
+        heigth: "44px",
-          {children}
+        width: "190px",
-        </Box>
+        "& .MuiInputBase-root": {
-      </Box>
+          backgroundColor: "#7E2AEA",
-      <Box>
+          borderRadius: "8px",
-        <ButtonSettingForms switchState={switchState} SSHC={SSHC} />
+          color: "white",
-        <SwitchContactForm switchState={switchState} />
+        },
-      </Box>
+        "& .MuiInputBase-input": {
-    </Paper>
+          padding: "10px 20px",
-  );
+          textAlign: "center"
+        },
+        "& .MuiInputBase-input::placeholder": {
+          color: "white",
+          opacity: "1"
+        }
+      }}
+      placeholder="Название кнопки"
+    >
+      {quiz?.config.formContact.button || "Название кнопки"}
+    </TextField>
+
+  )
 }

src/pages/ContactFormPage/DrawerParent.tsx

@@ -7,18 +7,18 @@ import {SxProps, Theme} from "@mui/material";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
-    isOpen: boolean;
+    isOpenDrawer: string;
-    openHC: (arg0: boolean) => void
+    drawerNewFieldHC: (str: string) => void
 }
 
-export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
+export default function DrawerNewField({outerContainerSx: sx, children, isOpenDrawer: isOpen, drawerNewFieldHC }: Props) {
 
     return (
         <>
             <Drawer
                 anchor='right'
-                open={isOpen}
+                open={Boolean(isOpen)}
-                onClose={() => openHC(false)}
+                onClose={() => drawerNewFieldHC("")}
             >
                 <Box
                     sx={{ width: 450 }}

src/pages/ContactFormPage/NewField/ButtonsNewField.tsx

@@ -6,14 +6,19 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
 import TextIcon from "@icons/ContactFormIcon/TextIcon";
 import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 
 interface Props {
     switchState: string
     SSHC: (data:string) => void
+    type: string
 }
 
-export default function ButtonsNewField ({SSHC, switchState}:Props) {
+export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
     const theme = useTheme();
+    const quiz = useCurrentQuiz()
+    console.log(quiz)
+    console.log(type)
     const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
         {icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
         {icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
@@ -31,16 +36,20 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
                 }}
             >
                 {buttonSetting.map( (e,i) => (
+                    type === e.value || type === "all" ?
                     <MiniButtonSetting
+                    disabled = {quiz?.config.formContact[e.value]?.used}
                         key={i}
                         onClick={()=>{SSHC(e.value)}}
                         sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
-                            color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main,
+                            color: switchState === e.value && type === "all" ? '#ffffff' : theme.palette.grey3.main,
                         }}
                     >
                         {e.icon}
                         {e.title}
                     </MiniButtonSetting>
+                    : 
+                    <></>
                 ))}
             </Box>
     )

src/pages/ContactFormPage/NewField/NewFieldParent.tsx

@@ -4,6 +4,8 @@ import CustomTextField from "@ui_kit/CustomTextField";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import Button from "@mui/material/Button";
 import * as React from "react";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { updateQuiz } from "@root/quizes/actions";
 
 interface Props {
     outerContainerSx?: SxProps<Theme>;
@@ -11,30 +13,51 @@ interface Props {
     defaultValue?: string;
     placeholderHelp: string;
     placeholderField: string;
+    drawerNewFieldHC:(a:string)=>void
 }
 
-export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) {
+export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
+    const quiz = useCurrentQuiz()
+    console.log({ defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children })
     return (
         <Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
-                <Typography>Подсказка</Typography>
+                <Typography
-                <CustomTextField placeholder={placeholderHelp} text={''}/>
+                >Подсказка</Typography>
+                <CustomTextField
+                    onChange={({ target }) => {
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].text = target.value
+                        })
+                    }}
+                    value={quiz.config.formContact[defaultValue].text}
+
+                    placeholder={placeholderHelp} text={''} />
             </Box>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
-                <Typography>Подсказка внутри поля</Typography>
+                <Typography
-                <CustomTextField placeholder={placeholderField} text={''}/>
+                >Подсказка внутри поля</Typography>
+                <CustomTextField
+                    onChange={({ target }) => {
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].innerText = target.value
+                        })
+                    }}
+                    value={quiz.config.formContact[defaultValue].innerText}
+
+                    placeholder={placeholderField} text={''} />
             </Box>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+
                 <Typography>Ключ</Typography>
-                <FormControl
-                    fullWidth
-                    variant="standard"
-                    sx={{ p: 0, border: 0 }}
-                >
                 <TextField
-                        disabled
+                    value={quiz.config.formContact[defaultValue].key}
-                        id="outlined-disabled"
+                    onChange={({ target }) => {
-                        value={defaultValue}
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].key = target.value
+                        })
+                    }}
+                    placeholder="text"
                     sx={{
                         "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                             border: 'none'
@@ -45,17 +68,33 @@ export default function NewFieldParent ({defaultValue, placeholderHelp, placehol
                             backgroundColor: '#EEE4FC',
                         },
                     }}
+
                 />
-                </FormControl>
+                <CustomCheckbox
-                <CustomCheckbox label={"Обязательно к заполнению"}/>
+                    checked={quiz.config.formContact[defaultValue].required}
+                    handleChange={({ target }) => {
+                        console.log("click")
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].required = target.checked
+                        })
+                    }}
+
+                    label={"Обязательно к заполнению"} />
             </Box>
-            <Box>
+            {/* <Box>
                 <Typography>Запрашивать на</Typography>
                 <CustomCheckbox label={'Шаг 1'}/>
                 <CustomCheckbox label={'Шаг 2'}/>
-            </Box>
+            </Box> */}
             {children}
-            <Button variant='contained' sx={{maxWidth: '125px'}}>Добавить</Button>
+            <Button
+                onClick={() => {
+                    updateQuiz(quiz.id, (quiz) => {
+                        quiz.config.formContact[defaultValue].used = true
+                    })
+                    drawerNewFieldHC("")
+                }}
+                variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
         </Box>
     )
 }

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

@@ -8,27 +8,29 @@ import CustomizedSwitch from "@ui_kit/CustomSwitch";
 
 interface Props {
     switchState: string,
+    drawerNewFieldHC:(a:string)=>void
 }
 
 
-export default function SwitchNewField({switchState ='name'}: Props) {
+export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) {
     const [SwitchMask, setSwitchMask] = React.useState(false);
+    console.log(switchState)
     const SwitchMaskHC = (bool:boolean) => {
         setSwitchMask(bool)
     }
 
     switch (switchState) {
         case 'name':
-            return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
             break;
         case 'email':
-            return (<NewFieldParent placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
             break;
         case 'phone':
 
             return (
-                <NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
+                <NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
-                    <FormControlLabel
+                    {/* <FormControlLabel
                         value="start"
                         control={<CustomizedSwitch/>}
                         label="Маска для телефона"
@@ -41,7 +43,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                             SwitchMaskHC(!SwitchMask)
                         }}
 
-                    />
+                    /> */}
 
                     {SwitchMask ?
                         <SelectMask/>
@@ -52,10 +54,10 @@ export default function SwitchNewField({switchState ='name'}: Props) {
             );
             break;
         case 'text':
-            return (<NewFieldParent placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
             break;
         case 'address':
-            return (<NewFieldParent placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
             break;
         default:
             return (<></>)

src/pages/ContactFormPage/NewField/WindowNewField.tsx

@@ -5,25 +5,35 @@ import {Typography, useTheme} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import ButtonsNewField from "./ButtonsNewField";
 import SwitchNewField from "./SwitchNewField";
+import { useCurrentQuiz } from '@root/quizes/hooks';
 
 
-export default function WindowNewField() {
+export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) {
+    const quiz = useCurrentQuiz()
     const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('name');
+    const [switchState, setSwitchState] = React.useState("");
+    React.useEffect(() => {
+        for (let val in quiz?.config.formContact) {
+            if (!quiz?.config.formContact[val]?.used && (val !== "title" && val !== "desc" && val !== "button")) {
+                setSwitchState(val)
+                return
+            }
+        }
+    }, [])
+
     const SSHC = (data: string) => {
         setSwitchState(data)
     }
 
-
     return (
         <>
             <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
                 <Typography>Новое поле</Typography>
-                <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
+                <Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
             </Box>
 
-            <Box><ButtonsNewField switchState={switchState} SSHC={SSHC}/></Box>
+            <Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
-            <SwitchNewField switchState={switchState}/>
+            <SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
         </>
     )
 }

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -104,10 +104,7 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <LinkIcon
+            <LinkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-            />
             <Typography>Ссылка на квиз</Typography>
 
             <Tooltip
@@ -242,11 +239,7 @@ export default function InstallQuiz() {
                 }}
               />
             </FormControl>
-            <CopyIcon
+            <CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} marL={"10px"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-              marL={"10px"}
-            />
           </Box>
           <Box
             sx={{
@@ -274,16 +267,11 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <VkIcon
+            <VkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-            />
             <Typography> Вконтакте</Typography>
           </Box>
 
-          <Typography>
+          <Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
-            Для публикации сниппета на стене группы, призывающего пройти тест.
-          </Typography>
           <Link
             component="button"
             onClick={handleOpenVk}
@@ -312,16 +300,10 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <DomenIcon
+            <DomenIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-            />
             <Typography>Свой домен</Typography>
           </Box>
-          <Typography>
+          <Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
-            Подключите свой домен, если хотите, чтобы квиз открывался по вашей
-            ссылке.
-          </Typography>
           <Link
             component="button"
             onClick={handleOpenDom}
@@ -397,16 +379,13 @@ export default function InstallQuiz() {
       <AutoOpenInstall />
       <VidjetInstall />
       <InstallQzCode />
-      <Box
+      <Box sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}>
-        sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
+        <Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
-      >
-        <Button
-          variant="outlined"
-          sx={{ padding: "10px 20px", borderRadius: "8px" }}
-        >
           <ArrowLeft />
         </Button>
-        <Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
+        <Button variant="contained" onClick={incrementCurrentStep}>
+          Запустить рекламу
+        </Button>
       </Box>
 
       <Modal
@@ -438,9 +417,7 @@ export default function InstallQuiz() {
               background: theme.palette.background.default,
             }}
           >
-            <Typography sx={{ color: theme.palette.grey2.main }}>
+            <Typography sx={{ color: theme.palette.grey2.main }}>Добавить квиз в группу ВК</Typography>
-              Добавить квиз в группу ВК
-            </Typography>
           </Box>
           <Box
             sx={{
@@ -473,19 +450,12 @@ export default function InstallQuiz() {
                 Добавить приложение
               </Button>
               <Typography sx={{ color: theme.palette.grey2.main }}>
-                Для публикации сниппета на стене, призывающего пройти тест,
+                Для публикации сниппета на стене, призывающего пройти тест, вставьте в новую запись ссылку на приложение
-                вставьте в новую запись ссылку на приложение
               </Typography>
-              <CustomTextField
+              <CustomTextField placeholder={""} text={"https://vk.com/app6656524_-XXXXXXXXXXX"} />
-                placeholder={""}
+              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
-                text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
+                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке, открыв
-              />
+                приложение в вашей группе
-              <Typography
-                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
-              >
-                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
-                можно узнать в браузерной строке, открыв приложение в вашей
-                группе
               </Typography>
             </Box>
 
@@ -496,24 +466,13 @@ export default function InstallQuiz() {
                 flexDirection: "column",
               }}
             >
-              <Typography>
+              <Typography>2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
-                2. Откройте квиз в группе (вы должны быть администратором
+              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
-                группы)
+                Справа снизу нажмите на значок "редактировать" В появившемся окне введите id квиза и нажмите
+                "Привязать". Готово! Квиз привязан к группе
               </Typography>
-              <Typography
+              <Typography sx={{ color: theme.palette.grey2.main }}>ID этого квиза</Typography>
-                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+              <CustomTextField placeholder={""} text={"639727c5177be5004f11a0f2"} />
-              >
-                Справа снизу нажмите на значок "редактировать" В появившемся
-                окне введите id квиза и нажмите "Привязать". Готово! Квиз
-                привязан к группе
-              </Typography>
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                ID этого квиза
-              </Typography>
-              <CustomTextField
-                placeholder={""}
-                text={"639727c5177be5004f11a0f2"}
-              />
             </Box>
 
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
@@ -555,9 +514,7 @@ export default function InstallQuiz() {
               background: theme.palette.background.default,
             }}
           >
-            <Typography sx={{ color: theme.palette.grey2.main }}>
+            <Typography sx={{ color: theme.palette.grey2.main }}>Подключить свой домен</Typography>
-              Подключить свой домен
-            </Typography>
           </Box>
           <Box
             sx={{
@@ -575,21 +532,14 @@ export default function InstallQuiz() {
               }}
             >
               <Typography sx={{ color: theme.palette.grey2.main }}>
-                Подключите домен к проекту, чтобы создать несколько квизов на
+                Подключите домен к проекту, чтобы создать несколько квизов на одном домене
-                одном домене
               </Typography>
               <Typography>1. Настройте записи в регистраторе домена</Typography>
               <Box sx={{ display: "flex" }}>
-                <SelectableButton
+                <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
-                  isSelected={backgroundType === "text"}
-                  onClick={() => setBackgroundType("text")}
-                >
                   Для поддоменов
                 </SelectableButton>
-                <SelectableButton
+                <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
-                  isSelected={backgroundType === "video"}
-                  onClick={() => setBackgroundType("video")}
-                >
                   Для доменов
                 </SelectableButton>
               </Box>
@@ -623,8 +573,7 @@ export default function InstallQuiz() {
                   maxWidth: "372px",
                 }}
               >
-                Как подключить свой домен/поддомен к квизу? Ошибки при
+                Как подключить свой домен/поддомен к квизу? Ошибки при подключении домена
-                подключении домена
               </Link>
             </Box>
 
@@ -655,10 +604,7 @@ export default function InstallQuiz() {
                         // onMouseDown={}
                         edge="end"
                       >
-                        <CopyIcon
+                        <CopyIcon color={"#ffffff"} bgcolor={theme.palette.brightPurple.main} />
-                          color={"#ffffff"}
-                          bgcolor={theme.palette.brightPurple.main}
-                        />
                       </IconButton>
                     </InputAdornment>
                   }
@@ -668,11 +614,8 @@ export default function InstallQuiz() {
             </Box>
 
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
-              <Typography
+              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
-                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+                Привязка домена и обновление DNS записей может занять до 48 часов
-              >
-                Привязка домена и обновление DNS записей может занять до 48
-                часов
               </Typography>
               <Button variant="outlined" onClick={handleCloseDom}>
                 Отмена

src/pages/Landing/HeaderLanding.tsx

@@ -18,7 +18,7 @@ export default function Component() {
   const [select, setSelect] = React.useState(0);
   const userId = useUserStore((state) => state.userId);
   const navigate = useNavigate();
-  const location = useLocation()
+  const location = useLocation();
 
   const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
 
@@ -41,7 +41,9 @@ export default function Component() {
         padding: 0,
       }}
     >
+      <Link to="/">
         <QuizLogo width={isMobile ? 100 : 150} />
+      </Link>
       {/*<Box*/}
       {/*    sx={{*/}
       {/*        maxWidth: '595px',*/}

src/pages/Landing/headerMobileLanding.tsx

@@ -53,10 +53,7 @@ const Transition = React.forwardRef(function Transition(
 });
 
 const height = "80px";
-export default function FullScreenDialog({
+export default function FullScreenDialog({ theme = "dark", bgColor = "#F2F3F7" }: Props) {
-                                             theme = "dark",
-                                             bgColor = "#F2F3F7",
-                                         }: Props) {
   const [open, setOpen] = useState(false);
   const location = useLocation();
   const themeMUI = useTheme();
@@ -79,19 +76,20 @@ export default function FullScreenDialog({
         sxsect={{
           minHeight: isMobile ? "50px" : { height },
           position: "fixed",
-                    zIndex: 11
+          zIndex: 11,
-
         }}
         sxcont={{
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
           svg: { color: "#000000" },
-                    padding: isMobile ? 0 : "0 22px 0 40px"
+          padding: isMobile ? 0 : "0 22px 0 40px",
         }}
       >
         <Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
+          <Link to="/">
             <Logotip width={150} />
+          </Link>
         </Box>
         {!isMobile && (
           <Button
@@ -144,16 +142,8 @@ export default function FullScreenDialog({
                 pt: "12px",
               }}
             >
-                            {isMobile && (
+              {isMobile && <Logotip width={150} />}
-                                <Logotip width={150}/>
+              <IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
-                            )}
-                            <IconButton
-                                sx={{ ml: "auto" }}
-                                edge="start"
-                                color="inherit"
-                                onClick={handleClose}
-                                aria-label="close"
-                            >
                 <CloseIcon />
               </IconButton>
             </Toolbar>

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -7,7 +7,7 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 import { updateRootContentId } from "@root/quizes/actions"
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"
 import { useQuestionsStore } from "@root/questions/store";
-import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll } from "@root/questions/actions";
+import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll, createFrontResult } from "@root/questions/actions";
 import {  updateOpenedModalSettingsId, } from "@root/uiTools/actions";
 import { cleardragQuestionContentId } from "@root/uiTools/actions";
 import { withErrorBoundary } from "react-error-boundary";
@@ -161,7 +161,6 @@ function CsComponent({
 
   const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
     
-    
     //запрещаем работу родителя-ребенка если это один и тот же вопрос
     if (parentNodeContentId === targetNodeContentId) return
 
@@ -170,10 +169,10 @@ function CsComponent({
     const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
     //если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
     const targetQuestion = { ...getQuestionByContentId(targetNodeContentId || dragQuestionContentId) } as AnyTypedQuizQuestion
-
+    if (Object.keys(targetQuestion).length !== 0  && parentNodeContentId && parentNodeChildren !== undefined) {
-    if (Object.keys(targetQuestion).length !== 0 && Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
       clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
       cy?.data('changed', true)
+      createFrontResult(quiz.backendId, targetQuestion.content.id)
       const es = cy?.add([
         {
           data: {
@@ -203,6 +202,7 @@ function CsComponent({
     //смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
     trashQuestions.forEach((targetQuestion) => {
       if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
+        console.log('deleteQ', targetQuestion.id)
         deleteQuestion(targetQuestion.id);
       }
     })
@@ -271,7 +271,8 @@ function CsComponent({
 
       const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
       if (targetNodeContentId && parentQuestionContentId) {
-
+if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
+      createFrontResult(quiz.backendId, parentQuestionContentId)
         clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
         cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
       }

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -73,6 +73,7 @@ export default function ButtonsOptionsAndPict({
                     display: "flex",
                     flexWrap: isMobile ? "wrap" : "nowrap",
                     gap: "6px",
+                    maxWidth: isMobile ? "200px" : undefined
                 }}
             >
                 <MiniButtonSetting

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -29,7 +29,17 @@ import {
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { copyQuestion, createUntypedQuestion, deleteQuestion, clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, getQuestionByContentId, deleteQuestionWithTimeout } from "@root/questions/actions";
+import {
+  copyQuestion,
+  createUntypedQuestion,
+  deleteQuestion,
+  clearRuleForAll,
+  toggleExpandQuestion,
+  updateQuestion,
+  updateUntypedQuestion,
+  getQuestionByContentId,
+  deleteQuestionWithTimeout,
+} from "@root/questions/actions";
 import { updateRootContentId } from "@root/quizes/actions";
 import { useRef, useState } from "react";
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@@ -63,7 +73,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
   const setTitle = useDebouncedCallback((title) => {
     const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
 
-        updateQuestionFn(question.id, question => {
+    updateQuestionFn(question.id, (question) => {
       question.title = title;
     });
   }, 200);
@@ -102,7 +112,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
             <TextField
               defaultValue={question.title}
               placeholder={"Заголовок вопроса"}
-                            onChange={({ target }: { target: HTMLInputElement; }) => setTitle(target.value || " ")}
+              onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value || " ")}
               InputProps={{
                 startAdornment: (
                   <Box>
@@ -128,9 +138,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                 margin: isMobile ? "10px 0" : 0,
                 "& .MuiInputBase-root": {
                   color: "#000000",
-                                    backgroundColor: question.expanded
+                  backgroundColor: question.expanded ? theme.palette.background.default : "transparent",
-                                        ? theme.palette.background.default
-                                        : "transparent",
                   height: "48px",
                   borderRadius: "10px",
                   ".MuiOutlinedInput-notchedOutline": {
@@ -226,13 +234,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                     userSelect: "none",
                   }}
                 />
-                                <IconButton
+                <IconButton sx={{ padding: "0" }} onClick={() => copyQuestion(question.id, question.quizId)}>
-                                    sx={{ padding: "0" }}
+                  <CopyIcon style={{ color: theme.palette.brightPurple.main }} />
-                                    onClick={() => copyQuestion(question.id, question.quizId)}
-                                >
-                                    <CopyIcon
-                                        style={{ color: theme.palette.brightPurple.main }}
-                                    />
                 </IconButton>
                 <IconButton
                   sx={{
@@ -244,26 +247,30 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                   onClick={() => {
                     const deleteFn = () => {
                       if (question.type !== null) {
-                                                if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
+                        if (question.content.rule.parentId === "root") {
+                          //удалить из стора root и очистить rule всем вопросам
                           updateRootContentId(quiz.id, "");
                           clearRuleForAll();
                           deleteQuestion(question.id);
-                                                    questions.forEach(q => {
+                          questions.forEach((q) => {
                             if (q.type === "result") {
                               deleteQuestion(q.id);
                             }
                           });
-                                                } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
+                        } else if (question.content.rule.parentId.length > 0) {
+                          //удалить из стора вопрос из дерева и очистить его потомков
                           const clearQuestions = [] as string[];
 
                           //записываем потомков , а их результаты удаляем
                           const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
                             questions.forEach((targetQuestion) => {
-                                                            if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
+                              if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {
+                                //если у вопроса совпал родитель с родителем => он потомок, в кучу его
                                 if (targetQuestion.type === "result") {
                                   deleteQuestion(targetQuestion.id);
                                 } else {
-                                                                    if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
+                                  if (!clearQuestions.includes(targetQuestion.content.id))
+                                    clearQuestions.push(targetQuestion.content.id);
                                   getChildren(targetQuestion); //и ищем его потомков
                                 }
                               }
@@ -272,7 +279,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                           getChildren(question);
                           //чистим потомков от инфы ветвления
                           clearQuestions.forEach((id) => {
-                                                        updateQuestion(id, question => {
+                            updateQuestion(id, (question) => {
                               question.content.rule.parentId = "";
                               question.content.rule.main = [];
                               question.content.rule.default = "";
@@ -282,10 +289,18 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                           //чистим rule родителя
                           const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
                           const newRule = {};
-                                                    newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
+                          newRule.main = parentQuestion.content.rule.main.filter(
+                            (data) => data.next !== question.content.id
+                          ); //удаляем условия перехода от родителя к этому вопросу
                           newRule.parentId = parentQuestion.content.rule.parentId;
-                                                    newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
+                          newRule.default =
-                                                    newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
+                            parentQuestion.content.rule.parentId === question.content.id
+                              ? ""
+                              : parentQuestion.content.rule.parentId;
+                          newRule.children = [...parentQuestion.content.rule.children].splice(
+                            parentQuestion.content.rule.children.indexOf(question.content.id),
+                            1
+                          );
 
                           updateQuestion(question.content.rule.parentId, (PQ) => {
                             PQ.content.rule = newRule;
@@ -293,7 +308,6 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                           deleteQuestion(question.id);
                         }
 
-
                         deleteQuestion(question.id);
                       } else {
                         console.log("удаляю безтипогово");
@@ -305,13 +319,11 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                   }}
                   data-cy="delete-question"
                 >
-                                    <DeleteIcon
+                  <DeleteIcon style={{ color: theme.palette.brightPurple.main }} />
-                                        style={{ color: theme.palette.brightPurple.main }}
-                                    />
                 </IconButton>
               </Box>
             )}
-                        {question.type !== null &&
+            {question.type !== null && (
               <Box
                 style={{
                   display: "flex",
@@ -322,17 +334,13 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                   marginLeft: "3px",
                   borderRadius: "50%",
                   fontSize: "16px",
-                                    color: question.expanded
+                  color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
-                                        ? theme.palette.brightPurple.main
+                  background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
-                                        : "#FFF",
-                                    background: question.expanded
-                                        ? "#EEE4FC"
-                                        : theme.palette.brightPurple.main,
                 }}
               >
                 {question.page + 1}
               </Box>
-                        }
+            )}
             <IconButton
               disableRipple
               sx={{
@@ -392,8 +400,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
               backgroundPosition: "bottom",
               backgroundRepeat: "repeat-x",
               backgroundSize: "20px 1px",
-                            backgroundImage:
+              backgroundImage: "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
-                                "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
             }}
           />
           <PlusIcon />
@@ -406,82 +413,27 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
 const IconAndrom = (isExpanded: boolean, questionType: QuestionType | null) => {
   switch (questionType) {
     case "variant":
-            return (
+      return <Answer color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Answer
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "images":
-            return (
+      return <OptionsPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <OptionsPict
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "varimg":
-            return (
+      return <OptionsAndPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <OptionsAndPict
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "emoji":
-            return (
+      return <Emoji color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Emoji
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "text":
-            return (
+      return <Input color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Input
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "select":
-            return (
+      return <DropDown color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <DropDown
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "date":
-            return (
+      return <Date color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Date
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "number":
-            return (
+      return <Slider color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Slider
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "file":
-            return (
+      return <Download color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Download
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "page":
-            return (
+      return <Page color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <Page
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "rating":
-            return (
+      return <RatingIcon color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
-                <RatingIcon
-                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     default:
       return <></>;
   }

src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx

@@ -5,14 +5,12 @@ import { Draggable } from "react-beautiful-dnd";
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
 import QuestionsPageCard from "./QuestionPageCard";
 
-
 type FormDraggableListItemProps = {
   question: AnyTypedQuizQuestion | UntypedQuizQuestion;
   questionIndex: number;
 };
 
-export default memo(
+export default memo(({ question, questionIndex }: FormDraggableListItemProps) => {
-    ({ question, questionIndex }: FormDraggableListItemProps) => {
   const theme = useTheme();
 
   return (
@@ -45,7 +43,7 @@ export default memo(
               </Typography>
               <Typography
                 onClick={() => {
-                                        updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     question.deleted = false;
                   });
                 }}
@@ -80,5 +78,4 @@ export default memo(
       )}
     </Draggable>
   );
-    }
+});
-);

src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx

@@ -11,8 +11,8 @@ import OptionsPict from "@icons/questionsPage/options_pict";
 import Page from "@icons/questionsPage/page";
 import RatingIcon from "@icons/questionsPage/rating";
 import Slider from "@icons/questionsPage/slider";
-import { Box, InputAdornment, Paper } from "@mui/material";
+import { Box, FormControlLabel, IconButton, InputAdornment, Paper, useMediaQuery, useTheme } from "@mui/material";
-import { updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
+import { toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
 import { useRef, useState } from "react";
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@@ -22,7 +22,13 @@ import SwitchQuestionsPage from "../../SwitchQuestionsPage";
 import { ChooseAnswerModal } from "./ChooseAnswerModal";
 import FormTypeQuestions from "../FormTypeQuestions";
 import { QuestionType } from "@model/question/question";
-
+import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
+import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
+import { CopyIcon } from "@icons/questionsPage/CopyIcon";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+import { HideIcon } from "@icons/questionsPage/hideIcon";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { NoLuggageOutlined, SignalCellularNullOutlined } from "@mui/icons-material";
 
 interface Props {
   question: AnyTypedQuizQuestion | UntypedQuizQuestion;
@@ -30,18 +36,17 @@ interface Props {
   draggableProps: DraggableProvidedDragHandleProps | null | undefined;
 }
 
-export default function QuestionsPageCard({
+export default function QuestionsPageCard({ question, questionIndex, draggableProps }: Props) {
-    question,
-    questionIndex,
-    draggableProps,
-}: Props) {
   const [open, setOpen] = useState<boolean>(false);
   const anchorRef = useRef(null);
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   const setTitle = useDebouncedCallback((title) => {
     const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
 
-        updateQuestionFn(question.id, question => {
+    updateQuestionFn(question.id, (question) => {
       question.title = title;
     });
   }, 200);
@@ -65,15 +70,24 @@ export default function QuestionsPageCard({
         <Box
           sx={{
             display: "flex",
+            p: 0,
             flexDirection: "column",
-                        padding: 0,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              margin: "20px",
+              gap: "18px",
+              flexDirection: isMobile ? "column-reverse" : null,
             }}
           >
             <CustomTextField
               placeholder={`Заголовок ${questionIndex + 1} вопроса`}
               text={question.title}
               onChange={({ target }) => setTitle(target.value)}
-                        sx={{ margin: "20px", width: "auto" }}
+              sx={{ width: "100%" }}
               InputProps={{
                 startAdornment: (
                   <Box>
@@ -94,19 +108,84 @@ export default function QuestionsPageCard({
                     />
                   </Box>
                 ),
-                            endAdornment: (
-                                <Box {...draggableProps}>
-                                    {questionIndex !== 0 && (
-                                        <InputAdornment position="start">
-                                            <PointsIcon
-                                                style={{ color: "#9A9AAF", fontSize: "30px" }}
-                                            />
-                                        </InputAdornment>
-                                    )}
-                                </Box>
-                            ),
               }}
             />
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: isMobile ? "100%" : "auto",
+                position: "relative",
+              }}
+            >
+              <Box
+                sx={{
+                  flexDirection: isMobile ? "row-reverse" : null,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                }}
+              >
+                <IconButton
+                  sx={{ padding: "0", margin: "5px" }}
+                  disableRipple
+                  data-cy="expand-question"
+                  onClick={() => toggleExpandQuestion(question.id)}
+                >
+                  {question.expanded ? (
+                    <ArrowDownIcon
+                      style={{
+                        width: "18px",
+                        color: "#4D4D4D",
+                      }}
+                    />
+                  ) : (
+                    <ExpandLessIcon
+                      sx={{
+                        boxSizing: "border-box",
+                        fill: theme.palette.brightPurple.main,
+                        background: "#FFF",
+                        borderRadius: "6px",
+                        height: "30px",
+                        width: "30px",
+                      }}
+                    />
+                  )}
+                </IconButton>
+
+                <Box
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "30px",
+                    width: "30px",
+                    marginLeft: "3px",
+                    borderRadius: "50%",
+                    fontSize: "16px",
+                    color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
+                    background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
+                  }}
+                >
+                  {questionIndex + 1}
+                </Box>
+              </Box>
+
+              <IconButton
+                disableRipple
+                sx={{
+                  padding: isMobile ? "0" : "0 5px",
+                  right: isMobile ? "0" : null,
+                  bottom: isMobile ? "0" : null,
+                }}
+                {...draggableProps}
+              >
+                <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
+              </IconButton>
+            </Box>
+          </Box>
+
           {question.type === null ? (
             <FormTypeQuestions question={question} />
           ) : (
@@ -123,41 +202,26 @@ const IconAndrom = (questionType: QuestionType | null) => {
     case "variant":
       return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "images":
-            return (
+      return <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     case "varimg":
-            return (
+      return <OptionsAndPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <OptionsAndPict
-                    color="#9A9AAF"
-                    sx={{ height: "22px", width: "20px" }}
-                />
-            );
     case "emoji":
       return <Emoji color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "text":
       return <Input color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "select":
-            return (
+      return <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     case "date":
       return <Date color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "number":
       return <Slider color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "file":
-            return (
+      return <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     case "page":
       return <Page color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
     case "rating":
-            return (
+      return <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
     default:
-            return (
+      return <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
-                <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
-            );
   }
 };

src/pages/Questions/Form/FormDraggableList/index.tsx

@@ -5,10 +5,8 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import FormDraggableListItem from "./FormDraggableListItem";
 import { useQuestions } from "@root/questions/hooks";
 
-
 export const FormDraggableList = () => {
-
+  const { questions } = useQuestions();
-    const { questions } = useQuestions()
 
   const onDragEnd = ({ destination, source }: DropResult) => {
     if (destination) reorderQuestions(source.index, destination.index);
@@ -20,11 +18,7 @@ export const FormDraggableList = () => {
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
             {questions?.map((question, index) => (
-                            <FormDraggableListItem
+              <FormDraggableListItem key={question.id} question={question} questionIndex={index} />
-                                key={question.id}
-                                question={question}
-                                questionIndex={index}
-                            />
             ))}
             {provided.placeholder}
           </Box>

src/pages/Questions/Form/FormQuestionsPage.tsx

@@ -8,7 +8,6 @@ import { FormDraggableList } from "./FormDraggableList";
 import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 
-
 export default function FormQuestionsPage() {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
@@ -73,9 +72,7 @@ export default function FormQuestionsPage() {
           data-cy="create-question"
         >
           <AddAnswer color="#EEE4FC" />
-                    <Typography sx={{ color: "#9A9AAF" }}>
+          <Typography sx={{ color: "#9A9AAF" }}>Добавить еще один вопрос</Typography>
-                        Добавить еще один вопрос
-                    </Typography>
         </Box>
       </Box>
       <Box

src/pages/Questions/Form/FormTypeQuestions.tsx

@@ -12,10 +12,7 @@ import Slider from "../../../assets/icons/questionsPage/slider";
 
 import { QuestionType } from "@model/question/question";
 import { createTypedQuestion } from "@root/questions/actions";
-import type {
+import type { UntypedQuizQuestion } from "../../../model/questionTypes/shared";
-    UntypedQuizQuestion
-} from "../../../model/questionTypes/shared";
-
 
 type ButtonTypeQuestion = {
   icon: JSX.Element;
@@ -61,7 +58,6 @@ interface Props {
 }
 
 export default function FormTypeQuestions({ question }: Props) {
-
   return (
     <Box>
       <Box
@@ -72,10 +68,8 @@ export default function FormTypeQuestions({ question }: Props) {
           margin: "20px",
         }}
       >
-                {(("page" in question) && question.page === 0
+        {("page" in question && question.page === 0 ? BUTTON_TYPE_QUESTIONS : BUTTON_TYPE_SHORT_QUESTIONS).map(
-                    ? BUTTON_TYPE_QUESTIONS
+          ({ icon, title, value: questionType }) => (
-                    : BUTTON_TYPE_SHORT_QUESTIONS
-                ).map(({ icon, title, value: questionType }) => (
             <QuestionsMiniButton
               key={title}
               onClick={() => {
@@ -84,7 +78,8 @@ export default function FormTypeQuestions({ question }: Props) {
               icon={icon}
               text={title}
             />
-                ))}
+          )
+        )}
       </Box>
     </Box>
   );

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -151,181 +151,181 @@ export default function OptionsAndPicture({ question }: Props) {
                     onClose={closeCropModal}
                     onSaveImageClick={handleCropModalSaveClick}
                 />
-                <Box
+                {/*<Box*/}
-                    sx={{
+                {/*    sx={{*/}
-                        width: "100%",
+                {/*        width: "100%",*/}
-                        border: "1px solid #9A9AAF",
+                {/*        border: "1px solid #9A9AAF",*/}
-                        borderRadius: "8px",
+                {/*        borderRadius: "8px",*/}
-                        display: isTablet ? "block" : "none",
+                {/*        display: isTablet ? "block" : "none",*/}
-                    }}
+                {/*    }}*/}
-                >
+                {/*>*/}
-                    <TextField
+                {/*    <TextField*/}
-                        fullWidth
+                {/*        fullWidth*/}
-                        focused={false}
+                {/*        focused={false}*/}
-                        placeholder={"Добавьте ответ"}
+                {/*        placeholder={"Добавьте ответ"}*/}
-                        multiline={question.content.largeCheck}
+                {/*        multiline={question.content.largeCheck}*/}
-                        InputProps={{
+                {/*        InputProps={{*/}
-                            startAdornment: (
+                {/*            startAdornment: (*/}
-                                <>
+                {/*                <>*/}
-                                    <InputAdornment position="start">
+                {/*                    <InputAdornment position="start">*/}
-                                        <PointsIcon
+                {/*                        <PointsIcon*/}
-                                            style={{ color: "#9A9AAF", fontSize: "30px" }}
+                {/*                            style={{ color: "#9A9AAF", fontSize: "30px" }}*/}
-                                        />
+                {/*                        />*/}
-                                    </InputAdornment>
+                {/*                    </InputAdornment>*/}
-                                    {!isMobile && (
+                {/*                    {!isMobile && (*/}
-                                        <Box
+                {/*                        <Box*/}
-                                            sx={{
+                {/*                            sx={{*/}
-                                                width: "60px",
+                {/*                                width: "60px",*/}
-                                                height: "40px",
+                {/*                                height: "40px",*/}
-                                                background: "#EEE4FC",
+                {/*                                background: "#EEE4FC",*/}
-                                                display: "flex",
+                {/*                                display: "flex",*/}
-                                                justifyContent: "space-between",
+                {/*                                justifyContent: "space-between",*/}
-                                                marginRight: "20px",
+                {/*                                marginRight: "20px",*/}
-                                                marginLeft: "12px",
+                {/*                                marginLeft: "12px",*/}
-                                            }}
+                {/*                            }}*/}
-                                        >
+                {/*                        >*/}
-                                            <Box
+                {/*                            <Box*/}
-                                                sx={{
+                {/*                                sx={{*/}
-                                                    display: "flex",
+                {/*                                    display: "flex",*/}
-                                                    alignItems: "center",
+                {/*                                    alignItems: "center",*/}
-                                                    justifyContent: "center",
+                {/*                                    justifyContent: "center",*/}
-                                                    width: "100%",
+                {/*                                    width: "100%",*/}
-                                                }}
+                {/*                                }}*/}
-                                            >
+                {/*                            >*/}
-                                                <ImageAddIcons fontSize="22px" color="#7E2AEA" />
+                {/*                                <ImageAddIcons fontSize="22px" color="#7E2AEA" />*/}
-                                            </Box>
+                {/*                            </Box>*/}
-                                            <span
+                {/*                            <span*/}
-                                                style={{
+                {/*                                style={{*/}
-                                                    display: "flex",
+                {/*                                    display: "flex",*/}
-                                                    alignItems: "center",
+                {/*                                    alignItems: "center",*/}
-                                                    justifyContent: "center",
+                {/*                                    justifyContent: "center",*/}
-                                                    background: "#7E2AEA",
+                {/*                                    background: "#7E2AEA",*/}
-                                                    height: "100%",
+                {/*                                    height: "100%",*/}
-                                                    width: "25px",
+                {/*                                    width: "25px",*/}
-                                                    color: "white",
+                {/*                                    color: "white",*/}
-                                                    fontSize: "15px",
+                {/*                                    fontSize: "15px",*/}
-                                                }}
+                {/*                                }}*/}
-                                            >
+                {/*                            >*/}
-                                                +
+                {/*                                +*/}
-                                            </span>
+                {/*                            </span>*/}
-                                        </Box>
+                {/*                        </Box>*/}
-                                    )}
+                {/*                    )}*/}
-                                </>
+                {/*                </>*/}
-                            ),
+                {/*            ),*/}
-                            endAdornment: (
+                {/*            endAdornment: (*/}
-                                <InputAdornment position="end">
+                {/*                <InputAdornment position="end">*/}
-                                    <IconButton
+                {/*                    <IconButton*/}
-                                        sx={{ padding: "0" }}
+                {/*                        sx={{ padding: "0" }}*/}
-                                        aria-describedby="my-popover-id"
+                {/*                        aria-describedby="my-popover-id"*/}
-                                    >
+                {/*                    >*/}
-                                        <MessageIcon
+                {/*                        <MessageIcon*/}
-                                            style={{
+                {/*                            style={{*/}
-                                                color: "#9A9AAF",
+                {/*                                color: "#9A9AAF",*/}
-                                                fontSize: "30px",
+                {/*                                fontSize: "30px",*/}
-                                                marginRight: "6.5px",
+                {/*                                marginRight: "6.5px",*/}
-                                            }}
+                {/*                            }}*/}
-                                        />
+                {/*                        />*/}
-                                    </IconButton>
+                {/*                    </IconButton>*/}
-                                    <Popover
+                {/*                    <Popover*/}
-                                        id="my-popover-id"
+                {/*                        id="my-popover-id"*/}
-                                        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+                {/*                        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}*/}
-                                        open={false}
+                {/*                        open={false}*/}
-                                    >
+                {/*                    >*/}
-                                        <TextareaAutosize
+                {/*                        <TextareaAutosize*/}
-                                            style={{ margin: "10px" }}
+                {/*                            style={{ margin: "10px" }}*/}
-                                            placeholder="Подсказка для этого ответа"
+                {/*                            placeholder="Подсказка для этого ответа"*/}
-                                        />
+                {/*                        />*/}
-                                    </Popover>
+                {/*                    </Popover>*/}
-                                    <IconButton sx={{ padding: "0" }}>
+                {/*                    <IconButton sx={{ padding: "0" }}>*/}
-                                        <DeleteIcon
+                {/*                        <DeleteIcon*/}
-                                            style={{
+                {/*                            style={{*/}
-                                                color: theme.palette.grey2.main,
+                {/*                                color: theme.palette.grey2.main,*/}
-                                                marginRight: "-1px",
+                {/*                                marginRight: "-1px",*/}
-                                            }}
+                {/*                            }}*/}
-                                        />
+                {/*                        />*/}
-                                    </IconButton>
+                {/*                    </IconButton>*/}
-                                </InputAdornment>
+                {/*                </InputAdornment>*/}
-                            ),
+                {/*            ),*/}
-                        }}
+                {/*        }}*/}
-                        sx={{
+                {/*        sx={{*/}
-                            "& .MuiInputBase-root": {
+                {/*            "& .MuiInputBase-root": {*/}
-                                padding: "13.5px",
+                {/*                padding: "13.5px",*/}
-                                borderRadius: "10px",
+                {/*                borderRadius: "10px",*/}
-                                background: "#ffffff",
+                {/*                background: "#ffffff",*/}
-                                height: "48px",
+                {/*                height: "48px",*/}
-                            },
+                {/*            },*/}
-                            "& .MuiOutlinedInput-notchedOutline": {
+                {/*            "& .MuiOutlinedInput-notchedOutline": {*/}
-                                border: "none",
+                {/*                border: "none",*/}
-                            },
+                {/*            },*/}
-                        }}
+                {/*        }}*/}
-                        inputProps={{
+                {/*        inputProps={{*/}
-                            sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
+                {/*            sx: { fontSize: "18px", lineHeight: "21px", py: 0 },*/}
-                        }}
+                {/*        }}*/}
-                    />
+                {/*    />*/}
 
-                    {isMobile && (
+                    {/*{isMobile && (*/}
-                        <Box
+                    {/*    <Box*/}
-                            sx={{
+                    {/*        sx={{*/}
-                                display: "flex",
+                    {/*            display: "flex",*/}
-                                alignItems: "center",
+                    {/*            alignItems: "center",*/}
-                                m: "8px",
+                    {/*            m: "8px",*/}
-                                position: "relative",
+                    {/*            position: "relative",*/}
-                            }}
+                    {/*        }}*/}
-                        >
+                    {/*    >*/}
-                            <Box
+                    {/*        <Box*/}
-                                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
+                    {/*            sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
-                            />
+                    {/*        />*/}
-                            <ImageAddIcons
+                    {/*        <ImageAddIcons*/}
-                                style={{
+                    {/*            style={{*/}
-                                    position: "absolute",
+                    {/*                position: "absolute",*/}
-                                    color: "#7E2AEA",
+                    {/*                color: "#7E2AEA",*/}
-                                    fontSize: "20px",
+                    {/*                fontSize: "20px",*/}
-                                    left: "45%",
+                    {/*                left: "45%",*/}
-                                    right: "55%",
+                    {/*                right: "55%",*/}
-                                }}
+                    {/*            }}*/}
-                            />
+                    {/*        />*/}
-                            <Box
+                    {/*        <Box*/}
-                                sx={{
+                    {/*            sx={{*/}
-                                    display: "flex",
+                    {/*                display: "flex",*/}
-                                    justifyContent: "center",
+                    {/*                justifyContent: "center",*/}
-                                    alignItems: "center",
+                    {/*                alignItems: "center",*/}
-                                    width: "20px",
+                    {/*                width: "20px",*/}
-                                    background: "#EEE4FC",
+                    {/*                background: "#EEE4FC",*/}
-                                    height: "40px",
+                    {/*                height: "40px",*/}
-                                    color: "white",
+                    {/*                color: "white",*/}
-                                    backgroundColor: "#7E2AEA",
+                    {/*                backgroundColor: "#7E2AEA",*/}
-                                }}
+                    {/*            }}*/}
-                            >
+                    {/*        >*/}
-                                <Box
+                    {/*            <Box*/}
-                                    sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
+                    {/*                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
-                                />
+                    {/*            />*/}
-                                <ImageAddIcons
+                    {/*            <ImageAddIcons*/}
-                                    style={{
+                    {/*                style={{*/}
-                                        position: "absolute",
+                    {/*                    position: "absolute",*/}
-                                        color: "#7E2AEA",
+                    {/*                    color: "#7E2AEA",*/}
-                                        fontSize: "20px",
+                    {/*                    fontSize: "20px",*/}
-                                        left: "45%",
+                    {/*                    left: "45%",*/}
-                                        right: "55%",
+                    {/*                    right: "55%",*/}
-                                    }}
+                    {/*                }}*/}
-                                />
+                    {/*            />*/}
-                                <Box
+                    {/*            <Box*/}
-                                    sx={{
+                    {/*                sx={{*/}
-                                        display: "flex",
+                    {/*                    display: "flex",*/}
-                                        justifyContent: "center",
+                    {/*                    justifyContent: "center",*/}
-                                        alignItems: "center",
+                    {/*                    alignItems: "center",*/}
-                                        width: "20px",
+                    {/*                    width: "20px",*/}
-                                        background: "#EEE4FC",
+                    {/*                    background: "#EEE4FC",*/}
-                                        height: "40px",
+                    {/*                    height: "40px",*/}
-                                        color: "white",
+                    {/*                    color: "white",*/}
-                                        backgroundColor: "#7E2AEA",
+                    {/*                    backgroundColor: "#7E2AEA",*/}
-                                    }}
+                    {/*                }}*/}
-                                >
+                    {/*            >*/}
-                                    +
+                    {/*                +*/}
-                                </Box>
+                    {/*            </Box>*/}
-                            </Box>
+                    {/*        </Box>*/}
-                        </Box>
+                    {/*    </Box>*/}
-                    )}
+                    {/*)}*/}
-                </Box>
+                {/*</Box>*/}
                 <Box
                     sx={{
                         display: "flex",

src/pages/Questions/QuestionsPage.tsx

@@ -1,12 +1,5 @@
-import { useState, useEffect, useLayoutEffect, useRef } from "react"
+import { useState, useEffect, useLayoutEffect, useRef } from "react";
-import {
+import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    IconButton,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
 import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -14,7 +7,7 @@ import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
 import { createPortal } from "react-dom";
 import AddPlus from "../../assets/icons/questionsPage/addPlus";
 import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
-import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
+import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
 import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
 import { useQuestionsStore } from "@root/questions/store";
 import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/uiTools/actions";
@@ -23,17 +16,16 @@ import { useUiTools } from "@root/uiTools/store";
 export default function QuestionsPage() {
   const theme = useTheme();
   const { openedModalSettingsId, openBranchingPanel } = useUiTools();
-    const isMobile = false//useMediaQuery(theme.breakpoints.down(660));
+  const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const quiz = useCurrentQuiz();
   useLayoutEffect(() => {
-        updateOpenBranchingPanel(false)
+    updateOpenBranchingPanel(false);
-        updateEditSomeQuestion()
+    updateEditSomeQuestion();
-    },[])
+  }, []);
 
-    const ref = useRef()
+  const ref = useRef();
   if (!quiz) return null;
 
-
   return (
     <>
       <Box
@@ -47,8 +39,7 @@ export default function QuestionsPage() {
           margin: "60px 0 40px 0",
         }}
       >
-                <Typography variant={"h5"}>{
+        <Typography variant={"h5"}>{quiz.name ? quiz.name : "Заголовок квиза"}</Typography>
-                    quiz.name ? quiz.name : "Заголовок квиза" }</Typography>
         <Button
           sx={{
             display: openBranchingPanel ? "none" : "flex",
@@ -79,14 +70,13 @@ export default function QuestionsPage() {
           sx={{
             position: "fixed",
             left: isMobile ? "20px" : "250px",
-                        bottom: "20px",
+            bottom: isMobile ? "140px" : "20px",
           }}
           data-cy="create-question"
         >
           <AddPlus />
         </IconButton>
 
-                
         <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
           <Button
             variant="outlined"

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -6,7 +6,6 @@ import SwitchSlider from "./switchSlider";
 import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
 import { updateQuestion } from "@root/questions/actions";
 
-
 interface Props {
   question: QuizQuestionNumber;
 }
@@ -53,10 +52,10 @@ export default function SliderOptions({ question }: Props) {
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"0"}
               min={0}
-                            max={99}
+              max={99999999999}
               value={question.content.range.split("—")[0]}
               onChange={({ target }) => {
-                                updateQuestion(question.id, question => {
+                updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
                   question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
@@ -68,7 +67,7 @@ export default function SliderOptions({ question }: Props) {
                 const max = Number(question.content.range.split("—")[1]);
 
                 if (min >= max) {
-                                    updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
 
                     question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
@@ -76,7 +75,7 @@ export default function SliderOptions({ question }: Props) {
                 }
 
                 if (start < min) {
-                                    updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
 
                     question.content.start = min;
@@ -89,10 +88,10 @@ export default function SliderOptions({ question }: Props) {
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"100"}
               min={0}
-                            max={100}
+              max={100000000000}
               value={question.content.range.split("—")[1]}
               onChange={({ target }) => {
-                                updateQuestion(question.id, question => {
+                updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
                   question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
@@ -106,7 +105,7 @@ export default function SliderOptions({ question }: Props) {
                 const range = max - min;
 
                 if (max <= min) {
-                                    updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
 
                     question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
@@ -114,7 +113,7 @@ export default function SliderOptions({ question }: Props) {
                 }
 
                 if (start > max) {
-                                    updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
 
                     question.content.start = max;
@@ -122,7 +121,7 @@ export default function SliderOptions({ question }: Props) {
                 }
 
                 if (step > max) {
-                                    updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
 
                     question.content.step = min;
@@ -158,7 +157,7 @@ export default function SliderOptions({ question }: Props) {
               max={Number(question.content.range.split("—")[1])}
               value={String(question.content.start)}
               onChange={({ target }) => {
-                                updateQuestion(question.id, question => {
+                updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
                   question.content.start = Number(target.value);
@@ -185,7 +184,7 @@ export default function SliderOptions({ question }: Props) {
               error={stepError}
               value={String(question.content.step)}
               onChange={({ target }) => {
-                                updateQuestion(question.id, question => {
+                updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
                   question.content.step = Number(target.value);
@@ -198,7 +197,7 @@ export default function SliderOptions({ question }: Props) {
                 const step = Number(target.value);
 
                 if (step > max) {
-                                    updateQuestion(question.id, question => {
+                  updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
 
                     question.content.step = max;

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -12,13 +12,11 @@ import UploadFile from "./UploadFile/UploadFile";
 import AnswerOptions from "./answerOptions/AnswerOptions";
 import { notReachable } from "../../utils/notReachable";
 
-
 interface Props {
   question: AnyTypedQuizQuestion;
 }
 
 export default function SwitchQuestionsPage({ question }: Props) {
-
   switch (question.type) {
     case "variant":
       return <AnswerOptions question={question} />;
@@ -54,6 +52,6 @@ export default function SwitchQuestionsPage({ question }: Props) {
       return <RatingOptions question={question} />;
 
     default:
-            notReachable(question)
+      notReachable(question);
   }
 }

src/pages/Questions/UploadImage/UploadImageModal.tsx

@@ -1,28 +1,25 @@
-import {
+import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } from "@mui/material";
-    Typography,
-    Box,
-    useTheme,
-    ButtonBase,
-    Modal,
-    TextField,
-    InputAdornment,
-} from "@mui/material";
 import UploadIcon from "../../../assets/icons/UploadIcon";
 import SearchIcon from "../../../assets/icons/SearchIcon";
 import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
 import { useRef, useState, type DragEvent } from "react";
 
+type ImageFormat = "jpg" | "jpeg" | "png" | "gif";
 
 interface ModalkaProps {
   isOpen: boolean;
   onClose: () => void;
   handleImageChange: (file: File) => void;
+  description?: string;
+  accept?: ImageFormat[];
 }
 
 export const UploadImageModal: React.FC<ModalkaProps> = ({
   handleImageChange,
   isOpen,
   onClose,
+  accept,
+  description,
 }) => {
   const theme = useTheme();
   const dropZone = useRef<HTMLDivElement>(null);
@@ -43,6 +40,10 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
     handleImageChange(file);
   };
 
+  const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : "";
+
+  console.log(acceptedFormats);
+
   return (
     <Modal
       open={isOpen}
@@ -72,24 +73,20 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
             background: theme.palette.background.default,
           }}
         >
-                    <Typography
+          <Typography sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}>
-                        sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
-                    >
             Добавьте изображение
           </Typography>
           <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
             <input
               onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
               hidden
-                            accept="image/*"
+              accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
               multiple
               type="file"
               data-cy="upload-image-input"
             />
             <Box
-                            onDragOver={(event: DragEvent<HTMLDivElement>) =>
+              onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
-                                event.preventDefault()
-                            }
               onDrop={handleDrop}
               ref={dropZone}
               sx={{
@@ -110,7 +107,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
                   Загрузите или перетяните сюда файл
                 </Typography>
                 <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
-                                    Принимает JPG, PNG, и GIF формат — максимум 5mb
+                  {description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
                 </Typography>
               </Box>
             </Box>
@@ -146,8 +143,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
               "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
                 border: "1px solid rgba(0, 0, 0, 0.23)",
               },
-                            "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":
+              "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-                            {
                 borderColor: "rgba(0, 0, 0, 0.23)",
               },
             }}

src/pages/ResultPage/FirstEntry.tsx

@@ -1,5 +1,4 @@
-
+import { ResultSettings } from "./ResultSettings";
-import { ResultSettings } from "./ResultSettings"
 import { createFrontResult } from "@root/questions/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -7,6 +6,8 @@ import { Box, Typography, useTheme, useMediaQuery, Button } from "@mui/material"
 import image from "../../assets/Rectangle 110.png";
 import { enqueueSnackbar } from "notistack";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
+import { decrementCurrentStep } from "@root/quizes/actions";
 
 export const FirstEntry = () => {
   const theme = useTheme();
@@ -18,15 +19,19 @@ export const FirstEntry = () => {
     if (quiz?.config.haveRoot) {
       questions
         .filter((question: AnyTypedQuizQuestion) => {
-        return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
+          return (
-      })
+            question.type !== null &&
-      .forEach(question => {
+            question.content.rule.parentId.length !== 0 &&
-        createFrontResult(quiz.id, question.content.id)
+            question.content.rule.children.length === 0
+          );
         })
+        .forEach((question) => {
+          createFrontResult(quiz.backendId, question.content.id);
+        });
     } else {
-      createFrontResult(quiz.id, "line")
+      createFrontResult(quiz.backendId, "line");
-    }
     }
+  };
 
   return (
     <>
@@ -53,7 +58,7 @@ export const FirstEntry = () => {
             mr: !isSmallMonitor ? "104px" : 0,
             marginBottom: isSmallMonitor ? "20px" : 0,
             position: "relative",
-            height: "100%"
+            height: "100%",
           }}
         >
           <Typography variant="h5" sx={{ marginBottom: "20px" }}>
@@ -69,7 +74,10 @@ export const FirstEntry = () => {
             }}
           >
             <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
-              Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
+              Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным
+              пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально
+              индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте
+              пользователя по нужной ссылке.
             </Typography>
             <Typography
               sx={{
@@ -91,6 +99,19 @@ export const FirstEntry = () => {
           }}
         />
       </Box>
+
+      <Box sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center", gap: "8px", mt: "30px" }}>
+        <Button
+          variant="outlined"
+          sx={{
+            padding: "10px 20px",
+            borderRadius: "8px",
+            height: "44px",
+          }}
+          onClick={decrementCurrentStep}
+        >
+          <ArrowLeft />
+        </Button>
         <Button
           onClick={create}
           variant="contained"
@@ -100,12 +121,13 @@ export const FirstEntry = () => {
             lineHeight: "18px",
             width: "216px",
             height: "44px",
-          mt: "30px",
+
-          p: "10px 20px"
+            p: "10px 20px",
           }}
         >
           Создать результаты
         </Button>
+      </Box>
     </>
   );
-}
+};

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -0,0 +1,33 @@
+import { Box, Typography, Button } from "@mui/material";
+
+import { useCurrentQuiz } from "@root/quizes/hooks";
+
+type ContactFormProps = {
+  showResultForm: boolean;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
+};
+
+export const ContactForm = ({
+  showResultForm,
+  setShowContactForm,
+  setShowResultForm,
+}: ContactFormProps) => {
+  const quiz = useCurrentQuiz();
+
+  const followNextForm = () => {
+    setShowContactForm(false);
+    setShowResultForm(true);
+  };
+
+  return (
+    <Box>
+      <Typography>Форма контактов</Typography>
+      {!showResultForm && quiz?.config.resultInfo.when === "after" && (
+        <Button variant="contained" onClick={followNextForm}>
+          Показать результат
+        </Button>
+      )}
+    </Box>
+  );
+};

src/pages/ViewPublicationPage/Footer.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 
 import { useQuizViewStore } from "@root/quizView";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useQuestionsStore } from "@root/questions/store";
 
 import type {
   AnyTypedQuizQuestion,
@@ -11,20 +13,26 @@ import { getQuestionByContentId } from "@root/questions/actions";
 import { enqueueSnackbar } from "notistack";
 
 type FooterProps = {
-  questions: AnyTypedQuizQuestion[];
   setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
   question: AnyTypedQuizQuestion;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
+  setResultQuestion: (id: string) => void;
 };
 
 export const Footer = ({
   setCurrentQuestion,
-  questions,
   question,
+  setShowContactForm,
+  setShowResultForm,
+  setResultQuestion,
 }: FooterProps) => {
   const [disablePreviousButton, setDisablePreviousButton] =
     useState<boolean>(false);
   const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
+  const quiz = useCurrentQuiz();
   const { answers } = useQuizViewStore();
+  const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[];
   const theme = useTheme();
   const linear = !questions.find(
     ({ content }) => content.rule.parentId === "root"
@@ -72,16 +80,9 @@ export const Footer = ({
     }
 
     if (linear) {
-      const questionIndex = questions.findIndex(({ id }) => id === question.id);
+      return;
-
-      const nextQuestion = questions[questionIndex + 1];
-
-      if (nextQuestion) {
-        setDisableNextButton(false);
-      } else {
-        setDisableNextButton(true);
     }
-    } else {
+
     const nextQuestionId = getNextQuestionId();
     if (nextQuestionId) {
       setDisableNextButton(false);
@@ -89,15 +90,32 @@ export const Footer = ({
       const nextQuestion = getQuestionByContentId(
         question.content.rule.default
       );
+
       if (nextQuestion?.type) {
         setDisableNextButton(false);
-        } else {
-          setDisableNextButton(true);
-        }
       }
     }
   }, [question, answers]);
 
+  const showResult = () => {
+    const resultQuestion = questions.find(
+      ({ type, content }) =>
+        type === "result" && content.rule.parentId === question.content.id
+    );
+
+    if (resultQuestion) {
+      setResultQuestion(resultQuestion.id);
+
+      return;
+    }
+
+    if (quiz?.config.resultInfo.when === "after") {
+      setShowContactForm(true);
+    } else {
+      setShowResultForm(true);
+    }
+  };
+
   const getNextQuestionId = () => {
     if (answers.length) {
       const answer = answers.find(
@@ -171,11 +189,12 @@ export const Footer = ({
   const followNextStep = () => {
     if (linear) {
       const questionIndex = questions.findIndex(({ id }) => id === question.id);
-
       const nextQuestion = questions[questionIndex + 1];
 
-      if (nextQuestion) {
+      if (nextQuestion && nextQuestion.type !== "result") {
         setCurrentQuestion(nextQuestion);
+      } else {
+        showResult();
       }
 
       return;
@@ -186,7 +205,7 @@ export const Footer = ({
     if (nextQuestionId) {
       const nextQuestion = getQuestionByContentId(nextQuestionId);
 
-      if (nextQuestion?.type) {
+      if (nextQuestion?.type && nextQuestion.type !== "result") {
         setCurrentQuestion(nextQuestion);
         return;
       } else {
@@ -196,10 +215,10 @@ export const Footer = ({
       const nextQuestion = getQuestionByContentId(
         question.content.rule.default
       );
-      if (nextQuestion?.type) {
+      if (nextQuestion?.type && nextQuestion.type !== "result") {
         setCurrentQuestion(nextQuestion);
       } else {
-        enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
+        showResult();
       }
     }
   };

src/pages/ViewPublicationPage/Question.tsx

@@ -1,5 +1,9 @@
+import { useState, useEffect } from "react";
 import { Box } from "@mui/material";
 
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { getQuestionByContentId } from "@root/questions/actions";
+
 import { Variant } from "./questions/Variant";
 import { Images } from "./questions/Images";
 import { Varimg } from "./questions/Varimg";
@@ -12,12 +16,12 @@ import { File } from "./questions/File";
 import { Page } from "./questions/Page";
 import { Rating } from "./questions/Rating";
 import { Footer } from "./Footer";
+import { ContactForm } from "./ContactForm";
+import { ResultForm } from "./ResultForm";
+import { ResultQuestion } from "./ResultQuestion";
 
-import { useState, type FC, useEffect } from "react";
 import type { QuestionType } from "../../model/question/question";
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
-import { useCurrentQuiz } from "@root/quizes/hooks";
-import { getQuestionByContentId } from "@root/questions/actions";
 
 type QuestionProps = {
   questions: AnyTypedQuizQuestion[];
@@ -41,6 +45,9 @@ export const Question = ({ questions }: QuestionProps) => {
   const quiz = useCurrentQuiz();
   const [currentQuestion, setCurrentQuestion] =
     useState<AnyTypedQuizQuestion>();
+  const [showContactForm, setShowContactForm] = useState<boolean>(false);
+  const [showResultForm, setShowResultForm] = useState<boolean>(false);
+  const [resultQuestion, setResultQuestion] = useState<string>("");
 
   useEffect(() => {
     const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
@@ -70,13 +77,41 @@ export const Question = ({ questions }: QuestionProps) => {
           margin: "0 auto",
         }}
       >
+        {!showContactForm && !showResultForm && !resultQuestion && (
           <QuestionComponent currentQuestion={currentQuestion} />
+        )}
+        {resultQuestion && (
+          <ResultQuestion
+            resultQuestion={resultQuestion}
+            setResultQuestion={setResultQuestion}
+            setShowContactForm={setShowContactForm}
+            setShowResultForm={setShowResultForm}
+          />
+        )}
+        {showContactForm && (
+          <ContactForm
+            showResultForm={showResultForm}
+            setShowContactForm={setShowContactForm}
+            setShowResultForm={setShowResultForm}
+          />
+        )}
+        {showResultForm && (
+          <ResultForm
+            showContactForm={showContactForm}
+            setShowContactForm={setShowContactForm}
+            setShowResultForm={setShowResultForm}
+          />
+        )}
       </Box>
+      {!showContactForm && !showResultForm && !resultQuestion && (
         <Footer
-        questions={questions}
           question={currentQuestion}
           setCurrentQuestion={setCurrentQuestion}
+          setShowContactForm={setShowContactForm}
+          setShowResultForm={setShowResultForm}
+          setResultQuestion={setResultQuestion}
         />
+      )}
     </Box>
   );
 };

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -0,0 +1,33 @@
+import { Box, Typography, Button } from "@mui/material";
+
+import { useCurrentQuiz } from "@root/quizes/hooks";
+
+type ResultFormProps = {
+  showContactForm: boolean;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
+};
+
+export const ResultForm = ({
+  showContactForm,
+  setShowContactForm,
+  setShowResultForm,
+}: ResultFormProps) => {
+  const quiz = useCurrentQuiz();
+
+  const followNextForm = () => {
+    setShowResultForm(false);
+    setShowContactForm(true);
+  };
+
+  return (
+    <Box>
+      <Typography>Форма результатов</Typography>
+      {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
+        <Button variant="contained" onClick={followNextForm}>
+          Показать форму контактов
+        </Button>
+      )}
+    </Box>
+  );
+};

src/pages/ViewPublicationPage/ResultQuestion.tsx

@@ -0,0 +1,43 @@
+import { Box, Typography, Button } from "@mui/material";
+
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useQuestionsStore } from "@root/questions/store";
+
+type ResultQuestionProps = {
+  resultQuestion: string;
+  setResultQuestion: (id: string) => void;
+  setShowContactForm: (show: boolean) => void;
+  setShowResultForm: (show: boolean) => void;
+};
+
+export const ResultQuestion = ({
+  resultQuestion,
+  setResultQuestion,
+  setShowContactForm,
+  setShowResultForm,
+}: ResultQuestionProps) => {
+  const quiz = useCurrentQuiz();
+  const { questions } = useQuestionsStore();
+
+  const followNextForm = () => {
+    setResultQuestion("");
+
+    if (quiz?.config.resultInfo.when === "after") {
+      setShowContactForm(true);
+    } else {
+      setShowResultForm(true);
+    }
+  };
+
+  return (
+    <Box>
+      <Typography>Вопрос результат</Typography>
+      <Typography>
+        {JSON.stringify(questions.find(({ id }) => id === resultQuestion))}
+      </Typography>
+      <Button variant="contained" onClick={followNextForm}>
+        Далее
+      </Button>
+    </Box>
+  );
+};

src/pages/ViewPublicationPage/index.tsx

@@ -25,18 +25,17 @@ export const ViewPage = () => {
 
   useEffect(() => {
     const getData = async () => {
-      const quizes = await quizApi.getList()
+      const quizes = await quizApi.getList();
-      setQuizes(quizes)
+      setQuizes(quizes);
 
-      const questions = await questionApi.getList({ quiz_id: editQuizId })
+      const questions = await questionApi.getList({ quiz_id: editQuizId });
-      setQuestions(questions)
+      setQuestions(questions);
-    }
+    };
-    getData()
+    getData();
-  }, [])
+  }, []);
   useEffect(() => {
-    setVisualStartPage(quiz?.config.noStartPage)
+    setVisualStartPage(quiz?.config.noStartPage);
-  }, [questions])
+  }, [questions]);
-
 
   const [visualStartPage, setVisualStartPage] = useState<boolean>();
 
@@ -52,8 +51,8 @@ export const ViewPage = () => {
     questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
   ).sort((previousItem, item) => previousItem.page - item.page);
 
-  console.log("visualStartPage ", visualStartPage)
+  console.log("visualStartPage ", visualStartPage);
-  if (visualStartPage === undefined) return <></>
+  if (visualStartPage === undefined) return <></>;
   return (
     <Box>
       {!visualStartPage ? (

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -15,32 +15,24 @@ type NumberProps = {
 
 export const Number = ({ currentQuestion }: NumberProps) => {
   const [minRange, setMinRange] = useState<string>("0");
-  const [maxRange, setMaxRange] = useState<string>("100");
+  const [maxRange, setMaxRange] = useState<string>("100000000000");
   const theme = useTheme();
   const { answers } = useQuizViewStore();
-  const updateMinRangeDebounced = useDebouncedCallback(
+  const updateMinRangeDebounced = useDebouncedCallback((value, crowded = false) => {
-    (value, crowded = false) => {
     if (crowded) {
       setMinRange(maxRange);
     }
 
     updateAnswer(currentQuestion.content.id, value);
-    },
+  }, 1000);
-    1000
+  const updateMaxRangeDebounced = useDebouncedCallback((value, crowded = false) => {
-  );
-  const updateMaxRangeDebounced = useDebouncedCallback(
-    (value, crowded = false) => {
     if (crowded) {
       setMaxRange(minRange);
     }
 
     updateAnswer(currentQuestion.content.id, value);
-    },
+  }, 1000);
-    1000
+  const answer = answers.find(({ questionId }) => questionId === currentQuestion.content.id)?.answer as string;
-  );
-  const answer = answers.find(
-    ({ questionId }) => questionId === currentQuestion.content.id
-  )?.answer as string;
 
   const min = window.Number(currentQuestion.content.range.split("—")[0]);
   const max = window.Number(currentQuestion.content.range.split("—")[1]);

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,12 +1,4 @@
-import {
+import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    SxProps,
-    Theme,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { createQuiz } from "@root/quizes/actions";
 import { useQuizes } from "@root/quizes/hooks";
 import SectionWrapper from "@ui_kit/SectionWrapper";
@@ -16,16 +8,12 @@ import ComplexNavText from "./ComplexNavText";
 import FirstQuiz from "./FirstQuiz";
 import QuizCard from "./QuizCard";
 
-
 interface Props {
   outerContainerSx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
 
-export default function MyQuizzesFull({
+export default function MyQuizzesFull({ outerContainerSx: sx, children }: Props) {
-    outerContainerSx: sx,
-    children,
-}: Props) {
   const { quizes } = useQuizes();
   const navigate = useNavigate();
   const theme = useTheme();
@@ -69,14 +57,8 @@ export default function MyQuizzesFull({
               mb: "60px",
             }}
           >
-                        {quizes.map(quiz => (
+            {quizes.map((quiz) => (
-                            <QuizCard
+              <QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
-                                key={quiz.id}
-                                quiz={quiz}
-                                openCount={0}
-                                applicationCount={0}
-                                conversionPercent={0}
-                            />
             ))}
           </Box>
           {children}

src/pages/startPage/EditPage.tsx

@@ -29,10 +29,9 @@ import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import { cleanQuestions } from "@root/questions/actions";
+import { cleanQuestions, setQuestions } from "@root/questions/actions";
 import { updateOpenBranchingPanel } from "@root/uiTools/actions";
 import { BranchingPanel } from "../Questions/BranchingPanel";
-import { setQuestions } from "@root/questions/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { useQuizes } from "@root/quizes/hooks";
 import { questionApi } from "@api/question";
@@ -52,6 +51,7 @@ export default function EditPage() {
 
             const questions = await questionApi.getList({ quiz_id: editQuizId })
             setQuestions(questions)
+
         }
         getData()
     }, [])
@@ -245,7 +245,7 @@ export default function EditPage() {
                             left: 0,
                             bottom: 0,
                             width: "100%",
-                            padding: "20px 40px",
+                            padding: isMobile ? "20px 16px" : "20px 40px",
                             display: "flex",
                             justifyContent: "flex-end",
                             gap: "15px",
@@ -320,16 +320,20 @@ export default function EditPage() {
                                 </Box>
                             </Box>
                         )}
+                        <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
                             <Button
                                 variant="contained"
                                 sx={{
                                     fontSize: "14px",
                                     lineHeight: "18px",
                                     height: "34px",
+                                    minWidth: "130px"
                                 }}
                             >
                                 Опубликовать
                             </Button>
+                        </a>
+
                     </Box>
                 }
 

src/pages/startPage/FaviconDropZone.tsx

@@ -6,7 +6,6 @@ import { useState } from "react";
 import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
 import { useDisclosure } from "../../utils/useDisclosure";
 
-
 const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 
 interface Props {
@@ -42,19 +41,23 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
   };
 
   return (
-        <Box sx={{
+    <Box
+      sx={{
         display: "flex",
         gap: "10px",
-        }}>
+      }}
+    >
       <UploadImageModal
         isOpen={isImageUploadOpen}
         onClose={closeImageUploadModal}
         handleImageChange={handleImageUpload}
+        description="Принимает JPG, PNG — максимум 5mb"
+        accept={["jpeg", "jpg", "png"]}
       />
       <Box
         onDragEnter={() => !imageUrl && setIsDropReady(true)}
         onDragExit={() => setIsDropReady(false)}
-                onDragOver={e => e.preventDefault()}
+        onDragOver={(e) => e.preventDefault()}
         onDrop={onDrop}
         sx={{
           width: "48px",
@@ -62,7 +65,8 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
           backgroundColor: theme.palette.background.default,
           border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
           borderRadius: "8px",
-                }}>
+        }}
+      >
         <ButtonBase
           onClick={imageUrl ? undefined : openImageUploadModal}
           sx={{
@@ -75,7 +79,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
             overflow: "hidden",
           }}
         >
-                    {imageUrl ?
+          {imageUrl ? (
             <img
               src={imageUrl}
               style={{
@@ -84,17 +88,19 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
                 objectFit: "scale-down",
               }}
             />
-                        :
+          ) : (
             <UploadIcon />
-                    }
+          )}
         </ButtonBase>
       </Box>
-            <Box sx={{
+      <Box
+        sx={{
           display: "flex",
           flexDirection: "column",
           alignItems: "start",
-            }}>
+        }}
-                {imageUrl &&
+      >
+        {imageUrl && (
           <ButtonBase onClick={onDeleteClick}>
             <Typography
               sx={{
@@ -107,7 +113,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
               Удалить
             </Typography>
           </ButtonBase>
-                }
+        )}
         <Typography
           sx={{
             color: theme.palette.orange.main,
@@ -122,4 +128,4 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
       </Box>
     </Box>
   );
-};
+}

src/pages/startPage/StartPageSettings.tsx

@@ -2,6 +2,7 @@ import AlignCenterIcon from "@icons/AlignCenterIcon";
 import AlignLeftIcon from "@icons/AlignLeftIcon";
 import AlignRightIcon from "@icons/AlignRightIcon";
 import ArrowDown from "@icons/ArrowDownIcon";
+import ArrowLeft from "@icons/ArrowLeftSP";
 import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
 import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
 import LayoutStandartIcon from "@icons/LayoutStandartIcon";
@@ -652,7 +653,7 @@ export default function StartPageSettings() {
                         <Button
                             onClick={() => setFormState("design")}
                             sx={{
-                                display: "block",
+                                display: "flex",
                                 marginTop: "20px",
                                 padding: "0",
                                 fontWeight: "bold",
@@ -662,14 +663,14 @@ export default function StartPageSettings() {
                                 textUnderlineOffset: "2px",
                             }}
                         >
-                            🡰 Вернуться к дизайну
+                            <ArrowLeft right={false}/> Вернуться к дизайну
                         </Button>
                     )}
                     {formState === "design" && (
                         <Button
                             onClick={() => setFormState("content")}
                             sx={{
-                                display: "block",
+                                display: "flex",
                                 marginLeft: "auto",
                                 marginTop: "20px",
                                 padding: "0",
@@ -680,7 +681,7 @@ export default function StartPageSettings() {
                                 textUnderlineOffset: "2px",
                             }}
                         >
-                            Далее заполнить контент 🡲
+                            Далее заполнить контент <ArrowLeft right={true}/>
                         </Button>
                     )}
                 </Box>

src/stores/questions/actions.ts

@@ -297,6 +297,7 @@ export const uploadQuestionImage = async (
     if (!question || !quizQid) return;
 
     try {
+        console.log(question.quizId)
         const response = await quizApi.addImages(question.quizId, blob);
 
         const values = Object.values(response);
@@ -553,3 +554,4 @@ export const createBackResult = async (
         enqueueSnackbar("Не удалось создать вопрос");
     }
 });
+

src/ui_kit/CustomSlider.tsx

@@ -17,7 +17,7 @@ export const CustomSlider = ({
   max = 100,
   step,
   onChange,
-    onChangeCommitted
+  onChangeCommitted,
 }: CustomSliderProps) => {
   // const handleChange = ({ type }: Event, newValue: number | number[]) => {
   //     // Для корректной работы слайдера в FireFox
@@ -46,28 +46,31 @@ export const CustomSlider = ({
         "& .MuiSlider-valueLabel": {
           background: theme.palette.brightPurple.main,
           borderRadius: "8px",
-                    width: "60px",
+          minWidth: "60px",
-                    height: "36px"
+          width: "auto",
+          whiteSpace: "nowrap",
+          textAlign: "center",
+          height: "36px",
         },
         "& .MuiSlider-valueLabel::before": {
           width: "6px",
           height: "2px",
           transform: "translate(-50%, 50%) rotate(90deg)",
-                    bottom: "-5px"
+          bottom: "-5px",
         },
         "& .MuiSlider-rail": {
           backgroundColor: "#F2F3F7",
           border: `1px solid #9A9AAF`,
-                    height: "12px"
+          height: "12px",
         },
         "& .MuiSlider-thumb": {
           border: "3px #f2f3f7 solid",
           height: "23px",
-                    width: "23px"
+          width: "23px",
         },
         "& .MuiSlider-track": {
-                    height: "12px"
+          height: "12px",
-                }
+        },
       }}
     />
   );

src/ui_kit/CustomTextField.tsx

@@ -1,10 +1,4 @@
-import {
+import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
-  FormControl,
-  TextField,
-  useTheme,
-  SxProps,
-  Theme,
-} from "@mui/material";
 
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
 import type { InputProps } from "@mui/material";

src/ui_kit/Header/Header.tsx

@@ -5,6 +5,7 @@ import { decrementCurrentStep } from "@root/quizes/actions";
 import PenaLogo from "../PenaLogo";
 import CustomAvatar from "./Avatar";
 import NavMenuItem from "./NavMenuItem";
+import { Link } from "react-router-dom";
 
 export default function Header() {
   const theme = useTheme();
@@ -25,7 +26,9 @@ export default function Header() {
         zIndex: theme.zIndex.drawer + 1,
       }}
     >
+      <Link to="/">
         <PenaLogo width={124} />
+      </Link>
       <Box
         sx={{
           display: "flex",

src/ui_kit/Header/HeaderFull.tsx

@@ -1,11 +1,4 @@
-import {
+import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
-  Box,
-  Container,
-  IconButton,
-  Typography,
-  useTheme,
-  useMediaQuery,
-} from "@mui/material";
 import NavMenuItem from "./NavMenuItem";
 import PenaLogo from "../PenaLogo";
 import WalletIcon from "@icons/WalletIcon";
@@ -13,7 +6,7 @@ import CustomAvatar from "./Avatar";
 import { Burger } from "@icons/Burger";
 import { clearAuthToken } from "@frontend/kitui";
 import { logout } from "@api/auth";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import { clearUserData } from "@root/user";
 import { LogoutButton } from "@ui_kit/LogoutButton";
@@ -59,7 +52,9 @@ export default function HeaderFull() {
           style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
         />
       )}
+      <Link to="/">
         <PenaLogo width={124} />
+      </Link>
       {!isTablet && (
         <Box
           sx={{
@@ -93,10 +88,7 @@ export default function HeaderFull() {
               >
                 Мой баланс
               </Typography>
-              <Typography
+              <Typography variant="body2" color={theme.palette.brightPurple.main}>
-                variant="body2"
-                color={theme.palette.brightPurple.main}
-              >
                 00.00 руб.
               </Typography>
             </Box>

src/ui_kit/Modal/CropModal.tsx

@@ -17,7 +17,6 @@ import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 import { canvasPreview } from "./utils/canvasPreview";
 
-
 const styleSlider: SxProps<Theme> = {
   color: "#7E2AEA",
   height: "12px",
@@ -51,7 +50,14 @@ interface Props {
   onSaveImageClick: (imageBlob: Blob) => void;
 }
 
-export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
+export const CropModal: FC<Props> = ({
+  isOpen,
+  imageBlob,
+  originalImageUrl,
+  setCropModalImageBlob,
+  onSaveImageClick,
+  onClose,
+}) => {
   const theme = useTheme();
   const [crop, setCrop] = useState<Crop>();
   const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
@@ -130,7 +136,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
-            <Box sx={{
+      <Box
+        sx={{
           position: "absolute",
           top: "50%",
           left: "50%",
@@ -140,7 +147,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
           padding: "20px",
           borderRadius: "8px",
           width: isMobile ? "343px" : "620px",
-            }}>
+        }}
+      >
         <Box
           sx={{
             height: "320px",
@@ -204,17 +212,18 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             justifyContent: "space-between",
           }}
         >
-                    <IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
+          <IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
             <ResetIcon />
           </IconButton>
           <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
-                            Размер
-                        </Typography>
             <Slider
-                            sx={[styleSlider, {
+              sx={[
+                styleSlider,
+                {
                   width: isMobile ? "350px" : "250px",
-                            }]}
+                },
+              ]}
               value={width}
               min={50}
               max={580}
@@ -225,13 +234,14 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             />
           </Box>
           <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
-                            Затемнение
-                        </Typography>
             <Slider
-                            sx={[styleSlider, {
+              sx={[
+                styleSlider,
+                {
                   width: isMobile ? "350px" : "250px",
-                            }]}
+                },
+              ]}
               value={darken}
               min={0}
               max={100}
@@ -245,21 +255,26 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             marginTop: "40px",
             width: "100%",
             display: "flex",
+            gap: "10px",
           }}
         >
           <Button
-                        onClick={handleSaveClick}
+            onClick={handleCropClick}
             disableRipple
-                        data-cy="crop-modal-save-button"
+            disabled={!completedCrop}
             sx={{
-                            height: "48px",
+              padding: "10px 20px",
-                            color: "#7E2AEA",
               borderRadius: "8px",
-                            border: "1px solid #7E2AEA",
+              background: theme.palette.brightPurple.main,
-                            marginRight: "10px",
+              fontSize: "18px",
-                            px: "20px",
+              color: "#7E2AEA",
+              border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
+              backgroundColor: "transparent",
             }}
-                    >Сохранить</Button>
+          >
+            <CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
+            Обрезать
+          </Button>
           <Button
             onClick={handleLoadOriginalImage}
             disableRipple
@@ -270,26 +285,25 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
               color: "#7E2AEA",
               borderRadius: "8px",
               border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            ml: "auto",
             }}
           >
             Загрузить оригинал
           </Button>
           <Button
-                        onClick={handleCropClick}
+            onClick={handleSaveClick}
             disableRipple
             variant="contained"
-                        disabled={!completedCrop}
+            data-cy="crop-modal-save-button"
             sx={{
-                            padding: "10px 20px",
+              height: "48px",
               borderRadius: "8px",
-                            background: theme.palette.brightPurple.main,
+              border: "1px solid #7E2AEA",
-                            fontSize: "18px",
+              marginRight: "10px",
+              px: "20px",
+              ml: "auto",
             }}
           >
-                        <CropIcon />
+            Сохранить
-                        Обрезать
           </Button>
         </Box>
       </Box>

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx

@@ -32,7 +32,9 @@ export default function Number({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">
+        {question.title}
+      </Typography>
       <Box
         sx={{
           px: 2,

src/ui_kit/switchStepPages.tsx

@@ -32,7 +32,7 @@ export default function SwitchStepPages({
         }
         case 1: return quizType === "form" ? <FormQuestionsPage /> : <QuestionsPage />;
         case 2: return <ResultPage />;
-        case 3: return <QuestionsMap />;
+        case 3: return <ContactFormPage />;
         case 4: return <ContactFormPage />;
         case 5: return <InstallQuiz />;
         case 6: return <>Реклама</>;

yarn.lock

@@ -4114,10 +4114,15 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-cypress@^13.4.0:
+cypress-file-upload@^5.0.8:
-  version "13.4.0"
+  version "5.0.8"
-  resolved "https://registry.npmjs.org/cypress/-/cypress-13.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
-  integrity sha512-KeWNC9xSHG/ewZURVbaQsBQg2mOKw4XhjJZFKjWbEjgZCdxpPXLpJnfq5Jns1Gvnjp6AlnIfpZfWFlDgVKXdWQ==
+  integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
+
+cypress@^13.6.1:
+  version "13.6.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.1.tgz#c5f714f08551666ed3ac1fa95718eabb23a416df"
+  integrity sha512-k1Wl5PQcA/4UoTffYKKaxA0FJKwg8yenYNYRzLt11CUR0Kln+h7Udne6mdU1cUIdXBDTVZWtmiUjzqGs7/pEpw==
   dependencies:
     "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"