форма контактов

2023-12-16 15:33:06 +03:00 · 2023-12-16 15:33:06 +03:00 · 36c7b44ee8
commit 36c7b44ee8
parent 9ce829f98f
6 changed files with 230 additions and 27 deletions
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ b/src/pages/ContactFormPage/ContactFormPage.tsx
@ -27,7 +27,7 @@ const buttons = [
  },
  {
    name: "Email",
-    desc: "mail@xample.ru",
+    desc: "mail@example.ru",
    key: "email"
  },
  {
@ -297,7 +297,7 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
            Добавить поле +
          </Button>
      }
-      <Link
+      {/* <Link
        component="button"
        // onClick={() => drawerMessengerHC(true)}
        sx={{
@ -309,7 +309,7 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
        }}
      >
        Добавить мессенджеры
-      </Link>
+      </Link> */}

      <PseudoButton />
    </Box>
@ -355,7 +355,7 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void

        </Popover>
      </Box>
-      <Link
+      {/* <Link
        sx={{
          mt: "20px",
          fontSize: "16px",
@ -365,7 +365,7 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
        }}
      >
        Добавить мессенджеры
-      </Link>
+      </Link> */}
      <PseudoButton />
    </Box>
  )
--- a/src/pages/ResultPage/cards/ResultCard.tsx
+++ b/src/pages/ResultPage/cards/ResultCard.tsx
@ -458,7 +458,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                      placeholder="URL видео"
                      text={resultData.content.video ?? ""}
                      onChange={e => updateQuestion(resultData.id, q => {
-                        resultData.content.video = e.target.value;
+                        q.content.video = e.target.value;
                      })}
                    />
                  </Box>
--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -1,6 +1,13 @@
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography, Button, Paper, TextField, Link, FormControl } from "@mui/material";
+import NameIcon from "@icons/ContactFormIcon/NameIcon";
+import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
+import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
+import TextIcon from "@icons/ContactFormIcon/TextIcon";
+import AddressIcon from "@icons/ContactFormIcon/AddressIcon";

 import { useCurrentQuiz } from "@root/quizes/hooks";
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import { useState } from "react";

 type ContactFormProps = {
  showResultForm: boolean;
@ -8,6 +15,14 @@ type ContactFormProps = {
  setShowResultForm: (show: boolean) => void;
 };

+const icons = [
+  { type: "name", icon: NameIcon, defaultText: "Введите имя", defaultTitle: "имя" },
+  { type: "email", icon: EmailIcon, defaultText: "Введите Email", defaultTitle: "Email" },
+  { type: "phone", icon: PhoneIcon, defaultText: "Введите номер телефона", defaultTitle: "номер телефона" },
+  { type: "text", icon: TextIcon, defaultText: "Введите фамилию", defaultTitle: "фамилию" },
+  { type: "address", icon: AddressIcon, defaultText: "Введите адрес", defaultTitle: "адрес" },
+]
+
 export const ContactForm = ({
  showResultForm,
  setShowContactForm,
@ -15,19 +30,109 @@ export const ContactForm = ({
 }: ContactFormProps) => {
  const quiz = useCurrentQuiz();

+  const [ready, setReady] = useState(false)
  const followNextForm = () => {
    setShowContactForm(false);
    setShowResultForm(true);
  };

  return (
-    <Box>
-      <Typography>Форма контактов</Typography>
-      {!showResultForm && quiz?.config.resultInfo.when === "after" && (
-        <Button variant="contained" onClick={followNextForm}>
-          Показать результат
-        </Button>
-      )}
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh"
+      }}
+    >
+      <Box
+        sx={{
+          width: "800px"
+        }}
+      >
+
+        <Box>
+          <Typography
+            sx={{
+              textAlign: "center",
+              m: "20px 0",
+              fontSize: "28px"
+            }}
+          >
+            Заполните форму, чтобы получить результаты теста
+          </Typography>
+        </Box>
+
+
+        <Paper
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            p: "30px"
+          }}>
+
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              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} />
+                  :
+                  <></>
+              })
+            }
+
+          </Box>
+
+          {!showResultForm && quiz?.config.resultInfo.when === "after" && (
+            <Button 
+            disabled={!ready}
+            variant="contained" onClick={followNextForm}>
+              Получить результаты
+            </Button>
+          )}
+
+          <Box
+            sx={{
+              display: "flex",
+              mt: "20px",
+              width: "450px",
+            }}
+          >
+            <CustomCheckbox label="" handleChange={({target}) => {setReady(target.checked)}} checked={ready} />
+            <Typography>
+              С
+              <Link> Положением об обработке персональных данных </Link>
+              и
+              <Link> Политикой конфиденциальности </Link>
+              ознакомлен
+            </Typography>
+
+          </Box>
+        </Paper>
+      </Box>
    </Box>
  );
 };
+
+const CustomInput = ({ title, desc, Icon }: any) => {
+  return <Box m="15px 0">
+    <Typography mb="7px">{title}</Typography>
+    <TextField
+      sx={{
+        width: "350px",
+      }}
+      placeholder={desc}
+      InputProps={{
+        startAdornment: <Icon color="gray" />,
+      }}
+    />
+  </Box>
+}
--- a/src/pages/ViewPublicationPage/Question.tsx
+++ b/src/pages/ViewPublicationPage/Question.tsx
@ -68,17 +68,20 @@ export const Question = ({ questions }: QuestionProps) => {

  return (
    <Box>
-      <Box
-        sx={{
-          minHeight: "calc(100vh - 75px)",
-          width: "100%",
-          maxWidth: "1440px",
-          padding: "40px 25px 20px",
-          margin: "0 auto",
-        }}
-      >
+      <Box>
        {!showContactForm && !showResultForm && !resultQuestion && (
-          <QuestionComponent currentQuestion={currentQuestion} />
+          <Box
+            sx={{
+              minHeight: "calc(100vh - 75px)",
+              width: "100%",
+              maxWidth: "1440px",
+              margin: "0 auto",
+              padding: "40px 25px 20px",
+            }}
+          >
+
+            <QuestionComponent currentQuestion={currentQuestion} />
+          </Box>
        )}
        {resultQuestion && (
          <ResultQuestion
@ -97,6 +100,7 @@ export const Question = ({ questions }: QuestionProps) => {
        )}
        {showResultForm && (
          <ResultForm
+            resultQuestion={resultQuestion}
            showContactForm={showContactForm}
            setShowContactForm={setShowContactForm}
            setShowResultForm={setShowResultForm}
--- a/src/pages/ViewPublicationPage/ResultForm.tsx
+++ b/src/pages/ViewPublicationPage/ResultForm.tsx
@ -1,28 +1,121 @@
 import { Box, Typography, Button } from "@mui/material";
+import { getQuestionByContentId } from "@root/questions/actions";

 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useQuestionsStore } from "@root/questions/store";
+import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx"

 type ResultFormProps = {
+  resultQuestion: string;
  showContactForm: boolean;
  setShowContactForm: (show: boolean) => void;
  setShowResultForm: (show: boolean) => void;
 };

 export const ResultForm = ({
+  resultQuestion,
  showContactForm,
  setShowContactForm,
  setShowResultForm,
+
 }: ResultFormProps) => {
  const quiz = useCurrentQuiz();
+  const myresult = useQuestionsStore().questions.filter((q) => q.type === "result")[0]
+  console.log("ResultForm")
+  console.log(myresult)

  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
  };

+  console.log("quiz", quiz)
+  console.log("quiz?.config.useImage", myresult?.content.useImage)
  return (
-    <Box>
-      <Typography>Форма результатов</Typography>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: "100vh",
+        width: "100vw",
+        pt: "28px"
+      }}
+    >
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "start",
+          width: "490px",
+        }}
+      >
+        {
+          !myresult?.content.useImage &&
+          myresult.content.video &&
+          <YoutubeEmbedIframe
+            videoUrl={myresult.content.video}
+            containerSX={{
+              width: "490px",
+              height: "280px"
+            }}
+          />
+        }
+        {
+          myresult?.content.useImage &&
+          myresult.content.back &&
+          <Box
+            component='img'
+            src={myresult.content.back}
+            sx={{
+              width: "490px",
+              height: "280px"
+            }}
+          >
+          </Box>
+        }
+
+        {myresult.description !== "" && myresult.description !== " " && <Typography
+          sx={{
+            fontSize: "23px",
+            fontWeight: 700,
+            m: "20px 0"
+          }}
+        >{myresult.description}</Typography>}
+
+        <Typography
+          sx={{
+            m: "20px 0"
+          }}
+        >{myresult.title || "Форма результатов"}
+        </Typography>
+
+      </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"
+          sx={{
+            p:"10px 20px",
+            width: "210px",
+            height: "50px"
+          }}
+        >
+          {myresult.content.hint.text || "Узнать подробнее"}
+        </Button>
+      </Box>
+
      {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
        <Button variant="contained" onClick={followNextForm}>
          Показать форму контактов
--- a/src/pages/ViewPublicationPage/ResultQuestion.tsx
+++ b/src/pages/ViewPublicationPage/ResultQuestion.tsx
@ -11,13 +11,14 @@ type ResultQuestionProps = {
 };

 export const ResultQuestion = ({
-  resultQuestion,
  setResultQuestion,
  setShowContactForm,
  setShowResultForm,
 }: ResultQuestionProps) => {
  const quiz = useCurrentQuiz();
  const { questions } = useQuestionsStore();
+  console.log("ResultQuestion")
+  console.log(resultQuestion)

  const followNextForm = () => {
    setResultQuestion("");