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, where } from "sequelize";
+import { Op } from "sequelize";
 
 type IndexQuery = {
   searchParam: string;
@@ -119,18 +119,10 @@ export const remoteTicketCreation = async (
   req: Request,
   res: Response
 ): Promise<Response> => {
-  let { queueId, contact_from, contact_to, msg, contact_name }: any = req.body;
+  const { queueId, contact_to, msg, contact_name }: any = req.body;
 
-  let whatsappId: any;
+  const validate = ["queueId", "contact_to", "msg"];
-
+  const validateOnlyNumber = ["queueId", "contact_to"];
-  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])
@@ -147,43 +139,16 @@ export const remoteTicketCreation = async (
     }
   }
 
-  if (queueId) {
+  const whatsapps = await ListWhatsAppsForQueueService(queueId, "CONNECTED"); 
-    const whatsapps = await ListWhatsAppsForQueueService(queueId, "CONNECTED");
 
-    if (!whatsapps || whatsapps?.length == 0) {
+  if (!whatsapps || whatsapps?.length == 0) {
-      return res.status(500).json({
+    return res.status(500).json({
-        msg: `queueId ${queueId} does not have a WhatsApp number associated with it or the number's session is disconnected.`
+      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" }
     });
-
-    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 { id: whatsappId } = whatsapps[0];
+
   // 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, name } from "faker";
+import { date } from "faker";
 
 import ShowQueueService from "../QueueService/ShowQueueService";
 import ShowTicketMessage from "../TicketServices/ShowTicketMessage";
@@ -101,7 +101,6 @@ 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();
 
@@ -317,14 +316,6 @@ 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 });
 };
 
@@ -513,7 +504,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;
@@ -559,7 +550,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 (
@@ -796,8 +787,32 @@ const handleMessage = async (
       await verifyQueue(wbot, msg, ticket, contact);
     }
 
-    if (msg.type === "vcard" || msg.type === "multi_vcard") {
+    if (msg.type === "vcard") {
-      await vcard(msg);
+      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);
+      }
     }
 
     const botInfo = await BotIsOnQueue("botqueue");
@@ -1243,59 +1258,6 @@ 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,6 +312,8 @@ const MessageInput = ({ ticketStatus }) => {
 
   const handleSendMessage = async (templateParams = null) => {
 
+    console.log('templateParams: ', templateParams, ' | inputMessage: ', inputMessage)
+
     if (inputMessage.trim() === "") return
     setLoading(true)
 
@@ -322,6 +324,8 @@ 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
@@ -346,6 +350,8 @@ 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 { isSameDay, parseISO, format } from "date-fns";
-import openSocket from "socket.io-client"
+import openSocket from "socket.io-client";
-import clsx from "clsx"
+import clsx from "clsx";
-import { AuthContext } from "../../context/Auth/AuthContext"
+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 MarkdownWrapper from "../MarkdownWrapper";
-import VcardPreview from "../VcardPreview"
+import VcardPreview from "../VcardPreview"; 
-import LocationPreview from "../LocationPreview"
+import LocationPreview from "../LocationPreview";
-import Audio from "../Audio"
+import Audio from "../Audio";
 
 
-import ModalImageCors from "../ModalImageCors"
+import ModalImageCors from "../ModalImageCors";
-import MessageOptionsMenu from "../MessageOptionsMenu"
+import MessageOptionsMenu from "../MessageOptionsMenu";
-import whatsBackground from "../../assets/wa-background.png"
+import whatsBackground from "../../assets/wa-background.png";
 
-import api from "../../services/api"
+import api from "../../services/api";
-import toastError from "../../errors/toastError"
+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 messages = action.payload;
-    const newMessages = []
+    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 newMessage = action.payload;
-    const messageIndex = state.findIndex((m) => m.id === newMessage.id)
+    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 messageToUpdate = action.payload;
-    const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id)
+    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 [messagesList, dispatch] = useReducer(reducer, []);
-  const [pageNumber, setPageNumber] = useState(1)
+  const [pageNumber, setPageNumber] = useState(1);
-  const [hasMore, setHasMore] = useState(false)
+  const [hasMore, setHasMore] = useState(false);
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-  const lastMessageRef = useRef()
+  const lastMessageRef = useRef();
 
-  const [selectedMessage, setSelectedMessage] = useState({})
+  const [selectedMessage, setSelectedMessage] = useState({});
-  const [anchorEl, setAnchorEl] = useState(null)
+  const [anchorEl, setAnchorEl] = useState(null);
-  const messageOptionsMenuOpen = Boolean(anchorEl)
+  const messageOptionsMenuOpen = Boolean(anchorEl);
-  const currentTicketId = useRef(ticketId)
+  const currentTicketId = useRef(ticketId);
   const [sendSeen, setSendSeen] = useState(false)
 
-  const { user } = useContext(AuthContext)
+  const { user } = useContext(AuthContext);
 
   useEffect(() => {
-    dispatch({ type: "RESET" })
+    dispatch({ type: "RESET" });
-    setPageNumber(1)
+    setPageNumber(1);
 
-    currentTicketId.current = ticketId
+    currentTicketId.current = ticketId;
-  }, [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)
+          setLoading(false);
-          toastError(err)
+          toastError(err);
         }
-      }
+      };
-      sendSeenMessage()
+      sendSeenMessage();
-    }, 500)
+    }, 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 })
+            dispatch({ type: "LOAD_MESSAGES", payload: data.messages });
-            setHasMore(data.hasMore)
+            setHasMore(data.hasMore);
-            setLoading(false)
+            setLoading(false);
           }
 
           if (pageNumber === 1 && data.messages.length > 1) {
-            scrollToBottom()
+            scrollToBottom();
           }
         } catch (err) {
-          setLoading(false)
+          setLoading(false);
-          toastError(err)
+          toastError(err);
         }
-      }
+      };
-      fetchMessages()
+      fetchMessages();
-    }, 500)
+    }, 500);
     return () => {
-      clearTimeout(delayDebounceFn)
+      clearTimeout(delayDebounceFn);
-    }
+    };
-  }, [pageNumber, ticketId])
+  }, [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()
+      socket.disconnect();
-    }
+    };
-  }, [ticketId])
+  }, [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
+    if (!hasMore) return;
-    const { scrollTop } = e.currentTarget
+    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)
+    setAnchorEl(e.currentTarget);
-    setSelectedMessage(message)
+    setSelectedMessage(message);
-  }
+  };
 
   const handleCloseMessageOptionsMenu = (e) => {
-    setAnchorEl(null)
+    setAnchorEl(null);
-  }
+  };
 
   // const checkMessageMedia = (message) => {
   //   if (message.mediaType === "image") {
@@ -548,6 +548,8 @@ 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 = ""
@@ -565,44 +567,23 @@ const MessagesList = ({ ticketId, isGroup }) => {
       }
       return <VcardPreview contact={contact} numbers={obj[0]?.number} />
     }
-    else if (message.mediaType === "multi_vcard") {
+    /*else if (message.mediaType === "multi_vcard") {
-      if (message.body !== null && message.body !== "") {
+      console.log("multi_vcard")
+      console.log(message)
+    	
+      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 (
           <>
             {
-              multi_vcard.map((v, index) => (
+            newBody.map(v => (
-                <>
+              <VcardPreview contact={v.name} numbers={v.number} />
-                  <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") {
@@ -633,22 +614,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) {
@@ -661,12 +642,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 messageDay = parseISO(messagesList[index].createdAt);
-      let previousMessageDay = parseISO(messagesList[index - 1].createdAt)
+      let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
 
       if (!isSameDay(messageDay, previousMessageDay)) {
 
@@ -679,14 +660,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 messageDay = parseISO(messagesList[index].createdAt);
-      let previousMessageDay = parseISO(messagesList[index - 1].createdAt)
+      let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
 
       return (
         <>
@@ -706,24 +687,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 messageUser = messagesList[index].fromMe;
-      let previousMessageUser = messagesList[index - 1].fromMe
+      let previousMessageUser = messagesList[index - 1].fromMe;
 
 
 
       if (messageUser !== previousMessageUser) {
         return (
           <span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
-        )
+        );
       }
     }
-  }
+  };
 
   const renderQuotedMessage = (message) => {
     return (
@@ -746,8 +727,8 @@ const MessagesList = ({ ticketId, isGroup }) => {
           {message.quotedMsg?.body}
         </div>
       </div>
-    )
+    );
-  }
+  };
 
   // const renderMessages = () => {
   //   if (messagesList.length > 0) {
@@ -856,7 +837,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)}
@@ -885,7 +866,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, {
@@ -915,7 +896,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     } else {
       return <div>Say hello to your new contact!</div>
     }
-  }
+  };
 
   return (
     <div className={classes.messagesListWrapper}>
@@ -938,7 +919,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 React, { useEffect, useState, useContext } from 'react';
-import { useHistory } from "react-router-dom"
+import { useHistory } from "react-router-dom";
-import toastError from "../../errors/toastError"
+import toastError from "../../errors/toastError";
-import api from "../../services/api"
+import api from "../../services/api";
 
-import Avatar from "@material-ui/core/Avatar"
+import Avatar from "@material-ui/core/Avatar";
-import Typography from "@material-ui/core/Typography"
+import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid"
+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, multi_vCard }) => {
+const VcardPreview = ({ contact, numbers }) => {
-    const history = useHistory()
+    const history = useHistory();
-    const { user } = useContext(AuthContext)
+    const { user } = useContext(AuthContext);
 
     const [selectedContact, setContact] = useState({
         name: "",
         number: 0,
         profilePicUrl: ""
-    })
+    });
 
     useEffect(() => {
         const delayDebounceFn = setTimeout(() => {
@@ -32,19 +32,18 @@ const VcardPreview = ({ contact, numbers, multi_vCard }) => {
                         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()
+            fetchContacts();
-        }, 500)
+        }, 500);
-        return () => clearTimeout(delayDebounceFn)
+        return () => clearTimeout(delayDebounceFn);
-    }, [contact, numbers])
+    }, [contact, numbers]);
 
     const handleNewChat = async () => {
         try {
@@ -52,10 +51,10 @@ const VcardPreview = ({ contact, numbers, multi_vCard }) => {
                 contactId: selectedContact.id,
                 userId: user.id,
                 status: "open",
-            })
+            });
-            history.push(`/tickets/${ticket.id}`)
+            history.push(`/tickets/${ticket.id}`);
         } catch (err) {
-            toastError(err)
+            toastError(err);
         }
     }
 
@@ -74,23 +73,19 @@ const VcardPreview = ({ contact, numbers, multi_vCard }) => {
                         </Typography>
                     </Grid>
                     <Grid item xs={12}>
-                        {!multi_vCard && <Divider />}
+                        <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,24 +1,37 @@
 import { Box } from '@material-ui/core';
 import React from 'react';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
-import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import { PieChart as RechartsPieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';
 
 import Title from './Title';
 
-const generateDataExample = (amount) => {
+const dataExample = [
-  const arr = []
+  {
-  for (let i = 1; i <= amount; i++) {
+    "id": 3366,
-    arr.push({
+    "name": "FINALIZADO",
-      "id": i,
+    "count": 5
-      "name": `Exemplo ${i}`,
+  },
-      "count": Math.floor(Math.random() * 10 + 2)
+  {
-    })
+    "id": 3369,
-  }
+    "name": "LEMBRETE",
-
+    "count": 1
-  return arr
+  },
-}
+  {
-
+    "id": 3367,
-const dataExample = generateDataExample(20)
+    "name": "EXEMPLO",
+    "count": 3
+  },
+  {
+    "id": 3364,
+    "name": "EXEMPLO 2",
+    "count": 3
+  },
+  {
+    "id": 3364,
+    "name": "EXEMPLO 3",
+    "count": 6
+  },
+]
 
 const COLORS = [
   '#0088FE', // Azul escuro
@@ -31,22 +44,12 @@ 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.80;
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.75;
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
   const y = cy + radius * Math.sin(-midAngle * RADIAN);
 
@@ -67,36 +70,9 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, cou
  */
 const PieChart = ({ data = dataExample }) => {
   return (
-    <Box
+    <Box width="100%" height="100%" position="relative" display="flex">
-      width="100%"
+      <Box sx={{ position: "absolute" }}>
-      height="100%"
+        <Title>Tickets encerramento</Title>
-      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"
@@ -105,10 +81,7 @@ 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 (
@@ -126,6 +99,26 @@ 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,6 +461,7 @@ 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'