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

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>
   )

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>

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>
+    <Box
-      <Typography>Форма контактов</Typography>
+      sx={{
-      {!showResultForm && quiz?.config.resultInfo.when === "after" && (
+        display: "flex",
-        <Button variant="contained" onClick={followNextForm}>
+        alignItems: "center",
-          Показать результат
+        justifyContent: "center",
-        </Button>
+        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>
+}

src/pages/ViewPublicationPage/Question.tsx

@@ -68,17 +68,20 @@ export const Question = ({ questions }: QuestionProps) => {
 
   return (
     <Box>
-      <Box
+      <Box>
-        sx={{
-          minHeight: "calc(100vh - 75px)",
-          width: "100%",
-          maxWidth: "1440px",
-          padding: "40px 25px 20px",
-          margin: "0 auto",
-        }}
-      >
         {!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}

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>
+    <Box
-      <Typography>Форма результатов</Typography>
+      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}>
           Показать форму контактов

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("");