Merge pull request 'development' (#28) from development into main

Reviewed-on: #28

src/components/FooterTop/styles.module.scss

@@ -114,14 +114,6 @@
         text-transform: none;
       }
     }
-
-    &__socialMedia {
-      height: 35px;
-
-      .socialMeida-site {
-        display: none;
-      }
-    }
   }
 
   @media (min-width: 2500px) {

src/components/Main/Contact/index.tsx

@@ -77,6 +77,7 @@ const Contact = () => {
   const handleFormikSubmit = (values: FormikValues, { resetForm }: any) => {
     resetForm({ values: "" });
     setSuccessMessage(true);
+    setTimeout(() => setSuccessMessage(false), 3000);
   };
 
   return (
@@ -110,10 +111,8 @@ const Contact = () => {
             </div>
             <div className={styles["form__input"]}>
               <label htmlFor="cpf">CPF</label>
-              <Field
-                id="cpf"
-                name="cpf"
-                render={({ field }: any) => (
+              <Field id="cpf" name="cpf">
+                {({ field }: any) => (
                   <MaskedInput
                     {...field}
                     mask={cpfNumberMask}
@@ -122,7 +121,7 @@ const Contact = () => {
                     type="text"
                   />
                 )}
-              />
+              </Field>
               <ErrorMessage
                 component="span"
                 name="cpf"
@@ -131,10 +130,8 @@ const Contact = () => {
             </div>
             <div className={styles["form__input"]}>
               <label htmlFor="birthDate">Data de Nascimento:</label>
-              <Field
-                id="birthDate"
-                name="birthDate"
-                render={({ field }: any) => (
+              <Field id="birthDate" name="birthDate">
+                {({ field }: any) => (
                   <MaskedInput
                     {...field}
                     mask={bhirtDateMask}
@@ -143,7 +140,7 @@ const Contact = () => {
                     type="text"
                   />
                 )}
-              />
+              </Field>
               <ErrorMessage
                 component="span"
                 name="birthDate"
@@ -152,10 +149,8 @@ const Contact = () => {
             </div>
             <div className={styles["form__input"]}>
               <label htmlFor="phone">Telefone:</label>
-              <Field
-                id="phone"
-                name="phone"
-                render={({ field }: any) => (
+              <Field id="phone" name="phone">
+                {({ field }: any) => (
                   <MaskedInput
                     {...field}
                     mask={phoneNumberMask}
@@ -164,7 +159,7 @@ const Contact = () => {
                     type="text"
                   />
                 )}
-              />
+              </Field>
               <ErrorMessage
                 component="span"
                 name="phone"

src/components/NewsLetter/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./styles.module.scss";
-import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
-import FormSchema from "../../schema/FormSchema";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import NewsletterSchema from "../../schema/NewsLetterSchema";
 
 interface FormikValues {
   newsLetter: string;
@@ -12,8 +12,9 @@ const initialValues = {
 };
 
 const NewsLetter = () => {
-  const handleFormikSubmit = (values: FormikValues) => {
+  const handleNewsletterSubmit = (values: FormikValues, { resetForm }: any) => {
     console.log(values);
+    resetForm({ values: "" });
   };
 
   return (
@@ -22,9 +23,9 @@ const NewsLetter = () => {
         <h1>Assine nossa Newsletter</h1>
       </div>
       <Formik
-        onSubmit={handleFormikSubmit}
+        onSubmit={handleNewsletterSubmit}
         initialValues={initialValues}
-        validationSchema={FormSchema}
+        validationSchema={NewsletterSchema}
       >
         <Form className={styles["newsLetter__container"]}>
           <Field
@@ -34,7 +35,7 @@ const NewsLetter = () => {
             placeholder="E-mail"
           />
           <ErrorMessage component="span" name="newsLetter" />
-          <button className={styles["newsLetter__button"]} type="submit">
+          <button type="submit" className={styles["newsLetter__button"]}>
             Enviar
           </button>
         </Form>

src/components/NewsLetter/styles.module.scss

@@ -7,7 +7,6 @@
   border-color: var(--black-500);
   width: 100%;
   padding: 16px 0;
-  position: relative;
 
   &__title {
     width: 37.09%;
@@ -32,6 +31,7 @@
     height: 42px;
     width: 37.09%;
     max-width: 474.75px;
+    position: relative;
 
     span {
       font-style: normal;
@@ -40,8 +40,8 @@
       line-height: 14px;
       color: var(--red-500);
       position: absolute;
-      top: 31%;
-      right: 43%;
+      top: -30%;
+      left: 55%;
     }
   }
 
@@ -101,6 +101,11 @@
       width: 100%;
       max-width: 100%;
       flex-direction: column;
+
+      span {
+        top: 43%;
+        left: 0%;
+      }
     }
 
     &__input {
@@ -130,6 +135,13 @@
       width: 36.88%;
       max-width: 922px;
       height: 59px;
+
+      span {
+        font-size: 24px;
+        line-height: 28px;
+        top: -42%;
+        left: 56%;
+      }
     }
 
     &__input {

src/schema/FormSchema.ts

@@ -1,7 +1,9 @@
 import * as Yup from "yup";
 
 export default Yup.object().shape({
-  name: Yup.string().required("*Campo Obrigatório"),
+  name: Yup.string()
+    .min(3, "Mínimo de 03 caracteres")
+    .required("*Campo Obrigatório"),
   email: Yup.string().required("*Campo Obrigatório").email("e-Mail inválido"),
   cpf: Yup.string()
     .matches(/^\d{3}.\d{3}.\d{3}-\d{2}$/, "CPF inválido")

src/schema/NewsLetterSchema.ts

@@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  newsLetter: Yup.string().required("").email("e-Mail inválido"),
+});