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.
+
+
+ >
+ );
+};
+
+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" ? (