Merge branch 'dev' into 'staging'

Dev

See merge request frontend/squzanswerer!115
This commit is contained in:
Nastya 2024-04-17 16:48:39 +00:00
commit a788c619fb
2 changed files with 723 additions and 696 deletions

@ -1,3 +1,4 @@
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";
@ -11,11 +12,10 @@ import {
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,9 +27,9 @@ 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;
@ -46,13 +46,27 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
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(() => {
function handleResize() {
setScreenHeight(window.innerHeight);
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
const resultQuestion =
currentQuestion.type === "result"
? currentQuestion ? currentQuestion
: questions.find((question): question is QuizQuestionResult => { : questions.find((question): question is QuizQuestionResult => {
if (settings?.cfg.haveRoot) { if (settings?.cfg.haveRoot) {
@ -62,7 +76,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
); );
} else { } else {
return ( return (
question.type === "result" && question.content.rule.parentId === "line" question.type === "result" &&
question.content.rule.parentId === "line"
); );
} }
}); });
@ -84,7 +99,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
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") || "{}");
@ -98,7 +113,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
} }
}; };
const FCcopy: any = settings.cfg.formContact.fields || settings.cfg.formContact; const FCcopy: any =
settings.cfg.formContact.fields || settings.cfg.formContact;
const filteredFC: any = {}; const filteredFC: any = {};
for (const i in FCcopy) { for (const i in FCcopy) {
@ -108,22 +124,21 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
} }
} }
async function handleShowResultsClick() { 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)) { if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
return enqueueSnackbar("введена некорректная почта"); return enqueueSnackbar("введена некорректная почта");
} }
if (fireOnce.current) { if (fireOnce.current) {
if ( if (
name.length === 0 name.length === 0 &&
&& email.length === 0 email.length === 0 &&
&& phone.length === 0 phone.length === 0 &&
&& text.length === 0 text.length === 0 &&
&& adress.length === 0 adress.length === 0
) return enqueueSnackbar("Пожалуйста, заполните поля"); )
return enqueueSnackbar("Пожалуйста, заполните поля");
//почта валидна, хоть одно поле заполнено //почта валидна, хоть одно поле заполнено
setFire(true); setFire(true);
@ -134,10 +149,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
localStorage.getItem("sessions") || "{}" localStorage.getItem("sessions") || "{}"
); );
sessions[quizId] = Date.now(); sessions[quizId] = Date.now();
localStorage.setItem( localStorage.setItem("sessions", JSON.stringify(sessions));
"sessions",
JSON.stringify(sessions)
);
enqueueSnackbar("Данные успешно отправлены"); enqueueSnackbar("Данные успешно отправлены");
} catch (e) { } catch (e) {
enqueueSnackbar("повторите попытку позже"); enqueueSnackbar("повторите попытку позже");
@ -145,7 +157,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
if (settings.cfg.resultInfo.showResultForm === "after") { if (settings.cfg.resultInfo.showResultForm === "after") {
onShowResult(); onShowResult();
} }
} }
setFire(false); setFire(false);
@ -158,7 +169,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
height: "100%", height: screenHeight > 500 ? "100%" : "auto",
overflow: "auto", overflow: "auto",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: "0", width: "0",
@ -169,10 +180,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
msOverflowStyle: "none", msOverflowStyle: "none",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design && !isMobile backgroundImage:
settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `linear-gradient(90deg, #272626, transparent), url(${
DESIGN_LIST[settings.cfg.theme]
})`
: null, : null,
}} }}
> >
@ -180,10 +194,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
sx={{ sx={{
width: !isMobile ? "100%" : isMobile ? undefined : "530px", width: !isMobile ? "100%" : isMobile ? undefined : "530px",
borderRadius: "4px", borderRadius: "4px",
height: "100%", height: isMobile ? "100%" : "auto",
minHeight: "100%", minHeight: "100%",
display: isMobile ? undefined : "flex", display: isMobile ? undefined : "flex",
background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default, background:
settings.cfg.design && !isMobile
? undefined
: theme.palette.background.default,
}} }}
> >
<Box <Box
@ -194,7 +211,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
borderRight: isMobile ? undefined : "1px solid #9A9AAF80", borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
margin: isMobile ? 0 : "40px 0" margin: isMobile ? 0 : "40px 0",
}} }}
> >
<Box <Box
@ -205,7 +222,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
flexDirection: "column", flexDirection: "column",
alignItems: "flex-start", alignItems: "flex-start",
justifyContent: "center", justifyContent: "center",
padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px" padding: isMobile ? "20px 20px 0 20px" : "0 0 0 40px",
}} }}
> >
<Typography <Typography
@ -216,7 +233,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
lineHeight: "normal", lineHeight: "normal",
fontWeight: 501, fontWeight: 501,
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word" wordBreak: "break-word",
}} }}
> >
{settings.cfg.formContact.title || {settings.cfg.formContact.title ||
@ -228,14 +245,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
color: theme.palette.text.primary, color: theme.palette.text.primary,
m: "20px 0", m: "20px 0",
fontSize: "18px", fontSize: "18px",
wordBreak: "break-word" wordBreak: "break-word",
}} }}
> >
{settings.cfg.formContact.desc} {settings.cfg.formContact.desc}
</Typography> </Typography>
)} )}
</Box> </Box>
</Box> </Box>
<Box <Box
@ -280,8 +296,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
border: `1px solid ${theme.palette.primary.main}`, border: `1px solid ${theme.palette.primary.main}`,
"&:disabled": { "&:disabled": {
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
color: "#9A9AAF" color: "#9A9AAF",
} },
}} }}
> >
{settings.cfg.formContact?.button || "Получить результаты"} {settings.cfg.formContact?.button || "Получить результаты"}
@ -319,13 +335,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
&ensp;ознакомлен &ensp;ознакомлен
</Typography> </Typography>
</Box> </Box>
{show_badge && {show_badge && (
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={ href={`https://${
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}` window.location.hostname.includes("s") ? "s" : ""
} }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -338,21 +354,24 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
<NameplateLogo <NameplateLogo
style={{ style={{
fontSize: "23px", fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF", color: quizThemes[settings.cfg.theme].isLight
? "#151515"
: "#FFFFFF",
}} }}
/> />
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", color: quizThemes[settings.cfg.theme].isLight
? "#4D4D4D"
: "#F5F7FF",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
> >
Сделано на PenaQuiz Сделано на PenaQuiz
</Typography> </Typography>
</Box> </Box>
} )}
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -388,7 +407,7 @@ const Inputs = ({
); );
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"}
@ -444,11 +463,17 @@ const Inputs = ({
} }
}; };
const CustomInput = ({ title, desc, Icon, onChange, id }: { const CustomInput = ({
title,
desc,
Icon,
onChange,
id,
}: {
id: string; id: string;
title: string; title: string;
desc: string; desc: string;
Icon: FC<{ color: string; backgroundColor: string; }>; Icon: FC<{ color: string; backgroundColor: string }>;
onChange: TextFieldProps["onChange"]; onChange: TextFieldProps["onChange"];
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
@ -467,24 +492,29 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
borderColor: "#9A9AAF80", borderColor: "#9A9AAF80",
borderRadius: "12px" borderRadius: "12px",
}, },
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
paddingLeft: 0 paddingLeft: 0,
}, },
'& .MuiOutlinedInput-root': { "& .MuiOutlinedInput-root": {
'&:hover fieldset': { "&:hover fieldset": {
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,
}, },
} },
}} }}
placeholder={desc} placeholder={desc}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Icon color="gray" <Icon
backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} /> color="gray"
backgroundColor={
quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "#F2F3F71A"
}
/>
</InputAdornment> </InputAdornment>
), ),
}} }}

@ -1,9 +1,4 @@
import { import { Box, Button, Link, Typography, useTheme } from "@mui/material";
Box,
Button, Link,
Typography,
useTheme
} from "@mui/material";
import { NameplateLogo } from "@icons/NameplateLogo"; import { NameplateLogo } from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
@ -24,7 +19,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000; const isTablet = useRootContainerSize() < 1000;
const { settings, show_badge, quizId } = useQuizData(); const { settings, show_badge, quizId } = useQuizData();
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep); const setCurrentQuizStep = useQuizViewStore(
(state) => state.setCurrentQuizStep
);
const spec = settings.cfg.spec; const spec = settings.cfg.spec;
console.log(quizThemes[settings.cfg.theme].isLight); console.log(quizThemes[settings.cfg.theme].isLight);
@ -41,10 +38,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design && !isMobile backgroundImage:
settings.cfg.design && !isMobile
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
}} }}
> >
<Box <Box
@ -57,7 +54,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
width: "100%", width: "100%",
height: "100%", height: "100%",
overflow: "auto", overflow: "auto",
background: settings.cfg.design && !isMobile background:
settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "transparent" ? "transparent"
: "linear-gradient(90deg,#272626, transparent)" : "linear-gradient(90deg,#272626, transparent)"
@ -77,7 +75,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
mb: "7px", mb: "7px",
}} }}
> >
{settings.cfg.startpage.logo && {settings.cfg.startpage.logo && (
<img <img
src={settings.cfg.startpage.logo} src={settings.cfg.startpage.logo}
style={{ style={{
@ -87,7 +85,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
}} }}
alt="" alt=""
/> />
} )}
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
@ -106,9 +104,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
width: "100%", width: "100%",
maxWidth: "844px", maxWidth: "844px",
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined, padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
}}> }}
{ >
!resultQuestion?.content.useImage && resultQuestion.content.video && ( {!resultQuestion?.content.useImage &&
resultQuestion.content.video && (
<YoutubeEmbedIframe <YoutubeEmbedIframe
videoUrl={resultQuestion.content.video} videoUrl={resultQuestion.content.video}
containerSX={{ containerSX={{
@ -117,11 +116,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
height: isMobile ? "100%" : "306px", height: isMobile ? "100%" : "306px",
}} }}
/> />
) )}
} {resultQuestion?.content.useImage && resultQuestion.content.back && (
{ <Box
resultQuestion?.content.useImage && resultQuestion.content.back && ( sx={{ width: "100%", display: "flex", justifyContent: "center" }}
<Box sx={{width: "100%", display: "flex", justifyContent: "center"}}> >
<Box <Box
component="img" component="img"
src={resultQuestion.content.back} src={resultQuestion.content.back}
@ -134,9 +133,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
}} }}
/> />
</Box> </Box>
)}
)
}
{resultQuestion.description !== "" && {resultQuestion.description !== "" &&
resultQuestion.description !== " " && ( resultQuestion.description !== " " && (
<Typography <Typography
@ -145,7 +142,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
fontWeight: 700, fontWeight: 700,
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word" wordBreak: "break-word",
}} }}
> >
{resultQuestion.description} {resultQuestion.description}
@ -156,14 +153,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
sx={{ sx={{
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word" wordBreak: "break-word",
}} }}
> >
{resultQuestion.title} {resultQuestion.title}
</Typography> </Typography>
{ {resultQuestion.content.text !== "" &&
resultQuestion.content.text !== "" &&
resultQuestion.content.text !== " " && ( resultQuestion.content.text !== " " && (
<Typography <Typography
sx={{ sx={{
@ -173,15 +169,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
> >
{ {resultQuestion.content.text}
resultQuestion.content.text
}
</Typography> </Typography>
) )}
}
</Box> </Box>
<Box width="100%"> <Box width="100%">
<Box <Box
sx={{ sx={{
@ -191,40 +183,43 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
px: "20px", px: "20px",
}} }}
> >
{show_badge && {show_badge && (
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={ href={`https://${
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}` window.location.hostname.includes("s") ? "s" : ""
} }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
mt: "15px", mt: "15px",
gap: "10px", gap: "10px",
textDecoration: "none", textDecoration: "none",
mb: "15px" mb: "15px",
}} }}
> >
<NameplateLogo <NameplateLogo
style={{ style={{
fontSize: "23px", fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF", color: quizThemes[settings.cfg.theme].isLight
? "#000000"
: "#F5F7FF",
}} }}
/> />
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", color: quizThemes[settings.cfg.theme].isLight
? "#4D4D4D"
: "#F5F7FF",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
> >
Сделано на PenaQuiz Сделано на PenaQuiz
</Typography> </Typography>
</Box> </Box>
} )}
</Box> </Box>
<Box <Box
@ -237,18 +232,16 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
alignItems: "center", alignItems: "center",
borderTop: "1px solid #9A9AAF80", borderTop: "1px solid #9A9AAF80",
p: p:
( (settings.cfg.resultInfo.showResultForm === "before" &&
settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score) ||
!settings.cfg.score (settings.cfg.resultInfo.showResultForm === "after" &&
) || resultQuestion.content.redirect)
( ? "20px"
settings.cfg.resultInfo.showResultForm === "after" && : "0",
resultQuestion.content.redirect
)
? "20px" : "0",
}} }}
> >
{settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score && ( {settings.cfg.resultInfo.showResultForm === "before" &&
!settings.cfg.score && (
<Button <Button
onClick={() => setCurrentQuizStep("contactform")} onClick={() => setCurrentQuizStep("contactform")}
variant="contained" variant="contained"
@ -264,7 +257,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
{settings.cfg.resultInfo.showResultForm === "after" && {settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && ( resultQuestion.content.redirect && (
<Button <Button
href={resultQuestion.content.redirect} href={
resultQuestion.content.redirect.includes("https")
? resultQuestion.content.redirect
: `https://${resultQuestion.content.redirect}`
}
variant="contained" variant="contained"
sx={{ p: "10px 20px", width: "auto", height: "50px" }} sx={{ p: "10px 20px", width: "auto", height: "50px" }}
> >