117 lines
3.3 KiB
JavaScript
117 lines
3.3 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { updateLifestyleDetails } from "../redux/registrationFormSlice";
|
|
import {
|
|
Grid,
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
Button,
|
|
} from "@mui/material";
|
|
|
|
const LifestyleDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
|
const dispatch = useDispatch();
|
|
const data = useSelector((state) => state.registerform.lifestyleDetails);
|
|
const inputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
inputRef.current?.focus();
|
|
}, []);
|
|
|
|
const handleChange = (field, value) => {
|
|
dispatch(updateLifestyleDetails({ [field]: value }));
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
console.log("Submitting lifestyle details:", data);
|
|
onSubmitStep();
|
|
};
|
|
|
|
const fields = [
|
|
{ name: "diet", label: "Diet", options: ["Veg", "Non-Veg", "Eggetarian"] },
|
|
{
|
|
name: "drinking",
|
|
label: "Drinking Habits",
|
|
options: ["No", "Occasionally", "Regularly"],
|
|
},
|
|
{
|
|
name: "smoking",
|
|
label: "Smoking Habits",
|
|
options: ["No", "Occasionally", "Regularly"],
|
|
},
|
|
{
|
|
name: "hobbies",
|
|
label: "Hobbies & Interests",
|
|
options: ["Song", "Reading", "Sports", "Travel"],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="w-full max-w-[1200px] mx-auto bg-[#fff2f2] py-6 md:px-2 rounded-8">
|
|
<form noValidate autoComplete="off" style={{ padding: 16 }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-10 mb-6">
|
|
{fields.map(({ name, label, options }) => (
|
|
<div key={name} className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">{label}</label>
|
|
<FormControl
|
|
fullWidth
|
|
variant="outlined"
|
|
error={Boolean(errors[name])}
|
|
>
|
|
<InputLabel id={`${name}-label`}>Select {label}</InputLabel>
|
|
<Select
|
|
labelId={`${name}-label`}
|
|
label={`Select ${label}`}
|
|
name={name}
|
|
value={data[name]}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
inputRef={name === "diet" ? inputRef : null}
|
|
>
|
|
|
|
{options.map((opt) => (
|
|
<MenuItem key={opt} value={opt}>
|
|
{opt}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{errors[name] && (
|
|
<p
|
|
style={{
|
|
color: "#d32f2f",
|
|
margin: "3px 14px 0 14px",
|
|
fontSize: "0.75rem",
|
|
}}
|
|
>
|
|
{errors[name]}
|
|
</p>
|
|
)}
|
|
</FormControl>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
style={{
|
|
marginTop: 24,
|
|
display: "flex",
|
|
gap: 16,
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Button variant="outlined" onClick={onSkipStep}>
|
|
Skip
|
|
</Button>
|
|
<Button variant="contained" color="primary" onClick={handleSubmit}>
|
|
Next
|
|
</Button>
|
|
</Grid>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LifestyleDetailsForm;
|