Merge branch 'fix' into 'main'

Fix See merge request frontend/squiz!80
2023-12-18 16:44:07 +00:00 · 2023-12-18 16:44:07 +00:00 · 1b577e4f33
commit 1b577e4f33
parent 658c957877 ece889116d
7 changed files with 272 additions and 213 deletions
--- a/src/pages/InstallQuiz/InstallQuiz.tsx
+++ b/src/pages/InstallQuiz/InstallQuiz.tsx
@ -193,7 +193,8 @@ export default function InstallQuiz() {
              <TextField
                disabled
                id={"inputLinkone"}
-                value="https://pena.com/"
+                value="https://hbpn.link/"
+                // value="https://pena.com/"
                sx={{
                  "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                    border: "none",
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@ -302,7 +302,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                                        margin: "0 5px 0 10px",
                                    }}
                                    onClick={() => {
-                                        if(question.content.rule.parentId.length !== 0) {
+                                        if (question.type === null) deleteQuestion(question.id)
+                                        if(question?.content?.rule.parentId.length !== 0) {
                                            setOpenDelete(true)
                                        } else {
                                            deleteQuestionWithTimeout(question.id, deleteFn);
--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -154,9 +154,7 @@ const Inputs = () => {
    if (FC.used) someUsed.push(<CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />)
    return <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />
  })
-
-  console.log(someUsed)
-  console.log(Icons)
+  
  if (someUsed.length) {
    return <>{someUsed}</>
  } else {
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@ -148,6 +148,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
  };

  const followNextStep = () => {
+
+
    if (linear) {
      const questionIndex = questions.findIndex(({ id }) => id === question.id);
      const nextQuestion = questions[questionIndex + 1];
@ -171,6 +173,7 @@ 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;
@ -182,7 +185,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
      if (nextQuestion?.type && nextQuestion.type !== "result") {
        setCurrentQuestion(nextQuestion);
      } else {
-        showResult();
+        showResult(nextQuestion);
      }
    }
  };
--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -43,8 +43,7 @@ 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);

@ -62,8 +61,7 @@ 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 (
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@ -1,24 +1,16 @@
-import {
-  Box,
-  Button,
-  ButtonBase,
-  Link,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
 import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
+import { NameplateLogo } from "@icons/NameplateLogo";

 interface Props {
-  setVisualStartPage: (a:boolean) => void
+  setVisualStartPage: (a: boolean) => void;
 }

-export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
+export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const { isMobileDevice } = useUADevice();
@ -29,9 +21,9 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
    navigator.clipboard.writeText(quiz.config.info.phonenumber);
  };

-  const background = quiz.config.startpage.background.type === "image"
-    ? quiz.config.startpage.background.desktop
-      ? (
+  const background =
+    quiz.config.startpage.background.type === "image" ? (
+      quiz.config.startpage.background.desktop ? (
        <img
          src={quiz.config.startpage.background.desktop}
          alt=""
@ -39,155 +31,199 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
            width: "100%",
            height: "100%",
            objectFit: "cover",
-            overflow: "hidden"
+            overflow: "hidden",
          }}
        />
-      )
-      : null
-    : quiz.config.startpage.background.type === "video"
-      ? quiz.config.startpage.background.video
-        ? (
-          <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video}
-            containerSX={{
-              width: quiz.config.startpageType === "centered" ? "550px" : quiz.config.startpageType === "expanded" ? "100vw" : "100%",
-              height: quiz.config.startpageType === "centered" ? "275px" : quiz.config.startpageType === "expanded" ? "100vh" : "100%",
-              borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
-              overflow: "hidden",
-              "& iframe": {
-                width: "100%",
-                height: "100%",
-                transform: quiz.config.startpageType === "centered" ? "" : quiz.config.startpageType === "expanded" ? "scale(1.5)" : "scale(2.4)",
-
-              }
-
-            }}
-          />
-        )
-        : null
-      : null;
+      ) : null
+    ) : quiz.config.startpage.background.type === "video" ? (
+      quiz.config.startpage.background.video ? (
+        <YoutubeEmbedIframe
+          videoUrl={quiz.config.startpage.background.video}
+          containerSX={{
+            width:
+              quiz.config.startpageType === "centered"
+                ? "550px"
+                : quiz.config.startpageType === "expanded"
+                ? "100vw"
+                : "100%",
+            height:
+              quiz.config.startpageType === "centered"
+                ? "275px"
+                : quiz.config.startpageType === "expanded"
+                ? "100vh"
+                : "100%",
+            borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
+            overflow: "hidden",
+            "& iframe": {
+              width: "100%",
+              height: "100%",
+              transform:
+                quiz.config.startpageType === "centered"
+                  ? ""
+                  : quiz.config.startpageType === "expanded"
+                  ? "scale(1.5)"
+                  : "scale(2.4)",
+            },
+          }}
+        />
+      ) : null
+    ) : null;

  return (
-    <Paper className="quiz-preview-draghandle"
+    <Paper
+      className="quiz-preview-draghandle"
      sx={{
        height: "100vh",
-        background: quiz.config.startpageType === "expanded" ?
-          quiz.config.startpage.position === "left" ? "linear-gradient(90deg,#272626,transparent)" :
-          quiz.config.startpage.position === "center" ? "linear-gradient(180deg,transparent,#272626)" :
-          "linear-gradient(270deg,#272626,transparent)" 
-        : "",
-        color: quiz.config.startpageType === "expanded" ? "white" : "black"
-      
-
-      }}>
+        background:
+          quiz.config.startpageType === "expanded"
+            ? quiz.config.startpage.position === "left"
+              ? "linear-gradient(90deg,#272626,transparent)"
+              : quiz.config.startpage.position === "center"
+              ? "linear-gradient(180deg,transparent,#272626)"
+              : "linear-gradient(270deg,#272626,transparent)"
+            : "",
+        color: quiz.config.startpageType === "expanded" ? "white" : "black",
+      }}
+    >
      <QuizPreviewLayoutByType
-        quizHeaderBlock={<Box 
-        p={quiz.config.startpageType === "standard" ? "" : "16px"}
-        >
-          <Box sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: "20px",
-            mb: "7px"
-          }}>
-            {quiz.config.startpage.logo && (
-              <img
-                src={quiz.config.startpage.logo}
-                style={{
-                  height: "37px",
-                  maxWidth: "43px",
-                  objectFit: "cover",
-                }}
-                alt=""
-              />
-            )}
-            <Typography sx={{ fontSize: "14px" }}>
-              {quiz.config.info.orgname}
-            </Typography>
+        quizHeaderBlock={
+          <Box p={quiz.config.startpageType === "standard" ? "" : "16px"}>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "20px",
+                mb: "7px",
+              }}
+            >
+              {quiz.config.startpage.logo && (
+                <img
+                  src={quiz.config.startpage.logo}
+                  style={{
+                    height: "37px",
+                    maxWidth: "43px",
+                    objectFit: "cover",
+                  }}
+                  alt=""
+                />
+              )}
+              <Typography sx={{ fontSize: "14px" }}>{quiz.config.info.orgname}</Typography>
+            </Box>
+            <Link mb="16px" href={quiz.config.info.site}>
+              <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                {quiz.config.info.site}
+              </Typography>
+            </Link>
          </Box>
-          <Link mb="16px" href={quiz.config.info.site}>
-            <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
-              {quiz.config.info.site}
-            </Typography>
-          </Link>
-        </Box>}
-        quizMainBlock={<>
-          <Box sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: quiz.config.startpageType === "centered" ? "center" :
-              quiz.config.startpageType === "expanded"
-                ? quiz.config.startpage.position === "center" ?
-                "center"
-                : "start": "start",
-            mt: "28px",
-            width: "100%"
-          }}>
-            <Typography sx={{
-              fontWeight: "bold",
-              fontSize: "26px",
-              fontStyle: "normal",
-              fontStretch: "normal",
-              lineHeight: "1.2",
-            }}>{quiz.name}</Typography>
-            <Typography sx={{
-              fontSize: "16px",
-              m: "16px 0"
-            }}>
-              {quiz.config.startpage.description}
-            </Typography>
-            <Box width={ quiz.config.startpageType === "standard" ? "100%" : "auto"}>
-              <Button
-                variant="contained"
+        }
+        quizMainBlock={
+          <>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems:
+                  quiz.config.startpageType === "centered"
+                    ? "center"
+                    : quiz.config.startpageType === "expanded"
+                    ? quiz.config.startpage.position === "center"
+                      ? "center"
+                      : "start"
+                    : "start",
+                mt: "28px",
+                width: "100%",
+              }}
+            >
+              <Typography
+                sx={{
+                  fontWeight: "bold",
+                  fontSize: "26px",
+                  fontStyle: "normal",
+                  fontStretch: "normal",
+                  lineHeight: "1.2",
+                }}
+              >
+                {quiz.name}
+              </Typography>
+              <Typography
                sx={{
                  fontSize: "16px",
-                  padding: "10px 15px",
-                  width: quiz.config.startpageType === "standard" ? "100%" : "auto"
+                  m: "16px 0",
                }}
-              onClick={() => setVisualStartPage(true)}
              >
-                {quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
-              </Button>
-            </Box>
-          </Box>
-          <Box
-            sx={{
-              mt: "46px"
-            }}
-          >
-            {quiz.config.info.clickable ? (
-              isMobileDevice ? (
-                <Link href={`tel:${quiz.config.info.phonenumber}`}>
-                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
-                    {quiz.config.info.phonenumber}
-                  </Typography>
-                </Link>
-              ) : (
-                <ButtonBase onClick={handleCopyNumber}>
-                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
-                    {quiz.config.info.phonenumber}
-                  </Typography>
-                </ButtonBase>
-              )
-            ) : (
-              <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
-                {quiz.config.info.phonenumber}
+                {quiz.config.startpage.description}
              </Typography>
-            )}
-            <Typography sx={{ fontSize: "12px", textAlign: "end" }}>
-              {quiz.config.info.law}
-            </Typography>
-          </Box>
-        </>}
+              <Box width={quiz.config.startpageType === "standard" ? "100%" : "auto"}>
+                <Button
+                  variant="contained"
+                  sx={{
+                    fontSize: "16px",
+                    padding: "10px 15px",
+                    width: quiz.config.startpageType === "standard" ? "100%" : "auto",
+                  }}
+                  onClick={() => setVisualStartPage(true)}
+                >
+                  {quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
+                </Button>
+              </Box>
+            </Box>
+
+            <Box
+              sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
+            >
+              <Box>
+                {quiz.config.info.clickable ? (
+                  isMobileDevice ? (
+                    <Link href={`tel:${quiz.config.info.phonenumber}`}>
+                      <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                        {quiz.config.info.phonenumber}
+                      </Typography>
+                    </Link>
+                  ) : (
+                    <ButtonBase onClick={handleCopyNumber}>
+                      <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                        {quiz.config.info.phonenumber}
+                      </Typography>
+                    </ButtonBase>
+                  )
+                ) : (
+                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                    {quiz.config.info.phonenumber}
+                  </Typography>
+                )}
+                <Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <NameplateLogo style={{ fontSize: "34px" }} />
+                <Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>
+                  Сделано на PenaQuiz
+                </Typography>
+              </Box>
+            </Box>
+          </>
+        }
        backgroundBlock={background}
        startpageType={quiz.config.startpageType}
        alignType={quiz.config.startpage.position}
      />
    </Paper>
  );
-}
+};

-function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
+function QuizPreviewLayoutByType({
+  quizHeaderBlock,
+  quizMainBlock,
+  backgroundBlock,
+  startpageType,
+  alignType,
+}: {
  quizHeaderBlock: JSX.Element;
  quizMainBlock: JSX.Element;
  backgroundBlock: JSX.Element | null;
@ -201,28 +237,35 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
    case null:
    case "standard": {
      return (
-        <Box sx={{
-          display: "flex",
-          flexDirection: alignType === "left" ? "row" : "row-reverse",
-          flexGrow: 1,
-          height: "100vh",
-          "&::-webkit-scrollbar": { width: 0 },
-        }}>
-          <Box sx={{
-            width: !isTablet ? "40%" : "100%",
+        <Box
+          sx={{
            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            alignItems: !isTablet ? "flex-start" : "center",
-            p: "25px"
-          }}>
+            flexDirection: alignType === "left" ? "row" : "row-reverse",
+            flexGrow: 1,
+            height: "100vh",
+            "&::-webkit-scrollbar": { width: 0 },
+          }}
+        >
+          <Box
+            sx={{
+              width: !isTablet ? "40%" : "100%",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              alignItems: !isTablet ? "flex-start" : "center",
+              p: "25px",
+            }}
+          >
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
-          <Box sx={{
-            width: "60%",
-            overflow: "hidden"
-          }}>
+
+          <Box
+            sx={{
+              width: "60%",
+              overflow: "hidden",
+            }}
+          >
            {backgroundBlock}
          </Box>
        </Box>
@ -230,36 +273,42 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
    }
    case "expanded": {
      return (
-        <Box sx={{
-          position: "relative",
-          display: "flex",
-          justifyContent: startpageAlignTypeToJustifyContent[alignType],
-          flexGrow: 1,
-          height: "100%",
-          "&::-webkit-scrollbar": { width: 0 },
-        }}>
-          <Box sx={{
-            width: "40%",
+        <Box
+          sx={{
            position: "relative",
-            padding: "16px",
-            zIndex: 2,
            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            alignItems: alignType === "center" ? "center" : "start",
-          }}>
+            justifyContent: startpageAlignTypeToJustifyContent[alignType],
+            flexGrow: 1,
+            height: "100%",
+            "&::-webkit-scrollbar": { width: 0 },
+          }}
+        >
+          <Box
+            sx={{
+              width: "40%",
+              position: "relative",
+              padding: "16px",
+              zIndex: 2,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              alignItems: alignType === "center" ? "center" : "start",
+            }}
+          >
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
-          <Box sx={{
-            position: "absolute",
-            left: 0,
-            top: 0,
-            height: "100%",
-            width: "100%",
-            zIndex: 1,
-            overflow: "hidden"
-          }}>
+          <Box
+            sx={{
+              position: "absolute",
+              left: 0,
+              top: 0,
+              height: "100%",
+              width: "100%",
+              zIndex: 1,
+              overflow: "hidden",
+            }}
+          >
            {backgroundBlock}
          </Box>
        </Box>
@ -267,27 +316,26 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
    }
    case "centered": {
      return (
-        <Box sx={{
-          padding: "16px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100%",
-          "&::-webkit-scrollbar": { width: 0 },
-          overflow: "hidden"
-        }}>
+        <Box
+          sx={{
+            padding: "16px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            "&::-webkit-scrollbar": { width: 0 },
+            overflow: "hidden",
+          }}
+        >
          {quizHeaderBlock}
-          {backgroundBlock &&
-            <Box>
-              {backgroundBlock}
-            </Box>
-          }
+          {backgroundBlock && <Box>{backgroundBlock}</Box>}
          {quizMainBlock}
        </Box>
      );
    }
-    default: notReachable(startpageType);
+    default:
+      notReachable(startpageType);
  }
 }

--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -78,7 +78,9 @@ export default function EditPage() {
    []
  );
  console.log(currentStep)
+  console.log(quizConfig)

+  if (!quizConfig) return <></>
  return (
    <>
      {/*хедер*/}
@ -349,6 +351,14 @@ export default function EditPage() {
                      )
                  }}
              >{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>
    </>