From 84b84d260d0823494c46fe467547224715bedac7 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Wed, 18 Jan 2023 21:17:16 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20criado=20valida=C3=A7=C3=A3o=20e=20esti?= =?UTF-8?q?liza=C3=A7=C3=A3o=20do=20form.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../section/ContentInstitucional.tsx | 31 ++++ .../section/FormContato.module.scss | 101 +++++++++++ src/components/section/FormContato.tsx | 159 ++++++++++++++++++ src/components/section/FormSchema.tsx | 22 +++ src/components/section/NavInstitucional.tsx | 46 +++++ src/components/section/Router.tsx | 6 +- 6 files changed, 362 insertions(+), 3 deletions(-) create mode 100644 src/components/section/ContentInstitucional.tsx create mode 100644 src/components/section/FormContato.module.scss create mode 100644 src/components/section/FormContato.tsx create mode 100644 src/components/section/FormSchema.tsx create mode 100644 src/components/section/NavInstitucional.tsx diff --git a/src/components/section/ContentInstitucional.tsx b/src/components/section/ContentInstitucional.tsx new file mode 100644 index 0000000..605109a --- /dev/null +++ b/src/components/section/ContentInstitucional.tsx @@ -0,0 +1,31 @@ +// Bibliotecas +import React from "react"; +import { Routes, Route } from "react-router-dom"; + +// Estilos +import styleContentInstitucional from "./ContentInstitucional.module.scss"; + +import { ContentPagamento } from "./ContentPagamento"; +import { ContentEntrega } from "./ContentEntrega"; +import { ContentTroca } from "./ContentTroca"; +import { ContentSeguranca } from "./ContentSeguranca"; +import { ContentContato } from "./ContentContato"; +import { ContentSobre } from "./ContentSobre"; + +const ContentInstitucional = () => { + return ( +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ ); +}; + +export { ContentInstitucional }; diff --git a/src/components/section/FormContato.module.scss b/src/components/section/FormContato.module.scss new file mode 100644 index 0000000..86bc6fc --- /dev/null +++ b/src/components/section/FormContato.module.scss @@ -0,0 +1,101 @@ +@import "../../styles/utils/variables.scss"; + +.contentContato { + width: 100%; + + h2 { + font-size: 24px; + font-weight: 700; + line-height: 28px; + margin: 12px 0; + + @media (max-width: 1024px) { + text-align: center; + margin-top: 30px; + } + } + + form { + .infosForm { + flex-direction: column; + position: relative; + + label { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: $black; + } + + .formInvalid { + font-size: 12px; + position: absolute; + right: 15px; + color: $primary-900; + } + + input { + min-width: 100%; + height: 46px; + border-radius: 25px; + padding: 15px 20px; + margin: 12px 0; + outline: none; + border: 1px solid #100d0e; + + &::placeholder { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: #b9b7b7; + } + } + } + + .checkboxForm { + display: grid; + grid-template-columns: repeat(3, min-content); + justify-content: center; + margin-bottom: 12px; + + .formInvalid-checkbox { + font-size: 16px; + color: $primary-900; + grid-row: 1; + + @media (max-width: 620px) { + bottom: 25px; + } + } + + label { + margin: 0 4px; + text-decoration: underline; + color: #100d0e; + font-size: 14px; + font-weight: 400; + line-height: 16px; + width: 137px; + } + + input { + width: 18px; + } + } + + button { + width: 100%; + height: 52px; + border-radius: 25px; + background-color: $black; + color: $white; + font-size: 16px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + outline: none; + border: none; + } + } +} diff --git a/src/components/section/FormContato.tsx b/src/components/section/FormContato.tsx new file mode 100644 index 0000000..3d36614 --- /dev/null +++ b/src/components/section/FormContato.tsx @@ -0,0 +1,159 @@ +// Bibliotecas +import React from "react"; +import { Formik, Form, Field, ErrorMessage } from "formik"; + +// Componentes +import FormSchema from "./FormSchema"; + +// Estilos +import styleFormContato from "./FormContato.module.scss"; + +const FormContato = () => { + interface FormikValues { + nome: string; + email: string; + cpf: string; + nascimento: string; + telefone: string; + instagram: string; + termos: boolean; + } + + const initialValues = { + nome: "", + email: "", + cpf: "", + nascimento: "", + telefone: "", + instagram: "", + termos: false, + }; + + return ( +
+ { + actions.resetForm(); + console.log(values); + }} + initialValues={initialValues} + validationSchema={FormSchema} + > + {({ errors, touched }) => ( +
+

Preencha o formulário

+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+ )} + +
+ ); +}; + +export { FormContato }; diff --git a/src/components/section/FormSchema.tsx b/src/components/section/FormSchema.tsx new file mode 100644 index 0000000..168bb60 --- /dev/null +++ b/src/components/section/FormSchema.tsx @@ -0,0 +1,22 @@ +// Bibliotecas +import * as Yup from "yup"; + +export default Yup.object().shape({ + nome: Yup.string() + .required("*Campo Obrigatório.") + .min(3, "Insira seu nome completo."), + email: Yup.string().required("*Campo Obrigatório.").email("Email inválido."), + cpf: Yup.string() + .required("*Campo Obrigatório.") + .min(11, "CPF inválido.") + .max(11, "CPF inválido."), + nascimento: Yup.string() + .required("*Campo Obrigatório.") + .min(8, "Data de nascimento inválido.") + .max(8, "Data de nascimento inválido."), + telefone: Yup.string() + .required("*Campo Obrigatório.") + .min(11, "Telefone inválido.") + .max(11, "Telefone inválido."), + termos: Yup.boolean().oneOf([true], "*"), +}); diff --git a/src/components/section/NavInstitucional.tsx b/src/components/section/NavInstitucional.tsx new file mode 100644 index 0000000..f933cf0 --- /dev/null +++ b/src/components/section/NavInstitucional.tsx @@ -0,0 +1,46 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleNavInstitucional from "./NavInstitucional.module.scss"; + +import { ContentPagamento } from "./ContentPagamento"; +import { ContentEntrega } from "./ContentEntrega"; +import { ContentTroca } from "./ContentTroca"; +import { ContentSeguranca } from "./ContentSeguranca"; +import { ContentContato } from "./ContentContato"; +import { ContentSobre } from "./ContentSobre"; + +const NavInstitucional = () => { + return ( + + ); +}; + +export { NavInstitucional }; diff --git a/src/components/section/Router.tsx b/src/components/section/Router.tsx index 1829b03..3a7dff8 100644 --- a/src/components/section/Router.tsx +++ b/src/components/section/Router.tsx @@ -7,7 +7,7 @@ import { ContentPagamento } from "./ContentPagamento"; import { ContentEntrega } from "./ContentEntrega"; import { ContentTroca } from "./ContentTroca"; import { ContentSeguranca } from "./ContentSeguranca"; -import { ContentContato } from "./ContentContato"; +import { FormContato } from "./FormContato"; import { ContentSobre } from "./ContentSobre"; // Estilos @@ -24,7 +24,7 @@ const Institucional = () => { className={({ isActive }) => isActive ? styleNavInstitucional.active : undefined } - to="/sobre" + to="/" > Sobre @@ -94,7 +94,7 @@ const Institucional = () => { } /> } /> } /> - } /> + } /> );