From 1f38486a6b865827611a1c1f6f9f1a74541f16b9 Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Thu, 19 Jan 2023 14:39:23 -0300
Subject: [PATCH] fix(required-mensage): Concerta mensagens de campo vazio e
 aplica estilo

---
 src/components/main/components/MainForm.tsx   | 33 ++++++++++++-------
 .../main/components/main-form.module.scss     | 21 ++++++++++++
 src/components/newsletter.module.scss         |  2 +-
 src/schema/FormMainSchema.ts                  |  8 ++---
 4 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/src/components/main/components/MainForm.tsx b/src/components/main/components/MainForm.tsx
index 544b024..08af358 100644
--- a/src/components/main/components/MainForm.tsx
+++ b/src/components/main/components/MainForm.tsx
@@ -8,7 +8,7 @@ interface IFormMain {
   name: string;
   email: string;
   cpf: string;
-  datee: string;
+  nowDate: string;
   tel: string;
   inst: string;
   check: boolean;
@@ -18,7 +18,7 @@ const initialValues = {
   name: "",
   email: "",
   cpf: "",
-  datee: "",
+  nowDate: "",
   tel: "",
   inst: "",
   check: false,
@@ -43,7 +43,7 @@ const MainForm = () => {
               <ErrorMessage
                 component="span"
                 name="name"
-                className={errors.name && touched ? "form-feedback" : ""}
+                className={errors.name && touched ? style["form-feedback"] : ""}
               />
             </div>
             <div className={style["main-form-item-wrapper"]}>
@@ -52,7 +52,9 @@ const MainForm = () => {
               <ErrorMessage
                 component="span"
                 name="email"
-                className={errors.email && touched ? "form-feedback" : ""}
+                className={
+                  errors.email && touched ? style["form-feedback"] : ""
+                }
               />
             </div>
             <div className={style["main-form-item-wrapper"]}>
@@ -61,16 +63,23 @@ const MainForm = () => {
               <ErrorMessage
                 component="span"
                 name="cpf"
-                className={errors.cpf && touched ? "form-feedback" : ""}
+                className={errors.cpf && touched ? style["form-feedback"] : ""}
               />
             </div>
             <div className={style["main-form-item-wrapper"]}>
-              <label htmlFor="datee">Data de Nascimento:</label>
-              <Field id="datee" name="datee" placeholder="00.00.0000" />
+              <label htmlFor="nowDate">Data de Nascimento:</label>
+              <Field
+                type="date"
+                id="nowDate"
+                name="nowDate"
+                placeholder="00.00.0000"
+              />
               <ErrorMessage
                 component="span"
                 name="date"
-                className={errors.datee && touched ? "form-feedback" : ""}
+                className={
+                  errors.nowDate && touched ? style["form-feedback"] : ""
+                }
               />
             </div>
             <div className={style["main-form-item-wrapper"]}>
@@ -79,7 +88,7 @@ const MainForm = () => {
               <ErrorMessage
                 component="span"
                 name="tel"
-                className={errors.tel && touched ? "form-feedback" : ""}
+                className={errors.tel && touched ? style["form-feedback"] : ""}
               />
             </div>
             <div className={style["main-form-item-wrapper"]}>
@@ -88,7 +97,7 @@ const MainForm = () => {
               <ErrorMessage
                 component="span"
                 name="inst"
-                className={errors.inst && touched ? "form-feedback" : ""}
+                className={errors.inst && touched ? style["form-feedback"] : ""}
               />
             </div>
 
@@ -102,7 +111,9 @@ const MainForm = () => {
                 <ErrorMessage
                   component="span"
                   name="check"
-                  className={errors.check && touched ? "form-feedback" : ""}
+                  className={
+                    errors.check && touched ? style["form-feedback"] : ""
+                  }
                 />
               </label>
             </div>
diff --git a/src/components/main/components/main-form.module.scss b/src/components/main/components/main-form.module.scss
index f75c72c..6cbbd44 100644
--- a/src/components/main/components/main-form.module.scss
+++ b/src/components/main/components/main-form.module.scss
@@ -13,6 +13,7 @@
     .main-form-item-wrapper {
       display: flex;
       flex-direction: column;
+      position: relative;
 
       label {
         font-weight: 400;
@@ -31,6 +32,16 @@
 
         margin-bottom: 12px;
       }
+
+      .form-feedback {
+        position: absolute;
+        right: 20px;
+        bottom: 60px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: variables.$color-red;
+      }
     }
 
     .main-form-checkbox {
@@ -58,6 +69,16 @@
         color: variables.$color-black4;
         text-decoration: underline;
       }
+
+      .form-feedback {
+        position: absolute;
+        // right: 100px;
+        // bottom: 0px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: variables.$color-red;
+      }
     }
 
     .main-form-button {
diff --git a/src/components/newsletter.module.scss b/src/components/newsletter.module.scss
index d0e07ea..a269bc5 100644
--- a/src/components/newsletter.module.scss
+++ b/src/components/newsletter.module.scss
@@ -78,7 +78,7 @@
 
         .form-feedback {
           position: absolute;
-          right: 0;
+          right: -30px;
           bottom: 45px;
           font-weight: 400;
           font-size: 12px;
diff --git a/src/schema/FormMainSchema.ts b/src/schema/FormMainSchema.ts
index c2853a1..45861f8 100644
--- a/src/schema/FormMainSchema.ts
+++ b/src/schema/FormMainSchema.ts
@@ -24,12 +24,12 @@ export default Yup.object().shape({
   cpf: Yup.string()
     .min(11, getFormatedCPF("111.111.111-11"))
     .required("*Campo Obrigatório"),
-  datee: Yup.date()
-    .min(getFormatedDate("01/01/1900"))
+  nowDate: Yup.date()
+    .max(8, getFormatedDate(new Date().toLocaleDateString()))
     .required("*Campo Obrigatório"),
   tel: Yup.string()
-    .min(11, getFormatedTel("(22)99999-9999"))
-    .required("*Campo Obrigatório"),
+    .required("*Campo Obrigatório")
+    .min(11, getFormatedTel("(22)99999-9999")),
   inst: Yup.string().min(3, getFormatedInst("@seuuser")).notRequired(),
   check: Yup.boolean()
     .oneOf([true], "Você deve aceitar os termos!")