- Created useDirectoryConfig hook (src/hooks/use-directory-config.js)
- Updated Profile.js - conditional rendering with isFieldEnabled() - Updated MemberCard.js - conditional rendering for directory fields - Updated MembersDirectory.js - conditional rendering in profile dialog - Created AdminDirectorySettings.js - Admin UI for toggling fields - Updated SettingsSidebar.js - Added Directory and Registration tabs - Updated App.js - Added routes for new settings pages
This commit is contained in:
@@ -13,6 +13,7 @@ import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
|
||||
import ChangePasswordDialog from '../components/ChangePasswordDialog';
|
||||
import PaymentMethodsSection from '../components/PaymentMethodsSection';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import useDirectoryConfig from '../hooks/use-directory-config';
|
||||
|
||||
const Profile = () => {
|
||||
const { user } = useAuth();
|
||||
@@ -29,6 +30,7 @@ const Profile = () => {
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
const [initialFormData, setInitialFormData] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const { isFieldEnabled, loading: directoryConfigLoading } = useDirectoryConfig();
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
@@ -427,107 +429,121 @@ const Profile = () => {
|
||||
</div>
|
||||
|
||||
{/* Member Directory Settings */}
|
||||
<div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
|
||||
<h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<BookUser className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
Member Directory Settings
|
||||
</h4>
|
||||
<p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Control your visibility and information in the member directory.
|
||||
</p>
|
||||
{isFieldEnabled('show_in_directory') && (
|
||||
<div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
|
||||
<h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<BookUser className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
Member Directory Settings
|
||||
</h4>
|
||||
<p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Control your visibility and information in the member directory.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-3 p-4 bg-[var(--lavender-400)] rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="show_in_directory"
|
||||
name="show_in_directory"
|
||||
checked={formData.show_in_directory}
|
||||
onChange={handleCheckboxChange}
|
||||
className="ui-checkbox"
|
||||
/>
|
||||
<Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
|
||||
Include me in the member directory
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{formData.show_in_directory && (
|
||||
<div className="space-y-4 pl-4 border-l-4 border-[var(--neutral-800)]">
|
||||
<div>
|
||||
<Label htmlFor="directory_email">Directory Email</Label>
|
||||
<Input
|
||||
id="directory_email"
|
||||
name="directory_email"
|
||||
type="email"
|
||||
value={formData.directory_email}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - email to show in directory"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="directory_bio">Bio</Label>
|
||||
<Textarea
|
||||
id="directory_bio"
|
||||
name="directory_bio"
|
||||
value={formData.directory_bio}
|
||||
onChange={handleInputChange}
|
||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
|
||||
placeholder="Tell other members about yourself..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="directory_address">Address</Label>
|
||||
<Input
|
||||
id="directory_address"
|
||||
name="directory_address"
|
||||
value={formData.directory_address}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - address to show in directory"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="directory_phone">Phone</Label>
|
||||
<Input
|
||||
id="directory_phone"
|
||||
name="directory_phone"
|
||||
type="tel"
|
||||
value={formData.directory_phone}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - phone to show in directory"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="directory_dob">Date of Birth</Label>
|
||||
<Input
|
||||
id="directory_dob"
|
||||
name="directory_dob"
|
||||
type="date"
|
||||
value={formData.directory_dob}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="directory_partner_name">Partner Name</Label>
|
||||
<Input
|
||||
id="directory_partner_name"
|
||||
name="directory_partner_name"
|
||||
value={formData.directory_partner_name}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - partner name to show in directory"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 bg-[var(--lavender-400)] rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="show_in_directory"
|
||||
name="show_in_directory"
|
||||
checked={formData.show_in_directory}
|
||||
onChange={handleCheckboxChange}
|
||||
className="ui-checkbox"
|
||||
/>
|
||||
<Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
|
||||
Include me in the member directory
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{formData.show_in_directory && (
|
||||
<div className="space-y-4 pl-4 border-l-4 border-[var(--neutral-800)]">
|
||||
{isFieldEnabled('directory_email') && (
|
||||
<div>
|
||||
<Label htmlFor="directory_email">Directory Email</Label>
|
||||
<Input
|
||||
id="directory_email"
|
||||
name="directory_email"
|
||||
type="email"
|
||||
value={formData.directory_email}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - email to show in directory"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFieldEnabled('directory_bio') && (
|
||||
<div>
|
||||
<Label htmlFor="directory_bio">Bio</Label>
|
||||
<Textarea
|
||||
id="directory_bio"
|
||||
name="directory_bio"
|
||||
value={formData.directory_bio}
|
||||
onChange={handleInputChange}
|
||||
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
|
||||
placeholder="Tell other members about yourself..."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFieldEnabled('directory_address') && (
|
||||
<div>
|
||||
<Label htmlFor="directory_address">Address</Label>
|
||||
<Input
|
||||
id="directory_address"
|
||||
name="directory_address"
|
||||
value={formData.directory_address}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - address to show in directory"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFieldEnabled('directory_phone') && (
|
||||
<div>
|
||||
<Label htmlFor="directory_phone">Phone</Label>
|
||||
<Input
|
||||
id="directory_phone"
|
||||
name="directory_phone"
|
||||
type="tel"
|
||||
value={formData.directory_phone}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - phone to show in directory"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFieldEnabled('directory_dob') && (
|
||||
<div>
|
||||
<Label htmlFor="directory_dob">Date of Birth</Label>
|
||||
<Input
|
||||
id="directory_dob"
|
||||
name="directory_dob"
|
||||
type="date"
|
||||
value={formData.directory_dob}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFieldEnabled('directory_partner_name') && (
|
||||
<div>
|
||||
<Label htmlFor="directory_partner_name">Partner Name</Label>
|
||||
<Input
|
||||
id="directory_partner_name"
|
||||
name="directory_partner_name"
|
||||
value={formData.directory_partner_name}
|
||||
onChange={handleInputChange}
|
||||
className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
|
||||
placeholder="Optional - partner name to show in directory"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -664,34 +680,36 @@ const Profile = () => {
|
||||
</div>
|
||||
|
||||
{/* Volunteer Interests */}
|
||||
<div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
|
||||
<h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Users className="h-5 w-5 text-brand-purple" />
|
||||
Volunteer Interests
|
||||
</h4>
|
||||
<p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Select areas where you'd like to volunteer and help our community.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
{volunteerOptions.map(option => (
|
||||
<div key={option} className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
|
||||
checked={formData.volunteer_interests.includes(option)}
|
||||
onChange={() => handleVolunteerToggle(option)}
|
||||
className="ui-checkbox"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
|
||||
className="cursor-pointer text-[var(--purple-ink)]"
|
||||
>
|
||||
{option}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
{isFieldEnabled('volunteer_interests') && (
|
||||
<div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
|
||||
<h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Users className="h-5 w-5 text-brand-purple" />
|
||||
Volunteer Interests
|
||||
</h4>
|
||||
<p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Select areas where you'd like to volunteer and help our community.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
{volunteerOptions.map(option => (
|
||||
<div key={option} className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
|
||||
checked={formData.volunteer_interests.includes(option)}
|
||||
onChange={() => handleVolunteerToggle(option)}
|
||||
className="ui-checkbox"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
|
||||
className="cursor-pointer text-[var(--purple-ink)]"
|
||||
>
|
||||
{option}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user