diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index 84ea77f4..48adb9af 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from "react"; import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { useDebouncedCallback } from "use-debounce"; import CustomNumberField from "@ui_kit/CustomNumberField"; @@ -27,40 +26,8 @@ export default function SliderOptions({ const isMobile = useMediaQuery(theme.breakpoints.down(790)); const [switchState, setSwitchState] = useState("setting"); const [stepError, setStepError] = useState(""); - const [startError, setStartError] = useState(false); const [minError, setMinError] = useState(false); const [maxError, setMaxError] = useState(false); - const startValueDebounce = useDebouncedCallback((value) => { - updateQuestion(question.id, (question) => { - if (question.type !== "number") return; - - question.content.start = value; - }); - }, 2000); - - useEffect(() => { - const min = Number(question.content.range.split("—")[0]); - const max = Number(question.content.range.split("—")[1]); - const start = Number(question.content.start); - - if (start < min) { - setStartError(true); - startValueDebounce(min); - - return; - } - - if (start > max && min < max) { - setStartError(true); - startValueDebounce(max); - - return; - } - - if (start >= min && start <= max) { - setStartError(false); - } - }, [question.content.range, question.content.start]); useEffect(() => { const min = Number(question.content.range.split("—")[0]); @@ -211,7 +178,6 @@ export default function SliderOptions({ sx={{ maxWidth: "310px", width: "100%" }} placeholder={"50"} value={String(question.content.start)} - emptyError={startError} onChange={({ target }) => { updateQuestion(question.id, (question) => { if (question.type !== "number") return; diff --git a/src/ui_kit/FloatingSupportChat/Chat.tsx b/src/ui_kit/FloatingSupportChat/Chat.tsx index 8d33b9d8..341c9f80 100644 --- a/src/ui_kit/FloatingSupportChat/Chat.tsx +++ b/src/ui_kit/FloatingSupportChat/Chat.tsx @@ -33,15 +33,16 @@ import { useEventListener, createTicket, } from "@frontend/kitui"; -import { sendTicketMessage } from "../../api/ticket"; +import { sendTicketMessage, shownMessage } from "../../api/ticket"; import ArrowLeft from "@icons/questionsPage/arrowLeft"; interface Props { + open: boolean; sx?: SxProps; onclickArrow?: () => void; } -export default function Chat({ sx, onclickArrow }: Props) { +export default function Chat({ open = false, sx, onclickArrow }: Props) { const theme = useTheme(); const upMd = useMediaQuery(theme.breakpoints.up("md")); const isMobile = useMediaQuery(theme.breakpoints.down(800)); @@ -129,6 +130,16 @@ export default function Chat({ sx, onclickArrow }: Props) { [lastMessageId], ); + useEffect(() => { + if (open) { + const newMessages = messages.filter(({ shown }) => shown.me !== 1); + + newMessages.map(async ({ id }) => { + await shownMessage(id); + }); + } + }, [open, messages]); + async function handleSendMessage() { if (!messageField || isMessageSending) return; @@ -194,137 +205,143 @@ export default function Chat({ sx, onclickArrow }: Props) { }; return ( - - - {isMobile && ( - - - - )} - + <> + {open && ( - Мария - - онлайн-консультант - - - - - - {sessionData && - messages.map((message) => ( - - ))} - - - + + + )} + + + Мария + + онлайн-консультант + + + + setMessageField(e.target.value)} - endAdornment={ - - - + + {sessionData && + messages.map((message) => ( + - - - } - /> - - - + ))} + + + setMessageField(e.target.value)} + endAdornment={ + + + + + + } + /> + + + + )} + ); } diff --git a/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx b/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx index 71983cf1..2bdfc842 100644 --- a/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx +++ b/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx @@ -5,6 +5,7 @@ import { useMediaQuery, Slide, Dialog, + Badge, } from "@mui/material"; import { ReactNode, useState } from "react"; import CircleDoubleDown from "./QuestionIcon"; @@ -12,6 +13,7 @@ import * as React from "react"; import Chat from "./Chat"; import { TransitionProps } from "@mui/material/transitions"; import { useLocation } from "react-router-dom"; +import { useUnauthTicketStore } from "@root/unauthTicket"; const animation = { "@keyframes runningStripe": { @@ -39,6 +41,7 @@ export default function FloatingSupportChat() { const [open, setOpen] = useState(false); const location = useLocation(); const locationChat = location.pathname; + const { messages } = useUnauthTicketStore((state) => state); const handleClickOpen = () => { setOpen(true); @@ -60,9 +63,10 @@ export default function FloatingSupportChat() { zIndex: 10, }} > - {isChatOpened && ( - - )} + )} - + shown.me !== 1).length} + sx={{ + "& .MuiBadge-badge": { + display: isChatOpened ? "none" : "flex", + color: "#FFFFFF", + background: theme.palette.brightPurple.main, + top: "4px", + right: "4px", + transform: "scale(0.8) translate(50%, -50%)", + }, + }} + > + + );