Add Histórico das Edições

rtenorioh · Oct 27, 2024 · a276acc · a276acc
1 parent fb4e326
commit a276acc
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 7 deletions.
diff --git a/frontend/src/components/MessageHistoryModal/index.js b/frontend/src/components/MessageHistoryModal/index.js
@@ -0,0 +1,70 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import { Table, TableBody, TableCell, TableContainer, TableRow, makeStyles } from "@material-ui/core";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+import { format, parseISO } from "date-fns";
+
+import { i18n } from "../../translate/i18n";
+
+const useStyles = makeStyles((theme) => ({
+    timestamp: {
+        minWidth: 250
+    }
+}));
+
+const MessageHistoryModal = ({ open, onClose, oldMessages }) => {
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={open}
+            onClose={() => onClose(false)}
+            aria-labelledby="dialog-title"
+        >
+            <DialogTitle id="dialog-title">{i18n.t("messageHistoryModal.title")}</DialogTitle>
+            <DialogContent>
+                <TableContainer>
+                    <Table aria-label="message-history-table">
+                        <TableBody>
+                            {oldMessages?.map((oldMessage) => (
+                                <TableRow
+                                    key={oldMessage.id}
+                                >
+                                    <TableCell component="th" scope="row">
+                                        {oldMessage.body}
+                                    </TableCell>
+                                    <TableCell align="right" className={classes.timestamp}>
+                                        {format(parseISO(oldMessage.createdAt), "dd/MM HH:mm")}
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    autoFocus
+                    onClick={() => onClose(false)}
+                >
+                    {i18n.t("messageHistoryModal.close")}
+                </Button>
+            </DialogActions>
+
+        </Dialog>
+    );
+};
+
+MessageHistoryModal.propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    oldMessages: PropTypes.array
+};
+
+export default MessageHistoryModal;
diff --git a/frontend/src/components/MessageInput/index.js b/frontend/src/components/MessageInput/index.js
@@ -34,6 +34,7 @@ import clsx from "clsx";
 import { Picker } from "emoji-mart";
 import "emoji-mart/css/emoji-mart.css";
 import MicRecorder from "mic-recorder-to-mp3";
+import PropTypes from "prop-types";
 import React, {
   useContext,
   useEffect,
@@ -786,4 +787,8 @@ const MessageInput = ({ ticketStatus }) => {
   }
 };
 
+MessageInput.propTypes = {
+  ticketStatus: PropTypes.string
+}
+
 export default MessageInput;
diff --git a/frontend/src/components/MessageOptionsMenu/index.js b/frontend/src/components/MessageOptionsMenu/index.js
@@ -3,17 +3,20 @@ import React, { useContext, useState } from "react";
 import MenuItem from "@material-ui/core/MenuItem";
 
 import { Menu } from "@material-ui/core";
+import PropTypes from "prop-types";
 import { EditMessageContext } from "../../context/EditingMessage/EditingMessageContext";
 import { ReplyMessageContext } from "../../context/ReplyingMessage/ReplyingMessageContext";
 import toastError from "../../errors/toastError";
 import api from "../../services/api";
 import { i18n } from "../../translate/i18n";
 import ConfirmationModal from "../ConfirmationModal";
+import MessageHistoryModal from "../MessageHistoryModal";
 
 const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
   const { setReplyingMessage } = useContext(ReplyMessageContext);
   const { setEditingMessage } = useContext(EditMessageContext);
   const [confirmationOpen, setConfirmationOpen] = useState(false);
+  const [messageHistoryOpen, setMessageHistoryOpen] = useState(false);
 
   const canEditMessage = () => {
     const timeDiff = new Date() - new Date(message.updatedAt);
@@ -47,6 +50,11 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
     handleClose();
   };
 
+  const handleOpenMessageHistoryModal = (e) => {
+    setMessageHistoryOpen(true);
+    handleClose();
+  }
+
   return (
     <>
       <ConfirmationModal
@@ -57,6 +65,12 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
       >
         {i18n.t("messageOptionsMenu.confirmationModal.message")}
       </ConfirmationModal>
+      <MessageHistoryModal
+        open={messageHistoryOpen}
+        onClose={setMessageHistoryOpen}
+        oldMessages={message.oldMessages}
+      >
+      </MessageHistoryModal>
       <Menu
         anchorEl={anchorEl}
         getContentAnchorEl={null}
@@ -81,6 +95,11 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
             </MenuItem>
           )
         ]}
+        {message.oldMessages?.length > 0 && (
+          <MenuItem key="history" onClick={handleOpenMessageHistoryModal}>
+            {i18n.t("messageOptionsMenu.history")}
+          </MenuItem>
+        )}
         <MenuItem key="reply" onClick={hanldeReplyMessage}>
           {i18n.t("messageOptionsMenu.reply")}
         </MenuItem>
@@ -89,12 +108,11 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
   );
 };
 
-// MessageOptionsMenu.propTypes = {
-//   message: PropTypes.object,
-//   menuOpen: PropTypes.bool.isRequired,
-//   handleClose: PropTypes.func.isRequired,
-//   anchorEl: PropTypes.object
-// }
-
+MessageOptionsMenu.propTypes = {
+  message: PropTypes.object,
+  menuOpen: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  anchorEl: PropTypes.object
+}
 
 export default MessageOptionsMenu;
diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js
@@ -675,13 +675,18 @@ const messages = {
       },
       messageOptionsMenu: {
         edit: "Editar",
+        history: "Histórico",
         delete: "Deletar",
         reply: "Responder",
         confirmationModal: {
           title: "Apagar mensagem?",
           message: "Esta ação não pode ser revertida.",
         },
       },
+      messageHistoryModal: {
+        close: "Fechar",
+        title: "Histórico de edição da mensagem"
+      },
       backendErrors: {
         ERR_NO_OTHER_WHATSAPP: "Deve haver pelo menos um WhatsApp padrão.",
         ERR_NO_DEF_WAPP_FOUND: "Nenhum WhatsApp padrão encontrado. Verifique a página de conexões.",
@@ -692,6 +697,7 @@ const messages = {
         ERR_INVALID_CREDENTIALS: "Erro de autenticação. Por favor, tente novamente.",
         ERR_SENDING_WAPP_MSG: "Erro ao enviar mensagem do WhatsApp. Verifique a página de conexões.",
         ERR_DELETE_WAPP_MSG: "Não foi possível excluir a mensagem do WhatsApp.",
+        ERR_EDITING_WAPP_MSG: "Não foi possível editar a mensagem do WhatsApp.",
         ERR_OTHER_OPEN_TICKET: "Já existe um ticket aberto para este contato.",
         ERR_SESSION_EXPIRED: "Sessão expirada. Por favor entre.",
         ERR_USER_CREATION_DISABLED: "A criação do atendente foi desabilitada pelo administrador.",