- 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:
@@ -20,6 +20,7 @@ import MemberCard from '../../components/MemberCard';
|
||||
import MemberBadge from '../../components/MemberBadge';
|
||||
import useMembers from '../../hooks/use-members';
|
||||
import useMemberTiers from '../../hooks/use-member-tiers';
|
||||
import useDirectoryConfig from '../../hooks/use-directory-config';
|
||||
|
||||
const MembersDirectory = () => {
|
||||
const [selectedMember, setSelectedMember] = useState(null);
|
||||
@@ -28,6 +29,7 @@ const MembersDirectory = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 12;
|
||||
const { tiers } = useMemberTiers();
|
||||
const { isFieldEnabled } = useDirectoryConfig();
|
||||
const allowedRoles = useMemo(() => [], []);
|
||||
const normalizeStatus = useCallback((status) => {
|
||||
if (typeof status === 'string') {
|
||||
@@ -242,7 +244,7 @@ const MembersDirectory = () => {
|
||||
{selectedMember.first_name} {selectedMember.last_name}
|
||||
<MemberBadge memberSince={selectedMember.member_since || selectedMember.created_at} tiers={tiers} />
|
||||
</DialogTitle>
|
||||
{selectedMember.directory_partner_name && (
|
||||
{isFieldEnabled('directory_partner_name') && selectedMember.directory_partner_name && (
|
||||
<DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
<span className="text-brand-purple ">Partner: {selectedMember.directory_partner_name}</span>
|
||||
@@ -252,7 +254,7 @@ const MembersDirectory = () => {
|
||||
|
||||
<div className="space-y-6 py-4">
|
||||
{/* Bio */}
|
||||
{selectedMember.directory_bio && (
|
||||
{isFieldEnabled('directory_bio') && selectedMember.directory_bio && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
About
|
||||
@@ -264,79 +266,81 @@ const MembersDirectory = () => {
|
||||
)}
|
||||
|
||||
{/* Contact Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Contact Information
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{selectedMember.directory_email && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Mail className="h-5 w-5 text-brand-purple " />
|
||||
{(isFieldEnabled('directory_email') || isFieldEnabled('directory_phone') || isFieldEnabled('directory_address') || isFieldEnabled('directory_dob')) && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Contact Information
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{isFieldEnabled('directory_email') && selectedMember.directory_email && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Mail className="h-5 w-5 text-brand-purple " />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||||
<a
|
||||
href={`mailto:${selectedMember.directory_email}`}
|
||||
className="text-[var(--purple-ink)] hover:text-brand-purple font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{selectedMember.directory_email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||||
<a
|
||||
href={`mailto:${selectedMember.directory_email}`}
|
||||
className="text-[var(--purple-ink)] hover:text-brand-purple font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{selectedMember.directory_email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{selectedMember.directory_phone && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Phone className="h-5 w-5 text-brand-purple " />
|
||||
{isFieldEnabled('directory_phone') && selectedMember.directory_phone && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Phone className="h-5 w-5 text-brand-purple " />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
|
||||
<a
|
||||
href={`tel:${selectedMember.directory_phone}`}
|
||||
className="text-[var(--purple-ink)] hover:text-brand-purple font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{selectedMember.directory_phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
|
||||
<a
|
||||
href={`tel:${selectedMember.directory_phone}`}
|
||||
className="text-[var(--purple-ink)] hover:text-brand-purple font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{selectedMember.directory_phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{selectedMember.directory_address && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<MapPin className="h-5 w-5 text-brand-purple " />
|
||||
{isFieldEnabled('directory_address') && selectedMember.directory_address && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<MapPin className="h-5 w-5 text-brand-purple " />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{selectedMember.directory_address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{selectedMember.directory_address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{selectedMember.directory_dob && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
{isFieldEnabled('directory_dob') && selectedMember.directory_dob && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(selectedMember.directory_dob)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(selectedMember.directory_dob)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Volunteer Interests */}
|
||||
{selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
|
||||
{isFieldEnabled('volunteer_interests') && selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Volunteer Interests
|
||||
@@ -355,7 +359,7 @@ const MembersDirectory = () => {
|
||||
)}
|
||||
|
||||
{/* Social Media */}
|
||||
{(selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
|
||||
{isFieldEnabled('social_media') && (selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
|
||||
selectedMember.social_media_twitter || selectedMember.social_media_linkedin) && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
|
||||
Reference in New Issue
Block a user