Merge branch 'image-modals' into 'main'

Image modals See merge request frontend/squiz!82
2023-12-19 20:52:35 +00:00 · 2023-12-19 20:52:35 +00:00 · 7ee8c89172
commit 7ee8c89172
parent 1b577e4f33 60d196fcf5
41 changed files with 1266 additions and 1040 deletions
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
        "@craco/craco": "^7.0.0",
        "@emotion/react": "^11.10.5",
        "@emotion/styled": "^11.10.5",
-        "@frontend/kitui": "^1.0.54",
+        "@frontend/kitui": "^1.0.55",
        "@mui/icons-material": "^5.10.14",
        "@mui/material": "^5.10.14",
        "@mui/x-date-pickers": "^6.16.1",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -16,8 +16,8 @@ import { ResultSettings } from "./pages/ResultPage/ResultSettings";
 import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
 import Main from "./pages/main";
 import EditPage from "./pages/startPage/EditPage";
-import { clearAuthToken, getMessageFromFetchError, useUserFetcher } from "@frontend/kitui";
-import { clearUserData, setUser, useUserStore } from "@root/user";
+import { clearAuthToken, getMessageFromFetchError, useUserAccountFetcher, useUserFetcher } from "@frontend/kitui";
+import { clearUserData, setUser, setUserAccount, useUserStore } from "@root/user";
 import { enqueueSnackbar } from "notistack";
 import PrivateRoute from "@ui_kit/PrivateRoute";

@ -26,59 +26,75 @@ 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: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
-  { path: "/result", page: <Result />, header: true, sidebar: true },
-  { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
+    { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
+    { 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 },
 ] as const;

 export default function App() {
-  const userId = useUserStore((state) => state.userId);
-  const location = useLocation();
-  const navigate = useNavigate();
+    const userId = useUserStore((state) => state.userId);
+    const location = useLocation();
+    const navigate = useNavigate();

-  useUserFetcher({
-    url: `https://hub.pena.digital/user/${userId}`,
-    userId,
-    onNewUser: setUser,
-    onError: (error) => {
-      const errorMessage = getMessageFromFetchError(error);
-      if (errorMessage) {
-        enqueueSnackbar(errorMessage);
-        clearUserData();
-        clearAuthToken();
-      }
-    },
-  });
-  if (location.state?.redirectTo)
-    return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;
+    useUserFetcher({
+        url: `https://hub.pena.digital/user/${userId}`,
+        userId,
+        onNewUser: setUser,
+        onError: (error) => {
+            const errorMessage = getMessageFromFetchError(error);
+            if (errorMessage) {
+                enqueueSnackbar(errorMessage);
+                clearUserData();
+                clearAuthToken();
+            }
+        },
+    });

-  return (
-    <>
-      <ContactFormModal />
-      {location.state?.backgroundLocation && (
-        <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} />} />
-          ))}
+    useUserAccountFetcher({
+        url: "https://squiz.pena.digital/customer/account",
+        userId,
+        onNewUserAccount: setUserAccount,
+        onError: (error) => {
+            const errorMessage = getMessageFromFetchError(error);
+            if (errorMessage) {
+                enqueueSnackbar(errorMessage);
+                clearUserData();
+                clearAuthToken();
+                navigate("/signin");
+            }
+        },
+    });

-          <Route path="edit" element={<EditPage />} />
-          <Route path="crop" element={<ImageCrop />} />
-          <Route path="/view" element={<ViewPage />} />
-        </Route>
-      </Routes>
-    </>
-  );
+    if (location.state?.redirectTo)
+        return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;
+
+    return (
+        <>
+            <ContactFormModal />
+            {location.state?.backgroundLocation && (
+                <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 />} />
+                </Route>
+            </Routes>
+        </>
+    );
 }
--- a/src/api/question.ts
+++ b/src/api/question.ts
@ -18,7 +18,6 @@ function createQuestion(body: CreateQuestionRequest) {
 }

 async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
-    console.log("body" , body)
    if (!body?.quiz_id) return null;

    const response = await makeRequest<GetQuestionListRequest, GetQuestionListResponse>({
--- a/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
+++ b/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
@ -17,8 +17,6 @@ interface Props {
 export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
    const theme = useTheme();
    const quiz = useCurrentQuiz()
-    console.log(quiz)
-    console.log(type)
    const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
        {icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
        {icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
--- a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
+++ b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
@ -18,7 +18,6 @@ interface Props {

 export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
    const quiz = useCurrentQuiz()
-    console.log({ defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children })
    return (
        <Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
@ -73,7 +72,6 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                <CustomCheckbox
                    checked={quiz.config.formContact[defaultValue].required}
                    handleChange={({ target }) => {
-                        console.log("click")
                        updateQuiz(quiz.id, (quiz) => {
                            quiz.config.formContact[defaultValue].required = target.checked
                        })
--- a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
+++ b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
@ -14,7 +14,6 @@ interface Props {

 export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) {
    const [SwitchMask, setSwitchMask] = React.useState(false);
-    console.log(switchState)
    const SwitchMaskHC = (bool:boolean) => {
        setSwitchMask(bool)
    }
--- a/src/pages/InstallQuiz/InstallQuiz.tsx
+++ b/src/pages/InstallQuiz/InstallQuiz.tsx
@ -48,7 +48,6 @@ type BackgroundType = "text" | "video";

 export default function InstallQuiz() {
  const quiz = useCurrentQuiz()
-  console.log(quiz)

  const [display, setDisplay] = React.useState("1");
  const handleChange = (event: SelectChangeEvent) => {
--- a/src/pages/Questions/BranchingMap/CsComponent.tsx
+++ b/src/pages/Questions/BranchingMap/CsComponent.tsx
@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import Cytoscape from "cytoscape";
-import { Button } from "@mui/material";
+import { Button, Box } from "@mui/material";
 import CytoscapeComponent from "react-cytoscapejs";
 import popper from "cytoscape-popper";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@ -8,9 +8,10 @@ import { updateRootContentId } from "@root/quizes/actions"
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"
 import { useQuestionsStore } from "@root/questions/store";
 import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll, createFrontResult } from "@root/questions/actions";
-import {  updateOpenedModalSettingsId, } from "@root/uiTools/actions";
+import { updateCanCreatePublic, updateModalInfoWhyCantCreate, updateOpenedModalSettingsId, } from "@root/uiTools/actions";
 import { cleardragQuestionContentId } from "@root/uiTools/actions";
 import { withErrorBoundary } from "react-error-boundary";
+import { ProblemIcon } from "@ui_kit/ProblemIcon";

 import { storeToNodes } from "./helper";

@ -115,6 +116,7 @@ interface Props {
 }


+
 function CsComponent({
  modalQuestionParentContentId,
  modalQuestionTargetContentId,
@ -124,7 +126,7 @@ function CsComponent({
 }: Props) {
  const quiz = useCurrentQuiz();

-  const { dragQuestionContentId, desireToOpenABranchingModal } = useUiTools()
+  const { dragQuestionContentId, desireToOpenABranchingModal, canCreatePublic } = useUiTools()
  const trashQuestions = useQuestionsStore().questions
  const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null)
  const [startCreate, setStartCreate] = useState("");
@ -136,6 +138,13 @@ function CsComponent({
  const crossesContainer = useRef<HTMLDivElement | null>(null);
  const gearsContainer = useRef<HTMLDivElement | null>(null);

+
+  useEffect(() => {
+    return () => {
+      // if (!canCreatePublic) updateModalInfoWhyCantCreate(true)
+    }
+  }, []);
+
  useLayoutEffect(() => {
    const cy = cyRef?.current
    if (desireToOpenABranchingModal) {
@ -148,8 +157,8 @@ function CsComponent({
  }, [desireToOpenABranchingModal])
  useLayoutEffect(() => {
    updateOpenedModalSettingsId()
-      //  updateRootContentId(quiz.id, "")
-      //  clearRuleForAll()
+    //  updateRootContentId(quiz.id, "")
+    //  clearRuleForAll()
  }, [])
  useEffect(() => {
    if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
@ -169,7 +178,7 @@ function CsComponent({
    const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
    //если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа
    const targetQuestion = { ...getQuestionByContentId(targetNodeContentId || dragQuestionContentId) } as AnyTypedQuizQuestion
-    if (Object.keys(targetQuestion).length !== 0  && parentNodeContentId && parentNodeChildren !== undefined) {
+    if (Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
      clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
      cy?.data('changed', true)
      createFrontResult(quiz.backendId, targetQuestion.content.id)
@ -188,7 +197,6 @@ function CsComponent({
        }
      ])
      cy?.layout(lyopts).run()
-      console.log(es)
      cy?.center(es)
    } else {
      enqueueSnackbar("Добавляемый вопрос не найден")
@ -203,7 +211,6 @@ function CsComponent({
    //смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
    trashQuestions.forEach((targetQuestion) => {
      if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
-        console.log('deleteQ', targetQuestion.id)
        deleteQuestion(targetQuestion.id);
      }
    })
@ -228,7 +235,6 @@ function CsComponent({


  const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
-    console.log("старт удаление")
    const deleteNodes = [] as string[]
    const deleteEdges: any = []
    const cy = cyRef?.current
@ -272,8 +278,8 @@ function CsComponent({

      const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
      if (targetNodeContentId && parentQuestionContentId) {
-if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
-      createFrontResult(quiz.backendId, parentQuestionContentId)
+        if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
+          createFrontResult(quiz.backendId, parentQuestionContentId)
        clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
        cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
      }
@ -640,36 +646,35 @@ if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
            return crossElement;
          },
        });
-let gearsPopper = null
+        let gearsPopper = null
        if (node.data().root !== true) {
-        gearsPopper = node.popper({
-          popper: {
-            placement: "left",
-            modifiers: [{ name: "flip", options: { boundary: node } }],
-          },
-          content: ([item]) => {
-            const itemId = item.id();
+          gearsPopper = node.popper({
+            popper: {
+              placement: "left",
+              modifiers: [{ name: "flip", options: { boundary: node } }],
+            },
+            content: ([item]) => {
+              const itemId = item.id();

-            const itemElement = gearsContainer.current?.querySelector(
-              `.popper-gear[data-id='${itemId}']`
-            );
-            if (itemElement) {
-              return itemElement;
-            }
+              const itemElement = gearsContainer.current?.querySelector(
+                `.popper-gear[data-id='${itemId}']`
+              );
+              if (itemElement) {
+                return itemElement;
+              }

-            const gearElement = document.createElement("div");
-            gearElement.classList.add("popper-gear");
-            gearElement.setAttribute("data-id", item.id());
-            gearElement.style.zIndex = "1"
-            gearsContainer.current?.appendChild(gearElement);
-            gearElement.addEventListener("mouseup", (e) => {
-              console.log("up")
-              updateOpenedModalSettingsId(item.id())
-            });
+              const gearElement = document.createElement("div");
+              gearElement.classList.add("popper-gear");
+              gearElement.setAttribute("data-id", item.id());
+              gearElement.style.zIndex = "1"
+              gearsContainer.current?.appendChild(gearElement);
+              gearElement.addEventListener("mouseup", (e) => {
+                updateOpenedModalSettingsId(item.id())
+              });

-            return gearElement;
-          },
-        });
+              return gearElement;
+            },
+          });
        }
        const update = async () => {
          await plusesPopper.update();
@ -786,23 +791,27 @@ let gearsPopper = null

  return (
    <>
-      <Button
-        sx={{
-          mb: "20px",
-          height: "27px",
-          color: "#7E2AEA",
-          textDecoration: "underline",
-          fontSize: "16px",
-        }}
-        variant="text"
-        onClick={() => {
+      <Box
+            mb="20px">
+        <Button
+          sx={{
+            height: "27px",
+            color: "#7E2AEA",
+            textDecoration: "underline",
+            fontSize: "16px",
+          }}
+          variant="text"
+          onClick={() => {

-          cyRef.current?.fit()
+            cyRef.current?.fit()
+
+          }}
+        >
+          Выровнять
+        </Button>
+        <ProblemIcon blink={!canCreatePublic} onClick={() => updateModalInfoWhyCantCreate(true)} />
+      </Box>
      
-        }}
-      >
-        Выровнять
-      </Button>
      <CytoscapeComponent
        wheelSensitivity={0.1}
        elements={[]}
@ -815,16 +824,6 @@ let gearsPopper = null
        }}
        autoungrabify={true}
      />
-      {/* <button onClick={() => {
-        console.log("NODES____________________________")
-        cyRef.current?.elements().forEach((ele: any) => {
-          console.log(ele.data())
-        })
-      }}>nodes</button>
-      <button onClick={() => {
-        console.log("ELEMENTS____________________________")
-        console.log(questions)
-      }}>elements</button> */}
    </>
  );
 };
--- a/src/pages/Questions/BranchingMap/FirstNodeField.tsx
+++ b/src/pages/Questions/BranchingMap/FirstNodeField.tsx
@ -18,7 +18,6 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon

    useLayoutEffect(() => {
        updateOpenedModalSettingsId()
-        console.log("first render firstComponent")
           updateRootContentId(quiz.id, "")
           clearRuleForAll()
      }, [])
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -106,7 +106,6 @@ export default function ButtonsOptions({
            deleteQuestion(question.id);

        } else {
-            console.log("удаляю безтипогово");
            deleteQuestion(question.id);
        }
    };
@ -149,7 +148,6 @@ export default function ButtonsOptions({
                title: "Ветвление",
                value: "branching",
                myFunc: (question) => {
-                    console.log("buttons opiums")
                    updateOpenBranchingPanel(true);
                    updateDesireToOpenABranchingModal(question.content.id);
                }
--- a/src/pages/Questions/ButtonsOptionsAndPict.tsx
+++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx
@ -107,7 +107,6 @@ export default function ButtonsOptionsAndPict({
            deleteQuestion(question.id);

        } else {
-            console.log("удаляю безтипогово");
            deleteQuestion(question.id);
        }
    };
@ -254,7 +253,6 @@ export default function ButtonsOptionsAndPict({
                            onMouseEnter={() => setButtonHover("branching")}
                            onMouseLeave={() => setButtonHover("")}
                            onClick={() => {
-                                console.log("buttonsOptions")
                                updateOpenBranchingPanel(true);
                                updateDesireToOpenABranchingModal(question.content.id);
                            }}
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@ -123,7 +123,6 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging

            deleteQuestion(question.id);
        } else {
-            console.log("удаляю безтипогово");
            deleteQuestion(question.id);
        }
    };
--- a/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
@ -51,6 +51,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
    });
  }, 200);

+  console.log(question)
  return (
    <>
      <Paper
@ -85,7 +86,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
          >
            <CustomTextField
              placeholder={`Заголовок ${questionIndex + 1} вопроса`}
-              text={question.title}
+              value={question.title}
              onChange={({ target }) => setTitle(target.value)}
              sx={{ width: "100%" }}
              InputProps={{
--- a/src/pages/Questions/Form/FormDraggableList/index.tsx
+++ b/src/pages/Questions/Form/FormDraggableList/index.tsx
@ -6,8 +6,7 @@ import FormDraggableListItem from "./FormDraggableListItem";
 import { useQuestions } from "@root/questions/hooks";

 export const FormDraggableList = () => {
-  const { questions } = useQuestions();
-
+  const  questions  = useQuestions().questions.filter((q) => q.type !== "result");
  const onDragEnd = ({ destination, source }: DropResult) => {
    if (destination) reorderQuestions(source.index, destination.index);
  };
--- a/src/pages/Questions/Form/FormQuestionsPage.tsx
+++ b/src/pages/Questions/Form/FormQuestionsPage.tsx
@ -13,6 +13,7 @@ export default function FormQuestionsPage() {
  const quiz = useCurrentQuiz();

  if (!quiz) return null;
+  console.log("Анкета")

  return (
    <>
--- a/src/pages/Questions/QuestionSwitchWindowTool.tsx
+++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx
@ -14,8 +14,6 @@ export const QuestionSwitchWindowTool = () => {
    const {openBranchingPanel} = useUiTools()
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
-    console.log("questions ", questions)
-    console.log("rules ", questions.filter((q) => q.type !== null).map((q) => ({id: q.content.id, rule: q.content.rule})))
    return (
                <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap", marginBottom: isMobile ? "20px" : undefined  }}>
                <Box sx={{ flexBasis: "796px" }}>
--- a/src/pages/Questions/SwitchBranchingPanel/index.tsx
+++ b/src/pages/Questions/SwitchBranchingPanel/index.tsx
@ -12,7 +12,7 @@ import { useUiTools } from "@root/uiTools/store";
 export const SwitchBranchingPanel = () => {
  const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(660));
-    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const isTablet = useMediaQuery(theme.breakpoints.down(1446));
    
    const {openBranchingPanel} = useUiTools()
  const ref = useRef()
--- a/src/pages/Questions/UploadImage/UploadImageModal.tsx
+++ b/src/pages/Questions/UploadImage/UploadImageModal.tsx
@ -42,7 +42,6 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({

  const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : "";

-  console.log(acceptedFormats);

  return (
    <Modal
--- a/src/pages/ResultPage/cards/ResultCard.tsx
+++ b/src/pages/ResultPage/cards/ResultCard.tsx
@ -120,7 +120,6 @@ const InfoView = ({ resultData }: { resultData: QuizQuestionResult }) => {
 }

 export const ResultCard = ({ resultContract, resultData }: Props) => {
-  console.log("resultData", resultData)

  const quizQid = useCurrentQuiz()?.qid;
  const theme = useTheme();
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@ -78,7 +78,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
  }, [question, answers]);

  const showResult = (nextQuestion) => {
-    console.log(nextQuestion);

    if (nextQuestion && quiz?.config.resultInfo.when === "before") {
      setShowResultForm(true);
@ -154,14 +153,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
      const questionIndex = questions.findIndex(({ id }) => id === question.id);
      const nextQuestion = questions[questionIndex + 1];

-      console.log("questionIndex ", questionIndex);
-      console.log(nextQuestion);
-      console.log(questions);
      if (nextQuestion && nextQuestion.type !== "result") {
-        console.log("следующий вопрос результирующий ", nextQuestion.type === "result");
        setCurrentQuestion(nextQuestion);
      } else {
-        console.log("следующий вопрос результирующий ", nextQuestion.type === "result");
        showResult(nextQuestion);
      }

@ -173,7 +167,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
    if (nextQuestionId) {
      const nextQuestion = getQuestionByContentId(nextQuestionId);

-      console.log(nextQuestion);
      if (nextQuestion?.type && nextQuestion.type !== "result") {
        setCurrentQuestion(nextQuestion);
        return;
--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -43,7 +43,8 @@ const QUESTIONS_MAP: any = {

 export const Question = ({ questions }: QuestionProps) => {
  const quiz = useCurrentQuiz();
-  const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
+  const [currentQuestion, setCurrentQuestion] =
+    useState<AnyTypedQuizQuestion>();
  const [showContactForm, setShowContactForm] = useState<boolean>(false);
  const [showResultForm, setShowResultForm] = useState<boolean>(false);

@ -61,9 +62,9 @@ export const Question = ({ questions }: QuestionProps) => {

  if (!currentQuestion) return <>не смог отобразить вопрос</>;

-  const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
+  const QuestionComponent =
+    QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];

-    console.log("showResultForm " , showResultForm)
  return (
    <Box>
      {!showContactForm && !showResultForm && (
--- a/src/pages/ViewPublicationPage/ResultForm.tsx
+++ b/src/pages/ViewPublicationPage/ResultForm.tsx
@ -30,17 +30,13 @@ export const ResultForm = ({
  );

  
-  console.log(currentQuestion)
-  console.log(resultQuestion
-    )
-  console.log(questions)
-  console.log(quiz?.config.resultInfo.when)


  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
  };
+  if (resultQuestion === undefined) return <></>

  return (
    <Box
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@ -74,6 +74,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
      className="quiz-preview-draghandle"
      sx={{
        height: "100vh",
+        width: "100vw",
        background:
          quiz.config.startpageType === "expanded"
            ? quiz.config.startpage.position === "left"
@ -82,6 +83,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
              ? "linear-gradient(180deg,transparent,#272626)"
              : "linear-gradient(270deg,#272626,transparent)"
            : "",
+
        color: quiz.config.startpageType === "expanded" ? "white" : "black",
      }}
    >
@ -142,6 +144,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                  fontStyle: "normal",
                  fontStretch: "normal",
                  lineHeight: "1.2",
+                  overflowWrap: "break-word",
+                  width: "100%",
+                  textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
                }}
              >
                {quiz.name}
@ -150,6 +155,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                sx={{
                  fontSize: "16px",
                  m: "16px 0",
+                  overflowWrap: "break-word",
+                  width: "100%",
+                  textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
                }}
              >
                {quiz.config.startpage.description}
@ -172,7 +180,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
            <Box
              sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
            >
-              <Box>
+              <Box sx={{ maxWidth: "300px" }}>
                {quiz.config.info.clickable ? (
                  isMobileDevice ? (
                    <Link href={`tel:${quiz.config.info.phonenumber}`}>
@ -192,7 +200,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                    {quiz.config.info.phonenumber}
                  </Typography>
                )}
-                <Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
+                <Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
+                  {quiz.config.info.law}
+                </Typography>
              </Box>

              <Box
@ -288,7 +298,7 @@ function QuizPreviewLayoutByType({
              width: "40%",
              position: "relative",
              padding: "16px",
-              zIndex: 2,
+              zIndex: 3,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
@ -301,11 +311,11 @@ function QuizPreviewLayoutByType({
          <Box
            sx={{
              position: "absolute",
+              zIndex: -1,
              left: 0,
              top: 0,
              height: "100%",
              width: "100%",
-              zIndex: 1,
              overflow: "hidden",
            }}
          >
@ -329,7 +339,16 @@ function QuizPreviewLayoutByType({
          }}
        >
          {quizHeaderBlock}
-          {backgroundBlock && <Box>{backgroundBlock}</Box>}
+          {backgroundBlock && (
+            <Box
+              sx={{
+                width: "60%",
+                overflow: "hidden",
+              }}
+            >
+              {backgroundBlock}
+            </Box>
+          )}
          {quizMainBlock}
        </Box>
      );
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@ -52,9 +52,11 @@ export const ViewPage = () => {
    questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
  ).sort((previousItem, item) => previousItem.page - item.page);

-  console.log("visualStartPage ", visualStartPage);
+
+  console.log(questions)
+
  if (visualStartPage === undefined) return <></>;
-  if (questions.length === 0) return <ApologyPage message="Нет созданных вопросов"/>
+  if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return <ApologyPage message="Нет созданных вопросов"/>
  return (
    <Box>
      {!visualStartPage ? (
--- a/src/pages/ViewPublicationPage/questions/Varimg.tsx
+++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx
@ -31,8 +31,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
    ({ id }) => answer === id
  );

-  console.log(currentQuestion)
-
  return (
    <Box>
      <Typography variant="h5">{currentQuestion.title}</Typography>
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -1,5 +1,5 @@
 import { quizApi } from "@api/quiz";
-import { devlog } from "@frontend/kitui";
+import { LogoutButton } from "@ui_kit/LogoutButton";
 import BackArrowIcon from "@icons/BackArrowIcon";
 import { Burger } from "@icons/Burger";
 import EyeIcon from "@icons/EyeIcon";
@ -16,7 +16,7 @@ import {
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import {decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz} from "@root/quizes/actions";
+import { decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import CustomAvatar from "@ui_kit/Header/Avatar";
@ -30,9 +30,10 @@ import { enqueueSnackbar } from "notistack";
 import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
+import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
 import { cleanQuestions, setQuestions } from "@root/questions/actions";
-import { updateOpenBranchingPanel } from "@root/uiTools/actions";
+import { updateOpenBranchingPanel, updateCanCreatePublic, updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
 import { BranchingPanel } from "../Questions/BranchingPanel";
 import { useQuestionsStore } from "@root/questions/store";
 import { useQuizes } from "@root/quizes/hooks";
@ -40,10 +41,16 @@ import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";

 import Logotip from "../Landing/images/icons/QuizLogo";
+import { clearUserData } from "@root/user";
+import { clearAuthToken } from "@frontend/kitui";
+import { logout } from "@api/auth";
+import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";

 export default function EditPage() {
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
+  const { questions } = useQuestionsStore();

  useEffect(() => {
    const getData = async () => {
@ -56,7 +63,7 @@ export default function EditPage() {
    getData();
  }, []);

-  const { openBranchingPanel } = useUiTools();
+  const { openBranchingPanel, whyCantCreatePublic, canCreatePublic } = useUiTools();
  const theme = useTheme();
  const navigate = useNavigate();
  const currentStep = useQuizStore((state) => state.currentStep);
@ -74,11 +81,61 @@ export default function EditPage() {
    () => () => {
      resetEditConfig();
      cleanQuestions();
+      updateModalInfoWhyCantCreate(false)
    },
    []
  );
-  console.log(currentStep)
-  console.log(quizConfig)
+
+
+
+  const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
+
+    const problems: any = {}
+
+    questions.forEach((question) => {
+      //Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен
+      if (question.type === null
+        || question.type === "result"
+        || question.content.rule.parentId.length === 0) return
+
+      //если есть дети, но нет дефолта - логическая ошибка. Так нельзя
+      if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) {
+        problems[question.content.id] = {
+          name: question.title,
+          problems: ["Не выбран дефолтный вопрос"]
+        }
+      }
+
+    })
+
+    useUiTools.setState({ whyCantCreatePublic: problems })
+    if (Object.keys(problems).length > 0) {
+      updateQuiz(quiz?.id, (state) => { state.status = "stop" })
+      updateCanCreatePublic(false)
+    } else {
+      updateCanCreatePublic(true)
+    }
+
+
+  }, 600);
+
+
+  useEffect(() => {
+    updateQuestionHint(questions)
+  }, [questions]);
+  
+
+  async function handleLogoutClick() {
+    const [, logoutError] = await logout();
+
+    if (logoutError) {
+      return enqueueSnackbar(logoutError);
+    }
+
+    clearAuthToken();
+    clearUserData();
+    navigate("/");
+  }

  if (!quizConfig) return <></>
  return (
@ -99,7 +156,7 @@ export default function EditPage() {
        }}
      >
        <Link to="/" style={{ display: "flex" }}>
-          {isMobile ? <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} /> : <PenaLogo width={124} />}
+          {isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
        </Link>
        <Box
          sx={{
@ -155,14 +212,16 @@ export default function EditPage() {
                style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
              />
            ) : (
-              <CustomAvatar
-                sx={{
-                  ml: "11px",
-                  backgroundColor: theme.palette.orange.main,
-                  height: "36px",
-                  width: "36px",
-                }}
-              />
+              <Box>
+                <CustomAvatar
+                  sx={{
+                    ml: "11px",
+                    backgroundColor: theme.palette.orange.main,
+                    height: "36px",
+                    width: "36px",
+                  }}
+                />
+              </Box>
            )}
          </Box>
        ) : (
@ -196,6 +255,7 @@ export default function EditPage() {
                  width: "36px",
                }}
              />
+              <LogoutButton onClick={handleLogoutClick} />
            </Box>
          </>
        )}
@ -230,137 +290,144 @@ export default function EditPage() {
            </>
          )}
        </Box>
-          <Box
-            sx={{
-              position: "absolute",
-              left: 0,
-              bottom: 0,
-              width: "100%",
-              padding: isMobile ? "20px 16px" : "20px 40px 20px 250px",
-              display: "flex",
-              justifyContent: "flex-start",
-              alignItems: "center",
-              gap: "15px",
-              background: "#FFF",
-            }}
-          >
-            {[1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form" && (
-              <Box
+
+        <Box
+          sx={{
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            padding: isMobile ? "20px 16px" : "20px 40px 20px 250px",
+            display: "flex",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            gap: "15px",
+            background: "#FFF",
+          }}
+        >
+          {[1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form" && (
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "15px",
+                padding: "18px",
+                background: "#fff",
+                borderRadius: "12px",
+                boxShadow: "0px 10px 30px #e7e7e7",
+              }}
+            >
+              <Switch
+                checked={openBranchingPanel}
+                onChange={(e) => updateOpenBranchingPanel(e.target.checked)}
                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "15px",
-                  padding: "18px",
-                  background: "#fff",
-                  borderRadius: "12px",
-                  boxShadow: "0px 10px 30px #e7e7e7",
+                  width: 50,
+                  height: 30,
+                  padding: 0,
+                  "& .MuiSwitch-switchBase": {
+                    padding: 0,
+                    margin: "2px",
+                    transitionDuration: "300ms",
+                    "&.Mui-checked": {
+                      transform: "translateX(20px)",
+                      color: theme.palette.brightPurple.main,
+                      "& + .MuiSwitch-track": {
+                        backgroundColor: "#E8DCF9",
+                        opacity: 1,
+                        border: 0,
+                      },
+                      "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+                    },
+                    "&.Mui-disabled .MuiSwitch-thumb": {
+                      color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600],
+                    },
+                    "&.Mui-disabled + .MuiSwitch-track": {
+                      opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+                    },
+                  },
+                  "& .MuiSwitch-thumb": {
+                    boxSizing: "border-box",
+                    width: 25,
+                    height: 25,
+                  },
+                  "& .MuiSwitch-track": {
+                    borderRadius: 13,
+                    backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+                    opacity: 1,
+                    transition: theme.transitions.create(["background-color"], {
+                      duration: 500,
+                    }),
+                  },
+                }}
+              />
+              <Box>
+                <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>Логика ветвления</Typography>
+              </Box>
+            </Box>
+          )}
+
+          {!canCreatePublic && quiz.config.type !== "form" ?
+            <Button
+              variant="contained"
+              // disabled
+              sx={{
+                fontSize: "14px",
+                lineHeight: "18px",
+                height: "34px",
+                minWidth: "130px",
+              }}
+              onClick={() => Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)}
+            >
+              Тестовый просмотр
+            </Button>
+           : 
+            <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
+              <Button
+                variant="contained"
+                sx={{
+                  fontSize: "14px",
+                  lineHeight: "18px",
+                  height: "34px",
+                  minWidth: "130px",
                }}
              >
-                <Switch
-                  checked={openBranchingPanel}
-                  onChange={(e) => updateOpenBranchingPanel(e.target.checked)}
-                  sx={{
-                    width: 50,
-                    height: 30,
-                    padding: 0,
-                    "& .MuiSwitch-switchBase": {
-                      padding: 0,
-                      margin: "2px",
-                      transitionDuration: "300ms",
-                      "&.Mui-checked": {
-                        transform: "translateX(20px)",
-                        color: theme.palette.brightPurple.main,
-                        "& + .MuiSwitch-track": {
-                          backgroundColor: "#E8DCF9",
-                          opacity: 1,
-                          border: 0,
-                        },
-                        "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
-                      },
-                      "&.Mui-disabled .MuiSwitch-thumb": {
-                        color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600],
-                      },
-                      "&.Mui-disabled + .MuiSwitch-track": {
-                        opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
-                      },
-                    },
-                    "& .MuiSwitch-thumb": {
-                      boxSizing: "border-box",
-                      width: 25,
-                      height: 25,
-                    },
-                    "& .MuiSwitch-track": {
-                      borderRadius: 13,
-                      backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
-                      opacity: 1,
-                      transition: theme.transitions.create(["background-color"], {
-                        duration: 500,
-                      }),
-                    },
-                  }}
-                />
-                <Box>
-                  <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>Логика ветвления</Typography>
-                </Box>
-              </Box>
-            )}
-              {disableTest ? (
-                  <Button
-                      variant="contained"
-                      disabled
-                      sx={{
-                          fontSize: "14px",
-                          lineHeight: "18px",
-                          height: "34px",
-                          minWidth: "130px",
-                      }}
-                  >
-                      Тестовый просмотр
-                  </Button>
-              ) : (
-                  <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
-                      <Button
-                          variant="contained"
-                          sx={{
-                              fontSize: "14px",
-                              lineHeight: "18px",
-                              height: "34px",
-                              minWidth: "130px",
-                          }}
-                      >
-                          Тестовый просмотр
-                      </Button>
-                  </a>
-              )}
+                Тестовый просмотр
+              </Button>
+            </a>
+          }

-              <Button
-                  variant="outlined"
-                  sx={{
-                      fontSize: "14px",
-                      lineHeight: "18px",
-                      height: "34px",
-                      border: `1px solid ${theme.palette.brightPurple.main}`,
-                      backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
-                      color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
-                  }}
-                  onClick={() => {
-                      updateQuiz(
-                          quiz?.id, (state) => {
-                              state.status = quiz?.status === "start" ? "stop" : "start"
-                          }
-                      )
-                  }}
-              >{quiz?.status === "start" ? "Стоп" : "Старт"}</Button>
-
-              {quiz?.status === "start" && <Box
-              component={Link}
-              sx={{
-                color: "#7e2aea",
-                fontSize: "14px"
-              }}
-              target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}</Box> }
-          </Box>
+          <Button
+            variant="outlined"
+            sx={{
+              fontSize: "14px",
+              lineHeight: "18px",
+              height: "34px",
+              border: `1px solid ${theme.palette.brightPurple.main}`,
+              backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
+              color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
+            }}
+            onClick={
+              Object.keys(whyCantCreatePublic).length === 0 ?
+                () => updateQuiz(quiz?.id, (state) => {
+                  state.status = quiz?.status === "start" ? "stop" : "start";
+                })
+               :
+                () => updateModalInfoWhyCantCreate(true)
+           }
+          >
+          {quiz?.status === "start" ? "Стоп" : "Старт"}
+        </Button>
+        {quiz?.status === "start" && <Box
+          component={Link}
+          sx={{
+            color: "#7e2aea",
+            fontSize: "14px"
+          }}
+          target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}
+        </Box>}
      </Box>
+    </Box >
+      <ModalInfoWhyCantCreate />
    </>
  );
 }
--- a/src/pages/startPage/ModalInfoWhyCantCreate.tsx
+++ b/src/pages/startPage/ModalInfoWhyCantCreate.tsx
@ -0,0 +1,49 @@
+import { Box, Modal, Typography, Divider } from "@mui/material"
+
+import { useUiTools } from "@root/uiTools/store";
+import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
+import { useLayoutEffect } from "react";
+
+export const ModalInfoWhyCantCreate = () => {
+
+    const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
+    
+    return (
+        <Modal
+            open={openModalInfoWhyCantCreate}
+            onClose={() => updateModalInfoWhyCantCreate(false)}
+        >
+            <Box sx={{
+                position: 'absolute' as 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                maxWidth: '620px',
+                width: '100%',
+                bgcolor: 'background.paper',
+                borderRadius: '12px',
+
+                boxShadow: 24,
+                p: "25px",
+                minHeight: "60vh",
+                maxHeight: "90vh",
+                overflow: "auto"
+            }}
+            >
+                {
+                    Object.values(whyCantCreatePublic).map((data) => {
+                        return (
+                            <Box>
+                                <Typography color="#7e2aea">У вопроса "{data.name}"</Typography>
+                                {
+                                    data.problems.map((problem) => <Typography p="5px 0">{problem}</Typography>)
+                                }
+                                <Divider/>
+                            </Box>
+                        )
+                    })
+                }
+            </Box>
+        </Modal>
+    )
+}
--- a/src/pages/startPage/Restore.tsx
+++ b/src/pages/startPage/Restore.tsx
@ -41,7 +41,6 @@ export const Restore: FC = () => {
    initialValues,
    validationSchema,
    onSubmit: (values) => {
-      console.log(values);
    },
  });

--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
--- a/src/stores/questions/actions.ts
+++ b/src/stores/questions/actions.ts
@ -297,7 +297,6 @@ export const uploadQuestionImage = async (
    if (!question || !quizQid) return;

    try {
-        console.log(question.quizId)
        const response = await quizApi.addImages(question.quizId, blob);

        const values = Object.values(response);
@ -387,16 +386,13 @@ export const createTypedQuestion = async (
 });

 export const deleteQuestion = async (questionId: string) => requestQueue.enqueue(async () => {
-    console.log("Я получил запрос на удаление. ИД - ", questionId)

    const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
-    console.log("delete question ", question)
    if (!question) return;



    if (question.type === null) {
-        console.log("removeQuestion")
        removeQuestion(questionId);
        return;
    }
--- a/src/stores/quizes/actions.ts
+++ b/src/stores/quizes/actions.ts
@ -179,7 +179,6 @@ export const deleteQuiz = async (quizId: string) => requestQueue.enqueue(async (
 export const updateRootContentId = (quizId: string, id:string) => updateQuiz(
    quizId,
    quiz => {
-        console.log("Я изменение статуса корня проекта дерева, меняю на ", id)
        quiz.config.haveRoot = id
    },
 );
--- a/src/stores/uiTools/actions.ts
+++ b/src/stores/uiTools/actions.ts
@ -32,3 +32,8 @@ export const updateEditSomeQuestion = (contentId?: string) => {


 export const updateOpenedModalSettingsId = (id?: string) => useUiTools.setState({ openedModalSettingsId: id ? id : null });
+
+
+export const updateCanCreatePublic = (can: boolean) => useUiTools.setState({ canCreatePublic: can });
+
+export const updateModalInfoWhyCantCreate = (can: boolean) => useUiTools.setState({ openModalInfoWhyCantCreate: can });
--- a/src/stores/uiTools/store.ts
+++ b/src/stores/uiTools/store.ts
@ -8,7 +8,15 @@ export type UiTools = {
    openBranchingPanel: boolean;
    desireToOpenABranchingModal: string | null;
    editSomeQuestion: string | null;
+    canCreatePublic: boolean;
+    whyCantCreatePublic: Record<string, WhyCantCreatePublic>//ид вопроса и список претензий к нему
+    openModalInfoWhyCantCreate: boolean;
 };
+export type WhyCantCreatePublic = {
+    name: string;
+    problems: string[]
+
+}

 const initialState: UiTools = {
    openedModalSettingsId: null as null,
@ -16,6 +24,9 @@ const initialState: UiTools = {
    openBranchingPanel: false,
    desireToOpenABranchingModal: null as null,
    editSomeQuestion: null as null,
+    canCreatePublic: false,
+    whyCantCreatePublic: {},
+    openModalInfoWhyCantCreate: false
 };

 export const useUiTools = create<UiTools>()(
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@ -1,4 +1,4 @@
-import { User } from "@frontend/kitui";
+import { User, UserAccount } from "@frontend/kitui";
 import { produce } from "immer";
 import { create } from "zustand";
 import { createJSONStorage, devtools, persist } from "zustand/middleware";
@ -6,12 +6,13 @@ import { createJSONStorage, devtools, persist } from "zustand/middleware";
 interface UserStore {
    userId: string | null;
    user: User | null;
-    //   userAccount: UserAccount | null;
+    userAccount: UserAccount | null;
 }

 const initialState: UserStore = {
    userId: null,
    user: null,
+    userAccount: null,
 };

 export const useUserStore = create<UserStore>()(
@ -19,12 +20,11 @@ export const useUserStore = create<UserStore>()(
        devtools((set, get) => initialState, {
            name: "User",
            enabled: process.env.NODE_ENV === "development",
-            trace: true,
+            trace: process.env.NODE_ENV === "development",
        }),
        {
            version: 2,
            name: "user",
-            storage: createJSONStorage(() => localStorage),
            partialize: (state) => ({
                userId: state.userId,
                user: state.user,
@ -46,3 +46,5 @@ export const setUser = (user: User) =>
    );

 export const clearUserData = () => useUserStore.setState({ ...initialState });
+
+export const setUserAccount = (userAccount: UserAccount) => useUserStore.setState({ userAccount });
--- a/src/ui_kit/CustomTextField.tsx
+++ b/src/ui_kit/CustomTextField.tsx
@ -1,7 +1,7 @@
-import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
-
+import React, { useState } from "react";
+import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material";
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
-import type { InputProps } from "@mui/material";
+import type { InputProps, SxProps, Theme } from "@mui/material";

 interface CustomTextFieldProps {
  placeholder: string;
@ -11,6 +11,7 @@ interface CustomTextFieldProps {
  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
  text?: string;
+  maxLength?: number;
  sx?: SxProps<Theme>;
  InputProps?: Partial<InputProps>;
 }
@ -18,28 +19,54 @@ interface CustomTextFieldProps {
 export default function CustomTextField({
  placeholder,
  value,
-  text,
-  sx,
-  error,
  onChange,
  onKeyDown,
  onBlur,
+  text,
+  sx,
+  error,
  InputProps,
+  maxLength = 200,
 }: CustomTextFieldProps) {
  const theme = useTheme();

+  const [inputValue, setInputValue] = useState(value || text || "");
+  const [isInputActive, setIsInputActive] = useState(false);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    setInputValue(inputValue);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  const handleInputFocus = () => {
+    setIsInputActive(true);
+  };
+
+  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsInputActive(false);
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
  return (
    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
      <TextField
        defaultValue={text}
        fullWidth
-        value={value}
+        value={inputValue}
        placeholder={placeholder}
+        onChange={handleInputChange}
        error={!!error}
        label={error}
-        onChange={onChange}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
        onKeyDown={onKeyDown}
-        onBlur={onBlur}
        sx={{
          "& .MuiInputBase-root": {
            backgroundColor: theme.palette.background.default,
@ -50,19 +77,36 @@ export default function CustomTextField({
            fontSize: "13.5px",
            marginTop: "3px",
          },
-          ...sx,
        }}
        InputProps={InputProps}
        inputProps={{
+          maxLength: maxLength,
          sx: {
            borderRadius: "10px",
            fontSize: "18px",
            lineHeight: "21px",
            py: 0,
          },
+          ...sx,
        }}
        data-cy="textfield"
      />
+      {isInputActive && inputValue.length >= maxLength - 7 && (
+        <Box
+          sx={{
+            display: "flex",
+            marginTop: "5px",
+            marginLeft: "auto",
+            position: "absolute",
+            bottom: "-25px",
+            right: "0",
+          }}
+        >
+          <Typography fontSize="14px">{inputValue.length}</Typography>
+          <span>/</span>
+          <Typography fontSize="14px">{maxLength}</Typography>
+        </Box>
+      )}
    </FormControl>
  );
 }
--- a/src/ui_kit/Modal/CropModal.tsx
+++ b/src/ui_kit/Modal/CropModal.tsx
@ -18,6 +18,7 @@ import { FC, useEffect, useMemo, useRef, useState } from "react";
 import ReactCrop, { PercentCrop, PixelCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 import { getCroppedImageBlob, getDarkenedAndResizedImageBlob, getRotatedImageBlob } from "./utils/imageManipulation";
+import { isImageBlobAGifFile } from "../../utils/isImageBlobAGifFile";


 const styleSlider: SxProps<Theme> = {
@ -324,6 +325,9 @@ export function useCropModalState(initialOpenState = false) {
            image = await response.blob();
        }

+        const isGif = await isImageBlobAGifFile(image);
+        if (isGif) return;
+
        setCropModalImageBlob(image);
        setOriginalImageUrl(originalImageUrl);
        setOpened(true);
--- a/src/ui_kit/ProblemIcon.tsx
+++ b/src/ui_kit/ProblemIcon.tsx
@ -0,0 +1,23 @@
+
+import Info from "@icons/Info";
+
+interface Props {
+  blink: boolean;
+  onClick: (a: boolean) => void;
+}
+export const ProblemIcon = ({ blink, onClick }: Props) => {
+
+  return (
+    <Info
+      sx={{
+        "MuiIconButton-root": {
+
+          boxShadow: "0 0 10px 10px red"
+        }
+      }}
+      className={blink ? "blink" : ""}
+      onClick={onClick}
+
+    />
+  )
+}
--- a/src/ui_kit/switchStepPages.tsx
+++ b/src/ui_kit/switchStepPages.tsx
@ -24,6 +24,7 @@ export default function SwitchStepPages({
    quizStartPageType,
    quizResults,
 }: Props) {
+    console.log("Выбор текущей странички")
    switch (activeStep) {
        case 0: {
            if (!quizType) return <StepOne />;
--- a/src/utils/isImageBlobAGifFile.ts
+++ b/src/utils/isImageBlobAGifFile.ts
@ -0,0 +1,15 @@
+const gifSignature = [0x47, 0x49, 0x46, 0x38];
+
+export async function isImageBlobAGifFile(blob: Blob) {
+    const arrayBuffer = await blob.arrayBuffer();
+    const uint8Array = new Uint8Array(arrayBuffer);
+
+    if (
+        uint8Array[0] === gifSignature[0]
+        && uint8Array[1] === gifSignature[1]
+        && uint8Array[2] === gifSignature[2]
+        && uint8Array[3] === gifSignature[3]
+    ) return true;
+
+    return false;
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1407,10 +1407,10 @@
  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz"
  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==

-"@frontend/kitui@^1.0.54":
-  version "1.0.54"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.54.tgz#0235d5a8effb9b92351471c3c7775f28cb2839f6"
-  integrity sha1-AjXVqO/7m5I1FHHDx3dfKMsoOfY=
+"@frontend/kitui@^1.0.55":
+  version "1.0.55"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.55.tgz#6e02f80b2c13828142ffeacaf9704e50e54324d0"
+  integrity sha1-bgL4CywTgoFC/+rK+XBOUOVDJNA=
  dependencies:
    immer "^10.0.2"
    reconnecting-eventsource "^1.6.2"