Compare commits
No commits in common. "a6d800f17ad4f0d66b1c374d50de84bc4e84699f" and "7df322d1ab115f6a252c11fe52dc14c9f476a51e" have entirely different histories.
a6d800f17a
...
7df322d1ab
|
|
@ -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;
|
||||
|
||||
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"];
|
||||
const validate = ["queueId", "contact_to", "msg"];
|
||||
const validateOnlyNumber = ["queueId", "contact_to"];
|
||||
|
||||
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) {
|
||||
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" }
|
||||
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 (!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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
@ -595,7 +586,7 @@ const botTransferTicketToUser = async (
|
|||
};
|
||||
|
||||
const botSendMessage = (ticket: Ticket, msg: string) => {
|
||||
const { phoneNumberId } = ticket;
|
||||
const { phoneNumberId } = ticket;
|
||||
|
||||
const debouncedSentMessage = debounce(
|
||||
async () => {
|
||||
|
|
@ -653,9 +644,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"
|
||||
|
|
@ -796,8 +787,32 @@ const handleMessage = async (
|
|||
await verifyQueue(wbot, msg, ticket, contact);
|
||||
}
|
||||
|
||||
if (msg.type === "vcard" || msg.type === "multi_vcard") {
|
||||
await vcard(msg);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
const botInfo = await BotIsOnQueue("botqueue");
|
||||
|
|
@ -962,7 +977,7 @@ const handleMessage = async (
|
|||
if (ticket?.queueId) {
|
||||
ticketHasQueue = true;
|
||||
}
|
||||
|
||||
|
||||
if (ticketHasQueue && ticket.status != "open") {
|
||||
let whatsapp: any = await whatsappInfo(ticket?.whatsappId);
|
||||
|
||||
|
|
@ -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");
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -311,7 +311,9 @@ const MessageInput = ({ ticketStatus }) => {
|
|||
}
|
||||
|
||||
const handleSendMessage = async (templateParams = null) => {
|
||||
|
||||
|
||||
console.log('templateParams: ', templateParams, ' | inputMessage: ', inputMessage)
|
||||
|
||||
if (inputMessage.trim() === "") return
|
||||
setLoading(true)
|
||||
|
||||
|
|
@ -321,7 +323,9 @@ const MessageInput = ({ ticketStatus }) => {
|
|||
|
||||
if (templateParams) {
|
||||
for (let key in templateParams) {
|
||||
if (templateParams.hasOwnProperty(key)) {
|
||||
if (templateParams.hasOwnProperty(key)) {
|
||||
// let value = templateParams[key]
|
||||
// console.log('key: ', key, ' | ', 'VALUE: ', value)
|
||||
|
||||
if (key === '_reactName') {
|
||||
templateParams = null
|
||||
|
|
@ -344,7 +348,9 @@ const MessageInput = ({ ticketStatus }) => {
|
|||
}
|
||||
|
||||
|
||||
try {
|
||||
try {
|
||||
|
||||
console.log('kkkkkkkkkkkkkkkkkkk message: ', message)
|
||||
|
||||
const { data } = await api.post(`/messages/${ticketId}`, message)
|
||||
setParams(null)
|
||||
|
|
|
|||
|
|
@ -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,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") {
|
||||
if (message.body !== null && message.body !== "") {
|
||||
/*else if (message.mediaType === "multi_vcard") {
|
||||
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) => (
|
||||
<>
|
||||
<VcardPreview contact={v.name} numbers={v.number} multi_vCard={true} id={v.number} />
|
||||
|
||||
{((index + 1) <= multi_vcard.length - 1) && <Divider />}
|
||||
</>
|
||||
))
|
||||
newBody.map(v => (
|
||||
<VcardPreview contact={v.name} numbers={v.number} />
|
||||
))
|
||||
}
|
||||
</>
|
||||
)
|
||||
} 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 previousMessageDay = parseISO(messagesList[index - 1].createdAt)
|
||||
let messageDay = parseISO(messagesList[index].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 previousMessageDay = parseISO(messagesList[index - 1].createdAt)
|
||||
let messageDay = parseISO(messagesList[index].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 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 (
|
||||
|
|
@ -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;
|
||||
|
|
@ -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, multi_vCard }) => {
|
||||
const history = useHistory()
|
||||
const { user } = useContext(AuthContext)
|
||||
const VcardPreview = ({ contact, numbers }) => {
|
||||
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,20 +31,19 @@ const VcardPreview = ({ contact, numbers, multi_vCard }) => {
|
|||
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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 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 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 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
|
||||
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 width="100%" height="100%" position="relative" display="flex">
|
||||
<Box sx={{ position: "absolute" }}>
|
||||
<Title>Tickets encerramento</Title>
|
||||
</Box>
|
||||
<Box
|
||||
component="ul"
|
||||
|
|
@ -105,10 +81,7 @@ const PieChart = ({ data = dataExample }) => {
|
|||
top: 0, right: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "4px",
|
||||
maxWidth: "60%",
|
||||
minWidth: "50%",
|
||||
zIndex: 0,
|
||||
gap: "4px"
|
||||
}}>
|
||||
{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 >
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -460,7 +460,8 @@ const Report = () => {
|
|||
}
|
||||
|
||||
// Get from report type option
|
||||
const reportTypeValue = (data) => {
|
||||
const reportTypeValue = (data) => {
|
||||
console.log('DATA: ', data)
|
||||
let type = '1'
|
||||
if (data === '1') type = 'default'
|
||||
if (data === '2') type = 'synthetic'
|
||||
|
|
|
|||
Loading…
Reference in New Issue