From f49da350bf7ff2352a05627d001a38cbbf698445 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 16 Jan 2023 15:13:53 -0300 Subject: [PATCH] =?UTF-8?q?feat(main):=20Cria=20e=20aplica=20funcionalidad?= =?UTF-8?q?es=20ao=20formul=C3=A1rio=20Institucional?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InstitucionalForm.module.scss | 183 +++++++++++++++++ .../InstitucionalForm/InstitucionalForm.tsx | 188 ++++++++++++++++++ .../Schema/InstitucionalFormSchema.ts | 17 ++ src/components/Routes/RoutesPages/Contato.tsx | 4 + .../RoutesPages/RoutesPages.module.scss | 7 +- 5 files changed, 393 insertions(+), 6 deletions(-) create mode 100644 src/components/InstitucionalForm/InstitucionalForm.module.scss create mode 100644 src/components/InstitucionalForm/InstitucionalForm.tsx create mode 100644 src/components/InstitucionalForm/Schema/InstitucionalFormSchema.ts diff --git a/src/components/InstitucionalForm/InstitucionalForm.module.scss b/src/components/InstitucionalForm/InstitucionalForm.module.scss new file mode 100644 index 0000000..991e687 --- /dev/null +++ b/src/components/InstitucionalForm/InstitucionalForm.module.scss @@ -0,0 +1,183 @@ +@use '../../variables'; + +.form { + &__container { + width: 100%; + } + + form { + width: 100%; + } + + &__inputs-container { + display: flex; + flex-direction: column; + + label { + font-size: 14px; + line-height: 16px; + color: variables.$black-100; + margin-left: 15px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + input { + height: 46px; + background: variables.$white; + border: 1px solid variables.$black-100; + font-size: 14px; + line-height: 16px; + color: variables.$gray-200; + border-radius: 25px; + margin-top: 12px; + margin-bottom: 12px; + padding: 15px 20px; + + @media (min-width: 2500px) { + height: 63px; + font-size: 28px; + line-height: 33px; + } + + &::placeholder { + font-size: 14px; + line-height: 16px; + color: variables.$gray-200; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } + } + + &__checkbox-container { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 12px; + position: relative; + + input { + width: 18px; + height: 18px; + margin-left: 4px; + + @media (min-width: 2500px) { + width: 36px; + height: 35px; + } + + @media (max-width: 289px) { + margin-left: 2px; + } + + } + } + + &__checkbox, + &__checkbox-alert { + font-size: 14px; + line-height: 16px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + &__checkbox { + color: variables.$black-100; + text-decoration: underline; + } + + &__checkbox-alert { + color: variables.$red; + text-decoration: none; + } + + &__invalid-feedback, + &__invalid-feedback-terms { + font-size: 12px; + line-height: 14px; + color: variables.$red; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + &__invalid-feedback { + right: 120px; + margin-top: 12px; + position: absolute; + + @media (max-width: 1024px) { + right: 32px; + } + } + + &__invalid-feedback-terms { + margin-left: 5px; + + @media (min-width: 2500px) { + margin-left: 7px; + } + + @media (max-width: 289px) { + font-size: 11px; + margin-left: 2px; + } + } + + &__btn { + width: 100%; + height: 52px; + background-color: variables.$black; + border-radius: 25px; + border: none; + + font-size: 16px; + line-height: 19px; + letter-spacing: 0.05em; + color: variables.$white; + padding: 17px 0; + + display: flex; + align-items: center; + justify-content: center; + + &:hover { + filter: opacity(.85); + } + + &:active { + filter: opacity(1); + } + + @media (min-width: 2500px) { + height: 71px; + + font-size: 32px; + line-height: 38px; + } + } + + &__msg-submit { + font-size: 12px; + line-height: 14px; + color: variables.$green; + margin-top: 12px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } +} diff --git a/src/components/InstitucionalForm/InstitucionalForm.tsx b/src/components/InstitucionalForm/InstitucionalForm.tsx new file mode 100644 index 0000000..80745c7 --- /dev/null +++ b/src/components/InstitucionalForm/InstitucionalForm.tsx @@ -0,0 +1,188 @@ +import {useState} from "react"; + +import { Formik, Form, Field, ErrorMessage, FormikHelpers} from "formik"; + +import styles from "./InstitucionalForm.module.scss"; + +import FormSchema from "./Schema/InstitucionalFormSchema"; + +interface FormValue { + name: string; + email: string; + cpf: string; + birthDate: string; + phone: string; + instagram: string; + acceptTerms: boolean; +} + +const initialValue = { + name: "", + email: "", + cpf: "", + birthDate: "", + phone: "", + instagram: "", + acceptTerms: false, +} + +let listClient: Array = []; + +const InstitucionalForm = () => { + + const [successMessage, setSuccessMessage] = useState(false); + + const handleSubmit = async (values: FormValue, actions: FormikHelpers) => { + listClient.push(values); + console.log(listClient); + actions.resetForm(); + + setSuccessMessage(true); + setTimeout(() => setSuccessMessage(false), 3000); + }; + + return ( +
+ + + {({errors, touched}) => ( +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + + +
+ + + {successMessage + ? (*Formulário enviado com sucesso! ) + : ("") + } +
+
+ )} + +
+ ); +}; + +export { InstitucionalForm }; diff --git a/src/components/InstitucionalForm/Schema/InstitucionalFormSchema.ts b/src/components/InstitucionalForm/Schema/InstitucionalFormSchema.ts new file mode 100644 index 0000000..7ced46b --- /dev/null +++ b/src/components/InstitucionalForm/Schema/InstitucionalFormSchema.ts @@ -0,0 +1,17 @@ +import * as Yup from "yup"; + +export default Yup.object().shape({ + name: Yup.string().required("*Campo Obrigatório").matches(/^[a-zA-Z\u00C0-\u017F´]{3,}?[+\s+]?[a-zA-Z\u00C0-\u017F´]{0,}$/, "*Nome Inválido"), + + email: Yup.string().required("*Campo Obrigatório").email("*E-mail Inválido"), + + cpf: Yup.string().required("*Campo Obrigatório").matches(/^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2})$/, "*CPF Inválido"), + + birthDate: Yup.string().required("*Campo Obrigatório").matches(/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/, "*Data Inválida"), + + phone: Yup.string().required("*Campo Obrigatório").matches(/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/, "*Número Inválido"), + + instagram: Yup.string().matches(/^(?:@)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)$/, "*Instagram Inválido"), + + acceptTerms: Yup.bool().oneOf([true], "*Aceitar termos"), + }); diff --git a/src/components/Routes/RoutesPages/Contato.tsx b/src/components/Routes/RoutesPages/Contato.tsx index 92f763b..81e3e12 100644 --- a/src/components/Routes/RoutesPages/Contato.tsx +++ b/src/components/Routes/RoutesPages/Contato.tsx @@ -1,5 +1,7 @@ import React from "react"; +import { InstitucionalForm } from "../../InstitucionalForm/InstitucionalForm"; + import styles from "./RoutesPages.module.scss"; const Contato = () => { @@ -7,6 +9,8 @@ const Contato = () => { return (

Preencha o Formulário

+ +
); } diff --git a/src/components/Routes/RoutesPages/RoutesPages.module.scss b/src/components/Routes/RoutesPages/RoutesPages.module.scss index 41ec1eb..15ffb30 100644 --- a/src/components/Routes/RoutesPages/RoutesPages.module.scss +++ b/src/components/Routes/RoutesPages/RoutesPages.module.scss @@ -1,15 +1,10 @@ @use '../../../variables'; .institucional__content { - width: 748px; + width: 100%; margin-left: 30px; - @media (min-width: 2500px) { - width: 1680px; - } - @media (max-width: 1024px) { - width: 100%; margin-left: 0; }