diff --git a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx index d09df76..ee13af2 100644 --- a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx @@ -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, }} > - + + - - {settings.cfg.formContact.title || - "Заполните форму, чтобы получить результаты теста"} - - {settings.cfg.formContact.desc && ( - - {settings.cfg.formContact.desc} - - )} - - - - @@ -345,9 +305,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {  ознакомлен - { - // resultQuestion && - // settings.cfg.resultInfo.when === "after" && + - } + {show_badge && ( - - - {/**/} - {/* Сделано на PenaQuiz*/} - {/**/} - + + + )} diff --git a/lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx b/lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx new file mode 100644 index 0000000..b8263e6 --- /dev/null +++ b/lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/ContactTextBlock.tsx @@ -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 = ({settings}) => { + const theme = useTheme(); + const isMobile = useRootContainerSize() < 850; + const isTablet = useRootContainerSize() < 1000; + return ( + + + + {settings.cfg.formContact.title || + "Заполните форму, чтобы получить результаты теста"} + + {settings.cfg.formContact.desc && ( + + {settings.cfg.formContact.desc} + + )} + + + ) +} diff --git a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx b/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx index 8b260a8..16e3304 100644 --- a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx @@ -20,6 +20,13 @@ export const CountrySelector:FC = ({setMask}) => { value={country} onChange={handleChange} renderValue={(value) => value} + MenuProps={{ + PaperProps: { + style: { + backgroundColor: theme.palette.background.default, + }, + }, + }} sx={{ minWidth: 50, backgroundColor: theme.palette.background.default, diff --git a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx index 8e3716f..bf3ea9d 100644 --- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx +++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx @@ -90,6 +90,7 @@ export default function ViewPublicationPage() { quizStepElement = ( { {answer ? ( variant?.extendedText ? ( diff --git a/lib/model/settingsData.ts b/lib/model/settingsData.ts index 4a0985c..700b263 100644 --- a/lib/model/settingsData.ts +++ b/lib/model/settingsData.ts @@ -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;