Renderizando Live Localization

Agora é possivel renderizar as localizações que outros contatos enviam

frontend/src/components/LocationPreview/index.js

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import toastError from "../../errors/toastError";
+
+import Typography from "@material-ui/core/Typography";
+import Grid from "@material-ui/core/Grid";
+
+import { Button, Divider, } from "@material-ui/core";
+
+const LocationPreview = ({ image, link, description }) => {
+    useEffect(() => {}, [image, link, description]);
+
+    const handleLocation = async() => {
+        try {
+            window.open(link);
+        } catch (err) {
+            toastError(err);
+        }
+    }
+
+    return (
+		<>
+			<div style={{
+				minWidth: "250px",
+			}}>
+				<Grid container spacing={1}>
+					<Grid item xs={2}>
+						<img src={image} onClick={handleLocation} />
+					</Grid>
+					{ description && (
+					<Grid item xs={9}>
+						<Typography style={{ marginTop: "12px", marginLeft: "15px" }} variant="subtitle1" color="primary" gutterBottom>
+							<div dangerouslySetInnerHTML={{ __html: description.replace('\\n', '<br />') }}></div>
+						</Typography>
+					</Grid>
+					)}
+					<Grid item xs={12}>
+						<Divider />
+						<Button
+							fullWidth
+							color="primary"
+							onClick={handleLocation}
+							disabled={!link}
+						>Visualizar</Button>
+					</Grid>
+				</Grid>
+			</div>
+		</>
+	);
+
+};
+
+export default LocationPreview;

frontend/src/components/MarkdownWrapper/index.js

@@ -153,10 +153,13 @@ const MarkdownWrapper = ({ children }) => {
 	const boldRegex = /\*(.*?)\*/g;
 	const tildaRegex = /~(.*?)~/g;
 	
-	if(children.includes('BEGIN:VCARD'))
+	if(children && children.includes('BEGIN:VCARD'))
 		//children = "Diga olá ao seu novo contato clicando em *conversar*!";
 		children = null;
 	
+	if(children && children.includes('data:image/'))
+		children = null;
+	
 	if (children && boldRegex.test(children)) {
 		children = children.replace(boldRegex, "**$1**");
 	}

frontend/src/components/MessagesList/index.js

@@ -23,6 +23,7 @@ import {
 
 import MarkdownWrapper from "../MarkdownWrapper";
 import VcardPreview from "../VcardPreview";
+import LocationPreview from "../LocationPreview";
 import ModalImageCors from "../ModalImageCors";
 import MessageOptionsMenu from "../MessageOptionsMenu";
 import whatsBackground from "../../assets/wa-background.png";
@@ -414,7 +415,19 @@ const MessagesList = ({ ticketId, isGroup }) => {
   };
 
   const checkMessageMedia = (message) => {
-	if (message.mediaType === "vcard") {
+	if(message.mediaType === "location" && message.body.split('|').length >= 2) {
+		let locationParts = message.body.split('|')
+		let imageLocation = locationParts[0]		
+		let linkLocation = locationParts[1]
+		
+		let descriptionLocation = null
+		
+		if(locationParts.length > 2)
+			descriptionLocation = message.body.split('|')[2]
+		
+		return <LocationPreview image={imageLocation} link={linkLocation} description={descriptionLocation} />
+	}
+	else if (message.mediaType === "vcard") {
 		//console.log("vcard")
 		//console.log(message)
 		let array = message.body.split("\n");
@@ -604,7 +617,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                     {message.contact?.name}
                   </span>
                 )}
-                {(message.mediaUrl || message.mediaType === "vcard" 
+                {(message.mediaUrl || message.mediaType === "location" || message.mediaType === "vcard" 
                 //|| message.mediaType === "multi_vcard" 
                 ) && checkMessageMedia(message)}
                 <div className={classes.textContentItem}>
@@ -633,7 +646,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                 >
                   <ExpandMore />
                 </IconButton>
-                {(message.mediaUrl || message.mediaType === "vcard" 
+                {(message.mediaUrl || message.mediaType === "location" || message.mediaType === "vcard" 
                 //|| message.mediaType === "multi_vcard" 
                 ) && checkMessageMedia(message)}
                 <div