SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'update-result-and-contact-form' into dev

Browse Source 
# Conflicts:
#	lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
#	lib/components/ViewPublicationPage/ResultForm.tsx
This commit is contained in:
Tamara 2024-05-30 03:19:04 +03:00
commit 745ecaf4c2
4 changed files with 402 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
View File

@ -211,7 +211,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
settings.cfg.design && !isMobile 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, 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, : null,
}} }}
@ -222,36 +222,32 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
borderRadius: "4px", borderRadius: "4px",
height: isMobile ? "100%" : "auto", height: isMobile ? "100%" : "auto",
minHeight: "100%", minHeight: "100%",
display: isMobile ? undefined : "flex", display: "flex",
flexDirection: isMobile ? "column" : "row",
background: background:
settings.cfg.design && !isMobile settings.cfg.design && !isMobile
? undefined ? undefined
: theme.palette.background.default, : theme.palette.background.default,
}} }}
> >
<ContactTextBlock settings={settings} /> <ContactTextBlock settings={settings}/>
<Box <Box sx={{
sx={{ flexGrow: isMobile ? 1 : 0,
flexGrow: 0,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: "column", flexDirection: "column",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
height: "auto", height: "auto",
}} }}>
>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: isMobile ? undefined : "center", alignItems: isMobile ? undefined : "center",
justifyContent: "center", justifyContent: "center",
flexDirection: "column", flexDirection: "column",
p: isMobile p: isMobile ? "0 20px" : isTablet ? "105px 40px 0 60px" : "105px 60px 0 60px",
? "0 20px" margin: isMobile ? "0" : "auto 0",
: isTablet
? "0px 40px 30px 60px"
: "125px 60px 30px 60px",
}} }}
> >
<Box <Box
@ -259,7 +255,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
mt: isMobile ? "10px" : "20px", mt: isMobile ? "10px" : "20px",
mb: "20px", mb: "20px"
}} }}
> >
<Inputs <Inputs
@ -283,23 +279,22 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
> >
<CustomCheckbox <CustomCheckbox
label="" label=""
handleChange={({ target }) => { handleChange={({target}) => {
setReady(target.checked); setReady(target.checked);
}} }}
checked={ready} checked={ready}
colorIcon={theme.palette.primary.main} colorIcon={theme.palette.primary.main}
sx={{ marginRight: "0" }} sx={{marginRight: "0"}}
/> />
<Typography <Typography sx={{
sx={{
color: theme.palette.text.primary, color: theme.palette.text.primary,
lineHeight: "18.96px", lineHeight: "18.96px"
}} }} fontSize={"16px"}>
fontSize={"16px"}
>
С&ensp; С&ensp;
<Link href={"https://shub.pena.digital/ppdd"} target="_blank"> <Link href={"https://shub.pena.digital/ppdd"}
Положением об обработке персональных данных{" "} target="_blank">
Положением об обработке персональных
данных{" "}
</Link> </Link>
&ensp;и&ensp; &ensp;и&ensp;
<Link <Link
@ -326,6 +321,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
color: "#9A9AAF", color: "#9A9AAF",
}, },
}} }}
> >
{settings.cfg.formContact?.button || "Получить результаты"} {settings.cfg.formContact?.button || "Получить результаты"}
@ -344,6 +340,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
mb: isMobile ? "30px" : isTablet ? "40px" : "50px", mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
gap: "10px", gap: "10px",
textDecoration: "none", textDecoration: "none",
margitTop: "auto",
}} }}
> >
<NameplateLogo <NameplateLogo

4
lib/components/ViewPublicationPage/ContactForm/ContactTextBlock/index.tsx
View File

@ -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
lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx
View File

@ -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>
); );

108
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -55,6 +55,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
settings.cfg.design && !isMobile settings.cfg.design && !isMobile
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
position: "relative",
}} }}
> >
<Box <Box
@ -63,16 +64,25 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
pt: "30px",
width: "100%", width: "100%",
height: "100%", height: "100%",
overflow: "auto",
background: background:
settings.cfg.design && !isMobile settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "transparent" ? "transparent"
: "linear-gradient(90deg,#272626, 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, : theme.palette.background.default,
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
height: "100%",
overflow: "auto",
padding: "0 20px 20px",
scrollbarWidth: "none", scrollbarWidth: "none",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: 0, width: 0,
@ -84,14 +94,18 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexWrap: "wrap", flexWrap: "wrap",
gap: "30px", mb: "10px",
mb: "7px", width: "100%",
maxWidth: "700px",
backgroundColor: "#9A9AAF1A",
borderRadius: "0 0 12px 12px",
padding: "20px 20px 15px",
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "17px",
color: theme.palette.text.primary, color: "#9A9AAF",
wordBreak: "break-word", wordBreak: "break-word",
}} }}
> >
@ -104,8 +118,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
flexDirection: "column", flexDirection: "column",
alignItems: "flex-start", alignItems: "flex-start",
width: "100%", width: "100%",
maxWidth: "844px", maxWidth: "700px",
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
}} }}
> >
{!resultQuestion?.content.useImage && {!resultQuestion?.content.useImage &&
@ -114,24 +127,29 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
videoUrl={resultQuestion.content.video} videoUrl={resultQuestion.content.video}
containerSX={{ containerSX={{
width: "100%", width: "100%",
maxWidth: "844px", maxWidth: "700px",
height: isMobile ? "100%" : "306px", height: isMobile ? "100%" : "306px",
}} }}
/> />
)} )}
{resultQuestion?.content.useImage && resultQuestion.content.back && ( {resultQuestion?.content.useImage &&
resultQuestion.content.back && (
<Box <Box
sx={{ width: "100%", display: "flex", justifyContent: "center" }}
>
<Box
component="img"
src={resultQuestion.content.back}
sx={{ sx={{
width: "100%", width: "100%",
maxWidth: "306px", display: "flex",
justifyContent: "center",
}}
>
<img
alt="resultImage"
src={resultQuestion.content.back}
style={{
width: "100%",
height: spec ? "auto" : isMobile ? "236px" : "306px", height: spec ? "auto" : isMobile ? "236px" : "306px",
borderRadius: "8px", borderRadius: "12px",
objectFit: "contain", objectFit: "cover",
overflow: "hidden",
}} }}
/> />
</Box> </Box>
@ -140,9 +158,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
resultQuestion.description !== " " && ( resultQuestion.description !== " " && (
<Typography <Typography
sx={{ sx={{
fontSize: "24px", fontSize: "27px",
lineHeight: "32px",
fontWeight: 700, fontWeight: 700,
mt: "25px", mt: "30px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word", wordBreak: "break-word",
}} }}
@ -153,7 +172,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Typography <Typography
sx={{ sx={{
mt: "20px", mt: "12px",
fontSize: "17px",
lineHeight: "20px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word", wordBreak: "break-word",
}} }}
@ -165,8 +186,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
resultQuestion.content.text !== " " && ( resultQuestion.content.text !== " " && (
<Typography <Typography
sx={{ sx={{
fontSize: "18px", fontSize: "17px",
mt: "30px ", lineHeight: "20px",
mt: "25px ",
wordBreak: "break-word", wordBreak: "break-word",
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
@ -175,29 +197,24 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
</Typography> </Typography>
)} )}
</Box> </Box>
</Box>
<Box width="100%">
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px",
}}
>
{show_badge && ( {show_badge && (
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={`https://${window.location.hostname.includes("s") ? "s" : "" href={`https://${
window.location.hostname.includes("s") ? "s" : ""
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`} }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
mt: "15px", alignSelf: isMobile ? "center" : "end",
margin: isMobile ? "15px 0 0" : "15px 25px 0 0",
gap: "10px", gap: "10px",
textDecoration: "none", textDecoration: "none",
mb: "15px", mb: "15px",
position: isTablet || isMobile ? "sticky" : "absolute",
bottom: "90px",
}} }}
> >
<NameplateLogo <NameplateLogo
@ -210,24 +227,17 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
/> />
</Box> </Box>
)} )}
</Box>
<Box <Box
sx={{ sx={{
// boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
width: "100%", width: "100%",
flexDirection: "column", flexDirection: "column",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
borderTop: "1px solid #9A9AAF80", borderTop: "1px solid #9A9AAF80",
p: p: "20px",
(settings.cfg.resultInfo.showResultForm === "before" && position: "sticky",
!settings.cfg.score) || bottom: 0,
(settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect)
? "20px"
: "0",
}} }}
> >
{settings.cfg.resultInfo.showResultForm === "before" && {settings.cfg.resultInfo.showResultForm === "before" &&
@ -258,7 +268,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
}, 1000) }, 1000)
}} }}
variant="contained" variant="contained"
sx={{ p: "10px 20px", width: "auto", height: "50px" }} sx={{
p: "10px 20px",
width: "auto",
}}
> >
{resultQuestion.content.hint.text || "Перейти на сайт"} {resultQuestion.content.hint.text || "Перейти на сайт"}
</Button> </Button>
@ -266,6 +279,5 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Box >
); );
}; };