Merge branch 'el_lojas_melhorias' of github.com:AdrianoRobson/projeto-hit into el_lojas_melhorias

backend/src/controllers/TicketController.ts

@@ -22,7 +22,7 @@ import format from "date-fns/format";
 import ListTicketsServiceCache from "../services/TicketServices/ListTicketServiceCache";
 
 import { searchTicketCache, loadTicketsCache } from "../helpers/TicketCache";
-import { Op } from "sequelize";
+import { Op, where } from "sequelize";
 
 type IndexQuery = {
   searchParam: string;
@@ -119,10 +119,18 @@ export const remoteTicketCreation = async (
   req: Request,
   res: Response
 ): Promise<Response> => {
-  const { queueId, contact_to, msg, contact_name }: any = req.body;
+  let { queueId, contact_from, contact_to, msg, contact_name }: any = req.body;
 
-  const validate = ["queueId", "contact_to", "msg"];
-  const validateOnlyNumber = ["queueId", "contact_to"];
+  let whatsappId: any;
+
+  if (!queueId && !contact_from) {
+    return res
+      .status(400)
+      .json({ error: `Property 'queueId' or 'contact_from' is required.` });
+  }
+
+  const validate = ["contact_to", "msg"];
+  const validateOnlyNumber = ["queueId", "contact_to", "contact_from"];
 
   for (let prop of validate) {
     if (!req.body[prop])
@@ -139,15 +147,42 @@ export const remoteTicketCreation = async (
     }
   }
 
-  const whatsapps = await ListWhatsAppsForQueueService(queueId, "CONNECTED"); 
+  if (queueId) {
+    const whatsapps = await ListWhatsAppsForQueueService(queueId, "CONNECTED");
 
-  if (!whatsapps || whatsapps?.length == 0) {
-    return res.status(500).json({
-      msg: `queueId ${queueId} does not have a WhatsApp number associated with it or the number's session is disconnected.`
+    if (!whatsapps || whatsapps?.length == 0) {
+      return res.status(500).json({
+        msg: `queueId ${queueId} does not have a WhatsApp number associated with it or the number's session is disconnected.`
+      });
+    }
+
+    const { id } = whatsapps[0];
+
+    whatsappId = id;
+  } else if (contact_from) {
+    const whatsapp = await Whatsapp.findOne({
+      where: { number: contact_from, status: "CONNECTED" }
     });
-  }
 
-  const { id: whatsappId } = whatsapps[0];
+    if (!whatsapp) {
+      return res.status(404).json({
+        msg: `Whatsapp number ${contact_from} not found or disconnected!`
+      });
+    }
+
+    const { id } = whatsapp;
+
+    const { queues } = await ShowWhatsAppService(id);
+
+    if (!queues || queues.length == 0) {
+      return res.status(500).json({
+        msg: `The WhatsApp number ${contact_from} is not associated with any queue! `
+      });
+    }
+
+    queueId = queues[0].id;
+    whatsappId = id;
+  }
 
   // const validNumber = await CheckIsValidContact(contact_to, true);
   const validNumber = contact_to;

backend/src/services/WbotServices/wbotMessageListener.ts

@@ -46,7 +46,7 @@ import FindOrCreateTicketService from "../TicketServices/FindOrCreateTicketServi
 import ShowWhatsAppService from "../WhatsappService/ShowWhatsAppService";
 import { debounce } from "../../helpers/Debounce";
 import UpdateTicketService from "../TicketServices/UpdateTicketService";
-import { date } from "faker";
+import { date, name } from "faker";
 
 import ShowQueueService from "../QueueService/ShowQueueService";
 import ShowTicketMessage from "../TicketServices/ShowTicketMessage";
@@ -101,6 +101,7 @@ import ShowTicketService from "../TicketServices/ShowTicketService";
 import ShowQueuesByUser from "../UserServices/ShowQueuesByUser";
 import ListWhatsappQueuesByUserQueue from "../UserServices/ListWhatsappQueuesByUserQueue";
 import CreateContactService from "../ContactServices/CreateContactService";
+import { number } from "yup";
 
 var lst: any[] = getWhatsappIds();
 
@@ -316,6 +317,14 @@ const verifyMessage = async (
 
   await ticket.update({ lastMessage: msg.body });
 
+  if (!msg?.fromMe && msg?.vCards && msg?.vCards?.length > 0) {
+    if (msg.vCards.length == 1) {
+      messageData = { ...messageData, body: msg.vCards[0] };
+    } else {
+      messageData = { ...messageData, body: JSON.stringify(msg.vCards) };
+    }
+  }
+
   await CreateMessageService({ messageData });
 };
 
@@ -504,7 +513,7 @@ const isValidMsg = (msg: any): boolean => {
     msg.type === "image" ||
     msg.type === "document" ||
     msg.type === "vcard" ||
-    // msg.type === "multi_vcard" ||
+    msg.type === "multi_vcard" ||
     msg.type === "sticker"
   )
     return true;
@@ -550,7 +559,7 @@ const transferTicket = async (
   }
 
   if (queue) await botTransferTicket(queue, ticket, sendGreetingMessage);
-  io.emit('notifyPeding', {data: {ticket, queue}});
+  io.emit("notifyPeding", { data: { ticket, queue } });
 };
 
 const botTransferTicket = async (
@@ -787,32 +796,8 @@ const handleMessage = async (
       await verifyQueue(wbot, msg, ticket, contact);
     }
 
-    if (msg.type === "vcard") {
-      try {
-        const array = msg.body.split("\n");
-        const obj = [];
-        let contact = "";
-        for (let index = 0; index < array.length; index++) {
-          const v = array[index];
-          const 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];
-            }
-          }
-        }
-        for await (const ob of obj) {
-          const cont = await CreateContactService({
-            name: contact,
-            number: ob.number.replace(/\D/g, "")
-          });
-        }
-      } catch (error) {
-        console.log(error);
-      }
+    if (msg.type === "vcard" || msg.type === "multi_vcard") {
+      await vcard(msg);
     }
 
     const botInfo = await BotIsOnQueue("botqueue");
@@ -1258,6 +1243,59 @@ export {
   mediaTypeWhatsappOfficial,
   botSendMessage
 };
+async function vcard(msg: any) {
+  let array: any[] = [];
+  let contact: any;
+  let obj: any[] = [];
+
+  try {
+    const multi_vcard = msg?.vCards?.length === 0 ? false : true;
+
+    if (multi_vcard) {
+      array = msg?.vCards;
+      contact = [];
+    } else {
+      array = msg.body.split("\n");
+      contact = "";
+    }
+
+    for (let index = 0; index < array.length; index++) {
+      const v = array[index];
+      const 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) {
+          if (multi_vcard)
+            contact.push({ name: values[ind + 1].split("\n")[0] });
+          else contact = values[ind + 1];
+        }
+      }
+    }
+
+    for (const i in obj) {
+      let data: any = {};
+
+      if (multi_vcard) {
+        data = {
+          name: contact[i].name,
+          number: obj[i].number.replace(/\D/g, "")
+        };
+      } else {
+        data = {
+          name: contact,
+          number: obj[i].number.replace(/\D/g, "")
+        };
+      }
+
+      const cont = await CreateContactService(data);
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 async function backUra(whatsappId: any, contactId: any, data: any) {
   let uraOptionSelected = await findObject(whatsappId, contactId, "ura");
 

frontend/src/components/ContactCreateTicketModal/index.js

@@ -157,7 +157,7 @@ const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
 
           const { data } = await api.get("/whatsapp/official/matchQueue", { params: { userId: user.id, queueId: selectedQueue }, })
 
-          console.log('WHATSAPP DATA: ', data)
+          // console.log('WHATSAPP DATA: ', data)
 
           setWhatsQueue(data)
 

frontend/src/components/MessageInput/index.js

@@ -312,8 +312,6 @@ const MessageInput = ({ ticketStatus }) => {
 
   const handleSendMessage = async (templateParams = null) => {
  
-    console.log('templateParams: ', templateParams, ' | inputMessage: ', inputMessage)
-
     if (inputMessage.trim() === "") return
     setLoading(true)
 
@@ -324,8 +322,6 @@ const MessageInput = ({ ticketStatus }) => {
     if (templateParams) {
       for (let key in templateParams) {
         if (templateParams.hasOwnProperty(key)) { 
-          // let value = templateParams[key]
-          // console.log('key: ', key, '  |     ', 'VALUE: ', value)
 
           if (key === '_reactName') {
             templateParams = null
@@ -350,8 +346,6 @@ const MessageInput = ({ ticketStatus }) => {
 
     try { 
 
-      console.log('kkkkkkkkkkkkkkkkkkk message: ', message)
-
       const { data } = await api.post(`/messages/${ticketId}`, message)
       setParams(null)
       if (data && data?.data && Array.isArray(data.data)) {

frontend/src/components/MessagesList/index.js

@@ -1,18 +1,18 @@
-import React, { useContext, useState, useEffect, useReducer, useRef } from "react";
+import React, { useContext, useState, useEffect, useReducer, useRef } from "react"
 
-import { isSameDay, parseISO, format } from "date-fns";
-import openSocket from "socket.io-client";
-import clsx from "clsx";
-import { AuthContext } from "../../context/Auth/AuthContext";
+import { isSameDay, parseISO, format } from "date-fns"
+import openSocket from "socket.io-client"
+import clsx from "clsx"
+import { AuthContext } from "../../context/Auth/AuthContext"
 
-import { green } from "@material-ui/core/colors";
+import { green } from "@material-ui/core/colors"
 import {
   Button,
   CircularProgress,
   Divider,
   IconButton,
   makeStyles,
-} from "@material-ui/core";
+} from "@material-ui/core"
 import {
   AccessTime,
   Block,
@@ -20,20 +20,20 @@ import {
   DoneAll,
   ExpandMore,
   GetApp,
-} from "@material-ui/icons";
+} from "@material-ui/icons"
 
-import MarkdownWrapper from "../MarkdownWrapper";
-import VcardPreview from "../VcardPreview"; 
-import LocationPreview from "../LocationPreview";
-import Audio from "../Audio";
+import MarkdownWrapper from "../MarkdownWrapper"
+import VcardPreview from "../VcardPreview"
+import LocationPreview from "../LocationPreview"
+import Audio from "../Audio"
 
 
-import ModalImageCors from "../ModalImageCors";
-import MessageOptionsMenu from "../MessageOptionsMenu";
-import whatsBackground from "../../assets/wa-background.png";
+import ModalImageCors from "../ModalImageCors"
+import MessageOptionsMenu from "../MessageOptionsMenu"
+import whatsBackground from "../../assets/wa-background.png"
 
-import api from "../../services/api";
-import toastError from "../../errors/toastError";
+import api from "../../services/api"
+import toastError from "../../errors/toastError"
 
 const useStyles = makeStyles((theme) => ({
   messagesListWrapper: {
@@ -262,78 +262,78 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "inherit",
     padding: 10,
   },
-}));
+}))
 
 const reducer = (state, action) => {
   if (action.type === "LOAD_MESSAGES") {
-    const messages = action.payload;
-    const newMessages = [];
+    const messages = action.payload
+    const newMessages = []
 
     messages.forEach((message) => {
-      const messageIndex = state.findIndex((m) => m.id === message.id);
+      const messageIndex = state.findIndex((m) => m.id === message.id)
       if (messageIndex !== -1) {
-        state[messageIndex] = message;
+        state[messageIndex] = message
       } else {
-        newMessages.push(message);
+        newMessages.push(message)
       }
-    });
+    })
 
-    return [...newMessages, ...state];
+    return [...newMessages, ...state]
   }
 
   if (action.type === "ADD_MESSAGE") {
-    const newMessage = action.payload;
-    const messageIndex = state.findIndex((m) => m.id === newMessage.id);
+    const newMessage = action.payload
+    const messageIndex = state.findIndex((m) => m.id === newMessage.id)
 
     if (messageIndex !== -1) {
-      state[messageIndex] = newMessage;
+      state[messageIndex] = newMessage
     } else {
-      state.push(newMessage);
+      state.push(newMessage)
 
     }
 
-    return [...state];
+    return [...state]
   }
 
   if (action.type === "UPDATE_MESSAGE") {
-    const messageToUpdate = action.payload;
-    const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id);
+    const messageToUpdate = action.payload
+    const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id)
 
     if (messageIndex !== -1) {
-      state[messageIndex] = messageToUpdate;
+      state[messageIndex] = messageToUpdate
     }
 
-    return [...state];
+    return [...state]
   }
 
   if (action.type === "RESET") {
-    return [];
+    return []
   }
-};
+}
 
 const MessagesList = ({ ticketId, isGroup }) => {
-  const classes = useStyles();
+  const classes = useStyles()
 
-  const [messagesList, dispatch] = useReducer(reducer, []);
-  const [pageNumber, setPageNumber] = useState(1);
-  const [hasMore, setHasMore] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const lastMessageRef = useRef();
+  const [messagesList, dispatch] = useReducer(reducer, [])
+  const [pageNumber, setPageNumber] = useState(1)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const lastMessageRef = useRef()
 
-  const [selectedMessage, setSelectedMessage] = useState({});
-  const [anchorEl, setAnchorEl] = useState(null);
-  const messageOptionsMenuOpen = Boolean(anchorEl);
-  const currentTicketId = useRef(ticketId);
+  const [selectedMessage, setSelectedMessage] = useState({})
+  const [anchorEl, setAnchorEl] = useState(null)
+  const messageOptionsMenuOpen = Boolean(anchorEl)
+  const currentTicketId = useRef(ticketId)
   const [sendSeen, setSendSeen] = useState(false)
 
-  const { user } = useContext(AuthContext);
+  const { user } = useContext(AuthContext)
 
   useEffect(() => {
-    dispatch({ type: "RESET" });
-    setPageNumber(1);
+    dispatch({ type: "RESET" })
+    setPageNumber(1)
 
-    currentTicketId.current = ticketId;
-  }, [ticketId]);
+    currentTicketId.current = ticketId
+  }, [ticketId])
 
   useEffect(() => {
 
@@ -359,7 +359,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
         try {
           const { data } = await api.get("/messages/" + ticketId, {
             params: { pageNumber },
-          });
+          })
 
           setSendSeen(false)
 
@@ -382,116 +382,116 @@ const MessagesList = ({ ticketId, isGroup }) => {
           }
 
         } catch (err) {
-          setLoading(false);
-          toastError(err);
+          setLoading(false)
+          toastError(err)
         }
-      };
-      sendSeenMessage();
-    }, 500);
+      }
+      sendSeenMessage()
+    }, 500)
 
 
     return () => {
-      clearTimeout(delayDebounceFn);
-    };
+      clearTimeout(delayDebounceFn)
+    }
 
 
 
-  }, [sendSeen, pageNumber, ticketId, user.id]);
+  }, [sendSeen, pageNumber, ticketId, user.id])
 
   useEffect(() => {
 
-    setLoading(true);
+    setLoading(true)
     const delayDebounceFn = setTimeout(() => {
       const fetchMessages = async () => {
         try {
           const { data } = await api.get("/messages/" + ticketId, {
             params: { pageNumber },
-          });
+          })
 
           if (currentTicketId.current === ticketId) {
-            dispatch({ type: "LOAD_MESSAGES", payload: data.messages });
-            setHasMore(data.hasMore);
-            setLoading(false);
+            dispatch({ type: "LOAD_MESSAGES", payload: data.messages })
+            setHasMore(data.hasMore)
+            setLoading(false)
           }
 
           if (pageNumber === 1 && data.messages.length > 1) {
-            scrollToBottom();
+            scrollToBottom()
           }
         } catch (err) {
-          setLoading(false);
-          toastError(err);
+          setLoading(false)
+          toastError(err)
         }
-      };
-      fetchMessages();
-    }, 500);
+      }
+      fetchMessages()
+    }, 500)
     return () => {
-      clearTimeout(delayDebounceFn);
-    };
-  }, [pageNumber, ticketId]);
+      clearTimeout(delayDebounceFn)
+    }
+  }, [pageNumber, ticketId])
 
   useEffect(() => {
-    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    socket.on("connect", () => socket.emit("joinChatBox", ticketId));
+    socket.on("connect", () => socket.emit("joinChatBox", ticketId))
 
     socket.on("appMessage", (data) => {
 
       if (data.action === "create") {
 
-        dispatch({ type: "ADD_MESSAGE", payload: data.message });
+        dispatch({ type: "ADD_MESSAGE", payload: data.message })
 
-        scrollToBottom();
+        scrollToBottom()
       }
 
       if (data.action === "update") {
-        dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
+        dispatch({ type: "UPDATE_MESSAGE", payload: data.message })
       }
-    });
+    })
 
     return () => {
-      socket.disconnect();
-    };
-  }, [ticketId]);
+      socket.disconnect()
+    }
+  }, [ticketId])
 
   const loadMore = () => {
-    setPageNumber((prevPageNumber) => prevPageNumber + 1);
-  };
+    setPageNumber((prevPageNumber) => prevPageNumber + 1)
+  }
 
   const scrollToBottom = () => {
     if (lastMessageRef.current) {
 
       setSendSeen(true)
 
-      lastMessageRef.current.scrollIntoView({});
+      lastMessageRef.current.scrollIntoView({})
 
     }
-  };
+  }
 
   const handleScroll = (e) => {
-    if (!hasMore) return;
-    const { scrollTop } = e.currentTarget;
+    if (!hasMore) return
+    const { scrollTop } = e.currentTarget
 
     if (scrollTop === 0) {
-      document.getElementById("messagesList").scrollTop = 1;
+      document.getElementById("messagesList").scrollTop = 1
     }
 
     if (loading) {
-      return;
+      return
     }
 
     if (scrollTop < 50) {
-      loadMore();
+      loadMore()
     }
-  };
+  }
 
   const handleOpenMessageOptionsMenu = (e, message) => {
-    setAnchorEl(e.currentTarget);
-    setSelectedMessage(message);
-  };
+    setAnchorEl(e.currentTarget)
+    setSelectedMessage(message)
+  }
 
   const handleCloseMessageOptionsMenu = (e) => {
-    setAnchorEl(null);
-  };
+    setAnchorEl(null)
+  }
 
   // const checkMessageMedia = (message) => {
   //   if (message.mediaType === "image") {
@@ -548,8 +548,6 @@ const MessagesList = ({ ticketId, isGroup }) => {
       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")
       let obj = []
       let contact = ""
@@ -567,23 +565,44 @@ const MessagesList = ({ ticketId, isGroup }) => {
       }
       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 !== "") {
+    else if (message.mediaType === "multi_vcard") {
+      if (message.body !== null && message.body !== "") {
         let newBody = JSON.parse(message.body)
+
+        let multi_vcard = newBody.map(v => {
+          let array = v.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 { name: contact, number: obj[0]?.number }
+        })
         return (
           <>
             {
-            newBody.map(v => (
-              <VcardPreview contact={v.name} numbers={v.number} />
-            ))
+              multi_vcard.map((v, index) => (
+                <>
+                  <VcardPreview contact={v.name} numbers={v.number} multi_vCard={true} id={v.number} />
+
+                  {((index + 1) <= multi_vcard.length - 1) && <Divider />}
+                </>
+              ))
             }
           </>
         )
       } else return (<></>)
-    }*/
+    }
     else if (/^.*\.(jpe?g|png|gif)?$/i.exec(message.mediaUrl) && message.mediaType === "image") {
       return <ModalImageCors imageUrl={message.mediaUrl} />
     } else if (message.mediaType === "audio") {
@@ -614,22 +633,22 @@ const MessagesList = ({ ticketId, isGroup }) => {
         </>
       )
     }
-  };
+  }
 
   const renderMessageAck = (message) => {
     if (message.ack === 0) {
-      return <AccessTime fontSize="small" className={classes.ackIcons} />;
+      return <AccessTime fontSize="small" className={classes.ackIcons} />
     }
     if (message.ack === 1) {
-      return <Done fontSize="small" className={classes.ackIcons} />;
+      return <Done fontSize="small" className={classes.ackIcons} />
     }
     if (message.ack === 2) {
-      return <DoneAll fontSize="small" className={classes.ackIcons} />;
+      return <DoneAll fontSize="small" className={classes.ackIcons} />
     }
     if (message.ack === 3 || message.ack === 4) {
-      return <DoneAll fontSize="small" className={classes.ackDoneAllIcon} />;
+      return <DoneAll fontSize="small" className={classes.ackDoneAllIcon} />
     }
-  };
+  }
 
   const renderDailyTimestamps = (message, index) => {
     if (index === 0) {
@@ -642,12 +661,12 @@ const MessagesList = ({ ticketId, isGroup }) => {
             {format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
           </div>
         </span>
-      );
+      )
     }
 
     if (index < messagesList.length - 1) {
-      let messageDay = parseISO(messagesList[index].createdAt);
-      let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
+      let messageDay = parseISO(messagesList[index].createdAt)
+      let previousMessageDay = parseISO(messagesList[index - 1].createdAt)
 
       if (!isSameDay(messageDay, previousMessageDay)) {
 
@@ -660,14 +679,14 @@ const MessagesList = ({ ticketId, isGroup }) => {
               {format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
             </div>
           </span>
-        );
+        )
       }
     }
 
     if (index === messagesList.length - 1) {
 
-      let messageDay = parseISO(messagesList[index].createdAt);
-      let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
+      let messageDay = parseISO(messagesList[index].createdAt)
+      let previousMessageDay = parseISO(messagesList[index - 1].createdAt)
 
       return (
         <>
@@ -687,24 +706,24 @@ const MessagesList = ({ ticketId, isGroup }) => {
             style={{ float: "left", clear: "both" }}
           />
         </>
-      );
+      )
     }
-  };
+  }
 
   const renderMessageDivider = (message, index) => {
     if (index < messagesList.length && index > 0) {
-      let messageUser = messagesList[index].fromMe;
-      let previousMessageUser = messagesList[index - 1].fromMe;
+      let messageUser = messagesList[index].fromMe
+      let previousMessageUser = messagesList[index - 1].fromMe
 
 
 
       if (messageUser !== previousMessageUser) {
         return (
           <span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
-        );
+        )
       }
     }
-  };
+  }
 
   const renderQuotedMessage = (message) => {
     return (
@@ -727,8 +746,8 @@ const MessagesList = ({ ticketId, isGroup }) => {
           {message.quotedMsg?.body}
         </div>
       </div>
-    );
-  };
+    )
+  }
 
   // const renderMessages = () => {
   //   if (messagesList.length > 0) {
@@ -837,7 +856,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                   </span>
                 )}
                 {(message.mediaUrl || message.mediaType === "location" || message.mediaType === "vcard"
-                  //|| message.mediaType === "multi_vcard" 
+                  || message.mediaType === "multi_vcard"
                 ) && checkMessageMedia(message)}
                 <div className={classes.textContentItem}>
                   {message.quotedMsg && renderQuotedMessage(message)}
@@ -866,7 +885,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                   <ExpandMore />
                 </IconButton>
                 {(message.mediaUrl || message.mediaType === "location" || message.mediaType === "vcard"
-                  //|| message.mediaType === "multi_vcard" 
+                  // || message.mediaType === "multi_vcard"
                 ) && checkMessageMedia(message)}
                 <div
                   className={clsx(classes.textContentItem, {
@@ -896,7 +915,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     } else {
       return <div>Say hello to your new contact!</div>
     }
-  };
+  }
 
   return (
     <div className={classes.messagesListWrapper}>
@@ -919,7 +938,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
         </div>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default MessagesList;
+export default MessagesList

frontend/src/components/VcardPreview/index.js

@@ -1,25 +1,25 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { useHistory } from "react-router-dom";
-import toastError from "../../errors/toastError";
-import api from "../../services/api";
+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 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 { AuthContext } from "../../context/Auth/AuthContext"
 
-import { Button, Divider, } from "@material-ui/core";
+import { Button, Divider, } from "@material-ui/core"
 
-const VcardPreview = ({ contact, numbers }) => {
-    const history = useHistory();
-    const { user } = useContext(AuthContext);
+const VcardPreview = ({ contact, numbers, multi_vCard }) => {
+    const history = useHistory()
+    const { user } = useContext(AuthContext)
 
     const [selectedContact, setContact] = useState({
         name: "",
         number: 0,
         profilePicUrl: ""
-    });
+    })
 
     useEffect(() => {
         const delayDebounceFn = setTimeout(() => {
@@ -32,18 +32,19 @@ const VcardPreview = ({ contact, numbers }) => {
                         email: ""
                     }
 
-                    const { data } = await api.post("/contact", contactObj);
+                    const { data } = await api.post("/contact", contactObj)
+  
                     setContact(data)
 
                 } catch (err) {
                     console.log(err)
-                    toastError(err);
+                    toastError(err)
                 }
-            };
-            fetchContacts();
-        }, 500);
-        return () => clearTimeout(delayDebounceFn);
-    }, [contact, numbers]);
+            }
+            fetchContacts()
+        }, 500)
+        return () => clearTimeout(delayDebounceFn)
+    }, [contact, numbers])
 
     const handleNewChat = async () => {
         try {
@@ -51,10 +52,10 @@ const VcardPreview = ({ contact, numbers }) => {
                 contactId: selectedContact.id,
                 userId: user.id,
                 status: "open",
-            });
-            history.push(`/tickets/${ticket.id}`);
+            })
+            history.push(`/tickets/${ticket.id}`)
         } catch (err) {
-            toastError(err);
+            toastError(err)
         }
     }
 
@@ -73,19 +74,23 @@ const VcardPreview = ({ contact, numbers }) => {
                         </Typography>
                     </Grid>
                     <Grid item xs={12}>
-                        <Divider />
+                        {!multi_vCard && <Divider />}
+
                         <Button
                             fullWidth
                             color="primary"
                             onClick={handleNewChat}
                             disabled={!selectedContact.number}
                         >Conversar</Button>
+
+                        {/* {multi_vCard && <Divider />} */}
+
                     </Grid>
                 </Grid>
             </div>
         </>
-    );
+    )
 
-};
+}
 
-export default VcardPreview;
+export default VcardPreview

frontend/src/pages/Dashboard/PieChart.js

@@ -1,37 +1,24 @@
 import { Box } from '@material-ui/core';
 import React from 'react';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
-import { PieChart as RechartsPieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
 
 import Title from './Title';
 
-const dataExample = [
-  {
-    "id": 3366,
-    "name": "FINALIZADO",
-    "count": 5
-  },
-  {
-    "id": 3369,
-    "name": "LEMBRETE",
-    "count": 1
-  },
-  {
-    "id": 3367,
-    "name": "EXEMPLO",
-    "count": 3
-  },
-  {
-    "id": 3364,
-    "name": "EXEMPLO 2",
-    "count": 3
-  },
-  {
-    "id": 3364,
-    "name": "EXEMPLO 3",
-    "count": 6
-  },
-]
+const generateDataExample = (amount) => {
+  const arr = []
+  for (let i = 1; i <= amount; i++) {
+    arr.push({
+      "id": i,
+      "name": `Exemplo ${i}`,
+      "count": Math.floor(Math.random() * 10 + 2)
+    })
+  }
+
+  return arr
+}
+
+const dataExample = generateDataExample(20)
 
 const COLORS = [
   '#0088FE', // Azul escuro
@@ -44,12 +31,22 @@ const COLORS = [
   '#C0FFC0', // Verde Claro
   '#C4E538', // Verde-amarelo vibrante
   '#A2A2A2', // Cinza claro
-];;
+  '#FFF700', // Amarelo Canário
+  '#FF69B4', // Rosa Flamingo
+  '#87CEEB', // Azul Celeste
+  '#228B22', // Verde Esmeralda
+  '#9B59B6', // Roxo Ametista
+  '#FF9933', // Laranja Tangerina
+  '#FF7F50', // Coral Vivo
+  '#00CED1', // Verde Água
+  '#000080', // Azul Marinho
+  '#FFDB58', // Amarelo Mostarda
+];
 
 const RADIAN = Math.PI / 180;
 
 const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, count }) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.75;
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.80;
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
   const y = cy + radius * Math.sin(-midAngle * RADIAN);
 
@@ -70,9 +67,36 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, cou
  */
 const PieChart = ({ data = dataExample }) => {
   return (
-    <Box width="100%" height="100%" position="relative" display="flex">
-      <Box sx={{ position: "absolute" }}>
-        <Title>Tickets encerramento</Title>
+    <Box
+      width="100%"
+      height="100%"
+      position="relative"
+      display="flex"
+      sx={{ overflowY: "scroll" }}
+    >
+      <Box width="100%" height="100%" position="sticky" top="0" zIndex={1000}>
+        <Box sx={{ position: "absolute" }}>
+          <Title>Tickets encerramento</Title>
+        </Box>
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsPieChart width={400} height={400}>
+            <Pie
+              data={data}
+              cx="25%"
+              cy="60%"
+              labelLine={false}
+              label={renderCustomizedLabel}
+              outerRadius={100}
+              fill="#8884d8"
+              dataKey="count"
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${entry.id}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip />
+          </RechartsPieChart>
+        </ResponsiveContainer>
       </Box>
       <Box
         component="ul"
@@ -81,7 +105,10 @@ const PieChart = ({ data = dataExample }) => {
           top: 0, right: 0,
           display: "flex",
           flexDirection: "column",
-          gap: "4px"
+          gap: "4px",
+          maxWidth: "60%",
+          minWidth: "50%",
+          zIndex: 0,
         }}>
         {data.map((entry, index) => {
           return (
@@ -99,26 +126,6 @@ const PieChart = ({ data = dataExample }) => {
           )
         })}
       </Box>
-      <Box width="100%" height="100%" alignSelf="flex-end">
-        <ResponsiveContainer width="100%" height="100%">
-          <RechartsPieChart width={400} height={400}>
-            <Pie
-              data={data}
-              cx="40%"
-              cy="60%"
-              labelLine={false}
-              label={renderCustomizedLabel}
-              outerRadius={100}
-              fill="#8884d8"
-              dataKey="count"
-            >
-              {data.map((entry, index) => (
-                <Cell key={`cell-${entry.id}`} fill={COLORS[index % COLORS.length]} />
-              ))}
-            </Pie>
-          </RechartsPieChart>
-        </ResponsiveContainer>
-      </Box>
     </Box >
   );
 

frontend/src/pages/Report/index.js

@@ -461,7 +461,6 @@ const Report = () => {
 
   // Get from report type option
   const reportTypeValue = (data) => { 
-    console.log('DATA: ', data)
     let type = '1'
     if (data === '1') type = 'default'
     if (data === '2') type = 'synthetic'