Merge pull request 'fix: correção validação newsletter' (#19) from bugfix/newsletter into main

Reviewed-on: #19

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;

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>
     )
 }
 

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"]}>

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"),
+
+});