Correção para abrir links de whatsapp wa.me

backend/src/services/MessageServices/ListMessagesService.ts

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

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)

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
+          // setContact(data.contact);
-          let msg
+          // setTicket(data); 
-          let contactId
 
-          if (ticketId && ticketId.includes("&&text=")) {
+          setContact(data.contact.contact);
-
+          setTicket(data.contact);
-            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);
-          }
 
+          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 = () => {
             />
           </div>
           <div className={classes.ticketActionButtons}>
-            <TicketActionButtons ticket={ticket} statusChatEnd={statusChatEnd} />
+            <TicketActionButtons ticket={ticket} statusChatEnd={statusChatEnd}/>
           </div>
         </TicketHeader>
         <ReplyMessageProvider>
@@ -257,4 +197,4 @@ const Ticket = () => {
   );
 };
 
-export default Ticket;
+export default Ticket;

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 (
+        <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;

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 = () => {
               <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 />