diff --git a/backend/src/services/MessageServices/ListMessagesService.ts b/backend/src/services/MessageServices/ListMessagesService.ts index a986f16..4f50ce1 100644 --- a/backend/src/services/MessageServices/ListMessagesService.ts +++ b/backend/src/services/MessageServices/ListMessagesService.ts @@ -20,7 +20,9 @@ const ListMessagesService = async ({ ticketId }: Request): Promise => { - if (ticketId && ticketId.includes("&&text=")) { + console.log('>>>>>>>>>>>>>>>>>>>> ticketId: ', ticketId) + + if (ticketId && ticketId.length > 9) { return { messages: [], ticket: new Ticket, diff --git a/backend/src/services/TicketServices/CreateTicketService.ts b/backend/src/services/TicketServices/CreateTicketService.ts index 75db36f..ae80bd0 100644 --- a/backend/src/services/TicketServices/CreateTicketService.ts +++ b/backend/src/services/TicketServices/CreateTicketService.ts @@ -42,8 +42,7 @@ const CreateTicketService = async ({ console.log('Create contact service........') - const defaultWhatsapp = await GetDefaultWhatsApp(userId); - + const defaultWhatsapp = await GetDefaultWhatsApp(userId); const user = await User.findByPk(userId, { raw: true, }) console.log('user.profile: ', user?.profile) diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js index a562990..de0e3d4 100644 --- a/frontend/src/components/Ticket/index.js +++ b/frontend/src/components/Ticket/index.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useContext } from "react"; +import React, { useState, useEffect } from "react"; import { useParams, useHistory } from "react-router-dom"; import { toast } from "react-toastify"; @@ -17,8 +17,6 @@ import api from "../../services/api"; import { ReplyMessageProvider } from "../../context/ReplyingMessage/ReplyingMessageContext"; import toastError from "../../errors/toastError"; -import { AuthContext } from "../../context/Auth/AuthContext" - const drawerWidth = 320; const useStyles = makeStyles((theme) => ({ @@ -76,10 +74,6 @@ const useStyles = makeStyles((theme) => ({ })); const Ticket = () => { - - const { user } = useContext(AuthContext); - - const { ticketId } = useParams(); const history = useHistory(); const classes = useStyles(); @@ -89,95 +83,41 @@ const Ticket = () => { const [contact, setContact] = useState({}); const [ticket, setTicket] = useState({}); - const [statusChatEnd, setStatusChatEnd] = useState({}) + const [statusChatEnd, setStatusChatEnd] = useState({}) useEffect(() => { setLoading(true); const delayDebounceFn = setTimeout(() => { - const fetchTicket = async () => { + const fetchTicket = async () => { + try { + + // maria julia - try { + const { data } = await api.get("/tickets/" + ticketId); - let number - let msg - let contactId + // setContact(data.contact); + // setTicket(data); - if (ticketId && ticketId.includes("&&text=")) { - - number = ticketId.split('&&text=')[0] - msg = ticketId.split('&&text=')[1] - - msg = decodeURIComponent(msg); - - - console.log('NUMBER: ', number) - - const { data: data0 } = await api.get("/contacts/", { params: { searchParam: number, pageNumber: "1" }, }); - - if (data0 && data0.contacts.length > 0) { - console.log('-----> data: ', data0.contacts[0].id) - contactId = data0.contacts[0].id - } - else { - console.log('NO CONTACT whith this NUMBER: ', number) - - const values = { - name: number, - number: number, - }; - - const { data: data1 } = await api.post("/contacts", values); - - console.log('data1: ', data1) - - contactId = data1.id - - } - - const { data: ticket } = await api.post("/tickets", { - contactId: contactId, - userId: user.id, - status: "open", - msg - }); - - window.location.reload(); - history.push(`/tickets/${ticket.id}`); - window.location.reload(); - - } - else { - - console.log('>>>>>>>>>>>>>>>>>>>>>>>>> ticketId: ', ticketId) - - const { data } = await api.get("/tickets/" + ticketId); - - // setContact(data.contact); - // setTicket(data); - - setContact(data.contact.contact); - setTicket(data.contact); - - setStatusChatEnd(data.statusChatEnd) - - setLoading(false); - } + setContact(data.contact.contact); + setTicket(data.contact); + setStatusChatEnd(data.statusChatEnd) + setLoading(false); } catch (err) { - setLoading(false); + setLoading(false); toastError(err); } }; fetchTicket(); }, 500); return () => clearTimeout(delayDebounceFn); - }, [ticketId, history, user.id]); + }, [ticketId, history]); useEffect(() => { const regex = /^[0-9\b]+$/; // Regular expression to match only numbers - if (ticketId && !ticketId.match(regex)) return + if (ticketId && !ticketId.match(regex) || ticketId && ticketId.length > 9 ) return const socket = openSocket(process.env.REACT_APP_BACKEND_URL); @@ -236,7 +176,7 @@ const Ticket = () => { />
- +
@@ -257,4 +197,4 @@ const Ticket = () => { ); }; -export default Ticket; +export default Ticket; \ No newline at end of file diff --git a/frontend/src/pages/Tickets/WhatsLink/index.js b/frontend/src/pages/Tickets/WhatsLink/index.js new file mode 100644 index 0000000..273435c --- /dev/null +++ b/frontend/src/pages/Tickets/WhatsLink/index.js @@ -0,0 +1,245 @@ +import React, { useState, useEffect, useContext } from "react"; +import { useParams, useHistory } from "react-router-dom"; + +import { toast } from "react-toastify"; +import openSocket from "socket.io-client"; +import clsx from "clsx"; + +import { Paper, makeStyles } from "@material-ui/core"; + + +import ContactDrawer from "../../../components/ContactDrawer"; +import MessageInput from "../../../components/MessageInput"; +import TicketHeader from "../../../components/TicketHeader"; +import TicketInfo from "../../../components/TicketInfo"; +import TicketActionButtons from "../../../components/TicketActionButtons"; +import MessagesList from "../../../components/MessagesList"; +import api from "../../../services/api"; +import { ReplyMessageProvider } from "../../../context/ReplyingMessage/ReplyingMessageContext"; +import toastError from "../../../errors/toastError"; +import { AuthContext } from "../../../context/Auth/AuthContext" + +const drawerWidth = 320; + +const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + height: "100%", + position: "relative", + overflow: "hidden", + }, + + ticketInfo: { + maxWidth: "50%", + flexBasis: "50%", + [theme.breakpoints.down("sm")]: { + maxWidth: "80%", + flexBasis: "80%", + }, + }, + ticketActionButtons: { + maxWidth: "50%", + flexBasis: "50%", + display: "flex", + [theme.breakpoints.down("sm")]: { + maxWidth: "100%", + flexBasis: "100%", + marginBottom: "5px", + }, + }, + + mainWrapper: { + flex: 1, + height: "100%", + display: "flex", + flexDirection: "column", + overflow: "hidden", + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderLeft: "0", + marginRight: -drawerWidth, + transition: theme.transitions.create("margin", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + + mainWrapperShift: { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + transition: theme.transitions.create("margin", { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginRight: 0, + }, +})); + +const Ticket = () => { + + const { user } = useContext(AuthContext); + + + const { ticketId } = useParams(); + const history = useHistory(); + const classes = useStyles(); + + const [drawerOpen, setDrawerOpen] = useState(false); + const [loading, setLoading] = useState(true); + const [contact, setContact] = useState({}); + const [ticket, setTicket] = useState({}); + + const [statusChatEnd, setStatusChatEnd] = useState({}) + + useEffect(() => { + setLoading(true); + const delayDebounceFn = setTimeout(() => { + const fetchTicket = async () => { + + console.log('+++++++++++ ticketId: ', ticketId) + + try { + + let number + let msg + let contactId + + console.log('ticketId: ', ticketId) + console.log('window.location.href): ', window.location.href) + + const link = window.location.href.split('/https://wa.me/') + + number = link[1].split('?text=')[0] + msg = link[1].split('?text=')[1] || '' + + msg = decodeURIComponent(msg); + + const { data: data0 } = await api.get("/contacts/", { params: { searchParam: number, pageNumber: "1" }, }); + + if (data0 && data0.contacts.length > 0) { + console.log('-----> data: ', data0.contacts[0].id) + contactId = data0.contacts[0].id + } + else { + + const values = { + name: number, + number: number, + }; + + const { data: data1 } = await api.post("/contacts", values); + + contactId = data1.id + + } + + const { data: ticket } = await api.post("/tickets", { + contactId: contactId, + userId: user.id, + status: "open", + msg + }); + + window.location.reload(); + history.push(`/tickets/${ticket.id}`); + window.location.reload(); + + } catch (err) { + + console.log('first---------------------->') + + setLoading(false); + toastError(err); + + history.push(`/tickets`); + } + }; + fetchTicket(); + }, 500); + return () => clearTimeout(delayDebounceFn); + }, [ticketId, history, user.id]); + + useEffect(() => { + + const regex = /^[0-9\b]+$/; // Regular expression to match only numbers + if (ticketId && !ticketId.match(regex) || ticketId && ticketId.length > 9 ) return + + const socket = openSocket(process.env.REACT_APP_BACKEND_URL); + + socket.on("connect", () => socket.emit("joinChatBox", ticketId)); + + socket.on("ticket", (data) => { + if (data.action === "update") { + setTicket(data.ticket); + } + + if (data.action === "delete") { + toast.success("Ticket deleted sucessfully."); + history.push("/tickets"); + } + }); + + socket.on("contact", (data) => { + if (data.action === "update") { + setContact((prevState) => { + if (prevState.id === data.contact?.id) { + return { ...prevState, ...data.contact }; + } + return prevState; + }); + } + }); + + return () => { + socket.disconnect(); + }; + }, [ticketId, history]); + + const handleDrawerOpen = () => { + setDrawerOpen(true); + }; + + const handleDrawerClose = () => { + setDrawerOpen(false); + }; + + return ( +
+ + +
+ +
+
+ +
+ + + + + + + +
+ ); +}; + +export default Ticket; diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index 1043761..08dd6c1 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -9,6 +9,7 @@ import Report from "../pages/Report/"; import SchedulesReminder from "../pages/SchedulesReminder/"; import Tickets from "../pages/Tickets/"; +import WhatsLink from "../pages/Tickets/WhatsLink"; import Signup from "../pages/Signup/"; import Login from "../pages/Login/"; import Connections from "../pages/Connections/"; @@ -35,6 +36,8 @@ const Routes = () => { + +