BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): adicionando yup ao email newsletter

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-13 17:30:09 -03:00
parent dc41d8bd11
commit 7bbc95be8d
4 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Atoms/LabelForm/LabelFrom.tsx Normal file
View File

@ -0,0 +1,15 @@
interface ILabelProps {
className: string;
htmlFor: string;
text: string;
}
export const LabelForm = (props: ILabelProps) => {
const { className, htmlFor, text } = props;
return (
<label htmlFor={htmlFor} className={className}>
{text}
</label>
);
};

52
src/components/molecules/FaleConosco/FaleConosco.tsx
View File

@ -6,6 +6,7 @@ import { useState } from "react";
import FormSchema from "../../../schema/FormSchema";
import styles from "./FaleConosco.module.scss";
import { ButtonForm } from "../../Atoms/ButtonForm/ButtonForm";
import { LabelForm } from "../../Atoms/LabelForm/LabelFrom";
interface IFormikValues {
name: string;
@ -45,9 +46,11 @@ const FaleConosco = () => {
<Form className={styles["form__wrapper"]}>
<h2 className={styles["form__title"]}>Preencha o formulário </h2>
<div className={styles["form__col"]}>
<label className={styles["form__col__type"]} htmlFor="name">
Nome
</label>
<LabelForm
className={styles["form__col__type"]}
htmlFor={"name"}
text={"Nome"}
/>
<Field id="name" name="name" placeholder="Seu nome completo" />
<ErrorMessage
component="span"
@ -56,9 +59,11 @@ const FaleConosco = () => {
/>
</div>
<div className={styles["form__col"]}>
<label className={styles["form__col__type"]} htmlFor="email">
Email
</label>
<LabelForm
className={styles["form__col__type"]}
htmlFor={"email"}
text={"E-mail"}
/>
<Field id="email" name="email" placeholder="Seu email" />
<ErrorMessage
component="span"
@ -67,9 +72,11 @@ const FaleConosco = () => {
/>
</div>
<div className={styles["form__col"]}>
<label className={styles["form__col__type"]} htmlFor="cpf">
CPF
</label>
<LabelForm
className={styles["form__col__type"]}
htmlFor={"cpf"}
text={"CPF"}
/>
<Field
name="cpf"
render={({ field }: any) => (
@ -104,9 +111,12 @@ const FaleConosco = () => {
/>
</div>
<div className={styles["form__col"]}>
<label className={styles["form__col__type"]} htmlFor="birthDate">
Data de Nascimento:
</label>
<LabelForm
className={styles["form__col__type"]}
htmlFor={"birthDate"}
text={"Data de Nascimento"}
/>
<Field
type="tel"
name="birthDate"
@ -138,9 +148,11 @@ const FaleConosco = () => {
/>
</div>
<div className={styles["form__col"]}>
<label className={styles["form__col__type"]} htmlFor="celPhone">
Telefone:
</label>
<LabelForm
className={styles["form__col__type"]}
htmlFor={"celPhone"}
text={"Telefone"}
/>
<Field
type="tel"
name="celPhone"
@ -177,9 +189,11 @@ const FaleConosco = () => {
/>
</div>
<div className={styles["form__col"]}>
<label className={styles["form__col__type"]} htmlFor="instagram">
Instagram:
</label>
<LabelForm
className={styles["form__col__type"]}
htmlFor={"instagram"}
text={"Instagram"}
/>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
<ErrorMessage
component="span"
@ -212,7 +226,7 @@ const FaleConosco = () => {
{FormSuccess && (
<span className={styles["form__wrapper__success"]}>
*Formulário enviado com sucesso*
*Formulário enviado com sucesso!
</span>
)}
</Form>

19
src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx
View File

@ -1,13 +1,15 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import EmailNewsletter from "../../../../schema/EmailNewsletter";
import { ButtonForm } from "../../../Atoms/ButtonForm/ButtonForm";
import { LabelForm } from "../../../Atoms/LabelForm/LabelFrom";
import styles from "./FooterNewsletter.module.scss";
interface IFormikValue {
email: string;
emailNewsletter: string;
}
const initialValues = {
email: "",
emailNewsletter: "",
};
const FooterNewsletter = () => {
@ -20,15 +22,18 @@ const FooterNewsletter = () => {
actions.resetForm();
actions.setSubmitting(false);
}}
validationSchema={EmailNewsletter}
>
<Form className={styles["footer-newsletter__form"]}>
<label htmlFor="email" className={styles["footer-newsletter__form__title"]}>
assine nossa newsletter
</label>
<LabelForm
htmlFor="emailNewsletter"
className={styles["footer-newsletter__form__title"]}
text={"assine nossa newsletter"}
/>
<div className={styles["footer-newsletter__form__input-btn"]}>
<Field
id="email"
name="email"
id="emailNewsletter"
name="emailNewsletter"
placeholder="E-mail"
className={styles["footer-newsletter__form__input"]}
/>

5
src/schema/EmailNewsletter.ts Normal file
View File

@ -0,0 +1,5 @@
import * as Yup from 'yup';
export default Yup.object().shape({
emailNewsletter: Yup.string().email("*Email inválido").required("*Campo Obrigatório"),
})