настройки формы контактов без мессенджеров

src/model/questionTypes/shared.ts

@@ -94,7 +94,10 @@ export type AnyTypedQuizQuestion =
     | QuizQuestionFile
     | QuizQuestionPage
     | QuizQuestionRating
-    | QuizQuestionResult;
+    | QuizQuestionResult
+    | QuizQuestionContact;
+
+
 
 type FilterQuestionsWithVariants<T> = T extends {
     content: { variants: QuestionVariant[]; };

src/model/quizSettings.ts

@@ -40,7 +40,7 @@ export interface QuizConfig {
         theme: string,
         reply: string,
         replname: string,
-      }
+    }
     startpage: {
         description: string;
         button: string;
@@ -58,6 +58,14 @@ export interface QuizConfig {
             cycle: boolean;
         };
     };
+    formContact: {
+        name: FCField;
+        email: FCField;
+        phone: FCField;
+        text: FCField;
+        address: FCField;
+        button: string
+    };
     info: {
         phonenumber: string;
         clickable: boolean;
@@ -68,6 +76,14 @@ export interface QuizConfig {
     meta: string;
 }
 
+type FCField = {
+    text: string
+    innerText: string
+    key: string
+    required: boolean
+    used: boolean
+}
+
 export const defaultQuizConfig: QuizConfig = {
     type: null,
     noStartPage: false,
@@ -81,7 +97,7 @@ export const defaultQuizConfig: QuizConfig = {
         theme: "",
         reply: "",
         replname: "",
-      },
+    },
     startpage: {
         description: "",
         button: "",
@@ -106,5 +122,43 @@ export const defaultQuizConfig: QuizConfig = {
         site: "",
         law: "",
     },
+    formContact: {
+        name: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: true
+        },
+        email: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: true
+        },
+        phone: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: true
+        },
+        text: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: false
+        },
+        address: {
+            text: "",
+            innerText: "",
+            key: "",
+            required: false,
+            used: false
+        },
+        button: ""
+    },
     meta: "",
 };

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -1,9 +1,10 @@
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme } from "@mui/material";
-import { incrementCurrentStep } from "@root/quizes/actions";
+import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material";
+import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
 import React from "react";
-import InfoIcon from "../../assets/icons/InfoIcon";
+import Info from "../../assets/icons/Info";
+import Trash from "@icons/trash";
 import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
 import AddPlus from "../../assets/icons/questionsPage/addPlus";
 import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
@@ -12,116 +13,105 @@ import DrawerNewField from "./DrawerParent";
 import WindowMessengers from "./Massengers/WindowMessengers";
 import WindowNewField from "./NewField/WindowNewField";
 import SwitchContactForm from "./switchContactForm";
+import GearIcon from "@icons/GearIcon";
+import { useQuestionsStore } from "@root/questions/store";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+
+
+const buttons = [
+  {
+    name: "Имя",
+    desc: "Дмитрий",
+    key: "name"
+  },
+  {
+    name: "Email",
+    desc: "mail@xample.ru",
+    key: "email"
+  },
+  {
+    name: "Номер",
+    desc: "+7 900 000 00 00",
+    key: "phone"
+  },
+  {
+    name: "Фамилия",
+    desc: "Иванов",
+    key: "text"
+  },
+  {
+    name: "Адрес",
+    desc: "Москва, Лаврушинский пер., 10",
+    key: "address"
+  },
+]
 
 export default function ContactFormPage() {
-  const [drawerNewField, setDrawerNewField] = React.useState(false);
+  const theme = useTheme();
+
+  const quiz = useCurrentQuiz()
+
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+
+  const [drawerNewField, setDrawerNewField] = React.useState("");
   const [drawerMessenger, setDrawerMessenger] = React.useState(false);
 
-  const drawerNewFieldHC = (bool: boolean) => {
-    setDrawerNewField(bool);
+  const drawerNewFieldHC = (str: string) => {
+    setDrawerNewField(str);
   };
   const drawerMessengerHC = (bool: boolean) => {
     setDrawerMessenger(bool);
   };
 
-  const theme = useTheme();
   return (
-    <>
-      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+    <Box
+      sx={{
+        p: isTablet ? "0 0 150px 0" : "0"
+      }}
+    >
+
+
+      <Box sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        m: "67px 0 41px 0",
+      }}>
         <Link
           sx={{
             fontSize: "16px",
             lineHeight: "19px",
             color: theme.palette.brightPurple.main,
             textDecorationColor: theme.palette.brightPurple.main,
+
           }}
         >
           Как собрать данные посетителя
         </Link>{" "}
-        <InfoIcon />
+        {/* <Popover>
+          <Info />
+        </Popover> */}
+
       </Box>
-      <ContactFormParent>
-        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
-          <OneIcon />
-          <IconButton>
-            {" "}
-            <ExpandMoreIcon />{" "}
-          </IconButton>
-        </Box>
-        <Box sx={{ display: "flex", flexDirection: "column", gap: "20px", padding: "10px 20px" }}>
-          <Typography>Имя*</Typography>
-          <CustomTextField placeholder="Дмитрий" text={""} />
-          <Typography>E-mail*</Typography>
-          <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-          <Typography>Телефон*</Typography>
-          <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-          <Button
-            onClick={() => drawerNewFieldHC(true)}
-            variant="contained"
-            sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
-          >
-            Добавить поле +
-          </Button>
-          <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}>
-            <WindowNewField />
-          </DrawerNewField>
-          <Link
-            component="button"
-            onClick={() => drawerMessengerHC(true)}
-            sx={{
-              fontSize: "16px",
-              lineHeight: "19px",
-              color: theme.palette.brightPurple.main,
-              textDecorationColor: theme.palette.brightPurple.main,
-              textAlign: "left",
-            }}
-          >
-            Добавить мессенджеры
-          </Link>
-          <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
-            <WindowMessengers />
-          </DrawerNewField>
 
-          <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
-            Название кнопки
-          </Button>
-        </Box>
-      </ContactFormParent>
 
-      <ContactFormParent>
-        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
-          <OneIcon />
-          <IconButton>
-            {" "}
-            <ExpandMoreIcon />{" "}
-          </IconButton>
-        </Box>
-        <Button variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
-          Добавить поле +
-        </Button>
-        <Box sx={{ display: "flex" }}>
-          <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
-          <InfoIcon />
-        </Box>
-        <Link
-          sx={{
-            mt: "20px",
-            fontSize: "16px",
-            lineHeight: "19px",
-            color: theme.palette.brightPurple.main,
-            textDecorationColor: theme.palette.brightPurple.main,
-          }}
-        >
-          Добавить мессенджеры
-        </Link>
-        <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
-          Название кнопки
-        </Button>
-      </ContactFormParent>
+      {
+        !quiz?.config.formContact.name.used &&
+          !quiz?.config.formContact.email.used &&
+          !quiz?.config.formContact.phone.used &&
+          !quiz?.config.formContact.text.used &&
+          !quiz?.config.formContact.address.used ?
+          <ContactFormParent>
+            <EmptyCard drawerNewFieldHC={drawerNewFieldHC} />
+          </ContactFormParent>
+          :
+          <ContactFormParent>
+            <ButtonsCard drawerNewFieldHC={drawerNewFieldHC} />
+          </ContactFormParent>
+      }
+
+
       <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
-        <IconButton>
-          <AddPlus />
-        </IconButton>
         <Box sx={{ display: "flex", gap: "8px" }}>
           <Button variant="outlined">
             <ArrowLeft />
@@ -131,7 +121,13 @@ export default function ContactFormPage() {
           </Button>
         </Box>
       </Box>
-    </>
+
+
+      <DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
+        <WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
+      </DrawerNewField>
+
+    </Box>
   );
 }
 
@@ -142,10 +138,7 @@ interface Props {
 
 function ContactFormParent({ outerContainerSx: sx, children }: Props) {
   const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
-  const SSHC = (data: string) => {
-    setSwitchState(data);
-  };
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
   return (
     <Paper
       sx={{
@@ -154,16 +147,15 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
         borderRadius: "12px",
         margin: "20px 0",
         display: "flex",
-        flexDirection: "column",
       }}
     >
-      <Box sx={{ width: "100%", display: "flex" }}>
+      <Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
         <Box
           sx={{
-            borderRight: `1px solid ${theme.palette.grey2.main}`,
+            // borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
             maxWidth: "386px",
             width: "100%",
-            padding: "113px 20px 20px 20px",
+            padding: "100px 20px 20px 20px",
             display: "flex",
             flexDirection: "column",
             gap: "20px",
@@ -186,14 +178,211 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
             }}
           />
         </Box>
-        <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
-          {children}
-        </Box>
-      </Box>
-      <Box>
-        <ButtonSettingForms switchState={switchState} SSHC={SSHC} />
-        <SwitchContactForm switchState={switchState} />
+        <Divider sx={{
+          height: isTablet ? "1px" : "80%",
+          width: isTablet ? "80%" : "1px",
+          margin: "auto"
+        }}
+          orientation={isTablet ? "horisontal" : "vertical"}
+        />
+        {children}
       </Box>
     </Paper>
   );
 }
+
+
+const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => {
+  const theme = useTheme();
+  const quiz = useCurrentQuiz()
+  return (
+    <>
+      <Typography>{quiz.config.formContact[type].text || name}</Typography>
+      <Box
+        sx={{ display: "flex", mb: "10px" }}
+      >
+        <Typography
+          sx={{
+            color: quiz.config.formContact[type].innerText ? "black" : "#9A9AAF",
+            fontSize: "20px",
+            backgroundColor: theme.palette.background.default,
+            height: "48px",
+            borderRadius: "10px",
+            border: "1px #9A9AAF solid",
+            lineHeight: "21px",
+            p: " 0 25px 0 14px ",
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            position: "relative"
+          }}
+        >
+          {quiz.config.formContact[type].innerText || placeholder}
+          <IconButton
+            onClick={() => drawerNewFieldHC(type)}
+            sx={{
+              position: "absolute",
+              right: "0"
+            }}>
+            <GearIcon height="20px" width="20px" color="#7e2aea" />
+          </IconButton>
+        </Typography>
+        <IconButton
+          onClick={() => updateQuiz(quiz?.id, (quiz) => {
+            quiz.config.formContact[type].used = false
+          })}
+          sx={{
+            width: "48px",
+            ml: "5px"
+          }}
+        >
+          <Trash />
+
+        </IconButton>
+      </Box>
+    </>
+  )
+}
+
+const ButtonsCard = ({ drawerNewFieldHC }: any) => {
+  const theme = useTheme();
+  const quiz = useCurrentQuiz()
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
+
+      {
+        buttons.map((contentData) => {
+          const content = quiz?.config.formContact[contentData.key]
+          return content.used ? <SettingField drawerNewFieldHC={drawerNewFieldHC} key={contentData.key} type={contentData.key} name={content.text || contentData.name} placeholder={content.innerText || contentData.desc} /> : <></>
+        })
+      }
+
+      {
+        (
+          quiz?.config.formContact.name.used &&
+          quiz?.config.formContact.email.used &&
+          quiz?.config.formContact.phone.used &&
+          quiz?.config.formContact.text.used &&
+          quiz?.config.formContact.address.used
+        ) ?
+          <></>
+          :
+          <Button
+            onClick={() => drawerNewFieldHC("all")}
+            variant="contained"
+            sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
+          >
+            Добавить поле +
+          </Button>
+      }
+      <Link
+        component="button"
+        // onClick={() => drawerMessengerHC(true)}
+        sx={{
+          fontSize: "16px",
+          lineHeight: "19px",
+          color: theme.palette.brightPurple.main,
+          textDecorationColor: theme.palette.brightPurple.main,
+          textAlign: "left",
+        }}
+      >
+        Добавить мессенджеры
+      </Link>
+
+      <PseudoButton />
+    </Box>
+  )
+}
+const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void }) => {
+  const theme = useTheme();
+  const [FC, setFC] = React.useState(false)
+  const openFC = () => setFC(true)
+  const closeFC = () => setFC(false)
+  const popover = React.useRef(null);
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
+      <Button
+        onClick={() => drawerNewFieldHC("all")}
+        variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
+        Добавить поле +
+      </Button>
+      <Box sx={{ display: "flex" }}>
+        <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
+        <Box ref={popover}>
+          <Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
+        </Box>
+
+        <Popover
+          open={FC}
+          onClose={closeFC}
+          anchorEl={popover.current}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+          disableRestoreFocus
+        >
+          <Typography sx={{ m: "20px", textAlign: "center" }}>
+            Если вам не нужно собирать контакты, <br></br> отключите форму контактов
+          </Typography>
+
+        </Popover>
+      </Box>
+      <Link
+        sx={{
+          mt: "20px",
+          fontSize: "16px",
+          lineHeight: "19px",
+          color: theme.palette.brightPurple.main,
+          textDecorationColor: theme.palette.brightPurple.main,
+        }}
+      >
+        Добавить мессенджеры
+      </Link>
+      <PseudoButton />
+    </Box>
+  )
+}
+
+const PseudoButton = () => {
+  const quiz = useCurrentQuiz()
+  return (
+    <TextField
+      onChange={({ target }) => {
+        updateQuiz(quiz.id, (quiz) => {
+          quiz.config.formContact.button = target.value
+        })
+      }}
+      value={quiz.config.formContact.button}
+      sx={{
+        heigth: "44px",
+        width: "190px",
+        "& .MuiInputBase-root": {
+          backgroundColor: "#7E2AEA",
+          borderRadius: "8px",
+          color: "white",
+        },
+        "& .MuiInputBase-input": {
+          padding: "10px 20px",
+          textAlign: "center"
+        },
+        "& .MuiInputBase-input::placeholder": {
+          color: "white",
+          opacity: "1"
+        }
+      }}
+      placeholder="Название кнопки"
+    >
+      {quiz?.config.formContact.button || "Название кнопки"}
+    </TextField>
+
+  )
+}

src/pages/ContactFormPage/DrawerParent.tsx

@@ -7,18 +7,18 @@ import {SxProps, Theme} from "@mui/material";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
-    isOpen: boolean;
-    openHC: (arg0: boolean) => void
+    isOpenDrawer: string;
+    drawerNewFieldHC: (str: string) => void
 }
 
-export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
+export default function DrawerNewField({outerContainerSx: sx, children, isOpenDrawer: isOpen, drawerNewFieldHC }: Props) {
 
     return (
         <>
             <Drawer
                 anchor='right'
-                open={isOpen}
-                onClose={() => openHC(false)}
+                open={Boolean(isOpen)}
+                onClose={() => drawerNewFieldHC("")}
             >
                 <Box
                     sx={{ width: 450 }}

src/pages/ContactFormPage/NewField/ButtonsNewField.tsx

@@ -6,14 +6,19 @@ 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";
 
 interface Props {
     switchState: string
     SSHC: (data:string) => void
+    type: string
 }
 
-export default function ButtonsNewField ({SSHC, switchState}:Props) {
+export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
     const theme = useTheme();
+    const quiz = useCurrentQuiz()
+    console.log(quiz)
+    console.log(type)
     const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
         {icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
         {icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
@@ -31,16 +36,20 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
                 }}
             >
                 {buttonSetting.map( (e,i) => (
+                    type === e.value || type === "all" ?
                     <MiniButtonSetting
+                    disabled = {quiz?.config.formContact[e.value]?.used}
                         key={i}
                         onClick={()=>{SSHC(e.value)}}
                         sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
-                            color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main,
+                            color: switchState === e.value && type === "all" ? '#ffffff' : theme.palette.grey3.main,
                         }}
                     >
                         {e.icon}
                         {e.title}
                     </MiniButtonSetting>
+                    : 
+                    <></>
                 ))}
             </Box>
     )

src/pages/ContactFormPage/NewField/NewFieldParent.tsx

@@ -1,9 +1,11 @@
 import Box from "@mui/material/Box";
-import {FormControl, SxProps, TextField, Theme, Typography} from "@mui/material";
+import { FormControl, SxProps, TextField, Theme, Typography } from "@mui/material";
 import CustomTextField from "@ui_kit/CustomTextField";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import Button from "@mui/material/Button";
 import * as React from "react";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { updateQuiz } from "@root/quizes/actions";
 
 interface Props {
     outerContainerSx?: SxProps<Theme>;
@@ -11,51 +13,88 @@ interface Props {
     defaultValue?: string;
     placeholderHelp: string;
     placeholderField: string;
+    drawerNewFieldHC:(a:string)=>void
 }
 
-export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) {
-    return(
-        <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
-            <Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
-                <Typography>Подсказка</Typography>
-                <CustomTextField placeholder={placeholderHelp} text={''}/>
+export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
+    const quiz = useCurrentQuiz()
+    console.log({ defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children })
+    return (
+        <Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                <Typography
+                >Подсказка</Typography>
+                <CustomTextField
+                    onChange={({ target }) => {
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].text = target.value
+                        })
+                    }}
+                    value={quiz.config.formContact[defaultValue].text}
+
+                    placeholder={placeholderHelp} text={''} />
             </Box>
-            <Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
-                <Typography>Подсказка внутри поля</Typography>
-                <CustomTextField placeholder={placeholderField} text={''}/>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                <Typography
+                >Подсказка внутри поля</Typography>
+                <CustomTextField
+                    onChange={({ target }) => {
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].innerText = target.value
+                        })
+                    }}
+                    value={quiz.config.formContact[defaultValue].innerText}
+
+                    placeholder={placeholderField} text={''} />
             </Box>
-            <Box sx={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+
                 <Typography>Ключ</Typography>
-                <FormControl
-                    fullWidth
-                    variant="standard"
-                    sx={{ p: 0, border: 0 }}
-                >
-                    <TextField
-                        disabled
-                        id="outlined-disabled"
-                        value={defaultValue}
-                        sx={{
-                            "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
-                                border: 'none'
-                            },
-                            "& .MuiInputBase-root": {
-                                height: "48px",
-                                borderRadius: "10px",
-                                backgroundColor: '#EEE4FC',
-                            },
-                        }}
-                    />
-                </FormControl>
-                <CustomCheckbox label={"Обязательно к заполнению"}/>
+                <TextField
+                    value={quiz.config.formContact[defaultValue].key}
+                    onChange={({ target }) => {
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].key = target.value
+                        })
+                    }}
+                    placeholder="text"
+                    sx={{
+                        "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
+                            border: 'none'
+                        },
+                        "& .MuiInputBase-root": {
+                            height: "48px",
+                            borderRadius: "10px",
+                            backgroundColor: '#EEE4FC',
+                        },
+                    }}
+
+                />
+                <CustomCheckbox
+                    checked={quiz.config.formContact[defaultValue].required}
+                    handleChange={({ target }) => {
+                        console.log("click")
+                        updateQuiz(quiz.id, (quiz) => {
+                            quiz.config.formContact[defaultValue].required = target.checked
+                        })
+                    }}
+
+                    label={"Обязательно к заполнению"} />
             </Box>
-            <Box>
+            {/* <Box>
                 <Typography>Запрашивать на</Typography>
                 <CustomCheckbox label={'Шаг 1'}/>
                 <CustomCheckbox label={'Шаг 2'}/>
-            </Box>
+            </Box> */}
             {children}
-            <Button variant='contained' sx={{maxWidth: '125px'}}>Добавить</Button>
+            <Button
+                onClick={() => {
+                    updateQuiz(quiz.id, (quiz) => {
+                        quiz.config.formContact[defaultValue].used = true
+                    })
+                    drawerNewFieldHC("")
+                }}
+                variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
         </Box>
     )
 }

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

@@ -8,10 +8,11 @@ import CustomizedSwitch from "@ui_kit/CustomSwitch";
 
 interface Props {
     switchState: string,
+    drawerNewFieldHC:(a:string)=>void
 }
 
 
-export default function SwitchNewField({switchState ='name'}: Props) {
+export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) {
     const [SwitchMask, setSwitchMask] = React.useState(false);
     const SwitchMaskHC = (bool:boolean) => {
         setSwitchMask(bool)
@@ -19,16 +20,16 @@ export default function SwitchNewField({switchState ='name'}: Props) {
 
     switch (switchState) {
         case 'name':
-            return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
             break;
         case 'email':
-            return (<NewFieldParent placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
             break;
         case 'phone':
 
             return (
-                <NewFieldParent placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
-                    <FormControlLabel
+                <NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
+                    {/* <FormControlLabel
                         value="start"
                         control={<CustomizedSwitch/>}
                         label="Маска для телефона"
@@ -41,7 +42,7 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                             SwitchMaskHC(!SwitchMask)
                         }}
 
-                    />
+                    /> */}
 
                     {SwitchMask ?
                         <SelectMask/>
@@ -52,10 +53,10 @@ export default function SwitchNewField({switchState ='name'}: Props) {
             );
             break;
         case 'text':
-            return (<NewFieldParent placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
             break;
         case 'address':
-            return (<NewFieldParent placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
+            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
             break;
         default:
             return (<></>)

src/pages/ContactFormPage/NewField/WindowNewField.tsx

@@ -1,29 +1,44 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import {Typography, useTheme} from "@mui/material";
+import { Typography, useTheme } from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import ButtonsNewField from "./ButtonsNewField";
 import SwitchNewField from "./SwitchNewField";
+import { useCurrentQuiz } from '@root/quizes/hooks';
 
 
-export default function WindowNewField() {
+export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) {
+    const quiz = useCurrentQuiz()
     const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('name');
+    const [switchState, setSwitchState] = React.useState("");
+    React.useEffect(() => {
+        for (let val in quiz?.config.formContact) {
+            console.log(quiz?.config.formContact)
+            console.log(quiz?.config.formContact[val])
+            console.log(quiz?.config.formContact[val].used)
+            if (!quiz?.config.formContact[val].used) {
+                setSwitchState(val)
+                return
+            }
+        }
+    }, [])
+
     const SSHC = (data: string) => {
         setSwitchState(data)
     }
 
+    console.log(switchState)
 
-    return(
+    return (
         <>
-            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
+            <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
                 <Typography>Новое поле</Typography>
-                <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
+                <Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
             </Box>
 
-            <Box><ButtonsNewField switchState={switchState} SSHC={SSHC}/></Box>
-            <SwitchNewField switchState={switchState}/>
+            <Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
+            <SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
         </>
     )
 }

src/pages/startPage/EditPage.tsx

@@ -29,10 +29,9 @@ import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import { cleanQuestions } from "@root/questions/actions";
+import { cleanQuestions, setQuestions } from "@root/questions/actions";
 import { updateOpenBranchingPanel } from "@root/uiTools/actions";
 import { BranchingPanel } from "../Questions/BranchingPanel";
-import { setQuestions } from "@root/questions/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { useQuizes } from "@root/quizes/hooks";
 import { questionApi } from "@api/question";
@@ -52,6 +51,7 @@ export default function EditPage() {
 
             const questions = await questionApi.getList({ quiz_id: editQuizId })
             setQuestions(questions)
+
         }
         getData()
     }, [])

src/stores/questions/actions.ts

@@ -553,3 +553,4 @@ export const createBackResult = async (
         enqueueSnackbar("Не удалось создать вопрос");
     }
 });
+

src/ui_kit/switchStepPages.tsx

@@ -32,7 +32,7 @@ export default function SwitchStepPages({
         }
         case 1: return quizType === "form" ? <FormQuestionsPage /> : <QuestionsPage />;
         case 2: return <ResultPage />;
-        case 3: return <QuestionsMap />;
+        case 3: return <ContactFormPage />;
         case 4: return <ContactFormPage />;
         case 5: return <InstallQuiz />;
         case 6: return <>Реклама</>;