Merge branch 'fix' into 'main'

Fix

See merge request frontend/squiz!80
This commit is contained in:
Nastya 2023-12-18 16:44:07 +00:00
commit 1b577e4f33
7 changed files with 272 additions and 213 deletions

@ -193,7 +193,8 @@ export default function InstallQuiz() {
<TextField <TextField
disabled disabled
id={"inputLinkone"} id={"inputLinkone"}
value="https://pena.com/" value="https://hbpn.link/"
// value="https://pena.com/"
sx={{ sx={{
"& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": { "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
border: "none", border: "none",

@ -302,7 +302,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
margin: "0 5px 0 10px", margin: "0 5px 0 10px",
}} }}
onClick={() => { onClick={() => {
if(question.content.rule.parentId.length !== 0) { if (question.type === null) deleteQuestion(question.id)
if(question?.content?.rule.parentId.length !== 0) {
setOpenDelete(true) setOpenDelete(true)
} else { } else {
deleteQuestionWithTimeout(question.id, deleteFn); deleteQuestionWithTimeout(question.id, deleteFn);

@ -154,9 +154,7 @@ const Inputs = () => {
if (FC.used) someUsed.push(<CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />) if (FC.used) someUsed.push(<CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />)
return <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} /> return <CustomInput title={FC.innerText || data.defaultText} desc={FC.text || data.defaultTitle} Icon={data.icon} />
}) })
console.log(someUsed)
console.log(Icons)
if (someUsed.length) { if (someUsed.length) {
return <>{someUsed}</> return <>{someUsed}</>
} else { } else {

@ -148,6 +148,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
}; };
const followNextStep = () => { const followNextStep = () => {
if (linear) { if (linear) {
const questionIndex = questions.findIndex(({ id }) => id === question.id); const questionIndex = questions.findIndex(({ id }) => id === question.id);
const nextQuestion = questions[questionIndex + 1]; const nextQuestion = questions[questionIndex + 1];
@ -171,6 +173,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
if (nextQuestionId) { if (nextQuestionId) {
const nextQuestion = getQuestionByContentId(nextQuestionId); const nextQuestion = getQuestionByContentId(nextQuestionId);
console.log(nextQuestion);
if (nextQuestion?.type && nextQuestion.type !== "result") { if (nextQuestion?.type && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion); setCurrentQuestion(nextQuestion);
return; return;
@ -182,7 +185,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
if (nextQuestion?.type && nextQuestion.type !== "result") { if (nextQuestion?.type && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion); setCurrentQuestion(nextQuestion);
} else { } else {
showResult(); showResult(nextQuestion);
} }
} }
}; };

@ -43,8 +43,7 @@ const QUESTIONS_MAP: any = {
export const Question = ({ questions }: QuestionProps) => { export const Question = ({ questions }: QuestionProps) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const [currentQuestion, setCurrentQuestion] = const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false); const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false); const [showResultForm, setShowResultForm] = useState<boolean>(false);
@ -62,8 +61,7 @@ export const Question = ({ questions }: QuestionProps) => {
if (!currentQuestion) return <>не смог отобразить вопрос</>; if (!currentQuestion) return <>не смог отобразить вопрос</>;
const QuestionComponent = const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
console.log("showResultForm " , showResultForm) console.log("showResultForm " , showResultForm)
return ( return (

@ -1,24 +1,16 @@
import { import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Button,
ButtonBase,
Link,
Paper,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings"; import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable"; import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice"; import { useUADevice } from "../../utils/hooks/useUADevice";
import { NameplateLogo } from "@icons/NameplateLogo";
interface Props { interface Props {
setVisualStartPage: (a:boolean) => void setVisualStartPage: (a: boolean) => void;
} }
export const StartPageViewPublication = ({setVisualStartPage}:Props) => { export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
@ -29,9 +21,9 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
navigator.clipboard.writeText(quiz.config.info.phonenumber); navigator.clipboard.writeText(quiz.config.info.phonenumber);
}; };
const background = quiz.config.startpage.background.type === "image" const background =
? quiz.config.startpage.background.desktop quiz.config.startpage.background.type === "image" ? (
? ( quiz.config.startpage.background.desktop ? (
<img <img
src={quiz.config.startpage.background.desktop} src={quiz.config.startpage.background.desktop}
alt="" alt=""
@ -39,155 +31,199 @@ export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
width: "100%", width: "100%",
height: "100%", height: "100%",
objectFit: "cover", objectFit: "cover",
overflow: "hidden" overflow: "hidden",
}} }}
/> />
) ) : null
: null ) : quiz.config.startpage.background.type === "video" ? (
: quiz.config.startpage.background.type === "video" quiz.config.startpage.background.video ? (
? quiz.config.startpage.background.video <YoutubeEmbedIframe
? ( videoUrl={quiz.config.startpage.background.video}
<YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} containerSX={{
containerSX={{ width:
width: quiz.config.startpageType === "centered" ? "550px" : quiz.config.startpageType === "expanded" ? "100vw" : "100%", quiz.config.startpageType === "centered"
height: quiz.config.startpageType === "centered" ? "275px" : quiz.config.startpageType === "expanded" ? "100vh" : "100%", ? "550px"
borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0", : quiz.config.startpageType === "expanded"
overflow: "hidden", ? "100vw"
"& iframe": { : "100%",
width: "100%", height:
height: "100%", quiz.config.startpageType === "centered"
transform: quiz.config.startpageType === "centered" ? "" : quiz.config.startpageType === "expanded" ? "scale(1.5)" : "scale(2.4)", ? "275px"
: quiz.config.startpageType === "expanded"
} ? "100vh"
: "100%",
}} borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
/> overflow: "hidden",
) "& iframe": {
: null width: "100%",
: null; height: "100%",
transform:
quiz.config.startpageType === "centered"
? ""
: quiz.config.startpageType === "expanded"
? "scale(1.5)"
: "scale(2.4)",
},
}}
/>
) : null
) : null;
return ( return (
<Paper className="quiz-preview-draghandle" <Paper
className="quiz-preview-draghandle"
sx={{ sx={{
height: "100vh", height: "100vh",
background: quiz.config.startpageType === "expanded" ? background:
quiz.config.startpage.position === "left" ? "linear-gradient(90deg,#272626,transparent)" : quiz.config.startpageType === "expanded"
quiz.config.startpage.position === "center" ? "linear-gradient(180deg,transparent,#272626)" : ? quiz.config.startpage.position === "left"
"linear-gradient(270deg,#272626,transparent)" ? "linear-gradient(90deg,#272626,transparent)"
: "", : quiz.config.startpage.position === "center"
color: quiz.config.startpageType === "expanded" ? "white" : "black" ? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: "",
}}> color: quiz.config.startpageType === "expanded" ? "white" : "black",
}}
>
<QuizPreviewLayoutByType <QuizPreviewLayoutByType
quizHeaderBlock={<Box quizHeaderBlock={
p={quiz.config.startpageType === "standard" ? "" : "16px"} <Box p={quiz.config.startpageType === "standard" ? "" : "16px"}>
> <Box
<Box sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "20px", gap: "20px",
mb: "7px" mb: "7px",
}}> }}
{quiz.config.startpage.logo && ( >
<img {quiz.config.startpage.logo && (
src={quiz.config.startpage.logo} <img
style={{ src={quiz.config.startpage.logo}
height: "37px", style={{
maxWidth: "43px", height: "37px",
objectFit: "cover", maxWidth: "43px",
}} objectFit: "cover",
alt="" }}
/> alt=""
)} />
<Typography sx={{ fontSize: "14px" }}> )}
{quiz.config.info.orgname} <Typography sx={{ fontSize: "14px" }}>{quiz.config.info.orgname}</Typography>
</Typography> </Box>
<Link mb="16px" href={quiz.config.info.site}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.site}
</Typography>
</Link>
</Box> </Box>
<Link mb="16px" href={quiz.config.info.site}> }
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}> quizMainBlock={
{quiz.config.info.site} <>
</Typography> <Box
</Link> sx={{
</Box>} display: "flex",
quizMainBlock={<> flexDirection: "column",
<Box sx={{ justifyContent: "center",
display: "flex", alignItems:
flexDirection: "column", quiz.config.startpageType === "centered"
justifyContent: "center", ? "center"
alignItems: quiz.config.startpageType === "centered" ? "center" : : quiz.config.startpageType === "expanded"
quiz.config.startpageType === "expanded" ? quiz.config.startpage.position === "center"
? quiz.config.startpage.position === "center" ? ? "center"
"center" : "start"
: "start": "start", : "start",
mt: "28px", mt: "28px",
width: "100%" width: "100%",
}}> }}
<Typography sx={{ >
fontWeight: "bold", <Typography
fontSize: "26px", sx={{
fontStyle: "normal", fontWeight: "bold",
fontStretch: "normal", fontSize: "26px",
lineHeight: "1.2", fontStyle: "normal",
}}>{quiz.name}</Typography> fontStretch: "normal",
<Typography sx={{ lineHeight: "1.2",
fontSize: "16px", }}
m: "16px 0" >
}}> {quiz.name}
{quiz.config.startpage.description} </Typography>
</Typography> <Typography
<Box width={ quiz.config.startpageType === "standard" ? "100%" : "auto"}>
<Button
variant="contained"
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
padding: "10px 15px", m: "16px 0",
width: quiz.config.startpageType === "standard" ? "100%" : "auto"
}} }}
onClick={() => setVisualStartPage(true)}
> >
{quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"} {quiz.config.startpage.description}
</Button>
</Box>
</Box>
<Box
sx={{
mt: "46px"
}}
>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography> </Typography>
)} <Box width={quiz.config.startpageType === "standard" ? "100%" : "auto"}>
<Typography sx={{ fontSize: "12px", textAlign: "end" }}> <Button
{quiz.config.info.law} variant="contained"
</Typography> sx={{
</Box> fontSize: "16px",
</>} padding: "10px 15px",
width: quiz.config.startpageType === "standard" ? "100%" : "auto",
}}
onClick={() => setVisualStartPage(true)}
>
{quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box
sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
>
<Box>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<NameplateLogo style={{ fontSize: "34px" }} />
<Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
</>
}
backgroundBlock={background} backgroundBlock={background}
startpageType={quiz.config.startpageType} startpageType={quiz.config.startpageType}
alignType={quiz.config.startpage.position} alignType={quiz.config.startpage.position}
/> />
</Paper> </Paper>
); );
} };
function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: { function QuizPreviewLayoutByType({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
}: {
quizHeaderBlock: JSX.Element; quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element; quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null; backgroundBlock: JSX.Element | null;
@ -201,28 +237,35 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
case null: case null:
case "standard": { case "standard": {
return ( return (
<Box sx={{ <Box
display: "flex", sx={{
flexDirection: alignType === "left" ? "row" : "row-reverse",
flexGrow: 1,
height: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}>
<Box sx={{
width: !isTablet ? "40%" : "100%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: alignType === "left" ? "row" : "row-reverse",
justifyContent: "space-between", flexGrow: 1,
alignItems: !isTablet ? "flex-start" : "center", height: "100vh",
p: "25px" "&::-webkit-scrollbar": { width: 0 },
}}> }}
>
<Box
sx={{
width: !isTablet ? "40%" : "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: !isTablet ? "flex-start" : "center",
p: "25px",
}}
>
{quizHeaderBlock} {quizHeaderBlock}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
<Box sx={{
width: "60%", <Box
overflow: "hidden" sx={{
}}> width: "60%",
overflow: "hidden",
}}
>
{backgroundBlock} {backgroundBlock}
</Box> </Box>
</Box> </Box>
@ -230,36 +273,42 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
} }
case "expanded": { case "expanded": {
return ( return (
<Box sx={{ <Box
position: "relative", sx={{
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}>
<Box sx={{
width: "40%",
position: "relative", position: "relative",
padding: "16px",
zIndex: 2,
display: "flex", display: "flex",
flexDirection: "column", justifyContent: startpageAlignTypeToJustifyContent[alignType],
justifyContent: "space-between", flexGrow: 1,
alignItems: alignType === "center" ? "center" : "start", height: "100%",
}}> "&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 2,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}
>
{quizHeaderBlock} {quizHeaderBlock}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
<Box sx={{ <Box
position: "absolute", sx={{
left: 0, position: "absolute",
top: 0, left: 0,
height: "100%", top: 0,
width: "100%", height: "100%",
zIndex: 1, width: "100%",
overflow: "hidden" zIndex: 1,
}}> overflow: "hidden",
}}
>
{backgroundBlock} {backgroundBlock}
</Box> </Box>
</Box> </Box>
@ -267,27 +316,26 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
} }
case "centered": { case "centered": {
return ( return (
<Box sx={{ <Box
padding: "16px", sx={{
display: "flex", padding: "16px",
flexDirection: "column", display: "flex",
justifyContent: "center", flexDirection: "column",
alignItems: "center", justifyContent: "center",
height: "100%", alignItems: "center",
"&::-webkit-scrollbar": { width: 0 }, height: "100%",
overflow: "hidden" "&::-webkit-scrollbar": { width: 0 },
}}> overflow: "hidden",
}}
>
{quizHeaderBlock} {quizHeaderBlock}
{backgroundBlock && {backgroundBlock && <Box>{backgroundBlock}</Box>}
<Box>
{backgroundBlock}
</Box>
}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
); );
} }
default: notReachable(startpageType); default:
notReachable(startpageType);
} }
} }

@ -78,7 +78,9 @@ export default function EditPage() {
[] []
); );
console.log(currentStep) console.log(currentStep)
console.log(quizConfig)
if (!quizConfig) return <></>
return ( return (
<> <>
{/*хедер*/} {/*хедер*/}
@ -349,6 +351,14 @@ export default function EditPage() {
) )
}} }}
>{quiz?.status === "start" ? "Стоп" : "Старт"}</Button> >{quiz?.status === "start" ? "Стоп" : "Старт"}</Button>
{quiz?.status === "start" && <Box
component={Link}
sx={{
color: "#7e2aea",
fontSize: "14px"
}}
target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}</Box> }
</Box> </Box>
</Box> </Box>
</> </>