feat: added new method to fetch old whatsapp messages

frontend/src/components/MessageInput/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useRef } from "react";
 import "emoji-mart/css/emoji-mart.css";
 import { useParams } from "react-router-dom";
 import { Picker } from "emoji-mart";
@@ -170,17 +170,24 @@ const MessageInput = ({ ticketStatus }) => {
 	const [showEmoji, setShowEmoji] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [recording, setRecording] = useState(false);
+	const inputRef = useRef();
 	const { setReplyingMessage, replyingMessage } = useContext(
 		ReplyMessageContext
 	);
 
 	useEffect(() => {
+		inputRef.current.focus();
+	}, [replyingMessage]);
+
+	useEffect(() => {
+		inputRef.current.focus();
 		return () => {
 			setInputMessage("");
 			setShowEmoji(false);
 			setMedias([]);
+			setReplyingMessage(null);
 		};
-	}, [ticketId]);
+	}, [ticketId, setReplyingMessage]);
 
 	const handleChangeInput = e => {
 		setInputMessage(e.target.value);
@@ -245,6 +252,7 @@ const MessageInput = ({ ticketStatus }) => {
 			fromMe: true,
 			mediaUrl: "",
 			body: `${username}: ${inputMessage.trim()}`,
+			quotedMsg: replyingMessage,
 		};
 		try {
 			await api.post(`/messages/${ticketId}`, message);
@@ -264,6 +272,7 @@ const MessageInput = ({ ticketStatus }) => {
 		setInputMessage("");
 		setShowEmoji(false);
 		setLoading(false);
+		setReplyingMessage(null);
 	};
 
 	const handleStartRecording = async () => {
@@ -344,7 +353,7 @@ const MessageInput = ({ ticketStatus }) => {
 					aria-label="showRecorder"
 					component="span"
 					disabled={loading || ticketStatus !== "open"}
-					onClick={() => setReplyingMessage({})}
+					onClick={() => setReplyingMessage(null)}
 				>
 					<ClearIcon className={classes.sendMessageIcons} />
 				</IconButton>
@@ -386,7 +395,7 @@ const MessageInput = ({ ticketStatus }) => {
 	else {
 		return (
 			<Paper square elevation={0} className={classes.mainWrapper}>
-				{replyingMessage.id && renderReplyingMessage(replyingMessage)}
+				{replyingMessage && renderReplyingMessage(replyingMessage)}
 				<div className={classes.newMessageBox}>
 					<IconButton
 						aria-label="emojiPicker"
@@ -426,7 +435,10 @@ const MessageInput = ({ ticketStatus }) => {
 					</label>
 					<div className={classes.messageInputWrapper}>
 						<InputBase
-							inputRef={input => input && input.focus()}
+							inputRef={input => {
+								input && input.focus();
+								input && (inputRef.current = input);
+							}}
 							className={classes.messageInput}
 							placeholder={
 								ticketStatus === "open"

frontend/src/components/MessageOptionsMenu/index.js

@@ -65,9 +65,11 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
 				open={menuOpen}
 				onClose={handleClose}
 			>
-				<MenuItem onClick={handleOpenConfirmationModal}>
-					{i18n.t("messageOptionsMenu.delete")}
-				</MenuItem>
+				{message.fromMe && (
+					<MenuItem onClick={handleOpenConfirmationModal}>
+						{i18n.t("messageOptionsMenu.delete")}
+					</MenuItem>
+				)}
 				<MenuItem onClick={hanldeReplyMessage}>
 					{i18n.t("messageOptionsMenu.reply")}
 				</MenuItem>

frontend/src/components/MessagesList/index.js

@@ -106,7 +106,7 @@ const useStyles = makeStyles(theme => ({
 		overflow: "hidden",
 	},
 
-	quotedSideLeft: {
+	quotedSideColorLeft: {
 		flex: "none",
 		width: "4px",
 		backgroundColor: "#6bcbef",
@@ -158,7 +158,7 @@ const useStyles = makeStyles(theme => ({
 		whiteSpace: "pre-wrap",
 	},
 
-	quotedSideRight: {
+	quotedSideColorRight: {
 		flex: "none",
 		width: "4px",
 		backgroundColor: "#35cd96",
@@ -170,6 +170,7 @@ const useStyles = makeStyles(theme => ({
 		color: "#999",
 		zIndex: 1,
 		backgroundColor: "inherit",
+		opacity: "90%",
 		"&:hover, &.Mui-focusVisible": { backgroundColor: "inherit" },
 	},
 
@@ -534,14 +535,14 @@ const MessagesList = ({ ticketId, isGroup, setReplyingMessage }) => {
 				})}
 			>
 				<span
-					className={clsx(classes.quotedSideLeft, {
-						[classes.quotedSideRight]: message.quotedMsg?.fromMe,
+					className={clsx(classes.quotedSideColorLeft, {
+						[classes.quotedSideColorRight]: message.quotedMsg?.fromMe,
 					})}
 				></span>
 				<div className={classes.quotedMsg}>
 					{!message.quotedMsg?.fromMe && (
 						<span className={classes.messageContactName}>
-							{message.contact?.name}
+							{message.quotedMsg?.contact?.name}
 						</span>
 					)}
 					{message.quotedMsg?.body}

frontend/src/context/ReplyingMessage/ReplyingMessageContext.js

@@ -3,7 +3,7 @@ import React, { useState, createContext } from "react";
 const ReplyMessageContext = createContext();
 
 const ReplyMessageProvider = ({ children }) => {
-	const [replyingMessage, setReplyingMessage] = useState({});
+	const [replyingMessage, setReplyingMessage] = useState(null);
 
 	return (
 		<ReplyMessageContext.Provider

frontend/src/translate/languages/en.js

@@ -335,8 +335,7 @@ const messages = {
 				ERR_INVALID_CREDENTIALS: "Authentication error. Please try again.",
 				ERR_SENDING_WAPP_MSG:
 					"Error sending WhatsApp message. Check connections page.",
-				ERR_DELETE_WAPP_MSG:
-					"Couldn't delete message from WhatsApp. Check connections page.",
+				ERR_DELETE_WAPP_MSG: "Couldn't delete message from WhatsApp.",
 				ERR_OTHER_OPEN_TICKET:
 					"There's already an open ticket for this contact.",
 				ERR_SESSION_EXPIRED: "Session expired. Please login.",
@@ -351,6 +350,8 @@ const messages = {
 				ERR_NO_WAPP_FOUND: "No WhatsApp found with this ID.",
 				ERR_CREATING_MESSAGE: "Error while creating message on database.",
 				ERR_CREATING_TICKET: "Error while creating ticket on database.",
+				ERR_FETCH_WAPP_MSG:
+					"Error fetching the message in WhtasApp, maybe it is too old.",
 			},
 		},
 	},

frontend/src/translate/languages/es.js

@@ -341,8 +341,7 @@ const messages = {
 				ERR_INVALID_CREDENTIALS: "Error de autenticación. Vuelva a intentarlo.",
 				ERR_SENDING_WAPP_MSG:
 					"Error al enviar el mensaje de WhatsApp. Verifique la página de conexiones.",
-				ERR_DELETE_WAPP_MSG:
-					"No se pudo borrar el mensaje de WhatsApp. Verifique la página de conexiones.",
+				ERR_DELETE_WAPP_MSG: "No se pudo borrar el mensaje de WhatsApp.",
 				ERR_OTHER_OPEN_TICKET: "Ya hay un ticket abierto para este contacto.",
 				ERR_SESSION_EXPIRED: "Sesión caducada. Inicie sesión.",
 				ERR_USER_CREATION_DISABLED:
@@ -357,6 +356,8 @@ const messages = {
 				ERR_NO_WAPP_FOUND: "No se encontró WhatsApp con este ID.",
 				ERR_CREATING_MESSAGE: "Error al crear el mensaje en la base de datos.",
 				ERR_CREATING_TICKET: "Error al crear el ticket en la base de datos.",
+				ERR_FETCH_WAPP_MSG:
+					"Error al obtener el mensaje en WhtasApp, tal vez sea demasiado antiguo.",
 			},
 		},
 	},

frontend/src/translate/languages/pt.js

@@ -340,8 +340,7 @@ const messages = {
 					"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. Verifique a página de conexões.",
+				ERR_DELETE_WAPP_MSG: "Não foi possível excluir a mensagem do WhatsApp.",
 				ERR_OTHER_OPEN_TICKET: "Já existe um tíquete aberto para este contato.",
 				ERR_SESSION_EXPIRED: "Sessão expirada. Por favor entre.",
 				ERR_USER_CREATION_DISABLED:
@@ -355,6 +354,8 @@ const messages = {
 				ERR_NO_WAPP_FOUND: "Nenhum WhatsApp encontrado com este ID.",
 				ERR_CREATING_MESSAGE: "Erro ao criar mensagem no banco de dados.",
 				ERR_CREATING_TICKET: "Erro ao criar tíquete no banco de dados.",
+				ERR_FETCH_WAPP_MSG:
+					"Erro ao buscar a mensagem no WhtasApp, talvez ela seja muito antiga.",
 			},
 		},
 	},