feat: Adiciona feedback de submit do form

react-project/src/assets/styles/modules/Contato.module.scss

@@ -1,5 +1,6 @@
 .forms {
   width: 100%;
+  position: relative;
 
   h2 {
     font-weight: 700;
@@ -46,6 +47,7 @@
   &__terms {
     display: flex;
     justify-content: center;
+    align-items: end;
     margin-bottom: 12px;
 
     span {
@@ -103,5 +105,17 @@
     line-height: 19px;
     letter-spacing: 0.05em;
     color: var(--white);
+    cursor: pointer;
+  }
+
+  &__success {
+    position: absolute;
+    transform: translateY(100%);
+    bottom: -12.56px;
+    left: 0;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: var(--green-100);
   }
 }

react-project/src/assets/styles/modules/Main.module.scss

@@ -8,6 +8,10 @@
     align-items: center;
     gap: 9.72px;
 
+    a {
+      display: contents;
+    }
+
     figure {
       display: contents;
     }

react-project/src/assets/styles/modules/Newsletter.module.scss

@@ -51,17 +51,28 @@
         font-weight: 700;
         font-size: 12px;
         line-height: 14px;
+        cursor: pointer;
       }
+    }
 
-      span {
-        position: absolute;
-        left: 0px;
-        top: 42px;
-        font-weight: 400;
-        font-size: 10px;
-        line-height: 12px;
-        color: var(--red-100);
-      }
+    .invalid {
+      position: absolute;
+      left: 0px;
+      top: 42px;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      color: var(--red-100);
+    }
+
+    .success {
+      position: absolute;
+      left: 100px;
+      top: 42px;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      color: var(--green-100);
     }
   }
 }

react-project/src/assets/styles/variables.scss

@@ -14,4 +14,6 @@
   --gray-400: #b9b7b7;
 
   --red-100: #ff0000;
+
+  --green-100: #008000;
 }

react-project/src/components/Contato.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import FormSchema from "../schema/FormSchema";
-import { render } from "react-dom";
+
 import MaskedInput from "react-text-mask";
 
 import contato from "../assets/styles/modules/Contato.module.scss";
@@ -14,6 +13,7 @@ interface IFormikValues {
   telefone: string;
   instagram: string;
   terms: boolean;
+  /*sent: boolean;*/
 }
 
 //setar valores iniciais
@@ -25,6 +25,7 @@ const initialValues = {
   telefone: "",
   instagram: "",
   terms: false,
+  /*sent: false,*/
 };
 
 const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
@@ -69,15 +70,26 @@ const insta = ["@"];
 const Contato = () => {
   /*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
 
+  /*const teste = (values: IFormikValues) => {
+    if (values.sent) {
+      const h2Tag = document.querySelector("#enviado") as HTMLSpanElement;
+      h2Tag.innerHTML = "TESTE";
+      alert("TESTANDO TESTE");
+    }
+  };*/
+
   return (
     <div className={contato["forms"]}>
       <h2>Preencha o formulário</h2>
 
       <Formik
         onSubmit={(values: IFormikValues, actions) => {
+          /*values.sent = true;*/
           console.log(values);
           actions.resetForm();
-          alert("formulario enviado");
+          /*alert("formulario enviado");*/
+          const sent = document.querySelector("#sent") as HTMLSpanElement;
+          sent.innerHTML = "*Formulário enviado com sucesso!";
         }}
         initialValues={initialValues}
         validationSchema={FormSchema}
@@ -218,6 +230,7 @@ const Contato = () => {
             </div>
 
             <button type="submit">CADASTRE-SE</button>
+            <span id="sent" className={contato["forms__success"]}></span>
           </Form>
         )}
       </Formik>

react-project/src/components/Main.tsx

@@ -19,11 +19,14 @@ const Main = () => {
   return (
     <div className={main["main"]}>
       <div className={main["main__breadcrumb"]}>
+        <a href="/">
+          <figure>
+            <img src={iconHome} alt="Icone Home" />
+          </figure>
+        </a>
+
         <figure>
-          <img src={iconHome} />
-        </figure>
-        <figure>
-          <img src={iconArrow} />
+          <img src={iconArrow} alt="Icone Flecha para direita" />
         </figure>
         <span>INSTITUCIONAL</span>
       </div>

react-project/src/components/Newsletter.tsx

@@ -24,22 +24,24 @@ const Newsletter = () => {
         <Formik
           onSubmit={(values: IEmailType, actions) => {
             actions.resetForm();
+            const sent = document.querySelector(
+              "#emailsent"
+            ) as HTMLSpanElement;
+            sent.innerHTML = "Email cadastrado com sucesso!";
           }}
           initialValues={{ email: "" }}
           validationSchema={NewsletterSchema}
         >
-          {({ errors, touched }) => (
-            <Form>
-              <Field
-                placeholder="E-mail"
-                id="email"
-                name="email"
-                className={errors.email && touched.email && "invalid"}
-              />
-              <ErrorMessage component="span" name="email" />
-              <button type="submit">ENVIAR</button>
-            </Form>
-          )}
+          <Form>
+            <Field placeholder="E-mail" id="email" name="email" />
+            <ErrorMessage
+              component="span"
+              name="email"
+              className={newsletter["invalid"]}
+            />
+            <button type="submit">ENVIAR</button>
+            <span id="emailsent" className={newsletter["success"]}></span>
+          </Form>
         </Formik>
       </div>
     </div>