From 88d1d904a8edc79a6e665a5e0bea729ac963e345 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 17 Apr 2024 14:28:42 +0300
Subject: [PATCH] fix: layout height

---
 .../ViewPublicationPage/ContactForm.tsx       | 904 +++++++++---------
 1 file changed, 467 insertions(+), 437 deletions(-)

diff --git a/lib/components/ViewPublicationPage/ContactForm.tsx b/lib/components/ViewPublicationPage/ContactForm.tsx
index 1fb9c2f..657ea51 100644
--- a/lib/components/ViewPublicationPage/ContactForm.tsx
+++ b/lib/components/ViewPublicationPage/ContactForm.tsx
@@ -1,21 +1,21 @@
+import { FC, useRef, useState, useEffect } from "react";
 import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
 import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
 import TextIcon from "@icons/ContactFormIcon/TextIcon";
 import {
-    Box,
-    Button,
-    InputAdornment,
-    Link,
-    TextField as MuiTextField,
-    TextFieldProps,
-    Typography,
-    useTheme
+  Box,
+  Button,
+  InputAdornment,
+  Link,
+  TextField as MuiTextField,
+  TextFieldProps,
+  Typography,
+  useTheme,
 } from "@mui/material";
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
-import { FC, useRef, useState } from "react";
 
 import { DESIGN_LIST } from "@/utils/designList";
 import { sendFC } from "@api/quizRelase";
@@ -27,468 +27,498 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { enqueueSnackbar } from "notistack";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 
-
 const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
-const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
+const EMAIL_REGEXP =
+  /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
 
 type Props = {
-    currentQuestion: AnyTypedQuizQuestion;
-    onShowResult: () => void;
+  currentQuestion: AnyTypedQuizQuestion;
+  onShowResult: () => void;
 };
 
 export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
-    const theme = useTheme();
-    const { settings, questions, quizId, show_badge, preview } = useQuizData();
+  const theme = useTheme();
+  const { settings, questions, quizId, show_badge, preview } = useQuizData();
 
-    const [ready, setReady] = useState(false);
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-    const [phone, setPhone] = useState("");
-    const [text, setText] = useState("");
-    const [adress, setAdress] = useState("");
+  const [ready, setReady] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [text, setText] = useState("");
+  const [adress, setAdress] = useState("");
+  const [screenHeight, setScreenHeight] = useState<number>(window.innerHeight);
 
-    const fireOnce = useRef(true);
-    const [fire, setFire] = useState(false);
-    const isMobile = useRootContainerSize() < 850;
-    const isTablet = useRootContainerSize() < 1000;
+  const fireOnce = useRef(true);
+  const [fire, setFire] = useState(false);
+  const isMobile = useRootContainerSize() < 850;
+  const isTablet = useRootContainerSize() < 1000;
 
-    const resultQuestion = currentQuestion.type === "result"
-        ? currentQuestion
-        : questions.find((question): question is QuizQuestionResult => {
-            if (settings?.cfg.haveRoot) {
-                return (
-                    question.type === "result" &&
-                    question.content.rule.parentId === currentQuestion.content.id
-                );
-            } else {
-                return (
-                    question.type === "result" && question.content.rule.parentId === "line"
-                );
-            }
+  useEffect(() => {
+    function handleResize() {
+      setScreenHeight(window.innerHeight);
+    }
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const resultQuestion =
+    currentQuestion.type === "result"
+      ? currentQuestion
+      : questions.find((question): question is QuizQuestionResult => {
+          if (settings?.cfg.haveRoot) {
+            return (
+              question.type === "result" &&
+              question.content.rule.parentId === currentQuestion.content.id
+            );
+          } else {
+            return (
+              question.type === "result" &&
+              question.content.rule.parentId === "line"
+            );
+          }
         });
 
-    if (!resultQuestion) throw new Error("Result question not found");
+  if (!resultQuestion) throw new Error("Result question not found");
 
-    const inputHC = async () => {
-        const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
-        const body = {} as any;
-        if (name.length > 0) body.name = name;
-        if (email.length > 0) body.email = email;
-        if (phone.length > 0) body.phone = phone;
-        if (adress.length > 0) body.address = adress;
-        if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
+  const inputHC = async () => {
+    const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
+    const body = {} as any;
+    if (name.length > 0) body.name = name;
+    if (email.length > 0) body.email = email;
+    if (phone.length > 0) body.phone = phone;
+    if (adress.length > 0) body.address = adress;
+    if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
 
-        if (Object.keys(body).length > 0) {
-            try {
-                await sendFC({
-                    questionId: currentQuestion.id,
-                    body: body,
-                    qid: quizId,
-                    preview
-                });
+    if (Object.keys(body).length > 0) {
+      try {
+        await sendFC({
+          questionId: currentQuestion.id,
+          body: body,
+          qid: quizId,
+          preview,
+        });
 
-                const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
-                localStorage.setItem(
-                    "sessions",
-                    JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
-                );
-            } catch (e) {
-                enqueueSnackbar("ответ не был засчитан");
-            }
-        }
-    };
-
-    const FCcopy: any = settings.cfg.formContact.fields || settings.cfg.formContact;
-
-    const filteredFC: any = {};
-    for (const i in FCcopy) {
-        const field = FCcopy[i];
-        if (field.used) {
-            filteredFC[i] = field;
-        }
+        const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
+        localStorage.setItem(
+          "sessions",
+          JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
+        );
+      } catch (e) {
+        enqueueSnackbar("ответ не был засчитан");
+      }
     }
-    
+  };
 
-    async function handleShowResultsClick() {
-        const FC: any = settings.cfg.formContact.fields;
-        if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
-            return enqueueSnackbar("введена некорректная почта");
-        }
+  const FCcopy: any =
+    settings.cfg.formContact.fields || settings.cfg.formContact;
 
+  const filteredFC: any = {};
+  for (const i in FCcopy) {
+    const field = FCcopy[i];
+    if (field.used) {
+      filteredFC[i] = field;
+    }
+  }
 
-        if (fireOnce.current) {
-            if (
-                name.length === 0
-                && email.length === 0
-                && phone.length === 0
-                && text.length === 0
-                && adress.length === 0
-            ) return enqueueSnackbar("Пожалуйста, заполните поля");
-
-            //почта валидна, хоть одно поле заполнено
-            setFire(true);
-            try {
-                await inputHC();
-                fireOnce.current = false;
-                const sessions: any = JSON.parse(
-                    localStorage.getItem("sessions") || "{}"
-                );
-                sessions[quizId] = Date.now();
-                localStorage.setItem(
-                    "sessions",
-                    JSON.stringify(sessions)
-                );
-                enqueueSnackbar("Данные успешно отправлены");
-            } catch (e) {
-                enqueueSnackbar("повторите попытку позже");
-            }
-            if (settings.cfg.resultInfo.showResultForm === "after") {
-                onShowResult();
-            }
-
-        }
-
-        setFire(false);
+  async function handleShowResultsClick() {
+    const FC: any = settings.cfg.formContact.fields;
+    if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
+      return enqueueSnackbar("введена некорректная почта");
     }
 
-    return (
+    if (fireOnce.current) {
+      if (
+        name.length === 0 &&
+        email.length === 0 &&
+        phone.length === 0 &&
+        text.length === 0 &&
+        adress.length === 0
+      )
+        return enqueueSnackbar("Пожалуйста, заполните поля");
+
+      //почта валидна, хоть одно поле заполнено
+      setFire(true);
+      try {
+        await inputHC();
+        fireOnce.current = false;
+        const sessions: any = JSON.parse(
+          localStorage.getItem("sessions") || "{}"
+        );
+        sessions[quizId] = Date.now();
+        localStorage.setItem("sessions", JSON.stringify(sessions));
+        enqueueSnackbar("Данные успешно отправлены");
+      } catch (e) {
+        enqueueSnackbar("повторите попытку позже");
+      }
+      if (settings.cfg.resultInfo.showResultForm === "after") {
+        onShowResult();
+      }
+    }
+
+    setFire(false);
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: theme.palette.background.default,
+        height: screenHeight > 500 ? "100%" : "auto",
+        overflow: "auto",
+        "&::-webkit-scrollbar": {
+          width: "0",
+          display: "none",
+          msOverflowStyle: "none",
+        },
+        scrollbarWidth: "none",
+        msOverflowStyle: "none",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundImage:
+          settings.cfg.design && !isMobile
+            ? quizThemes[settings.cfg.theme].isLight
+              ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+              : `linear-gradient(90deg, #272626, transparent), url(${
+                  DESIGN_LIST[settings.cfg.theme]
+                })`
+            : null,
+      }}
+    >
+      <Box
+        sx={{
+          width: !isMobile ? "100%" : isMobile ? undefined : "530px",
+          borderRadius: "4px",
+          height: isMobile ? "100%" : "auto",
+          minHeight: "100%",
+          display: isMobile ? undefined : "flex",
+          background:
+            settings.cfg.design && !isMobile
+              ? undefined
+              : theme.palette.background.default,
+        }}
+      >
         <Box
+          sx={{
+            width: isMobile ? undefined : "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
+            margin: isMobile ? 0 : "40px 0",
+          }}
+        >
+          <Box
             sx={{
+              maxWidth: "630px",
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "center",
+              padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px",
+            }}
+          >
+            <Typography
+              sx={{
+                textAlign: isTablet ? undefined : "center",
+                m: "20px 0",
+                fontSize: isTablet ? "24px" : "28px",
+                lineHeight: "normal",
+                fontWeight: 501,
+                color: theme.palette.text.primary,
+                wordBreak: "break-word",
+              }}
+            >
+              {settings.cfg.formContact.title ||
+                "Заполните форму, чтобы получить результаты теста"}
+            </Typography>
+            {settings.cfg.formContact.desc && (
+              <Typography
+                sx={{
+                  color: theme.palette.text.primary,
+                  m: "20px 0",
+                  fontSize: "18px",
+                  wordBreak: "break-word",
+                }}
+              >
+                {settings.cfg.formContact.desc}
+              </Typography>
+            )}
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            backgroundColor: theme.palette.background.default,
+            p: isMobile ? "40px" : "125px 60px 30px 60px",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              my: "20px",
+            }}
+          >
+            <Inputs
+              name={name}
+              setName={setName}
+              email={email}
+              setEmail={setEmail}
+              phone={phone}
+              setPhone={setPhone}
+              text={text}
+              setText={setText}
+              adress={adress}
+              setAdress={setAdress}
+            />
+          </Box>
+
+          {
+            // resultQuestion &&
+            // settings.cfg.resultInfo.when === "after" &&
+            <Button
+              disabled={!(ready && !fire)}
+              variant="contained"
+              onClick={handleShowResultsClick}
+              sx={{
+                border: `1px solid ${theme.palette.primary.main}`,
+                "&:disabled": {
+                  border: "1px solid #9A9AAF",
+                  color: "#9A9AAF",
+                },
+              }}
+            >
+              {settings.cfg.formContact?.button || "Получить результаты"}
+            </Button>
+          }
+
+          <Box
+            sx={{
+              display: "flex",
+              mt: "20px",
+              width: isMobile ? "300px" : "390px",
+            }}
+          >
+            <CustomCheckbox
+              label=""
+              handleChange={({ target }) => {
+                setReady(target.checked);
+              }}
+              checked={ready}
+              colorIcon={theme.palette.primary.main}
+            />
+            <Typography sx={{ color: theme.palette.text.primary }}>
+              С&ensp;
+              <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
+                Положением об обработке персональных данных{" "}
+              </Link>
+              &ensp;и&ensp;
+              <Link
+                href={"https://shub.pena.digital/docs/privacy"}
+                target="_blank"
+              >
+                {" "}
+                Политикой конфиденциальности{" "}
+              </Link>
+              &ensp;ознакомлен
+            </Typography>
+          </Box>
+          {show_badge && (
+            <Box
+              component={Link}
+              target={"_blank"}
+              href={`https://${
+                window.location.hostname.includes("s") ? "s" : ""
+              }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
+              sx={{
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: theme.palette.background.default,
-                height: "100%",
-                overflow: "auto",
-                "&::-webkit-scrollbar": {
-                    width: "0",
-                    display: "none",
-                    msOverflowStyle: "none",
-                },
-                scrollbarWidth: "none",
-                msOverflowStyle: "none",
-                backgroundPosition: "center",
-                backgroundSize: "cover",
-                backgroundImage: settings.cfg.design && !isMobile
-                    ? quizThemes[settings.cfg.theme].isLight
-                        ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-                        : `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})`
-                    : null,
-            }}
-        >
-            <Box
-                sx={{
-                    width: !isMobile ? "100%" : isMobile ? undefined : "530px",
-                    borderRadius: "4px",
-                    height: "100%",
-                    minHeight: "100%",
-                    display: isMobile ? undefined : "flex",
-                    background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
-                }}
+                mt: "55px",
+                mb: "50px",
+                gap: "15px",
+                textDecoration: "none",
+              }}
             >
-                <Box
-                    sx={{
-                        width: isMobile ? undefined : "100%",
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
-                        margin: isMobile ? 0 : "40px 0"
-                    }}
-                >
-                    <Box
-                        sx={{
-                            maxWidth: "630px",
-                            width: "100%",
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "flex-start",
-                            justifyContent: "center",
-                            padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
-                        }}
-                    >
-                        <Typography
-                            sx={{
-                                textAlign: isTablet ? undefined : "center",
-                                m: "20px 0",
-                                fontSize: isTablet ? "24px" : "28px",
-                                lineHeight: "normal",
-                                fontWeight: 501,
-                                color: theme.palette.text.primary,
-                                wordBreak: "break-word"
-                            }}
-                        >
-                            {settings.cfg.formContact.title ||
-                                "Заполните форму, чтобы получить результаты теста"}
-                        </Typography>
-                        {settings.cfg.formContact.desc && (
-                            <Typography
-                                sx={{
-                                    color: theme.palette.text.primary,
-                                    m: "20px 0",
-                                    fontSize: "18px",
-                                    wordBreak: "break-word"
-                                }}
-                            >
-                                {settings.cfg.formContact.desc}
-                            </Typography>
-                        )}
-                    </Box>
-
-                </Box>
-
-                <Box
-                    sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        flexDirection: "column",
-                        backgroundColor: theme.palette.background.default,
-                        p: isMobile ? "40px" : "125px 60px 30px 60px",
-                    }}
-                >
-                    <Box
-                        sx={{
-                            display: "flex",
-                            flexDirection: "column",
-                            my: "20px",
-                        }}
-                    >
-                        <Inputs
-                            name={name}
-                            setName={setName}
-                            email={email}
-                            setEmail={setEmail}
-                            phone={phone}
-                            setPhone={setPhone}
-                            text={text}
-                            setText={setText}
-                            adress={adress}
-                            setAdress={setAdress}
-                        />
-                    </Box>
-
-                    {
-                        // resultQuestion &&
-                        // settings.cfg.resultInfo.when === "after" &&
-                        <Button
-                            disabled={!(ready && !fire)}
-                            variant="contained"
-                            onClick={handleShowResultsClick}
-                            sx={{
-                                border: `1px solid ${theme.palette.primary.main}`,
-                                "&:disabled": {
-                                    border: "1px solid #9A9AAF",
-                                    color: "#9A9AAF"
-                                }
-                            }}
-                        >
-                            {settings.cfg.formContact?.button || "Получить результаты"}
-                        </Button>
-                    }
-
-                    <Box
-                        sx={{
-                            display: "flex",
-                            mt: "20px",
-                            width: isMobile ? "300px" : "390px",
-                        }}
-                    >
-                        <CustomCheckbox
-                            label=""
-                            handleChange={({ target }) => {
-                                setReady(target.checked);
-                            }}
-                            checked={ready}
-                            colorIcon={theme.palette.primary.main}
-                        />
-                        <Typography sx={{ color: theme.palette.text.primary }}>
-                            С&ensp;
-                            <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
-                                Положением об обработке персональных данных{" "}
-                            </Link>
-                            &ensp;и&ensp;
-                            <Link
-                                href={"https://shub.pena.digital/docs/privacy"}
-                                target="_blank"
-                            >
-                                {" "}
-                                Политикой конфиденциальности{" "}
-                            </Link>
-                            &ensp;ознакомлен
-                        </Typography>
-                    </Box>
-                    {show_badge &&
-                        <Box
-                            component={Link}
-                            target={"_blank"}
-                            href={
-                                `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
-                            }
-                            sx={{
-                                display: "flex",
-                                alignItems: "center",
-                                mt: "55px",
-                                mb: "50px",
-                                gap: "15px",
-                                textDecoration: "none",
-                            }}
-                        >
-                            <NameplateLogo
-                                style={{
-                                    fontSize: "23px",
-                                    color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
-                                }}
-                            />
-                            <Typography
-                                sx={{
-                                    fontSize: "14px",
-                                    color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
-                                    whiteSpace: "nowrap",
-                                }}
-                            >
-                                Сделано на PenaQuiz
-                            </Typography>
-                        </Box>
-                    }
-
-                </Box>
+              <NameplateLogo
+                style={{
+                  fontSize: "23px",
+                  color: quizThemes[settings.cfg.theme].isLight
+                    ? "#151515"
+                    : "#FFFFFF",
+                }}
+              />
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                  color: quizThemes[settings.cfg.theme].isLight
+                    ? "#4D4D4D"
+                    : "#F5F7FF",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                Сделано на PenaQuiz
+              </Typography>
             </Box>
+          )}
         </Box>
-    );
+      </Box>
+    </Box>
+  );
 };
 
 const Inputs = ({
-    name,
-    setName,
-    email,
-    setEmail,
-    phone,
-    setPhone,
-    text,
-    setText,
-    adress,
-    setAdress,
+  name,
+  setName,
+  email,
+  setEmail,
+  phone,
+  setPhone,
+  text,
+  setText,
+  adress,
+  setAdress,
 }: any) => {
-    const { settings } = useQuizData();
+  const { settings } = useQuizData();
 
-    const FC = settings.cfg.formContact.fields;
+  const FC = settings.cfg.formContact.fields;
 
-    if (!FC) return null;
-    console.log(email);
-    const Name = (
-        <CustomInput
-            onChange={({ target }) => setName(target.value)}
-            id={name}
-            title={FC["name"].innerText || "Введите имя"}
-            desc={FC["name"].text || "Имя"}
-            Icon={NameIcon}
-        />
-    );
-    const Email = (
-        <CustomInput
-            onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
-            id={email}
-            title={FC["email"].innerText || "Введите Email"}
-            desc={FC["email"].text || "Email"}
-            Icon={EmailIcon}
-        />
-    );
-    const Phone = (
-        <CustomInput
-            onChange={({ target }) => setPhone(target.value)}
-            id={phone}
-            title={FC["phone"].innerText || "Введите номер телефона"}
-            desc={FC["phone"].text || "Номер телефона"}
-            Icon={PhoneIcon}
-        />
-    );
-    const Text = (
-        <CustomInput
-            onChange={({ target }) => setText(target.value)}
-            id={text}
-            title={FC["text"].text || "Введите фамилию"}
-            desc={FC["text"].innerText || "Фамилия"}
-            Icon={TextIcon}
-        />
-    );
-    const Adress = (
-        <CustomInput
-            onChange={({ target }) => setAdress(target.value)}
-            id={adress}
-            title={FC["address"].innerText || "Введите адрес"}
-            desc={FC["address"].text || "Адрес"}
-            Icon={AddressIcon}
-        />
-    );
+  if (!FC) return null;
+  console.log(email);
+  const Name = (
+    <CustomInput
+      onChange={({ target }) => setName(target.value)}
+      id={name}
+      title={FC["name"].innerText || "Введите имя"}
+      desc={FC["name"].text || "Имя"}
+      Icon={NameIcon}
+    />
+  );
+  const Email = (
+    <CustomInput
+      onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ""))}
+      id={email}
+      title={FC["email"].innerText || "Введите Email"}
+      desc={FC["email"].text || "Email"}
+      Icon={EmailIcon}
+    />
+  );
+  const Phone = (
+    <CustomInput
+      onChange={({ target }) => setPhone(target.value)}
+      id={phone}
+      title={FC["phone"].innerText || "Введите номер телефона"}
+      desc={FC["phone"].text || "Номер телефона"}
+      Icon={PhoneIcon}
+    />
+  );
+  const Text = (
+    <CustomInput
+      onChange={({ target }) => setText(target.value)}
+      id={text}
+      title={FC["text"].text || "Введите фамилию"}
+      desc={FC["text"].innerText || "Фамилия"}
+      Icon={TextIcon}
+    />
+  );
+  const Adress = (
+    <CustomInput
+      onChange={({ target }) => setAdress(target.value)}
+      id={adress}
+      title={FC["address"].innerText || "Введите адрес"}
+      desc={FC["address"].text || "Адрес"}
+      Icon={AddressIcon}
+    />
+  );
 
-    if (Object.values(FC).some((data) => data.used)) {
-        return (
-            <>
-                {FC["name"].used ? Name : <></>}
-                {FC["email"].used ? Email : <></>}
-                {FC["phone"].used ? Phone : <></>}
-                {FC["text"].used ? Text : <></>}
-                {FC["address"].used ? Adress : <></>}
-            </>
-        );
-    } else {
-        return (
-            <>
-                {Name}
-                {Email}
-                {Phone}
-            </>
-        );
-    }
-};
-
-const CustomInput = ({ title, desc, Icon, onChange, id }: {
-    id: string;
-    title: string;
-    desc: string;
-    Icon: FC<{ color: string; backgroundColor: string; }>;
-    onChange: TextFieldProps["onChange"];
-}) => {
-    const theme = useTheme();
-    const isMobile = useRootContainerSize() < 600;
-    const { settings } = useQuizData();
+  if (Object.values(FC).some((data) => data.used)) {
     return (
-        <Box m="10px 0">
-            <Typography mb="7px" color={theme.palette.text.primary}>
-                {title}
-            </Typography>
-
-            <TextField
-                onChange={onChange}
-                sx={{
-                    width: isMobile ? "300px" : "390px",
-                    backgroundColor: theme.palette.background.default,
-                    "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: "#9A9AAF80",
-                        borderRadius: "12px"
-                    },
-                    "& .MuiInputBase-root": {
-                        paddingLeft: 0
-                    },
-                    '& .MuiOutlinedInput-root': {
-                        '&:hover fieldset': {
-                            borderColor: theme.palette.primary.main,
-                        },
-                    }
-
-                }}
-                placeholder={desc}
-                InputProps={{
-                    startAdornment: (
-                        <InputAdornment position="start">
-                            <Icon color="gray"
-                                backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
-                        </InputAdornment>
-                    ),
-                }}
-            />
-        </Box>
+      <>
+        {FC["name"].used ? Name : <></>}
+        {FC["email"].used ? Email : <></>}
+        {FC["phone"].used ? Phone : <></>}
+        {FC["text"].used ? Text : <></>}
+        {FC["address"].used ? Adress : <></>}
+      </>
     );
+  } else {
+    return (
+      <>
+        {Name}
+        {Email}
+        {Phone}
+      </>
+    );
+  }
+};
+
+const CustomInput = ({
+  title,
+  desc,
+  Icon,
+  onChange,
+  id,
+}: {
+  id: string;
+  title: string;
+  desc: string;
+  Icon: FC<{ color: string; backgroundColor: string }>;
+  onChange: TextFieldProps["onChange"];
+}) => {
+  const theme = useTheme();
+  const isMobile = useRootContainerSize() < 600;
+  const { settings } = useQuizData();
+  return (
+    <Box m="10px 0">
+      <Typography mb="7px" color={theme.palette.text.primary}>
+        {title}
+      </Typography>
+
+      <TextField
+        onChange={onChange}
+        sx={{
+          width: isMobile ? "300px" : "390px",
+          backgroundColor: theme.palette.background.default,
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: "#9A9AAF80",
+            borderRadius: "12px",
+          },
+          "& .MuiInputBase-root": {
+            paddingLeft: 0,
+          },
+          "& .MuiOutlinedInput-root": {
+            "&:hover fieldset": {
+              borderColor: theme.palette.primary.main,
+            },
+          },
+        }}
+        placeholder={desc}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Icon
+                color="gray"
+                backgroundColor={
+                  quizThemes[settings.cfg.theme].isLight
+                    ? "#F2F3F7"
+                    : "#F2F3F71A"
+                }
+              />
+            </InputAdornment>
+          ),
+        }}
+      />
+    </Box>
+  );
 };