diff --git a/public/assets/icons/verified-expert-badge.svg b/public/assets/icons/verified-expert-badge.svg new file mode 100644 index 0000000..9b450e6 --- /dev/null +++ b/public/assets/icons/verified-expert-badge.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(user)/user/profile/[id]/page.tsx b/src/app/(user)/user/profile/[id]/page.tsx index 72303e9..c66420c 100644 --- a/src/app/(user)/user/profile/[id]/page.tsx +++ b/src/app/(user)/user/profile/[id]/page.tsx @@ -226,7 +226,7 @@ export default function AgentProfileView() { lastName={agentProfile.lastName} isVerified={agentProfile.isVerified} title={agentProfile.agentType?.name || 'Real Estate Agent'} - location={agentProfile.serviceAreas?.[0] || 'United States'} + location={agentProfile.serviceAreas?.[0] || '-'} memberSince={formatMemberSince((agentProfile as unknown as { createdAt?: string }).createdAt)} bio={agentProfile.bio || ''} expertise={agentProfile.specializations || []} diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx index d223ec7..a2c994e 100644 --- a/src/app/(user)/user/profiles/page.tsx +++ b/src/app/(user)/user/profiles/page.tsx @@ -27,7 +27,7 @@ function FilterSection({ title, options, selectedOptions, onToggle, showMore }:

{title}

@@ -62,12 +62,10 @@ interface ProfileCardProps { function ProfileCard({ profile }: ProfileCardProps) { const [showFullBio, setShowFullBio] = useState(false); + const [showAllTags, setShowAllTags] = useState(false); const [avatarUrl, setAvatarUrl] = useState(null); const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg'; - const truncatedBio = profile.bio && profile.bio.length > 150 - ? profile.bio.slice(0, 150) + '...' - : profile.bio || ''; // Fetch presigned URL for avatar if it's an S3 key useEffect(() => { @@ -103,11 +101,102 @@ function ProfileCard({ profile }: ProfileCardProps) { } }; + // Get location string - prefer city/state/country over serviceAreas + const getLocation = () => { + if (profile.city && profile.state) { + return `${profile.city}, ${profile.state}`; + } + if (profile.city && profile.country) { + return `${profile.city}, ${profile.country}`; + } + if (profile.state && profile.country) { + return `${profile.state}, ${profile.country}`; + } + if (profile.city) { + return profile.city; + } + if (profile.state) { + return profile.state; + } + if (profile.country) { + return profile.country; + } + if (profile.serviceAreas && profile.serviceAreas.length > 0) { + return profile.serviceAreas[0]; + } + return null; + }; + + // Extract expertise tags from fieldValues + const getExpertiseTags = (): string[] => { + const tags: string[] = []; + + // Add from fieldValues (dynamic profile fields like client_specialization, property_type, loan_type) + if (profile.fieldValues && profile.fieldValues.length > 0) { + profile.fieldValues.forEach((fv) => { + const value = fv.jsonValue; + if (Array.isArray(value)) { + // For multi-select fields, add all selected values + value.forEach((v) => { + if (typeof v === 'string' && v.trim()) { + // Convert snake_case to Title Case for display + const displayValue = v + .split('_') + .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) + .join(' '); + tags.push(displayValue); + } + }); + } else if (typeof value === 'string' && value.trim()) { + tags.push(value); + } + }); + } + + // Add from specializations array (legacy field) + if (profile.specializations && profile.specializations.length > 0) { + profile.specializations.forEach((spec) => { + if (!tags.includes(spec)) { + tags.push(spec); + } + }); + } + + // Add from languages array + if (profile.languages && profile.languages.length > 0) { + profile.languages.forEach((lang) => { + if (!tags.includes(lang)) { + tags.push(lang); + } + }); + } + + return tags; + }; + + // Get description from fieldValues (description field) or fallback to profile.bio + const getDescription = (): string | null => { + if (profile.fieldValues && profile.fieldValues.length > 0) { + const descField = profile.fieldValues.find(fv => fv.field.slug === 'description'); + if (descField && descField.textValue) { + return descField.textValue; + } + } + return profile.bio; + }; + + const location = getLocation(); + const expertiseTags = getExpertiseTags(); + const description = getDescription(); + const truncatedDescription = description && description.length > 200 + ? description.slice(0, 200) + '...' + : description || ''; + return ( -
- {/* Profile Image */} -
-
+
+ {/* Profile Image & View Profile Button */} +
+
{/* eslint-disable-next-line @next/next/no-img-element */}
- - @@ -128,107 +217,113 @@ function ProfileCard({ profile }: ProfileCardProps) { {/* Profile Info */}
- {/* Header */} -
+ {/* Header Row - Name, Verified, Match Badge */} +
+ {/* Name and Verified Badge */}
-

- {profile.firstName} {profile.lastName} +

+ {profile.firstName}{' '} + {profile.lastName}

{profile.isVerified && ( - + <> Verified - (Verified Expert) - + + (Verified Expert) + + )}
-

+ {/* Agent Type */} +

{profile.agentType?.name || 'Real Estate Professional'}

- {profile.rating && ( -
- {profile.rating.toFixed(1)} Rating -
- )} + + {/* Match Badge */} +
+ 95% Match +
{/* Location & Member Since */} -
- {profile.serviceAreas && profile.serviceAreas.length > 0 && ( -
+
+ {location && ( +
Location - {profile.serviceAreas[0]} + + {location} +
)} -
+
Member Since - + Member Since {formatMemberSince(profile.createdAt)}
- {/* Bio */} - {profile.bio && ( -

- {showFullBio ? profile.bio : truncatedBio} - {profile.bio.length > 150 && ( - - )} -

+ {/* Description */} + {description && ( +
+

+ {showFullBio ? description : truncatedDescription} + {description.length > 200 && ( + <> + {' '} + + + )} +

+
)} - {/* Specializations */} - {profile.specializations && profile.specializations.length > 0 && ( + {/* Expertise Tags */} + {expertiseTags.length > 0 && (
-

Expertise:

-
- {profile.specializations.map((tag, index) => ( +

Expertise:

+
+ {(showAllTags ? expertiseTags : expertiseTags.slice(0, 8)).map((tag, index) => ( {tag} ))} + {expertiseTags.length > 8 && ( + + )}
)} - - {/* Languages */} - {profile.languages && profile.languages.length > 0 && ( -
- {profile.languages.map((lang, index) => ( - - {lang} - - ))} -
- )}
); @@ -398,17 +493,15 @@ function ProfilesPageContent() {
@@ -424,7 +517,7 @@ function ProfilesPageContent() { className="text-[#00293d] hover:opacity-70" > - +
@@ -471,7 +564,7 @@ function ProfilesPageContent() { className="absolute right-2 top-1/2 -translate-y-1/2 w-[36px] h-[36px] bg-[#e58625] rounded-[8px] flex items-center justify-center" > - +
@@ -481,11 +574,10 @@ function ProfilesPageContent() {
@@ -493,24 +585,16 @@ function ProfilesPageContent() { ))}
- {/* Results Count */} - {!loading && ( -

- {totalResults} {totalResults === 1 ? 'agent' : 'agents'} found -

- )} - {/* Loading State */} {loading && (
diff --git a/src/components/profile/ContactInfo.tsx b/src/components/profile/ContactInfo.tsx index 45797e4..09f458a 100644 --- a/src/components/profile/ContactInfo.tsx +++ b/src/components/profile/ContactInfo.tsx @@ -29,12 +29,12 @@ export function ContactInfo({ email, phone }: ContactInfoProps) { return (
- Email: - + Email: + {showEmail ? email : maskEmail(email)}
- Ph.No: - + Ph.No: + {showPhone ? phone : maskPhone(phone)}