feat(institucional):formatação de envio aplicada a cpf e birthdate

This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-12 02:08:36 -03:00
parent fa54adf96a
commit 0d5b77da84
5 changed files with 31 additions and 6 deletions

View File

@ -17,6 +17,7 @@
"@types/react-dom": "^18.0.10",
"cpf-check": "^3.0.0",
"formik": "^2.2.9",
"moment": "^2.29.4",
"node-sass": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -12703,6 +12704,14 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -27876,6 +27885,11 @@
"minimist": "^1.2.6"
}
},
"moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

View File

@ -12,6 +12,7 @@
"@types/react-dom": "^18.0.10",
"cpf-check": "^3.0.0",
"formik": "^2.2.9",
"moment": "^2.29.4",
"node-sass": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",

View File

@ -1,5 +1,6 @@
import React, { useState } from "react"
import { Formik,Form, FormikHelpers } from 'formik';
import moment from 'moment';
import Homeicon from "../components/assets/icons/home_icon.svg"
import Leftarrow from "../components/assets/icons/Leftarrow.svg"
@ -42,6 +43,8 @@ const Home = () =>{
const handleFormikSubmit = (values:FormTypes, formik: FormikHelpers<FormTypes>) =>{
console.log(values)
setIsChecked(false)
values.birthdate = moment(values.birthdate, 'DDMMYYYY').format('DD/MM/YYYY');
values.cpf = values.cpf.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2")
formik.resetForm();
}
@ -124,7 +127,6 @@ const Home = () =>{
onSubmit={handleFormikSubmit}
>
{({errors,touched}) => (
<Form
id={MainStyles["contact"]}
className={activeSection === "Contato" ? MainStyles["active"] : MainStyles["hiden"]}
@ -184,13 +186,11 @@ const Home = () =>{
Simbol="*"
Simbolclass={MainStyles.Symbol}
/>
<button type="submit">
CADASTRE-SE
</button>
</Form>
)}
</Formik>
</div>
</div>

View File

@ -1,5 +1,6 @@
import * as Yup from "yup";
import isCPF from 'cpf-check';
import moment from 'moment';
export default Yup.object().shape({
@ -18,10 +19,14 @@ export default Yup.object().shape({
.required("* Campo Obrigatório")
.transform(value => isCPF.format(value))
.test("cpf-valid", "* CPF inválido", value => isCPF.validate(value))
,
birthdate:Yup.string()
.required("* Campo Obrigatório"),
birthdate: Yup.string()
.matches(/^(0?[1-9]|[12][0-9]|3[01])\/?(0?[1-9]|1[012])\/?(\d{4})$/,"Data de nascimento inválida")
.test('is-valid-date', '* Data de nascimento inválida', value => moment(value, "DD/MM/YYYY").isValid())
.required("* Campo obrigatório")
.transform(value => moment(value, "DD/MM/YYYY").format("DD/MM/YYYY")),
phone:Yup.string()
.required("* Campo Obrigatório"),

View File

@ -7002,6 +7002,11 @@
dependencies:
"minimist" "^1.2.6"
"moment@^2.29.4":
"integrity" "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
"resolved" "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
"version" "2.29.4"
"ms@^2.0.0", "ms@^2.1.1", "ms@2.1.2":
"integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
"resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"