diff --git a/src/lib/features/properties/PropertyForm.tsx b/src/lib/features/properties/PropertyForm.tsx index 4f34d4a..a5c6665 100644 --- a/src/lib/features/properties/PropertyForm.tsx +++ b/src/lib/features/properties/PropertyForm.tsx @@ -9,18 +9,10 @@ import { Stepper, Step, StepLabel, - Select, - MenuItem, - FormControl, Box, Checkbox, FormControlLabel, FormGroup, - FormLabel, - InputAdornment, - OutlinedInput, - Radio, - RadioGroup, SelectChangeEvent } from '@mui/material'; import { Formik, Form, FormikHelpers, getIn } from 'formik'; @@ -39,6 +31,7 @@ import { step1ValidationSchema, step2ValidationSchema, step3ValidationSchema, st import Step1PropertyInfo from './propertyFormSteps/Step1PropertyInfo'; import Step2HouseRules from './propertyFormSteps/Step2HouseRules'; import Step3Address from './propertyFormSteps/Step3Address'; +import Step5Parking from './propertyFormSteps/Step5Parking'; interface UrlParams { id: string; @@ -80,36 +73,10 @@ export interface FormValues { updatedAt: null; }; - -export type ParkingLocationType = 'onsite' | 'offsite'; -export type ParkingPrivacyType = 'private' | 'public'; - -export interface ParkingDetailsForm { - parkingAvailable: number; - parkingChargePer?: ChargePer; - parkingChargeAmount?: number; - reservationsAvailable: number; - parkingLocation: ParkingLocationType; - parkingType: ParkingPrivacyType; -} - export default function PropertyForm(props: Readonly) { - const parkingAvailableOptions = { - 0: 'Não', - 1: 'Sim, gratuito', - 2: 'Sim, pago', - } - const { id } = props; const [activeStep, setActiveStep] = useState(0); - const[parkingDetailsForm, setParkingDetailsForm] = useState({ - parkingAvailable: 0, - parkingChargeAmount: 0.00, - parkingChargePer: 'day' as ChargePer, - reservationsAvailable: 0, - parkingLocation: 'onsite' as ParkingLocationType, - parkingType: 'private' as ParkingPrivacyType, - }); + const router = useRouter() const dispatch = useAppDispatch(); const initialValues: FormValues = { @@ -278,7 +245,7 @@ const handleBack = () => { validateOnBlur onSubmit={handleSubmit} > - {({ values, errors, touched, handleChange, handleBlur, validateForm }) => { + {({ values, handleChange, handleBlur, validateForm }) => { return ( @@ -299,132 +266,22 @@ const handleBack = () => { {activeStep === 3 && (
- {values.propertyInfo.services.map((service, index) => ( -
+ {values.propertyInfo.services.map((service) => ( +
- } label={service.key} /> + } + label={service.key} + onChange={handleChange} + onBlur={handleBlur} + />
))}
)} - {activeStep === 4 && ( - <> - - O estacionamento está disponível para as pessoas? - setParkingDetailsForm((prevProps) => { - return { ...prevProps, parkingAvailable: parseInt(e.target.value)} - })} - > - {Object.entries(parkingAvailableOptions).map(([key, value]) => ( - } label={value} /> - ))} - - - {parkingDetailsForm.parkingAvailable === 2 && ( - - - Quanto custa o estacionamento? - R$} - value={parkingDetailsForm.parkingChargeAmount} - onChange={e => setParkingDetailsForm((prevProps) => { - return { ...prevProps, parkingChargeAmount: parseFloat(e.target.value)} - })} - type="number" - placeholder="0.00" - /> - - - - )} - {parkingDetailsForm.parkingAvailable !== 0 && ( - <> - - É necessário fazer reservas? - setParkingDetailsForm((prevProps) => { - return { ...prevProps, reservationsAvailable: parseInt(target.value)} - })} - > - } label="Sim" /> - } label="Não" /> - - - - Onde o estacionamento está localizado? - { - setParkingDetailsForm((prevProps) => { - return {...prevProps, parkingLocation: (e.target.value as ParkingLocationType)} - }) - } - } - > - } label="Interno, dentro da empresa" /> - } label="Externo, fora da empresa" /> - - - - Que tipo de estacionamento é? - { - setParkingDetailsForm((prevProps) => { - return {...prevProps, parkingType: (e.target.value as ParkingPrivacyType)} - }) - } - } - > - } label="Privado" /> - } label="Público" /> - - - - )} - - )} + {activeStep === 4 && }
{activeStep > 0 && ( diff --git a/src/lib/features/properties/propertyFormSteps/Step4Location.tsx b/src/lib/features/properties/propertyFormSteps/Step4Location.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/features/properties/propertyFormSteps/Step5Parking.tsx b/src/lib/features/properties/propertyFormSteps/Step5Parking.tsx new file mode 100644 index 0000000..6b5d6cd --- /dev/null +++ b/src/lib/features/properties/propertyFormSteps/Step5Parking.tsx @@ -0,0 +1,152 @@ +'use client'; +import 'client-only'; +import { ChargePer } from "@/lib/db/idb" +import { Box, FormControl, FormControlLabel, FormLabel, InputAdornment, MenuItem, OutlinedInput, Radio, RadioGroup, Select } from "@mui/material" +import { useState } from "react"; + + + +export type ParkingLocationType = 'onsite' | 'offsite'; +export type ParkingPrivacyType = 'private' | 'public'; + +export interface ParkingDetailsForm { + parkingAvailable: number; + parkingChargePer?: ChargePer; + parkingChargeAmount?: number; + reservationsAvailable: number; + parkingLocation: ParkingLocationType; + parkingType: ParkingPrivacyType; +} + +export default function Step5Parking() { + const parkingAvailableOptions = { + 0: 'Não', + 1: 'Sim, gratuito', + 2: 'Sim, pago', + } + + const[parkingDetailsForm, setParkingDetailsForm] = useState({ + parkingAvailable: 0, + parkingChargeAmount: 0.00, + parkingChargePer: 'day' as ChargePer, + reservationsAvailable: 0, + parkingLocation: 'onsite' as ParkingLocationType, + parkingType: 'private' as ParkingPrivacyType, + }); + + return ( + <> + + O estacionamento está disponível para as pessoas? + setParkingDetailsForm((prevProps) => { + return { ...prevProps, parkingAvailable: parseInt(e.target.value)} + })} + > + {Object.entries(parkingAvailableOptions).map(([key, value]) => ( + } label={value} /> + ))} + + + {parkingDetailsForm.parkingAvailable === 2 && ( + + + Quanto custa o estacionamento? + R$} + value={parkingDetailsForm.parkingChargeAmount} + onChange={e => setParkingDetailsForm((prevProps) => { + return { ...prevProps, parkingChargeAmount: parseFloat(e.target.value)} + })} + type="number" + placeholder="0.00" + /> + + + + )} + {parkingDetailsForm.parkingAvailable !== 0 && ( + <> + + É necessário fazer reservas? + setParkingDetailsForm((prevProps) => { + return { ...prevProps, reservationsAvailable: parseInt(target.value)} + })} + > + } label="Sim" /> + } label="Não" /> + + + + Onde o estacionamento está localizado? + { + setParkingDetailsForm((prevProps) => { + return {...prevProps, parkingLocation: (e.target.value as ParkingLocationType)} + }) + } + } + > + } label="Interno, dentro da empresa" /> + } label="Externo, fora da empresa" /> + + + + Que tipo de estacionamento é? + { + setParkingDetailsForm((prevProps) => { + return {...prevProps, parkingType: (e.target.value as ParkingPrivacyType)} + }) + } + } + > + } label="Privado" /> + } label="Público" /> + + + + )} + + ) + } \ No newline at end of file diff --git a/src/lib/features/properties/propertyFormSteps/Step5Services.tsx b/src/lib/features/properties/propertyFormSteps/Step5Services.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/features/properties/propertyFormSteps/Step6Parking.tsx b/src/lib/features/properties/propertyFormSteps/Step6Parking.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/features/properties/schemas/propertyFormSchema.ts b/src/lib/features/properties/schemas/propertyFormSchema.ts index c88ce32..3b2785a 100644 --- a/src/lib/features/properties/schemas/propertyFormSchema.ts +++ b/src/lib/features/properties/schemas/propertyFormSchema.ts @@ -1,6 +1,9 @@ import * as Yup from "yup"; import { ChargePer, Property } from "@/lib/db/idb"; -import { ParkingLocationType, ParkingPrivacyType } from "../PropertyForm"; +import { + ParkingLocationType, + ParkingPrivacyType, +} from "../propertyFormSteps/Step5Parking"; const step1ValidationSchema = Yup.object({ propertyName: Yup.string().required("Obrigatório"), @@ -47,12 +50,10 @@ const step5ValidationSchema = Yup.object().shape({ .required("Parking availability is required") .min(0, "Parking available must be at least 0"), - parkingChargePer: Yup.mixed() - .oneOf( - ["day", "hour", "month", "stay"], - 'Charge per must be either "day" or "hour"' - ) - .optional(), + parkingChargePer: Yup.mixed().oneOf( + ["day", "hour", "month", "stay"], + 'Charge per must be either "day", "hour", "month" or "stay"' + ), parkingChargeAmount: Yup.number() .optional() @@ -68,17 +69,13 @@ const step5ValidationSchema = Yup.object().shape({ ); } ), - reservationsAvailable: Yup.number() - .required("Reservations available is required") - .min(0, "Reservations available must be at least 0"), - + reservationsAvailable: Yup.number(), parkingLocation: Yup.mixed() .oneOf( ["onsite", "offsite"], 'Parking location must be either "onsite" or "offsite"' ) .required("Parking location is required"), - parkingType: Yup.mixed() .oneOf( ["private", "public"],