Initial commit

2025-10-13 00:23:31 -03:00
commit 42921527f8
725 changed files with 91395 additions and 0 deletions
@@ -0,0 +1,84 @@
+import React, { useEffect, useState, useContext } from "react";
+import QRCode from "qrcode.react";
+import toastError from "../../errors/toastError";
+
+import { Dialog, DialogContent, Paper, Typography, useTheme } from "@material-ui/core";
+import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
+import { SocketContext } from "../../context/Socket/SocketContext";
+
+const QrcodeModal = ({ open, onClose, whatsAppId }) => {
+  const [qrCode, setQrCode] = useState("");
+  const theme = useTheme();
+
+  const socketManager = useContext(SocketContext);
+
+  useEffect(() => {
+    const fetchSession = async () => {
+      if (!whatsAppId) return;
+
+      try {
+        const { data } = await api.get(`/whatsapp/${whatsAppId}`);
+        setQrCode(data.qrcode);
+      } catch (err) {
+        toastError(err);
+      }
+    };
+    fetchSession();
+  }, [whatsAppId]);
+
+  useEffect(() => {
+    if (!whatsAppId) return;
+    const companyId = localStorage.getItem("companyId");
+    const socket = socketManager.getSocket(companyId);
+
+    socket.on(`company-${companyId}-whatsappSession`, (data) => {
+      if (data.action === "update" && data.session.id === whatsAppId) {
+        setQrCode(data.session.qrcode);
+      }
+
+      if (data.action === "update" && data.session.qrcode === "") {
+        onClose();
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [whatsAppId, onClose, socketManager]);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="lg" scroll="paper">
+      <DialogContent>
+        <Paper elevation={0} style={{ display: "flex", alignItems: "center" }}>
+          <div style={{ marginRight: "20px" }}>
+            <Typography variant="h2" component="h2" color="textPrimary" gutterBottom style={{ fontFamily: "Montserrat", fontWeight: "bold", fontSize:"20px",}}>
+              Utilize o seu WhatsApp:
+            </Typography>
+            <Typography variant="body1" color="textPrimary" gutterBottom>
+              1 - Abra o WhatsApp no seu celular
+            </Typography>
+            <Typography variant="body1" color="textPrimary" gutterBottom>
+              2 - Toque em Mais opções no Android <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg> ou em Configurações <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path></svg> no iPhone
+            </Typography>
+            <Typography variant="body1" color="textPrimary" gutterBottom>
+              3 - Toque em Dispositivos conectados e, em seguida, em Conectar dispositivos
+            </Typography>
+            <Typography variant="body1" color="textPrimary" gutterBottom>
+              4 - Aponte seu celular para essa tela para capturar o QR Code
+            </Typography>
+          </div>
+          <div>
+            {qrCode ? (
+              <QRCode value={qrCode} size={256} />
+            ) : (
+              <span>Waiting for QR Code</span>
+            )}
+          </div>
+        </Paper>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default React.memo(QrcodeModal);