Correção para abrir links de whatsapp wa.me
adriano
parent
441f1fa83e
commit
307ceca26e
|
|
@ -20,7 +20,9 @@ const ListMessagesService = async ({
|
|||
ticketId
|
||||
}: Request): Promise<Response> => {
|
||||
|
||||
if (ticketId && ticketId.includes("&&text=")) {
|
||||
console.log('>>>>>>>>>>>>>>>>>>>> ticketId: ', ticketId)
|
||||
|
||||
if (ticketId && ticketId.length > 9) {
|
||||
return {
|
||||
messages: [],
|
||||
ticket: new Ticket,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ const CreateTicketService = async ({
|
|||
|
||||
const defaultWhatsapp = await GetDefaultWhatsApp(userId);
|
||||
|
||||
|
||||
const user = await User.findByPk(userId, { raw: true, })
|
||||
console.log('user.profile: ', user?.profile)
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -95,75 +89,21 @@ const Ticket = () => {
|
|||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchTicket = async () => {
|
||||
|
||||
try {
|
||||
|
||||
let number
|
||||
let msg
|
||||
let contactId
|
||||
// maria julia
|
||||
|
||||
if (ticketId && ticketId.includes("&&text=")) {
|
||||
const { data } = await api.get("/tickets/" + ticketId);
|
||||
|
||||
number = ticketId.split('&&text=')[0]
|
||||
msg = ticketId.split('&&text=')[1]
|
||||
// setContact(data.contact);
|
||||
// setTicket(data);
|
||||
|
||||
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);
|
||||
toastError(err);
|
||||
|
|
@ -172,12 +112,12 @@ const Ticket = () => {
|
|||
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 = () => {
|
|||
/>
|
||||
</div>
|
||||
<div className={classes.ticketActionButtons}>
|
||||
<TicketActionButtons ticket={ticket} statusChatEnd={statusChatEnd} />
|
||||
<TicketActionButtons ticket={ticket} statusChatEnd={statusChatEnd}/>
|
||||
</div>
|
||||
</TicketHeader>
|
||||
<ReplyMessageProvider>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={classes.root} id="drawer-container">
|
||||
<Paper
|
||||
variant="outlined"
|
||||
elevation={0}
|
||||
className={clsx(classes.mainWrapper, {
|
||||
[classes.mainWrapperShift]: drawerOpen,
|
||||
})}
|
||||
>
|
||||
<TicketHeader loading={loading}>
|
||||
<div className={classes.ticketInfo}>
|
||||
<TicketInfo
|
||||
contact={contact}
|
||||
ticket={ticket}
|
||||
onClick={handleDrawerOpen}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.ticketActionButtons}>
|
||||
<TicketActionButtons ticket={ticket} statusChatEnd={statusChatEnd} />
|
||||
</div>
|
||||
</TicketHeader>
|
||||
<ReplyMessageProvider>
|
||||
<MessagesList
|
||||
ticketId={ticketId}
|
||||
isGroup={ticket.isGroup}
|
||||
></MessagesList>
|
||||
<MessageInput ticketStatus={ticket.status} />
|
||||
</ReplyMessageProvider>
|
||||
</Paper>
|
||||
<ContactDrawer
|
||||
open={drawerOpen}
|
||||
handleDrawerClose={handleDrawerClose}
|
||||
contact={contact}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ticket;
|
||||
|
|
@ -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 = () => {
|
|||
<Route exact path="/" component={Dashboard} isPrivate />
|
||||
<Route exact path="/tickets/:ticketId?" component={Tickets} isPrivate />
|
||||
|
||||
<Route exact path="/tickets/https://wa.me/:ticketId?" component={WhatsLink} isPrivate />
|
||||
|
||||
<Route exact path="/connections" component={Connections} isPrivate />
|
||||
|
||||
<Route exact path="/report" component={Report} isPrivate />
|
||||
|
|
|
|||
Loading…
Reference in New Issue