diff --git a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
index c1def58d..b6dd34a6 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
@@ -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" && (
+
+ )}
)}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
new file mode 100644
index 00000000..29ecd7cf
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
@@ -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("");
+ const [widgetHeight, setWidgetHeight] = useState("");
+ const [hideOnMobile, setHideOnMobile] = useState(false);
+ const [autoShowQuizTime, setAutoShowQuizTime] = useState(10);
+ const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState(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 ;
+ }
+
+ return (
+
+
+
+
+ {" "}
+ 
+
+
+
+
+ Quiz будет открываться через указанное время
+
+
+
+
+
+
+
+
+
+ Ширина окна (px)
+
+ setWidgetWidth(e.target.value)}
+ FormControlSx={{ maxWidth: "160px" }}
+ placeholder="auto"
+ />
+
+
+
+ Высота окна (px)
+
+ setWidgetHeight(e.target.value)}
+ FormControlSx={{ maxWidth: "160px" }}
+ placeholder="auto"
+ />
+
+
+
+
+ Показывать через
+
+ setAutoShowQuizTime(parseInt(e.target.value))}
+ FormControlSx={{
+ width: "90px",
+ }}
+ />
+
+ секунд
+
+
+ setOpenOnLeaveAttempt(e.target.checked)}
+ />
+ setHideOnMobile(e.target.checked)}
+ />
+
+ {nextButton}
+
+
+
+ );
+}