diff --git a/backend/src/services/WbotServices/wbotMessageListener.ts b/backend/src/services/WbotServices/wbotMessageListener.ts index a09b2c2f..8daadb67 100644 --- a/backend/src/services/WbotServices/wbotMessageListener.ts +++ b/backend/src/services/WbotServices/wbotMessageListener.ts @@ -147,21 +147,35 @@ export const getBodyMessage = (msg: proto.IWebMessageInfo): string | null => { viewOnceMessage: getBodyButton(msg) || msg.message?.listResponseMessage?.singleSelectReply?.selectedRowId, viewOnceMessageV2: msg.message?.viewOnceMessageV2?.message?.imageMessage?.caption || "", stickerMessage: "sticker", - contactMessage: msg.message?.contactMessage?.vcard, - contactsArrayMessage: "varios contatos", + contactMessage: + msg.message?.contactMessage?.vcard && + JSON.stringify( + { + ticketzvCard: [ + { + displayName: msg.message.contactMessage.displayName, + vcard: msg.message.contactMessage.vcard + } + ] + }), + contactsArrayMessage: msg.message?.contactsArrayMessage && + JSON.stringify( + { + ticketzvCard: msg.message.contactsArrayMessage.contacts + }), // locationMessage: `Latitude: ${msg.message.locationMessage?.degreesLatitude} - Longitude: ${msg.message.locationMessage?.degreesLongitude}`, locationMessage: msgLocation( msg.message?.locationMessage?.jpegThumbnail, msg.message?.locationMessage?.degreesLatitude, msg.message?.locationMessage?.degreesLongitude ), - liveLocationMessage: `Latitude: ${msg.message.liveLocationMessage?.degreesLatitude} - Longitude: ${msg.message.liveLocationMessage?.degreesLongitude}`, + liveLocationMessage: `Latitude: ${msg.message?.liveLocationMessage?.degreesLatitude} - Longitude: ${msg.message?.liveLocationMessage?.degreesLongitude}`, documentMessage: msg.message?.documentMessage?.title, documentWithCaptionMessage: msg.message?.documentWithCaptionMessage?.message?.documentMessage?.caption, audioMessage: "Áudio", listMessage: getBodyButton(msg) || msg.message.listResponseMessage?.title, listResponseMessage: msg.message?.listResponseMessage?.singleSelectReply?.selectedRowId, - reactionMessage: msg.message.reactionMessage?.text || "reaction", + reactionMessage: msg.message?.reactionMessage?.text || "reaction", }; const objKey = Object.keys(types).find(key => key === type); @@ -177,7 +191,7 @@ export const getBodyMessage = (msg: proto.IWebMessageInfo): string | null => { } catch (error) { Sentry.setExtra("Error getTypeMessage", { msg, BodyMsg: msg.message }); Sentry.captureException(error); - console.log(error); + logger.error({error, msg}, `getBodyMessage: error: ${error?.message}`); return null; } }; diff --git a/frontend/package.json b/frontend/package.json index 0a7f0c01..1978807c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -56,6 +56,7 @@ "use-sound": "^2.0.1", "uuid": "^9.0.1", "validations-br": "^1.4.0", + "vcard-parser": "^1.0.0", "yup": "^1.4.0" }, "scripts": { diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index cf06cffc..78c9e0f5 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -36,7 +36,9 @@ import api from "../../services/api"; import toastError from "../../errors/toastError"; import { SocketContext } from "../../context/Socket/SocketContext"; import { i18n } from "../../translate/i18n"; - +import vCard from "vcard-parser"; +import { generateColor } from "../../helpers/colorGenerator"; +import { getInitials } from "../../helpers/getInitials"; const useStyles = makeStyles((theme) => ({ messagesListWrapper: { @@ -796,66 +798,110 @@ const MessagesList = ({ ticket, ticketId, isGroup }) => { ); }; + const formatVCardN = (n) => { + return( + (n[3] ? n[3] + " " : "") + + (n[1] ? n[1] + " " : "") + + (n[2] ? n[2] + " " : "") + + (n[0] ? n[0] + " " : "") + + (n[4] ? n[4] + " " : "") + ); + } + const isVCard = (message) => { - return message.includes('BEGIN:VCARD'); + return message.startsWith('{"ticketzvCard":'); }; - const vCard = (message) => { - const name = message?.substring(message.indexOf("\nN:;") + 4, message.indexOf(";;;")); - const telLine = message?.substring(message.indexOf("\nTEL;") + 5); - const description = telLine.substring(telLine.indexOf(":") + 1, telLine.indexOf("\n")); - return ( -
-
- -
-
- - {name} - -
+ const renderVCard = (vcardJson) => { + const cardArray = JSON.parse(vcardJson)?.ticketzvCard; + + if (!cardArray || !Array.isArray(cardArray)) { + return
Invalid VCARD data
; + } + return cardArray.map((item) => { + const message = item?.vcard; + if (!message) { + return <>; + } + const parsedVCard = vCard.parse(message); + console.debug("vCard data:", { message , parsedVCard }); + + const name = + parsedVCard['X-WA-BIZ-NAME']?.[0]?.value || + parsedVCard.fn?.[0]?.value || + formatVCardN(parsedVCard.n?.[0]?.value); + const description = + parsedVCard['X-WA-BIZ-DESCRIPTION']?.[0]?.value || "" + const number = parsedVCard?.tel?.[0]?.value; + const metaNumber = parsedVCard?.tel?.[0]?.meta?.waid?.[0] || number || "unknown"; + + return ( +
+
+ { getInitials(name)}
- - {description} - +
+ + {name} + +
+ +
+ + {description} + +
+ +
+ + {number} + +
+
-
+
+
+ + Conversar + +
-
- - Conversar - -
-
- ) + ) + + }); }; const messageLocation = (message, createdAt) => { @@ -914,7 +960,7 @@ const MessagesList = ({ ticket, ticketId, isGroup }) => { className={[clsx(classes.textContentItem, { [classes.textContentItemEdited]: message.isEdited }), { marginRight: 0 }]}> - {vCard(message.body)} + {renderVCard(message.body)}
: @@ -985,7 +1031,7 @@ const MessagesList = ({ ticket, ticketId, isGroup }) => { : isVCard(message.body) ?
- {vCard(message.body)} + {renderVCard(message.body)}
: diff --git a/frontend/src/components/TicketListItemCustom/index.js b/frontend/src/components/TicketListItemCustom/index.js index f8023256..fb91e8f1 100644 --- a/frontend/src/components/TicketListItemCustom/index.js +++ b/frontend/src/components/TicketListItemCustom/index.js @@ -530,7 +530,7 @@ const TicketListItemCustom = ({ ticket, setTabOpen }) => { ) : ( <> - {ticket.lastMessage.includes('data:image/png;base64') ? Localização : {ticket.lastMessage}} + {ticket.lastMessage?.includes('data:image/png;base64') ? Localização : {ticket.lastMessage.startsWith('{"ticketzvCard"') ? "🪪" : ticket.lastMessage}} )}