Merge branch 'dev' into 'staging'
Dev See merge request frontend/squzanswerer!94
This commit is contained in:
commit
e28400aa84
@ -1,5 +1,7 @@
|
||||
import { GetQuizDataResponse, parseQuizData } from "@model/api/getQuizData";
|
||||
import axios from "axios";
|
||||
import MobileDetect from 'mobile-detect';
|
||||
import device from "current-device";
|
||||
|
||||
import type { AxiosError } from "axios";
|
||||
import { replaceSpacesToEmptyLines } from "../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
|
||||
@ -9,12 +11,26 @@ let SESSIONS = "";
|
||||
|
||||
const domain = location.hostname === "hbpn.link" ? "" : "https://s.hbpn.link";
|
||||
|
||||
const md = new MobileDetect(window.navigator.userAgent);
|
||||
|
||||
const userAgent = navigator.userAgent
|
||||
let OSDevice = md.os()
|
||||
if (OSDevice === null) {OSDevice = userAgent}
|
||||
|
||||
const DeviceType = device.type
|
||||
let Device = md.mobile()
|
||||
if (Device === null) {Device = userAgent}
|
||||
|
||||
export const publicationMakeRequest = ({ url, body }: any) => {
|
||||
return axios(url, {
|
||||
data: body,
|
||||
headers: {
|
||||
"X-Sessionkey": SESSIONS,
|
||||
"Content-Type": "multipart/form-data",
|
||||
"DeviceType" : DeviceType,
|
||||
"Device" : Device,
|
||||
"OS": OSDevice,
|
||||
"Browser" : userAgent
|
||||
},
|
||||
method: "POST",
|
||||
});
|
||||
@ -33,6 +49,10 @@ export async function getData(quizId: string): Promise<{
|
||||
headers: {
|
||||
"X-Sessionkey": SESSIONS,
|
||||
"Content-Type": "application/json",
|
||||
"DeviceType" : DeviceType,
|
||||
"Device" : Device,
|
||||
"OS": OSDevice,
|
||||
"Browser" : userAgent
|
||||
},
|
||||
data: {
|
||||
quiz_id: quizId,
|
||||
|
||||
@ -22,7 +22,7 @@ export default function ArrowDownIcon(
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M19.5 9L12 16.5L4.5 9" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M19.5 9L12 16.5L4.5 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -2,17 +2,23 @@ import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
backgroundColor: string
|
||||
}
|
||||
|
||||
export default function AddressIcon({ color }: Props) {
|
||||
export default function AddressIcon({ color, backgroundColor }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
// width: "24px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "58px",
|
||||
width: "42px",
|
||||
backgroundColor: {backgroundColor},
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderTopLeftRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -2,17 +2,23 @@ import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
backgroundColor: string
|
||||
}
|
||||
|
||||
export default function EmailIcon({ color }: Props) {
|
||||
export default function EmailIcon({ color, backgroundColor }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
// width: "24px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "58px",
|
||||
width: "42px",
|
||||
backgroundColor: {backgroundColor},
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderTopLeftRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -2,9 +2,10 @@ import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
backgroundColor: string
|
||||
}
|
||||
|
||||
export default function NameIcon({ color }: Props) {
|
||||
export default function NameIcon({ color, backgroundColor }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -13,6 +14,11 @@ export default function NameIcon({ color }: Props) {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "58px",
|
||||
width: "42px",
|
||||
backgroundColor: {backgroundColor},
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderTopLeftRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -2,23 +2,29 @@ import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
backgroundColor: string
|
||||
}
|
||||
|
||||
export default function PhoneIcon({ color }: Props) {
|
||||
export default function PhoneIcon({ color, backgroundColor }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
// width: "24px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "58px",
|
||||
width: "42px",
|
||||
backgroundColor: {backgroundColor},
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderTopLeftRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 15 15"
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 17 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
@ -2,9 +2,10 @@ import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
backgroundColor: string
|
||||
}
|
||||
|
||||
export default function TextIcon({ color }: Props) {
|
||||
export default function TextIcon({ color, backgroundColor }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -13,6 +14,11 @@ export default function TextIcon({ color }: Props) {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "58px",
|
||||
width: "42px",
|
||||
backgroundColor: {backgroundColor},
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderTopLeftRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -3,20 +3,29 @@ import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
||||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||||
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
|
||||
import TextIcon from "@icons/ContactFormIcon/TextIcon";
|
||||
import { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
InputAdornment,
|
||||
Link,
|
||||
TextField as MuiTextField,
|
||||
TextFieldProps,
|
||||
Typography,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import { FC, useRef, useState } from "react";
|
||||
import {FC, useRef, useState} from "react";
|
||||
|
||||
import { sendFC } from "@api/quizRelase";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
|
||||
import {sendFC} from "@api/quizRelase";
|
||||
import {NameplateLogo} from "@icons/NameplateLogo";
|
||||
import {QuizQuestionResult} from "@model/questionTypes/result";
|
||||
import {AnyTypedQuizQuestion} from "@model/questionTypes/shared";
|
||||
import {quizThemes} from "@utils/themes/Publication/themePublication";
|
||||
import {enqueueSnackbar} from "notistack";
|
||||
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
|
||||
import {useQuizData} from "@contexts/QuizDataContext";
|
||||
import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question";
|
||||
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||||
@ -27,9 +36,9 @@ type Props = {
|
||||
onShowResult: () => void;
|
||||
};
|
||||
|
||||
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
|
||||
const theme = useTheme();
|
||||
const { settings, questions, quizId, show_badge } = useQuizData();
|
||||
const {settings, questions, quizId, show_badge} = useQuizData();
|
||||
|
||||
const [ready, setReady] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
@ -66,7 +75,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
if (email.length > 0) body.email = email;
|
||||
if (phone.length > 0) body.phone = phone;
|
||||
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) {
|
||||
try {
|
||||
@ -79,7 +88,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
|
||||
localStorage.setItem(
|
||||
"sessions",
|
||||
JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
|
||||
JSON.stringify({...sessions, [quizId]: new Date().getTime()})
|
||||
);
|
||||
} catch (e) {
|
||||
enqueueSnackbar("ответ не был засчитан");
|
||||
@ -99,7 +108,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
const isWide = Object.keys(filteredFC).length > 2;
|
||||
|
||||
async function handleShowResultsClick() {
|
||||
const FC: any = settings.cfg.formContact.fields
|
||||
const FC: any = settings.cfg.formContact.fields
|
||||
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
|
||||
return enqueueSnackbar("введена некорректная почта");
|
||||
}
|
||||
@ -156,7 +165,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
msOverflowStyle: "none",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
backgroundImage: settings.cfg.design && !isMobile
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
}}
|
||||
@ -168,6 +177,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
height: "100%",
|
||||
minHeight: "100vh",
|
||||
display: isWide && !isMobile ? "flex" : undefined,
|
||||
background: settings.cfg.design && !isMobile
|
||||
? quizThemes[settings.cfg.theme].isLight
|
||||
? "transparent"
|
||||
: "linear-gradient(90deg,#272626, transparent)"
|
||||
: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -180,31 +194,43 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
m: "20px 0",
|
||||
fontSize: "28px",
|
||||
color: theme.palette.text.primary,
|
||||
wordBreak: "break-word"
|
||||
maxWidth: "630px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px"
|
||||
}}
|
||||
>
|
||||
{settings.cfg.formContact.title ||
|
||||
"Заполните форму, чтобы получить результаты теста"}
|
||||
</Typography>
|
||||
{settings.cfg.formContact.desc && (
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
textAlign: "center",
|
||||
m: "20px 0",
|
||||
fontSize: "18px",
|
||||
fontSize: "28px",
|
||||
color: theme.palette.text.primary,
|
||||
wordBreak: "break-word"
|
||||
}}
|
||||
>
|
||||
{settings.cfg.formContact.desc}
|
||||
{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
|
||||
@ -214,7 +240,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
p: "30px",
|
||||
p: "0px 20px 30px 20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -266,13 +292,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
>
|
||||
<CustomCheckbox
|
||||
label=""
|
||||
handleChange={({ target }) => {
|
||||
handleChange={({target}) => {
|
||||
setReady(target.checked);
|
||||
}}
|
||||
checked={ready}
|
||||
colorIcon={theme.palette.primary.main}
|
||||
/>
|
||||
<Typography sx={{ color: theme.palette.text.primary }}>
|
||||
<Typography sx={{color: theme.palette.text.primary}}>
|
||||
С 
|
||||
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
|
||||
Положением об обработке персональных данных{" "}
|
||||
@ -326,18 +352,18 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
};
|
||||
|
||||
const Inputs = ({
|
||||
name,
|
||||
setName,
|
||||
email,
|
||||
setEmail,
|
||||
phone,
|
||||
setPhone,
|
||||
text,
|
||||
setText,
|
||||
adress,
|
||||
setAdress,
|
||||
}: any) => {
|
||||
const { settings } = useQuizData();
|
||||
name,
|
||||
setName,
|
||||
email,
|
||||
setEmail,
|
||||
phone,
|
||||
setPhone,
|
||||
text,
|
||||
setText,
|
||||
adress,
|
||||
setAdress,
|
||||
}: any) => {
|
||||
const {settings} = useQuizData();
|
||||
|
||||
const FC = settings.cfg.formContact.fields;
|
||||
|
||||
@ -345,16 +371,16 @@ const Inputs = ({
|
||||
|
||||
const Name = (
|
||||
<CustomInput
|
||||
onChange={({ target }) => setName(target.value)}
|
||||
onChange={({target}) => setName(target.value)}
|
||||
id={name}
|
||||
title={FC["name"].innerText || "Введите имя"}
|
||||
desc={FC["name"].text || "имя"}
|
||||
desc={FC["name"].text || "Имя"}
|
||||
Icon={NameIcon}
|
||||
/>
|
||||
);
|
||||
const Email = (
|
||||
<CustomInput
|
||||
onChange={({ target }) => setEmail(target.value)}
|
||||
onChange={({target}) => setEmail(target.value)}
|
||||
id={email}
|
||||
title={FC["email"].innerText || "Введите Email"}
|
||||
desc={FC["email"].text || "Email"}
|
||||
@ -363,28 +389,28 @@ const Inputs = ({
|
||||
);
|
||||
const Phone = (
|
||||
<CustomInput
|
||||
onChange={({ target }) => setPhone(target.value)}
|
||||
onChange={({target}) => setPhone(target.value)}
|
||||
id={phone}
|
||||
title={FC["phone"].innerText || "Введите номер телефона"}
|
||||
desc={FC["phone"].text || "номер телефона"}
|
||||
desc={FC["phone"].text || "Номер телефона"}
|
||||
Icon={PhoneIcon}
|
||||
/>
|
||||
);
|
||||
const Text = (
|
||||
<CustomInput
|
||||
onChange={({ target }) => setText(target.value)}
|
||||
onChange={({target}) => setText(target.value)}
|
||||
id={text}
|
||||
title={FC["text"].text || "Введите фамилию"}
|
||||
desc={FC["text"].innerText || "фамилию"}
|
||||
desc={FC["text"].innerText || "Фамилия"}
|
||||
Icon={TextIcon}
|
||||
/>
|
||||
);
|
||||
const Adress = (
|
||||
<CustomInput
|
||||
onChange={({ target }) => setAdress(target.value)}
|
||||
onChange={({target}) => setAdress(target.value)}
|
||||
id={adress}
|
||||
title={FC["address"].innerText || "Введите адрес"}
|
||||
desc={FC["address"].text || "адрес"}
|
||||
desc={FC["address"].text || "Адрес"}
|
||||
Icon={AddressIcon}
|
||||
/>
|
||||
);
|
||||
@ -410,16 +436,16 @@ const Inputs = ({
|
||||
}
|
||||
};
|
||||
|
||||
const CustomInput = ({ title, desc, Icon, onChange, id }: {
|
||||
const CustomInput = ({title, desc, Icon, onChange, id}: {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
Icon: FC<{ color: string; }>;
|
||||
Icon: FC<{ color: string; backgroundColor: string }>;
|
||||
onChange: TextFieldProps["onChange"];
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useRootContainerSize() < 600;
|
||||
|
||||
const {settings} = useQuizData();
|
||||
return (
|
||||
<Box m="15px 0">
|
||||
<Typography mb="7px" color={theme.palette.text.primary}>
|
||||
@ -430,15 +456,22 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
|
||||
onChange={onChange}
|
||||
sx={{
|
||||
width: isMobile ? "300px" : "350px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "#9A9AAF"
|
||||
borderColor: "#9A9AAF80",
|
||||
borderRadius: "12px"
|
||||
},
|
||||
"& .MuiInputBase-root": {
|
||||
paddingLeft: 0
|
||||
}
|
||||
|
||||
}}
|
||||
placeholder={desc}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Icon color="gray" />
|
||||
<Icon color="gray"
|
||||
backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
|
||||
@ -5,25 +5,25 @@ import {
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import {NameplateLogo} from "@icons/NameplateLogo";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionResult } from "../../model/questionTypes/result";
|
||||
import { setCurrentQuizStep } from "@stores/quizView";
|
||||
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
|
||||
import {useQuizData} from "@contexts/QuizDataContext";
|
||||
import {quizThemes} from "@utils/themes/Publication/themePublication";
|
||||
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
|
||||
import type {QuizQuestionResult} from "../../model/questionTypes/result";
|
||||
import {setCurrentQuizStep} from "@stores/quizView";
|
||||
import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question";
|
||||
|
||||
type ResultFormProps = {
|
||||
resultQuestion: QuizQuestionResult;
|
||||
};
|
||||
|
||||
export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
export const ResultForm = ({resultQuestion}: ResultFormProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
const isTablet = useRootContainerSize() < 1000;
|
||||
const { settings, show_badge } = useQuizData();
|
||||
const {settings, show_badge} = useQuizData();
|
||||
const spec = settings.cfg.spec
|
||||
|
||||
return (
|
||||
@ -36,52 +36,67 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
height: "100%",
|
||||
minHeight: "100vh",
|
||||
width: "100%",
|
||||
pt: "28px",
|
||||
overflow: "auto",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
backgroundImage: settings.cfg.design && !isMobile
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
}}
|
||||
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
maxWidth: "844px",
|
||||
width: "100%",
|
||||
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
pt: "30px",
|
||||
width: "inherit",
|
||||
height: "inherit",
|
||||
background: settings.cfg.design
|
||||
? quizThemes[settings.cfg.theme].isLight
|
||||
? "transparent"
|
||||
: "linear-gradient(90deg,#272626, transparent)"
|
||||
: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
{
|
||||
!resultQuestion?.content.useImage && resultQuestion.content.video && (
|
||||
<YoutubeEmbedIframe
|
||||
videoUrl={resultQuestion.content.video}
|
||||
containerSX={{
|
||||
width: isMobile ? "100%" : "490px",
|
||||
height: isMobile ? "100%" : "280px",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
resultQuestion?.content.useImage && resultQuestion.content.back && (
|
||||
<Box
|
||||
component="img"
|
||||
src={resultQuestion.content.back}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "844px",
|
||||
height: spec ? "auto" : isMobile ? "100%" : "306px",
|
||||
borderRadius: "8px"
|
||||
}}
|
||||
></Box>
|
||||
)
|
||||
}
|
||||
{resultQuestion.description !== "" &&
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
width: "100%",
|
||||
maxWidth: "844px",
|
||||
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
||||
}}>
|
||||
{
|
||||
!resultQuestion?.content.useImage && resultQuestion.content.video && (
|
||||
<YoutubeEmbedIframe
|
||||
videoUrl={resultQuestion.content.video}
|
||||
containerSX={{
|
||||
width: isMobile ? "100%" : "490px",
|
||||
height: isMobile ? "100%" : "280px",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
resultQuestion?.content.useImage && resultQuestion.content.back && (
|
||||
<Box
|
||||
component="img"
|
||||
src={resultQuestion.content.back}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "844px",
|
||||
height: spec ? "auto" : isMobile ? "100%" : "306px",
|
||||
borderRadius: "8px"
|
||||
}}
|
||||
></Box>
|
||||
)
|
||||
}
|
||||
{resultQuestion.description !== "" &&
|
||||
resultQuestion.description !== " " && (
|
||||
<Typography
|
||||
sx={{
|
||||
@ -96,96 +111,98 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
m: "20px 0",
|
||||
color: theme.palette.text.primary,
|
||||
wordBreak: "break-word"
|
||||
}}
|
||||
>
|
||||
{resultQuestion.title}
|
||||
</Typography>
|
||||
|
||||
{
|
||||
resultQuestion.content.text !== "" &&
|
||||
resultQuestion.content.text !== " " && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
m: "20px 0",
|
||||
wordBreak: "break-word",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
{
|
||||
resultQuestion.content.text
|
||||
}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
|
||||
<Box width="100%">
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "end",
|
||||
px: "20px",
|
||||
}}
|
||||
>
|
||||
{show_badge &&
|
||||
<Box
|
||||
component={Link}
|
||||
target={"_blank"}
|
||||
href={"https://quiz.pena.digital"}
|
||||
<Typography
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "15px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
mb: "5px"
|
||||
m: "20px 0",
|
||||
color: theme.palette.text.primary,
|
||||
wordBreak: "break-word"
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "34px",
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
{resultQuestion.title}
|
||||
</Typography>
|
||||
|
||||
{
|
||||
resultQuestion.content.text !== "" &&
|
||||
resultQuestion.content.text !== " " && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
m: "20px 0",
|
||||
wordBreak: "break-word",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
{
|
||||
resultQuestion.content.text
|
||||
}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
|
||||
|
||||
<Box width="100%">
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "end",
|
||||
px: "20px",
|
||||
}}
|
||||
>
|
||||
{show_badge &&
|
||||
<Box
|
||||
component={Link}
|
||||
target={"_blank"}
|
||||
href={"https://quiz.pena.digital"}
|
||||
sx={{
|
||||
fontSize: "20px",
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
|
||||
whiteSpace: "nowrap",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "15px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
mb: "5px"
|
||||
}}
|
||||
>
|
||||
Сделано на PenaQuiz
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "34px",
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "20px",
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
Сделано на PenaQuiz
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
||||
// boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
p:
|
||||
(
|
||||
settings.cfg.resultInfo.showResultForm === "before" &&
|
||||
!Boolean(settings.cfg.score)
|
||||
) ||
|
||||
(
|
||||
settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect
|
||||
)
|
||||
? "20px" : "0",
|
||||
border: "1px solid #9A9AAF80",
|
||||
p:
|
||||
(
|
||||
settings.cfg.resultInfo.showResultForm === "before" &&
|
||||
!Boolean(settings.cfg.score)
|
||||
) ||
|
||||
(
|
||||
settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect
|
||||
)
|
||||
? "20px" : "0",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
|
||||
@ -202,16 +219,17 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
</Button>
|
||||
)}
|
||||
{settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect && (
|
||||
<Button
|
||||
href={resultQuestion.content.redirect}
|
||||
variant="contained"
|
||||
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
|
||||
>
|
||||
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
||||
</Button>
|
||||
)}
|
||||
resultQuestion.content.redirect && (
|
||||
<Button
|
||||
href={resultQuestion.content.redirect}
|
||||
variant="contained"
|
||||
sx={{p: "10px 20px", width: "auto", height: "50px"}}
|
||||
>
|
||||
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -64,7 +64,7 @@ export default function ViewPublicationPage() {
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
padding: "10px 15px",
|
||||
color: "#FFFFFF",
|
||||
color: "#9A9AAF",
|
||||
border: "1px solid #9A9AAF",
|
||||
background: "rgba(154,154,175, 0.2)",
|
||||
"&:disabled": {
|
||||
|
||||
@ -88,6 +88,9 @@ export const Select = ({
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
"& .MuiSelect-icon": {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
@ -106,7 +109,7 @@ export const Select = ({
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
"& .Mui-selected": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
backgroundColor: "#F2F3F7",
|
||||
color: colorMain,
|
||||
},
|
||||
},
|
||||
@ -114,7 +117,7 @@ export const Select = ({
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
color: colorMain,
|
||||
color: theme.palette.text.primary,
|
||||
display: "block",
|
||||
px: "9px",
|
||||
gap: "20px",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@frontend/squzanswerer",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"type": "module",
|
||||
"main": "./dist-package/index.js",
|
||||
"module": "./dist-package/index.js",
|
||||
@ -86,6 +86,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"country-flag-emoji-polyfill": "^0.1.8",
|
||||
"hex-rgb": "^5.0.0"
|
||||
"current-device": "^0.10.2",
|
||||
"hex-rgb": "^5.0.0",
|
||||
"mobile-detect": "^1.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
10
yarn.lock
10
yarn.lock
@ -1593,6 +1593,11 @@ csstype@^3.0.2, csstype@^3.1.2:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
|
||||
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
|
||||
|
||||
current-device@^0.10.2:
|
||||
version "0.10.2"
|
||||
resolved "https://registry.yarnpkg.com/current-device/-/current-device-0.10.2.tgz#1e40176bee7da655383ab7245b853fae7d2dfc8e"
|
||||
integrity sha512-FN223n2Cp1fRI/gyjJEAdagHhJ/2Z2STz3tUg1t4F259BhmVRCChkmxcgFtjYJsWuIacQEs7bqJpnAczIXIkWw==
|
||||
|
||||
cypress@^13.6.1:
|
||||
version "13.6.3"
|
||||
resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.3.tgz#54f03ca07ee56b2bc18211e7bd32abd2533982ba"
|
||||
@ -2687,6 +2692,11 @@ minimist@^1.2.8:
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
|
||||
integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
|
||||
|
||||
mobile-detect@^1.4.5:
|
||||
version "1.4.5"
|
||||
resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.5.tgz#da393c3c413ca1a9bcdd9ced653c38281c0fb6ad"
|
||||
integrity sha512-yc0LhH6tItlvfLBugVUEtgawwFU2sIe+cSdmRJJCTMZ5GEJyLxNyC/NIOAOGk67Fa8GNpOttO3Xz/1bHpXFD/g==
|
||||
|
||||
moment@^2.30.1:
|
||||
version "2.30.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user