Add Página de Documentação da API

rtenorioh · Mar 15, 2022 · 5404c22 · 5404c22
1 parent ee58fef
commit 5404c22
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 5 deletions.
diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js
@@ -15,6 +15,7 @@ import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
 import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
 import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
 import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
+import CodeIcon from '@material-ui/icons/Code';
 
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
@@ -125,6 +126,13 @@ const MainListItems = (props) => {
               primary={i18n.t("mainDrawer.listItems.settings")}
               icon={<SettingsOutlinedIcon />}
             />
+            <ListItemLink
+              to="/api"
+              primary={i18n.t("mainDrawer.listItems.api")}
+              icon={
+                <CodeIcon />
+              }
+            />
           </>
         )}
       />

diff --git a/frontend/src/pages/Api/index.js b/frontend/src/pages/Api/index.js
@@ -0,0 +1,86 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        display: "flex",
+        alignItems: "center",
+        padding: theme.spacing(2),
+    },
+
+    paper: {
+        padding: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+
+    settingOption: {
+        marginLeft: "auto",
+    },
+
+    margin: {
+        margin: theme.spacing(1),
+    },
+
+    color: {
+        color: "#0241AD"
+    },
+
+    text: {
+        marginLeft: "42px",
+    },
+
+    textP: {
+        marginLeft: "42px",
+    },
+
+}));
+
+const Api = () => {
+    const classes = useStyles();
+
+    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>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>O número para envio não deve ter mascara ou caracteres especiais e deve ser composto por:</li>
+                    <br />
+                    <ol>
+                        <ul>
+                            <li>Código do pais - Ex: 55 (Brasil)</li>
+                            <li>DDD</li>
+                            <li>Número</li>
+                        </ul>
+                    </ol>
+                </ul>
+                <h2 className={classes.color}>1. Mensagens de Texto</h2>
+                <p>Seguem abaixo lista de informacoes 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 informacoes 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>
+    );
+};
+
+export default Api;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
@@ -13,6 +13,8 @@ import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
 import QuickAnswers from "../pages/QuickAnswers/";
 import Queues from "../pages/Queues/";
+import Api from "../pages/Api/";
+
 import { AuthProvider } from "../context/Auth/AuthContext";
 import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
 import Route from "./Route";
@@ -48,6 +50,7 @@ const Routes = () => {
                 isPrivate
               />
               <Route exact path="/Settings" component={Settings} isPrivate />
+              <Route exact path="/api" component={Api} isPrivate />
               <Route exact path="/Queues" component={Queues} isPrivate />
             </LoggedInLayout>
           </WhatsAppsProvider>

diff --git a/frontend/src/translate/languages/en.js b/frontend/src/translate/languages/en.js
@@ -284,6 +284,7 @@ const messages = {
           administration: "Administration",
           users: "Users",
           settings: "Settings",
+          api: "API usage",
         },
         appBar: {
           user: {

diff --git a/frontend/src/translate/languages/es.js b/frontend/src/translate/languages/es.js
@@ -288,6 +288,7 @@ const messages = {
           administration: "Administración",
           users: "Usuarios",
           settings: "Configuración",
+          api: "uso de la API",
         },
         appBar: {
           user: {

diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js
@@ -288,15 +288,15 @@ const messages = {
           administration: "Administração",
           users: "Usuários",
           settings: "Configurações",
-          ZDG: "Envio de Mensagens",
-          ZDGMedia: "Envio de Mídia",
-          ZDGGroups: "Grupos",
-          Direct: "Direct IG",
+          api: "Uso da API",
+          sendMsg: "Envio de Mensagens",
+          sendMedia: "Envio de Mídia",
+          Groups: "Grupos",
           SMS: "SMS",
           VoiceCall: "Chamada Telefônica",
           tfaq: "FAQ",
           tsuporte: "Suporte",
-          ZDGHistorico: "Histórico"
+          Historico: "Histórico"
 
         },
         appBar: {