diff --git a/frontend/src/components/MessageOptionsMenu/index.js b/frontend/src/components/MessageOptionsMenu/index.js new file mode 100644 index 0000000..6af3537 --- /dev/null +++ b/frontend/src/components/MessageOptionsMenu/index.js @@ -0,0 +1,65 @@ +import React, { useState } from "react"; + +// import { toast } from "react-toastify"; + +import MenuItem from "@material-ui/core/MenuItem"; +import Menu from "@material-ui/core/Menu"; + +// import { i18n } from "../../translate/i18n"; +// import api from "../../services/api"; +import ConfirmationModal from "../ConfirmationModal"; + +const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => { + const [confirmationOpen, setConfirmationOpen] = useState(false); + + const handleDeleteMessage = async () => { + console.log("message deleted", messageId); + + // try { + // await api.delete(`/messages/${message.id}`); + // } catch (err) { + // toast.error("Erro ao deletar o message"); + // } + }; + + const handleOpenConfirmationModal = e => { + setConfirmationOpen(true); + handleClose(); + }; + + return ( + <> + + This action cannot be reverted. + + + + Delete Message + + console.log("clicked reply")}> + Reply Message + + + + ); +}; + +export default MessageOptionsMenu; diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js index 62252f3..add2822 100644 --- a/frontend/src/components/Ticket/index.js +++ b/frontend/src/components/Ticket/index.js @@ -15,6 +15,9 @@ import DoneIcon from "@material-ui/icons/Done"; import DoneAllIcon from "@material-ui/icons/DoneAll"; import Paper from "@material-ui/core/Paper"; +import { IconButton } from "@material-ui/core"; +import { ExpandMore } from "@material-ui/icons"; + import api from "../../services/api"; import ContactDrawer from "../ContactDrawer"; import whatsBackground from "../../assets/wa-background.png"; @@ -24,6 +27,8 @@ import TicketHeader from "../TicketHeader"; import TicketInfo from "../TicketInfo"; import TicketActionButtons from "../TicketActionButtons"; +import MessageOptionsMenu from "../MessageOptionsMenu"; + const drawerWidth = 320; const useStyles = makeStyles(theme => ({ @@ -74,7 +79,6 @@ const useStyles = makeStyles(theme => ({ flexDirection: "column", flexGrow: 1, padding: "20px 20px 20px 20px", - // scrollBehavior: "smooth", overflowY: "scroll", ...theme.scrollbarStyles, }, @@ -121,6 +125,13 @@ const useStyles = makeStyles(theme => ({ display: "block", position: "relative", + "&:hover #messageActionsButton": { + display: "flex", + position: "absolute", + top: 0, + right: 0, + }, + whiteSpace: "pre-wrap", backgroundColor: "#dcf8c6", color: "#303030", @@ -136,6 +147,15 @@ const useStyles = makeStyles(theme => ({ boxShadow: "0 1px 1px #b3b3b3", }, + messageActionsButton: { + display: "none", + position: "relative", + color: "#999", + zIndex: 1, + backgroundColor: "#dcf8c6", + "&:hover, &.Mui-focusVisible": { backgroundColor: "#dcf8c6" }, + }, + textContentItem: { overflowWrap: "break-word", padding: "3px 80px 6px 6px", @@ -242,16 +262,20 @@ const Ticket = () => { const history = useHistory(); const classes = useStyles(); + const [drawerOpen, setDrawerOpen] = useState(false); const [loading, setLoading] = useState(true); const [ticketLoading, setTicketLoading] = useState(true); const [contact, setContact] = useState({}); const [ticket, setTicket] = useState({}); - const [drawerOpen, setDrawerOpen] = useState(false); - const lastMessageRef = useRef(); const [messagesList, dispatch] = useReducer(reducer, []); const [hasMore, setHasMore] = useState(false); const [pageNumber, setPageNumber] = useState(1); + const lastMessageRef = useRef(); + + const [selectedMessageId, setSelectedMessageId] = useState(null); + const [anchorEl, setAnchorEl] = useState(null); + const messageOptionsMenuOpen = Boolean(anchorEl); useEffect(() => { dispatch({ type: "RESET" }); @@ -329,6 +353,15 @@ const Ticket = () => { }; }, [ticketId, history]); + const handleOpenMessageOptionsMenu = (e, messageId) => { + setAnchorEl(e.currentTarget); + setSelectedMessageId(messageId); + }; + + const handleCloseMessageOptionsMenu = e => { + setAnchorEl(null); + }; + const loadMore = () => { setPageNumber(prevPageNumber => prevPageNumber + 1); }; @@ -497,6 +530,15 @@ const Ticket = () => { {renderDailyTimestamps(message, index)} {renderMessageDivider(message, index)}
+ handleOpenMessageOptionsMenu(e, message.id)} + > + + {message.mediaUrl && checkMessaageMedia(message)}
{message.body} @@ -512,7 +554,7 @@ const Ticket = () => { }); return viewMessagesList; } else { - return
Diga olá ao seu novo contato
; + return
Say hello to your new contact!
; } }; @@ -549,6 +591,12 @@ const Ticket = () => { ) : null}
+ { } /> - {ticket.status === "pending" && handleAcepptTicket ? ( + {ticket.status === "pending" ? (