refactored ContactForm design
This commit is contained in:
aleksandr-raw
parent
6f9a75d1c7
commit
16ba5a6f61
@ -1,17 +1,17 @@
|
||||
import { useEffect, useRef, useState, } from "react";
|
||||
import { Box, Button, Link, Typography, useTheme, } from "@mui/material";
|
||||
import {useEffect, useRef, useState,} from "react";
|
||||
import {Box, Button, Link, Typography, useTheme,} from "@mui/material";
|
||||
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
|
||||
|
||||
import { DESIGN_LIST } from "@utils/designList.ts";
|
||||
import { sendFC, SendFCParams } from "@api/quizRelase.ts";
|
||||
import { useQuizData } from "@contexts/QuizDataContext.ts";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo.tsx";
|
||||
import { QuizQuestionResult } from "@model/questionTypes/result.ts";
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared.ts";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
|
||||
import {DESIGN_LIST} from "@utils/designList.ts";
|
||||
import {sendFC, SendFCParams} from "@api/quizRelase.ts";
|
||||
import {useQuizData} from "@contexts/QuizDataContext.ts";
|
||||
import {NameplateLogo} from "@icons/NameplateLogo.tsx";
|
||||
import {QuizQuestionResult} from "@model/questionTypes/result.ts";
|
||||
import {AnyTypedQuizQuestion} from "@model/questionTypes/shared.ts";
|
||||
import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
|
||||
import {enqueueSnackbar} from "notistack";
|
||||
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
|
||||
import {
|
||||
FormContactFieldData,
|
||||
FormContactFieldName,
|
||||
@ -19,7 +19,10 @@ import {
|
||||
import {
|
||||
Inputs
|
||||
} from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
|
||||
import { EMAIL_REGEXP } from "@utils/emailRegexp.tsx";
|
||||
import {EMAIL_REGEXP} from "@utils/emailRegexp.tsx";
|
||||
import {
|
||||
ContactTextBlock
|
||||
} from "@/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx";
|
||||
|
||||
|
||||
type Props = {
|
||||
@ -143,23 +146,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
localStorage.setItem("sessions", JSON.stringify(sessions));
|
||||
|
||||
//@ts-ignore
|
||||
let YM = window?.ym;
|
||||
const YM = window?.ym;
|
||||
//@ts-ignore
|
||||
let VP = window?._tmr;
|
||||
const VP = window?._tmr;
|
||||
if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
|
||||
YM(
|
||||
settings.cfg.yandexMetricNumber,
|
||||
"reachGoal",
|
||||
"penaquiz-contacts"
|
||||
);
|
||||
};
|
||||
}
|
||||
if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
|
||||
VP.push({
|
||||
type: "reachGoal",
|
||||
id: settings.cfg.vkMetricNumber,
|
||||
goal: "penaquiz-contacts"
|
||||
});
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
enqueueSnackbar("повторите попытку позже");
|
||||
}
|
||||
@ -172,23 +175,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
}
|
||||
useEffect(() => {
|
||||
//@ts-ignore
|
||||
let YM = window?.ym;
|
||||
const YM = window?.ym;
|
||||
//@ts-ignore
|
||||
let VP = window?._tmr;
|
||||
const VP = window?._tmr;
|
||||
if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
|
||||
YM(
|
||||
settings.cfg.yandexMetricNumber,
|
||||
"reachGoal",
|
||||
"penaquiz-form"
|
||||
);
|
||||
};
|
||||
}
|
||||
if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
|
||||
VP.push({
|
||||
type: "reachGoal",
|
||||
id: settings.cfg.vkMetricNumber,
|
||||
goal: "penaquiz-form"
|
||||
});
|
||||
};
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@ -213,7 +216,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
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]
|
||||
: `linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%), url(${DESIGN_LIST[settings.cfg.theme]
|
||||
})`
|
||||
: null,
|
||||
}}
|
||||
@ -231,65 +234,22 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<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",
|
||||
padding: isMobile ? "0" : "0 40px"
|
||||
}}
|
||||
>
|
||||
<ContactTextBlock settings={settings} />
|
||||
<Box sx={{
|
||||
flexGrow: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: "column",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "auto",
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "630px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
padding: isMobile ? "40px 20px 0 20px" : "0",
|
||||
mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: isTablet ? undefined : "center",
|
||||
fontSize: "24px",
|
||||
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: isMobile ? undefined : "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
|
||||
}}
|
||||
>
|
||||
@ -345,9 +305,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
 ознакомлен
|
||||
</Typography>
|
||||
</Box>
|
||||
{
|
||||
// resultQuestion &&
|
||||
// settings.cfg.resultInfo.when === "after" &&
|
||||
|
||||
<Button
|
||||
disabled={!(ready && !fire)}
|
||||
variant="contained"
|
||||
@ -366,45 +324,31 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
>
|
||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||
</Button>
|
||||
}
|
||||
</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: "40px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: isMobile ? "28%" : undefined
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
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
|
||||
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: isMobile? "30px": isTablet? "40px" :"50px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
color: quizThemes[settings.cfg.theme].isLight
|
||||
? "#151515"
|
||||
: "#FFFFFF",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
import {Box, Typography, useTheme} from "@mui/material";
|
||||
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
|
||||
import {QuizSettingsConfig} from "@model/settingsData.ts";
|
||||
import {FC} from "react";
|
||||
|
||||
type ContactTextBlockProps = {
|
||||
settings: QuizSettingsConfig;
|
||||
}
|
||||
|
||||
export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useRootContainerSize() < 850;
|
||||
const isTablet = useRootContainerSize() < 1000;
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
|
||||
margin: isMobile ? 0 : "40px 0",
|
||||
padding: isMobile ? "0" : "0 40px"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: isMobile? "100%" : isTablet? "410px" : "630px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
padding: isMobile ? "40px 20px 0 20px" : "0",
|
||||
mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: isTablet ? undefined : "center",
|
||||
fontSize: "24px",
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { AnyTypedQuizQuestion } from "./questionTypes/shared";
|
||||
import {AnyTypedQuizQuestion} from "./questionTypes/shared";
|
||||
|
||||
export type QuizStartpageType = "standard" | "expanded" | "centered" | null;
|
||||
|
||||
@ -41,18 +41,20 @@ export type FCField = {
|
||||
used: boolean;
|
||||
};
|
||||
|
||||
export type QuizSettingsConfig = {
|
||||
fp: boolean;
|
||||
rep: boolean;
|
||||
name: string;
|
||||
lim: number;
|
||||
due: number;
|
||||
delay: number;
|
||||
pausable: boolean;
|
||||
cfg: QuizConfig;
|
||||
}
|
||||
|
||||
export type QuizSettings = {
|
||||
questions: AnyTypedQuizQuestion[];
|
||||
settings: {
|
||||
fp: boolean;
|
||||
rep: boolean;
|
||||
name: string;
|
||||
lim: number;
|
||||
due: number;
|
||||
delay: number;
|
||||
pausable: boolean;
|
||||
cfg: QuizConfig;
|
||||
};
|
||||
settings: QuizSettingsConfig;
|
||||
cnt: number;
|
||||
recentlyCompleted: boolean;
|
||||
show_badge: boolean;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user