diff --git a/src/lib/features/properties/PropertyForm.tsx b/src/lib/features/properties/PropertyForm.tsx index cb2bdf2..4f34d4a 100644 --- a/src/lib/features/properties/PropertyForm.tsx +++ b/src/lib/features/properties/PropertyForm.tsx @@ -44,7 +44,7 @@ interface UrlParams { id: string; }; -interface FormValues { +export interface FormValues { propertyId: string; propertyName: string; propertyOrganization: string; @@ -279,23 +279,7 @@ const handleBack = () => { onSubmit={handleSubmit} > {({ values, errors, touched, handleChange, handleBlur, validateForm }) => { - const address = 'contactInfo.physicalLocation.address.'; - const touchedPostalCode = getIn(touched, `${address}postalCode`); - const touchedAddressLine = getIn(touched, `${address}addressLine`); - const touchedNumber = getIn(touched, `${address}number`); - const touchedAddressLine2 = getIn(touched, `${address}addressLine2`); - const touchedNeighborhood = getIn(touched, `${address}neighborhood`); - const touchedCityName = getIn(touched, `${address}cityName`); - const touchedStateProvinceCode = getIn(touched, `${address}stateProvinceCode`); - - const errorPostalCode = getIn(errors, `${address}postalCode`); - const errorAddressLine = getIn(errors, `${address}addressLine`); - const errorNumber = getIn(errors, `${address}number`); - const errorAddressLine2 = getIn(errors, `${address}addressLine2`); - const errorNeighborhood = getIn(errors, `${address}neighborhood`); - - const errorCityName = getIn(errors, `${address}cityName`); - const errorStateProvinceCode = getIn(errors, `${address}stateProvinceCode`); + return (
@@ -307,64 +291,11 @@ const handleBack = () => { ))} - {activeStep === 0 && } + {activeStep === 0 && } - {activeStep === 1 && } + {activeStep === 1 && } - {activeStep === 2 && } + {activeStep === 2 && } {activeStep === 3 && (
diff --git a/src/lib/features/properties/propertyFormSteps/Step1PropertyInfo.tsx b/src/lib/features/properties/propertyFormSteps/Step1PropertyInfo.tsx index 7b5b094..cd26e58 100644 --- a/src/lib/features/properties/propertyFormSteps/Step1PropertyInfo.tsx +++ b/src/lib/features/properties/propertyFormSteps/Step1PropertyInfo.tsx @@ -1,20 +1,10 @@ import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material"; -import { Field } from "formik"; +import { Field, useFormikContext } from "formik"; import { PROPERTY_CATEGORIES } from "../constants/propertyCategories"; -import { FieldProps, FormEventProps } from "./types"; +import { FormValues } from "../PropertyForm"; -type PropertyInfoFields = { - propertyName: FieldProps; - propertyCategory: FieldProps; - propertyOrganization: FieldProps; -}; - -interface PropertyInfoProps extends FormEventProps { - props: PropertyInfoFields; -}; - -export default function Step1PropertyInfo({ props, handleChange, handleBlur }: PropertyInfoProps) { - const { propertyName, propertyCategory, propertyOrganization } = props; +export default function Step1PropertyInfo() { + const { values: { propertyName, propertyCategory, propertyOrganization }, touched, errors, handleChange, handleBlur } = useFormikContext(); return ( <> @@ -36,7 +26,10 @@ export default function Step1PropertyInfo({ props, handleChange, handleBlur }: P as={Select} id='propertyCategory' name="propertyCategory" - error={propertyCategory.touched && !!propertyCategory.error} + value={propertyCategory} + onChange={handleChange} + onBlur={handleBlur} + error={touched.propertyCategory && !!errors.propertyCategory} > {Object.values(PROPERTY_CATEGORIES).map((category) => ( @@ -52,11 +45,11 @@ export default function Step1PropertyInfo({ props, handleChange, handleBlur }: P fullWidth name="propertyOrganization" label="Nome da organização" - value={propertyOrganization.value} + value={propertyOrganization} onChange={handleChange} onBlur={handleBlur} - error={propertyOrganization.touched && !!propertyOrganization.error} - helperText={propertyOrganization.touched && propertyOrganization.error} + error={touched.propertyOrganization && !!errors.propertyOrganization} + helperText={touched.propertyOrganization && errors.propertyOrganization} />
diff --git a/src/lib/features/properties/propertyFormSteps/Step2HouseRules.tsx b/src/lib/features/properties/propertyFormSteps/Step2HouseRules.tsx index 44fee7e..308e976 100644 --- a/src/lib/features/properties/propertyFormSteps/Step2HouseRules.tsx +++ b/src/lib/features/properties/propertyFormSteps/Step2HouseRules.tsx @@ -1,19 +1,10 @@ import { FlexContainer } from "@/lib/common/components/styles/form"; import { TextField } from "@mui/material"; -import { Field } from "formik"; -import { FieldProps } from "./types"; +import { Field, useFormikContext } from "formik"; +import { FormValues } from "../PropertyForm"; -type HouseRulesFields = { - checkInFrom: FieldProps; - checkOutTo: FieldProps; -}; - -interface HouseRulesProps { - props: HouseRulesFields; -} - -export default function Step2HouseRules({props}: HouseRulesProps) { - const { checkInFrom, checkOutTo } = props; +export default function Step2HouseRules() { + const { values: { propertyInfo: {checkInFrom, checkOutTo}}, touched, errors, handleChange, handleBlur } = useFormikContext(); return ( <>

Horário de funcionamento

@@ -24,8 +15,11 @@ export default function Step2HouseRules({props}: HouseRulesProps) { name="propertyInfo.checkInFrom" label="Aberto desde as" type="time" - error={checkInFrom.touched && !!checkInFrom.error} - helperText={checkInFrom.touched && checkInFrom.error} + value={checkInFrom} + handleChange={handleChange} + handleBlur={handleBlur} + error={touched.propertyInfo?.checkInFrom && !!errors.propertyInfo?.checkInFrom} + helperText={touched.propertyInfo?.checkInFrom && errors.propertyInfo?.checkInFrom} /> diff --git a/src/lib/features/properties/propertyFormSteps/Step3Address.tsx b/src/lib/features/properties/propertyFormSteps/Step3Address.tsx index 4e28411..5641d49 100644 --- a/src/lib/features/properties/propertyFormSteps/Step3Address.tsx +++ b/src/lib/features/properties/propertyFormSteps/Step3Address.tsx @@ -1,30 +1,54 @@ 'use client'; import * as React from 'react'; -import { TextField, Typography } from '@mui/material'; -import { FieldProps, FormEventProps } from './types'; import { useCep } from '../hooks/useCep'; import { useState, useEffect } from 'react'; import { useFormikContext } from 'formik'; +import { FormValues } from '../PropertyForm'; +import { TextField, Typography } from '@mui/material'; -type AddressFields = { - postalCode: FieldProps; - addressLine: FieldProps; - number: FieldProps; - addressLine2: FieldProps; - neighborhood: FieldProps; - cityName: FieldProps; - stateProvinceCode: FieldProps; -} +export default function Step3Address() { + const { + values: { + contactInfo: { + physicalLocation: { + address: { + postalCode, + addressLine, + number, + addressLine2, + neighborhood, + cityName, + stateProvinceCode, + }, + }, + }, + }, + touched, + errors, + handleChange, + handleBlur, + setFieldValue + } = useFormikContext(); + const addressTouched = touched?.contactInfo?.physicalLocation?.address + const postalCodeTouched = addressTouched?.postalCode; + const addressLineTouched = addressTouched?.addressLine; + const numberTouched = addressTouched?.number; + const addressLine2Touched = addressTouched?.addressLine2; + const neighborhoodTouched = addressTouched?.neighborhood; + const cityNameTouched = addressTouched?.cityName; + const stateProvinceCodeTouched = addressTouched?.stateProvinceCode; -interface AddressProps extends FormEventProps { - props: AddressFields -} + const addressError = errors?.contactInfo?.physicalLocation?.address; + const postalCodeError = addressError?.postalCode; + const addressLineError = addressError?.addressLine; + const numberError = addressError?.number; + const addressLine2Error = addressError?.addressLine2; + const neighborhoodError = addressError?.neighborhood; + const cityNameError = addressError?.cityName; + const stateProvinceCodeError = addressError?.stateProvinceCode; -export default function Step3Address({props, handleChange, handleBlur}: AddressProps) { - const { postalCode, addressLine, number, addressLine2, neighborhood, cityName, stateProvinceCode } = props; const [shouldFetch, setShouldFetch] = useState(false); - const { setFieldValue } = useFormikContext(); const [addressData, setAddressData] = useState({ cep: "", logradouro: "", @@ -86,11 +110,11 @@ export default function Step3Address({props, handleChange, handleBlur}: AddressP variant='standard' name={`contactInfo.physicalLocation.address.postalCode`} label="CEP" - value={postalCode.value ?? ''} + value={postalCode ?? ''} onChange={handleSearchPostalCode} onBlur={handleBlur} - error={postalCode.touched && !!postalCode.error} - helperText={postalCode.touched && postalCode.error} + error={postalCodeTouched && !!postalCodeError} + helperText={postalCodeTouched && postalCodeError} /> {error && Não foi possível encontrar o CEP} @@ -99,64 +123,64 @@ export default function Step3Address({props, handleChange, handleBlur}: AddressP variant='standard' name={`contactInfo.physicalLocation.address.addressLine`} label="Endereço" - value={addressLine.value ?? ''} + value={addressLine ?? ''} onChange={handleChange} onBlur={handleBlur} - error={addressLine.touched && !!addressLine.error} - helperText={addressLine.touched && addressLine.error} + error={addressLineTouched && !!addressLineError} + helperText={addressLineTouched && addressLineError} />