Merge branch 'dev' into delete-modal

src/App.tsx

@@ -5,7 +5,7 @@ import "dayjs/locale/ru";
 import SigninDialog from "./pages/auth/Signin";
 import SignupDialog from "./pages/auth/Signup";
 import { ViewPage } from "./pages/ViewPublicationPage";
-import { BrowserRouter, Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
+import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
 import "./index.css";
 import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
 import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
@@ -21,12 +21,13 @@ import { clearUserData, setUser, useUserStore } from "@root/user";
 import { enqueueSnackbar } from "notistack";
 import PrivateRoute from "@ui_kit/PrivateRoute";
 
+import { Restore } from "./pages/startPage/Restore";
 
 dayjs.locale("ru");
 
 const routeslink = [
   { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
-    { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true, },
+  { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
   { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
   { path: "/result", page: <Result />, header: true, sidebar: true },
   { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
@@ -61,16 +62,19 @@ export default function App() {
         <Routes>
           <Route path="/signin" element={<SigninDialog />} />
           <Route path="/signup" element={<SignupDialog />} />
+          <Route path="/restore" element={<Restore />} />
         </Routes>
       )}
       <Routes location={location.state?.backgroundLocation || location}>
         <Route path="/" element={<Landing />} />
         <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
         <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
+        <Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
         <Route element={<PrivateRoute />}>
           {routeslink.map((e, i) => (
             <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
           ))}
+
           <Route path="edit" element={<EditPage />} />
           <Route path="crop" element={<ImageCrop />} />
           <Route path="/view" element={<ViewPage />} />

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -27,7 +27,7 @@ const buttons = [
   },
   {
     name: "Email",
-    desc: "mail@xample.ru",
+    desc: "mail@example.ru",
     key: "email"
   },
   {
@@ -297,7 +297,7 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
             Добавить поле +
           </Button>
       }
-      <Link
+      {/* <Link
         component="button"
         // onClick={() => drawerMessengerHC(true)}
         sx={{
@@ -309,7 +309,7 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
         }}
       >
         Добавить мессенджеры
-      </Link>
+      </Link> */}
 
       <PseudoButton />
     </Box>
@@ -355,7 +355,7 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
 
         </Popover>
       </Box>
-      <Link
+      {/* <Link
         sx={{
           mt: "20px",
           fontSize: "16px",
@@ -365,7 +365,7 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
         }}
       >
         Добавить мессенджеры
-      </Link>
+      </Link> */}
       <PseudoButton />
     </Box>
   )

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -51,7 +51,6 @@ type Popper = {
 type NodeSingularWithPopper = NodeSingular & {
   popper: (config: PopperConfig) => Popper;
 };
-  let counter = 0;
 
 const stylesheet: Stylesheet[] = [
   {
@@ -161,7 +160,6 @@ function CsComponent({
   }, [modalQuestionTargetContentId])
 
   const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
-console.log('AN', counter++, parentNodeContentId,targetNodeContentId)
     
     //запрещаем работу родителя-ребенка если это один и тот же вопрос
     if (parentNodeContentId === targetNodeContentId) return
@@ -171,7 +169,6 @@ console.log('AN', counter++, parentNodeContentId,targetNodeContentId)
     const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
     //если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
     const targetQuestion = { ...getQuestionByContentId(targetNodeContentId || dragQuestionContentId) } as AnyTypedQuizQuestion
-console.log('AN1', targetQuestion, parentNodeContentId,parentNodeChildren)
     if (Object.keys(targetQuestion).length !== 0  && parentNodeContentId && parentNodeChildren !== undefined) {
       clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
       cy?.data('changed', true)
@@ -199,13 +196,13 @@ console.log('AN1', targetQuestion, parentNodeContentId,parentNodeChildren)
 
   const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyTypedQuizQuestion, parentNodeChildren: number }) => {
 
-console.log('AN2', parentNodeContentId,parentNodeChildren,targetQuestion)
     const parentQuestion = { ...getQuestionByContentId(parentNodeContentId) } as AnyTypedQuizQuestion
 
 
     //смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
     trashQuestions.forEach((targetQuestion) => {
       if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
+        console.log('deleteQ', targetQuestion.id)
         deleteQuestion(targetQuestion.id);
       }
     })

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/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";
@@ -26,14 +19,13 @@ export default function QuestionsPage() {
   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",
@@ -64,7 +55,7 @@ export default function QuestionsPage() {
           Свернуть всё
         </Button>
       </Box>
-            <QuestionSwitchWindowTool/>
+      <QuestionSwitchWindowTool />
       <Box
         sx={{
           display: "flex",
@@ -86,7 +77,6 @@ export default function QuestionsPage() {
           <AddPlus />
         </IconButton>
 
-                
         <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
           <Button
             variant="outlined"
@@ -112,7 +102,7 @@ export default function QuestionsPage() {
         </Box>
       </Box>
       {createPortal(<QuizPreview />, document.body)}
-            {openedModalSettingsId !== null && <BranchingQuestions/>}
+      {openedModalSettingsId !== null && <BranchingQuestions />}
     </>
   );
 }

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/ResultPage/cards/ResultCard.tsx

@@ -458,7 +458,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                       placeholder="URL видео"
                       text={resultData.content.video ?? ""}
                       onChange={e => updateQuestion(resultData.id, q => {
-                        resultData.content.video = e.target.value;
+                        q.content.video = e.target.value;
                       })}
                     />
                   </Box>

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -1,33 +1,152 @@
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography, Button, Paper, TextField, Link, FormControl } from "@mui/material";
+import NameIcon from "@icons/ContactFormIcon/NameIcon";
+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";
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import { useState } from "react";
+import { useQuestionsStore } from "@root/questions/store";
+
+import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 
 type ContactFormProps = {
+  currentQuestion: AnyTypedQuizQuestion;
   showResultForm: boolean;
   setShowContactForm: (show: boolean) => void;
   setShowResultForm: (show: boolean) => void;
 };
 
+const icons = [
+  { type: "name", icon: NameIcon, defaultText: "Введите имя", defaultTitle: "имя" },
+  { type: "email", icon: EmailIcon, defaultText: "Введите Email", defaultTitle: "Email" },
+  { type: "phone", icon: PhoneIcon, defaultText: "Введите номер телефона", defaultTitle: "номер телефона" },
+  { type: "text", icon: TextIcon, defaultText: "Введите фамилию", defaultTitle: "фамилию" },
+  { type: "address", icon: AddressIcon, defaultText: "Введите адрес", defaultTitle: "адрес" },
+]
+
 export const ContactForm = ({
+  currentQuestion,
   showResultForm,
   setShowContactForm,
   setShowResultForm,
 }: ContactFormProps) => {
   const quiz = useCurrentQuiz();
+  const { questions } = useQuestionsStore();
 
+  const [ready, setReady] = useState(false)
   const followNextForm = () => {
     setShowContactForm(false);
     setShowResultForm(true);
   };
 
+  const resultQuestion = questions.find(
+    (question) =>
+      question.type === "result" &&
+      question.content.rule.parentId === currentQuestion.content.id
+  );
   return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh"
+      }}
+    >
+      <Box
+        sx={{
+          width: "800px"
+        }}
+      >
+
         <Box>
-      <Typography>Форма контактов</Typography>
+          <Typography
-      {!showResultForm && quiz?.config.resultInfo.when === "after" && (
+            sx={{
-        <Button variant="contained" onClick={followNextForm}>
+              textAlign: "center",
-          Показать результат
+              m: "20px 0",
+              fontSize: "28px"
+            }}
+          >
+            Заполните форму, чтобы получить результаты теста
+          </Typography>
+        </Box>
+
+
+        <Paper
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            p: "30px"
+          }}>
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              my: "20px"
+            }}
+          >
+            {
+              icons.map((data) => {
+                const FC = quiz?.config.formContact[data.type]
+                return FC.used ? <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />
+                  :
+                  <></>
+              })
+            }
+
+          </Box>
+
+          {
+            // resultQuestion &&
+            // quiz?.config.resultInfo.when === "after" && 
+            (
+              <Button
+                disabled={!ready}
+                variant="contained" onClick={followNextForm}>
+                Получить результаты
               </Button>
             )}
+
+          <Box
+            sx={{
+              display: "flex",
+              mt: "20px",
+              width: "450px",
+            }}
+          >
+            <CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} />
+            <Typography>
+              С
+              <Link> Положением об обработке персональных данных </Link>
+              и
+              <Link> Политикой конфиденциальности </Link>
+              ознакомлен
+            </Typography>
+
           </Box>
+        </Paper>
+      </Box >
+    </Box >
   );
 };
+
+const CustomInput = ({ title, desc, Icon }: any) => {
+  return <Box m="15px 0">
+    <Typography mb="7px">{title}</Typography>
+    <TextField
+      sx={{
+        width: "350px",
+      }}
+      placeholder={desc}
+      InputProps={{
+        startAdornment: <Icon color="gray" />,
+      }}
+    />
+  </Box>
+}

src/pages/ViewPublicationPage/Footer.tsx

@@ -17,7 +17,6 @@ type FooterProps = {
   question: AnyTypedQuizQuestion;
   setShowContactForm: (show: boolean) => void;
   setShowResultForm: (show: boolean) => void;
-  setResultQuestion: (id: string) => void;
 };
 
 export const Footer = ({
@@ -25,7 +24,6 @@ export const Footer = ({
   question,
   setShowContactForm,
   setShowResultForm,
-  setResultQuestion,
 }: FooterProps) => {
   const [disablePreviousButton, setDisablePreviousButton] =
     useState<boolean>(false);
@@ -103,16 +101,10 @@ export const Footer = ({
         type === "result" && content.rule.parentId === question.content.id
     );
 
-    if (resultQuestion) {
+    if (quiz?.config.resultInfo.when !== "after" && resultQuestion) {
-      setResultQuestion(resultQuestion.id);
-
-      return;
-    }
-
-    if (quiz?.config.resultInfo.when === "after") {
-      setShowContactForm(true);
-    } else {
       setShowResultForm(true);
+    } else {
+      setShowContactForm(true);
     }
   };
 

src/pages/ViewPublicationPage/Question.tsx

@@ -47,7 +47,6 @@ export const Question = ({ questions }: QuestionProps) => {
     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 || "");
@@ -77,19 +76,12 @@ export const Question = ({ questions }: QuestionProps) => {
           margin: "0 auto",
         }}
       >
-        {!showContactForm && !showResultForm && !resultQuestion && (
+        {!showContactForm && !showResultForm && (
           <QuestionComponent currentQuestion={currentQuestion} />
         )}
-        {resultQuestion && (
-          <ResultQuestion
-            resultQuestion={resultQuestion}
-            setResultQuestion={setResultQuestion}
-            setShowContactForm={setShowContactForm}
-            setShowResultForm={setShowResultForm}
-          />
-        )}
         {showContactForm && (
           <ContactForm
+            currentQuestion={currentQuestion}
             showResultForm={showResultForm}
             setShowContactForm={setShowContactForm}
             setShowResultForm={setShowResultForm}
@@ -97,19 +89,19 @@ export const Question = ({ questions }: QuestionProps) => {
         )}
         {showResultForm && (
           <ResultForm
+            currentQuestion={currentQuestion}
             showContactForm={showContactForm}
             setShowContactForm={setShowContactForm}
             setShowResultForm={setShowResultForm}
           />
         )}
       </Box>
-      {!showContactForm && !showResultForm && !resultQuestion && (
+      {!showContactForm && !showResultForm && (
         <Footer
           question={currentQuestion}
           setCurrentQuestion={setCurrentQuestion}
           setShowContactForm={setShowContactForm}
           setShowResultForm={setShowResultForm}
-          setResultQuestion={setResultQuestion}
         />
       )}
     </Box>

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -1,19 +1,33 @@
 import { Box, Typography, Button } from "@mui/material";
+import { getQuestionByContentId } from "@root/questions/actions";
 
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useQuestionsStore } from "@root/questions/store";
+
+import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
+import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx"
 
 type ResultFormProps = {
+  currentQuestion: AnyTypedQuizQuestion;
   showContactForm: boolean;
   setShowContactForm: (show: boolean) => void;
   setShowResultForm: (show: boolean) => void;
 };
 
 export const ResultForm = ({
+  currentQuestion,
   showContactForm,
   setShowContactForm,
   setShowResultForm,
+
 }: ResultFormProps) => {
   const quiz = useCurrentQuiz();
+  const { questions } = useQuestionsStore();
+  const resultQuestion = questions.find(
+    (question) =>
+      question.type === "result" &&
+      question.content.rule.parentId === currentQuestion.content.id
+  );
 
   const followNextForm = () => {
     setShowResultForm(false);
@@ -21,8 +35,90 @@ export const ResultForm = ({
   };
 
   return (
-    <Box>
+    <Box
-      <Typography>Форма результатов</Typography>
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: "100vh",
+        width: "100vw",
+        pt: "28px"
+      }}
+    >
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "start",
+          width: "490px",
+        }}
+      >
+        {
+          !resultQuestion?.content.useImage &&
+          resultQuestion.content.video &&
+          <YoutubeEmbedIframe
+            videoUrl={resultQuestion.content.video}
+            containerSX={{
+              width: "490px",
+              height: "280px"
+            }}
+          />
+        }
+        {
+          resultQuestion?.content.useImage &&
+          resultQuestion.content.back &&
+          <Box
+            component='img'
+            src={resultQuestion.content.back}
+            sx={{
+              width: "490px",
+              height: "280px"
+            }}
+          >
+          </Box>
+        }
+
+        {resultQuestion.description !== "" && resultQuestion.description !== " " && <Typography
+          sx={{
+            fontSize: "23px",
+            fontWeight: 700,
+            m: "20px 0"
+          }}
+        >{resultQuestion.description}</Typography>}
+
+        <Typography
+          sx={{
+            m: "20px 0"
+          }}
+        >{resultQuestion.title || "Форма результатов"}
+        </Typography>
+
+      </Box>
+
+      <Box
+        sx={{
+          height: "100px",
+          boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            p:"10px 20px",
+            width: "210px",
+            height: "50px"
+          }}
+        >
+          {resultQuestion.content.hint.text || "Узнать подробнее"}
+        </Button>
+      </Box>
+
       {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
         <Button variant="contained" onClick={followNextForm}>
           Показать форму контактов

src/pages/ViewPublicationPage/ResultQuestion.tsx

@@ -1,43 +0,0 @@
-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/auth/Signin.tsx

@@ -1,18 +1,9 @@
 import { login } from "@api/auth";
 import CloseIcon from "@mui/icons-material/Close";
-import {
+import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
-  Box,
-  Button,
-  Dialog,
-  IconButton,
-  Link,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
 import { setUserId, useUserStore } from "@root/user";
 import InputTextfield from "@ui_kit/InputTextfield";
-import PenaLogo2 from "@ui_kit/PenaLogo2";
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
 import PasswordInput from "@ui_kit/passwordInput";
 import { useFormik } from "formik";
 import { enqueueSnackbar } from "notistack";
@@ -31,9 +22,7 @@ const initialValues: Values = {
 };
 
 const validationSchema = object({
-  email: string()
+  email: string().required("Поле обязательно").email("Введите корректный email"),
-    .required("Поле обязательно")
-    .email("Введите корректный email"),
   password: string().required("Поле обязательно").min(8, "Минимум 8 символов"),
 });
 
@@ -49,10 +38,7 @@ export default function SigninDialog() {
     initialValues,
     validationSchema,
     onSubmit: async (values, formikHelpers) => {
-      const [loginResponse, loginError] = await login(
+      const [loginResponse, loginError] = await login(values.email.trim(), values.password.trim());
-        values.email.trim(),
-        values.password.trim()
-      );
 
       formikHelpers.setSubmitting(false);
 
@@ -111,8 +97,7 @@ export default function SigninDialog() {
           gap: "15px",
           borderRadius: "12px",
           boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
-          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled":
+          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
-          {
             position: "absolute",
             top: "46px",
             margin: "0",
@@ -130,7 +115,7 @@ export default function SigninDialog() {
           <CloseIcon sx={{ transform: "scale(1.5)" }} />
         </IconButton>
         <Box>
-          <PenaLogo2 width={upMd ? 233 : 196} color="black" />
+          <Logotip width={upMd ? 233 : 196} />
         </Box>
         <Typography
           sx={{
@@ -212,16 +197,8 @@ export default function SigninDialog() {
             mt: "auto",
           }}
         >
-          <Typography
+          <Typography sx={{ color: "#7E2AEA", textAlign: "center" }}>Вы еще не присоединились?</Typography>
-            sx={{ color: "#7E2AEA", textAlign: "center" }}
+          <Link component={RouterLink} to="/signup" sx={{ color: "#7E2AEA" }}>
-          >
-            Вы еще не присоединились?
-          </Typography>
-          <Link
-            component={RouterLink}
-            to="/signup"
-            sx={{ color: "#7E2AEA" }}
-          >
             Регистрация
           </Link>
         </Box>

src/pages/auth/Signup.tsx

@@ -1,23 +1,14 @@
 import { register } from "@api/auth";
 import CloseIcon from "@mui/icons-material/Close";
-import {
+import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    Dialog,
-    IconButton,
-    Link,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { setUserId, useUserStore } from "@root/user";
 import InputTextfield from "@ui_kit/InputTextfield";
-import PenaLogo2 from "@ui_kit/PenaLogo2";
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
 import PasswordInput from "@ui_kit/passwordInput";
 import { useFormik } from "formik";
 import { enqueueSnackbar } from "notistack";
 import { useEffect, useState } from "react";
-import {Link as RouterLink, useLocation, useNavigate} from "react-router-dom";
+import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
 import { object, ref, string } from "yup";
 
 interface Values {
@@ -33,9 +24,7 @@ const initialValues: Values = {
 };
 
 const validationSchema = object({
-  email: string()
+  email: string().required("Поле обязательно").email("Введите корректный email"),
-    .required("Поле обязательно")
-    .email("Введите корректный email"),
   password: string()
     .min(8, "Минимум 8 символов")
     .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
@@ -50,18 +39,14 @@ export default function SignupDialog() {
   const user = useUserStore((state) => state.user);
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const location = useLocation()
+  const location = useLocation();
 
   const navigate = useNavigate();
   const formik = useFormik<Values>({
     initialValues,
     validationSchema,
     onSubmit: async (values, formikHelpers) => {
-      const [registerResponse, registerError] = await register(
+      const [registerResponse, registerError] = await register(values.email.trim(), values.password.trim(), "+7");
-        values.email.trim(),
-        values.password.trim(),
-        "+7"
-      );
 
       formikHelpers.setSubmitting(false);
 
@@ -120,8 +105,7 @@ export default function SignupDialog() {
           gap: "15px",
           borderRadius: "12px",
           boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
-          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled":
+          "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
-            {
             position: "absolute",
             top: "46px",
             margin: "0",
@@ -139,7 +123,7 @@ export default function SignupDialog() {
           <CloseIcon sx={{ transform: "scale(1.5)" }} />
         </IconButton>
         <Box sx={{ mt: upMd ? undefined : "62px" }}>
-          <PenaLogo2 width={upMd ? 233 : 196} color="black" />
+          <Logotip width={upMd ? 233 : 196} />
         </Box>
         <Typography
           sx={{
@@ -186,11 +170,8 @@ export default function SignupDialog() {
             value: formik.values.repeatPassword,
             placeholder: "Не менее 8 символов",
             onBlur: formik.handleBlur,
-            error:
+            error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
-              formik.touched.repeatPassword &&
+            helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
-              Boolean(formik.errors.repeatPassword),
-            helperText:
-              formik.touched.repeatPassword && formik.errors.repeatPassword,
             autoComplete: "new-password",
             "data-cy": "repeat-password",
           }}

src/pages/startPage/Restore.tsx

@@ -0,0 +1,189 @@
+import { FC, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Button, Dialog, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
+import InputTextfield from "@ui_kit/InputTextfield";
+import PasswordInput from "@ui_kit/passwordInput";
+import { useFormik } from "formik";
+import { object, ref, string } from "yup";
+import Logotip from "../Landing/images/icons/QuizLogo";
+import { useNavigate } from "react-router-dom";
+
+interface Values {
+  email: string;
+  password: string;
+  repeatPassword: string;
+}
+
+const initialValues: Values = {
+  email: "",
+  password: "",
+  repeatPassword: "",
+};
+
+const validationSchema = object({
+  email: string().required("Поле обязательно").email("Введите корректный email"),
+  password: string()
+    .min(8, "Минимум 8 символов")
+    .matches(/^[.,:;-_+\d\w]+$/, "Некорректные символы")
+    .required("Поле обязательно"),
+  repeatPassword: string()
+    .oneOf([ref("password"), undefined], "Пароли не совпадают")
+    .required("Повторите пароль"),
+});
+
+export const Restore: FC = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
+  const formik = useFormik<Values>({
+    initialValues,
+    validationSchema,
+    onSubmit: (values) => {
+      console.log(values);
+    },
+  });
+
+  function handleClose() {
+    setIsDialogOpen(false);
+    setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
+  }
+
+  return (
+    <Box>
+      <Button sx={{ width: "200px", height: "200px", background: "red" }} onClick={() => setIsDialogOpen(true)}>
+        open
+      </Button>
+      <Dialog
+        open={isDialogOpen}
+        onClose={handleClose}
+        PaperProps={{
+          sx: {
+            width: "600px",
+            maxWidth: "600px",
+          },
+        }}
+        slotProps={{
+          backdrop: {
+            style: {
+              backgroundColor: "rgb(0 0 0 / 0.7)",
+            },
+          },
+        }}
+      >
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          noValidate
+          sx={{
+            position: "relative",
+            backgroundColor: "white",
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            p: upMd ? "50px" : "18px",
+            pb: upMd ? "40px" : "30px",
+            gap: "15px",
+            borderRadius: "12px",
+            boxShadow: "0px 15px 80px rgb(210 208 225 / 70%)",
+            "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
+              position: "absolute",
+              top: "46px",
+              margin: "0",
+            },
+          }}
+        >
+          <IconButton
+            onClick={handleClose}
+            sx={{
+              position: "absolute",
+              right: "7px",
+              top: "7px",
+            }}
+          >
+            <CloseIcon sx={{ transform: "scale(1.5)" }} />
+          </IconButton>
+          <Box sx={{ mt: upMd ? undefined : "62px" }}>
+            <Logotip width={upMd ? 233 : 196} />
+          </Box>
+          <Typography
+            sx={{
+              color: "#4D4D4D",
+              mt: "5px",
+              mb: upMd ? "30px" : "33px",
+            }}
+          >
+            Восстановление пароля
+          </Typography>
+          <InputTextfield
+            TextfieldProps={{
+              value: formik.values.email,
+              placeholder: "username",
+              onBlur: formik.handleBlur,
+              error: formik.touched.email && Boolean(formik.errors.email),
+              helperText: formik.touched.email && formik.errors.email,
+              "data-cy": "username",
+            }}
+            onChange={formik.handleChange}
+            color="#F2F3F7"
+            id="email"
+            label="Email"
+            gap={upMd ? "10px" : "10px"}
+          />
+          <PasswordInput
+            TextfieldProps={{
+              value: formik.values.password,
+              placeholder: "Не менее 8 символов",
+              onBlur: formik.handleBlur,
+              error: formik.touched.password && Boolean(formik.errors.password),
+              helperText: formik.touched.password && formik.errors.password,
+              autoComplete: "new-password",
+              "data-cy": "password",
+            }}
+            onChange={formik.handleChange}
+            color="#F2F3F7"
+            id="password"
+            label="Пароль"
+            gap={upMd ? "10px" : "10px"}
+          />
+          <PasswordInput
+            TextfieldProps={{
+              value: formik.values.repeatPassword,
+              placeholder: "Не менее 8 символов",
+              onBlur: formik.handleBlur,
+              error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
+              helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
+              autoComplete: "new-password",
+              "data-cy": "repeat-password",
+            }}
+            onChange={formik.handleChange}
+            color="#F2F3F7"
+            id="repeatPassword"
+            label="Повторить пароль"
+            gap={upMd ? "10px" : "10px"}
+          />
+          <Button
+            variant="contained"
+            fullWidth
+            type="submit"
+            disabled={formik.isSubmitting}
+            sx={{
+              py: "12px",
+              "&:hover": {
+                backgroundColor: "#581CA7",
+              },
+              "&:active": {
+                color: "white",
+                backgroundColor: "black",
+              },
+            }}
+            data-cy="signup"
+          >
+            Восстановить
+          </Button>
+        </Box>
+      </Dialog>
+    </Box>
+  );
+};