From 182767571202098f7376fe095c57c55a4cdf043f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Wed, 4 Jan 2023 21:22:56 -0300
Subject: [PATCH] feat: Adiciona feedback de submit do form

---
 .../assets/styles/modules/Contato.module.scss | 14 +++++++++
 .../assets/styles/modules/Main.module.scss    |  4 +++
 .../styles/modules/Newsletter.module.scss     | 29 +++++++++++++------
 .../src/assets/styles/variables.scss          |  2 ++
 react-project/src/components/Contato.tsx      | 19 ++++++++++--
 react-project/src/components/Main.tsx         | 11 ++++---
 react-project/src/components/Newsletter.tsx   | 26 +++++++++--------
 7 files changed, 77 insertions(+), 28 deletions(-)

diff --git a/react-project/src/assets/styles/modules/Contato.module.scss b/react-project/src/assets/styles/modules/Contato.module.scss
index 7b77631..395ab9e 100644
--- a/react-project/src/assets/styles/modules/Contato.module.scss
+++ b/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);
   }
 }
diff --git a/react-project/src/assets/styles/modules/Main.module.scss b/react-project/src/assets/styles/modules/Main.module.scss
index 10d1883..5b1f8e1 100644
--- a/react-project/src/assets/styles/modules/Main.module.scss
+++ b/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;
     }
diff --git a/react-project/src/assets/styles/modules/Newsletter.module.scss b/react-project/src/assets/styles/modules/Newsletter.module.scss
index 84ed949..3d2574f 100644
--- a/react-project/src/assets/styles/modules/Newsletter.module.scss
+++ b/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);
     }
   }
 }
diff --git a/react-project/src/assets/styles/variables.scss b/react-project/src/assets/styles/variables.scss
index b84e57e..b14bee3 100644
--- a/react-project/src/assets/styles/variables.scss
+++ b/react-project/src/assets/styles/variables.scss
@@ -14,4 +14,6 @@
   --gray-400: #b9b7b7;
 
   --red-100: #ff0000;
+
+  --green-100: #008000;
 }
diff --git a/react-project/src/components/Contato.tsx b/react-project/src/components/Contato.tsx
index 324b719..b9ded7c 100644
--- a/react-project/src/components/Contato.tsx
+++ b/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>
diff --git a/react-project/src/components/Main.tsx b/react-project/src/components/Main.tsx
index 4d894e9..0704091 100644
--- a/react-project/src/components/Main.tsx
+++ b/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>
diff --git a/react-project/src/components/Newsletter.tsx b/react-project/src/components/Newsletter.tsx
index 97c740c..75a9a5b 100644
--- a/react-project/src/components/Newsletter.tsx
+++ b/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>