feat: option to delete messages on whatsapp chat

frontend/src/components/MessageOptionsMenu/index.js

@@ -13,12 +13,13 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
 
 	const handleDeleteMessage = async () => {
-		console.log("message deleted", messageId);
-
 		try {
 			await api.delete(`/messages/${messageId}`);
 		} catch (err) {
-			toast.error("Erro ao deletar o message");
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
@@ -54,9 +55,7 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 				<MenuItem onClick={handleOpenConfirmationModal}>
 					Delete Message
 				</MenuItem>
-				<MenuItem onClick={e => console.log("clicked reply")}>
-					Reply Message
-				</MenuItem>
+				<MenuItem disabled>Reply Message</MenuItem>
 			</Menu>
 		</>
 	);

frontend/src/components/Ticket/index.js

@@ -16,7 +16,7 @@ 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 { Block, ExpandMore } from "@material-ui/icons";
 
 import api from "../../services/api";
 import ContactDrawer from "../ContactDrawer";
@@ -161,6 +161,13 @@ const useStyles = makeStyles(theme => ({
 		padding: "3px 80px 6px 6px",
 	},
 
+	textContentItemDeleted: {
+		fontStyle: "italic",
+		color: "rgba(0, 0, 0, 0.36)",
+		overflowWrap: "break-word",
+		padding: "3px 80px 6px 6px",
+	},
+
 	messageMedia: {
 		objectFit: "cover",
 		width: 250,
@@ -203,6 +210,12 @@ const useStyles = makeStyles(theme => ({
 		marginLeft: 4,
 	},
 
+	deletedIcon: {
+		fontSize: 18,
+		verticalAlign: "middle",
+		marginRight: 4,
+	},
+
 	ackDoneAllIcon: {
 		color: green[500],
 		fontSize: 18,
@@ -246,7 +259,7 @@ const reducer = (state, action) => {
 		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
 
 		if (messageIndex !== -1) {
-			state[messageIndex].ack = messageToUpdate.ack;
+			state[messageIndex] = messageToUpdate;
 		}
 
 		return [...state];
@@ -534,13 +547,26 @@ const Ticket = () => {
 									variant="contained"
 									size="small"
 									id="messageActionsButton"
+									disabled={message.isDeleted}
 									className={classes.messageActionsButton}
 									onClick={e => handleOpenMessageOptionsMenu(e, message.id)}
 								>
 									<ExpandMore />
 								</IconButton>
 								{message.mediaUrl && checkMessaageMedia(message)}
-								<div className={classes.textContentItem}>
+								{/* <div className={classes.textContentItem}> */}
+								<div
+									className={clsx(classes.textContentItem, {
+										[classes.textContentItemDeleted]: message.isDeleted,
+									})}
+								>
+									{message.isDeleted && (
+										<Block
+											color="disabled"
+											fontSize="small"
+											className={classes.deletedIcon}
+										/>
+									)}
 									{message.body}
 									<span className={classes.timestamp}>
 										{format(parseISO(message.createdAt), "HH:mm")}

frontend/src/components/TicketOptionsMenu/index.js

@@ -16,15 +16,13 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 		try {
 			await api.delete(`/tickets/${ticket.id}`);
 		} catch (err) {
-			toast.error("Erro ao deletar o ticket");
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
-	const handleTransferTicket = e => {
-		console.log("transfered");
-		handleClose();
-	};
-
 	const handleOpenConfirmationModal = e => {
 		setConfirmationOpen(true);
 		handleClose();
@@ -50,9 +48,7 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				<MenuItem onClick={handleOpenConfirmationModal}>
 					{i18n.t("ticketOptionsMenu.delete")}
 				</MenuItem>
-				<MenuItem onClick={handleTransferTicket}>
-					{i18n.t("ticketOptionsMenu.transfer")}
-				</MenuItem>
+				<MenuItem disabled>{i18n.t("ticketOptionsMenu.transfer")}</MenuItem>
 			</Menu>
 			<ConfirmationModal
 				title={`${i18n.t("ticketOptionsMenu.confirmationModal.title")}${