Merge branch 'dev' into 'main'

Dev

See merge request frontend/squiz!109

src/api/question.ts

@@ -43,7 +43,6 @@ async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
     body: { ...defaultGetQuestionListBody, ...body },
     method: "POST",
   });
-  console.log(response.items);
   const clearArrayFromEmptySpaceBlaBlaValue = response.items?.map(
     (question) => {
       let data = question;

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -190,7 +190,10 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
             rows={8}
             placeholder="Дополнительный текст формы"
             sxForm={{
-              height: "287px",
+              height: "197px",
+            }}
+            sx={{
+              height: "197px",
             }}
             maxLength={300}
           />

src/pages/ContactFormPage/NewField/WindowNewField.tsx

@@ -122,6 +122,7 @@ export default function WindowNewField({ drawerState, closeDrawer }: Props) {
           padding: "20px",
           display: "flex",
           gap: "10px",
+          flexWrap: "wrap",
         }}
       >
         {buttonSetting.flatMap((e, i) =>

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -212,7 +212,7 @@ function CsComponent({
         cy?.layout(layoutOptions).run();
         cy?.center(es);
       } else {
-        enqueueSnackbar("Добавляемый вопрос не найден");
+        enqueueSnackbar("Перетащите на плюсик вопрос");
       }
     } else {
       enqueueSnackbar("Quiz не найден");
@@ -270,7 +270,6 @@ function CsComponent({
 
     if (!noChild) {
       //детей больше 1
-      console.log("детей  ", noChild, "  открываем модалку ветвления");
       //- предупреждаем стор вопросов об открытии модалки ветвления
       updateOpenedModalSettingsId(targetQuestion.content.id);
     }
@@ -294,19 +293,12 @@ function CsComponent({
   //Отработка первичного рендера странички графика
   const firstRender = useRef(true);
   useEffect(() => {
-    console.log("____________ПЕРВЧИНЫЙ РЕНДЕР____________");
-    console.log("______someWorkBackend______", someWorkBackend);
-
     if (!someWorkBackend && firstRender.current) {
-      console.log("цс первично отрабатывает");
       document
         .querySelector("#root")
         ?.addEventListener("mouseup", cleardragQuestionContentId);
       const cy = cyRef.current;
 
-      console.log("СПИСОК ЭЛЕМЕНТОВ ЦИТОСКЕЙПА В ПЕРВЧИНЫЙ РЕНДЕР");
-      console.log(cy?.elements());
-
       const eles = cy?.add(
         storeToNodes(
           questions.filter(
@@ -324,7 +316,6 @@ function CsComponent({
     }
 
     return () => {
-      console.log("разрендер");
       document
         .querySelector("#root")
         ?.removeEventListener("mouseup", cleardragQuestionContentId);

src/pages/Questions/BranchingMap/FirstNodeField.tsx

@@ -24,7 +24,6 @@ export const FirstNodeField = ({
   const quiz = useCurrentQuiz();
 
   useLayoutEffect(() => {
-    console.log("компонент с плюсом");
     updateOpenedModalSettingsId();
     updateRootContentId(quiz.id, "");
     clearRuleForAll();

src/pages/Questions/BranchingMap/hooks/usePopper.ts

@@ -208,7 +208,6 @@ export const usePopper = ({
         });
         let gearsPopper: Popper | null = null;
         if (node.data().root !== true) {
-          console.log(node.data("parentType"));
           const parentQuestion = getQuestionByContentId(
             node.data("parentType"),
           );
@@ -240,16 +239,12 @@ export const usePopper = ({
                 updateOpenedModalSettingsId(item.id());
               });
 
-              console.log("собираюсь анализировать папашу");
-              console.log("Тип папаши ", parentQuestion.type);
               if (
                 parentQuestion?.type === "date" ||
                 parentQuestion?.type === "text" ||
                 parentQuestion?.type === "number" ||
                 parentQuestion?.type === "page"
               ) {
-                console.log("Шестерня должна быть невидимая");
-                console.log("Тип папаши ", parentQuestion.type);
                 gearElement.classList.add("popper-gear-none");
               }
 

src/pages/Questions/BranchingMap/hooks/useRemoveNode.ts

@@ -173,7 +173,6 @@ export const useRemoveNode = ({
           quiz &&
           cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0
         ) {
-          console.log(parentQuestionContentId);
           //createFrontResult(quiz.backendId, parentQuestionContentId);
         }
         clearDataAfterRemoveNode({

src/pages/Questions/BranchingMap/index.tsx

@@ -8,7 +8,6 @@ import { useUiTools } from "@root/uiTools/store";
 
 export const BranchingMap = () => {
   const quiz = useCurrentQuiz();
-  console.log("рендер странички ветвления");
   const { dragQuestionContentId } = useUiTools();
   const [modalQuestionParentContentId, setModalQuestionParentContentId] =
     useState<string>("");

src/pages/Questions/ButtonsOptions.tsx

@@ -44,9 +44,17 @@ interface Props {
   SSHC: (data: string) => void;
   question: AnyTypedQuizQuestion;
   sx?: SxProps;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
+export default function ButtonsOptions({
+  SSHC,
+  switchState,
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
@@ -55,6 +63,7 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
   const [openDelete, setOpenDelete] = useState<boolean>(false);
 
   const openedModal = () => {
+    setOpenBranchingPage(true);
     updateDesireToOpenABranchingModal(question.content.id);
   };
 
@@ -95,6 +104,7 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
       title: "Ветвление",
       value: "branching",
       myFunc: (question) => {
+        setOpenBranchingPage(true);
         updateDesireToOpenABranchingModal(question.content.id);
       },
     },

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -45,13 +45,18 @@ interface Props {
   switchState: string;
   SSHC: (data: string) => void;
   question: QuizQuestionVariant | QuizQuestionVarImg;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
 export default function ButtonsOptionsAndPict({
   SSHC,
   switchState,
   question,
+  openBranchingPage,
+  setOpenBranchingPage,
 }: Props) {
+  console.log(setOpenBranchingPage);
   const [buttonHover, setButtonHover] = useState<string>("");
   const [openedReallyChangingModal, setOpenedReallyChangingModal] =
     useState<boolean>(false);
@@ -205,6 +210,7 @@ export default function ButtonsOptionsAndPict({
             onMouseEnter={() => setButtonHover("branching")}
             onMouseLeave={() => setButtonHover("")}
             onClick={() => {
+              setOpenBranchingPage(true);
               updateDesireToOpenABranchingModal(question.content.id);
             }}
             sx={{

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -14,9 +14,15 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 interface Props {
   question: QuizQuestionDate;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function DataOptions({ question }: Props) {
+export default function DataOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const [switchState, setSwitchState] = useState("setting");
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
@@ -71,6 +77,8 @@ export default function DataOptions({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchData switchState={switchState} question={question} />
     </>

src/pages/Questions/DraggableList/DraggableListItem.tsx

@@ -15,9 +15,17 @@ type Props = {
   question: AnyTypedQuizQuestion | UntypedQuizQuestion;
   isDragging: boolean;
   index: number;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 };
 
-function DraggableListItem({ question, isDragging, index }: Props) {
+function DraggableListItem({
+  question,
+  isDragging,
+  index,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const theme = useTheme();
   const { editSomeQuestion } = useUiTools();
 
@@ -87,6 +95,8 @@ function DraggableListItem({ question, isDragging, index }: Props) {
           ) : (
             <Box sx={{ width: "100%", position: "relative" }}>
               <QuestionsPageCard
+                openBranchingPage={openBranchingPage}
+                setOpenBranchingPage={setOpenBranchingPage}
                 question={question}
                 draggableProps={provided.dragHandleProps}
                 isDragging={isDragging}

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -57,6 +57,8 @@ interface Props {
   draggableProps: DraggableProvidedDragHandleProps | null | undefined;
   isDragging: boolean;
   index: number;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
 export default function QuestionsPageCard({
@@ -64,6 +66,8 @@ export default function QuestionsPageCard({
   draggableProps,
   isDragging,
   index,
+  openBranchingPage,
+  setOpenBranchingPage,
 }: Props) {
   const maxLengthTextField = 225;
 
@@ -292,6 +296,7 @@ export default function QuestionsPageCard({
                   onClick={() => {
                     if (question.type === null) {
                       deleteQuestion(question.id);
+                      return;
                     }
                     if (question.content.rule.parentId.length !== 0) {
                       setOpenDelete(true);
@@ -402,7 +407,11 @@ export default function QuestionsPageCard({
             {question.type === null ? (
               <TypeQuestions question={question} />
             ) : (
-              <SwitchQuestionsPage question={question} />
+              <SwitchQuestionsPage
+                question={question}
+                openBranchingPage={openBranchingPage}
+                setOpenBranchingPage={setOpenBranchingPage}
+              />
             )}
           </Box>
         )}

src/pages/Questions/DraggableList/index.tsx

@@ -4,8 +4,14 @@ import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import DraggableListItem from "./DraggableListItem";
 import { useQuestionsStore } from "@root/questions/store";
-
+interface Props {
-export const DraggableList = () => {
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
+}
+export const DraggableList = ({
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) => {
   const { questions } = useQuestionsStore();
   const filteredQuestions = questions.filter(
     (question) => question.type !== "result",
@@ -21,6 +27,8 @@ export const DraggableList = () => {
           <Box ref={provided.innerRef} {...provided.droppableProps}>
             {filteredQuestions.map((question, index) => (
               <DraggableListItem
+                openBranchingPage={openBranchingPage}
+                setOpenBranchingPage={setOpenBranchingPage}
                 key={question.id}
                 question={question}
                 isDragging={snapshot.isDraggingOver}

src/pages/Questions/DropDown/DropDown.tsx

@@ -10,9 +10,15 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
 interface Props {
   question: QuizQuestionSelect;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function DropDown({ question }: Props) {
+export default function DropDown({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const onClickAddAnAnswer = useAddAnswer();
   const [switchState, setSwitchState] = useState("setting");
   const theme = useTheme();
@@ -92,6 +98,8 @@ export default function DropDown({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchDropDown switchState={switchState} question={question} />
     </>

src/pages/Questions/Emoji/Emoji.tsx

@@ -21,9 +21,15 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
 
 interface Props {
   question: QuizQuestionEmoji;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function Emoji({ question }: Props) {
+export default function Emoji({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const [switchState, setSwitchState] = useState<string>("setting");
   const onClickAddAnAnswer = useAddAnswer();
   const [open, setOpen] = useState<boolean>(false);
@@ -237,6 +243,8 @@ export default function Emoji({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchEmoji switchState={switchState} question={question} />
     </>

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -32,9 +32,14 @@ import SwitchOptionsAndPict from "./switchOptionsAndPict";
 
 interface Props {
   question: QuizQuestionVarImg;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function OptionsAndPicture({ question }: Props) {
+export default function OptionsAndPicture({
+  question,
+  setOpenBranchingPage,
+}: Props) {
   const [switchState, setSwitchState] = useState("setting");
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
     null,
@@ -390,6 +395,7 @@ export default function OptionsAndPicture({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchOptionsAndPict switchState={switchState} question={question} />
     </>

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -18,9 +18,15 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
 
 interface Props {
   question: QuizQuestionImages;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function OptionsPicture({ question }: Props) {
+export default function OptionsPicture({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const theme = useTheme();
   const onClickAddAnAnswer = useAddAnswer();
   const quizQid = useCurrentQuiz()?.qid;
@@ -187,6 +193,8 @@ export default function OptionsPicture({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchAnswerOptionsPict switchState={switchState} question={question} />
     </>

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -17,9 +17,15 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 interface Props {
   question: QuizQuestionText;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function OwnTextField({ question }: Props) {
+export default function OwnTextField({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const [switchState, setSwitchState] = useState("setting");
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
@@ -98,6 +104,8 @@ export default function OwnTextField({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchTextField switchState={switchState} question={question} />
     </>

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -31,6 +31,8 @@ import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
 type Props = {
   disableInput?: boolean;
   question: QuizQuestionPage;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 };
 
 export default function PageOptions({ disableInput, question }: Props) {

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -41,7 +41,14 @@ export const QuestionSwitchWindowTool = ({
       }}
     >
       <Box sx={{ flexBasis: "796px" }}>
-        {openBranchingPage ? <BranchingMap /> : <DraggableList />}
+        {openBranchingPage ? (
+          <BranchingMap />
+        ) : (
+          <DraggableList
+            openBranchingPage={openBranchingPage}
+            setOpenBranchingPage={openBranchingPageHC}
+          />
+        )}
       </Box>
       {openBranchingPage && (
         <SwitchBranchingPanel

src/pages/Questions/RatingOptions/RatingOptions.tsx

@@ -22,6 +22,8 @@ import { updateQuestion } from "@root/questions/actions";
 
 interface Props {
   question: QuizQuestionRating;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
 export type ButtonRatingFrom = {
@@ -29,7 +31,11 @@ export type ButtonRatingFrom = {
   icon: JSX.Element;
 };
 
-export default function RatingOptions({ question }: Props) {
+export default function RatingOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const [switchState, setSwitchState] = useState("setting");
   const [negativeText, setNegativeText] = useState<string>("");
   const [positiveText, setPositiveText] = useState<string>("");
@@ -270,6 +276,8 @@ export default function RatingOptions({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchRating switchState={switchState} question={question} />
     </>

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -13,9 +13,15 @@ import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
 
 interface Props {
   question: QuizQuestionNumber;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function SliderOptions({ question }: Props) {
+export default function SliderOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(980));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
@@ -274,6 +280,8 @@ export default function SliderOptions({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchSlider switchState={switchState} question={question} />
     </>

src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx

@@ -39,6 +39,13 @@ export const QuestionsList = ({ setOpenBranchingPage = () => {} }: Props) => {
     (question) => question.type !== "result",
   );
 
+  useEffect(() => {
+    if (desireToOpenABranchingModal) {
+      const element = document.getElementById(desireToOpenABranchingModal);
+      if (element !== null) element.scrollIntoView();
+    }
+  }, [desireToOpenABranchingModal]);
+
   return (
     <Box sx={{ padding: "15px" }}>
       <Box
@@ -62,54 +69,57 @@ export const QuestionsList = ({ setOpenBranchingPage = () => {} }: Props) => {
       >
         {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
         {questions
-          .filter((q: AnyQuestion) => q.type)
+          .filter((q: AnyQuestion) => q.type && q.type !== "result")
-          .map(({ title, content }, index) => (
+          .map(({ title, content }, index) => {
-            <Button
+            return (
-              onMouseDown={() => {
+              <Button
-                //Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
+                id={content.id}
-                if (!content.rule.parentId)
+                onMouseDown={() => {
-                  updateDragQuestionContentId(content.id);
+                  //Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
-              }}
+                  if (!content.rule.parentId)
-              key={index}
+                    updateDragQuestionContentId(content.id);
-              sx={{
+                }}
-                width: "100%",
+                key={index}
-                cursor: "pointer",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                padding: "12px",
-                background: "#FFFFFF",
-                borderRadius: "8px",
-                border:
-                  desireToOpenABranchingModal === content.id
-                    ? "4px solid #7e2aea"
-                    : "none",
-                marginBottom: "20px",
-                boxShadow: "0px 10px 30px #e7e7e7",
-                backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
-  border-radius: 8px;`,
-                "&:last-child": { marginBottom: 0 },
-              }}
-            >
-              <Typography
                 sx={{
                   width: "100%",
-                  color: content.rule.parentId ? "#9A9AAF" : "#000",
+                  cursor: "pointer",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "12px",
+                  background: "#FFFFFF",
+                  borderRadius: "8px",
+                  border:
+                    desireToOpenABranchingModal === content.id
+                      ? "4px solid #7e2aea"
+                      : "none",
+                  marginBottom: "20px",
+                  boxShadow: "0px 10px 30px #e7e7e7",
+                  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
+  border-radius: 8px;`,
+                  "&:last-child": { marginBottom: 0 },
                 }}
               >
-                {title || "нет заголовка"}
+                <Typography
-              </Typography>
+                  sx={{
-              <IconButton
+                    width: "100%",
-                onClick={() => {
+                    color: content.rule.parentId ? "#9A9AAF" : "#000",
-                  setOpenBranchingPage();
+                  }}
-                  updateEditSomeQuestion(content.id);
+                >
-                }}
+                  {title || "нет заголовка"}
-              >
+                </Typography>
-                <Pencil style={{ color: "#7e2aea" }} />
+                <IconButton
-              </IconButton>
+                  onClick={() => {
-              {content.rule.parentId && <CheckedIcon />}
+                    setOpenBranchingPage();
-            </Button>
+                    updateEditSomeQuestion(content.id);
-          ))}
+                  }}
+                >
+                  <Pencil style={{ color: "#7e2aea" }} />
+                </IconButton>
+                {content.rule.parentId && <CheckedIcon />}
+              </Button>
+            );
+          })}
       </Box>
     </Box>
   );

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -14,42 +14,114 @@ import { notReachable } from "../../utils/notReachable";
 
 interface Props {
   question: AnyTypedQuizQuestion;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function SwitchQuestionsPage({ question }: Props) {
+export default function SwitchQuestionsPage({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   switch (question.type) {
     case "variant":
-      return <AnswerOptions question={question} />;
+      return (
+        <AnswerOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "images":
-      return <OptionsPicture question={question} />;
+      return (
+        <OptionsPicture
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "varimg":
-      return <OptionsAndPicture question={question} />;
+      return (
+        <OptionsAndPicture
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "emoji":
-      return <Emoji question={question} />;
+      return (
+        <Emoji
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "text":
-      return <OwnTextField question={question} />;
+      return (
+        <OwnTextField
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "select":
-      return <DropDown question={question} />;
+      return (
+        <DropDown
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "date":
-      return <DataOptions question={question} />;
+      return (
+        <DataOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "number":
-      return <SliderOptions question={question} />;
+      return (
+        <SliderOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "file":
-      return <UploadFile question={question} />;
+      return (
+        <UploadFile
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "page":
-      return <PageOptions question={question} />;
+      return (
+        <PageOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     case "rating":
-      return <RatingOptions question={question} />;
+      return (
+        <RatingOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );
 
     default:
       notReachable(question);

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -36,9 +36,15 @@ const DESIGN_TYPES: DesignItem[] = [
 
 interface Props {
   question: QuizQuestionFile;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function UploadFile({ question }: Props) {
+export default function UploadFile({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
   const [switchState, setSwitchState] = useState("setting");
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(980));
@@ -201,6 +207,8 @@ export default function UploadFile({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchUpload switchState={switchState} question={question} />
     </>

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -10,9 +10,16 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
 
 interface Props {
   question: QuizQuestionVariant;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }
 
-export default function AnswerOptions({ question }: Props) {
+export default function AnswerOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
+  console.log(setOpenBranchingPage);
   const onClickAddAnAnswer = useAddAnswer();
   const [switchState, setSwitchState] = useState("setting");
   const theme = useTheme();
@@ -89,6 +96,8 @@ export default function AnswerOptions({ question }: Props) {
         switchState={switchState}
         SSHC={SSHC}
         question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
       />
       <SwitchAnswerOptions switchState={switchState} question={question} />
     </>

src/pages/ResultPage/ResultSettings.tsx

@@ -76,7 +76,6 @@ export const ResultSettings = () => {
 
   const leavePage = (leave: boolean) => {
     if (leave) {
-      console.log("ливаем");
     }
 
     setOpenNotificationModal(false);

src/pages/ResultPage/cards/ResultCard.tsx

@@ -360,7 +360,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                     border: "1px solid #9A9AAF",
                     background: " #F2F3F7",
                     color: "#9A9AAF",
-                  my: "30px",
+                    my: "30px",
                   }}
                 >
                   Кнопка +

src/pages/Tariffs/Tariffs.tsx

@@ -1,22 +1,32 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { makeRequest } from "@frontend/kitui";
 import { useEffect, useState } from "react";
 import type { GetTariffsResponse } from "@model/tariff";
+import { clearAuthToken } from "@frontend/kitui";
+import { logout } from "@api/auth";
+import ArrowDown from "../../assets/icons/ArrowDownIcon";
 
 import {
   Box,
   Button,
+  Container,
   Modal,
   Paper,
   Typography,
   useMediaQuery,
   useTheme,
+  IconButton
 } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
 import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
 import { withErrorBoundary } from "react-error-boundary";
 import { createTariffElements } from "./tariffsUtils/createTariffElements";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
+import { LogoutButton } from "@ui_kit/LogoutButton";
+import { clearUserData } from "@root/user";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import { currencyFormatter } from "./tariffsUtils/currencyFormatter";
 
 function TariffPage() {
   const theme = useTheme();
@@ -29,6 +39,7 @@ function TariffPage() {
   const [discounts, setDiscounts] = useState();
   const [cartTariffMap, setCartTariffMap] = useState();
   const [openModal, setOpenModal] = useState({});
+  const [cash, setCash] = useState("0");
 
   useEffect(() => {
     const get = async () => {
@@ -47,16 +58,14 @@ function TariffPage() {
       setUser(user);
       setTariffs(tariffs);
       setDiscounts(discounts.Discounts);
+      let c = currencyFormatter.format(Number(user.wallet.cash) / 100)
+      setCash(c)
     };
     get();
   }, []);
 
   if (!user || !tariffs || !discounts) return <LoadingPage />;
 
-  console.log("user ", user);
-  console.log("tariffs ", tariffs);
-  console.log("discounts ", discounts);
-
   const openModalHC = (tariffInfo: any) => setOpenModal(tariffInfo);
   const tryBuy = async ({ id, price }: { id: string; price: number }) => {
     openModalHC({});
@@ -72,10 +81,13 @@ function TariffPage() {
     //Если нам хватает денежек - покупаем тариф
     if (price <= user.wallet.cash) {
       try {
-        await makeRequest({
+        const data = await makeRequest({
           method: "POST",
-          url: "https://suiz.pena.digital/customer/cart/pay",
+          url: "https://squiz.pena.digital/customer/cart/pay",
         });
+        setCash(currencyFormatter.format(Number(data.wallet.cash) / 100))
+        enqueueSnackbar("Тариф успешно приобретён");
+
       } catch (e) {
         enqueueSnackbar("Произошла ошибка. Попробуйте позже");
       }
@@ -86,9 +98,8 @@ function TariffPage() {
       // history.pushState({}, null, "https://hub.pena.digital/wallet?action=squizpay");
 
       var link = document.createElement("a");
-      link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${
+      link.href = `https://hub.pena.digital/payment?action=squizpay&dif=${(price - Number(user.wallet.cash)) * 100
-        (price - Number(user.wallet.cash)) * 100
+        }`;
-      }`;
       document.body.appendChild(link);
       //   link.click();
     }
@@ -104,19 +115,72 @@ function TariffPage() {
     );
   });
 
+  async function handleLogoutClick() {
+    const [, logoutError] = await logout();
+
+    if (logoutError) {
+      return enqueueSnackbar(logoutError);
+    }
+
+    clearAuthToken();
+    clearUserData();
+    navigate("/");
+  }
   return (
     <>
-      <HeaderFull />
+      <Container
+        component="nav"
+        disableGutters
+        maxWidth={false}
+        sx={{
+          px: "16px",
+          display: "flex",
+          height: "80px",
+          alignItems: "center",
+          gap: isTablet ? "20px" : "60px",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          bgcolor: "white",
+          borderBottom: "1px solid #E3E3E3",
+        }}
+      >
+        <Link to="/">
+          <Logotip width={124} />
+        </Link>
+        <IconButton onClick={() => navigate("/list")}>
+          <ArrowLeft color="black" />
+        </IconButton>
+        <Box sx={{ display: "flex", ml: "auto" }}>
+          <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
+            <Typography
+              sx={{
+                fontSize: "12px",
+                lineHeight: "14px",
+                color: "gray",
+              }}
+            >
+              Мой баланс
+            </Typography>
+            <Typography variant="body2" color={"#7e2aea"}>
+              {cash}
+            </Typography>
+          </Box>
+          <LogoutButton
+            onClick={handleLogoutClick}
+            sx={{
+              ml: "20px",
+            }}
+          />
+        </Box>
+      </Container>
       <Box
         sx={{
           justifyContent: "left",
-          mt: "40px",
-          mb: "30px",
           display: "grid",
           gap: "40px",
-          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
+          p: "20px",
-            isTablet ? "436px" : "360px"
+          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${isTablet ? "436px" : "360px"
-          }))`,
+            }))`,
         }}
       >
         {createTariffElements(
@@ -167,7 +231,7 @@ export const Tariffs = withErrorBoundary(TariffPage, {
       Ошибка загрузки тарифов
     </Typography>
   ),
-  onError: () => {},
+  onError: () => { },
 });
 
 const LoadingPage = () => (
@@ -187,22 +251,26 @@ const LoadingPage = () => (
 
 export const inCart = () => {
   let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
-  saveCart.forEach(async (id: string) => {
+  if (Array.isArray(saveCart)) {
-    try {
+    saveCart.forEach(async (id: string) => {
-      await makeRequest({
+      try {
-        method: "PATCH",
+        await makeRequest({
-        url: `https://hub.pena.digital/customer/cart?id=${id}`,
+          method: "PATCH",
-      });
+          url: `https://hub.pena.digital/customer/cart?id=${id}`,
+        });
 
-      let index = saveCart.indexOf("green");
+        let index = saveCart.indexOf("green");
-      if (index !== -1) {
+        if (index !== -1) {
-        saveCart.splice(index, 1);
+          saveCart.splice(index, 1);
+        }
+        localStorage.setItem("saveCart", JSON.stringify(saveCart));
+      } catch (e) {
+        console.log("Я не смог добавить тариф в корзину :( " + id);
       }
-      localStorage.setItem("saveCart", JSON.stringify(saveCart));
+    });
-    } catch (e) {
+  } else {
-      console.log("Я не смог добавить тариф в корзину :( " + id);
+    localStorage.setItem("saveCart", "[]")
-    }
+  }
-  });
 };
 const outCart = (cart: string[]) => {
   //Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально
@@ -210,7 +278,7 @@ const outCart = (cart: string[]) => {
     try {
       await makeRequest({
         method: "DELETE",
-        url: `https://suiz.pena.digital/customer/cart?id=${id}`,
+        url: `https://squiz.pena.digital/customer/cart?id=${id}`,
       });
       let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
       saveCart = saveCart.push(id);

src/pages/Tariffs/tariffsUtils/calcCart.ts

@@ -78,7 +78,6 @@ function findCartDiscount(
       cartPurchasesAmount >= Number(discount.Condition.CartPurchasesAmount)
     );
   });
-  console.log("FCD", applicableDiscounts);
 
   if (!applicableDiscounts.length) return null;
 

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -249,7 +249,6 @@ const Inputs = (currentQuestion: any) => {
 
   //@ts-ignore
   const FC: any = quiz?.config.formContact.fields;
-  console.log(FC);
 
   //@ts-ignore
   const Name = (

src/pages/ViewPublicationPage/Footer.tsx

@@ -115,15 +115,12 @@ export const Footer = ({
     }
 
     const isEmpty = checkEmptyData({ resultData: nextQuestion });
-    console.log("пустой результат? ", isEmpty);
     if (nextQuestion) {
       if (nextQuestion && quiz?.config.resultInfo.when === "before") {
         if (isEmpty) {
           setShowContactForm(true); //до+пустая = кидать на ФК
-          console.log("до+пустая = кидать на ФК");
         } else {
           setShowResultForm(true); //до+заполнена = показать
-          console.log("до+заполнена = показать");
         }
       }
       if (
@@ -133,10 +130,8 @@ export const Footer = ({
       ) {
         if (isEmpty) {
           setShowContactForm(true); //после+пустая
-          console.log("после+пустая");
         } else {
           setShowContactForm(true); //после+заполнена = показать ФК
-          console.log("после+заполнена = показать");
         }
       }
     }

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -93,13 +93,15 @@ export const ResultForm = ({
             </Typography>
           )}
 
-        <Typography
+        {resultQuestion.title && (
-          sx={{
+          <Typography
-            m: "20px 0",
+            sx={{
-          }}
+              m: "20px 0",
-        >
+            }}
-          {resultQuestion.title || "Форма результатов"}
+          >
-        </Typography>
+            {resultQuestion.title}
+          </Typography>
+        )}
 
         {resultQuestion.content.text !== "" &&
           resultQuestion.content.text !== " " && (

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -149,6 +149,7 @@ const VariantItem = ({
           : theme.palette.background.default,
         display: "flex",
         maxWidth: "685px",
+        maxHeight: "85px",
         justifyContent: "space-between",
         width: "100%",
         "&.MuiFormControl-root": {

src/pages/createQuize/QuizCard.tsx

@@ -50,7 +50,7 @@ export default function QuizCard({
       try {
         await makeRequest({
           method: "POST",
-          url: "https://suiz.pena.digital/customer/cart/pay",
+          url: "https://squiz.pena.digital/customer/cart/pay",
         });
         inCart();
       } catch (e) {

src/pages/main.tsx

@@ -128,7 +128,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
             sx={{
               background: theme.palette.background.default,
               width: "100%",
-              overflow: "auto",
+              // overflow: "auto",
               boxSizing: "border-box",
             }}
           >

src/pages/startPage/ModalInfoWhyCantCreate.tsx

@@ -8,9 +8,7 @@ export const ModalInfoWhyCantCreate = () => {
   const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
 
   useLayoutEffect(() => {
-    console.log(whyCantCreatePublic);
     if (Object.values(whyCantCreatePublic).length === 0) {
-      console.log("нет проблем");
       updateModalInfoWhyCantCreate(false);
     }
   }, [openModalInfoWhyCantCreate]);

src/stores/questions/actions.ts

@@ -439,7 +439,9 @@ export const changeQuestionType = (questionId: string, type: QuestionType) => {
     const oldRule = question.content.rule;
     oldRule.main = [];
     question.type = type;
-    question.content = defaultQuestionByType[type].content;
+    question.content = JSON.parse(
+      JSON.stringify(defaultQuestionByType[type].content),
+    );
     question.content.id = oldId;
     question.content.rule = oldRule;
   });

src/ui_kit/MediaSelectionAndDisplay.tsx

@@ -1,5 +1,12 @@
 import { FC } from "react";
-import { Box, Button, ButtonBase, Tooltip, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import CustomTextField from "./CustomTextField";
 import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
@@ -19,7 +26,7 @@ interface Iprops {
 
 export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
   const quizQid = useCurrentQuiz()?.qid;
-  const theme = useTheme()
+  const theme = useTheme();
   const {
     isCropModalOpen,
     openCropModal,
@@ -30,7 +37,6 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
   } = useCropModalState();
   const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
     useDisclosure();
-  console.log(resultData)
   async function handleImageUpload(file: File) {
     const url = await uploadQuestionImage(
       resultData.id,
@@ -182,7 +188,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
               width: "48px",
               display: "flex",
               alignItems: "center",
-              my: "20px"
+              my: "20px",
             }}
           >
             <input
@@ -198,7 +204,6 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
                     },
                   );
                 }
-
               }}
               hidden
               accept=".mp4"
@@ -213,7 +218,9 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
               }}
             />
           </ButtonBase>
-          {resultData.content.video ? <video src={resultData.content.video} width="400" controls /> : null}
+          {resultData.content.video ? (
+            <video src={resultData.content.video} width="400" controls />
+          ) : null}
         </>
       )}
     </Box>

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -74,7 +74,6 @@ export default function QuizPreviewLayout() {
     observer.current.observe(PreviewWin.current);
   }, [PreviewWin, observer]);
 
-  console.log("current width state: ", widthPreview);
   return (
     <Paper
       ref={PreviewWin}

src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx

@@ -14,7 +14,6 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
   const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
   // https://www.youtube.com/shorts/9VgqBPd6RPA
   // https://www.youtube.com/watch?v=I2N8hTHhvGY
-  console.log();
   return (
     <Box
       sx={{

src/ui_kit/Toolbars/ButtonRecallQuiz.tsx

@@ -10,7 +10,6 @@ export const ButtonRecallQuiz = () => {
   const quiz = useCurrentQuiz();
   const { whyCantCreatePublic, canCreatePublic } = useUiTools();
 
-  console.log(quiz?.status);
   const [buttonText, setButtonText] = useState(
     quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
   );

src/utils/deleteFunc.ts

@@ -66,21 +66,12 @@ export const DeleteFunction = async (
       const newRule = {};
       const parentChildren = [...parentQuestion.content.rule.children];
 
-      console.log(
-        "_________________УДАЛЯЕМЫЙ ВОПРОС_________________",
-        question.content.id,
-      );
-      console.log(parentChildren);
-      console.log(question.content.id);
-      console.log(parentChildren.includes(question.content.id));
-
       if (parentChildren.includes(question.content.id))
         parentChildren.splice(
           parentQuestion.content.rule.children.indexOf(question.content.id),
           1,
         );
 
-      console.log("получившийся массив ", parentChildren);
       newRule.main = parentQuestion.content.rule.main.filter(
         (data) => data.next !== question.content.id,
       ); //удаляем условия перехода от родителя к этому вопросу
@@ -103,20 +94,14 @@ export const DeleteFunction = async (
       );
 
       //сделать результ родителя видимым если у него не осталось потомков
-      console.log(
-        "пришло время анализировать сделать ли результат родителя видимым",
-      );
-      console.log("количество детей ", startCountParentChildren.length);
 
       if (startCountParentChildren.length === 1) {
         if (parentResult) {
-          console.log("я нашел результат родителя");
           await updateQuestion(parentResult.content.id, (q) => {
             q.content.usage = true;
           });
         } else {
           //почему-то не существует результа у родителя. Создаём. Новосозданные результы видны сразу
-          console.log("я не нашел результат родителя");
           await createResult(quiz.backendId, parentQuestion.content.id);
         }
       }