feat: Cria validação do campo de email da newsletter

src/components/Header/HeaderTop.tsx

@@ -7,6 +7,7 @@ import SearchBar from "../SearchBar";
 
 const initialValue = {
     search: "",
+    email: "",
 };
 
 const HeaderTop = ({ isOpened, setIsOpened }: PageContextData) => {
@@ -32,6 +33,7 @@ const HeaderTop = ({ isOpened, setIsOpened }: PageContextData) => {
                 placeholder="Buscar..."
                 parentClassName="header-search-form"
                 initialValues={initialValue}
+                type="search"
             />
 
             <div className={styles["header-login-area"]}>

src/components/Main/Newsletter.tsx

@@ -3,6 +3,7 @@ import SearchBar from "../SearchBar";
 
 const initialValue = {
     search: "",
+    email: "",
 };
 
 const Newsletter = () => {
@@ -14,6 +15,7 @@ const Newsletter = () => {
                     placeholder="E-mail"
                     parentClassName="newsletter-form"
                     initialValues={initialValue}
+                    type="email"
                     buttonText="ENVIAR"
                 />
             </div>

src/components/SearchBar.tsx

@@ -1,12 +1,15 @@
 import styles from "../styles/main.module.scss";
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, FormikHelpers, ErrorMessage } from "formik";
+import SearchBarFormSchema from "../schema/SearchBarFormSchema";
 
 interface SearchBarProps {
     search: string;
+    email: string;
 }
 
 interface SearchFormProps {
     placeholder: string;
+    type: string;
     parentClassName: string;
     buttonText?: string;
     initialValues: Object & SearchBarProps;
@@ -17,21 +20,33 @@ const SearchBar = ({
     parentClassName,
     buttonText,
     initialValues,
+    type,
 }: SearchFormProps) => {
     if (!buttonText) buttonText = "";
 
-    const handleFormSubmit = (values: SearchBarProps) => {
-        console.log(values);
+    const handleFormSubmit = (values: SearchBarProps, actions: FormikHelpers<SearchBarProps>) => {
+        console.log(values, actions);
+        actions.resetForm();
     };
 
     return (
-        <Formik onSubmit={handleFormSubmit} initialValues={initialValues}>
+        <Formik
+            onSubmit={handleFormSubmit}
+            initialValues={initialValues}
+            validationSchema={SearchBarFormSchema}
+        >
             <Form className={styles[parentClassName]}>
                 <Field
                     className={styles[parentClassName + "__search-box"]}
-                    name="search"
+                    name={type}
+                    id={type}
                     placeholder={placeholder}
                 />
+                <ErrorMessage
+                    component="span"
+                    className={styles[parentClassName + "__error-message"]}
+                    name={type}
+                />
                 <button className={styles[parentClassName + "__search-button"]} type="submit">
                     {buttonText}
                 </button>

src/schema/SearchBarFormSchema.ts

@@ -0,0 +1,6 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+    search: Yup.string().required(),
+    email: Yup.string().required("*Campo obrigatório").email("*Email inválido"),
+});

src/styles/partials/header.scss

@@ -10,7 +10,7 @@
         border-bottom: 1px solid #c4c4c4;
 
         @include mq(lg, max) {
-            padding: 25px 22px;
+            padding: 25px 16px;
             border: none;
             display: grid;
             grid-template-rows: repeat(2, 1fr);
@@ -51,6 +51,10 @@
                 grid-area: 2 / 1 / 2 / 4;
             }
 
+            &__error-message {
+                display: none;
+            }
+
             &__search-box {
                 font-weight: 400;
                 font-size: 14px;

src/styles/partials/newsletter.scss

@@ -9,6 +9,7 @@
     }
 
     &__wrapper {
+        position: relative;
         width: 37%;
         margin: auto;
         display: flex;
@@ -45,6 +46,21 @@
             flex-direction: column;
         }
 
+        &__error-message {
+            position: absolute;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            color: #ff0000;
+            top: 0;
+            right: 0;
+
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+
         &__search-box {
             background: #ffffff;
             border: 1px solid #e5e5e5;