From 313e4626d3ca80b335916b0d104ffbee22ca82dc Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Sat, 25 May 2024 14:44:52 +0300
Subject: [PATCH] add popup widget installation setup

---
 .../QuizInstallationCard.tsx                  |   7 +
 .../WidgetSetupByType/PopupWidgetSetup.tsx    | 212 ++++++++++++++++++
 2 files changed, 219 insertions(+)
 create mode 100644 src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx

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" && (
+            <PopupWidgetSetup
+              step={widgetSetupSettings.step}
+              nextButton={nextButton}
+            />
+          )}
         </>
       )}
     </Box>
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<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>
+  );
+}