fix wrong drawer contact field settings

src/model/quizSettings.ts

@@ -40,7 +40,7 @@ export interface QuizConfig {
         theme: string,
         reply: string,
         replname: string,
-    }
+    };
     startpage: {
         description: string;
         button: string;
@@ -61,12 +61,8 @@ export interface QuizConfig {
     formContact: {
         title: string;
         desc: string;
-        name: FCField;
+        fields: Record<FormContactFieldName, FormContactFieldData>;
-        email: FCField;
+        button: string;
-        phone: FCField;
-        text: FCField;
-        address: FCField;
-        button: string
     };
     info: {
         phonenumber: string;
@@ -78,13 +74,20 @@ export interface QuizConfig {
     meta: string;
 }
 
-type FCField = {
+export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";
-    text: string
+
-    innerText: string
+type FormContactFieldData = {
-    key: string
+    text: string;
-    required: boolean
+    innerText: string;
-    used: boolean
+    key: string;
-}
+    required: boolean;
+    used: boolean;
+};
+
+export type FieldSettingsDrawerState = {
+    field: FormContactFieldName | "all" | "",
+    isEdit: boolean;
+};
 
 export const defaultQuizConfig: QuizConfig = {
     type: null,
@@ -127,6 +130,7 @@ export const defaultQuizConfig: QuizConfig = {
     formContact: {
         title: "",
         desc: "",
+        fields: {
             name: {
                 text: "",
                 innerText: "",
@@ -162,7 +166,8 @@ export const defaultQuizConfig: QuizConfig = {
                 required: false,
                 used: false
             },
-        button: ""
+        },
+        button: "",
     },
     meta: "",
 };

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -2,7 +2,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 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 React, { ReactNode, useRef, useState } from "react";
 import Info from "../../assets/icons/Info";
 import Trash from "@icons/trash";
 import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
@@ -17,61 +17,32 @@ import SwitchContactForm from "./switchContactForm";
 import GearIcon from "@icons/GearIcon";
 import { useQuestionsStore } from "@root/questions/store";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
 
 
-const buttons = [
+const buttons: { key: FormContactFieldName, name: string, desc: string; }[] = [
-  {
+    { name: "Имя", desc: "Дмитрий", key: "name" },
-    name: "Имя",
+    { name: "Email", desc: "mail@example.ru", key: "email" },
-    desc: "Дмитрий",
+    { name: "Номер", desc: "+7 900 000 00 00", key: "phone" },
-    key: "name"
+    { name: "Фамилия", desc: "Иванов", key: "text" },
-  },
+    { name: "Адрес", desc: "Москва, Лаврушинский пер., 10", key: "address" },
-  {
+];
-    name: "Email",
-    desc: "mail@example.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 theme = useTheme();
+    const quiz = useCurrentQuiz();
+    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const [drawerNewField, setDrawerNewField] = useState<FieldSettingsDrawerState>({ field: "", isEdit: false });
+    const [drawerMessenger, setDrawerMessenger] = useState(false);
 
-  const quiz = useCurrentQuiz()
-
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
-
-  const [drawerNewField, setDrawerNewField] = React.useState("");
-  const [drawerMessenger, setDrawerMessenger] = React.useState(false);
-
-  const drawerNewFieldHC = (str: string) => {
-    setDrawerNewField(str);
-  };
     const drawerMessengerHC = (bool: boolean) => {
         setDrawerMessenger(bool);
     };
 
     return (
-    <Box
+        <Box sx={{
-      sx={{
             p: isTablet ? "0 0 150px 0" : "0"
-      }}
+        }}>
-    >
-
-
             <Box sx={{
                 display: "flex",
                 alignItems: "center",
@@ -92,26 +63,21 @@ export default function ContactFormPage() {
                 {/* <Popover>
           <Info />
         </Popover> */}
-
             </Box>
-
-
             {
-        !quiz?.config.formContact.name.used &&
+                !quiz?.config.formContact.fields.name.used &&
-          !quiz?.config.formContact.email.used &&
+                    !quiz?.config.formContact.fields.email.used &&
-          !quiz?.config.formContact.phone.used &&
+                    !quiz?.config.formContact.fields.phone.used &&
-          !quiz?.config.formContact.text.used &&
+                    !quiz?.config.formContact.fields.text.used &&
-          !quiz?.config.formContact.address.used ?
+                    !quiz?.config.formContact.fields.address.used ?
                     <ContactFormParent>
-            <EmptyCard drawerNewFieldHC={drawerNewFieldHC} />
+                        <EmptyCard drawerNewFieldHC={setDrawerNewField} />
                     </ContactFormParent>
                     :
                     <ContactFormParent>
-            <ButtonsCard drawerNewFieldHC={drawerNewFieldHC} />
+                        <ButtonsCard drawerNewFieldHC={setDrawerNewField} />
                     </ContactFormParent>
             }
-
-
             <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
                 <Box sx={{ display: "flex", gap: "8px" }}>
                     <Button
@@ -124,25 +90,25 @@ export default function ContactFormPage() {
                     </Button>
                 </Box>
             </Box>
-
+            <DrawerNewField isOpenDrawer={drawerNewField.field} drawerNewFieldHC={() => setDrawerNewField({ field: "", isEdit: false })}>
-
+                <WindowNewField drawerState={drawerNewField} closeDrawer={() => setDrawerNewField({ field: "", isEdit: false })} />
-      <DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
-        <WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
             </DrawerNewField>
-
         </Box>
     );
 }
 
 interface Props {
     outerContainerSx?: SxProps<Theme>;
-  children?: React.ReactNode;
+    children?: ReactNode;
 }
 
 function ContactFormParent({ outerContainerSx: sx, children }: Props) {
     const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
-  const quiz = useCurrentQuiz()
+    const quiz = useCurrentQuiz();
+
+    if (!quiz) return null;
+
     return (
         <Paper
             sx={{
@@ -168,8 +134,8 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
                     <CustomTextField
                         onChange={({ target }) => {
                             updateQuiz(quiz.id, (quiz) => {
-                quiz.config.formContact.title = target.value
+                                quiz.config.formContact.title = target.value;
-              })
+                            });
                         }}
                         value={quiz.config.formContact.title}
                         placeholder="Заголовок формы" text={""} />
@@ -177,8 +143,8 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
 
                         onChange={({ target }) => {
                             updateQuiz(quiz.id, (quiz) => {
-                quiz.config.formContact.desc = target.value
+                                quiz.config.formContact.desc = target.value;
-              })
+                            });
                         }}
                         value={quiz.config.formContact.desc}
                         id="outlined-multiline-static"
@@ -202,7 +168,7 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
                     width: isTablet ? "80%" : "1px",
                     margin: "auto"
                 }}
-          orientation={isTablet ? "horisontal" : "vertical"}
+                    orientation={isTablet ? "horizontal" : "vertical"}
                 />
                 {children}
             </Box>
@@ -211,18 +177,21 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
 }
 
 
-const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => {
+const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: FormContactFieldName; drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
     const theme = useTheme();
-  const quiz = useCurrentQuiz()
+    const quiz = useCurrentQuiz();
+
+    if (!quiz) return null;
+
     return (
         <>
-      <Typography>{quiz.config.formContact[type].text || name}</Typography>
+            <Typography>{quiz.config.formContact.fields[type].text || name}</Typography>
             <Box
                 sx={{ display: "flex", mb: "10px" }}
             >
                 <Typography
                     sx={{
-            color: quiz.config.formContact[type].innerText ? "black" : "#9A9AAF",
+                        color: quiz.config.formContact.fields[type].innerText ? "black" : "#9A9AAF",
                         fontSize: "20px",
                         backgroundColor: theme.palette.background.default,
                         height: "48px",
@@ -238,9 +207,9 @@ const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: str
                         position: "relative"
                     }}
                 >
-          {quiz.config.formContact[type].innerText || placeholder}
+                    {quiz.config.formContact.fields[type].innerText || placeholder}
                     <IconButton
-            onClick={() => drawerNewFieldHC(type)}
+                        onClick={() => drawerNewFieldHC({ field: type, isEdit: true })}
                         sx={{
                             position: "absolute",
                             right: "0"
@@ -250,7 +219,7 @@ const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: str
                 </Typography>
                 <IconButton
                     onClick={() => updateQuiz(quiz?.id, (quiz) => {
-            quiz.config.formContact[type].used = false
+                        quiz.config.formContact.fields[type].used = false;
                     })}
                     sx={{
                         width: "48px",
@@ -262,35 +231,40 @@ const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: str
                 </IconButton>
             </Box>
         </>
-  )
+    );
-}
+};
 
-const ButtonsCard = ({ drawerNewFieldHC }: any) => {
+const ButtonsCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
     const theme = useTheme();
-  const quiz = useCurrentQuiz()
+    const quiz = useCurrentQuiz();
+
+    if (!quiz) return null;
 
     return (
         <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
-
+            {buttons.flatMap((contentData) => {
-      {
+                const content = quiz.config.formContact.fields[contentData.key];
-        buttons.map((contentData) => {
+                return content.used ? (
-          const content = quiz?.config.formContact[contentData.key]
+                    <SettingField
-          return content.used ? <SettingField drawerNewFieldHC={drawerNewFieldHC} key={contentData.key} type={contentData.key} name={content.text || contentData.name} placeholder={content.innerText || contentData.desc} /> : <></>
+                        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.fields.name.used &&
-          quiz?.config.formContact.address.used
+                quiz.config.formContact.fields.email.used &&
+                quiz.config.formContact.fields.phone.used &&
+                quiz.config.formContact.fields.text.used &&
+                quiz.config.formContact.fields.address.used
             ) ?
                 <></>
                 :
                 <Button
-            onClick={() => drawerNewFieldHC("all")}
+                    onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
                     variant="contained"
                     sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
                 >
@@ -313,19 +287,19 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
 
             <PseudoButton />
         </Box>
-  )
+    );
-}
+};
-const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void }) => {
+const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
     const theme = useTheme();
-  const [FC, setFC] = React.useState(false)
+    const [FC, setFC] = useState(false);
-  const openFC = () => setFC(true)
+    const openFC = () => setFC(true);
-  const closeFC = () => setFC(false)
+    const closeFC = () => setFC(false);
-  const popover = React.useRef(null);
+    const popover = useRef(null);
 
     return (
         <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
             <Button
-        onClick={() => drawerNewFieldHC("all")}
+                onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
                 variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
                 Добавить поле +
             </Button>
@@ -368,17 +342,20 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
       </Link> */}
             <PseudoButton />
         </Box>
-  )
+    );
-}
+};
 
 const PseudoButton = () => {
-  const quiz = useCurrentQuiz()
+    const quiz = useCurrentQuiz();
+
+    if (!quiz) return null;
+
     return (
         <TextField
             onChange={({ target }) => {
                 updateQuiz(quiz.id, (quiz) => {
-          quiz.config.formContact.button = target.value
+                    quiz.config.formContact.button = target.value;
-        })
+                });
             }}
             value={quiz.config.formContact.button}
             sx={{
@@ -400,8 +377,8 @@ const PseudoButton = () => {
             }}
             placeholder="Название кнопки"
         >
-      {quiz?.config.formContact.button || "Название кнопки"}
+            {quiz.config.formContact.button || "Название кнопки"}
         </TextField>
 
-  )
+    );
-}
+};

src/pages/ContactFormPage/NewField/ButtonsNewField.tsx

@@ -1,54 +0,0 @@
-import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
-import React from "react";
-import {Box, IconButton, useTheme} 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";
-
-interface Props {
-    switchState: string
-    SSHC: (data:string) => void
-    type: string
-}
-
-export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
-    const theme = useTheme();
-    const quiz = useCurrentQuiz()
-    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'},
-        {icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Телефон', value: 'phone'},
-        {icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Текст', value: 'text'},
-        {icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Адрес', value: 'address'},
-    ]
-
-    return (
-            <Box
-                sx={{
-                    padding: '20px',
-                    display: 'flex',
-                    gap: '10px'
-                }}
-            >
-                {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 && type === "all" ? '#ffffff' : theme.palette.grey3.main,
-                        }}
-                    >
-                        {e.icon}
-                        {e.title}
-                    </MiniButtonSetting>
-                    : 
-                    <></>
-                ))}
-            </Box>
-    )
-}

src/pages/ContactFormPage/NewField/NewFieldParent.tsx

@@ -6,18 +6,22 @@ import Button from "@mui/material/Button";
 import * as React from "react";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { updateQuiz } from "@root/quizes/actions";
+import { FormContactFieldName } from "@model/quizSettings";
 
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
-    defaultValue?: string;
+    defaultValue: FormContactFieldName;
     placeholderHelp: string;
     placeholderField: string;
-    drawerNewFieldHC:(a:string)=>void
+    closeDrawer: () => void;
 }
 
-export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
+export default function NewFieldParent({ closeDrawer, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
-    const quiz = useCurrentQuiz()
+    const quiz = useCurrentQuiz();
+
+    if (!quiz) return null;
+
     return (
         <Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
@@ -26,10 +30,10 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                 <CustomTextField
                     onChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].text = target.value
+                            quiz.config.formContact.fields[defaultValue].text = target.value;
-                        })
+                        });
                     }}
-                    value={quiz.config.formContact[defaultValue].text}
+                    value={quiz.config.formContact.fields[defaultValue].text}
 
                     placeholder={placeholderHelp} text={''} />
             </Box>
@@ -39,10 +43,10 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                 <CustomTextField
                     onChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].innerText = target.value
+                            quiz.config.formContact.fields[defaultValue].innerText = target.value;
-                        })
+                        });
                     }}
-                    value={quiz.config.formContact[defaultValue].innerText}
+                    value={quiz.config.formContact.fields[defaultValue].innerText}
 
                     placeholder={placeholderField} text={''} />
             </Box>
@@ -50,11 +54,11 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
 
                 <Typography>Ключ</Typography>
                 <TextField
-                    value={quiz.config.formContact[defaultValue].key}
+                    value={quiz.config.formContact.fields[defaultValue].key}
                     onChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].key = target.value
+                            quiz.config.formContact.fields[defaultValue].key = target.value;
-                        })
+                        });
                     }}
                     placeholder="text"
                     sx={{
@@ -67,14 +71,13 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                             backgroundColor: '#EEE4FC',
                         },
                     }}
-
                 />
                 <CustomCheckbox
-                    checked={quiz.config.formContact[defaultValue].required}
+                    checked={quiz.config.formContact.fields[defaultValue].required}
                     handleChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].required = target.checked
+                            quiz.config.formContact.fields[defaultValue].required = target.checked;
-                        })
+                        });
                     }}
 
                     label={"Обязательно к заполнению"} />
@@ -88,11 +91,11 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
             <Button
                 onClick={() => {
                     updateQuiz(quiz.id, (quiz) => {
-                        quiz.config.formContact[defaultValue].used = true
+                        quiz.config.formContact.fields[defaultValue].used = true;
-                    })
+                    });
-                    drawerNewFieldHC("")
+                    closeDrawer();
                 }}
                 variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
         </Box>
-    )
+    );
 }

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

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

src/pages/ContactFormPage/NewField/WindowNewField.tsx

@@ -1,39 +1,87 @@
-import * as React 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 { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
+import CloseIcon from '@mui/icons-material/Close';
+import { Typography, useTheme } from "@mui/material";
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-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';
+import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
+import { useEffect, useState } from 'react';
+import SwitchNewField from "./SwitchNewField";
 
 
-export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) {
+interface Props {
-    const quiz = useCurrentQuiz()
+    drawerState: FieldSettingsDrawerState;
+    closeDrawer: () => void;
+}
+
+export default function WindowNewField({ drawerState, closeDrawer }: Props) {
+    const quiz = useCurrentQuiz();
     const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState("");
+    const [switchState, setSwitchState] = useState("");
-    React.useEffect(() => {
+
-        for (let val in quiz?.config.formContact) {
+    useEffect(() => {
-            if (!quiz?.config.formContact[val]?.used && (val !== "title" && val !== "desc" && val !== "button")) {
+        if (!quiz) return;
-                setSwitchState(val)
+
-                return
+        if (drawerState.isEdit) {
+            return setSwitchState(drawerState.field);
+        }
+
+        for (let val in quiz.config.formContact.fields) {
+            if (!quiz.config.formContact.fields[val as FormContactFieldName].used) {
+                setSwitchState(val);
+                return;
             }
         }
-    }, [])
+    }, []);
+
+    if (!quiz) return null;
 
     const SSHC = (data: string) => {
-        setSwitchState(data)
+        setSwitchState(data);
-    }
+    };
+
+    const buttonSetting: { icon: JSX.Element; title: string; value: FormContactFieldName; }[] = [
+        { 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' },
+        { icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Телефон', value: 'phone' },
+        { icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Текст', value: 'text' },
+        { icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Адрес', value: 'address' },
+    ];
 
     return (
         <>
             <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
                 <Typography>Новое поле</Typography>
-                <Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
+                <Button onClick={closeDrawer} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
             </Box>
-
+            <Box sx={{
-            <Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
+                padding: '20px',
-            <SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
+                display: 'flex',
+                gap: '10px'
+            }}>
+                {buttonSetting.flatMap((e, i) => (
+                    drawerState.field === e.value || drawerState.field === "all"
+                        ? <MiniButtonSetting
+                            disabled={quiz.config.formContact.fields[e.value].used}
+                            key={i}
+                            onClick={() => { SSHC(e.value); }}
+                            sx={{
+                                backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
+                                color: switchState === e.value && drawerState.field === "all" ? '#ffffff' : theme.palette.grey3.main,
+                            }}
+                        >
+                            {e.icon}
+                            {e.title}
+                        </MiniButtonSetting>
+                        : []
+                ))}
+            </Box>
+            <SwitchNewField switchState={switchState} closeDrawer={closeDrawer} />
         </>
-    )
+    );
 }