Merge branch 'issue/114-create-contact-form' into 'develop'

Issue #114: ADD contact page

Closes #114

See merge request !138

pnpm-lock.yaml

@@ -2879,7 +2879,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.3(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -2903,7 +2903,7 @@ snapshots:
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.14.0
@@ -2925,7 +2925,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5

src/app/contato/page.js

+"use client";
 import { Card } from "@mui/material";
+import { useState, useEffect } from "react";
 import Overlay from "../components/Overlay";
+import { TextField, Button, InputLabel } from "@mui/material";
+import mecredApi from "@/axiosConfig";
+import { Modal } from "@mui/material";
 
 export default function Contact() {
+  const [userName, setUserName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
+  const [userMessage, setUserMessage] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [successOpen, setSuccessOpen] = useState(false)
+
+  const handleUserNameChange = (e) => {
+    setUserName(e.target.value);
+  };
+
+  const handleUserEmailChange = (e) => {
+    setUserEmail(e.target.value);
+
+  };
+
+  const handleUserMessageChange = (e) => {
+    setUserMessage(e.target.value);
+  };
+
+  const sendMessage = async (event, name, email, message) => {
+    event.preventDefault();
+    await mecredApi
+      .post("/contacts", {
+        name: userName,
+        email: userEmail,
+        message: userMessage,
+      })
+      .then((response) => {
+        setSuccessOpen(true);
+      })
+      .catch((error) => {
+        setErrorMessage(error['response']['data']['errors'][0])
+      })
+  }
+
+
+  const ModalSucess = ({ open, onClose }) => {
+    return (
+      <Modal open={open} onClose={onClose} className="grid place-items-center">
+        <div className="flex flex-col justify-center bg-main p-5 rounded">
+          <p className="text-xl justify-center flex text-main-text mb-2">Mensagem enviada com sucesso!</p>
+          <div className="flex flex-row mt-2 justify-center gap-3">
+            <button
+              className="text-sm text-main-text border-main rounded-lg normal-case font-bold bg-main hover:bg-main-hover"
+              onClick={() => onClose()}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+
   return (
     <Overlay>
+      <ModalSucess open={successOpen} onClose={() => { setSuccessOpen(false) }} />
       <div className="flex justify-center">
         <Card
           className="text-text-filter bg-white outline outline-1 outline-outlineColor"
@@ -11,19 +71,61 @@ export default function Contact() {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            justifyContent: "center",
             width: 1125,
-            height: 882,
+            height: 750,
             backgroundColor: "#FFFFFF",
             boxShadow: "none",
             padding: "30px",
           }}
         >
-          <div className="flex flex-col justify-center text-center gap-5"> 
-            <div className="text-2xl font-bold">Contato</div>
-            <div className="text-xl font-thin leading-6">Entre em contato para enviar dúvidas, sugestões ou críticas.</div>
+          <form onSubmit={sendMessage} className="mb-5">
+            <div className="flex flex-col justify-center text-center items-center gap-8 mt-16">
+              <p className="text-2xl font-bold">Contato</p>
+              <p className="text-xl font-light">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
+              <TextField
+                required
+                label="Nome"
+                alt="Nome"
+                sx={{
+                  width: 346,
+                  marginTop: 2,
+                }}
+                onChange={handleUserNameChange}
+              />
+              <TextField
+                required
+                label="E-mail"
+                alt="E-mail"
+                type="email"
+                sx={{
+                  width: 346,
+                  marginTop: 2,
+                }}
+                onChange={handleUserEmailChange}
+              />
+              <TextField
+                required
+                multiline
+                rows={5}
+                label="Mensagem"
+                alt="Mensagem"
+                sx={{
+                  width: 346,
+                  marginTop: 2,
+                }}
+                onChange={handleUserMessageChange}
+              />
+              <Button
+                className="bg-secondary text-white hover:bg-secondary-hover normal-case font-bold w-80 text-lg"
+                type="submit"
+                alt="Enviar mensagem"
+                title="Enviar mensagem"
+              >
+                Enviar mensagem
+              </Button>
+              <p className="text-xs font-light mt-6">Os campos marcados com * são obrigatórios.</p>
             </div>
-
+          </form>
         </Card>
       </div>
     </Overlay>

src/app/topicosAjuda/page.js

@@ -35,16 +35,13 @@ export default function HelpTopics() {
       question: "Quais tipos de recursos e formatos de arquivo a plataforma aceita?",
       answer: [
         " Veja abaixo a lista dos Tipos de Recursos e alguns exemplos de Formatos de Arquivos que são aceitos para publicação na Plataforma MEC:",
-        " Imagem - JPG, GIF e PNG",
-        " Mapa - JPG, GIF e PNG",
-        " Animação/Simulador - SWF",
+        " Imagem - JPG, WEBP, PDF e PNG",
+        " Mapa - JPG, WEBP, PDF e PNG",
         " Texto - PDF, TXT, DOC e DOCX (Word)",
         " Áudio - MP3 e WAV",
-        " Vídeo - WMV",
-        " Apresentação - PPT e PPTX (PowerPoint)",
-        " Infográfico - JPG, GIF e PNG",
-        " Software Educacional - EXE",
-        " Outros - ZIP e RAR (Compactadores) XLS e XLSX (Excel)"
+        " Vídeo - WMV, MP4 e YouTube (embedado)",
+        " Apresentação - PDF, PPT e PPTX (PowerPoint)",
+        " Infográfico - PDF, JPG, WEBP e PNG"
       ],
     },
   ]
@@ -212,7 +209,7 @@ export default function HelpTopics() {
           >
             <div className="flex justify-start flex-col text-text-filter gap-7 mt-3 mr-16">
               <p className="mt-5 text-2xl font-bold mb-5">{questionChosen.question}</p>
-              <div className="text-xl font-thin mb-5 leading-6">
+              <div className="text-xl text-text-color font-light mb-5 leading-6">
                 {questionChosen.answer.map((line, index) => (
                   <p key={index}>{line}<br /><br /></p>
                 ))}