side widget: add auto open time and hide on mobile params

src/widgets/shared/useAutoOpenTimer.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+
+export function useAutoOpenTimer(autoOpenTime: number) {
+    const [isWidgetHidden, setIsWidgetHidden] = useState<boolean>(autoOpenTime ? true : false);
+
+    useEffect(function setAutoOpenTimer() {
+        if (!autoOpenTime) return;
+
+        const timeout = setTimeout(() => setIsWidgetHidden(false), autoOpenTime * 1000);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [autoOpenTime]);
+
+    return isWidgetHidden;
+}

src/widgets/side/QuizSideButton.tsx

@@ -1,9 +1,10 @@
 import lightTheme from "@/utils/themes/light";
-import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
+import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import QuizDialog from "../shared/QuizDialog";
 import RunningStripe from "../shared/RunningStripe";
+import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
 import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
 
 
@@ -19,6 +20,8 @@ interface Props {
     dimensions?: { width: string; height: string; };
     fullScreen?: boolean;
     buttonFlash?: boolean;
+    autoOpenTime?: number;
+    hideOnMobile?: boolean;
 }
 
 export default function QuizSideButton({
@@ -29,17 +32,22 @@ export default function QuizSideButton({
     dimensions,
     fullScreen = false,
     buttonFlash = false,
+    autoOpenTime = 0,
+    hideOnMobile = false,
 }: Props) {
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
     const isMobile = useMediaQuery("(max-width: 600px)");
     const isQuizCompleted = useQuizCompletionStatus(quizId);
     const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
+    const isWidgetHidden = useAutoOpenTimer(autoOpenTime);
 
     function openQuiz() {
         setIsQuizShown(true);
         setIsFlashEnabled(false);
     }
 
+    if (hideOnMobile && isMobile) return null;
+
     return createPortal(
         <ThemeProvider theme={lightTheme}>
             <QuizDialog
@@ -71,35 +79,37 @@ export default function QuizSideButton({
                     },
                 ]}
             />
-            <Button
+            <Fade in={!isWidgetHidden} timeout={400}>
-                className="pena-quiz-widget-button"
+                <Button
-                variant="contained"
+                    className="pena-quiz-widget-button"
-                onClick={openQuiz}
+                    variant="contained"
-                disableFocusRipple
+                    onClick={openQuiz}
-                sx={[
+                    disableFocusRipple
-                    {
+                    sx={[
-                        display: isQuizShown ? "none" : "block",
+                        {
-                        position: "fixed",
+                            display: isQuizShown ? "none" : "block",
-                        height: "70px",
+                            position: "fixed",
-                        width: "600px",
+                            height: "70px",
-                        maxWidth: `calc(100% - ${PADDING * 2}px)`,
+                            width: "600px",
-                        backgroundColor: buttonBackgroundColor,
+                            maxWidth: `calc(100% - ${PADDING * 2}px)`,
-                        color: buttonTextColor,
+                            backgroundColor: buttonBackgroundColor,
-                        overflow: "hidden",
+                            color: buttonTextColor,
-                    },
+                            overflow: "hidden",
-                    position === "left" && {
+                        },
-                        bottom: PADDING,
+                        position === "left" && {
-                        left: PADDING,
+                            bottom: PADDING,
-                    },
+                            left: PADDING,
-                    position === "right" && {
+                        },
-                        bottom: PADDING,
+                        position === "right" && {
-                        right: PADDING,
+                            bottom: PADDING,
-                    },
+                            right: PADDING,
-                ]}
+                        },
-            >
+                    ]}
-                {!isQuizCompleted && isFlashEnabled && <RunningStripe />}
+                >
-                Пройти квиз
+                    {!isQuizCompleted && isFlashEnabled && <RunningStripe />}
-            </Button>
+                    Пройти квиз
+                </Button>
+            </Fade>
         </ThemeProvider>,
         document.body
     );