diff --git a/Vitor-Soares-main/src/components/FormContainer/Contato/index.tsx b/Vitor-Soares-main/src/components/FormContainer/Contato/index.tsx new file mode 100644 index 0000000..9bfd63d --- /dev/null +++ b/Vitor-Soares-main/src/components/FormContainer/Contato/index.tsx @@ -0,0 +1,116 @@ +import { formatToCPF, formatToPhone } from "brazilian-values"; +import { Field, Form, Formik } from "formik"; +import { useState } from "react"; +import { OptionElement } from "../OptionElement"; +import { contatoSchema, formatDate } from "./schema"; + +export function Contato() { + //@ts-ignore + const initialState: IContatoData = { + email: "", + nome: "", + instagram: "", + cpf: "", + telefone: "", + terms: false as any, + dataDeNascimento: "", + }; + + const [sent, setSent] = useState(false); + + return ( + + { + resetForm(); + setSent(true); + }} + > + {({ errors, values, touched }) => { + function getError(field: keyof typeof initialState) { + return ( + + {errors[field]} + + ); + } + + return ( +
+
+ + {getError("nome")} + +
+
+ + {getError("email")} + +
+
+ + {getError("cpf")} + +
+
+ + {getError("dataDeNascimento")} + +
+
+ + {getError("telefone")} + +
+
+ + {getError("instagram")} + +
+ +
+ + *{" "} + Declaro que li e aceito + + +
+ + {sent && ( + *Formulário enviado com sucesso! + )} +
+ ); + }} +
+
+ ); +} diff --git a/Vitor-Soares-main/src/components/FormContainer/Contato/schema.ts b/Vitor-Soares-main/src/components/FormContainer/Contato/schema.ts new file mode 100644 index 0000000..6dbae94 --- /dev/null +++ b/Vitor-Soares-main/src/components/FormContainer/Contato/schema.ts @@ -0,0 +1,51 @@ +import * as Yup from "yup"; +import { isCPF, isPhone } from "brazilian-values"; + +const instagramPattern = /^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{0,29}$/gim; +const datePattern = + /^(?:(?: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})$/gim; + +export function isDate(value: any) { + value = formatDate(value); + return !!value?.match(datePattern); +} + +export function formatDate(value: string) { + value = value?.replace(/[^\d]/, ""); + return value?.replace(/(\d{1,2})(\d{1,2})(\d{4})/gim, "$1.$2.$3"); +} + +export function isUser(value: any) { + return !!value?.match(instagramPattern); +} + +export const contatoSchema = Yup.object().shape({ + email: Yup.string().email("Email Inválido!").required("*Campo Obrigatório"), + nome: Yup.string().required("*Campo Obrigatório"), + instagram: Yup.string().required("*Campo Obrigatório").test({ + name: "Instagram", + message: "Nome de usuário inválido!", + test: isUser, + }), + cpf: Yup.string() + .required("*Campo Obrigatório") + .test({ test: isCPF as any, message: "CPF Inválido" }), + telefone: Yup.string() + .required("*Campo Obrigatório") + .test({ + test: (e) => { + e = e?.replace(/[^\d]/g, ""); + return isPhone(e as string); + }, + message: "Telefone Inválido", + }), + terms: Yup.boolean() + .required("*Campo Obrigatório") + .isTrue("Aceite os Termos para continuar"), + dataDeNascimento: Yup.string().required("*Campo Obrigatório").test({ + test: isDate, + message: "Data de nascimento inválida!", + }), +}); + +export interface IContatoData extends Yup.InferType {}