fix widget auto show features

lib/model/widget/banner.ts

@@ -6,6 +6,10 @@ export interface BannerWidgetComponentProps {
     quizHeaderText?: string;
     buttonTextColor?: string;
     buttonBackgroundColor?: string;
+    /**
+     * Показывать виджет через X секунд
+     */
+    autoShowWidgetTime?: number;
     /**
      * Открыть квиз через X секунд, 0 - сразу
      */

lib/model/widget/side.ts

@@ -7,9 +7,9 @@ export interface SideWidgetComponentProps {
     fullScreen?: boolean;
     buttonFlash?: boolean;
     /**
-     * Скрывать виджет первые X секунд
+     * Показывать виджет через X секунд
      */
-    autoOpenTime?: number;
+    autoShowWidgetTime?: number;
     /**
      * Открыть квиз через X секунд, 0 - сразу
      */

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/squzanswerer",
-    "version": "1.0.41",
+    "version": "1.0.42",
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",

src/WidgetDev.tsx

@@ -1,12 +1,12 @@
 import lightTheme from "@/utils/themes/light";
 import { Box, ThemeProvider, Typography } from "@mui/material";
 import { useEffect, useRef } from "react";
-import { ContainerWidget as Widget } from "./widgets";
+import { BannerWidget as Widget } from "./widgets";
 
 
 const widgetProps: ConstructorParameters<typeof Widget>[0] = {
     quizId: "3c49550d-8c77-4788-bc2d-42586a261514",
-    selector: "#widget-container",
+    position: "bottomright",
 };
 
 export default function WidgetDev() {

src/widgets/banner/QuizBanner.tsx

@@ -7,6 +7,7 @@ import BannerIcon from "../shared/BannerIcon";
 import QuizDialog from "../shared/QuizDialog";
 import RunningStripe from "../shared/RunningStripe";
 import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
+import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
 
 
 const PADDING = 10;
@@ -27,10 +28,12 @@ export default function QuizBanner({
     rounded = false,
     bannerFullWidth = false,
     pulsation = false,
+    autoShowWidgetTime = 0,
 }: BannerWidgetComponentProps) {
     const isMobile = useMediaQuery("(max-width: 600px)");
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
     const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
+    const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
     const isQuizCompleted = useQuizCompletionStatus(quizId);
     const preventQuizAutoShowRef = useRef<boolean>(false);
     const preventOpenOnLeaveAttemptRef = useRef<boolean>(false);
@@ -74,7 +77,7 @@ export default function QuizBanner({
 
     return createPortal(
         <ThemeProvider theme={lightTheme}>
-            <Fade in={!isQuizShown}>
+            <Fade in={!isQuizShown && !isWidgetHidden}>
                 <Box
                     className="pena-quiz-widget-banner"
                     sx={[

src/widgets/side/QuizSideButton.tsx

@@ -21,7 +21,7 @@ export default function QuizSideButton({
     dialogDimensions,
     fullScreen = false,
     buttonFlash = false,
-    autoOpenTime = 0,
+    autoShowWidgetTime = 0,
     autoShowQuizTime = null,
     hideOnMobile = false,
 }: SideWidgetComponentProps) {
@@ -29,7 +29,7 @@ export default function QuizSideButton({
     const isMobile = useMediaQuery("(max-width: 600px)");
     const isQuizCompleted = useQuizCompletionStatus(quizId);
     const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
-    const isWidgetHidden = useAutoOpenTimer(autoOpenTime);
+    const isWidgetHidden = useAutoOpenTimer(autoShowWidgetTime);
     const preventQuizAutoShowRef = useRef<boolean>(false);
 
     useEffect(function setAutoShowQuizTimer() {