feat(main): add mensagem Formulário enviado com sucesso! após envio do formulário e trocando o tipo do arquivo Contato, de jsx para tsx

src/components/Main/Contato/Contato.tsx

@@ -1,28 +1,52 @@
 import { Formik, Field, Form, ErrorMessage } from "formik";
 import schema from "../schema";
 import styles from "../Main.module.scss";
+import { useState } from "react";
+
+interface FormArea {
+  name: string;
+  email: string;
+  cpf: string;
+  birthDate: string;
+  phone: string;
+  instagram: string;
+  checkbox: boolean;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  birthDate: "",
+  phone: "",
+  instagram: "",
+  checkbox: false,
+};
 
 const Contato = () => {
-  function onSubmit(_values, { resetForm }) {
-    resetForm({ values: "" });
-    
-  }
+  const [isValidate, setIsValidate] = useState(false);
 
   return (
     <div className={styles["Contato"]}>
       <h2>Preencha o formulário</h2>
       <Formik
         validationSchema={schema}
-        onSubmit={onSubmit}
-        validateOnMount
-        initialValues={{
-          name: "",
-          email: "",
-          phone: "",
-          cpf: "",
-          birthDate: "",
-          instagram: "",
+        onSubmit={(values: FormArea, actions) => {
+          actions.resetForm();
+          console.log(values);
+          if (
+            values.checkbox === true &&
+            values.cpf !== "" &&
+            values.email !== "" &&
+            values.name !== "" &&
+            values.phone !== "" &&
+            values.birthDate !== ""
+          ) {
+            setIsValidate(true);
+            console.log(isValidate);
+          }
         }}
+        initialValues={initialValues}
       >
         {() => (
           <Form>
@@ -77,8 +101,19 @@ const Contato = () => {
                 </span>
                 <Field name="instagram" type="text" placeholder="@seuuser" />
               </div>
-              <div className={styles["Confirm__Camp"]}><span className={styles["Confirm__Camp__Asterisk"]}>*</span><span className={styles["Confirm__Camp__Text"]}>Declaro que li e aceito<input type="checkbox"/></span></div>
+              <div className={styles["Confirm__Camp"]}>
+                <span className={styles["Confirm__Camp__Asterisk"]}>*</span>
+                <span className={styles["Confirm__Camp__Text"]}>
+                  Declaro que li e aceito
+                  <Field type="checkbox" name="checkbox" />
+                </span>
+              </div>
               <button type="submit">CADASTRE-SE</button>
+              {isValidate && (
+                <span className={styles["FormContent__Field__Success"]}>
+                  *Formulário enviado com sucesso!
+                </span>
+              )}
             </div>
           </Form>
         )}

src/components/Main/Main.module.scss

@@ -272,11 +272,23 @@ main {
                         line-height: 28px;
                         transform: translateY(18px);
                     }
-                    @media (max-width: 2500px) and (min-width: 1281px){
+                    @media (max-width: 2500px) and (min-width: 1281px) {
                         right: calc(100% - 91%);
                     }
                     @media (max-width: 1025px) {
-                       right: 30px;
+                        right: 30px;
+                    }
+                }
+                &__Success {
+                    font-family: "Roboto";
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 14px;
+                    color: #008000;
+                    @media (min-width: 2500px) {
+                        font-size: 24px;
+                        line-height: 28px;
                     }
                 }
             }

src/components/Main/schema.tsx

@@ -16,7 +16,7 @@ const birthDate = /\d{2}.\d{2}.\d{4}/;
 
 export default Yup.object().shape({
   name: Yup.string()
-    .matches(/^[a-z]+$/, "Nome Inválido")
+    .matches(/^[a-zA-ZáàâãéèêíïóôõöúçñÁÀÂÃÉÈÊÍÏÓÒÖÚÇÑ ]+$/, "Nome Inválido")
     .min(3, "O Nome Deve Ter Pelo Menos 3 Letras")
     .required("*Campo Obrigatório"),
   email: Yup.string()
@@ -31,4 +31,5 @@ export default Yup.object().shape({
     .required("*Campo Obrigatório"),
   cpf: Yup.string().matches(cpf, "Cpf Inválido").required("*Campo Obrigatório"),
   instagram: Yup.string().matches(instagram, "Nome de Usuário Inválido"),
+  checkbox: Yup.boolean().oneOf([true], "*"),
 });