diff --git a/src/components/icons/ContactFormIcon/AddressIcon.tsx b/src/components/icons/ContactFormIcon/AddressIcon.tsx new file mode 100644 index 00000000..b16d1fb3 --- /dev/null +++ b/src/components/icons/ContactFormIcon/AddressIcon.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + +interface Props { + color: string; +} + +export default function AddressIcon({color}: Props) { + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/ContactFormIcon/EmailIcon.tsx b/src/components/icons/ContactFormIcon/EmailIcon.tsx new file mode 100644 index 00000000..77098257 --- /dev/null +++ b/src/components/icons/ContactFormIcon/EmailIcon.tsx @@ -0,0 +1,26 @@ +import { Box } from "@mui/material"; + +interface Props { + color: string; +} + +export default function EmailIcon({color}: Props) { + + return ( + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/ContactFormIcon/NameIcon.tsx b/src/components/icons/ContactFormIcon/NameIcon.tsx new file mode 100644 index 00000000..096a54f5 --- /dev/null +++ b/src/components/icons/ContactFormIcon/NameIcon.tsx @@ -0,0 +1,27 @@ +import { Box } from "@mui/material"; + +interface Props { + color: string; +} + +export default function NameIcon({color}: Props) { + + return ( + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/ContactFormIcon/PhoneIcon.tsx b/src/components/icons/ContactFormIcon/PhoneIcon.tsx new file mode 100644 index 00000000..b84c47b9 --- /dev/null +++ b/src/components/icons/ContactFormIcon/PhoneIcon.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; + +interface Props { + color: string; +} + +export default function PhoneIcon({color}: Props) { + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/icons/ContactFormIcon/TextIcon.tsx b/src/components/icons/ContactFormIcon/TextIcon.tsx new file mode 100644 index 00000000..4d74bd83 --- /dev/null +++ b/src/components/icons/ContactFormIcon/TextIcon.tsx @@ -0,0 +1,30 @@ +import { Box } from "@mui/material"; + +interface Props { + color: string; +} + +export default function TextIcon({color}: Props) { + + return ( + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/BranchingForm.tsx b/src/pages/ContactFormPage/BranchingForm.tsx index 693da49f..05f1775b 100644 --- a/src/pages/ContactFormPage/BranchingForm.tsx +++ b/src/pages/ContactFormPage/BranchingForm.tsx @@ -1 +1,156 @@ -export {} \ No newline at end of file +import { + Box, + Button, + FormControl, FormControlLabel, Link, + MenuItem, + Modal, Radio, RadioGroup, + Select, + SelectChangeEvent, + Typography, + useTheme +} from "@mui/material"; +import * as React from "react"; +import CustomButton from "../../components/CustomButton"; +import SelectableButton from "../../components/CreateQuiz/SelectableButton"; +import {useState} from "react"; + +type LogicForm = "conditions" | "results"; + +export default function BranchingForm() { + const theme = useTheme() + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + const [logicForm, setLogicForm] = useState("conditions"); + const [display, setDisplay] = React.useState('1'); + const handleChange = (event: SelectChangeEvent) => { + setDisplay(event.target.value); + } + + const [value, setValue] = React.useState('1'); + + const handleChangeRadio = (event: React.ChangeEvent) => { + setValue((event.target as HTMLInputElement).value); + }; + return( + <> + + + + + Условия показа формы + + + + + Логика показа форм + + + setLogicForm("conditions")}> + От условий + + setLogicForm("results")}> + С результатами + + + + {logicForm === 'conditions' ? + + <> + { + // }} + > + Добавить условие + + + + + } label="Все условия обязательны" /> + } label="Обязательно хотя бы одно условие" /> + + + + : + <> + У вас пока что нет результатов. + + + } + + + + Отмена + Готово + + + + + + ); +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/ButtonSettingForms.tsx b/src/pages/ContactFormPage/ButtonSettingForms.tsx index dadc4066..f92c5ea3 100644 --- a/src/pages/ContactFormPage/ButtonSettingForms.tsx +++ b/src/pages/ContactFormPage/ButtonSettingForms.tsx @@ -1,12 +1,8 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import React from "react"; import SettingIcon from "@icons/questionsPage/settingIcon"; -import Clue from "@icons/questionsPage/clue"; import Branching from "@icons/questionsPage/branching"; -import {Box, IconButton, useTheme} from "@mui/material"; -import HideIcon from "@icons/questionsPage/hideIcon"; -import CopyIcon from "@icons/questionsPage/CopyIcon"; -import DeleteIcon from "@icons/questionsPage/deleteIcon"; +import {Box, useTheme} from "@mui/material"; import SupplementIcon from "@icons/ContactFormIcon/supplementIcon"; interface Props { @@ -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: , title: 'Настройки', value: 'setting'}, diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx index e992a1e5..3bd46748 100644 --- a/src/pages/ContactFormPage/ContactFormPage.tsx +++ b/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 }}>Как собрать данные посетителя - + + + + + + + Имя* + + E-mail* + + Телефон* + + + + {/* Добавить мессенджеры*/} + + + + + + + + + + + + + + + + + Будут показаны поля по умолчанию + + + Добавить мессенджеры + + + + + + + + + + + + + ) +} + +interface Props { + outerContainerSx?: SxProps; + 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( + + - + - - - - - - - Имя* - - E-mail* - - Телефон* - - - Добавить мессенджеры - - - - - {/**/} - {/**/} - - - - - - - - - - + + {children} - + + + + + ) } \ No newline at end of file diff --git a/src/pages/ContactFormPage/DrawerParent.tsx b/src/pages/ContactFormPage/DrawerParent.tsx new file mode 100644 index 00000000..8a931ce0 --- /dev/null +++ b/src/pages/ContactFormPage/DrawerParent.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Drawer from '@mui/material/Drawer'; +import Button from '@mui/material/Button'; +import {SxProps, Theme} from "@mui/material"; + +interface Props { + outerContainerSx?: SxProps; + children?: React.ReactNode; +} + +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 ( + <> + + + + + {children} + + + + ); +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/Massengers/WindowMessengers.tsx b/src/pages/ContactFormPage/Massengers/WindowMessengers.tsx new file mode 100644 index 00000000..4ca9d935 --- /dev/null +++ b/src/pages/ContactFormPage/Massengers/WindowMessengers.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +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 CustomTextField from "@ui_kit/CustomTextField"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import SelectableButton from "../../../components/CreateQuiz/SelectableButton"; +import {useState} from "react"; +import SelectMask from "../SelectMask"; + +type SelectMessenger = 'contact'| 'bot'; +export default function WindowMessengers() { + const theme = useTheme(); + const [selectMessenger, setSelectMessenger] = useState("contact"); + return( + <> + + Настройки мессенджеров + + + + Заголовок страницы мессенджеров + + Текст на кнопке + + + + + setSelectMessenger("contact")}> + Запрашивать контакт + + setSelectMessenger("bot")}> + Чат-бот + + + {selectMessenger === 'contact' ? + <> + + + + + + + + + + + + + + + + + + + : + <> + } + + ) +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx b/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx new file mode 100644 index 00000000..f65c770e --- /dev/null +++ b/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx @@ -0,0 +1,56 @@ +import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; +import React from "react"; +import SettingIcon from "@icons/questionsPage/settingIcon"; +import Branching from "@icons/questionsPage/branching"; +import {Box, IconButton, useTheme} from "@mui/material"; +import SupplementIcon from "@icons/ContactFormIcon/supplementIcon"; +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"; + +interface Props { + switchState: string + SSHC: (data:string) => void +} + +export default function ButtonsNewField ({SSHC, switchState}:Props) { + const theme = useTheme(); + const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ + {icon: , title: 'Имя', value: 'name'}, + {icon: , title: 'Email', value: 'email'}, + {icon: , title: 'Телефон', value: 'phone'}, + {icon: , title: 'Текст', value: 'text'}, + {icon: , title: 'Адрес', value: 'address'}, + ] + + return ( + + + {buttonSetting.map( (e,i) => ( + {SSHC(e.value)}} + sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent', + color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main, + }} + > + {e.icon} + {e.title} + + ))} + + + ) +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx new file mode 100644 index 00000000..e7ae520a --- /dev/null +++ b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx @@ -0,0 +1,61 @@ +import Box from "@mui/material/Box"; +import {FormControl, SxProps, TextField, Theme, Typography} from "@mui/material"; +import CustomTextField from "@ui_kit/CustomTextField"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import Button from "@mui/material/Button"; +import * as React from "react"; + +interface Props { + outerContainerSx?: SxProps; + children?: React.ReactNode; + defaultValue?: string; + placeholderHelp: string; + placeholderField: string; +} + +export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) { + return( + + + Подсказка + + + + Подсказка внутри поля + + + + Ключ + + + + + + + Запрашивать на + + + + {children} + + + ) +} diff --git a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx new file mode 100644 index 00000000..8f72c3f6 --- /dev/null +++ b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import NewFieldParent from "./NewFieldParent"; +import {FormControlLabel, Switch} from "@mui/material"; +import SelectMask from "../SelectMask"; + + + +interface Props { + switchState: string, +} + + +export default function SwitchNewField({switchState ='name'}: Props) { + switch (switchState) { + case 'name': + return (); + break; + case 'email': + return (); + break; + case 'phone': + + return ( + + } + label="Маска для телефона" + labelPlacement="start" + sx={{ + display: 'flex', + justifyContent: 'space-between' + }} + /> + + + ); + break; + case 'text': + return (); + break; + case 'address': + return (); + break; + default: + return (<>) + } +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/NewField/WindowNewField.tsx b/src/pages/ContactFormPage/NewField/WindowNewField.tsx new file mode 100644 index 00000000..5cb20fe6 --- /dev/null +++ b/src/pages/ContactFormPage/NewField/WindowNewField.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +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 {useState} from "react"; + + +export default function WindowNewField() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + + + return( + <> + + Новое поле + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/SelectMask.tsx b/src/pages/ContactFormPage/SelectMask.tsx new file mode 100644 index 00000000..92ee556d --- /dev/null +++ b/src/pages/ContactFormPage/SelectMask.tsx @@ -0,0 +1,76 @@ +import {Box, Link, Typography, useTheme} from "@mui/material"; +import SelectableButton from "../../components/CreateQuiz/SelectableButton"; +import CustomTextField from "@ui_kit/CustomTextField"; +import * as React from "react"; +import {useState} from "react"; + +type SelectMask = 'country'| 'mymask'; +export default function SelectMask () { + + // const [State, setState] = React.useState(''); + // const StateHC = (data: string) => { + // setState(data) + // } + + const theme = useTheme() + const [selectMask, setSelectMask] = useState("country"); + return( + <> + + setSelectMask("country")}> + Выбор страны + + setSelectMask("mymask")}> + Своя маска + + + {selectMask === 'country' ? + <> + + Посетителю нужно будет выбрать страну + и ввести номер телефона. Страна определяется автоматически в зависимости от настроек браузера + + { + // StateHC() + // }} + > + Расширенные настройки + + + + Страна по умолчанию + + Если ничего не выбрано, страна будет выбрана автоматически + + + Выделенные страны + + Выбранные страны будут показываться вверху списка + + + Показываемые страны + + Будут показываться только выбранные страны + + + Игнорируемые страны + + Выбранные страны будут не будут показываться в списке + + + + : + <> + + + } + + ) +} diff --git a/src/pages/ContactFormPage/switchContactForm.tsx b/src/pages/ContactFormPage/switchContactForm.tsx index c4f0a4ea..ac7074bf 100644 --- a/src/pages/ContactFormPage/switchContactForm.tsx +++ b/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 (); + return (); break; case 'branching': - // return (); + return (); break; case 'supplement': - // return (); + return (<>); break; default: return (<>) diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index ef080807..ae1ed634 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -1,66 +1,55 @@ -import { Box, Typography, Link, useTheme } from "@mui/material"; +import {Box, Typography, Link, useTheme} from "@mui/material"; import React from "react"; import EnterIcon from "../../../components/icons/questionsPage/enterIcon"; import SwitchAnswerOptions from "./switchAnswerOptions"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; -export default function AnswerOptions() { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); - // const [addInput, setAddInput] = React.useState([ - // 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]}; - // ]); - const SSHC = (data: string) => { - setSwitchState(data); - }; - // const createCondition = (name) => { - // addInput([...state, {name: name}]) - // } - // - // const deleteCondition = (index) => { - // - // } - return ( - <> - - - Добавьте ответ - - - { - // console.info("I'm a button."); - // }} - > - Добавьте ответ - - - или нажмите Enter - - - - - - - - ); -} +export default function AnswerOptions() { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data) + } + + return ( + <> + + + Добавьте ответ + + + { + // console.info("I'm a button."); + // }} + > + Добавьте ответ + + или нажмите Enter + + + + + + + ) +} \ No newline at end of file diff --git a/src/ui_kit/CustomCheckbox.tsx b/src/ui_kit/CustomCheckbox.tsx index 131dabc0..b2129ca1 100755 --- a/src/ui_kit/CustomCheckbox.tsx +++ b/src/ui_kit/CustomCheckbox.tsx @@ -50,11 +50,11 @@ function CheckedIcon() { display: "flex", justifyContent: "center", alignItems: "center", - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.brightPurple.main, border: `1px solid ${theme.palette.grey2.main}`, }}> - + ); diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx index c2a32071..36422301 100755 --- a/src/ui_kit/CustomTextField.tsx +++ b/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; } @@ -16,12 +16,12 @@ export default function CustomTextField({ placeholder, text, sx}: CustomTextFiel sx={{ p: 0 }} >