Compare commits

...

5 Commits

8 changed files with 370 additions and 273 deletions

View File

@ -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;

View File

@ -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 (
@ -586,7 +595,7 @@ const botTransferTicketToUser = async (
};
const botSendMessage = (ticket: Ticket, msg: string) => {
const { phoneNumberId } = ticket;
const { phoneNumberId } = ticket;
const debouncedSentMessage = debounce(
async () => {
@ -644,9 +653,9 @@ const handleMessage = async (
let msgContact: any = wbot.msgContact;
// let groupContact: Contact | undefined;
if (msg.fromMe) {
if (msg.fromMe) {
// messages sent automatically by wbot have a special character in front of it
// if so, this message was already been stored in database;
// if so, this message was already been stored in database;
if (/\u200e/.test(msg.body[0])) return;
// media messages sent from me from cell phone, first comes with "hasMedia = false" and type = "image/ptt/etc"
@ -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");
@ -977,7 +962,7 @@ const handleMessage = async (
if (ticket?.queueId) {
ticketHasQueue = true;
}
if (ticketHasQueue && ticket.status != "open") {
let whatsapp: any = await whatsappInfo(ticket?.whatsappId);
@ -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");

View File

@ -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)

View File

@ -311,9 +311,7 @@ const MessageInput = ({ ticketStatus }) => {
}
const handleSendMessage = async (templateParams = null) => {
console.log('templateParams: ', templateParams, ' | inputMessage: ', inputMessage)
if (inputMessage.trim() === "") return
setLoading(true)
@ -323,9 +321,7 @@ 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 (templateParams.hasOwnProperty(key)) {
if (key === '_reactName') {
templateParams = null
@ -348,9 +344,7 @@ const MessageInput = ({ ticketStatus }) => {
}
try {
console.log('kkkkkkkkkkkkkkkkkkk message: ', message)
try {
const { data } = await api.post(`/messages/${ticketId}`, message)
setParams(null)

View File

@ -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

View File

@ -1,29 +1,29 @@
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(() => {
const fetchContacts = async () => {
const fetchContacts = async () => {
try {
let contactObj = {
name: contact,
@ -31,19 +31,20 @@ const VcardPreview = ({ contact, numbers }) => {
number: numbers !== undefined && numbers.replace(/\D/g, ""),
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

View File

@ -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 >
);

View File

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