433 lines
13 KiB
JavaScript
433 lines
13 KiB
JavaScript
import React, { useEffect, useMemo, useRef } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { updatePartnerPreferences } from "../redux/registrationFormSlice";
|
|
import {
|
|
Grid,
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
Button,
|
|
Checkbox,
|
|
ListItemText,
|
|
} from "@mui/material";
|
|
import { usePartnerPreferenceMasters } from "../hooks/useMasters";
|
|
import { useCityMasters, useSubCasteMasters } from "../hooks/useDependentMasters";
|
|
|
|
const PartnerPreferencesForm = ({
|
|
onSubmitStep,
|
|
onSkipStep,
|
|
errors,
|
|
onFieldChange,
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const data = useSelector((state) => state.registerform.partnerPreferences);
|
|
const inputRef = useRef(null);
|
|
const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;
|
|
|
|
const { data: masters, isLoading: isPartnerMastersLoading } =
|
|
usePartnerPreferenceMasters();
|
|
const subCasteQuery = useSubCasteMasters(data.castes);
|
|
const cityQuery = useCityMasters(data.states);
|
|
|
|
const ageRangeOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.ageRange || raw.age_range || [];
|
|
}, [masters]);
|
|
|
|
const casteOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.caste || raw.castes || [];
|
|
}, [masters]);
|
|
|
|
const occupationOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.occupation || raw.occupations || [];
|
|
}, [masters]);
|
|
|
|
const educationOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.education || raw.educations || [];
|
|
}, [masters]);
|
|
|
|
const hobbyOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.hobbies || raw.hobby || [];
|
|
}, [masters]);
|
|
|
|
const annualIncomeOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.annual_income || raw.annualIncome || [];
|
|
}, [masters]);
|
|
|
|
const stateOptions = useMemo(() => {
|
|
const raw = masters;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.state || raw.states || [];
|
|
}, [masters]);
|
|
|
|
const subCasteOptions = useMemo(() => {
|
|
const raw = subCasteQuery.data;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) {
|
|
const merged = raw.flatMap((entry) => {
|
|
if (!entry) return [];
|
|
if (Array.isArray(entry)) return entry;
|
|
return entry.sub_caste || entry.subCaste || entry.data || [];
|
|
});
|
|
return merged;
|
|
}
|
|
return raw.sub_caste || raw.subCaste || raw.data || [];
|
|
}, [subCasteQuery.data]);
|
|
|
|
const cityOptions = useMemo(() => {
|
|
const raw = cityQuery.data;
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw;
|
|
return raw.subCaste || raw.district || raw.data || [];
|
|
}, [cityQuery.data]);
|
|
|
|
useEffect(() => {
|
|
inputRef.current?.focus();
|
|
}, []);
|
|
|
|
const handleChange = (field, value) => {
|
|
const arrayFields = new Set([
|
|
"castes",
|
|
"subCastes",
|
|
"occupations",
|
|
"educations",
|
|
"hobbies",
|
|
"states",
|
|
"districts",
|
|
]);
|
|
const nextValue =
|
|
arrayFields.has(field) && typeof value === "string"
|
|
? value.split(",").filter(Boolean)
|
|
: value;
|
|
const updates = { [field]: nextValue };
|
|
const fieldsToClear = [field];
|
|
|
|
if (field === "castes") {
|
|
updates.subCastes = [];
|
|
fieldsToClear.push("subCastes");
|
|
}
|
|
if (field === "states") {
|
|
updates.districts = [];
|
|
fieldsToClear.push("districts");
|
|
}
|
|
|
|
dispatch(updatePartnerPreferences(updates));
|
|
if (onFieldChange) onFieldChange(fieldsToClear);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
console.log("Submitting partner preferences:", data);
|
|
onSubmitStep();
|
|
};
|
|
|
|
const renderMultiSelect = ({
|
|
name,
|
|
label,
|
|
options,
|
|
value,
|
|
getLabel,
|
|
getValue,
|
|
disabled,
|
|
}) => (
|
|
<FormControl fullWidth variant="outlined" error={Boolean(errors[name])}>
|
|
<InputLabel id={`${name}-label`}>Select {label}</InputLabel>
|
|
<Select
|
|
labelId={`${name}-label`}
|
|
label={`Select ${label}`}
|
|
name={name}
|
|
multiple
|
|
value={value}
|
|
onChange={(e) => handleChange(name, e.target.value)}
|
|
disabled={disabled}
|
|
renderValue={(selected) =>
|
|
selected
|
|
.map((id) => {
|
|
const item = options.find((opt) => getValue(opt) === id);
|
|
return item ? getLabel(item) : id;
|
|
})
|
|
.join(", ")
|
|
}
|
|
sx={{
|
|
"& .MuiSelect-select.Mui-disabled": {
|
|
cursor: "not-allowed",
|
|
},
|
|
}}
|
|
>
|
|
{options.map((opt) => {
|
|
const optValue = getValue(opt);
|
|
const optLabel = getLabel(opt);
|
|
return (
|
|
<MenuItem key={optValue} value={optValue}>
|
|
<Checkbox checked={value.indexOf(optValue) > -1} />
|
|
<ListItemText primary={optLabel} />
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
</Select>
|
|
{errors[name] && (
|
|
<p
|
|
style={{
|
|
color: "#d32f2f",
|
|
margin: "3px 14px 0 14px",
|
|
fontSize: "0.75rem",
|
|
}}
|
|
>
|
|
{errors[name]}
|
|
</p>
|
|
)}
|
|
</FormControl>
|
|
);
|
|
|
|
return (
|
|
<div className="w-full max-w-[1200px] mx-auto 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">
|
|
{/* Age Range */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Age Range{requiredMark}
|
|
</label>
|
|
<FormControl
|
|
fullWidth
|
|
variant="outlined"
|
|
error={Boolean(errors.ageRange)}
|
|
>
|
|
<InputLabel id="ageRange-label">Select Age Range</InputLabel>
|
|
<Select
|
|
labelId="ageRange-label"
|
|
label="Select Age Range"
|
|
name="ageRange"
|
|
value={data.ageRange}
|
|
onChange={(e) => handleChange("ageRange", e.target.value)}
|
|
inputRef={inputRef}
|
|
disabled={isPartnerMastersLoading}
|
|
sx={{
|
|
"& .MuiSelect-select.Mui-disabled": {
|
|
cursor: "not-allowed",
|
|
},
|
|
}}
|
|
>
|
|
{ageRangeOptions.map((opt) => (
|
|
<MenuItem key={opt.id ?? opt} value={opt.id ?? opt}>
|
|
{opt.name || opt}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{errors.ageRange && (
|
|
<p
|
|
style={{
|
|
color: "#d32f2f",
|
|
margin: "3px 14px 0 14px",
|
|
fontSize: "0.75rem",
|
|
}}
|
|
>
|
|
{errors.ageRange}
|
|
</p>
|
|
)}
|
|
</FormControl>
|
|
</div>
|
|
|
|
{/* Caste */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Caste{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "castes",
|
|
label: "Caste",
|
|
options: casteOptions,
|
|
value: data.castes,
|
|
getLabel: (opt) => opt.caste_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: isPartnerMastersLoading,
|
|
})}
|
|
</div>
|
|
|
|
{/* Sub Caste */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Sub Caste{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "subCastes",
|
|
label: "Sub Caste",
|
|
options: subCasteOptions,
|
|
value: data.subCastes,
|
|
getLabel: (opt) =>
|
|
opt.sub_caste_name || opt.subCaste_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: data.castes.length === 0 || subCasteQuery.isLoading,
|
|
})}
|
|
</div>
|
|
|
|
{/* Occupation */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Occupation{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "occupations",
|
|
label: "Occupation",
|
|
options: occupationOptions,
|
|
value: data.occupations,
|
|
getLabel: (opt) => opt.occupation_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: isPartnerMastersLoading,
|
|
})}
|
|
</div>
|
|
|
|
{/* Qualification */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Qualification{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "educations",
|
|
label: "Qualification",
|
|
options: educationOptions,
|
|
value: data.educations,
|
|
getLabel: (opt) => opt.education_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: isPartnerMastersLoading,
|
|
})}
|
|
</div>
|
|
|
|
{/* Lifestyle and Hobbies */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Lifestyle & Hobbies{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "hobbies",
|
|
label: "Lifestyle & Hobbies",
|
|
options: hobbyOptions,
|
|
value: data.hobbies,
|
|
getLabel: (opt) => opt.hobby_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: isPartnerMastersLoading,
|
|
})}
|
|
</div>
|
|
|
|
{/* Annual Income */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
Annual Income{requiredMark}
|
|
</label>
|
|
<FormControl
|
|
fullWidth
|
|
variant="outlined"
|
|
error={Boolean(errors.annualIncome)}
|
|
>
|
|
<InputLabel id="annualIncome-label">
|
|
Select Annual Income
|
|
</InputLabel>
|
|
<Select
|
|
labelId="annualIncome-label"
|
|
label="Select Annual Income"
|
|
name="annualIncome"
|
|
value={data.annualIncome}
|
|
onChange={(e) => handleChange("annualIncome", e.target.value)}
|
|
disabled={isPartnerMastersLoading}
|
|
sx={{
|
|
"& .MuiSelect-select.Mui-disabled": {
|
|
cursor: "not-allowed",
|
|
},
|
|
}}
|
|
>
|
|
{annualIncomeOptions.map((opt) => (
|
|
<MenuItem key={opt.id ?? opt} value={opt.id ?? opt}>
|
|
{opt.annual_income_name || opt.name || opt}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{errors.annualIncome && (
|
|
<p
|
|
style={{
|
|
color: "#d32f2f",
|
|
margin: "3px 14px 0 14px",
|
|
fontSize: "0.75rem",
|
|
}}
|
|
>
|
|
{errors.annualIncome}
|
|
</p>
|
|
)}
|
|
</FormControl>
|
|
</div>
|
|
|
|
{/* State */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
State{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "states",
|
|
label: "State",
|
|
options: stateOptions,
|
|
value: data.states,
|
|
getLabel: (opt) => opt.state_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: isPartnerMastersLoading,
|
|
})}
|
|
</div>
|
|
|
|
{/* City */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-gray-900 text-[15px]">
|
|
City{requiredMark}
|
|
</label>
|
|
{renderMultiSelect({
|
|
name: "districts",
|
|
label: "City",
|
|
options: cityOptions,
|
|
value: data.districts,
|
|
getLabel: (opt) =>
|
|
opt.district_name || opt.city_name || opt.name || String(opt),
|
|
getValue: (opt) => opt.id ?? opt,
|
|
disabled: data.states.length === 0 || cityQuery.isLoading,
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
style={{
|
|
marginTop: 40,
|
|
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 PartnerPreferencesForm;
|