From 3ce9d730a1998ef89e368c1d89f5160937f4d073 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Mon, 9 Jan 2023 13:58:54 -0300
Subject: [PATCH] =?UTF-8?q?feat(main):=20add=20mensagem=20Formul=C3=A1rio?=
 =?UTF-8?q?=20enviado=20com=20sucesso!=20ap=C3=B3s=20envio=20do=20formul?=
 =?UTF-8?q?=C3=A1rio=20e=20trocando=20o=20tipo=20do=20arquivo=20Contato,?=
 =?UTF-8?q?=20de=20jsx=20para=20tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/Contato/{Contato.jsx => Contato.tsx} | 63 ++++++++++++++-----
 src/components/Main/Main.module.scss          | 16 ++++-
 src/components/Main/schema.tsx                |  3 +-
 3 files changed, 65 insertions(+), 17 deletions(-)
 rename src/components/Main/Contato/{Contato.jsx => Contato.tsx} (66%)

diff --git a/src/components/Main/Contato/Contato.jsx b/src/components/Main/Contato/Contato.tsx
similarity index 66%
rename from src/components/Main/Contato/Contato.jsx
rename to src/components/Main/Contato/Contato.tsx
index e9aaa86..e7aba35 100644
--- a/src/components/Main/Contato/Contato.jsx
+++ b/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>
         )}
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
index 71af01f..d4312d9 100644
--- a/src/components/Main/Main.module.scss
+++ b/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;
                     }
                 }
             }
diff --git a/src/components/Main/schema.tsx b/src/components/Main/schema.tsx
index 3b0cfbe..89efef1 100644
--- a/src/components/Main/schema.tsx
+++ b/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], "*"),
 });