diff --git a/src/model/questionTypes/shared.ts b/src/model/questionTypes/shared.ts index 2d95ac3b..14529724 100644 --- a/src/model/questionTypes/shared.ts +++ b/src/model/questionTypes/shared.ts @@ -94,7 +94,10 @@ export type AnyTypedQuizQuestion = | QuizQuestionFile | QuizQuestionPage | QuizQuestionRating - | QuizQuestionResult; + | QuizQuestionResult + | QuizQuestionContact; + + type FilterQuestionsWithVariants = T extends { content: { variants: QuestionVariant[]; }; diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index 7be9e199..d99cdd46 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -40,7 +40,7 @@ export interface QuizConfig { theme: string, reply: string, replname: string, - } + } startpage: { description: string; button: string; @@ -58,6 +58,14 @@ export interface QuizConfig { cycle: boolean; }; }; + formContact: { + name: FCField; + email: FCField; + phone: FCField; + text: FCField; + address: FCField; + button: string + }; info: { phonenumber: string; clickable: boolean; @@ -68,6 +76,14 @@ export interface QuizConfig { meta: string; } +type FCField = { + text: string + innerText: string + key: string + required: boolean + used: boolean +} + export const defaultQuizConfig: QuizConfig = { type: null, noStartPage: false, @@ -81,7 +97,7 @@ export const defaultQuizConfig: QuizConfig = { theme: "", reply: "", replname: "", - }, + }, startpage: { description: "", button: "", @@ -106,5 +122,43 @@ export const defaultQuizConfig: QuizConfig = { site: "", law: "", }, + formContact: { + 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 + }, + button: "" + }, meta: "", }; diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx index 4c04e997..b222f7ac 100644 --- a/src/pages/ContactFormPage/ContactFormPage.tsx +++ b/src/pages/ContactFormPage/ContactFormPage.tsx @@ -1,9 +1,10 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme } from "@mui/material"; -import { incrementCurrentStep } from "@root/quizes/actions"; +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 InfoIcon from "../../assets/icons/InfoIcon"; +import Info from "../../assets/icons/Info"; +import Trash from "@icons/trash"; import { OneIcon } from "../../assets/icons/questionsPage/OneIcon"; import AddPlus from "../../assets/icons/questionsPage/addPlus"; import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; @@ -12,116 +13,105 @@ import DrawerNewField from "./DrawerParent"; import WindowMessengers from "./Massengers/WindowMessengers"; import WindowNewField from "./NewField/WindowNewField"; import SwitchContactForm from "./switchContactForm"; +import GearIcon from "@icons/GearIcon"; +import { useQuestionsStore } from "@root/questions/store"; +import { useCurrentQuiz } from "@root/quizes/hooks"; + + +const buttons = [ + { + name: "Имя", + desc: "Дмитрий", + key: "name" + }, + { + name: "Email", + desc: "mail@xample.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 [drawerNewField, setDrawerNewField] = React.useState(false); + const theme = useTheme(); + + const quiz = useCurrentQuiz() + + const isTablet = useMediaQuery(theme.breakpoints.down(1000)) + + const [drawerNewField, setDrawerNewField] = React.useState(""); const [drawerMessenger, setDrawerMessenger] = React.useState(false); - const drawerNewFieldHC = (bool: boolean) => { - setDrawerNewField(bool); + const drawerNewFieldHC = (str: string) => { + setDrawerNewField(str); }; const drawerMessengerHC = (bool: boolean) => { setDrawerMessenger(bool); }; - const theme = useTheme(); return ( - <> - + + + + Как собрать данные посетителя {" "} - + {/* + + */} + - - - - - {" "} - {" "} - - - - Имя* - - E-mail* - - Телефон* - - - - - - drawerMessengerHC(true)} - sx={{ - fontSize: "16px", - lineHeight: "19px", - color: theme.palette.brightPurple.main, - textDecorationColor: theme.palette.brightPurple.main, - textAlign: "left", - }} - > - Добавить мессенджеры - - - - - - - - - - - - {" "} - {" "} - - - - - Будут показаны поля по умолчанию - - - - Добавить мессенджеры - - - + { + !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 ? + + + + : + + + + } + + - - - - + + + + + + + ); } @@ -142,10 +138,7 @@ interface Props { function ContactFormParent({ outerContainerSx: sx, children }: Props) { const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); - const SSHC = (data: string) => { - setSwitchState(data); - }; + const isTablet = useMediaQuery(theme.breakpoints.down(1000)) return ( - + - - {children} - - - - - + + {children} ); } + + +const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => { + const theme = useTheme(); + const quiz = useCurrentQuiz() + return ( + <> + {quiz.config.formContact[type].text || name} + + + {quiz.config.formContact[type].innerText || placeholder} + drawerNewFieldHC(type)} + sx={{ + position: "absolute", + right: "0" + }}> + + + + updateQuiz(quiz?.id, (quiz) => { + quiz.config.formContact[type].used = false + })} + sx={{ + width: "48px", + ml: "5px" + }} + > + + + + + + ) +} + +const ButtonsCard = ({ drawerNewFieldHC }: any) => { + const theme = useTheme(); + const quiz = useCurrentQuiz() + + return ( + + + { + buttons.map((contentData) => { + const content = quiz?.config.formContact[contentData.key] + return content.used ? : <> + }) + } + + { + ( + 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 + ) ? + <> + : + + } + drawerMessengerHC(true)} + sx={{ + fontSize: "16px", + lineHeight: "19px", + color: theme.palette.brightPurple.main, + textDecorationColor: theme.palette.brightPurple.main, + textAlign: "left", + }} + > + Добавить мессенджеры + + + + + ) +} +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 ( + + + + Будут показаны поля по умолчанию + + + + + + + Если вам не нужно собирать контакты,

отключите форму контактов + + + + + + Добавить мессенджеры + + + + ) +} + +const PseudoButton = () => { + const quiz = useCurrentQuiz() + return ( + { + 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 || "Название кнопки"} + + + ) +} \ No newline at end of file diff --git a/src/pages/ContactFormPage/DrawerParent.tsx b/src/pages/ContactFormPage/DrawerParent.tsx index 34327f35..539e330e 100644 --- a/src/pages/ContactFormPage/DrawerParent.tsx +++ b/src/pages/ContactFormPage/DrawerParent.tsx @@ -7,18 +7,18 @@ import {SxProps, Theme} from "@mui/material"; interface Props { outerContainerSx?: SxProps; children?: React.ReactNode; - isOpen: boolean; - openHC: (arg0: boolean) => void + isOpenDrawer: string; + drawerNewFieldHC: (str: string) => void } -export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) { +export default function DrawerNewField({outerContainerSx: sx, children, isOpenDrawer: isOpen, drawerNewFieldHC }: Props) { return ( <> openHC(false)} + open={Boolean(isOpen)} + onClose={() => drawerNewFieldHC("")} > void + type: string } -export default function ButtonsNewField ({SSHC, switchState}:Props) { +export default function ButtonsNewField ({SSHC, switchState, type}:Props) { const theme = useTheme(); + const quiz = useCurrentQuiz() + console.log(quiz) + console.log(type) const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[ {icon: , title: 'Имя', value: 'name'}, {icon: , title: 'Email', value: 'email'}, @@ -31,16 +36,20 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) { }} > {buttonSetting.map( (e,i) => ( + type === e.value || type === "all" ? {SSHC(e.value)}} sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent', - color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main, + color: switchState === e.value && type === "all" ? '#ffffff' : theme.palette.grey3.main, }} > {e.icon} {e.title} + : + <> ))} ) diff --git a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx index 04d47602..c4e3ae0c 100644 --- a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx +++ b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx @@ -1,9 +1,11 @@ import Box from "@mui/material/Box"; -import {FormControl, SxProps, TextField, Theme, Typography} from "@mui/material"; +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"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { updateQuiz } from "@root/quizes/actions"; interface Props { outerContainerSx?: SxProps; @@ -11,51 +13,88 @@ interface Props { defaultValue?: string; placeholderHelp: string; placeholderField: string; + drawerNewFieldHC:(a:string)=>void } -export default function NewFieldParent ({defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children}: Props) { - return( - - - Подсказка - +export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) { + const quiz = useCurrentQuiz() + console.log({ defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }) + return ( + + + Подсказка + { + updateQuiz(quiz.id, (quiz) => { + quiz.config.formContact[defaultValue].text = target.value + }) + }} + value={quiz.config.formContact[defaultValue].text} + + placeholder={placeholderHelp} text={''} /> - - Подсказка внутри поля - + + Подсказка внутри поля + { + updateQuiz(quiz.id, (quiz) => { + quiz.config.formContact[defaultValue].innerText = target.value + }) + }} + value={quiz.config.formContact[defaultValue].innerText} + + placeholder={placeholderField} text={''} /> - + + Ключ - - - - + { + updateQuiz(quiz.id, (quiz) => { + quiz.config.formContact[defaultValue].key = target.value + }) + }} + placeholder="text" + sx={{ + "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": { + border: 'none' + }, + "& .MuiInputBase-root": { + height: "48px", + borderRadius: "10px", + backgroundColor: '#EEE4FC', + }, + }} + + /> + { + console.log("click") + updateQuiz(quiz.id, (quiz) => { + quiz.config.formContact[defaultValue].required = target.checked + }) + }} + + label={"Обязательно к заполнению"} /> - + {/* Запрашивать на - + */} {children} - + ) } diff --git a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx index b0217195..2a962539 100644 --- a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx +++ b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx @@ -8,10 +8,11 @@ import CustomizedSwitch from "@ui_kit/CustomSwitch"; interface Props { switchState: string, + drawerNewFieldHC:(a:string)=>void } -export default function SwitchNewField({switchState ='name'}: Props) { +export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) { const [SwitchMask, setSwitchMask] = React.useState(false); const SwitchMaskHC = (bool:boolean) => { setSwitchMask(bool) @@ -19,16 +20,16 @@ export default function SwitchNewField({switchState ='name'}: Props) { switch (switchState) { case 'name': - return (); + return (); break; case 'email': - return (); + return (); break; case 'phone': return ( - - + {/* } label="Маска для телефона" @@ -41,7 +42,7 @@ export default function SwitchNewField({switchState ='name'}: Props) { SwitchMaskHC(!SwitchMask) }} - /> + /> */} {SwitchMask ? @@ -52,10 +53,10 @@ export default function SwitchNewField({switchState ='name'}: Props) { ); break; case 'text': - return (); + return (); break; case 'address': - return (); + return (); break; default: return (<>) diff --git a/src/pages/ContactFormPage/NewField/WindowNewField.tsx b/src/pages/ContactFormPage/NewField/WindowNewField.tsx index e891f770..980cdbda 100644 --- a/src/pages/ContactFormPage/NewField/WindowNewField.tsx +++ b/src/pages/ContactFormPage/NewField/WindowNewField.tsx @@ -1,29 +1,44 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import {Typography, useTheme} from "@mui/material"; +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'; -export default function WindowNewField() { +export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) { + const quiz = useCurrentQuiz() const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('name'); + const [switchState, setSwitchState] = React.useState(""); + React.useEffect(() => { + for (let val in quiz?.config.formContact) { + console.log(quiz?.config.formContact) + console.log(quiz?.config.formContact[val]) + console.log(quiz?.config.formContact[val].used) + if (!quiz?.config.formContact[val].used) { + setSwitchState(val) + return + } + } + }, []) + const SSHC = (data: string) => { setSwitchState(data) } + console.log(switchState) - return( + return ( <> - + Новое поле - + - - + + ) } \ No newline at end of file diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index 27f791bf..47700187 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -29,10 +29,9 @@ import { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import useSWR from "swr"; import { SidebarMobile } from "./Sidebar/SidebarMobile"; -import { cleanQuestions } from "@root/questions/actions"; +import { cleanQuestions, setQuestions } from "@root/questions/actions"; import { updateOpenBranchingPanel } from "@root/uiTools/actions"; import { BranchingPanel } from "../Questions/BranchingPanel"; -import { setQuestions } from "@root/questions/actions"; import { useQuestionsStore } from "@root/questions/store"; import { useQuizes } from "@root/quizes/hooks"; import { questionApi } from "@api/question"; @@ -52,6 +51,7 @@ export default function EditPage() { const questions = await questionApi.getList({ quiz_id: editQuizId }) setQuestions(questions) + } getData() }, []) diff --git a/src/stores/questions/actions.ts b/src/stores/questions/actions.ts index cc51ece5..b5efca14 100644 --- a/src/stores/questions/actions.ts +++ b/src/stores/questions/actions.ts @@ -553,3 +553,4 @@ export const createBackResult = async ( enqueueSnackbar("Не удалось создать вопрос"); } }); + diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx index 490bc3ce..79190b35 100755 --- a/src/ui_kit/switchStepPages.tsx +++ b/src/ui_kit/switchStepPages.tsx @@ -32,7 +32,7 @@ export default function SwitchStepPages({ } case 1: return quizType === "form" ? : ; case 2: return ; - case 3: return ; + case 3: return ; case 4: return ; case 5: return ; case 6: return <>Реклама;