Merge branch 'update-result-and-contact-form' into dev
# Conflicts: # lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx # lib/components/ViewPublicationPage/ResultForm.tsx
This commit is contained in:
Tamara
commit
745ecaf4c2
@ -189,175 +189,172 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
|||||||
yandexMetrics.contactsFormOpened();
|
yandexMetrics.contactsFormOpened();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
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,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ContactTextBlock settings={settings} />
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
|
||||||
flexGrow: 0,
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
flexDirection: "column",
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
height: "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
|
||||||
alignItems: isMobile ? undefined : "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
flexDirection: "column",
|
|
||||||
p: isMobile
|
|
||||||
? "0 20px"
|
|
||||||
: isTablet
|
|
||||||
? "0px 40px 30px 60px"
|
|
||||||
: "125px 60px 30px 60px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
mt: isMobile ? "10px" : "20px",
|
|
||||||
mb: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Inputs
|
|
||||||
name={name}
|
|
||||||
setName={setName}
|
|
||||||
email={email}
|
|
||||||
setEmail={setEmail}
|
|
||||||
phone={phone}
|
|
||||||
setPhone={setPhone}
|
|
||||||
text={text}
|
|
||||||
setText={setText}
|
|
||||||
adress={adress}
|
|
||||||
setAdress={setAdress}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
width: isMobile ? "300px" : "390px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CustomCheckbox
|
|
||||||
label=""
|
|
||||||
handleChange={({ target }) => {
|
|
||||||
setReady(target.checked);
|
|
||||||
}}
|
|
||||||
checked={ready}
|
|
||||||
colorIcon={theme.palette.primary.main}
|
|
||||||
sx={{ marginRight: "0" }}
|
|
||||||
/>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
lineHeight: "18.96px",
|
|
||||||
}}
|
|
||||||
fontSize={"16px"}
|
|
||||||
>
|
|
||||||
С 
|
|
||||||
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
|
|
||||||
Положением об обработке персональных данных{" "}
|
|
||||||
</Link>
|
|
||||||
 и 
|
|
||||||
<Link
|
|
||||||
href={"https://shub.pena.digital/docs/privacy"}
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
Политикой конфиденциальности{" "}
|
|
||||||
</Link>
|
|
||||||
 ознакомлен
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
disabled={!(ready && !fire)}
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleShowResultsClick}
|
|
||||||
sx={{
|
|
||||||
border: `1px solid ${theme.palette.primary.main}`,
|
|
||||||
margin: isMobile ? "auto" : undefined,
|
|
||||||
mt: "20px",
|
|
||||||
p: "10px 20px",
|
|
||||||
"&:disabled": {
|
|
||||||
border: "1px solid #9A9AAF",
|
|
||||||
color: "#9A9AAF",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{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",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
mt: "55px",
|
justifyContent: "center",
|
||||||
mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
|
backgroundColor: theme.palette.background.default,
|
||||||
gap: "10px",
|
height: screenHeight > 500 ? "100%" : "auto",
|
||||||
textDecoration: "none",
|
overflow: "auto",
|
||||||
}}
|
"&::-webkit-scrollbar": {
|
||||||
>
|
width: "0",
|
||||||
<NameplateLogo
|
display: "none",
|
||||||
style={{
|
msOverflowStyle: "none",
|
||||||
fontSize: "20px",
|
},
|
||||||
color: quizThemes[settings.cfg.theme].isLight
|
scrollbarWidth: "none",
|
||||||
? "#151515"
|
msOverflowStyle: "none",
|
||||||
: "#FFFFFF",
|
backgroundPosition: "center",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundImage:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? quizThemes[settings.cfg.theme].isLight
|
||||||
|
? `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,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: !isMobile ? "100%" : isMobile ? undefined : "530px",
|
||||||
|
borderRadius: "4px",
|
||||||
|
height: isMobile ? "100%" : "auto",
|
||||||
|
minHeight: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: isMobile ? "column" : "row",
|
||||||
|
background:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? undefined
|
||||||
|
: theme.palette.background.default,
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<ContactTextBlock settings={settings}/>
|
||||||
|
<Box sx={{
|
||||||
|
flexGrow: isMobile ? 1 : 0,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
flexDirection: "column",
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
height: "auto",
|
||||||
|
}}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: isMobile ? undefined : "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexDirection: "column",
|
||||||
|
p: isMobile ? "0 20px" : isTablet ? "105px 40px 0 60px" : "105px 60px 0 60px",
|
||||||
|
margin: isMobile ? "0" : "auto 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
mt: isMobile ? "10px" : "20px",
|
||||||
|
mb: "20px"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Inputs
|
||||||
|
name={name}
|
||||||
|
setName={setName}
|
||||||
|
email={email}
|
||||||
|
setEmail={setEmail}
|
||||||
|
phone={phone}
|
||||||
|
setPhone={setPhone}
|
||||||
|
text={text}
|
||||||
|
setText={setText}
|
||||||
|
adress={adress}
|
||||||
|
setAdress={setAdress}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
width: isMobile ? "300px" : "390px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CustomCheckbox
|
||||||
|
label=""
|
||||||
|
handleChange={({target}) => {
|
||||||
|
setReady(target.checked);
|
||||||
|
}}
|
||||||
|
checked={ready}
|
||||||
|
colorIcon={theme.palette.primary.main}
|
||||||
|
sx={{marginRight: "0"}}
|
||||||
|
/>
|
||||||
|
<Typography sx={{
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
lineHeight: "18.96px"
|
||||||
|
}} fontSize={"16px"}>
|
||||||
|
С 
|
||||||
|
<Link href={"https://shub.pena.digital/ppdd"}
|
||||||
|
target="_blank">
|
||||||
|
Положением об обработке персональных
|
||||||
|
данных{" "}
|
||||||
|
</Link>
|
||||||
|
 и 
|
||||||
|
<Link
|
||||||
|
href={"https://shub.pena.digital/docs/privacy"}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
Политикой конфиденциальности{" "}
|
||||||
|
</Link>
|
||||||
|
 ознакомлен
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
disabled={!(ready && !fire)}
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleShowResultsClick}
|
||||||
|
sx={{
|
||||||
|
border: `1px solid ${theme.palette.primary.main}`,
|
||||||
|
margin: isMobile ? "auto" : undefined,
|
||||||
|
mt: "20px",
|
||||||
|
p: "10px 20px",
|
||||||
|
"&:disabled": {
|
||||||
|
border: "1px solid #9A9AAF",
|
||||||
|
color: "#9A9AAF",
|
||||||
|
},
|
||||||
|
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{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: isMobile ? "30px" : isTablet ? "40px" : "50px",
|
||||||
|
gap: "10px",
|
||||||
|
textDecoration: "none",
|
||||||
|
margitTop: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<NameplateLogo
|
||||||
|
style={{
|
||||||
|
fontSize: "20px",
|
||||||
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#151515"
|
||||||
|
: "#FFFFFF",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
);
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -14,7 +14,7 @@ export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
|
|||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
flexGrow: 1,
|
flexGrow: isMobile ? 0 : 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
@ -26,7 +26,7 @@ export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
|
|||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: isMobile? "100%" : isTablet? "410px" : "630px",
|
maxWidth: isMobile ? "100%" : isTablet ? "410px" : "630px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
|
|||||||
@ -7,7 +7,7 @@ type CountrySelectorProps = {
|
|||||||
setMask: Dispatch<SetStateAction<string>>;
|
setMask: Dispatch<SetStateAction<string>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
|
export const CountrySelector: FC<CountrySelectorProps> = ({setMask}) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const [country, setCountry] = useState('RU');
|
const [country, setCountry] = useState('RU');
|
||||||
|
|
||||||
@ -25,6 +25,8 @@ export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
|
|||||||
PaperProps: {
|
PaperProps: {
|
||||||
style: {
|
style: {
|
||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
|
borderRadius: '12px',
|
||||||
|
scrollbarWidth: "none",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
@ -56,7 +58,8 @@ export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Object.keys(phoneMasksByCountry).map((countryCode) => {
|
{Object.keys(phoneMasksByCountry).map((countryCode) => {
|
||||||
return <MenuItem value={countryCode}>{phoneMasksByCountry[countryCode][0]}</MenuItem>
|
return <MenuItem
|
||||||
|
value={countryCode}>{phoneMasksByCountry[countryCode][0]}</MenuItem>
|
||||||
})}
|
})}
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -38,234 +38,246 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
yandexMetrics.resultIdShown(resultQuestion.id);
|
yandexMetrics.resultIdShown(resultQuestion.id);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
height: "100%",
|
|
||||||
minHeight: "100%",
|
|
||||||
width: "100%",
|
|
||||||
backgroundColor: theme.palette.background.default,
|
|
||||||
backgroundPosition: "center",
|
|
||||||
backgroundSize: "cover",
|
|
||||||
backgroundImage:
|
|
||||||
settings.cfg.design && !isMobile
|
|
||||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
|
||||||
: null,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "center",
|
|
||||||
pt: "30px",
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
overflow: "auto",
|
|
||||||
background:
|
|
||||||
settings.cfg.design && !isMobile
|
|
||||||
? quizThemes[settings.cfg.theme].isLight
|
|
||||||
? "transparent"
|
|
||||||
: "linear-gradient(90deg,#272626, transparent)"
|
|
||||||
: theme.palette.background.default,
|
|
||||||
scrollbarWidth: "none",
|
|
||||||
"&::-webkit-scrollbar": {
|
|
||||||
width: 0,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
flexWrap: "wrap",
|
|
||||||
gap: "30px",
|
|
||||||
mb: "7px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: "14px",
|
display: "flex",
|
||||||
color: theme.palette.text.primary,
|
flexDirection: "column",
|
||||||
wordBreak: "break-word",
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
height: "100%",
|
||||||
|
minHeight: "100%",
|
||||||
|
width: "100%",
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundImage:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||||
|
: null,
|
||||||
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
Ваш результат:
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<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: "100%",
|
|
||||||
maxWidth: "844px",
|
|
||||||
height: isMobile ? "100%" : "306px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{resultQuestion?.content.useImage && resultQuestion.content.back && (
|
|
||||||
<Box
|
<Box
|
||||||
sx={{ width: "100%", display: "flex", justifyContent: "center" }}
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
background:
|
||||||
|
settings.cfg.design && !isMobile
|
||||||
|
? quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "transparent"
|
||||||
|
: "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%)"
|
||||||
|
: theme.palette.background.default,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
component="img"
|
sx={{
|
||||||
src={resultQuestion.content.back}
|
display: "flex",
|
||||||
sx={{
|
flexDirection: "column",
|
||||||
width: "100%",
|
alignItems: "center",
|
||||||
maxWidth: "306px",
|
width: "100%",
|
||||||
height: spec ? "auto" : isMobile ? "236px" : "306px",
|
height: "100%",
|
||||||
borderRadius: "8px",
|
overflow: "auto",
|
||||||
objectFit: "contain",
|
padding: "0 20px 20px",
|
||||||
}}
|
scrollbarWidth: "none",
|
||||||
/>
|
"&::-webkit-scrollbar": {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
mb: "10px",
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: "700px",
|
||||||
|
backgroundColor: "#9A9AAF1A",
|
||||||
|
borderRadius: "0 0 12px 12px",
|
||||||
|
padding: "20px 20px 15px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontSize: "17px",
|
||||||
|
color: "#9A9AAF",
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Ваш результат:
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: "700px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!resultQuestion?.content.useImage &&
|
||||||
|
resultQuestion.content.video && (
|
||||||
|
<YoutubeEmbedIframe
|
||||||
|
videoUrl={resultQuestion.content.video}
|
||||||
|
containerSX={{
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: "700px",
|
||||||
|
height: isMobile ? "100%" : "306px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{resultQuestion?.content.useImage &&
|
||||||
|
resultQuestion.content.back && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt="resultImage"
|
||||||
|
src={resultQuestion.content.back}
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: spec ? "auto" : isMobile ? "236px" : "306px",
|
||||||
|
borderRadius: "12px",
|
||||||
|
objectFit: "cover",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{resultQuestion.description !== "" &&
|
||||||
|
resultQuestion.description !== " " && (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontSize: "27px",
|
||||||
|
lineHeight: "32px",
|
||||||
|
fontWeight: 700,
|
||||||
|
mt: "30px",
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{resultQuestion.description}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
mt: "12px",
|
||||||
|
fontSize: "17px",
|
||||||
|
lineHeight: "20px",
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{resultQuestion.title}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{resultQuestion.content.text !== "" &&
|
||||||
|
resultQuestion.content.text !== " " && (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontSize: "17px",
|
||||||
|
lineHeight: "20px",
|
||||||
|
mt: "25px ",
|
||||||
|
wordBreak: "break-word",
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{resultQuestion.content.text}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</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",
|
||||||
|
alignSelf: isMobile ? "center" : "end",
|
||||||
|
margin: isMobile ? "15px 0 0" : "15px 25px 0 0",
|
||||||
|
gap: "10px",
|
||||||
|
textDecoration: "none",
|
||||||
|
mb: "15px",
|
||||||
|
position: isTablet || isMobile ? "sticky" : "absolute",
|
||||||
|
bottom: "90px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<NameplateLogo
|
||||||
|
style={{
|
||||||
|
fontSize: "23px",
|
||||||
|
color: quizThemes[settings.cfg.theme].isLight
|
||||||
|
? "#000000"
|
||||||
|
: "#F5F7FF",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
flexDirection: "column",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
borderTop: "1px solid #9A9AAF80",
|
||||||
|
p: "20px",
|
||||||
|
position: "sticky",
|
||||||
|
bottom: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{settings.cfg.resultInfo.showResultForm === "before" &&
|
||||||
|
!settings.cfg.score && (
|
||||||
|
<Button
|
||||||
|
onClick={() => setCurrentQuizStep("contactform")}
|
||||||
|
variant="contained"
|
||||||
|
sx={{
|
||||||
|
p: "10px 20px",
|
||||||
|
width: "auto",
|
||||||
|
height: "50px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{resultQuestion.content.hint.text || "Узнать подробнее"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{settings.cfg.resultInfo.showResultForm === "after" &&
|
||||||
|
resultQuestion.content.redirect && (
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
vkMetrics.resultLink();
|
||||||
|
yandexMetrics.resultLink();
|
||||||
|
setTimeout(() => {
|
||||||
|
location.href =
|
||||||
|
(resultQuestion.content.redirect.includes("https")
|
||||||
|
? resultQuestion.content.redirect
|
||||||
|
: `https://${resultQuestion.content.redirect}`).replace(/\s+/g, "");
|
||||||
|
}, 1000)
|
||||||
|
}}
|
||||||
|
variant="contained"
|
||||||
|
sx={{
|
||||||
|
p: "10px 20px",
|
||||||
|
width: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
|
||||||
{resultQuestion.description !== "" &&
|
|
||||||
resultQuestion.description !== " " && (
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: 700,
|
|
||||||
mt: "25px",
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{resultQuestion.description}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
mt: "20px",
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{resultQuestion.title}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{resultQuestion.content.text !== "" &&
|
|
||||||
resultQuestion.content.text !== " " && (
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
fontSize: "18px",
|
|
||||||
mt: "30px ",
|
|
||||||
wordBreak: "break-word",
|
|
||||||
color: theme.palette.text.primary,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{resultQuestion.content.text}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</Box>
|
</Box>
|
||||||
|
);
|
||||||
<Box width="100%">
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
width: "100%",
|
|
||||||
justifyContent: "end",
|
|
||||||
px: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{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: "15px",
|
|
||||||
gap: "10px",
|
|
||||||
textDecoration: "none",
|
|
||||||
mb: "15px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NameplateLogo
|
|
||||||
style={{
|
|
||||||
fontSize: "23px",
|
|
||||||
color: quizThemes[settings.cfg.theme].isLight
|
|
||||||
? "#000000"
|
|
||||||
: "#F5F7FF",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
// boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
|
||||||
width: "100%",
|
|
||||||
flexDirection: "column",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
borderTop: "1px solid #9A9AAF80",
|
|
||||||
p:
|
|
||||||
(settings.cfg.resultInfo.showResultForm === "before" &&
|
|
||||||
!settings.cfg.score) ||
|
|
||||||
(settings.cfg.resultInfo.showResultForm === "after" &&
|
|
||||||
resultQuestion.content.redirect)
|
|
||||||
? "20px"
|
|
||||||
: "0",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{settings.cfg.resultInfo.showResultForm === "before" &&
|
|
||||||
!settings.cfg.score && (
|
|
||||||
<Button
|
|
||||||
onClick={() => setCurrentQuizStep("contactform")}
|
|
||||||
variant="contained"
|
|
||||||
sx={{
|
|
||||||
p: "10px 20px",
|
|
||||||
width: "auto",
|
|
||||||
height: "50px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{resultQuestion.content.hint.text || "Узнать подробнее"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{settings.cfg.resultInfo.showResultForm === "after" &&
|
|
||||||
resultQuestion.content.redirect && (
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
vkMetrics.resultLink();
|
|
||||||
yandexMetrics.resultLink();
|
|
||||||
setTimeout(() => {
|
|
||||||
location.href =
|
|
||||||
(resultQuestion.content.redirect.includes("https")
|
|
||||||
? resultQuestion.content.redirect
|
|
||||||
: `https://${resultQuestion.content.redirect}`).replace(/\s+/g, "");
|
|
||||||
}, 1000)
|
|
||||||
}}
|
|
||||||
variant="contained"
|
|
||||||
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
|
|
||||||
>
|
|
||||||
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box >
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user