PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support notifications

Browse Source
This commit is contained in:
IlyaDoronin 2024-02-14 12:43:19 +03:00
parent 4f3a15c735
commit de1e97b12d
2 changed files with 115 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/FloatingSupportChat/Chat.tsx
View File

@ -33,7 +33,7 @@ import {
useEventListener,
createTicket,
} from "@frontend/kitui";
import { sendTicketMessage } from "@root/api/ticket";
import { sendTicketMessage, shownMessage } from "@root/api/ticket";
interface Props {
open: boolean;
@ -128,6 +128,16 @@ export default function Chat({ open = false, sx }: 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;

188
src/components/FloatingSupportChat/FloatingSupportChat.tsx
View File

@ -1,90 +1,110 @@
import { Box, Fab, Typography } from "@mui/material"
import { useState } from "react"
import CircleDoubleDown from "./CircleDoubleDownIcon"
import Chat from "./Chat"
import { useState } from "react";
import { Box, Fab, Typography, Badge, useTheme } from "@mui/material";
import CircleDoubleDown from "./CircleDoubleDownIcon";
import Chat from "./Chat";
import { useUnauthTicketStore } from "@root/stores/unauthTicket";
export default function FloatingSupportChat() {
const [isChatOpened, setIsChatOpened] = useState<boolean>(false)
const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
const theme = useTheme();
const { messages } = useUnauthTicketStore((state) => state);
const animation = {
"@keyframes runningStripe": {
"0%": {
left: "10%",
backgroundColor: "transparent",
},
"10%": {
backgroundColor: "#ffffff",
},
"50%": {
backgroundColor: "#ffffff",
transform: "translate(400px, 0)",
},
"80%": {
backgroundColor: "#ffffff",
},
const animation = {
"@keyframes runningStripe": {
"0%": {
left: "10%",
backgroundColor: "transparent",
},
"10%": {
backgroundColor: "#ffffff",
},
"50%": {
backgroundColor: "#ffffff",
transform: "translate(400px, 0)",
},
"80%": {
backgroundColor: "#ffffff",
},
"100%": {
backgroundColor: "transparent",
boxShadow: "none",
left: "100%",
},
},
}
return (
<Box
sx={{
position: "fixed",
right: "20px",
bottom: "10px",
display: "flex",
flexDirection: "column",
gap: "8px",
width: "clamp(200px, 100% - 40px, 454px)",
zIndex: 10,
}}
>
<Chat
open={isChatOpened}
sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }}
/>
<Fab
disableRipple
sx={{
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.7)",
pl: "11px",
pr: !isChatOpened ? "15px" : "11px",
gap: "11px",
height: "54px",
borderRadius: "27px",
alignSelf: "end",
overflow: "hidden",
"&:hover": {
background: "rgba(255, 255, 255, 0.7)",
},
}}
variant={"extended"}
onClick={() => setIsChatOpened((prev) => !prev)}
>
{!isChatOpened && (
<Box
sx={{
position: "absolute",
bgcolor: "#FFFFFF",
height: "100px",
width: "25px",
animation: "runningStripe linear 3s infinite",
transform: " skew(-10deg) rotate(70deg) skewX(20deg) skewY(10deg)",
boxShadow: "0px 3px 12px rgba(126, 42, 234, 0.1)",
opacity: "0.4",
...animation,
}}
/>
)}
"100%": {
backgroundColor: "transparent",
boxShadow: "none",
left: "100%",
},
},
};
return (
<Box
sx={{
position: "fixed",
right: "20px",
bottom: "10px",
display: "flex",
flexDirection: "column",
gap: "8px",
width: "clamp(200px, 100% - 40px, 454px)",
zIndex: 10,
}}
>
<Chat
open={isChatOpened}
sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }}
/>
<CircleDoubleDown isUp={isChatOpened} />
{!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
</Fab>
</Box>
)
<Fab
disableRipple
sx={{
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.7)",
pl: "11px",
pr: !isChatOpened ? "15px" : "11px",
gap: "11px",
height: "54px",
borderRadius: "27px",
alignSelf: "end",
overflow: "hidden",
"&:hover": {
background: "rgba(255, 255, 255, 0.7)",
},
}}
variant={"extended"}
onClick={() => setIsChatOpened((prev) => !prev)}
>
{!isChatOpened && (
<Box
sx={{
position: "absolute",
bgcolor: "#FFFFFF",
height: "100px",
width: "25px",
animation: "runningStripe linear 3s infinite",
transform:
" skew(-10deg) rotate(70deg) skewX(20deg) skewY(10deg)",
boxShadow: "0px 3px 12px rgba(126, 42, 234, 0.1)",
opacity: "0.4",
...animation,
}}
/>
)}
<Badge
badgeContent={messages.filter(({ shown }) => shown.me !== 1).length}
sx={{
"& .MuiBadge-badge": {
display: isChatOpened ? "none" : "flex",
color: "#FFFFFF",
background: theme.palette.purple.main,
},
}}
>
<CircleDoubleDown isUp={isChatOpened} />
</Badge>
{!isChatOpened && (
<Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>
)}
</Fab>
</Box>
);
}