fix wrong drawer contact field settings
This commit is contained in:
nflnkr
parent
25bdf1ba87
commit
552887de34
@ -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;
|
||||
email: FCField;
|
||||
phone: FCField;
|
||||
text: FCField;
|
||||
address: FCField;
|
||||
button: string
|
||||
fields: Record<FormContactFieldName, FormContactFieldData>;
|
||||
button: string;
|
||||
};
|
||||
info: {
|
||||
phonenumber: string;
|
||||
@ -78,13 +74,20 @@ export interface QuizConfig {
|
||||
meta: string;
|
||||
}
|
||||
|
||||
type FCField = {
|
||||
text: string
|
||||
innerText: string
|
||||
key: string
|
||||
required: boolean
|
||||
used: boolean
|
||||
}
|
||||
export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";
|
||||
|
||||
type FormContactFieldData = {
|
||||
text: string;
|
||||
innerText: string;
|
||||
key: string;
|
||||
required: boolean;
|
||||
used: boolean;
|
||||
};
|
||||
|
||||
export type FieldSettingsDrawerState = {
|
||||
field: FormContactFieldName | "all" | "",
|
||||
isEdit: boolean;
|
||||
};
|
||||
|
||||
export const defaultQuizConfig: QuizConfig = {
|
||||
type: null,
|
||||
@ -127,42 +130,44 @@ export const defaultQuizConfig: QuizConfig = {
|
||||
formContact: {
|
||||
title: "",
|
||||
desc: "",
|
||||
name: {
|
||||
text: "",
|
||||
innerText: "",
|
||||
key: "",
|
||||
required: false,
|
||||
used: true
|
||||
fields: {
|
||||
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
|
||||
},
|
||||
},
|
||||
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: ""
|
||||
button: "",
|
||||
},
|
||||
meta: "",
|
||||
};
|
||||
|
||||
@ -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,287 +17,261 @@ 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 = [
|
||||
{
|
||||
name: "Имя",
|
||||
desc: "Дмитрий",
|
||||
key: "name"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
]
|
||||
const buttons: { key: FormContactFieldName, name: string, desc: string; }[] = [
|
||||
{ name: "Имя", desc: "Дмитрий", key: "name" },
|
||||
{ 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 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 drawerMessengerHC = (bool: boolean) => {
|
||||
setDrawerMessenger(bool);
|
||||
};
|
||||
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return (
|
||||
<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,
|
||||
|
||||
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
|
||||
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>{" "}
|
||||
{/* <Popover>
|
||||
}}
|
||||
>
|
||||
Как собрать данные посетителя
|
||||
</Link>{" "}
|
||||
{/* <Popover>
|
||||
<Info />
|
||||
</Popover> */}
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
{
|
||||
!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" }}>
|
||||
<Box sx={{ display: "flex", gap: "8px" }}>
|
||||
<Button
|
||||
onClick={decrementCurrentStep}
|
||||
variant="outlined">
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
|
||||
Установка квиза
|
||||
</Button>
|
||||
</Box>
|
||||
{
|
||||
!quiz?.config.formContact.fields.name.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 ?
|
||||
<ContactFormParent>
|
||||
<EmptyCard drawerNewFieldHC={setDrawerNewField} />
|
||||
</ContactFormParent>
|
||||
:
|
||||
<ContactFormParent>
|
||||
<ButtonsCard drawerNewFieldHC={setDrawerNewField} />
|
||||
</ContactFormParent>
|
||||
}
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
|
||||
<Box sx={{ display: "flex", gap: "8px" }}>
|
||||
<Button
|
||||
onClick={decrementCurrentStep}
|
||||
variant="outlined">
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
|
||||
Установка квиза
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<DrawerNewField isOpenDrawer={drawerNewField.field} drawerNewFieldHC={() => setDrawerNewField({ field: "", isEdit: false })}>
|
||||
<WindowNewField drawerState={drawerNewField} closeDrawer={() => setDrawerNewField({ field: "", isEdit: false })} />
|
||||
</DrawerNewField>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
<DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
|
||||
<WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
|
||||
</DrawerNewField>
|
||||
|
||||
</Box>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
function ContactFormParent({ outerContainerSx: sx, children }: Props) {
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
const quiz = useCurrentQuiz()
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
borderRadius: "12px",
|
||||
margin: "20px 0",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
|
||||
<Box
|
||||
sx={{
|
||||
// borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
|
||||
maxWidth: "386px",
|
||||
width: "100%",
|
||||
padding: "100px 20px 20px 20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<CustomTextField
|
||||
onChange={({ target }) => {
|
||||
updateQuiz(quiz.id, (quiz) => {
|
||||
quiz.config.formContact.title = target.value
|
||||
})
|
||||
}}
|
||||
value={quiz.config.formContact.title}
|
||||
placeholder="Заголовок формы" text={""} />
|
||||
<TextField
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const quiz = useCurrentQuiz();
|
||||
|
||||
onChange={({ target }) => {
|
||||
updateQuiz(quiz.id, (quiz) => {
|
||||
quiz.config.formContact.desc = target.value
|
||||
})
|
||||
}}
|
||||
value={quiz.config.formContact.desc}
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder="Дополнительный текст формы"
|
||||
if (!quiz) return null;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
||||
"& .MuiInputBase-root": {
|
||||
borderRadius: "10px",
|
||||
alignItems: "start",
|
||||
color: theme.palette.grey2.main,
|
||||
color:"black",
|
||||
},
|
||||
maxWidth: "796px",
|
||||
width: "100%",
|
||||
borderRadius: "12px",
|
||||
margin: "20px 0",
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Divider sx={{
|
||||
height: isTablet ? "1px" : "80%",
|
||||
width: isTablet ? "80%" : "1px",
|
||||
margin: "auto"
|
||||
}}
|
||||
orientation={isTablet ? "horisontal" : "vertical"}
|
||||
/>
|
||||
{children}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
>
|
||||
<Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
|
||||
<Box
|
||||
sx={{
|
||||
// borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
|
||||
maxWidth: "386px",
|
||||
width: "100%",
|
||||
padding: "100px 20px 20px 20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<CustomTextField
|
||||
onChange={({ target }) => {
|
||||
updateQuiz(quiz.id, (quiz) => {
|
||||
quiz.config.formContact.title = target.value;
|
||||
});
|
||||
}}
|
||||
value={quiz.config.formContact.title}
|
||||
placeholder="Заголовок формы" text={""} />
|
||||
<TextField
|
||||
|
||||
onChange={({ target }) => {
|
||||
updateQuiz(quiz.id, (quiz) => {
|
||||
quiz.config.formContact.desc = target.value;
|
||||
});
|
||||
}}
|
||||
value={quiz.config.formContact.desc}
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={8}
|
||||
placeholder="Дополнительный текст формы"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
||||
"& .MuiInputBase-root": {
|
||||
borderRadius: "10px",
|
||||
alignItems: "start",
|
||||
color: theme.palette.grey2.main,
|
||||
color: "black",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Divider sx={{
|
||||
height: isTablet ? "1px" : "80%",
|
||||
width: isTablet ? "80%" : "1px",
|
||||
margin: "auto"
|
||||
}}
|
||||
orientation={isTablet ? "horizontal" : "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 />
|
||||
const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: FormContactFieldName; drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz();
|
||||
|
||||
</IconButton>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (!quiz) return null;
|
||||
|
||||
const ButtonsCard = ({ drawerNewFieldHC }: any) => {
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz()
|
||||
return (
|
||||
<>
|
||||
<Typography>{quiz.config.formContact.fields[type].text || name}</Typography>
|
||||
<Box
|
||||
sx={{ display: "flex", mb: "10px" }}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: quiz.config.formContact.fields[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.fields[type].innerText || placeholder}
|
||||
<IconButton
|
||||
onClick={() => drawerNewFieldHC({ field: type, isEdit: true })}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "0"
|
||||
}}>
|
||||
<GearIcon height="20px" width="20px" color="#7e2aea" />
|
||||
</IconButton>
|
||||
</Typography>
|
||||
<IconButton
|
||||
onClick={() => updateQuiz(quiz?.id, (quiz) => {
|
||||
quiz.config.formContact.fields[type].used = false;
|
||||
})}
|
||||
sx={{
|
||||
width: "48px",
|
||||
ml: "5px"
|
||||
}}
|
||||
>
|
||||
<Trash />
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
{
|
||||
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} /> : <></>
|
||||
})
|
||||
}
|
||||
const ButtonsCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz();
|
||||
|
||||
{
|
||||
(
|
||||
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
|
||||
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];
|
||||
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.fields.name.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({ field: "all", isEdit: false })}
|
||||
variant="contained"
|
||||
sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
|
||||
>
|
||||
Добавить поле +
|
||||
</Button>
|
||||
}
|
||||
{/* <Link
|
||||
component="button"
|
||||
// onClick={() => drawerMessengerHC(true)}
|
||||
sx={{
|
||||
@ -311,51 +285,51 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
|
||||
Добавить мессенджеры
|
||||
</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} />
|
||||
<PseudoButton />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
|
||||
const theme = useTheme();
|
||||
const [FC, setFC] = useState(false);
|
||||
const openFC = () => setFC(true);
|
||||
const closeFC = () => setFC(false);
|
||||
const popover = useRef(null);
|
||||
|
||||
<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> Имя, Email, Телефон
|
||||
</Typography>
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
|
||||
<Button
|
||||
onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
|
||||
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>
|
||||
</Box>
|
||||
{/* <Link
|
||||
<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> Имя, Email, Телефон
|
||||
</Typography>
|
||||
|
||||
</Popover>
|
||||
</Box>
|
||||
{/* <Link
|
||||
sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
@ -366,42 +340,45 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
|
||||
>
|
||||
Добавить мессенджеры
|
||||
</Link> */}
|
||||
<PseudoButton />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
<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>
|
||||
const quiz = useCurrentQuiz();
|
||||
|
||||
)
|
||||
}
|
||||
if (!quiz) return null;
|
||||
|
||||
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>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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) {
|
||||
const quiz = useCurrentQuiz()
|
||||
export default function NewFieldParent({ closeDrawer, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
|
||||
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
|
||||
})
|
||||
drawerNewFieldHC("")
|
||||
quiz.config.formContact.fields[defaultValue].used = true;
|
||||
});
|
||||
closeDrawer();
|
||||
}}
|
||||
variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import NewFieldParent from "./NewFieldParent";
|
||||
import {FormControlLabel} from "@mui/material";
|
||||
import { FormControlLabel } from "@mui/material";
|
||||
import SelectMask from "../SelectMask";
|
||||
import CustomizedSwitch from "@ui_kit/CustomSwitch";
|
||||
|
||||
@ -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)
|
||||
}
|
||||
const SwitchMaskHC = (bool: boolean) => {
|
||||
setSwitchMask(bool);
|
||||
};
|
||||
|
||||
switch (switchState) {
|
||||
case 'name':
|
||||
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
|
||||
break;
|
||||
return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'} />);
|
||||
case 'email':
|
||||
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
|
||||
break;
|
||||
return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'} />);
|
||||
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/>}
|
||||
@ -45,20 +43,17 @@ export default function SwitchNewField({switchState ='name', drawerNewFieldHC}:
|
||||
/> */}
|
||||
|
||||
{SwitchMask ?
|
||||
<SelectMask/>
|
||||
<SelectMask />
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</NewFieldParent>
|
||||
);
|
||||
break;
|
||||
case 'text':
|
||||
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
|
||||
break;
|
||||
return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'} />);
|
||||
case 'address':
|
||||
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
|
||||
break;
|
||||
return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'} />);
|
||||
default:
|
||||
return (<></>)
|
||||
return (<></>);
|
||||
}
|
||||
}
|
||||
@ -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 }) {
|
||||
const quiz = useCurrentQuiz()
|
||||
interface Props {
|
||||
drawerState: FieldSettingsDrawerState;
|
||||
closeDrawer: () => void;
|
||||
}
|
||||
|
||||
export default function WindowNewField({ drawerState, closeDrawer }: Props) {
|
||||
const quiz = useCurrentQuiz();
|
||||
const theme = useTheme();
|
||||
const [switchState, setSwitchState] = React.useState("");
|
||||
React.useEffect(() => {
|
||||
for (let val in quiz?.config.formContact) {
|
||||
if (!quiz?.config.formContact[val]?.used && (val !== "title" && val !== "desc" && val !== "button")) {
|
||||
setSwitchState(val)
|
||||
return
|
||||
const [switchState, setSwitchState] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!quiz) 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><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
|
||||
<SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
|
||||
<Box sx={{
|
||||
padding: '20px',
|
||||
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} />
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user