2245584734
Add min-w-0 to the flex-1 right content column so it can shrink below its content width (flex items default to min-width:auto), and break-words on the bio paragraph for long unbroken strings.
678 lines
23 KiB
TypeScript
678 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import { useParams } from "next/navigation";
|
|
import { useSession } from "next-auth/react";
|
|
|
|
// Import shared components
|
|
import {
|
|
InfoCard,
|
|
ExperienceSection,
|
|
ProfileCard,
|
|
SpecializationSection,
|
|
TestimonialsSection,
|
|
StatusButtons,
|
|
ContactInfo,
|
|
} from "@/components/profile";
|
|
import { ConnectRequestModal } from "@/components/modals";
|
|
import { MobileBackButton } from "@/components/layout/MobileBackButton";
|
|
import {
|
|
agentsService,
|
|
AgentProfile,
|
|
FieldValueResponse,
|
|
} from "@/services/agents.service";
|
|
import {
|
|
connectionRequestsService,
|
|
ConnectionStatus,
|
|
} from "@/services/connection-requests.service";
|
|
import { uploadService } from "@/services/upload.service";
|
|
import {
|
|
testimonialsService,
|
|
Testimonial,
|
|
} from "@/services/testimonials.service";
|
|
import {
|
|
mapFieldValuesToExperience,
|
|
mapFieldValuesToSpecializationFields,
|
|
mapFieldValuesToProfileCard,
|
|
mapFieldValuesToContactInfo,
|
|
mapFieldValuesToAvailability,
|
|
mapFieldValuesToWorkEnvironment,
|
|
mapFieldValuesToPersonalTagline,
|
|
ExperienceData,
|
|
SpecializationFieldsData,
|
|
ProfileCardData,
|
|
ContactInfoData,
|
|
AvailabilityData,
|
|
WorkEnvironmentData,
|
|
PersonalTaglineData,
|
|
} from "@/utils/profileDataMapper";
|
|
|
|
// Default work environment data
|
|
const defaultWorkEnvironmentData: WorkEnvironmentData = {
|
|
label: "Preferred Work Environment",
|
|
content: "",
|
|
};
|
|
|
|
// Default personal tagline data
|
|
const defaultPersonalTaglineData: PersonalTaglineData = {
|
|
label: "Personal Tagline",
|
|
content: "",
|
|
};
|
|
|
|
// Default experience data when no field values are available
|
|
const defaultExperience: ExperienceData = {
|
|
years: "-",
|
|
yearsLabel: "Years in Experience",
|
|
contracts: "-",
|
|
contractsLabel: "Number of contracts closed",
|
|
licensingAreas: [],
|
|
licensingAreasLabel: "Licensing & Areas",
|
|
expertiseYears: [],
|
|
expertiseYearsLabel: "Areas in expertise & Years",
|
|
certifications: [],
|
|
certificationsLabel: "Certifications",
|
|
agencyName: "",
|
|
agencyDesignation: "",
|
|
agencyShowDesignation: false,
|
|
agencySectionLabel: "Real Estate Agency & Designation",
|
|
};
|
|
|
|
// Default specialization fields data when no field values are available
|
|
const defaultSpecializationFieldsData: SpecializationFieldsData = {
|
|
fields: [],
|
|
};
|
|
|
|
// Default profile card data when no field values are available
|
|
const defaultProfileCardData: ProfileCardData = {
|
|
bio: "",
|
|
expertise: [],
|
|
serviceAreas: [],
|
|
city: null,
|
|
state: null,
|
|
};
|
|
|
|
// Default contact info data when no field values are available
|
|
const defaultContactInfoData: ContactInfoData = {
|
|
email: null,
|
|
phone: null,
|
|
};
|
|
|
|
// Default availability data when no field values are available
|
|
const defaultAvailabilityData: AvailabilityData = {
|
|
type: "",
|
|
schedule: [],
|
|
label: "Availability",
|
|
};
|
|
|
|
export default function AgentProfileView() {
|
|
const params = useParams();
|
|
const id = params.id as string;
|
|
const { data: session } = useSession();
|
|
|
|
const [agentProfile, setAgentProfile] = useState<AgentProfile | null>(null);
|
|
const [fieldValues, setFieldValues] = useState<FieldValueResponse[]>([]);
|
|
const [experienceData, setExperienceData] =
|
|
useState<ExperienceData>(defaultExperience);
|
|
const [specializationFieldsData, setSpecializationFieldsData] =
|
|
useState<SpecializationFieldsData>(defaultSpecializationFieldsData);
|
|
const [profileCardData, setProfileCardData] = useState<ProfileCardData>(
|
|
defaultProfileCardData,
|
|
);
|
|
const [contactInfoData, setContactInfoData] = useState<ContactInfoData>(
|
|
defaultContactInfoData,
|
|
);
|
|
const [availabilityData, setAvailabilityData] = useState<AvailabilityData>(
|
|
defaultAvailabilityData,
|
|
);
|
|
const [workEnvironmentData, setWorkEnvironmentData] =
|
|
useState<WorkEnvironmentData>(defaultWorkEnvironmentData);
|
|
const [personalTaglineData, setPersonalTaglineData] =
|
|
useState<PersonalTaglineData>(defaultPersonalTaglineData);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [imageError, setImageError] = useState(false);
|
|
const [imageLoaded, setImageLoaded] = useState(false);
|
|
const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
|
|
|
|
const [testimonials, setTestimonials] = useState<
|
|
{ id: string; text: string; author: string; role: string; rating: number }[]
|
|
>([]);
|
|
|
|
// Connect modal state
|
|
const [showConnectModal, setShowConnectModal] = useState(false);
|
|
const [connectionStatus, setConnectionStatus] =
|
|
useState<ConnectionStatus | null>(null);
|
|
const [connectionRequestId, setConnectionRequestId] = useState<string | null>(
|
|
null,
|
|
);
|
|
|
|
// Helper to check if avatar is an S3 key (not a full URL or local path)
|
|
const isS3Key = (avatar: string | null | undefined): boolean => {
|
|
if (!avatar) return false;
|
|
// S3 keys don't start with http or /
|
|
return !avatar.startsWith("http") && !avatar.startsWith("/");
|
|
};
|
|
|
|
// Fetch agent profile and field values on mount
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
if (!id) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
// Fetch profile, field values, and testimonials in parallel
|
|
const [profile, fieldValuesResponse, testimonialsData] =
|
|
await Promise.all([
|
|
agentsService.getAgentById(id),
|
|
agentsService.getFieldValuesByAgentId(id),
|
|
testimonialsService
|
|
.getAgentTestimonials(id)
|
|
.catch(() => [] as Testimonial[]),
|
|
]);
|
|
|
|
setAgentProfile(profile);
|
|
setFieldValues(fieldValuesResponse.fieldValues);
|
|
|
|
// Map field values to experience data structure
|
|
const mappedExperience = mapFieldValuesToExperience(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setExperienceData(mappedExperience);
|
|
|
|
// Map field values to specialization fields data (only fields from "Specialization" section)
|
|
const mappedSpecializationFields = mapFieldValuesToSpecializationFields(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setSpecializationFieldsData(mappedSpecializationFields);
|
|
|
|
// Map field values to profile card data (bio, expertise, location)
|
|
const mappedProfileCard = mapFieldValuesToProfileCard(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setProfileCardData(mappedProfileCard);
|
|
|
|
// Map field values to contact info data (email, phone)
|
|
const mappedContactInfo = mapFieldValuesToContactInfo(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setContactInfoData(mappedContactInfo);
|
|
|
|
// Map field values to availability data
|
|
const mappedAvailability = mapFieldValuesToAvailability(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setAvailabilityData(mappedAvailability);
|
|
|
|
// Map field values to work environment data
|
|
const mappedWorkEnv = mapFieldValuesToWorkEnvironment(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setWorkEnvironmentData(mappedWorkEnv);
|
|
|
|
// Map field values to personal tagline data
|
|
const mappedTagline = mapFieldValuesToPersonalTagline(
|
|
fieldValuesResponse.fieldValues,
|
|
);
|
|
setPersonalTaglineData(mappedTagline);
|
|
|
|
// Map testimonials for TestimonialsSection
|
|
setTestimonials(
|
|
testimonialsData.map((t) => ({
|
|
id: t.id,
|
|
text: t.text,
|
|
author: t.authorName,
|
|
role: t.authorRole,
|
|
rating: t.rating,
|
|
})),
|
|
);
|
|
|
|
// If avatar is an S3 key, fetch presigned URL
|
|
if (profile.avatar && isS3Key(profile.avatar)) {
|
|
try {
|
|
const presignedUrl = await uploadService.getPresignedDownloadUrl(
|
|
profile.avatar,
|
|
);
|
|
setAvatarUrl(presignedUrl);
|
|
} catch (avatarErr) {
|
|
console.error("Failed to get avatar URL:", avatarErr);
|
|
}
|
|
} else if (profile.avatar) {
|
|
setAvatarUrl(profile.avatar);
|
|
}
|
|
} catch (err: any) {
|
|
console.error("Failed to fetch profile:", err);
|
|
const status = err?.response?.status;
|
|
if (status === 403) {
|
|
setError(
|
|
"This profile is private. You don\u2019t have permission to view it.",
|
|
);
|
|
} else if (status === 404) {
|
|
setError("Profile not found.");
|
|
} else {
|
|
setError("Failed to load profile data");
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [id]);
|
|
|
|
// Fetch connection status when user is logged in
|
|
useEffect(() => {
|
|
const fetchConnectionStatus = async () => {
|
|
if (!id || !session) return;
|
|
|
|
try {
|
|
const statusResponse =
|
|
await connectionRequestsService.getConnectionStatus(id);
|
|
setConnectionStatus(statusResponse?.status || null);
|
|
setConnectionRequestId(statusResponse?.id || null);
|
|
} catch (err) {
|
|
console.error("Failed to fetch connection status:", err);
|
|
// Non-critical error, don't show to user
|
|
}
|
|
};
|
|
|
|
fetchConnectionStatus();
|
|
}, [id, session]);
|
|
|
|
// Handle connection request success
|
|
const handleConnectionSuccess = () => {
|
|
setConnectionStatus("PENDING");
|
|
};
|
|
|
|
// Handle unlink/disconnect
|
|
const handleUnlink = async () => {
|
|
if (!connectionRequestId) return;
|
|
|
|
try {
|
|
await connectionRequestsService.cancelRequest(connectionRequestId);
|
|
setConnectionStatus(null);
|
|
setConnectionRequestId(null);
|
|
} catch (err) {
|
|
console.error("Failed to unlink connection:", err);
|
|
}
|
|
};
|
|
|
|
const getProfileImageUrl = () => {
|
|
// If image failed to load, return null
|
|
if (imageError) {
|
|
return null;
|
|
}
|
|
|
|
// If we have a presigned URL from S3, use it
|
|
if (avatarUrl) {
|
|
return avatarUrl;
|
|
}
|
|
|
|
// Check for null, undefined, or empty string
|
|
if (!agentProfile?.avatar || agentProfile.avatar.trim() === "") {
|
|
return null;
|
|
}
|
|
|
|
// For relative paths (local assets), return as-is
|
|
if (agentProfile.avatar.startsWith("/")) {
|
|
return agentProfile.avatar;
|
|
}
|
|
|
|
// No image available
|
|
return null;
|
|
};
|
|
|
|
// Format member since date
|
|
const formatMemberSince = (dateString?: string) => {
|
|
if (!dateString) return "Member";
|
|
try {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("en-US", {
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
} catch {
|
|
return "Member";
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
|
<div className="flex items-center justify-center h-[calc(100vh-180px)]">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#E58625]"></div>
|
|
<p className="text-[14px] font-serif text-[#00293D]/70">
|
|
Loading profile...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isPermissionError =
|
|
error?.includes("permission") || error?.includes("private");
|
|
|
|
if (error || !agentProfile) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
|
<div className="flex items-center justify-center h-[calc(100vh-180px)]">
|
|
<div className="bg-white rounded-[20px] p-8 shadow-[0px_10px_20px_rgba(217,217,217,0.5)] max-w-md text-center">
|
|
<div
|
|
className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${isPermissionError ? "bg-[#e58625]/10" : "bg-red-100"}`}
|
|
>
|
|
{isPermissionError ? (
|
|
<svg
|
|
className="w-8 h-8 text-[#e58625]"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
className="w-8 h-8 text-red-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<h2 className="text-[18px] font-bold font-serif text-[#00293D] mb-2">
|
|
{isPermissionError
|
|
? "Profile Not Available"
|
|
: "Unable to Load Profile"}
|
|
</h2>
|
|
<p className="text-[14px] font-serif text-[#00293D]/70 mb-4">
|
|
{error || "Profile not found"}
|
|
</p>
|
|
<button
|
|
onClick={() => window.history.back()}
|
|
className="px-6 py-2 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
|
|
>
|
|
Go Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
const profileImage = getProfileImageUrl();
|
|
const profileSchema = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
|
|
name: `${agentProfile.firstName} ${agentProfile.lastName}`.trim(),
|
|
|
|
jobTitle: agentProfile.agentType?.name || "Real Estate Professional",
|
|
|
|
description:
|
|
profileCardData.bio ||
|
|
agentProfile.bio ||
|
|
"Verified real estate professional on RE-Quest.",
|
|
|
|
image: profileImage
|
|
? profileImage.startsWith("http")
|
|
? profileImage
|
|
: `https://re-quest.com${profileImage}`
|
|
: undefined,
|
|
|
|
email: agentProfile.email || agentProfile.user?.email || undefined,
|
|
|
|
telephone: agentProfile.phone || contactInfoData.phone || undefined,
|
|
|
|
url: `https://re-quest.com/user/profile/${id}`,
|
|
mainEntityOfPage: {
|
|
"@type": "WebPage",
|
|
"@id": `https://re-quest.com/user/profile/${id}`,
|
|
},
|
|
address: {
|
|
"@type": "PostalAddress",
|
|
addressLocality: profileCardData.city || undefined,
|
|
|
|
addressRegion: profileCardData.state || undefined,
|
|
},
|
|
|
|
memberOf: {
|
|
"@type": "Organization",
|
|
name: "RE-Quest",
|
|
url: "https://re-quest.com",
|
|
},
|
|
|
|
sameAs: [`https://re-quest.com/user/profile/${id}`],
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify(profileSchema),
|
|
}}
|
|
/>
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8 pt-2 pb-6 space-y-6">
|
|
<MobileBackButton
|
|
label="Back"
|
|
fallbackHref="/user/profiles"
|
|
alwaysShow
|
|
/>
|
|
{/* Main Layout - Responsive: Column on mobile, Row on desktop */}
|
|
<div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
|
|
{/* Left Sidebar - Status & Contact */}
|
|
<div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
|
|
{/* Profile Image */}
|
|
<div className="relative w-[200px] lg:w-[260px]">
|
|
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden bg-[#e8e8e8] relative">
|
|
{/* Shimmer while loading, initials only on error/no image */}
|
|
{imageError || !getProfileImageUrl() ? (
|
|
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center rounded-[15px]">
|
|
<span className="font-bold text-[#00293d] text-[80px]">
|
|
{agentProfile?.firstName?.[0]?.toUpperCase() || "?"}
|
|
</span>
|
|
</div>
|
|
) : !imageLoaded ? (
|
|
<div className="absolute inset-0 shimmer-loading rounded-[15px]" />
|
|
) : null}
|
|
{getProfileImageUrl() && (
|
|
<>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
ref={(el) => {
|
|
if (el?.complete) {
|
|
if (el.naturalWidth > 0) setImageLoaded(true);
|
|
else setImageError(true);
|
|
}
|
|
}}
|
|
src={getProfileImageUrl()!}
|
|
alt="Profile"
|
|
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? "opacity-100" : "opacity-0"}`}
|
|
onLoad={() => setImageLoaded(true)}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
</>
|
|
)}
|
|
{/* Gradient Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status Buttons - Public view shows availability status with Connect/Pending/Unlink button */}
|
|
<StatusButtons
|
|
isAvailable={agentProfile.isAvailable ?? true}
|
|
connectionStatus={connectionStatus}
|
|
onConnectClick={() => setShowConnectModal(true)}
|
|
onUnlinkClick={handleUnlink}
|
|
/>
|
|
|
|
{/* Contact Info */}
|
|
<ContactInfo
|
|
email={
|
|
agentProfile.email ||
|
|
agentProfile.user?.email ||
|
|
contactInfoData.email ||
|
|
""
|
|
}
|
|
phone={agentProfile.phone || contactInfoData.phone || ""}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Content - Profile Info + Experience + All Sections */}
|
|
<div className="flex-1 min-w-0 space-y-4">
|
|
{/* Profile Card - No edit button for user view */}
|
|
<ProfileCard
|
|
firstName={agentProfile.firstName}
|
|
lastName={agentProfile.lastName}
|
|
isVerified={agentProfile.isVerified}
|
|
title={agentProfile.agentType?.name || "Real Estate Agent"}
|
|
location={
|
|
profileCardData.city && profileCardData.state
|
|
? `${profileCardData.state}, ${profileCardData.city}`
|
|
: profileCardData.state ||
|
|
profileCardData.city ||
|
|
agentProfile.serviceAreas?.[0] ||
|
|
"-"
|
|
}
|
|
memberSince={formatMemberSince(
|
|
(agentProfile as unknown as { createdAt?: string }).createdAt,
|
|
)}
|
|
bio={profileCardData.bio || agentProfile.bio || ""}
|
|
expertise={
|
|
profileCardData.expertise.length > 0
|
|
? profileCardData.expertise
|
|
: agentProfile.specializations || []
|
|
}
|
|
showEditButton={false}
|
|
messageHref={`/user/message?agentProfileId=${agentProfile.id}`}
|
|
connectionStatus={connectionStatus}
|
|
isAvailable={agentProfile.isAvailable ?? true}
|
|
onConnectClick={() => setShowConnectModal(true)}
|
|
onUnlinkClick={handleUnlink}
|
|
/>
|
|
|
|
{/* Experience Section - Dynamic data from profile fields */}
|
|
<ExperienceSection experience={experienceData} />
|
|
|
|
{/* Info Cards Section */}
|
|
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
|
|
<InfoCard
|
|
title={availabilityData.label}
|
|
icon={
|
|
<Image
|
|
src="/assets/icons/availability-clock-icon.svg"
|
|
alt={availabilityData.label}
|
|
width={28}
|
|
height={31}
|
|
/>
|
|
}
|
|
content={
|
|
<div>
|
|
<div className="space-y-1">
|
|
{availabilityData.schedule.length > 0 ? (
|
|
availabilityData.schedule.map((item, index) => (
|
|
<p
|
|
key={index}
|
|
className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]"
|
|
>
|
|
{item}
|
|
</p>
|
|
))
|
|
) : (
|
|
<p className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]/60">
|
|
Not specified
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
<InfoCard
|
|
title={workEnvironmentData.label}
|
|
icon={
|
|
<Image
|
|
src="/assets/icons/work-environment-icon.svg"
|
|
alt={workEnvironmentData.label}
|
|
width={28}
|
|
height={28}
|
|
/>
|
|
}
|
|
content={
|
|
workEnvironmentData.content ? (
|
|
<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">
|
|
{workEnvironmentData.content}
|
|
</p>
|
|
) : (
|
|
<p className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]/60">
|
|
Not specified
|
|
</p>
|
|
)
|
|
}
|
|
/>
|
|
<InfoCard
|
|
title={personalTaglineData.label}
|
|
icon={
|
|
<Image
|
|
src="/assets/icons/testimonial-star-icon.svg"
|
|
alt={personalTaglineData.label}
|
|
width={28}
|
|
height={28}
|
|
/>
|
|
}
|
|
content={
|
|
personalTaglineData.content ? (
|
|
<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">
|
|
“
|
|
{personalTaglineData.content.length > 150
|
|
? personalTaglineData.content.substring(0, 150) + "..."
|
|
: personalTaglineData.content}
|
|
”
|
|
</p>
|
|
) : (
|
|
<p className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]/60">
|
|
Not specified
|
|
</p>
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* Specialization Section */}
|
|
<SpecializationSection fieldsData={specializationFieldsData} />
|
|
|
|
{/* Testimonials Section */}
|
|
<TestimonialsSection testimonials={testimonials} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connect Request Modal */}
|
|
<ConnectRequestModal
|
|
isOpen={showConnectModal}
|
|
onClose={() => setShowConnectModal(false)}
|
|
agentProfileId={id}
|
|
agentName={
|
|
`${agentProfile.firstName || ""} ${agentProfile.lastName || ""}`.trim() ||
|
|
"Agent"
|
|
}
|
|
existingStatus={connectionStatus}
|
|
onSuccess={handleConnectionSuccess}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|