From 0aa8b6571aed4cd2e3a53c21bca1f9794ef79806 Mon Sep 17 00:00:00 2001
From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com>
Date: Sat, 14 Jan 2023 13:36:19 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20corre=C3=A7=C3=A3o=20valida=C3=A7=C3=A3o?=
 =?UTF-8?q?=20newsletter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Footer/Newsletter/Newsletter.module.scss  | 18 +++++++
 .../Footer/Newsletter/Newsletter.tsx          | 53 ++++++++++++++-----
 .../Institucional/ContatoForm/ContatoForm.tsx |  2 +-
 src/schema/FormSchemaNewsletter.ts            |  7 +++
 4 files changed, 67 insertions(+), 13 deletions(-)
 create mode 100644 src/schema/FormSchemaNewsletter.ts

diff --git a/src/components/Footer/Newsletter/Newsletter.module.scss b/src/components/Footer/Newsletter/Newsletter.module.scss
index e47cb1b..21855be 100644
--- a/src/components/Footer/Newsletter/Newsletter.module.scss
+++ b/src/components/Footer/Newsletter/Newsletter.module.scss
@@ -47,6 +47,7 @@
       align-items: flex-end;
       height: 42px;
       margin-top: 8px;
+      position: relative;
 
       @media (max-width: 1024px) {
         display: block;
@@ -56,6 +57,23 @@
       @media (min-width: 2500px) {
         height: 59px;
       }
+
+      .validation-text {
+        font-family: var(--font-roboto);
+        color: var(--red-100);
+        position: absolute;
+        top: 41px;
+        font-size: 12px;
+
+        @media (max-width: 1024px) {
+          top: 50px;
+        }
+        @media (min-width: 2500px) {
+          top: 58px;
+          font-size: 16px;
+        }
+      }
+
       input {
         width: 340px;
         height: 42px;
diff --git a/src/components/Footer/Newsletter/Newsletter.tsx b/src/components/Footer/Newsletter/Newsletter.tsx
index 4189a5c..e10e656 100644
--- a/src/components/Footer/Newsletter/Newsletter.tsx
+++ b/src/components/Footer/Newsletter/Newsletter.tsx
@@ -1,21 +1,50 @@
 import React from "react"
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import FormSchema from "../../../schema/FormSchemaNewsletter"
 import styleNewsletter from "./Newsletter.module.scss"
 
+
+export interface formValues {
+    email: string;
+}
+
+const initialValues: formValues = {
+    email: "",
+}
 const Newsletter = () => {
+
+    const handleOnSubmit = (values: formValues, { resetForm }: any) => {
+        resetForm({ values: '' });
+    }
     return (
-        <section className={styleNewsletter["container"]}>
-            <div className={styleNewsletter["container__wrapper"]}>
-                <p>ASSINE NOSSA NEWSLETTER</p>
-                <form>
-                    <div className={styleNewsletter["container__wrapper__input-button"]}>
-                        <input type="email" placeholder="E-mail" />
-                        <button type="submit" aria-label="Enviar e-mail">
-                            ENVIAR
-                        </button>
+        <Formik
+            onSubmit={handleOnSubmit}
+            initialValues={initialValues}
+            validationSchema={FormSchema}
+        >
+            {({ errors, touched }) => (
+
+                <section className={styleNewsletter["container"]}>
+                    <div className={styleNewsletter["container__wrapper"]}>
+                        <p>ASSINE NOSSA NEWSLETTER</p>
+
+                        <Form>
+                            <div className={styleNewsletter["container__wrapper__input-button"]}>
+                                <ErrorMessage component="span" className={styleNewsletter["validation-text"]} name="email" />
+                                <Field type="email"
+                                    id="email"
+                                    name="email"
+                                    placeholder="E-mail"
+                                    className={errors.email && touched.email ? "validation-text" : null} />
+                                <button type="submit" aria-label="Enviar e-mail">
+                                    ENVIAR
+                                </button>
+                            </div>
+                        </Form>
                     </div>
-                </form>
-            </div>
-        </section>
+                </section>
+            )}
+        </Formik>
     )
 }
 
diff --git a/src/components/Main/Institucional/ContatoForm/ContatoForm.tsx b/src/components/Main/Institucional/ContatoForm/ContatoForm.tsx
index 588c879..35e920a 100644
--- a/src/components/Main/Institucional/ContatoForm/ContatoForm.tsx
+++ b/src/components/Main/Institucional/ContatoForm/ContatoForm.tsx
@@ -63,12 +63,12 @@ const ContatoForm = () => {
 
                     <div className={StyleForm["form-field"]}>
                         <label htmlFor="email">E-mail</label>
-                        <ErrorMessage component="span" className={StyleForm["validation-text"]} name="email" />
                         <Field type="email"
                             id="email"
                             name="email"
                             placeholder="Seu e-mail"
                             className={errors.email && touched.email ? "validation-text" : null} />
+                        <ErrorMessage component="span" className={StyleForm["validation-text"]} name="email" />
                     </div>
 
                     <div className={StyleForm["form-field"]}>
diff --git a/src/schema/FormSchemaNewsletter.ts b/src/schema/FormSchemaNewsletter.ts
new file mode 100644
index 0000000..d1c5335
--- /dev/null
+++ b/src/schema/FormSchemaNewsletter.ts
@@ -0,0 +1,7 @@
+import * as Yup from "yup"
+
+
+export default Yup.object().shape({
+    email: Yup.string().email("E-mail Inválido").required("E-mail Inválido"),
+
+});
\ No newline at end of file