Corrigido problema ao renderizar VCards

Resolvido problema ao renderizar VCards.

Não consegui realizar a renderização de Multi_VCards mas deixei comentado a rotina quando for resolvido o problema de retornar body vazio ao enviar ou receber Multi_VCards

frontend/src/components/MarkdownWrapper/index.js

@@ -152,7 +152,11 @@ const CustomLink = ({ children, ...props }) => (
 const MarkdownWrapper = ({ children }) => {
 	const boldRegex = /\*(.*?)\*/g;
 	const tildaRegex = /~(.*?)~/g;
-
+	
+	if(children.includes('BEGIN:VCARD'))
+		//children = "Diga olá ao seu novo contato clicando em *conversar*!";
+		children = null;
+	
 	if (children && boldRegex.test(children)) {
 		children = children.replace(boldRegex, "**$1**");
 	}
@@ -179,8 +183,8 @@ const MarkdownWrapper = ({ children }) => {
 	}, []);
 
 	if (!children) return null;
-
+	
 	return <Markdown options={options}>{children}</Markdown>;
 };
 
-export default MarkdownWrapper;
+export default MarkdownWrapper;

frontend/src/components/MessageInput/index.js

@@ -584,7 +584,7 @@ const MessageInput = ({ ticketStatus }) => {
                   : i18n.t("messagesInput.placeholderClosed")
               }
               multiline
-              rowsMax={5}
+              maxRows={5}
               value={inputMessage}
               onChange={handleChangeInput}
               disabled={recording || loading || ticketStatus !== "open"}

frontend/src/components/MessagesList/index.js

@@ -22,6 +22,7 @@ import {
 } from "@material-ui/icons";
 
 import MarkdownWrapper from "../MarkdownWrapper";
+import VcardPreview from "../VcardPreview";
 import ModalImageCors from "../ModalImageCors";
 import MessageOptionsMenu from "../MessageOptionsMenu";
 import whatsBackground from "../../assets/wa-background.png";
@@ -413,18 +414,52 @@ const MessagesList = ({ ticketId, isGroup }) => {
   };
 
   const checkMessageMedia = (message) => {
-    if (message.mediaType === "image") {
+	if (message.mediaType === "vcard") {
+		//console.log("vcard")
+		//console.log(message)
+		let array = message.body.split("\n");
+		let obj = [];
+		let contact = "";
+		for (let index = 0; index < array.length; index++) {
+			const v = array[index];
+			let values = v.split(":");
+			for (let ind = 0; ind < values.length; ind++) {
+				if (values[ind].indexOf("+") !== -1) {
+					obj.push({ number: values[ind] });
+				}
+				if (values[ind].indexOf("FN") !== -1) {
+					contact = values[ind + 1];
+				}
+			}
+		}
+		return <VcardPreview contact={contact} numbers={obj[0].number} />
+	} 
+  /*else if (message.mediaType === "multi_vcard") {
+		console.log("multi_vcard")
+		console.log(message)
+		
+		if(message.body !== null && message.body !== "") {
+			let newBody = JSON.parse(message.body)
+			return (
+				<>
+				  {
+					newBody.map(v => (
+					  <VcardPreview contact={v.name} numbers={v.number} />
+					))
+				  }
+				</>
+			)
+		} else return (<></>)
+	}*/
+  else if (message.mediaType === "image") {
       return <ModalImageCors imageUrl={message.mediaUrl} />;
-    }
-    if (message.mediaType === "audio") {
+    } else if (message.mediaType === "audio") {
       return (
         <audio controls>
           <source src={message.mediaUrl} type="audio/ogg"></source>
         </audio>
       );
-    }
-
-    if (message.mediaType === "video") {
+    } else if (message.mediaType === "video") {
       return (
         <video
           className={classes.messageMedia}
@@ -569,7 +604,9 @@ const MessagesList = ({ ticketId, isGroup }) => {
                     {message.contact?.name}
                   </span>
                 )}
-                {message.mediaUrl && checkMessageMedia(message)}
+                {(message.mediaUrl || message.mediaType === "vcard" 
+                //|| message.mediaType === "multi_vcard" 
+                ) && checkMessageMedia(message)}
                 <div className={classes.textContentItem}>
                   {message.quotedMsg && renderQuotedMessage(message)}
                   <MarkdownWrapper>{message.body}</MarkdownWrapper>
@@ -596,7 +633,9 @@ const MessagesList = ({ ticketId, isGroup }) => {
                 >
                   <ExpandMore />
                 </IconButton>
-                {message.mediaUrl && checkMessageMedia(message)}
+                {(message.mediaUrl || message.mediaType === "vcard" 
+                //|| message.mediaType === "multi_vcard" 
+                ) && checkMessageMedia(message)}
                 <div
                   className={clsx(classes.textContentItem, {
                     [classes.textContentItemDeleted]: message.isDeleted,
@@ -651,4 +690,4 @@ const MessagesList = ({ ticketId, isGroup }) => {
   );
 };
 
-export default MessagesList;
+export default MessagesList;

frontend/src/components/NotificationsPopOver/index.js

@@ -190,7 +190,7 @@ const NotificationsPopOver = () => {
 		<>
 			<IconButton
 				onClick={handleClick}
-				buttonRef={anchorEl}
+				ref={anchorEl}
 				aria-label="Open Notifications"
 				color="inherit"
 			>
@@ -231,4 +231,4 @@ const NotificationsPopOver = () => {
 	);
 };
 
-export default NotificationsPopOver;
+export default NotificationsPopOver;

frontend/src/components/VcardPreview/index.js

@@ -0,0 +1,89 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { useHistory } from "react-router-dom";
+import toastError from "../../errors/toastError";
+import api from "../../services/api";
+
+import Avatar from "@material-ui/core/Avatar";
+import Typography from "@material-ui/core/Typography";
+import Grid from "@material-ui/core/Grid";
+
+import { AuthContext } from "../../context/Auth/AuthContext";
+
+import { Button, Divider, } from "@material-ui/core";
+
+const VcardPreview = ({ contact, numbers }) => {
+    const history = useHistory();
+    const { user } = useContext(AuthContext);
+
+    const [selectedContact, setContact] = useState({
+        name: "",
+        number: 0,
+        profilePicUrl: ""
+    });
+
+    useEffect(() => {
+        const delayDebounceFn = setTimeout(() => {
+            const fetchContacts = async() => {
+                try {
+                    let contactObj = {
+                        name: contact,
+                        number: numbers.replace(/\D/g, ""),
+                        email: ""
+                    }
+                    const { data } = await api.post("/contact", contactObj);
+                    setContact(data)
+
+                } catch (err) {
+                    console.log(err)
+                    toastError(err);
+                }
+            };
+            fetchContacts();
+        }, 500);
+        return () => clearTimeout(delayDebounceFn);
+    }, [contact, numbers]);
+
+    const handleNewChat = async() => {
+        try {
+            const { data: ticket } = await api.post("/tickets", {
+                contactId: selectedContact.id,
+                userId: user.id,
+                status: "open",
+            });
+            history.push(`/tickets/${ticket.id}`);
+        } catch (err) {
+            toastError(err);
+        }
+    }
+
+    return (
+		<>
+			<div style={{
+				minWidth: "250px",
+			}}>
+				<Grid container spacing={1}>
+					<Grid item xs={2}>
+						<Avatar src={selectedContact.profilePicUrl} />
+					</Grid>
+					<Grid item xs={9}>
+						<Typography style={{ marginTop: "12px", marginLeft: "10px" }} variant="subtitle1" color="primary" gutterBottom>
+							{selectedContact.name}
+						</Typography>
+					</Grid>
+					<Grid item xs={12}>
+						<Divider />
+						<Button
+							fullWidth
+							color="primary"
+							onClick={handleNewChat}
+							disabled={!selectedContact.number}
+						>Conversar</Button>
+					</Grid>
+				</Grid>
+			</div>
+		</>
+	);
+
+};
+
+export default VcardPreview;