Driwer для кнопок мессенджеры и поле ввода

src/pages/ContactFormPage/ButtonSettingForms.tsx

@@ -1,10 +1,6 @@
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import React from "react";
 import SettingIcon from "@icons/questionsPage/settingIcon";
-import Clue from "@icons/questionsPage/clue";
-import HideIcon from "@icons/questionsPage/hideIcon";
-import CopyIcon from "@icons/questionsPage/CopyIcon";
-import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import Branching from "@icons/questionsPage/branching";
 import {Box, useTheme} from "@mui/material";
 import SupplementIcon from "@icons/ContactFormIcon/supplementIcon";
@@ -14,7 +10,7 @@ interface Props {
     SSHC: (data:string) => void
 }
 
-export default function ButtonsOptions ({SSHC, switchState}:Props) {
+export default function ButtonSettingForms ({SSHC, switchState}:Props) {
     const theme = useTheme();
     const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
         {icon: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'},

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -1,13 +1,17 @@
 import React from "react";
 import Stepper from '@ui_kit/Stepper';
-import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from '@mui/material';
+import {Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField} from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CustomTextField from "@ui_kit/CustomTextField";
 import OneIcon from "../../components/icons/questionsPage/OneIcon";
-import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
 import AddPlus from "../../components/icons/questionsPage/addPlus";
 import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
 import InfoIcon from "@icons/InfoIcon";
+import ButtonSettingForms from "./ButtonSettingForms";
+import SwitchContactForm from "./switchContactForm";
+import DrawerNewField from "./DrawerParent";
+import WindowNewField from "./NewField/WindowNewField";
+import WindowMessengers from "./Massengers/WindowMessengers";
 
 export default function ContactFormPage() {
 
@@ -34,7 +38,92 @@ export default function ContactFormPage() {
                     textDecorationColor: theme.palette.brightPurple.main
                 }}>Как собрать данные посетителя</Link> <InfoIcon/>
             </Box>
-            <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex',}}>
+            <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={""} />
+                    <DrawerNewField><WindowNewField/></DrawerNewField>
+                    <DrawerNewField>
+                    {/*    <Link sx={{*/}
+                    {/*    mt: "20px",*/}
+                    {/*    fontSize: "16px",*/}
+                    {/*    lineHeight: "19px",*/}
+                    {/*    color: theme.palette.brightPurple.main,*/}
+                    {/*    textDecorationColor: theme.palette.brightPurple.main*/}
+                    {/*}}>Добавить мессенджеры</Link>*/}
+                    <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>
+            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
+                <IconButton>
+                    <AddPlus/>
+                </IconButton>
+                <Box sx={{display: 'flex', gap: '8px'}}>
+                    <Button variant='outlined'>
+                        <ArrowLeft/>
+                    </Button>
+                    <Button variant='contained' sx={{padding: '10px 20px'}}>
+                        Установка квиза
+                    </Button>
+                </Box>
+            </Box>
+        </>
+    )
+}
+
+interface Props {
+    outerContainerSx?: SxProps<Theme>;
+    children?: React.ReactNode;
+}
+
+function ContactFormParent({outerContainerSx: sx, children }: Props) {
+    const theme = useTheme();
+    const [switchState, setSwitchState] = React.useState('setting');
+    const SSHC = (data: string) => {
+        setSwitchState(data)
+    }
+    return(
+        <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex', flexDirection: 'column'}}>
+            <Box sx={{width: '100%', display: 'flex'}} >
                 <Box
                     sx={{
                         borderRight: `1px solid ${theme.palette.grey2.main}`,
@@ -46,64 +135,30 @@ export default function ContactFormPage() {
                         gap: '20px'
                     }}>
                     <CustomTextField placeholder="Заголовок формы" text={""}/>
-                    <CustomTextField placeholder="Дополнительный текст формы" text={""}
+                    <TextField
-                                     sx={{
+                        id="outlined-multiline-static"
-                                         "& .MuiInputBase-root": {
+                        multiline
-                                             height: "48px",
+                        rows={8}
-                                             borderRadius: "10px",
+                        placeholder="Дополнительный текст формы"
-                                             minHeight: '287px',
+                        sx={{
-                                             alignItems: 'start',
+                            backgroundColor: theme.palette.background.default,
-                                         },
+
-                                     }} />
+                            "& .MuiInputBase-root": {
+                                borderRadius: "10px",
+                                alignItems: 'start',
+                                color: theme.palette.grey2.main,
+                            },
+                        }}
+                    />
                 </Box>
-                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%'}}>
+                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%', gap: '20px'}}>
-                    <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
+                    {children}
-                        <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 variant='main' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
-                            Добавить поле +
-                        </Button>
-                        <Link sx={{
-                            mt: "20px",
-                            fontSize: "16px",
-                            lineHeight: "19px",
-                            color: theme.palette.brightPurple.main,
-                            textDecorationColor: theme.palette.brightPurple.main
-                        }}>Добавить мессенджеры</Link>
-                        <Button variant='main' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
-                            Название кнопки
-                        </Button>
-                    </Box>
-                </Box>
-
-                {/*<Box*/}
-                {/*    sx={{width: '100%', maxWidth: "760px", display: 'flex', alignItems: 'center', gap: '10px', padding: '20px' }}*/}
-                {/*>*/}
-                {/*</Box>*/}
-
-
-            </Paper>
-            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
-                <IconButton>
-                    <AddPlus/>
-                </IconButton>
-                <Box sx={{display: 'flex', gap: '8px'}}>
-                    <Button variant='outmain'>
-                        <ArrowLeft/>
-                    </Button>
-                    <Button variant='main' sx={{padding: '10px 20px'}}>
-                        Установка квиза
-                    </Button>
                 </Box>
             </Box>
-        </>
+            <Box>
+                <ButtonSettingForms switchState={switchState} SSHC={SSHC}/>
+                <SwitchContactForm switchState={switchState}/>
+            </Box>
+        </Paper>
     )
 }

src/pages/ContactFormPage/DrawerParent.tsx

@@ -7,17 +7,28 @@ import {SxProps, Theme} from "@mui/material";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
-    isOpen: boolean;
-    openHC: (arg0: boolean) => void
 }
 
-export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
+export default function DrawerNewField({outerContainerSx: sx, children }: Props) {
+    const [state, setState] = React.useState({
+        right: false,
+    });
+
+    const toggleDrawer =
+        (anchor: 'right', open: boolean) =>
+            () => {
+                setState({ ...state, 'right' : open });
+            };
+
     return (
         <>
+            <Button onClick={toggleDrawer("right", true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
+                Добавить поле +
+            </Button>
             <Drawer
                 anchor='right'
-                open={isOpen}
+                open={state['right']}
-                onClose={() => openHC(false)}
+                onClose={toggleDrawer("right", false)}
             >
                 <Box
                     sx={{ width: 450 }}

src/pages/ContactFormPage/Massengers/WindowMessengers.tsx

@@ -15,7 +15,7 @@ export default function WindowMessengers() {
     const [selectMessenger, setSelectMessenger] = useState<SelectMessenger>("contact");
     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', width: '100%', background: theme.palette.background.default}}>
                 <Typography>Настройки мессенджеров</Typography>
                 <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
             </Box>
@@ -61,7 +61,6 @@ export default function WindowMessengers() {
                 :
                 <></>
             }
-            <Button variant='contained' sx={{maxWidth: '125px', margin: '20px'}}>Добавить</Button>
         </>
     )
 }

src/pages/ContactFormPage/NewField/ButtonsNewField.tsx

@@ -26,6 +26,11 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
     ]
 
     return (
+        <Box sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '100%',
+        }}>
             <Box
                 sx={{
                     padding: '20px',
@@ -46,5 +51,6 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
                     </MiniButtonSetting>
                 ))}
             </Box>
+        </Box>
     )
 }

src/pages/ContactFormPage/NewField/NewFieldParent.tsx

@@ -34,7 +34,7 @@ export default function NewFieldParent ({defaultValue, placeholderHelp, placehol
                     <TextField
                         disabled
                         id="outlined-disabled"
-                        value={defaultValue}
+                        defaultValue={defaultValue}
                         sx={{
                             "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                                 border: 'none'

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

@@ -11,10 +11,6 @@ interface Props {
 
 
 export default function SwitchNewField({switchState ='name'}: Props) {
-    const [SwitchMask, setSwitchMask] = React.useState(false);
-    const SwitchMaskHC = (bool:boolean) => {
-        setSwitchMask(bool)
-    }
     switch (switchState) {
         case 'name':
             return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
@@ -35,16 +31,8 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                             display: 'flex',
                             justifyContent: 'space-between'
                         }}
-                        onClick={() => {
-                            SwitchMaskHC(!SwitchMask)
-                        }}
                     />
-                    {SwitchMask ?
+                    <SelectMask/>
-                        <SelectMask/>
-                        :
-                        <></>
-                    }
-
                 </NewFieldParent>
             );
             break;

src/pages/ContactFormPage/NewField/WindowNewField.tsx

@@ -10,7 +10,7 @@ import {useState} from "react";
 
 export default function WindowNewField() {
     const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('name');
+    const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
         setSwitchState(data)
     }
@@ -18,7 +18,7 @@ export default function WindowNewField() {
 
     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', width: '100%', background: theme.palette.background.default}}>
                 <Typography>Новое поле</Typography>
                 <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
             </Box>

src/pages/ContactFormPage/SelectMask.tsx

@@ -7,10 +7,10 @@ import {useState} from "react";
 type SelectMask = 'country'| 'mymask';
 export default function SelectMask () {
 
-    const [State, setState] = React.useState(false);
+    // const [State, setState] = React.useState('');
-    const StateHC = (bool:boolean) => {
+    // const StateHC = (data: string) => {
-        setState(bool)
+    //     setState(data)
-    }
+    // }
 
     const theme = useTheme()
     const [selectMask, setSelectMask] = useState<SelectMask>("country");
@@ -37,39 +37,34 @@ export default function SelectMask () {
                         component="button"
                         variant="body2"
                         sx={{color: theme.palette.brightPurple.main, textAlign: 'left'}}
-                        onClick={() => {
+                        // onClick={() => {
-                            StateHC(!State)
+                        //     StateHC()
-                        }}
+                        // }}
                     >
                         Расширенные настройки
                     </Link>
-                    {State ?
+                    <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
-                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
+                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                            <Typography>Страна по умолчанию</Typography>
-                                <Typography>Страна по умолчанию</Typography>
+                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
-                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
-                            </Box>
-                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                                <Typography>Выделенные страны</Typography>
-                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут показываться вверху списка</Typography>
-                            </Box>
-                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                                <Typography>Показываемые страны</Typography>
-                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Будут показываться только выбранные страны</Typography>
-                            </Box>
-                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                                <Typography>Игнорируемые страны</Typography>
-                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
-                            </Box>
                         </Box>
-                        :
+                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                        <></>
+                            <Typography>Выделенные страны</Typography>
-                    }
+                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
-
+                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут показываться вверху списка</Typography>
+                        </Box>
+                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                            <Typography>Показываемые страны</Typography>
+                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Будут показываться только выбранные страны</Typography>
+                        </Box>
+                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                            <Typography>Игнорируемые страны</Typography>
+                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
+                        </Box>
+                    </Box>
                 </>
                 :
                 <>

src/pages/ContactFormPage/switchContactForm.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import SettingForm from "./settingForm";
+import BranchingForm from "./BranchingForm";
 
 
 
@@ -6,17 +8,17 @@ interface Props {
     switchState: string,
 }
 
-export default function SwitchAnswerOptions({switchState = 'setting' }: Props) {
+export default function SwitchContactForm({switchState = 'setting' }: Props) {
 
     switch (switchState) {
         case 'setting':
-            // return (<ResponseSettings/>);
+            return (<SettingForm/>);
             break;
         case 'branching':
-            // return (<BranchingQuestions/>);
+            return (<BranchingForm/>);
             break;
         case 'supplement':
-            // return (<UploadImage/>);
+            return (<></>);
             break;
         default:
             return (<></>)

src/ui_kit/CustomTextField.tsx

@@ -2,7 +2,7 @@ import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material";
 
 interface CustomTextFieldProps {
     placeholder: string;
-    text: string;
+    text?: string;
     sx?: SxProps<Theme>;
 }
 
@@ -16,12 +16,12 @@ export default function CustomTextField({ placeholder, text, sx}: CustomTextFiel
             sx={{ p: 0 }}
         >
             <TextField
-                // value={text}
+                value={text}
                 fullWidth
                 placeholder={placeholder}
                 sx={{
-                    backgroundColor: theme.palette.background.default,
                     "& .MuiInputBase-root": {
+                        backgroundColor: theme.palette.background.default,
                         height: "48px",
                         borderRadius: "10px",
 

src/utils/themes/generic.ts

@@ -29,7 +29,7 @@ const theme = createTheme({
             variants: [
                 {
                     props: {
-                        variant: 'main' },
+                        variant: 'contained' },
                     style: {
                         backgroundColor: "#7E2AEA",
                         padding: '13px 20px',
@@ -43,7 +43,7 @@ const theme = createTheme({
                 },
                 {
                     props: {
-                        variant: 'outmain' },
+                        variant: 'outlined' },
                     style: {
                         backgroundColor: "#F2F3F7",
                         padding: '10px 20px',