feat: adiciona aba de contato

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<boolean>(false);
+
+  return (
+    <OptionElement title="Preencha o Formulário" h2Class="form-title">
+      <Formik
+        initialValues={initialState}
+        validationSchema={contatoSchema}
+        onSubmit={(values, { resetForm }) => {
+          resetForm();
+          setSent(true);
+        }}
+      >
+        {({ errors, values, touched }) => {
+          function getError(field: keyof typeof initialState) {
+            return (
+              <span
+                className="error-msg"
+                style={{ opacity: touched[field] && errors[field] ? 1 : 0 }}
+              >
+                {errors[field]}
+              </span>
+            );
+          }
+
+          return (
+            <Form>
+              <fieldset>
+                <label>Nome</label>
+                {getError("nome")}
+                <Field
+                  name="nome"
+                  placeholder="Seu nome completo"
+                  type="text"
+                />
+              </fieldset>
+              <fieldset>
+                <label>E-mail</label>
+                {getError("email")}
+                <Field name="email" placeholder="Seu e-mail" type="email" />
+              </fieldset>
+              <fieldset>
+                <label>CPF</label>
+                {getError("cpf")}
+                <Field
+                  name="cpf"
+                  placeholder="Seu CPF"
+                  type="text"
+                  value={formatToCPF(values.cpf)}
+                  maxLength={14}
+                />
+              </fieldset>
+              <fieldset>
+                <label>Data de Nascimento:</label>
+                {getError("dataDeNascimento")}
+                <Field
+                  name="dataDeNascimento"
+                  placeholder="00.00.0000"
+                  type="text"
+                  maxLength={12}
+                  value={formatDate(values.dataDeNascimento)}
+                />
+              </fieldset>
+              <fieldset>
+                <label>Telefone:</label>
+                {getError("telefone")}
+                <Field
+                  name="telefone"
+                  placeholder="Seu Telefone"
+                  type="text"
+                  value={formatToPhone(values.telefone)}
+                />
+              </fieldset>
+              <fieldset>
+                <label>Instagram</label>
+                {getError("instagram")}
+                <Field name="instagram" placeholder="@seuuser" type="text" />
+              </fieldset>
+
+              <fieldset className="terms">
+                <span>
+                  <span className="asterisco">*</span>{" "}
+                  <span className="text">Declaro que li e aceito</span>
+                </span>
+                <Field type="checkbox" name="terms" />
+              </fieldset>
+              <button type="submit" className="cadastre-se-btn">
+                Cadastre-se
+              </button>
+              {sent && (
+                <span className="sent">*Formulário enviado com sucesso!</span>
+              )}
+            </Form>
+          );
+        }}
+      </Formik>
+    </OptionElement>
+  );
+}

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<typeof contatoSchema> {}