Merge branch 'result-page' into dev

package.json

@@ -40,6 +40,7 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-easy-crop": "^5.0.0",
+        "react-error-boundary": "^4.0.11",
         "react-image-crop": "^10.1.5",
         "react-image-file-resizer": "^0.4.8",
         "react-rnd": "^10.4.1",

src/App.tsx

@@ -11,11 +11,11 @@ import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
 import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
 import Landing from "./pages/Landing/Landing";
 import QuestionsPage from "./pages/Questions/QuestionsPage";
-import { Result } from "./pages/Result/Result";
-import { Setting } from "./pages/Result/Setting";
+import { Result } from "./pages/ResultPage/Result";
+import { ResultSettings } from "./pages/ResultPage/ResultSettings";
 import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
 import Main from "./pages/main";
-import StartPage from "./pages/startPage/StartPage";
+import EditPage from "./pages/startPage/EditPage";
 import { clearAuthToken, getMessageFromFetchError, useUserFetcher } from "@frontend/kitui";
 import { clearUserData, setUser, useUserStore } from "@root/user";
 import { enqueueSnackbar } from "notistack";
@@ -28,7 +28,7 @@ const routeslink = [
     { 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: <Setting />, header: true, sidebar: true },
+    { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
     { path: "/install", page: <InstallQuiz />, header: true, sidebar: true },
 ] as const;
 
@@ -57,7 +57,7 @@ export default function App() {
                     {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={<StartPage />} />
+                    <Route path="edit" element={<EditPage />} />
                     <Route path="crop" element={<ImageCrop />} />
                     <Route path="/" element={<Landing />} />
                     <Route path="/signin" element={<SigninDialog />} />

src/assets/icons/ExpandLessIconBG.tsx

@@ -0,0 +1,18 @@
+import { useTheme, SxProps, Box } from "@mui/material";
+
+interface Props {
+    sx?: SxProps;
+}
+
+export default function ExpandIcon({ sx }: Props) {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{ ...sx }}>
+            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="30" height="30" rx="6" fill="#EEE4FC" />
+                <path d="M22.5 11.25L15 18.75L7.5 11.25" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" strokeLinejoin="round" />
+            </svg>
+        </Box>
+    );
+}

src/assets/icons/checked.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M18 -2.62268e-07C21.3137 -1.17422e-07 24 2.68629 24 6L24 18C24 21.3137 21.3137 24 18 24L6 24C2.68629 24 -9.31652e-07 21.3137 -7.86805e-07 18L-5.24537e-07 12L-2.62268e-07 6C-1.17422e-07 2.68629 2.68629 -9.31652e-07 6 -7.86805e-07L18 -2.62268e-07Z" fill="#9A9AAF" fill-opacity="0.7"/>
-<path d="M7 11.5L11.2857 15.5L17 8" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 11.5L11.2857 15.5L17 8" stroke="white" stroke-linecap="round" strokeLinejoin="round"/>
 </svg>

src/constants/default.ts

@@ -11,6 +11,7 @@ import { QUIZ_QUESTION_SELECT } from "./select";
 import { QUIZ_QUESTION_TEXT } from "./text";
 import { QUIZ_QUESTION_VARIANT } from "./variant";
 import { QUIZ_QUESTION_VARIMG } from "./varimg";
+import { QUIZ_QUESTION_RESULT } from "./result";
 
 
 export const defaultQuestionByType: Record<QuestionType, Omit<AnyTypedQuizQuestion, "id" | "backendId">> = {
@@ -25,4 +26,5 @@ export const defaultQuestionByType: Record<QuestionType, Omit<AnyTypedQuizQuesti
     "text": QUIZ_QUESTION_TEXT,
     "variant": QUIZ_QUESTION_VARIANT,
     "varimg": QUIZ_QUESTION_VARIMG,
+    "result": QUIZ_QUESTION_RESULT,
 } as const;

src/constants/result.ts

@@ -0,0 +1,17 @@
+import { QUIZ_QUESTION_BASE } from "./base";
+
+import type { QuizQuestionResult } from "../model/questionTypes/result";
+import { nanoid } from "nanoid";
+
+export const QUIZ_QUESTION_RESULT: Omit<QuizQuestionResult, "id" | "backendId"> = {
+  ...QUIZ_QUESTION_BASE,
+  type: "result",
+  content: {
+    ...QUIZ_QUESTION_BASE.content,
+    video: "",
+    innerName: "",
+    text: "",
+    price: [0],
+    rangePrice: false
+  },
+};

src/model/question/question.ts

@@ -14,7 +14,8 @@ export type QuestionType =
     | "number"
     | "file"
     | "page"
-    | "rating";
+    | "rating"
+    | "result";
 
 /** Type that comes from server */
 export interface RawQuestion {

src/model/questionTypes/result.ts

@@ -0,0 +1,22 @@
+import type {
+  QuizQuestionBase,
+  QuestionBranchingRule,
+  QuestionHint,
+} from "./shared";
+
+export interface QuizQuestionResult extends QuizQuestionBase {
+  type: "result";
+  content: {
+    id: string;
+    back: string;
+    originalBack: string;
+    video: string;
+    innerName: string;
+    text: string;
+    price: [number] | [number, number];
+    rangePrice: boolean;
+    rule: QuestionBranchingRule,
+    hint: QuestionHint;
+    autofill: boolean;
+  };
+}

src/model/questionTypes/shared.ts

@@ -10,6 +10,7 @@ import type { QuizQuestionSelect } from "./select";
 import type { QuizQuestionText } from "./text";
 import type { QuizQuestionVariant } from "./variant";
 import type { QuizQuestionVarImg } from "./varimg";
+import type { QuizQuestionResult } from "./result";
 import { nanoid } from "nanoid";
 
 export interface QuestionBranchingRuleMain {
@@ -92,7 +93,8 @@ export type AnyTypedQuizQuestion =
     | QuizQuestionNumber
     | QuizQuestionFile
     | QuizQuestionPage
-    | QuizQuestionRating;
+    | QuizQuestionRating
+    | QuizQuestionResult;
 
 type FilterQuestionsWithVariants<T> = T extends {
     content: { variants: QuestionVariant[]; };

src/model/quizSettings.ts

@@ -29,16 +29,26 @@ export type QuizResultsType = true | null;
 
 export interface QuizConfig {
     type: QuizType;
-    logo: string | null;
-    originalLogo: string | null;
     noStartPage: boolean;
     startpageType: QuizStartpageType;
     results: QuizResultsType;
     haveRoot: string | null;
+    resultInfo: {
+        when: 'before' | 'after' | 'email',
+        share: true | false,
+        replay: true | false,
+        theme: string,
+        reply: string,
+        replname: string,
+      }
     startpage: {
         description: string;
         button: string;
         position: QuizStartpageAlignType;
+        favIcon: string | null;
+        originalFavIcon: string | null;
+        logo: string | null;
+        originalLogo: string | null;
         background: {
             type: null | "image" | "video";
             desktop: string | null;
@@ -61,16 +71,26 @@ export interface QuizConfig {
 
 export const defaultQuizConfig: QuizConfig = {
     type: null,
-    logo: null,
-    originalLogo: null,
     noStartPage: false,
     startpageType: null,
     results: null,
     haveRoot: null,
+    resultInfo: {
+        when: 'after',
+        share: false,
+        replay: false,
+        theme: "",
+        reply: "",
+        replname: "",
+      },
     startpage: {
         description: "",
         button: "",
         position: "left",
+        favIcon: null,
+        originalFavIcon: null,
+        logo: null,
+        originalLogo: null,
         background: {
             type: null,
             desktop: null,

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -6,7 +6,8 @@ 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 { cleardragQuestionContentId, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions";
+import { cleardragQuestionContentId, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId, clearRuleForAll } from "@root/questions/actions";
+import { withErrorBoundary } from "react-error-boundary";
 
 import { storeToNodes } from "./helper";
 
@@ -21,6 +22,7 @@ import type {
 } from "cytoscape";
 import { QuestionsList } from "../SwitchBranchingPanel/QuestionsList";
 import { enqueueSnackbar } from "notistack";
+import { Typography } from "@mui/material";
 
 type PopperItem = {
   id: () => string;
@@ -111,16 +113,18 @@ interface Props {
 }
 
 
-export const CsComponent = ({
+function CsComponent  ({
   modalQuestionParentContentId,
   modalQuestionTargetContentId,
   setOpenedModalQuestions,
   setModalQuestionParentContentId,
   setModalQuestionTargetContentId
-}: Props) => {
+}: Props)  {
   const quiz = useCurrentQuiz();
 
-  const { dragQuestionContentId, questions, desireToOpenABranchingModal } = useQuestionsStore()
+  const { dragQuestionContentId, desireToOpenABranchingModal } = useQuestionsStore()
+  const trashQuestions = useQuestionsStore().questions
+  const questions = trashQuestions.filter((question) => question.type !== "result")
   const [startCreate, setStartCreate] = useState("");
   const [startRemove, setStartRemove] = useState("");
 
@@ -142,6 +146,8 @@ const cy = cyRef?.current
   }, [desireToOpenABranchingModal])
   useLayoutEffect(() => {
     updateOpenedModalSettingsId()
+    //  updateRootContentId(quiz.id, "")
+    //  clearRuleForAll()
   }, [])
   useEffect(() => {
     if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
@@ -149,7 +155,6 @@ const cy = cyRef?.current
     }
     setModalQuestionParentContentId("")
     setModalQuestionTargetContentId("")
-
   }, [modalQuestionTargetContentId])
 
   const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
@@ -229,6 +234,7 @@ const cy = cyRef?.current
         question.content.rule.main = []
         question.content.rule.default = ""
       })
+      clearRuleForAll()
     } else {
       const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
       if (targetNodeContentId && parentQuestionContentId) {
@@ -266,11 +272,21 @@ const cy = cyRef?.current
       question.content.rule.default = ""
     })
 
-    updateQuestion(parentQuestionContentId, question => {
-      //Заменяем id удаляемого вопроса либо на id одного из оставшихся, либо на пустую строку
-      if (question.content.rule.default === targetQuestionContentId) question.content.rule.default = ""
-    })
+    //чистим rule родителя
+    const parentQuestion = getQuestionByContentId(parentQuestionContentId)
+    const newRule = {}
+    newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== targetQuestionContentId) //удаляем условия перехода от родителя к этому вопросу
+    newRule.parentId = parentQuestion.content.rule.parentId
+    newRule.default = questions.filter((q) => {
+      return q.content.rule.parentId === parentQuestionContentId && q.content.id !== targetQuestionContentId
+    })[0]?.content.id || ""
+    //Если этот вопрос был дефолтным у родителя - чистим дефолт
+    //Смотрим можем ли мы заменить id на один из main
 
+    console.log(newRule)
+    updateQuestion(parentQuestionContentId, (PQ) => {
+      PQ.content.rule = newRule
+    })
   }
 
 
@@ -686,7 +702,7 @@ const cy = cyRef?.current
         }}
       // autolock
       />
-      {/* <button onClick={() => {
+      <button onClick={() => {
         console.log("NODES____________________________")
         cyRef.current?.elements().forEach((ele: any) => {
           console.log(ele.data())
@@ -695,7 +711,23 @@ const cy = cyRef?.current
       <button onClick={() => {
         console.log("ELEMENTS____________________________")
         console.log(questions)
-      }}>elements</button> */}
+      }}>elements</button>
     </>
   );
 };
+
+function Clear () {
+const quiz = useCurrentQuiz();
+    updateRootContentId(quiz.id, "")
+    clearRuleForAll()
+    return <></>
+}
+
+export default withErrorBoundary(CsComponent, {
+  fallback: <Clear/>,
+  onError: (error, info) => {
+    enqueueSnackbar("Дерево порвалось")
+    console.log(info)
+    console.log(error)
+  },
+});

src/pages/Questions/BranchingMap/FirstNodeField.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
     const quiz = useCurrentQuiz();
-    const { dragQuestionContentId, questions } = useQuestionsStore()
+    const { dragQuestionContentId } = useQuestionsStore()
     const Container = useRef<HTMLDivElement | null>(null);
 
     const modalOpen = () => setOpenedModalQuestions(true)

src/pages/Questions/BranchingMap/index.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import { FirstNodeField } from "./FirstNodeField";
-import { CsComponent } from "./CsComponent";
+import CsComponent from "./CsComponent";
 import { useQuestionsStore } from "@root/questions/store"
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useState } from "react";

src/pages/Questions/BranchingQuestionsModal/index.tsx

@@ -15,7 +15,8 @@ export const BranchingQuestionsModal = ({
   setModalQuestionTargetContentId,
   setModalQuestionParentContentId
 }: Props) => {
-  const { questions } = useQuestionsStore();
+  const trashQuestions = useQuestionsStore().questions
+  const questions = trashQuestions.filter((question) => question.type !== "result")
 
   const handleClose = () => {
     setOpenedModalQuestions(false);

src/pages/Questions/DraggableList/index.tsx

@@ -1,26 +1,26 @@
 import { Box } from "@mui/material";
 import { reorderQuestions } from "@root/questions/actions";
-import { useQuestions } from "@root/questions/hooks";
 import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import DraggableListItem from "./DraggableListItem";
+import { useQuestionsStore } from "@root/questions/store";
 
 
 export const DraggableList = () => {
-    const { questions, isLoading } = useQuestions();
-
+    const { questions } = useQuestionsStore()
+    const filteredQuestions = questions.filter((question) => question.type !== "result")
+    console.log(questions)
+    console.log(filteredQuestions)
     const onDragEnd = ({ destination, source }: DropResult) => {
         if (destination) reorderQuestions(source.index, destination.index);
     };
 
-    if (isLoading && !questions) return <Box>Загрузка вопросов...</Box>;
-
     return (
         <DragDropContext onDragEnd={onDragEnd}>
             <Droppable droppableId="droppable-list">
                 {(provided, snapshot) => (
                     <Box ref={provided.innerRef} {...provided.droppableProps}>
-                        {questions.map((question, index) => (
+                        {filteredQuestions.map((question, index) => (
                             <DraggableListItem
                                 key={question.id}
                                 question={question}

src/pages/Questions/QuestionsPage.tsx

@@ -22,10 +22,10 @@ import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/question
 
 export default function QuestionsPage() {
     const theme = useTheme();
-    const { openedModalSettingsId } = useQuestionsStore();
+    const { openedModalSettingsId, openBranchingPanel } = useQuestionsStore();
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const quiz = useCurrentQuiz();
-    const {openBranchingPanel} = useQuestionsStore.getState()
+    console.log(quiz)
     useLayoutEffect(() => {
         updateOpenBranchingPanel(false)
         updateEditSomeQuestion()

src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx

@@ -24,7 +24,9 @@ const getItemStyle = (isDragging: any, draggableStyle: any) => ({
 type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
 
 export const QuestionsList = () => {
-  const { questions, desireToOpenABranchingModal } = useQuestionsStore()
+  const { desireToOpenABranchingModal } = useQuestionsStore()
+  const trashQuestions = useQuestionsStore().questions
+  const questions = trashQuestions.filter((question) => question.type !== "result")
 
   return (
     <Box sx={{ padding: "15px" }}>

src/pages/Result/CreationFullCard.tsx

@@ -1,76 +0,0 @@
-import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
-
-type Props = {
-  text: string;
-  text2: string;
-  image: string;
-};
-
-export default function CreationFullCard({ text, text2, image }: Props) {
-  const theme = useTheme();
-  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
-
-  return (
-    <Box
-      sx={{
-        flexGrow: 1,
-        backgroundColor: "white",
-        p: "20px",
-        marginTop: "50px",
-        borderRadius: "12px",
-        display: isSmallMonitor ? "block" : "flex",
-        flexDirection: isSmallMonitor ? "column" : "row",
-        gap: "20px",
-        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
-                   0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
-                   0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
-                   0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
-                   0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
-                   0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
-      }}
-    >
-      <Box
-        sx={{
-          mr: !isSmallMonitor ? "104px" : 0,
-          marginBottom: "20px",
-          position: "relative",
-        }}
-      >
-        <Typography variant="h5" sx={{ marginBottom: "20px" }}>
-          Результаты квиза в зависимости от ответов
-        </Typography>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            height: "100%",
-            maxHeight: isSmallMonitor ? "none" : "220px",
-            gap: "25px",
-          }}
-        >
-          <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
-            {text}
-          </Typography>
-          <Typography
-            sx={{
-              color: "#9A9AAF",
-              width: "100%",
-            }}
-          >
-            {text2}
-          </Typography>
-        </Box>
-      </Box>
-      <img
-        src={image}
-        alt="quiz creation"
-        style={{
-          display: "block",
-          width: isSmallMonitor ? "100%" : "auto",
-          maxHeight: isSmallMonitor ? "none" : "270px",
-        }}
-      />
-    </Box>
-  );
-}

src/pages/ResultPage/DescriptionForm/PriceButton.tsx

@@ -39,24 +39,6 @@ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
         whiteSpace: "nowrap",
       },
     },
-    {
-      title: "ƒ",
-      type: "ƒ",
-      sx: {
-        width: "38px",
-        height: "48px",
-        border: "1px solid #9A9AAF",
-      },
-    },
-    {
-      title: "Скидка",
-      type: "discount",
-      sx: {
-        width: "93px",
-        height: "48px",
-        border: "1px solid #9A9AAF",
-      },
-    },
   ];
 
 type Props = {
@@ -74,9 +56,6 @@ export default function PriceButtons({
         <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
           Стоимость
         </Typography>
-        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
-          <DeleteIcon style={{ color: "#4D4D4D" }} />
-        </IconButton>
       </Box>
       <Box
         component="div"

src/pages/ResultPage/FirstEntry.tsx

@@ -0,0 +1,112 @@
+
+import { ResultSettings } from "./ResultSettings"
+import { createFrontResult } from "@root/questions/actions";
+import { useQuestionsStore } from "@root/questions/store";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { Box, Typography, useTheme, useMediaQuery, Button } from "@mui/material";
+import image from "../../assets/Rectangle 110.png";
+import { enqueueSnackbar } from "notistack";
+
+export const FirstEntry = () => {
+  const theme = useTheme();
+  const quiz = useCurrentQuiz();
+  const { questions } = useQuestionsStore();
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1250));
+
+  const create = () => {
+    if (quiz?.config.haveRoot) {
+      if (questions.length === 0) {
+        enqueueSnackbar("У вас не добавлено ни одного вопроса")
+        return
+      }
+      questions
+      .filter((question) => question.content.rule.parentId.length !== 0 && question.content.rule.default.length === 0)
+      .forEach(question => {
+        createFrontResult(quiz.id, question.content.id)
+      })
+    } else {
+      createFrontResult(quiz.id)
+    }
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          flexGrow: 1,
+          backgroundColor: "white",
+          p: "20px",
+          marginTop: "50px",
+          borderRadius: "12px",
+          display: isSmallMonitor ? "block" : "flex",
+          flexDirection: isSmallMonitor ? "column" : "row",
+          gap: "20px",
+          boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+                   0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
+                   0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
+                   0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
+                   0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
+                   0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
+        }}
+      >
+        <Box
+          sx={{
+            mr: !isSmallMonitor ? "104px" : 0,
+            marginBottom: isSmallMonitor ? "20px" : 0,
+            position: "relative",
+            height: "100%"
+          }}
+        >
+          <Typography variant="h5" sx={{ marginBottom: "20px" }}>
+            Результаты квиза в зависимости от ответов
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              height: "100%",
+              gap: "25px",
+            }}
+          >
+            <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
+              Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
+            </Typography>
+            <Typography
+              sx={{
+                color: "#9A9AAF",
+                width: "100%",
+              }}
+            >
+              Этот шаг - необязательный, квиз будет работать и без автоматических результатов.
+            </Typography>
+          </Box>
+        </Box>
+        <img
+          src={image}
+          alt="quiz creation"
+          style={{
+            display: "block",
+            width: isSmallMonitor ? "100%" : "auto",
+            maxHeight: isSmallMonitor ? "none" : "270px",
+          }}
+        />
+      </Box>
+      <Button
+        onClick={create}
+        variant="contained"
+        sx={{
+          backgroundColor: "#7E2AEA",
+          fontSize: "18px",
+          lineHeight: "18px",
+          width: "216px",
+          height: "44px",
+          mt: "30px",
+          p: "10px 20px"
+        }}
+      >
+        Создать результаты
+      </Button>
+    </>
+  );
+}

src/pages/ResultPage/Result.tsx

@@ -3,7 +3,7 @@ import { updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import image from "../../assets/Rectangle 110.png";
 import Info from "../../assets/icons/Info";
-import CreationFullCard from "./CreationFullCard";
+// import CreationFullCard from "./FirstEntry";
 
 
 export const Result = () => {
@@ -13,11 +13,11 @@ export const Result = () => {
 
     return (
         <Box component="section">
-            <CreationFullCard
+            {/* <CreationFullCard
                 text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
                 text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
                 image={image}
-            />
+            /> */}
             <Box sx={{ display: "flex", mt: "30px", alignItems: "center" }}>
                 <Button
                     variant="contained"

src/pages/ResultPage/ResultPage.tsx

@@ -0,0 +1,15 @@
+import { useQuestionsStore } from "@root/questions/store";
+import { FirstEntry } from "./FirstEntry"
+import { ResultSettings } from "./ResultSettings"
+
+export const ResultPage = () => {
+    const { questions } = useQuestionsStore();
+    //ищём хотя бы один result
+    const haveResult = questions.some((question) => question.type === "result")
+    return (
+        haveResult ?
+            <ResultSettings />
+            :
+            <FirstEntry />
+    );
+}

src/pages/ResultPage/ResultSettings.tsx

@@ -2,19 +2,31 @@ import IconPlus from "@icons/IconPlus";
 import Info from "@icons/Info";
 import Plus from "@icons/Plus";
 import ArrowLeft from "@icons/questionsPage/arrowLeft";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Typography, Paper, FormControl, TextField } from "@mui/material";
 import { incrementCurrentStep } from "@root/quizes/actions";
 import CustomWrapper from "@ui_kit/CustomWrapper";
 import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
 import { ResultListForm } from "./ResultListForm";
 import { SettingForm } from "./SettingForm";
+import { useState } from "react";
+import { WhenCard } from "./cards/WhenCard";
+import { ResultCard } from "./cards/ResultCard";
+import { EmailSettingsCard } from "./cards/EmailSettingsCard";
+import { useCurrentQuiz } from "@root/quizes/hooks"
 
-export const Setting = () => {
+export const ResultSettings = () => {
+  const quiz = useCurrentQuiz()
+  const [quizExpand, setQuizExpand] = useState(true)
+  const [resultContract, setResultContract] = useState(true)
 
   return (
     <Box sx={{ maxWidth: "796px" }}>
-      <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
-        <Typography sx={{ pr: "10px" }} variant="h5">
+      <Box sx={{
+        display: "flex",
+        alignItems: "center",
+        margin: "60px 0 40px 0",
+      }}>
+        <Typography variant="h5">
           Настройки результатов
         </Typography>
         <Info />
@@ -33,12 +45,17 @@ export const Setting = () => {
             },
           }}
           variant="text"
+          onClick={() => setQuizExpand(!quizExpand)}
         >
           Свернуть
         </Button>
       </Box>
-      <CustomWrapper sx={{ mt: "30px" }} text="Показывать результат" />
-      <CustomWrapper sx={{ mt: "30px" }} text="Настройки почты" />
+
+
+      <WhenCard quizExpand={quizExpand} />
+      {quiz.config.resultInfo.when === "email" && <EmailSettingsCard quizExpand={quizExpand} />}
+
+
       <Box
         sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
       >
@@ -60,52 +77,14 @@ export const Setting = () => {
             },
           }}
           variant="text"
+          onClick={() => setResultContract(!resultContract)}
         >
           Развернуть все
         </Button>
       </Box>
-      <CustomWrapper result={true} text="Показывать результат" />
-      <Box
-        sx={{
-          display: "flex",
-          width: "100%",
-          alignItems: "center",
-          columnGap: "10px",
-        }}
-      >
-        <Box
-          sx={{
-            boxSizing: "border-box",
-            width: "100%",
-            height: "1px",
-            backgroundPosition: "bottom",
-            backgroundRepeat: "repeat-x",
-            backgroundSize: "20px 1px",
-            backgroundImage:
-              "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
-          }}
-        />
-        <IconPlus />
-      </Box>
-      <CustomWrapper result={true} text="Настройки почты" />
-      <Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
-        <Plus />
-        <Typography component="div" sx={{ ml: "auto" }}>
-          <Button
-            variant="outlined"
-            sx={{ padding: "10px 20px", borderRadius: "8px" }}
-          >
-            <ArrowLeft />
-          </Button>
-          <Button variant="contained" sx={{ ml: "10px" }} onClick={incrementCurrentStep}>
-            Настроить форму
-          </Button>
-        </Typography>
-      </Box>
 
-      <SettingForm />
-      <ResultListForm />
-      <DescriptionForm />
+
+      <ResultCard resultContract={resultContract} />
     </Box>
   );
 };

src/pages/ResultPage/SwichResult.tsx

@@ -5,10 +5,11 @@ import * as React from "react";
 interface Props {
   text: string;
   icon: string;
-  onClick?: () => void;
+  onClick?: (a:any) => void;
+  value: boolean
 }
 
-export const SwitchSetting = ({ text, icon, onClick }: Props) => {
+export const SwitchSetting = ({ text, icon, onClick, value }: Props) => {
   return (
     <Box
       sx={{
@@ -24,7 +25,7 @@ export const SwitchSetting = ({ text, icon, onClick }: Props) => {
       <Box sx={{ display: "flex", alignItems: "center", justifyContent: "left", maxWidth: "756px", width: "100%" }}>
         <img src={icon} alt="icon" />
         <FormControlLabel
-          value="start"
+          checked={value}
           control={<CustomizedSwitch />}
           label={text}
           labelPlacement="start"

src/pages/ResultPage/cards/EmailSettingsCard.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import { useCurrentQuiz } from "@root/quizes/hooks"
+
+import {
+    Box,
+    TextField,
+    IconButton,
+    Paper,
+    Typography,
+    useMediaQuery,
+    useTheme,
+} from "@mui/material";
+
+import ExpandLessIconBG from "@icons/ExpandLessIconBG";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { updateQuiz } from "@root/quizes/actions";
+
+
+interface Props {
+    quizExpand: boolean
+}
+
+export const EmailSettingsCard = ({ quizExpand }: Props) => {
+    const quiz = useCurrentQuiz()
+    const theme = useTheme();
+
+    const isMobile = useMediaQuery(theme.breakpoints.down(790));
+    const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));
+
+    const [expand, setExpand] = useState(true)
+
+    useEffect(() => {
+        setExpand(false)
+    }, [quizExpand])
+
+    const debouncedCallback = useDebouncedCallback((callback) => {
+        callback();
+    }, 200);
+
+    return (
+        <Paper
+            data-cy="quiz-question-card"
+            sx={{
+                maxWidth: "796px",
+                width: "100%",
+                borderRadius: "12px",
+                backgroundColor: expand ? "white" : "#EEE4FC",
+                border: expand ? "none" : "1px solid #9A9AAF",
+                boxShadow: "0px 10px 30px #e7e7e7",
+                m: "20px 0"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: expand ? isMobile ? "10px 10px 0 10px" : "20px 20px 0 20px" : isMobile ? "10px" : "20px",
+                    flexDirection: isMobile ? "column" : null,
+                    justifyContent: "space-between",
+                    minHeight: "40px",
+
+                }}
+            >
+                <Typography
+                    sx={{
+                        margin: isMobile ? "10px 0" : 0,
+                        color: expand ? "#9A9AAF" : "#000000",
+                    }}
+                >
+                    Настройки почты
+                </Typography>
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-end",
+                        width: isMobile ? "100%" : "auto",
+                        position: "relative",
+                    }}
+                >
+                    <IconButton
+                        sx={{ padding: "0", margin: "5px" }}
+                        disableRipple
+                        data-cy="expand-question"
+                        onClick={() => setExpand(!expand)}
+                    >
+                        {expand ? (
+                            <ExpandLessIconBG />
+                        ) : (
+                            <ExpandLessIcon
+                                sx={{
+                                    boxSizing: "border-box",
+                                    fill: theme.palette.brightPurple.main,
+                                    background: "#FFF",
+                                    borderRadius: "6px",
+                                    height: "30px",
+                                    width: "30px",
+                                }}
+                            />
+                        )}
+                    </IconButton>
+                </Box>
+            </Box>
+            {expand && (
+                <Box
+                    sx={{
+                        p: "0 20px 20px 20px",
+                    }}
+                >
+                    <Typography
+                        sx={{
+                            color: "#4D4D4D",
+                            m: "20px 0 14px 0",
+                            fontSize: "18px",
+                            fontWeight: 500
+                        }}
+                    >
+                        Тема письма
+                    </Typography>
+                    <TextField
+                        value={quiz.config.resultInfo.theme}
+                        placeholder={"Заголовок вопроса"}
+                        onChange={({ target }: { target: HTMLInputElement }) => {debouncedCallback(updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.resultInfo.theme = target.value
+                        })) }}
+                        sx={{
+                            margin: isMobile ? "10px 0" : 0,
+                            width:"100%",                            
+                            "& .MuiInputBase-root": {
+                                color: "#000000",
+                                backgroundColor: expand
+                                    ? theme.palette.background.default
+                                    : "transparent",
+                                height: "48px",
+                                borderRadius: "10px",
+                                ".MuiOutlinedInput-notchedOutline": {
+                                    borderWidth: "1px !important",
+                                    border: expand ? "none" : null,
+                                },
+                                "& .MuiInputBase-input::placeholder": {
+                                    color: "#4D4D4D",
+                                    opacity: 0.8,
+                                },
+                            },
+                        }}
+                        inputProps={{
+                            sx: {
+                                fontSize: "18px",
+                                lineHeight: "21px",
+                                py: 0,
+                                paddingLeft: "18px",
+                            },
+                        }}
+                    />
+                    <Typography
+                        sx={{
+                            color: "#4D4D4D",
+                            m: "20px 0 14px 0",
+                            fontSize: "18px",
+                            fontWeight: 500
+                        }}
+                    >
+                        E-mail ответа
+                    </Typography>
+                    <TextField
+                        value={quiz.config.resultInfo.reply}
+                        placeholder={"noreplay@example.ru"}
+                        onChange={({ target }: { target: HTMLInputElement }) => {debouncedCallback(updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.resultInfo.reply = target.value
+                        })) }}
+                        sx={{
+                            margin: isMobile ? "10px 0" : 0,
+                            width:"100%",
+                            "& .MuiInputBase-root": {
+                                color: "#000000",
+                                backgroundColor: expand
+                                    ? theme.palette.background.default
+                                    : "transparent",
+                                height: "48px",
+                                borderRadius: "10px",
+                                ".MuiOutlinedInput-notchedOutline": {
+                                    borderWidth: "1px !important",
+                                    border: expand ? "none" : null,
+                                },
+                                "& .MuiInputBase-input::placeholder": {
+                                    color: "#4D4D4D",
+                                    opacity: 0.8,
+                                },
+                            },
+                        }}
+                        inputProps={{
+                            sx: {
+                                fontSize: "18px",
+                                lineHeight: "21px",
+                                py: 0,
+                                paddingLeft: "18px",
+                            },
+                        }}
+                    />
+                    <Typography
+                        sx={{
+                            color: "#4D4D4D",
+                            m: "20px 0 14px 0",
+                            fontSize: "18px",
+                            fontWeight: 500
+                        }}
+                    >
+                        Имя отправителя
+                    </Typography>
+                    <TextField
+                        value={quiz.config.resultInfo.replname}
+                        placeholder={"Название компании"}
+                        onChange={({ target }: { target: HTMLInputElement }) => {debouncedCallback(updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.resultInfo.replname = target.value
+                        })) }}
+                        sx={{
+                            margin: isMobile ? "10px 0" : 0,
+                            width:"100%",
+                            "& .MuiInputBase-root": {
+                                color: "#000000",
+                                backgroundColor: expand
+                                    ? theme.palette.background.default
+                                    : "transparent",
+                                height: "48px",
+                                borderRadius: "10px",
+                                ".MuiOutlinedInput-notchedOutline": {
+                                    borderWidth: "1px !important",
+                                    border: expand ? "none" : null,
+                                },
+                                "& .MuiInputBase-input::placeholder": {
+                                    color: "#4D4D4D",
+                                    opacity: 0.8,
+                                },
+                            },
+                        }}
+                        inputProps={{
+                            sx: {
+                                fontSize: "18px",
+                                lineHeight: "21px",
+                                py: 0,
+                                paddingLeft: "18px",
+                            },
+                        }}
+                    />
+                </Box>
+            )}
+        </Paper>
+    )
+}

src/pages/ResultPage/cards/ResultCard.tsx

@@ -0,0 +1,291 @@
+import { useEffect, useState } from "react";
+
+import { updateQuiz } from "@root/quizes/actions"
+import { useCurrentQuiz } from "@root/quizes/hooks"
+
+import { SwitchSetting } from "../SwichResult";
+
+import {
+    Box,
+    IconButton,
+    Paper,
+    Button,
+    Typography,
+    TextField,
+    useMediaQuery,
+    useTheme,
+} from "@mui/material";
+
+import ExpandLessIconBG from "@icons/ExpandLessIconBG";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ShareNetwork from "@icons/ShareNetwork.svg";
+import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import SwitchResult from "../DescriptionForm/SwitchResult";
+import ButtonsOptionsForm from "../DescriptionForm/ButtinsOptionsForm";
+import PriceButtons from "../DescriptionForm/PriceButton";
+import DiscountButtons from "../DescriptionForm/DiscountButtons";
+import CustomTextField from "@ui_kit/CustomTextField";
+import { OneIcon } from "@icons/questionsPage/OneIcon";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+import { PointsIcon } from "@icons/questionsPage/PointsIcon";
+import Info from "@icons/Info";
+import ImageAndVideoButtons from "../DescriptionForm/ImageAndVideoButtons";
+
+interface Props {
+    resultContract: boolean;
+}
+
+export const ResultCard = ({ resultContract }:Props) => {
+    const quiz = useCurrentQuiz()
+    const theme = useTheme();
+
+    const isMobile = useMediaQuery(theme.breakpoints.down(790));
+    const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));
+
+    const [expand, setExpand] = useState(true)
+
+    useEffect(() => {
+        setExpand(true)
+    }, [resultContract])
+
+
+    const [switchState, setSwitchState] = useState<string>("");
+    const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
+    const [priceButtonsType, setPriceButtonsType] = useState<string>();
+    const [forwarding, setForwarding] = useState<boolean>(false);
+  
+    const buttonsActive = (index: number, type: string) => {
+      setPriceButtonsActive(index);
+      setPriceButtonsType(type);
+    };
+  
+    const SSHC = (data: string) => {
+      setSwitchState(data);
+    };
+
+    return(
+        <Paper
+        data-cy="quiz-question-card"
+        sx={{
+            maxWidth: "796px",
+            width: "100%",
+            borderRadius: "12px",
+            backgroundColor: expand ? "white" : "#EEE4FC",
+            border: expand ? "none" : "1px solid #9A9AAF",
+            boxShadow: "0px 10px 30px #e7e7e7",
+            m: "20px 0"
+        }}
+    >
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                padding: isMobile ? "10px" : "20px",
+                flexDirection: isMobile ? "column" : null,
+                justifyContent: "space-between",
+                minHeight: "40px",
+
+            }}
+        >
+            <Typography
+                sx={{
+                    margin: isMobile ? "10px 0" : 0,
+                    color: expand ? "#9A9AAF" : "#000000",
+                }}
+            >
+                Заголовок результата
+            </Typography>
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-end",
+                    width: isMobile ? "100%" : "auto",
+                    position: "relative",
+                }}
+            >
+                <IconButton
+                    sx={{ padding: "0", margin: "5px" }}
+                    disableRipple
+                    data-cy="expand-question"
+                    onClick={() => setExpand(!expand)}
+                >
+                    {expand ? (
+                        <ExpandLessIconBG />
+                    ) : (
+                        <ExpandLessIcon
+                            sx={{
+                                boxSizing: "border-box",
+                                fill: theme.palette.brightPurple.main,
+                                background: "#FFF",
+                                borderRadius: "6px",
+                                height: "30px",
+                                width: "30px",
+                            }}
+                        />
+                    )}
+                </IconButton>
+            </Box>
+        </Box>
+        {expand && (
+            <Box
+            sx={{
+              overflow: "hidden",
+              maxWidth: "796px",
+              height: "100%",
+              bgcolor: "#FFFFFF",
+              borderRadius: "12px",
+              boxShadow: "0px 10px 30px #e7e7e7",
+            }}
+          >
+            <Box sx={{ p: "0 20px", pt: "30px" }}>
+              <Box
+                sx={{
+                  width: "100%",
+                  maxWidth: "760px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "10px",
+                  mb: "19px",
+                }}
+              >
+                <CustomTextField placeholder="Заголовок вопроса" text={""} />
+                <IconButton>
+                  <ExpandMoreIcon />
+                </IconButton>
+                <OneIcon />
+                <PointsIcon style={{ color: "#9A9AAF" }} />
+              </Box>
+      
+              <Box sx={{ display: "flex" }}>
+                <PriceButtons
+                  ButtonsActive={buttonsActive}
+                  priceButtonsActive={priceButtonsActive}
+                />
+              </Box>
+      
+              <TextField
+                fullWidth
+                placeholder="Описание"
+                sx={{
+                  "& .MuiInputBase-root": {
+                    backgroundColor: "#F2F3F7",
+                    width: "100%",
+                    height: "110px",
+                    borderRadius: "10px",
+                  },
+                }}
+                inputProps={{
+                  sx: {
+                    borderRadius: "10px",
+                    fontSize: "18px",
+                    lineHeight: "21px",
+                    py: 0,
+                  },
+                }}
+              />
+              <ImageAndVideoButtons />
+              {priceButtonsType === "smooth" ? (
+                <Box sx={{ mb: "20px" }}>
+                  <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
+                    <Typography
+                      component={"h6"}
+                      sx={{ weight: "500", fontSize: "18px" }}
+                    >
+                      Призыв к действию
+                    </Typography>
+                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+                      <DeleteIcon style={{ color: "#4D4D4D" }} />
+                    </IconButton>
+                  </Box>
+                  <Box sx={{ display: "flex" }}>
+                    <TextField
+                      placeholder="Узнать подробнее"
+                      fullWidth
+                      sx={{
+                        width: "410px",
+                        "& .MuiInputBase-root": {
+                          backgroundColor: "#F2F3F7",
+                          width: "410px",
+                          height: "48px",
+                          borderRadius: "10px",
+                        },
+                      }}
+                      inputProps={{
+                        sx: {
+                          borderRadius: "10px",
+                          fontSize: "18px",
+                          lineHeight: "21px",
+                          py: 0,
+                        },
+                      }}
+                    />
+                    <Button
+                      onClick={() => setForwarding(true)}
+                      variant="outlined"
+                      sx={{
+                        display: forwarding ? "none" : "",
+                        ml: "20px",
+                        mb: "20px",
+                      }}
+                    >
+                      Переадресация +
+                    </Button>
+                    {forwarding ? (
+                      <Box sx={{ ml: "20px", mt: "-36px" }}>
+                        <Box
+                          sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
+                        >
+                          <Typography
+                            component={"h6"}
+                            sx={{ weight: "500", fontSize: "18px" }}
+                          >
+                            Переадресация
+                          </Typography>
+                          <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+                            <DeleteIcon style={{ color: "#4D4D4D" }} />
+                          </IconButton>
+                          <Info />
+                        </Box>
+                        <Box>
+                          <TextField
+                            placeholder="https://exemple.ru"
+                            fullWidth
+                            sx={{
+                              "& .MuiInputBase-root": {
+                                backgroundColor: "#F2F3F7",
+                                width: "326px",
+                                height: "48px",
+                                borderRadius: "10px",
+                              },
+                            }}
+                            inputProps={{
+                              sx: {
+                                borderRadius: "10px",
+                                fontSize: "18px",
+                                lineHeight: "21px",
+                                py: 0,
+                              },
+                            }}
+                          />
+                        </Box>
+                      </Box>
+                    ) : (
+                      <></>
+                    )}
+                  </Box>
+                </Box>
+              ) : (
+                <Button variant="outlined" sx={{ mb: "20px" }}>
+                  Кнопка +
+                </Button>
+              )}
+            </Box>
+            <ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
+            <SwitchResult switchState={switchState} totalIndex={0} />
+          </Box>
+        )}
+    </Paper>
+    )
+}

src/pages/ResultPage/cards/WhenCard.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+
+import { updateQuiz } from "@root/quizes/actions"
+import { useCurrentQuiz } from "@root/quizes/hooks"
+
+import { SwitchSetting } from "../SwichResult";
+
+import {
+    Box,
+    IconButton,
+    Paper,
+    Button,
+    Typography,
+    useMediaQuery,
+    useTheme,
+} from "@mui/material";
+
+import ExpandLessIconBG from "@icons/ExpandLessIconBG";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ShareNetwork from "@icons/ShareNetwork.svg";
+import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";
+
+const whenValues = [
+    {
+        title: "До формы контактов",
+        value: "before",
+    },
+    {
+        title: "После формы контактов",
+        value: "after",
+    },
+    {
+        title: "Отправить на E-mail",
+        value: "email",
+    },
+];
+
+interface Props {
+    quizExpand: boolean
+}
+
+export const WhenCard = ({ quizExpand }: Props) => {
+    const quiz = useCurrentQuiz()
+    const theme = useTheme();
+
+    const isMobile = useMediaQuery(theme.breakpoints.down(790));
+    const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));
+
+    const [expand, setExpand] = useState(true)
+
+    useEffect(() => {
+        setExpand(false)
+    }, [quizExpand])
+
+
+    return (
+        <Paper
+            data-cy="quiz-question-card"
+            sx={{
+                maxWidth: "796px",
+                width: "100%",
+                borderRadius: "12px",
+                backgroundColor: expand ? "white" : "#EEE4FC",
+                border: expand ? "none" : "1px solid #9A9AAF",
+                boxShadow: "0px 10px 30px #e7e7e7",
+                m: "20px 0"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: isMobile ? "10px" : "20px",
+                    flexDirection: isMobile ? "column" : null,
+                    justifyContent: "space-between",
+                    minHeight: "40px",
+
+                }}
+            >
+                <Typography
+                    sx={{
+                        margin: isMobile ? "10px 0" : 0,
+                        color: expand ? "#9A9AAF" : "#000000",
+                    }}
+                >
+                    Показывать результат
+                </Typography>
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-end",
+                        width: isMobile ? "100%" : "auto",
+                        position: "relative",
+                    }}
+                >
+                    <IconButton
+                        sx={{ padding: "0", margin: "5px" }}
+                        disableRipple
+                        data-cy="expand-question"
+                        onClick={() => setExpand(!expand)}
+                    >
+                        {expand ? (
+                            <ExpandLessIconBG />
+                        ) : (
+                            <ExpandLessIcon
+                                sx={{
+                                    boxSizing: "border-box",
+                                    fill: theme.palette.brightPurple.main,
+                                    background: "#FFF",
+                                    borderRadius: "6px",
+                                    height: "30px",
+                                    width: "30px",
+                                }}
+                            />
+                        )}
+                    </IconButton>
+                </Box>
+            </Box>
+            {expand && (
+                <>
+
+                    <Box
+                        sx={{
+                            p: "33px 20px",
+                        }}
+                    >
+                        <Box
+                            sx={{
+                                display: "flex",
+                                flexDirection: isSmallMonitor ? "column" : "row",
+                                justifyContent: "space-between",
+                                gap: "20px",
+                                mb: "20px",
+                            }}
+                        >
+                            {whenValues.map(({ title, value }, index) => (
+                                <Button
+                                    onClick={() => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.when = value)}
+                                    key={title}
+                                    sx={{
+                                        bgcolor: quiz?.config.resultInfo.when === value ? " #7E2AEA" : "#F2F3F7",
+                                        color: quiz?.config.resultInfo.when === value ? " white" : "#9A9AAF",
+                                        minWidth: isSmallMonitor ? "300px" : "auto",
+                                        borderRadius: "8px",
+                                        width: "237px",
+                                        height: "44px",
+                                        border: quiz?.config.resultInfo.when === value ? "none" : "1px solid #9A9AAF",
+                                        "&:hover": {
+                                            backgroundColor: quiz?.config.resultInfo.when === value ? "#581CA7" : "#7E2AEA",
+                                            color: "white"
+
+                                        }
+                                    }}
+                                >
+                                    {title}
+                                </Button>
+                            ))}
+                        </Box>
+
+
+                        {
+                            (quiz?.config.resultInfo.when !== "email") && <SwitchSetting
+                                icon={ShareNetwork}
+                                text="Поделиться результатами"
+                                onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.share = event.target.checked)}
+                                value={quiz?.config.resultInfo.share}
+                            />
+                        }
+                        {
+                            quiz?.config.resultInfo.when === "before" && <SwitchSetting
+                                icon={ArrowCounterClockWise}
+                                text="Кнопка `Пройти тест заново`"
+                                onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.replay = event.target.checked)}
+                                value={quiz?.config.resultInfo.replay}
+                            />
+                        }
+
+
+
+                    </Box>
+                </>
+            )}
+        </Paper>
+
+    )
+}

src/pages/startPage/EditPage.tsx

@@ -32,9 +32,10 @@ import { SidebarMobile } from "./Sidebar/SidebarMobile";
 import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
 import {BranchingPanel} from "../Questions/BranchingPanel";
 import {useQuestionsStore} from "@root/questions/store";
+import { useQuestions } from "@root/questions/hooks";
 
 
-export default function StartPage() {
+export default function EditPage() {
     useSWR("quizes", () => quizApi.getList(), {
         onSuccess: setQuizes,
         onError: error => {
@@ -44,6 +45,9 @@ export default function StartPage() {
             enqueueSnackbar(`Не удалось получить квизы. ${message}`);
         },
     });
+
+    
+    // if (isLoading && !questions) return <Box>Загрузка вопросов...</Box>;
     const theme = useTheme();
     const navigate = useNavigate();
     const editQuizId = useQuizStore(state => state.editQuizId);
@@ -54,6 +58,7 @@ export default function StartPage() {
     const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
     const {openBranchingPanel} = useQuestionsStore.getState()
     const quizConfig = quiz?.config;
+        const { questions, isLoading } = useQuestions();
 
     useEffect(() => {
         if (editQuizId === null) navigate("/list");
@@ -214,6 +219,7 @@ export default function StartPage() {
                         boxSizing: "border-box",
                     }}
                 >
+                    {/* Выбор текущей страницы редактирования чего-либо находится здесь */}
                     {quizConfig &&
                         <>
                             <Stepper activeStep={currentStep} />

src/pages/startPage/StartPageSettings.tsx

@@ -35,8 +35,8 @@ import UploadIcon from "../../assets/icons/UploadIcon";
 import ModalSizeImage from "./ModalSizeImage";
 import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
-import DropFav from "./dropfavicon";
 import Extra from "./extra";
+import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
 
 
 const designTypes = [
@@ -85,6 +85,33 @@ export default function StartPageSettings() {
 
     if (!quiz) return null; // TODO throw and catch with error boundary
 
+    const favIconDropZoneElement = (
+        <DropZone
+            sx={{ height: "48px", width: "48px" }}
+            deleteIconSx={{ right: -40, top: -10 }}
+            imageUrl={quiz.config.startpage.favIcon}
+            originalImageUrl={quiz.config.startpage.originalFavIcon}
+            onImageUploadClick={async file => {
+                const resizedImage = await resizeFavIcon(file);
+                uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
+                    quiz.config.startpage.favIcon = url;
+                    quiz.config.startpage.originalFavIcon = url;
+                });
+            }}
+            onImageSaveClick={async file => {
+                const resizedImage = await resizeFavIcon(file);
+                uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
+                    quiz.config.startpage.favIcon = url;
+                });
+            }}
+            onDeleteClick={() => {
+                updateQuiz(quiz.id, quiz => {
+                    quiz.config.startpage.favIcon = null;
+                });
+            }}
+        />
+    );
+
     return (
         <>
             <Typography
@@ -304,7 +331,6 @@ export default function StartPageSettings() {
                                 </Typography>
                                 <DropZone
                                     text={"5 MB максимум"}
-                                    heightImg={"110px"}
                                     sx={{ maxWidth: "300px" }}
                                     imageUrl={quiz.config.startpage.background.desktop}
                                     originalImageUrl={quiz.config.startpage.background.originalDesktop}
@@ -373,7 +399,6 @@ export default function StartPageSettings() {
                                         </Typography>
                                         <DropZone
                                             text={"5 MB максимум"}
-                                            heightImg={"110px"}
                                             imageUrl={quiz.config.startpage.background.mobile}
                                             originalImageUrl={quiz.config.startpage.background.originalMobile}
                                             onImageUploadClick={file => {
@@ -476,7 +501,6 @@ export default function StartPageSettings() {
                             </Typography>
                             <DropZone
                                 text={"5 MB максимум"}
-                                heightImg={"110px"}
                                 imageUrl={quiz.config.startpage.background.mobile}
                                 originalImageUrl={quiz.config.startpage.background.originalMobile}
                                 onImageUploadClick={file => {
@@ -557,24 +581,23 @@ export default function StartPageSettings() {
                                     </Typography>
                                     <DropZone
                                         text={"5 MB максимум"}
-                                        heightImg={"110px"}
                                         sx={{ maxWidth: "300px" }}
-                                        imageUrl={quiz.config.logo}
-                                        originalImageUrl={quiz.config.originalLogo}
+                                        imageUrl={quiz.config.startpage.logo}
+                                        originalImageUrl={quiz.config.startpage.originalLogo}
                                         onImageUploadClick={file => {
                                             uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                                quiz.config.logo = url;
-                                                quiz.config.originalLogo = url;
+                                                quiz.config.startpage.logo = url;
+                                                quiz.config.startpage.originalLogo = url;
                                             });
                                         }}
                                         onImageSaveClick={file => {
                                             uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                                quiz.config.logo = url;
+                                                quiz.config.startpage.logo = url;
                                             });
                                         }}
                                         onDeleteClick={() => {
                                             updateQuiz(quiz.id, quiz => {
-                                                quiz.config.logo = null;
+                                                quiz.config.startpage.logo = null;
                                             });
                                         }}
                                     />
@@ -597,12 +620,7 @@ export default function StartPageSettings() {
                                         gap: "10px",
                                     }}
                                 >
-                                    <DropFav
-                                        sx={{ height: "48px", width: "48px" }}
-                                        heightImg={"48px"}
-                                        widthImg={"48px"}
-                                    />
-
+                                    {favIconDropZoneElement}
                                     <Typography
                                         sx={{
                                             color: theme.palette.orange.main,
@@ -645,24 +663,23 @@ export default function StartPageSettings() {
                                 </Typography>
                                 <DropZone
                                     text={"5 MB максимум"}
-                                    heightImg={"110px"}
                                     sx={{ maxWidth: "300px" }}
-                                    imageUrl={quiz.config.logo}
-                                    originalImageUrl={quiz.config.originalLogo}
+                                    imageUrl={quiz.config.startpage.logo}
+                                    originalImageUrl={quiz.config.startpage.originalLogo}
                                     onImageUploadClick={file => {
                                         uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                            quiz.config.logo = url;
-                                            quiz.config.originalLogo = url;
+                                            quiz.config.startpage.logo = url;
+                                            quiz.config.startpage.originalLogo = url;
                                         });
                                     }}
                                     onImageSaveClick={file => {
                                         uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                            quiz.config.logo = url;
+                                            quiz.config.startpage.logo = url;
                                         });
                                     }}
                                     onDeleteClick={() => {
                                         updateQuiz(quiz.id, quiz => {
-                                            quiz.config.logo = null;
+                                            quiz.config.startpage.logo = null;
                                         });
                                     }}
                                 />
@@ -685,12 +702,7 @@ export default function StartPageSettings() {
                                     gap: "10px",
                                 }}
                             >
-                                <DropFav
-                                    sx={{ height: "48px", width: "48px" }}
-                                    heightImg={"48px"}
-                                    widthImg={"48px"}
-                                />
-
+                                {favIconDropZoneElement}
                                 <Typography
                                     sx={{
                                         color: theme.palette.orange.main,

src/pages/startPage/dropZone.tsx

@@ -22,8 +22,7 @@ const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 interface Props {
     text?: string;
     sx?: SxProps<Theme>;
-    heightImg: string;
-    widthImg?: string;
+    deleteIconSx?: SxProps<Theme>;
     imageUrl: string | null;
     originalImageUrl: string | null;
     onImageUploadClick: (image: Blob) => void;
@@ -32,7 +31,7 @@ interface Props {
 }
 
 //Научи функцию принимать данные для валидации
-export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImageUrl, onImageUploadClick, onImageSaveClick, onDeleteClick }: Props) => {
+export const DropZone = ({ text, sx, deleteIconSx, imageUrl, originalImageUrl, onImageUploadClick, onImageSaveClick, onDeleteClick }: Props) => {
     const theme = useTheme();
     const quiz = useCurrentQuiz();
     const [isDropReady, setIsDropReady] = useState<boolean>(false);
@@ -103,14 +102,15 @@ export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImag
                     justifyContent: "center",
                     alignItems: "center",
                     borderRadius: "8px",
+                    overflow: "hidden",
                 }}
             >
                 {imageUrl ?
                     <img
-                        height={heightImg}
-                        width={widthImg}
                         src={imageUrl}
                         style={{
+                            width: "100%",
+                            height: "100%",
                             objectFit: "scale-down",
                         }}
                     />
@@ -144,6 +144,7 @@ export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImag
                         borderRadius: "8px",
                         borderBottomRightRadius: 0,
                         borderTopLeftRadius: 0,
+                        ...deleteIconSx,
                     }}
                 >
                     <DeleteIcon />

src/pages/startPage/dropfavicon.tsx

@@ -1,274 +0,0 @@
-import { Box, ButtonBase, SxProps, Theme, Typography, useTheme } from "@mui/material";
-import Resizer from "@ui_kit/reactImageFileResizer";
-import saveAs from "file-saver";
-import JSZip from "jszip";
-import { enqueueSnackbar } from "notistack";
-import { useEffect, useState } from "react";
-import UploadIcon from "../../assets/icons/UploadIcon";
-
-interface Props {
-  text?: string;
-  sx?: SxProps<Theme>;
-  heightImg: string;
-  widthImg?: string;
-}
-
-const imageFavicon = [
-  {
-    maxWidth: 16,
-    maxHeight: 16,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 32,
-    maxHeight: 32,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 48,
-    maxHeight: 48,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 76,
-    maxHeight: 76,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 96,
-    maxHeight: 96,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 120,
-    maxHeight: 120,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 128,
-    maxHeight: 128,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 144,
-    maxHeight: 144,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 152,
-    maxHeight: 152,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 167,
-    maxHeight: 167,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 180,
-    maxHeight: 180,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 192,
-    maxHeight: 192,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 196,
-    maxHeight: 196,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 228,
-    maxHeight: 288,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 256,
-    maxHeight: 256,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 300,
-    maxHeight: 300,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 384,
-    maxHeight: 384,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-  {
-    maxWidth: 512,
-    maxHeight: 512,
-    compressFormat: "PNG",
-    quality: 100,
-    rotation: 0,
-  },
-];
-export default ({ text, sx, heightImg, widthImg }: Props) => {
-  const theme = useTheme();
-  const [favList, setFavList] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (favList.length === 18) {
-
-      const zip = new JSZip(); //создание зип архива
-
-      favList.forEach((uri, i) => {
-        const idx = uri.indexOf("base64,") + "base64,".length; //обработка строки картинки
-        const content = uri.substring(idx); //обработка строки картинки
-        zip.file(`fav${i}.jpg`, content, { base64: true }); //сохранение картинки в архив с именем "fav.jpg"
-      });
-
-      zip.generateAsync({ type: "blob" }).then(function (content) {
-        // скачивание архива
-        saveAs(content, "fav.zip"); // скачивание архива
-      }); // скачивание архива
-    }
-  }, [favList]);
-
-  const callback = (uri: string) => {
-    setFavList((old) => [...old, uri]);
-  };
-
-  const imgHC = (imgInp: HTMLInputElement) => {
-    const file = imgInp.files?.[0];
-    if (file) {
-      setFavList([]);
-      if (file.size < 5242880) {
-        setData(URL.createObjectURL(file));
-        imageFavicon.forEach((obj) => {
-          try {
-            Resizer.imageFileResizer(
-              file,
-              obj.maxWidth,
-              obj.compressFormat,
-              obj.quality,
-              obj.rotation,
-              callback,
-              "string"
-            );
-          } catch (err) {
-            console.log(err);
-          }
-        });
-      } else {
-        enqueueSnackbar("Размер картинки слишком велик");
-      }
-    }
-  };
-
-  const [data, setData] = useState("");
-  const [ready, setReady] = useState(false);
-
-  const dragenterHC = () => {
-    setReady(true);
-  };
-
-  const dragexitHC = () => {
-    setReady(false);
-  };
-
-  const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setReady(false);
-    const file = event.dataTransfer.files[0];
-    if (file.size < 5242880) {
-      setData(URL.createObjectURL(file));
-    } else {
-      enqueueSnackbar("Размер картинки слишком велик");
-    }
-  };
-
-  const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-  };
-
-  return (
-    <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
-      <input onChange={(event) => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
-      <Box
-        onDragEnter={dragenterHC}
-        onDragExit={dragexitHC}
-        onDrop={dropHC}
-        onDragOver={dragOverHC}
-        sx={{
-          width: "100%",
-          height: "120px",
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: theme.palette.background.default,
-          border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
-          borderRadius: "8px",
-          opacity: data ? "0.5" : 1,
-          ...sx,
-        }}
-      >
-        <UploadIcon />
-        <Typography
-          sx={{
-            position: "absolute",
-            right: "10px",
-            bottom: "10px",
-            color: theme.palette.orange.main,
-            fontSize: "16px",
-            lineHeight: "19px",
-            textDecoration: "underline",
-          }}
-        >
-          {text}
-        </Typography>
-        {data ? (
-          <img
-            height={heightImg}
-            width={widthImg}
-            src={data}
-            style={{
-              position: "absolute",
-              zIndex: "-1",
-              objectFit: "revert-layer",
-            }}
-          />
-        ) : null}
-      </Box>
-    </ButtonBase>
-  );
-};

src/stores/questions/actions.ts

@@ -1,3 +1,4 @@
+
 import { questionApi } from "@api/question";
 import { quizApi } from "@api/quiz";
 import { devlog } from "@frontend/kitui";
@@ -13,13 +14,14 @@ import { RequestQueue } from "../../utils/requestQueue";
 import { updateRootContentId } from "@root/quizes/actions"
 import { useCurrentQuiz } from "@root/quizes/hooks"
 import { QuestionsStore, useQuestionsStore } from "./store";
+import { withErrorBoundary } from "react-error-boundary";
 
 
 export const setQuestions = (questions: RawQuestion[] | null) => setProducedState(state => {
-    const untypedQuestions = state.questions.filter(q => q.type === null);
+    const untypedResultQuestions = state.questions.filter(q => q.type === null || q.type === "result");
 
     state.questions = questions?.map(rawQuestionToQuestion) ?? [];
-    state.questions.push(...untypedQuestions);
+    state.questions.push(...untypedResultQuestions);
 }, {
     type: "setQuestions",
     questions,
@@ -321,8 +323,8 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ
         await questionApi.delete(question.backendId);
         if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
             updateRootContentId(quizId, "")
-            clearRoleForAll()
-        } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очищаем его потомков
+            clearRuleForAll()
+        } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
             const clearQuestions = [] as string[]
 
             const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
@@ -343,8 +345,22 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ
                 })
             })
 
-        }
+            //чистим rule родителя
+            const parentQuestion = getQuestionByContentId(question.content.rule.parentId)
+            const newRule = {}
+            newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id) //удаляем условия перехода от родителя к этому вопросу
+            newRule.parentId = parentQuestion.content.rule.parentId
+            newRule.default = questions.filter((q) => {
+                return q.content.rule.parentId === question.content.rule.parentId && q.content.id !== question.content.id
+              })[0]?.content.id || ""
+            //Если этот вопрос был дефолтным у родителя - чистим дефолт
+            //Смотрим можем ли мы заменить id на один из main
 
+            console.log(newRule)
+            updateQuestion(question.content.rule.parentId, (PQ) => {
+                PQ.content.rule = newRule
+            })
+        }
         removeQuestion(questionId);
     } catch (error) {
         devlog("Error deleting question", error);
@@ -425,7 +441,7 @@ export const updateDragQuestionContentId = (contentId?: string) => {
     useQuestionsStore.setState({ dragQuestionContentId: contentId ? contentId : null });
 }
 
-export const clearRoleForAll = () => {
+export const clearRuleForAll = () => {
     const { questions } = useQuestionsStore.getState()
     questions.forEach(question => {
         if (question.type !== null && (question.content.rule.main.length > 0 || question.content.rule.default.length > 0 || question.content.rule.parentId.length > 0)) {
@@ -455,3 +471,62 @@ export const clearDesireToOpenABranchingModal = () => {
 export const updateEditSomeQuestion = (contentId?: string) => {
     useQuestionsStore.setState({ editSomeQuestion: contentId === undefined ? null : contentId })
 }
+
+export const createFrontResult = (quizId: number, parentContentId?: string) => setProducedState(state => {
+    const frontId = nanoid()
+    const content = JSON.parse(JSON.stringify(defaultQuestionByType["result"].content))
+    content.id = frontId
+    if (parentContentId) content.rule.parentId = parentContentId
+    state.questions.push({
+        id: frontId,
+        quizId,
+        type: "result",
+        title: "",
+        description: "",
+        deleted: false,
+        expanded: true,
+        page: 101,
+        required: true,
+        content
+    });
+}, {
+    type: "createFrontResult",
+    quizId,
+});
+
+
+export const createBackResult = async (
+    questionId: string,
+    type: QuestionType,
+) => requestQueue.enqueue(async () => {
+    const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
+    if (!question) return;
+    if (question.type !== "result") throw new Error("Cannot upgrade already typed question");
+
+    try {
+        const createdQuestion = await questionApi.create({
+            quiz_id: question.quizId,
+            type,
+            title: question.title,
+            description: question.description,
+            page: 0,
+            required: true,
+            content: JSON.stringify(defaultQuestionByType[type].content),
+        });
+
+        setProducedState(state => {
+            const questionIndex = state.questions.findIndex(q => q.id === questionId);
+            if (questionIndex !== -1) state.questions.splice(
+                questionIndex,
+                1,
+                rawQuestionToQuestion(createdQuestion)
+            );
+        }, {
+            type: "createTypedQuestion",
+            question,
+        });
+    } catch (error) {
+        devlog("Error creating question", error);
+        enqueueSnackbar("Не удалось создать вопрос");
+    }
+});

src/stores/questions/hooks.ts

@@ -9,6 +9,7 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 
 
 export function useQuestions() {
+    console.log("вызываю вопросы")
     const quiz = useCurrentQuiz();
     const { isLoading, error, isValidating } = useSWR(["questions", quiz?.backendId], ([, id]) => questionApi.getList({ quiz_id: id }), {
         onSuccess: setQuestions,

src/ui_kit/Header/HeaderFull.tsx

@@ -112,17 +112,12 @@ export default function HeaderFull() {
                 width: "36px",
               }}
             /> 
-            <IconButton
+              <LogoutButton
+                onClick={handleLogoutClick}
                 sx={{
                     ml: "20px",
-                bgcolor: "#F2F3F7",
-                borderRadius: "6px",
-                height: "36px",
-                width: "36px",
                 }}
-            >
-              <LogoutButton onClick={handleLogoutClick} />
-            </IconButton>
+              /> 
           </>
         )}
       </Box>

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -219,9 +219,9 @@ export default function QuizPreviewLayout() {
 }
 
 function QuestionPreviewComponent({ question }: {
-    question: AnyTypedQuizQuestion | UntypedQuizQuestion;
+    question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined;
 }) {
-    if (question.type === null) return null;
+    if (!question || question.type === null) return null;
 
     switch (question.type) {
         case "variant": return <Variant question={question} />;

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -53,9 +53,9 @@ export default function QuizPreviewLayout() {
                         }}
                     >
                         {quiz.config.startpage.background.type === "image" &&
-                            quiz.config.startpage.background.desktop && (
+                            quiz.config.startpage.logo && (
                                 <img
-                                    src={quiz.config.startpage.background.desktop}
+                                    src={quiz.config.startpage.logo}
                                     style={{
                                         height: "30px",
                                         maxWidth: "50px",

src/ui_kit/reactImageFileResizer.ts

@@ -175,3 +175,19 @@ class Resizer {
       );
     },
   };
+
+export function resizeFavIcon(blob: Blob) {
+    return new Promise<Blob>(resolve => {
+        Resizer.createResizedImage(
+            new File([blob], "image"),
+            48,
+            "PNG",
+            100,
+            0,
+            async (file: Blob) => {
+                resolve(file);
+            },
+            "blob"
+        );
+    });
+}

src/ui_kit/switchStepPages.tsx

@@ -4,8 +4,8 @@ import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
 import FormQuestionsPage from "../pages/Questions/Form/FormQuestionsPage";
 import QuestionsPage from "../pages/Questions/QuestionsPage";
 import { QuestionsMap } from "../pages/QuestionsMap";
-import { Result } from "../pages/Result/Result";
-import { Setting } from "../pages/Result/Setting";
+import { ResultPage } from "../pages/ResultPage/ResultPage";
+import { ResultSettings } from "../pages/ResultPage/ResultSettings";
 import StartPageSettings from "../pages/startPage/StartPageSettings";
 import StepOne from "../pages/startPage/stepOne";
 import Steptwo from "../pages/startPage/steptwo";
@@ -31,10 +31,7 @@ export default function SwitchStepPages({
             return <StartPageSettings />;
         }
         case 1: return quizType === "form" ? <FormQuestionsPage /> : <QuestionsPage />;
-        case 2: {
-            if (!quizResults) return <Result />;
-            return <Setting />;
-        }
+        case 2: return <ResultPage />;
         case 3: return <QuestionsMap />;
         case 4: return <ContactFormPage />;
         case 5: return <InstallQuiz />;

yarn.lock

@@ -8628,6 +8628,13 @@ react-easy-crop@^5.0.0:
     normalize-wheel "^1.0.1"
     tslib "2.0.1"
 
+react-error-boundary@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
+  integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.11:
   version "6.0.11"
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"