Merge branch 'formContact' into dev

2023-12-16 23:56:37 +03:00 · 2023-12-16 23:56:37 +03:00 · bc898bc0f5
commit bc898bc0f5
parent 5211ed78e6 408ecf9826
8 changed files with 146 additions and 76 deletions
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ b/src/pages/ContactFormPage/ContactFormPage.tsx
@ -350,7 +350,7 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
          disableRestoreFocus
        >
          <Typography sx={{ m: "20px", textAlign: "center" }}>
-            Если вам не нужно собирать контакты, <br></br> отключите форму контактов
+            Будут поля:<br></br> Имя, Email, Телефон
          </Typography>

        </Popover>
--- a/src/pages/ResultPage/cards/WhenCard.tsx
+++ b/src/pages/ResultPage/cards/WhenCard.tsx
@ -159,7 +159,7 @@ export const WhenCard = ({ quizExpand }: Props) => {
                        </Box>


-                        {
+                        {/* {
                            (quiz?.config.resultInfo.when !== "email") && <SwitchSetting
                                icon={ShareNetwork}
                                text="Поделиться результатами"
@ -174,7 +174,7 @@ export const WhenCard = ({ quizExpand }: Props) => {
                                onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.replay = event.target.checked)}
                                value={quiz?.config.resultInfo.replay}
                            />
-                        }
+                        } */}



--- a/src/pages/ViewPublicationPage/ApologyPage.tsx
+++ b/src/pages/ViewPublicationPage/ApologyPage.tsx
@ -0,0 +1,21 @@
+import { Box, Typography } from "@mui/material";
+
+export const ApologyPage = (message: string) => {
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }}
+        >
+            <Typography
+                sx={{
+                    textAlign: "center"
+                }}
+            >{message || "что-то пошло не так"}</Typography>
+        </Box>
+
+
+    )
+}
--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -1,4 +1,4 @@
-import { Box, Typography, Button, Paper, TextField, Link, FormControl } from "@mui/material";
+import { Box, Typography, Button, Paper, TextField, Link, InputAdornment } from "@mui/material";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
@ -70,8 +70,21 @@ export const ContactForm = ({
              fontSize: "28px"
            }}
          >
-            Заполните форму, чтобы получить результаты теста
+            {quiz?.config.formContact.title || "Заполните форму, чтобы получить результаты теста"}
+            
          </Typography>
+          {
+            quiz?.config.formContact.desc &&
+          <Typography
+            sx={{
+              textAlign: "center",
+              m: "20px 0",
+              fontSize: "18px"
+            }}
+          >
+            {quiz?.config.formContact.desc}
+          </Typography>
+          }
        </Box>


@ -91,14 +104,7 @@ export const ContactForm = ({
              my: "20px"
            }}
          >
-            {
-              icons.map((data) => {
-                const FC = quiz?.config.formContact[data.type]
-                return FC.used ? <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />
-                  :
-                  <></>
-              })
-            }
+            <Inputs />

          </Box>

@ -108,7 +114,9 @@ export const ContactForm = ({
            (
              <Button
                disabled={!ready}
-                variant="contained" onClick={followNextForm}>
+                variant="contained" onClick={() => {
+                  if (quiz?.config.resultInfo.when === "after") followNextForm()
+                }}>
                Получить результаты
              </Button>
            )}
@ -136,6 +144,30 @@ export const ContactForm = ({
  );
 };

+const Inputs = () => {
+  const quiz = useCurrentQuiz();
+
+  let someUsed = []
+
+  const Icons = icons.map((data) => {
+    const FC = quiz?.config.formContact[data.type]
+    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 {
+    return <>
+    {Icons[0]}
+    {Icons[1]}
+    {Icons[2]}
+    </>
+  }
+}
+
 const CustomInput = ({ title, desc, Icon }: any) => {
  return <Box m="15px 0">
    <Typography mb="7px">{title}</Typography>
@ -145,7 +177,7 @@ const CustomInput = ({ title, desc, Icon }: any) => {
      }}
      placeholder={desc}
      InputProps={{
-        startAdornment: <Icon color="gray" />,
+        startAdornment: <InputAdornment position="start"><Icon color="gray" /></InputAdornment>,
      }}
    />
  </Box>
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@ -95,13 +95,11 @@ export const Footer = ({
    }
  }, [question, answers]);

-  const showResult = () => {
-    const resultQuestion = questions.find(
-      ({ type, content }) =>
-        type === "result" && content.rule.parentId === question.content.id
-    );
+  const showResult = nextQuestion => {

-    if (quiz?.config.resultInfo.when !== "after" && resultQuestion) {
+    console.log(nextQuestion)
+
+    if (nextQuestion && quiz?.config.resultInfo.when === "before") {
      setShowResultForm(true);
    } else {
      setShowContactForm(true);
@ -183,10 +181,13 @@ export const Footer = ({
      const questionIndex = questions.findIndex(({ id }) => id === question.id);
      const nextQuestion = questions[questionIndex + 1];

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

      return;
--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -65,37 +65,46 @@ export const Question = ({ questions }: QuestionProps) => {
  const QuestionComponent =
    QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];

+    console.log("showResultForm " , showResultForm)
  return (
    <Box>
-      <Box
-        sx={{
-          minHeight: "calc(100vh - 75px)",
-          width: "100%",
-          maxWidth: "1440px",
-          padding: "40px 25px 20px",
-          margin: "0 auto",
-        }}
-      >
-        {!showContactForm && !showResultForm && (
+      {!showContactForm && !showResultForm && (
+        <Box
+          sx={{
+            minHeight: "calc(100vh - 75px)",
+            width: "100%",
+            maxWidth: "1440px",
+            padding: "40px 25px 20px",
+            margin: "0 auto",
+          }}
+        >
          <QuestionComponent currentQuestion={currentQuestion} />
-        )}
-        {showContactForm && (
-          <ContactForm
-            currentQuestion={currentQuestion}
-            showResultForm={showResultForm}
-            setShowContactForm={setShowContactForm}
-            setShowResultForm={setShowResultForm}
-          />
-        )}
-        {showResultForm && (
-          <ResultForm
-            currentQuestion={currentQuestion}
-            showContactForm={showContactForm}
-            setShowContactForm={setShowContactForm}
-            setShowResultForm={setShowResultForm}
-          />
-        )}
-      </Box>
+        </Box>
+      )}
+      {showResultForm && quiz?.config.resultInfo.when === "before" && (
+        <ResultForm
+          currentQuestion={currentQuestion}
+          showContactForm={showContactForm}
+          setShowContactForm={setShowContactForm}
+          setShowResultForm={setShowResultForm}
+        />
+      )}
+      {showContactForm && (
+        <ContactForm
+          currentQuestion={currentQuestion}
+          showResultForm={showResultForm}
+          setShowContactForm={setShowContactForm}
+          setShowResultForm={setShowResultForm}
+        />
+      )}
+      {showResultForm && quiz?.config.resultInfo.when === "after" && (
+        <ResultForm
+          currentQuestion={currentQuestion}
+          showContactForm={showContactForm}
+          setShowContactForm={setShowContactForm}
+          setShowResultForm={setShowResultForm}
+        />
+      )}
      {!showContactForm && !showResultForm && (
        <Footer
          question={currentQuestion}
--- a/src/pages/ViewPublicationPage/ResultForm.tsx
+++ b/src/pages/ViewPublicationPage/ResultForm.tsx
@ -26,9 +26,17 @@ export const ResultForm = ({
  const resultQuestion = questions.find(
    (question) =>
      question.type === "result" &&
-      question.content.rule.parentId === currentQuestion.content.id
+      (question.content.rule.parentId === "line" || currentQuestion.content.id)
  );

+  
+  console.log(currentQuestion)
+  console.log(resultQuestion
+    )
+  console.log(questions)
+  console.log(quiz?.config.resultInfo.when)
+
+
  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
@ -79,7 +87,6 @@ export const ResultForm = ({
          >
          </Box>
        }
-
        {resultQuestion.description !== "" && resultQuestion.description !== " " && <Typography
          sx={{
            fontSize: "23px",
@ -97,33 +104,31 @@ export const ResultForm = ({

      </Box>

-      <Box
-        sx={{
-          height: "100px",
-          boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }}
-      >
-        <Button
-          variant="contained"
+      {
+        quiz?.config.resultInfo.when === "before" &&
+        <Box
          sx={{
-            p:"10px 20px",
-            width: "210px",
-            height: "50px"
+            height: "100px",
+            boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
          }}
        >
-          {resultQuestion.content.hint.text || "Узнать подробнее"}
-        </Button>
-      </Box>
-
-      {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
-        <Button variant="contained" onClick={followNextForm}>
-          Показать форму контактов
-        </Button>
-      )}
+          <Button
+            onClick={followNextForm}
+            variant="contained"
+            sx={{
+              p: "10px 20px",
+              width: "210px",
+              height: "50px"
+            }}
+          >
+            {resultQuestion.content.hint.text || "Узнать подробнее"}
+          </Button>
+        </Box>
+      }
    </Box>
  );
 };
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@ -17,6 +17,7 @@ import { enqueueSnackbar } from "notistack";
 import { useQuestionsStore } from "@root/questions/store";
 import { setQuestions } from "@root/questions/actions";
 import { questionApi } from "@api/question";
+import { ApologyPage } from "./ApologyPage"

 export const ViewPage = () => {
  const quiz = useCurrentQuiz();
@ -53,6 +54,7 @@ export const ViewPage = () => {

  console.log("visualStartPage ", visualStartPage);
  if (visualStartPage === undefined) return <></>;
+  if (questions.length === 0) return <ApologyPage message="Нет созданных вопросов"/>
  return (
    <Box>
      {!visualStartPage ? (