SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

add popup widget installation setup

Browse Source
This commit is contained in:
nflnkr 2024-05-25 14:44:52 +03:00
parent 8d9c8e4f14
commit 313e4626d3
2 changed files with 219 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
View File

@ -12,6 +12,7 @@ import InstallationStepButton from "./InstallationStepButton";
import BannerWidgetSetup from "./WidgetSetupByType/BannerWidgetSetup";
import ButtonWidgetSetup from "./WidgetSetupByType/ButtonWidgetSetup";
import ContainerWidgetSetup from "./WidgetSetupByType/ContainerWidgetSetup";
import PopupWidgetSetup from "./WidgetSetupByType/PopupWidgetSetup";
import WidgetTypeButton from "./WidgetTypeButton";
import BannerWidgetPreview from "./previewIcons/BannerWidgetPreview";
import ButtonWidgetPreview from "./previewIcons/ButtonWidgetPreview";
@ -202,6 +203,12 @@ export default function QuizInstallationCard() {
nextButton={nextButton}
/>
)}
{widgetSetupSettings.widgetType === "popup" && (
<PopupWidgetSetup
step={widgetSetupSettings.step}
nextButton={nextButton}
/>
)}
</>
)}
</Box>

212
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx Normal file
View File

@ -0,0 +1,212 @@
import {
Box,
Collapse,
Divider,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import PenaTextField from "@ui_kit/PenaTextField";
import { ReactNode, useState } from "react";
import Dots from "../../../../assets/dots.png";
import WidgetScript from "../WidgetScript";
import { createPopupWidgetScriptText } from "../createWidgetScriptText";
interface Props {
step: 2 | 3;
nextButton: ReactNode;
}
export default function PopupWidgetSetup({ step, nextButton }: Props) {
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
const quiz = useCurrentQuiz();
const [widgetWidth, setWidgetWidth] = useState<string>("");
const [widgetHeight, setWidgetHeight] = useState<string>("");
const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
if (!quiz) return null;
if (step === 3) {
const scriptText = createPopupWidgetScriptText({
quizId: quiz.qid,
hideOnMobile: hideOnMobile || undefined,
autoShowQuizTime: autoShowQuizTime,
openOnLeaveAttempt: openOnLeaveAttempt || undefined,
dialogDimensions:
widgetWidth || widgetHeight
? {
width: widgetWidth ? `${widgetWidth}px` : "100%",
height: widgetHeight ? `${widgetHeight}px` : "100%",
}
: undefined,
});
return <WidgetScript scriptText={scriptText} />;
}
return (
<Box
sx={{
display: "flex",
flexDirection: isSmallMonitor ? "column" : "row",
gap: "40px",
p: "20px",
}}
>
<Box
sx={{
flex: "1 1 0",
}}
>
<Box
sx={{
border: "1.5px solid #9A9AAF",
borderRadius: "6px",
}}
>
<Box
sx={{
background: theme.palette.background.default,
borderBottom: "1.5px solid #9A9AAF",
borderRadius: "6px 6px 0px 0px",
minHeight: "34px",
display: "flex",
alignItems: "center",
justifyContent: "end",
paddingRight: "10px",
}}
>
{" "}
<img src={Dots} />
</Box>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
minHeight: "330px",
p: "24px",
}}
>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
maxWidth: "506px",
minHeight: "280px",
background: "#EEE4FC",
borderRadius: "6px",
border: "1px dashed #7E2AEA",
px: "40px",
}}
>
<Typography sx={{ color: theme.palette.brightPurple.main }}>
Quiz будет открываться через указанное время
</Typography>
</Box>
</Box>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "15px",
flex: "1 1 0",
}}
>
<Box
sx={{
display: "flex",
gap: "40px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Ширина окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetWidth}
onChange={(e) => setWidgetWidth(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Высота окна (px)
</Typography>
<PenaTextField
type="number"
value={widgetHeight}
onChange={(e) => setWidgetHeight(e.target.value)}
FormControlSx={{ maxWidth: "160px" }}
placeholder="auto"
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
gap: "10px",
alignItems: "center",
}}
>
<Typography sx={{ color: theme.palette.grey2.main }}>
Показывать через
</Typography>
<PenaTextField
type="number"
value={autoShowQuizTime}
onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
FormControlSx={{
width: "90px",
}}
/>
<Typography sx={{ color: theme.palette.grey2.main }}>
секунд
</Typography>
</Box>
<CustomCheckbox
label="Открывать квиз при попытке уйти с сайта"
checked={openOnLeaveAttempt}
handleChange={(e) => setOpenOnLeaveAttempt(e.target.checked)}
/>
<CustomCheckbox
label="Отключать автооткрытие на мобильных устройствах"
checked={hideOnMobile}
handleChange={(e) => setHideOnMobile(e.target.checked)}
/>
<Box
sx={{
display: "flex",
justifyContent: "end",
pt: "10px",
}}
>
{nextButton}
</Box>
</Box>
</Box>
);
}