Renderizando Live Localization

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

backend/src/services/WbotServices/wbotMessageListener.ts

@@ -114,6 +114,10 @@ const verifyMessage = async (
   ticket: Ticket,
   contact: Contact
 ) => {
+
+  if (msg.type === 'location')
+    msg = prepareLocation(msg);
+
   const quotedMsg = await verifyQuotedMessage(msg);
   const messageData = {
     id: msg.id.id,
@@ -126,11 +130,25 @@ const verifyMessage = async (
     quotedMsgId: quotedMsg?.id
   };
 
-  await ticket.update({ lastMessage: msg.body });
+  await ticket.update({ lastMessage: msg.type === "location" ? msg.description ? "Localization - " + msg.description.split('\\n')[0] : "Localization" : msg.body });
 
   await CreateMessageService({ messageData });
 };
 
+const prepareLocation = (msg: WbotMessage): WbotMessage => {
+  console.log(msg)
+  let gmapsUrl = "https://maps.google.com/maps?q=" + msg.location.latitude + "%2C" + msg.location.longitude + "&z=17&hl=pt-BR";
+
+  msg.body = "data:image/png;base64," + msg.body + "|" + gmapsUrl;
+
+  msg.body += "|" + (msg.description != undefined ? msg.description : (msg.location.latitude + ", " + msg.location.longitude))
+
+  console.log(msg.body)
+  console.log(msg.description)
+
+  return msg;
+};
+
 const verifyQueue = async (
   wbot: Session,
   msg: WbotMessage,
@@ -199,7 +217,8 @@ const isValidMsg = (msg: WbotMessage): boolean => {
     msg.type === "document" ||
     msg.type === "vcard" ||
     //msg.type === "multi_vcard" ||
-    msg.type === "sticker"
+    msg.type === "sticker" ||
+    msg.type === "location"
   )
     return true;
   return false;
@@ -225,7 +244,7 @@ const handleMessage = async (
       // media messages sent from me from cell phone, first comes with "hasMedia = false" and type = "image/ptt/etc"
       // in this case, return and let this message be handled by "media_uploaded" event, when it will have "hasMedia = true"
 
-      if (!msg.hasMedia && msg.type !== "chat" && msg.type !== "vcard" 
+      if (!msg.hasMedia && msg.type !== "location" && msg.type !== "chat" && msg.type !== "vcard"
         //&& msg.type !== "multi_vcard"
       ) return;
 

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