наполнение правой стороны настроек квиза складывается в стор

src/pages/startPage/StartPageSettings.tsx

@@ -34,6 +34,8 @@ export default function StartPageSettings() {
     const params = Number(useParams().quizId);
     const theme = useTheme();
     const designType = listQuizes[params].startpage
+    const StartPageClone = listQuizes[params]
+    console.log(StartPageClone)
     const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
     const [alignType, setAlignType] = useState<AlignType>("left");
     //дропзона
@@ -50,14 +52,54 @@ export default function StartPageSettings() {
         setReady(true)
     }
 
-    React.useEffect(() => {
-        if (dropZone.current) {
-            dropZone.current.addEventListener("dragenter", dragenterHC)
-        }
-        return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
-    },)
+    // React.useEffect(() => {
+    //     if (dropZone.current) {
+    //         dropZone.current.addEventListener("dragenter", dragenterHC)
+    //     }
+    //     return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
+    // },)
 
+    const mutationHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.startpage.description = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
 
+    const mutationButtonHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.startpage.button = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
+
+    const mutationPhoneHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.info.phonenumber = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
+
+    const mutationSiteHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.info.site = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
+
+    const mutationLawHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.info.law = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
+
+    const mutationOrgNameHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.info.orgname = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
+
+    const mutationOrgMetaHC = (e: any) => {
+        let SPageClone = listQuizes[params].config1
+        SPageClone.meta = e.target.value
+        updateQuizesList(params, {config1: SPageClone })
+    }
 
     return (
         <>
@@ -294,20 +336,54 @@ export default function StartPageSettings() {
                     flex: `1 1 795px`,
                 }}>
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <CustomTextField
+                        placeholder="Текст-заполнитель — это текст, который"
+                        text={listQuizes[params].name}
+                        onChange={e => updateQuizesList(params, {name: e.target.value})}
+                    />
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <CustomTextField
+                        placeholder="Текст-заполнитель — это текст, который "
+                        text={listQuizes[params].config1.startpage.description}
+                        onChange={mutationHC}
+                    />
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
-                    <CustomTextField placeholder="Начать" text={""} />
+                    <CustomTextField
+                        placeholder="Начать"
+                        text={listQuizes[params].config1.startpage.button}
+                        onChange={mutationButtonHC}
+                    />
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
-                    <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-                    <CustomCheckbox label="Кликабельный" />
+                    <CustomTextField
+                        placeholder="+7 900 000 00 00"
+                        text={listQuizes[params].config1.info.phonenumber}
+                        onChange={mutationPhoneHC}
+                    />
+                    <CustomCheckbox label="Кликабельный"
+                                    checked={listQuizes[params].config1.info.clickable}
+                                    handleChange={(e) => {console.log(e.target.checked)
+                                        let SPageClone = listQuizes[params].config1
+                                        SPageClone.info.clickable = e.target.checked
+                                        updateQuizesList(params, {config1: SPageClone })}
+                                    }/>
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <CustomTextField
+                        placeholder="Текст-заполнитель — это текст, который "
+                        text={listQuizes[params].config1.info.orgname}
+                        onChange={mutationOrgNameHC}
+                    />
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <CustomTextField
+                        placeholder="Текст-заполнитель — это текст, который "
+                        text={listQuizes[params].config1.info.site}
+                        onChange={mutationSiteHC}
+                    />
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <CustomTextField
+                        placeholder="Текст-заполнитель — это текст, который "
+                        text={listQuizes[params].config1.info.law}
+                        onChange={mutationLawHC}
+                    />
                     <Link sx={{
                         mt: "20px",
                         fontSize: "16px",
@@ -316,7 +392,7 @@ export default function StartPageSettings() {
                         textDecorationColor: theme.palette.brightPurple.main
                     }}>Дополнительно</Link>
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config1.meta} onChange={mutationOrgMetaHC} />
                     <Typography sx={{
                         mt: "20px",
                         fontSize: "16px",

src/stores/quizes.ts

@@ -37,7 +37,30 @@ interface Quizes {
     group_id: number,
     step: number,
     startpage: string,
-    config1?: any
+    config1:  {
+        type: string,
+        logo: string,
+        startpage: {
+            description: string,
+            button: string,
+            position: string,
+            background: {
+                type: string,
+                desktop: string,
+                mobile: string,
+                video: string,
+                cycle: boolean
+            },
+        },
+        info: {
+            phonenumber: string,
+            clickable: boolean,
+            orgname: string,
+            site: string,
+            law?: string
+        },
+        meta: string,
+    }
 }
 
 export const quizStore = create<QuizStore>()(
@@ -98,17 +121,14 @@ export const quizStore = create<QuizStore>()(
                     "startpage": "",
                     "config1": {
                         "type": "", // quiz или form
-                        "favicon": [
-                            {"attrs": "320*650apple","link":"hub.pena.digital/fav/squiz1.jpg"}
-                        ],
                         "logo": "hub.pena.digital/img/logo",
                         "startpage": {
-                            "description": "",// приветственный текст опроса
+                            "description": "привет!",// приветственный текст опроса
                             "button": "Начать", // текст на кнопке начала опроса
                             "position": "ltr", // ltr или rtl. отображение элементов поверх фона
                             "background": {
                                 "type": "image", //image или video
-                                "desctop": "hub.pena.digital/img/back/full.png",
+                                "desktop": "hub.pena.digital/img/back/full.png",
                                 "mobile": "hub.pena.digital/img/back/mobile.png",
                                 "video":"hub.pena.digital/vid/back/vi1.mp4",
                                 "cycle": true //зацикливать видео или нет

src/ui_kit/CustomTextField.tsx

@@ -1,12 +1,14 @@
 import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material";
+import {ChangeEvent} from "react";
 
 interface CustomTextFieldProps {
     placeholder: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     text?: string;
     sx?: SxProps<Theme>;
 }
 
-export default function CustomTextField({ placeholder, text, sx}: CustomTextFieldProps) {
+export default function CustomTextField({ placeholder, text, sx, onChange}: CustomTextFieldProps) {
     const theme = useTheme();
 
     return (
@@ -19,6 +21,7 @@ export default function CustomTextField({ placeholder, text, sx}: CustomTextFiel
                 defaultValue={text}
                 fullWidth
                 placeholder={placeholder}
+                onChange={onChange}
                 sx={{
                     "& .MuiInputBase-root": {
                         backgroundColor: theme.palette.background.default,