fix: layout height
This commit is contained in:
IlyaDoronin
parent
ce07524073
commit
88d1d904a8
@ -1,21 +1,21 @@
|
|||||||
|
import { FC, useRef, useState, useEffect } from "react";
|
||||||
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
||||||
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
||||||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||||||
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
|
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
|
||||||
import TextIcon from "@icons/ContactFormIcon/TextIcon";
|
import TextIcon from "@icons/ContactFormIcon/TextIcon";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
InputAdornment,
|
InputAdornment,
|
||||||
Link,
|
Link,
|
||||||
TextField as MuiTextField,
|
TextField as MuiTextField,
|
||||||
TextFieldProps,
|
TextFieldProps,
|
||||||
Typography,
|
Typography,
|
||||||
useTheme
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import { FC, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { DESIGN_LIST } from "@/utils/designList";
|
import { DESIGN_LIST } from "@/utils/designList";
|
||||||
import { sendFC } from "@api/quizRelase";
|
import { sendFC } from "@api/quizRelase";
|
||||||
@ -27,468 +27,498 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
|
|
||||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||||||
const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
|
const EMAIL_REGEXP =
|
||||||
|
/^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
currentQuestion: AnyTypedQuizQuestion;
|
currentQuestion: AnyTypedQuizQuestion;
|
||||||
onShowResult: () => void;
|
onShowResult: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { settings, questions, quizId, show_badge, preview } = useQuizData();
|
const { settings, questions, quizId, show_badge, preview } = useQuizData();
|
||||||
|
|
||||||
const [ready, setReady] = useState(false);
|
const [ready, setReady] = useState(false);
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [phone, setPhone] = useState("");
|
const [phone, setPhone] = useState("");
|
||||||
const [text, setText] = useState("");
|
const [text, setText] = useState("");
|
||||||
const [adress, setAdress] = useState("");
|
const [adress, setAdress] = useState("");
|
||||||
|
const [screenHeight, setScreenHeight] = useState<number>(window.innerHeight);
|
||||||
|
|
||||||
const fireOnce = useRef(true);
|
const fireOnce = useRef(true);
|
||||||
const [fire, setFire] = useState(false);
|
const [fire, setFire] = useState(false);
|
||||||
const isMobile = useRootContainerSize() < 850;
|
const isMobile = useRootContainerSize() < 850;
|
||||||
const isTablet = useRootContainerSize() < 1000;
|
const isTablet = useRootContainerSize() < 1000;
|
||||||
|
|
||||||
const resultQuestion = currentQuestion.type === "result"
|
useEffect(() => {
|
||||||
? currentQuestion
|
function handleResize() {
|
||||||
: questions.find((question): question is QuizQuestionResult => {
|
setScreenHeight(window.innerHeight);
|
||||||
if (settings?.cfg.haveRoot) {
|
}
|
||||||
return (
|
|
||||||
question.type === "result" &&
|
window.addEventListener("resize", handleResize);
|
||||||
question.content.rule.parentId === currentQuestion.content.id
|
|
||||||
);
|
return () => {
|
||||||
} else {
|
window.removeEventListener("resize", handleResize);
|
||||||
return (
|
};
|
||||||
question.type === "result" && question.content.rule.parentId === "line"
|
}, []);
|
||||||
);
|
|
||||||
}
|
const resultQuestion =
|
||||||
|
currentQuestion.type === "result"
|
||||||
|
? currentQuestion
|
||||||
|
: questions.find((question): question is QuizQuestionResult => {
|
||||||
|
if (settings?.cfg.haveRoot) {
|
||||||
|
return (
|
||||||
|
question.type === "result" &&
|
||||||
|
question.content.rule.parentId === currentQuestion.content.id
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
question.type === "result" &&
|
||||||
|
question.content.rule.parentId === "line"
|
||||||
|
);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!resultQuestion) throw new Error("Result question not found");
|
if (!resultQuestion) throw new Error("Result question not found");
|
||||||
|
|
||||||
const inputHC = async () => {
|
const inputHC = async () => {
|
||||||
const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
|
const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
|
||||||
const body = {} as any;
|
const body = {} as any;
|
||||||
if (name.length > 0) body.name = name;
|
if (name.length > 0) body.name = name;
|
||||||
if (email.length > 0) body.email = email;
|
if (email.length > 0) body.email = email;
|
||||||
if (phone.length > 0) body.phone = phone;
|
if (phone.length > 0) body.phone = phone;
|
||||||
if (adress.length > 0) body.address = adress;
|
if (adress.length > 0) body.address = adress;
|
||||||
if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
|
if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
|
||||||
|
|
||||||
if (Object.keys(body).length > 0) {
|
if (Object.keys(body).length > 0) {
|
||||||
try {
|
try {
|
||||||
await sendFC({
|
await sendFC({
|
||||||
questionId: currentQuestion.id,
|
questionId: currentQuestion.id,
|
||||||
body: body,
|
body: body,
|
||||||
qid: quizId,
|
qid: quizId,
|
||||||
preview
|
preview,
|
||||||
});
|
});
|
||||||
|
|
||||||
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
"sessions",
|
"sessions",
|
||||||
JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
|
JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
|
||||||
);
|
);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
enqueueSnackbar("ответ не был засчитан");
|
enqueueSnackbar("ответ не был засчитан");
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const FCcopy: any = settings.cfg.formContact.fields || settings.cfg.formContact;
|
|
||||||
|
|
||||||
const filteredFC: any = {};
|
|
||||||
for (const i in FCcopy) {
|
|
||||||
const field = FCcopy[i];
|
|
||||||
if (field.used) {
|
|
||||||
filteredFC[i] = field;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
async function handleShowResultsClick() {
|
const FCcopy: any =
|
||||||
const FC: any = settings.cfg.formContact.fields;
|
settings.cfg.formContact.fields || settings.cfg.formContact;
|
||||||
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
|
|
||||||
return enqueueSnackbar("введена некорректная почта");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const filteredFC: any = {};
|
||||||
|
for (const i in FCcopy) {
|
||||||
|
const field = FCcopy[i];
|
||||||
|
if (field.used) {
|
||||||
|
filteredFC[i] = field;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (fireOnce.current) {
|
async function handleShowResultsClick() {
|
||||||
if (
|
const FC: any = settings.cfg.formContact.fields;
|
||||||
name.length === 0
|
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
|
||||||
&& email.length === 0
|
return enqueueSnackbar("введена некорректная почта");
|
||||||
&& phone.length === 0
|
|
||||||
&& text.length === 0
|
|
||||||
&& adress.length === 0
|
|
||||||
) return enqueueSnackbar("Пожалуйста, заполните поля");
|
|
||||||
|
|
||||||
//почта валидна, хоть одно поле заполнено
|
|
||||||
setFire(true);
|
|
||||||
try {
|
|
||||||
await inputHC();
|
|
||||||
fireOnce.current = false;
|
|
||||||
const sessions: any = JSON.parse(
|
|
||||||
localStorage.getItem("sessions") || "{}"
|
|
||||||
);
|
|
||||||
sessions[quizId] = Date.now();
|
|
||||||
localStorage.setItem(
|
|
||||||
"sessions",
|
|
||||||
JSON.stringify(sessions)
|
|
||||||
);
|
|
||||||
enqueueSnackbar("Данные успешно отправлены");
|
|
||||||
} catch (e) {
|
|
||||||
enqueueSnackbar("повторите попытку позже");
|
|
||||||
}
|
|
||||||
if (settings.cfg.resultInfo.showResultForm === "after") {
|
|
||||||
onShowResult();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
setFire(false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
if (fireOnce.current) {
|
||||||
|
if (
|
||||||
|
name.length === 0 &&
|
||||||
|
email.length === 0 &&
|
||||||
|
phone.length === 0 &&
|
||||||
|
text.length === 0 &&
|
||||||
|
adress.length === 0
|
||||||
|
)
|
||||||
|
return enqueueSnackbar("Пожалуйста, заполните поля");
|
||||||
|
|
||||||
|
//почта валидна, хоть одно поле заполнено
|
||||||
|
setFire(true);
|
||||||
|
try {
|
||||||
|
await inputHC();
|
||||||
|
fireOnce.current = false;
|
||||||
|
const sessions: any = JSON.parse(
|
||||||
|
localStorage.getItem("sessions") || "{}"
|
||||||
|
);
|
||||||
|
sessions[quizId] = Date.now();
|
||||||
|
localStorage.setItem("sessions", JSON.stringify(sessions));
|
||||||
|
enqueueSnackbar("Данные успешно отправлены");
|
||||||
|
} catch (e) {
|
||||||
|
enqueueSnackbar("повторите попытку позже");
|
||||||
|
}
|
||||||
|
if (settings.cfg.resultInfo.showResultForm === "after") {
|
||||||
|
onShowResult();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setFire(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
height: screenHeight > 500 ? "100%" : "auto",
|
||||||
|
overflow: "auto",
|
||||||
|
"&::-webkit-scrollbar": {
|
||||||
|
width: "0",
|
||||||
|
display: "none",
|
||||||
|
msOverflowStyle: "none",
|
||||||
|
},
|
||||||
|
scrollbarWidth: "none",
|
||||||
|
msOverflowStyle: "none",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundImage:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? quizThemes[settings.cfg.theme].isLight
|
||||||
|
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||||
|
: `linear-gradient(90deg, #272626, transparent), url(${
|
||||||
|
DESIGN_LIST[settings.cfg.theme]
|
||||||
|
})`
|
||||||
|
: null,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: !isMobile ? "100%" : isMobile ? undefined : "530px",
|
||||||
|
borderRadius: "4px",
|
||||||
|
height: isMobile ? "100%" : "auto",
|
||||||
|
minHeight: "100%",
|
||||||
|
display: isMobile ? undefined : "flex",
|
||||||
|
background:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? undefined
|
||||||
|
: theme.palette.background.default,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Box
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: isMobile ? undefined : "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
|
||||||
|
margin: isMobile ? 0 : "40px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
maxWidth: "630px",
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
justifyContent: "center",
|
||||||
|
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
textAlign: isTablet ? undefined : "center",
|
||||||
|
m: "20px 0",
|
||||||
|
fontSize: isTablet ? "24px" : "28px",
|
||||||
|
lineHeight: "normal",
|
||||||
|
fontWeight: 501,
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{settings.cfg.formContact.title ||
|
||||||
|
"Заполните форму, чтобы получить результаты теста"}
|
||||||
|
</Typography>
|
||||||
|
{settings.cfg.formContact.desc && (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
m: "20px 0",
|
||||||
|
fontSize: "18px",
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{settings.cfg.formContact.desc}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexDirection: "column",
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
p: isMobile ? "40px" : "125px 60px 30px 60px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
my: "20px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Inputs
|
||||||
|
name={name}
|
||||||
|
setName={setName}
|
||||||
|
email={email}
|
||||||
|
setEmail={setEmail}
|
||||||
|
phone={phone}
|
||||||
|
setPhone={setPhone}
|
||||||
|
text={text}
|
||||||
|
setText={setText}
|
||||||
|
adress={adress}
|
||||||
|
setAdress={setAdress}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{
|
||||||
|
// resultQuestion &&
|
||||||
|
// settings.cfg.resultInfo.when === "after" &&
|
||||||
|
<Button
|
||||||
|
disabled={!(ready && !fire)}
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleShowResultsClick}
|
||||||
|
sx={{
|
||||||
|
border: `1px solid ${theme.palette.primary.main}`,
|
||||||
|
"&:disabled": {
|
||||||
|
border: "1px solid #9A9AAF",
|
||||||
|
color: "#9A9AAF",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
mt: "20px",
|
||||||
|
width: isMobile ? "300px" : "390px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CustomCheckbox
|
||||||
|
label=""
|
||||||
|
handleChange={({ target }) => {
|
||||||
|
setReady(target.checked);
|
||||||
|
}}
|
||||||
|
checked={ready}
|
||||||
|
colorIcon={theme.palette.primary.main}
|
||||||
|
/>
|
||||||
|
<Typography sx={{ color: theme.palette.text.primary }}>
|
||||||
|
С 
|
||||||
|
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
|
||||||
|
Положением об обработке персональных данных{" "}
|
||||||
|
</Link>
|
||||||
|
 и 
|
||||||
|
<Link
|
||||||
|
href={"https://shub.pena.digital/docs/privacy"}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
Политикой конфиденциальности{" "}
|
||||||
|
</Link>
|
||||||
|
 ознакомлен
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
{show_badge && (
|
||||||
|
<Box
|
||||||
|
component={Link}
|
||||||
|
target={"_blank"}
|
||||||
|
href={`https://${
|
||||||
|
window.location.hostname.includes("s") ? "s" : ""
|
||||||
|
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||||
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
mt: "55px",
|
||||||
backgroundColor: theme.palette.background.default,
|
mb: "50px",
|
||||||
height: "100%",
|
gap: "15px",
|
||||||
overflow: "auto",
|
textDecoration: "none",
|
||||||
"&::-webkit-scrollbar": {
|
}}
|
||||||
width: "0",
|
|
||||||
display: "none",
|
|
||||||
msOverflowStyle: "none",
|
|
||||||
},
|
|
||||||
scrollbarWidth: "none",
|
|
||||||
msOverflowStyle: "none",
|
|
||||||
backgroundPosition: "center",
|
|
||||||
backgroundSize: "cover",
|
|
||||||
backgroundImage: settings.cfg.design && !isMobile
|
|
||||||
? quizThemes[settings.cfg.theme].isLight
|
|
||||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
|
||||||
: `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})`
|
|
||||||
: null,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: !isMobile ? "100%" : isMobile ? undefined : "530px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
height: "100%",
|
|
||||||
minHeight: "100%",
|
|
||||||
display: isMobile ? undefined : "flex",
|
|
||||||
background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Box
|
<NameplateLogo
|
||||||
sx={{
|
style={{
|
||||||
width: isMobile ? undefined : "100%",
|
fontSize: "23px",
|
||||||
display: "flex",
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
flexDirection: "column",
|
? "#151515"
|
||||||
alignItems: "center",
|
: "#FFFFFF",
|
||||||
justifyContent: "center",
|
}}
|
||||||
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
|
/>
|
||||||
margin: isMobile ? 0 : "40px 0"
|
<Typography
|
||||||
}}
|
sx={{
|
||||||
>
|
fontSize: "14px",
|
||||||
<Box
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
sx={{
|
? "#4D4D4D"
|
||||||
maxWidth: "630px",
|
: "#F5F7FF",
|
||||||
width: "100%",
|
whiteSpace: "nowrap",
|
||||||
display: "flex",
|
}}
|
||||||
flexDirection: "column",
|
>
|
||||||
alignItems: "flex-start",
|
Сделано на PenaQuiz
|
||||||
justifyContent: "center",
|
</Typography>
|
||||||
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
textAlign: isTablet ? undefined : "center",
|
|
||||||
m: "20px 0",
|
|
||||||
fontSize: isTablet ? "24px" : "28px",
|
|
||||||
lineHeight: "normal",
|
|
||||||
fontWeight: 501,
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
wordBreak: "break-word"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{settings.cfg.formContact.title ||
|
|
||||||
"Заполните форму, чтобы получить результаты теста"}
|
|
||||||
</Typography>
|
|
||||||
{settings.cfg.formContact.desc && (
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
m: "20px 0",
|
|
||||||
fontSize: "18px",
|
|
||||||
wordBreak: "break-word"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{settings.cfg.formContact.desc}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
flexDirection: "column",
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
p: isMobile ? "40px" : "125px 60px 30px 60px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
my: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Inputs
|
|
||||||
name={name}
|
|
||||||
setName={setName}
|
|
||||||
email={email}
|
|
||||||
setEmail={setEmail}
|
|
||||||
phone={phone}
|
|
||||||
setPhone={setPhone}
|
|
||||||
text={text}
|
|
||||||
setText={setText}
|
|
||||||
adress={adress}
|
|
||||||
setAdress={setAdress}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{
|
|
||||||
// resultQuestion &&
|
|
||||||
// settings.cfg.resultInfo.when === "after" &&
|
|
||||||
<Button
|
|
||||||
disabled={!(ready && !fire)}
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleShowResultsClick}
|
|
||||||
sx={{
|
|
||||||
border: `1px solid ${theme.palette.primary.main}`,
|
|
||||||
"&:disabled": {
|
|
||||||
border: "1px solid #9A9AAF",
|
|
||||||
color: "#9A9AAF"
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
mt: "20px",
|
|
||||||
width: isMobile ? "300px" : "390px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CustomCheckbox
|
|
||||||
label=""
|
|
||||||
handleChange={({ target }) => {
|
|
||||||
setReady(target.checked);
|
|
||||||
}}
|
|
||||||
checked={ready}
|
|
||||||
colorIcon={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
<Typography sx={{ color: theme.palette.text.primary }}>
|
|
||||||
С 
|
|
||||||
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
|
|
||||||
Положением об обработке персональных данных{" "}
|
|
||||||
</Link>
|
|
||||||
 и 
|
|
||||||
<Link
|
|
||||||
href={"https://shub.pena.digital/docs/privacy"}
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
Политикой конфиденциальности{" "}
|
|
||||||
</Link>
|
|
||||||
 ознакомлен
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
{show_badge &&
|
|
||||||
<Box
|
|
||||||
component={Link}
|
|
||||||
target={"_blank"}
|
|
||||||
href={
|
|
||||||
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
|
|
||||||
}
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
mt: "55px",
|
|
||||||
mb: "50px",
|
|
||||||
gap: "15px",
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NameplateLogo
|
|
||||||
style={{
|
|
||||||
fontSize: "23px",
|
|
||||||
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
fontSize: "14px",
|
|
||||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Сделано на PenaQuiz
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Inputs = ({
|
const Inputs = ({
|
||||||
name,
|
name,
|
||||||
setName,
|
setName,
|
||||||
email,
|
email,
|
||||||
setEmail,
|
setEmail,
|
||||||
phone,
|
phone,
|
||||||
setPhone,
|
setPhone,
|
||||||
text,
|
text,
|
||||||
setText,
|
setText,
|
||||||
adress,
|
adress,
|
||||||
setAdress,
|
setAdress,
|
||||||
}: any) => {
|
}: any) => {
|
||||||
const { settings } = useQuizData();
|
const { settings } = useQuizData();
|
||||||
|
|
||||||
const FC = settings.cfg.formContact.fields;
|
const FC = settings.cfg.formContact.fields;
|
||||||
|
|
||||||
if (!FC) return null;
|
if (!FC) return null;
|
||||||
console.log(email);
|
console.log(email);
|
||||||
const Name = (
|
const Name = (
|
||||||
<CustomInput
|
<CustomInput
|
||||||
onChange={({ target }) => setName(target.value)}
|
onChange={({ target }) => setName(target.value)}
|
||||||
id={name}
|
id={name}
|
||||||
title={FC["name"].innerText || "Введите имя"}
|
title={FC["name"].innerText || "Введите имя"}
|
||||||
desc={FC["name"].text || "Имя"}
|
desc={FC["name"].text || "Имя"}
|
||||||
Icon={NameIcon}
|
Icon={NameIcon}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
const Email = (
|
const Email = (
|
||||||
<CustomInput
|
<CustomInput
|
||||||
onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
|
onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ""))}
|
||||||
id={email}
|
id={email}
|
||||||
title={FC["email"].innerText || "Введите Email"}
|
title={FC["email"].innerText || "Введите Email"}
|
||||||
desc={FC["email"].text || "Email"}
|
desc={FC["email"].text || "Email"}
|
||||||
Icon={EmailIcon}
|
Icon={EmailIcon}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
const Phone = (
|
const Phone = (
|
||||||
<CustomInput
|
<CustomInput
|
||||||
onChange={({ target }) => setPhone(target.value)}
|
onChange={({ target }) => setPhone(target.value)}
|
||||||
id={phone}
|
id={phone}
|
||||||
title={FC["phone"].innerText || "Введите номер телефона"}
|
title={FC["phone"].innerText || "Введите номер телефона"}
|
||||||
desc={FC["phone"].text || "Номер телефона"}
|
desc={FC["phone"].text || "Номер телефона"}
|
||||||
Icon={PhoneIcon}
|
Icon={PhoneIcon}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
const Text = (
|
const Text = (
|
||||||
<CustomInput
|
<CustomInput
|
||||||
onChange={({ target }) => setText(target.value)}
|
onChange={({ target }) => setText(target.value)}
|
||||||
id={text}
|
id={text}
|
||||||
title={FC["text"].text || "Введите фамилию"}
|
title={FC["text"].text || "Введите фамилию"}
|
||||||
desc={FC["text"].innerText || "Фамилия"}
|
desc={FC["text"].innerText || "Фамилия"}
|
||||||
Icon={TextIcon}
|
Icon={TextIcon}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
const Adress = (
|
const Adress = (
|
||||||
<CustomInput
|
<CustomInput
|
||||||
onChange={({ target }) => setAdress(target.value)}
|
onChange={({ target }) => setAdress(target.value)}
|
||||||
id={adress}
|
id={adress}
|
||||||
title={FC["address"].innerText || "Введите адрес"}
|
title={FC["address"].innerText || "Введите адрес"}
|
||||||
desc={FC["address"].text || "Адрес"}
|
desc={FC["address"].text || "Адрес"}
|
||||||
Icon={AddressIcon}
|
Icon={AddressIcon}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (Object.values(FC).some((data) => data.used)) {
|
if (Object.values(FC).some((data) => data.used)) {
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{FC["name"].used ? Name : <></>}
|
|
||||||
{FC["email"].used ? Email : <></>}
|
|
||||||
{FC["phone"].used ? Phone : <></>}
|
|
||||||
{FC["text"].used ? Text : <></>}
|
|
||||||
{FC["address"].used ? Adress : <></>}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{Name}
|
|
||||||
{Email}
|
|
||||||
{Phone}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const CustomInput = ({ title, desc, Icon, onChange, id }: {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
desc: string;
|
|
||||||
Icon: FC<{ color: string; backgroundColor: string; }>;
|
|
||||||
onChange: TextFieldProps["onChange"];
|
|
||||||
}) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useRootContainerSize() < 600;
|
|
||||||
const { settings } = useQuizData();
|
|
||||||
return (
|
return (
|
||||||
<Box m="10px 0">
|
<>
|
||||||
<Typography mb="7px" color={theme.palette.text.primary}>
|
{FC["name"].used ? Name : <></>}
|
||||||
{title}
|
{FC["email"].used ? Email : <></>}
|
||||||
</Typography>
|
{FC["phone"].used ? Phone : <></>}
|
||||||
|
{FC["text"].used ? Text : <></>}
|
||||||
<TextField
|
{FC["address"].used ? Adress : <></>}
|
||||||
onChange={onChange}
|
</>
|
||||||
sx={{
|
|
||||||
width: isMobile ? "300px" : "390px",
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
"& .MuiOutlinedInput-notchedOutline": {
|
|
||||||
borderColor: "#9A9AAF80",
|
|
||||||
borderRadius: "12px"
|
|
||||||
},
|
|
||||||
"& .MuiInputBase-root": {
|
|
||||||
paddingLeft: 0
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'&:hover fieldset': {
|
|
||||||
borderColor: theme.palette.primary.main,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
}}
|
|
||||||
placeholder={desc}
|
|
||||||
InputProps={{
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">
|
|
||||||
<Icon color="gray"
|
|
||||||
backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{Name}
|
||||||
|
{Email}
|
||||||
|
{Phone}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const CustomInput = ({
|
||||||
|
title,
|
||||||
|
desc,
|
||||||
|
Icon,
|
||||||
|
onChange,
|
||||||
|
id,
|
||||||
|
}: {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
desc: string;
|
||||||
|
Icon: FC<{ color: string; backgroundColor: string }>;
|
||||||
|
onChange: TextFieldProps["onChange"];
|
||||||
|
}) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const isMobile = useRootContainerSize() < 600;
|
||||||
|
const { settings } = useQuizData();
|
||||||
|
return (
|
||||||
|
<Box m="10px 0">
|
||||||
|
<Typography mb="7px" color={theme.palette.text.primary}>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
onChange={onChange}
|
||||||
|
sx={{
|
||||||
|
width: isMobile ? "300px" : "390px",
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
"& .MuiOutlinedInput-notchedOutline": {
|
||||||
|
borderColor: "#9A9AAF80",
|
||||||
|
borderRadius: "12px",
|
||||||
|
},
|
||||||
|
"& .MuiInputBase-root": {
|
||||||
|
paddingLeft: 0,
|
||||||
|
},
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
placeholder={desc}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Icon
|
||||||
|
color="gray"
|
||||||
|
backgroundColor={
|
||||||
|
quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#F2F3F7"
|
||||||
|
: "#F2F3F71A"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user