Skip to content

Commit

Permalink
Atualização de Doc para envio de mensagem
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtenorioh
rtenorioh committed Sep 24, 2024
1 parent 93c9e21 commit d24f5b6
Showing 1 changed file with 274 additions and 61 deletions.
335 changes: 274 additions & 61 deletions frontend/src/pages/Api/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,302 @@
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import axios from "axios";
import React, { useEffect, useState } from "react";
import toastError from "../../errors/toastError";
import api from "../../services/api";

const useStyles = makeStyles(theme => ({
root: {
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: theme.spacing(2),
},

paper: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(2),
formContainer: {
display: "flex",
alignItems: "center",
marginBottom: 12,
flexDirection: "column",
width: "100%",
maxWidth: 600,
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(4),
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
position: "sticky",
top: theme.spacing(8),
},

settingOption: {
marginLeft: "auto",
instructionContainer: {
padding: theme.spacing(4),
backgroundColor: theme.palette.background.paper,
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
},

margin: {
margin: theme.spacing(1),
input: {
marginBottom: theme.spacing(3),
},
button: {
marginTop: theme.spacing(2),
backgroundColor: theme.palette.primary.main,
color: "#fff",
},
fileInput: {
marginTop: theme.spacing(2),
},

color: {
color: theme.palette.secondary.main,
color: theme.palette.primary.main,
},

text: {
marginLeft: "42px",
color: theme.palette.text.secondary,
marginBottom: theme.spacing(1),
},

textP: {
marginLeft: "42px",
color: theme.palette.text.secondary,
marginBottom: theme.spacing(2),
},

}));

const Api = () => {
const classes = useStyles();
const [number, setNumber] = useState("");
const [body, setBody] = useState("");
const [media, setMedia] = useState(null);
const [userId, setUserId] = useState();
const [queueId, setQueueId] = useState();
const [whatsappId, setWhatsappId] = useState();
const [settings, setSettings] = useState([]);
const [users, setUsers] = useState([]);
const [queues, setQueues] = useState([]);
const [whatsapps, setWhatsapps] = useState([]);

useEffect(() => {
(async () => {
try {
const { data } = await api.get("/queue");
setQueues(data);
} catch (err) {
toastError(err);
}
})();
}, []);

useEffect(() => {
(async () => {
try {
const { data } = await api.get("/users");
setUsers(data.users);
} catch (err) {
toastError(err);
}
})();
}, []);

useEffect(() => {
(async () => {
try {
const { data } = await api.get("/whatsapp");
setWhatsapps(data);
} catch (err) {
toastError(err);
}
})();
}, []);

useEffect(() => {
const fetchSession = async () => {
try {
const { data } = await api.get("/settings");
setSettings(data);
} catch (err) {
toastError(err);
}
};
fetchSession();
}, []);

const getSettingValue = key => {
const { value } = settings.find(s => s.key === key);
return value;
};

const handleMediaChange = (e) => {
setMedia(e.target.files[0]);
};

const handleSubmit = async (e) => {
e.preventDefault();
const token = settings && settings.length > 0 && getSettingValue("userApiToken");

let payload;

if (media) {
const formData = new FormData();
formData.append("number", number);
formData.append("body", body);
formData.append("userId", userId);
formData.append("queueId", queueId);
formData.append("whatsappId", whatsappId);
formData.append("medias", media);
payload = formData;
} else {
payload = {
number,
body,
userId,
queueId,
whatsappId
};
}

try {
const response = await axios.post(`${process.env.REACT_APP_BACKEND_URL}/api/messages/send`, payload, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": media ? "multipart/form-data" : "application/json"
}
});

console.log("Mensagem enviada com sucesso:", response.data);
} catch (error) {
console.error("Erro ao enviar mensagem:", error);
}
};

return (
<div className={classes.root}>
<Container>
<h2>Documentação para envio de mensagens</h2>

<h2 className={classes.color}>Métodos de Envio</h2>

<p className={classes.text}>1. Mensagens de Texto</p>
<p className={classes.text}>2. Mensagens de Mídia</p>

<h2 className={classes.color}>Instruções</h2>
<p><b>Observações Importantes</b></p>
<ul>
<li className={classes.text}>Para pegar o token da API, vá em configurações que seu token estará la, sem ele não será possivel enviar mensagens.</li>
<li className={classes.text}>O número para envio não deve ter mascara ou caracteres especiais e deve ser composto por:</li>
<br />
<ol>
<Container className={classes.root}>
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<Paper className={classes.instructionContainer}>
<h2>Documentação para envio de mensagens</h2>
<h2 className={classes.color}>Métodos de Envio</h2>
<p className={classes.text}>1. Mensagens de Texto</p>
<p className={classes.text}>2. Mensagens de Mídia</p>

<h2 className={classes.color}>Instruções</h2>
<p><b>Observações Importantes</b></p>
<ul>
<li className={classes.text}>Código do pais - Ex: 55 (Brasil)</li>
<li className={classes.text}>DDD</li>
<li className={classes.text}>Número</li>
<li className={classes.text}>Para pegar o token da API, vá em API key que seu token estará lá, sem ele não será possível enviar mensagens.</li>
<li className={classes.text}>O número para envio não deve ter máscara ou caracteres especiais e deve ser composto por:</li>
<ul>
<li className={classes.text}>Código do país - Ex: 55 (Brasil)</li>
<li className={classes.text}>DDD</li>
<li className={classes.text}>Número</li>
</ul>
</ul>
</ol>
</ul>
<h2 className={classes.color}>1. Mensagens de Texto</h2>
<p>Seguem abaixo lista de informações necessárias para envio das mensagens de texto:</p>
<p className={classes.textP}><b>URL: </b>{process.env.REACT_APP_BACKEND_URL}/api/messages/send</p>
<p className={classes.textP}><b>Metódo: </b>POST</p>
<p className={classes.textP}><b>Headers: </b>Authorization: Bearer (token) e Content-Type application/json</p>
<p className={classes.textP}><b>Body: </b>"number": "5599999999999", "body": "Enviado via api"</p>

<h2 className={classes.color}>2. Mensagens de Mídia</h2>
<p>Seguem abaixo lista de informações necessárias para envio de midias:</p>
<p className={classes.textP}><b>URL: </b>{process.env.REACT_APP_BACKEND_URL}/api/messages/send</p>
<p className={classes.textP}><b>Metódo: </b>POST</p>
<p className={classes.textP}><b>Headers: </b>Authorization: Bearer (token) e Content-Type multipart/form-data</p>
<p className={classes.textP}><b>Body: </b>"number": "5599999999999", "medias": "aqui vai sua midia", "body": "Enviado via api"</p>
</Container>
</div>

<h2 className={classes.color}>1. Mensagens de Texto</h2>
<p>Seguem abaixo lista de informações necessárias para envio das mensagens de texto:</p>
<p className={classes.textP}><b>URL: </b>{process.env.REACT_APP_BACKEND_URL}/api/messages/send</p>
<p className={classes.textP}><b>Método: </b>POST</p>
<p className={classes.textP}><b>Headers: </b>Authorization: Bearer (token) e Content-Type application/json</p>
<p className={classes.textP}><b>Body: </b>"number": "5599999999999", "body": "Enviado via api", "userId": "1", "queueId": "1", "whatsappId": "1"</p>

<h2 className={classes.color}>2. Mensagens de Mídia</h2>
<p>Seguem abaixo lista de informações necessárias para envio de mídias:</p>
<p className={classes.textP}><b>URL: </b>{process.env.REACT_APP_BACKEND_URL}/api/messages/send</p>
<p className={classes.textP}><b>Método: </b>POST</p>
<p className={classes.textP}><b>Headers: </b>Authorization: Bearer (token) e Content-Type multipart/form-data</p>
<p className={classes.textP}><b>Body: </b>"number": "5599999999999", "medias": "aqui vai sua mídia", "body": "Enviado via api", "userId": "1", "queueId": "1", "whatsappId": "1"</p>
</Paper>
</Grid>
<Grid item xs={12} md={6}>
<Paper className={classes.formContainer}>
<h2>Envie Mensagens de Texto ou Mídia</h2>
<form onSubmit={handleSubmit}>
<TextField
className={classes.input}
label="Número de telefone"
variant="outlined"
fullWidth
value={number}
onChange={(e) => setNumber(e.target.value)}
required
/>
<TextField
className={classes.input}
label="Corpo da mensagem"
variant="outlined"
fullWidth
value={body}
onChange={(e) => setBody(e.target.value)}
required
/>
<Grid container spacing={2}>
<Grid item xs={4}>
<TextField
select
className={classes.input}
label="User ID"
variant="outlined"
fullWidth
value={userId}
onChange={(e) => setUserId(e.target.value)}
required
>
{users.map((user) => (
<option key={user.id} value={user.id}>
{user.name}
</option>
))}
</TextField>
</Grid>

<Grid item xs={4}>
<TextField
select
className={classes.input}
label="Setor ID"
variant="outlined"
fullWidth
value={queueId}
onChange={(e) => setQueueId(e.target.value)}
required
>
{queues.map((queue) => (
<option key={queue.id} value={queue.id}>
{queue.name}
</option>
))}
</TextField>
</Grid>

<Grid item xs={4}>
<TextField
select
className={classes.input}
label="WhatsApp ID"
variant="outlined"
fullWidth
value={whatsappId}
onChange={(e) => setWhatsappId(e.target.value)}
required
>
{whatsapps.map((whatsapp) => (
<option key={whatsapp.id} value={whatsapp.id}>
{whatsapp.name}
</option>
))}
</TextField>
</Grid>
</Grid>
<input
className={classes.fileInput}
type="file"
onChange={handleMediaChange}
/>
<Button
className={classes.button}
type="submit"
fullWidth
variant="contained"
>
ENVIAR MENSAGEM
</Button>
</form>
</Paper>
</Grid>
</Grid>
</Container>
);
};

export default Api;
export default Api;

0 comments on commit d24f5b6

Please sign in to comment.