434 lines
17 KiB
TypeScript
434 lines
17 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 { 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, ExperienceData, SpecializationFieldsData, ProfileCardData, ContactInfoData, AvailabilityData } from '@/utils/profileDataMapper';
|
|
|
|
// Mock data for sections not yet available from API
|
|
const mockData = {
|
|
preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
|
|
};
|
|
|
|
// Default experience data when no field values are available
|
|
const defaultExperience: ExperienceData = {
|
|
years: '-',
|
|
contracts: '-',
|
|
licensingAreas: [],
|
|
expertiseYears: [],
|
|
certifications: [],
|
|
};
|
|
|
|
// 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: [],
|
|
};
|
|
|
|
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 [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 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) {
|
|
console.error('Failed to fetch profile:', err);
|
|
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>
|
|
);
|
|
}
|
|
|
|
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 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<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">Unable to Load Profile</h2>
|
|
<p className="text-[14px] font-serif text-[#00293D]/70 mb-4">{error || 'Profile not found'}</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-6 py-2 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
|
|
>
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6">
|
|
{/* 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]">
|
|
{getProfileImageUrl() ? (
|
|
<>
|
|
{!imageLoaded && (
|
|
<div className="absolute inset-0 shimmer-loading rounded-[15px]" />
|
|
)}
|
|
{/* 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={`w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
|
onLoad={() => setImageLoaded(true)}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Image
|
|
src="/assets/icons/user-placeholder-icon.svg"
|
|
alt="Profile"
|
|
width={80}
|
|
height={80}
|
|
className="opacity-40"
|
|
/>
|
|
</div>
|
|
)}
|
|
{/* 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 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.city}, ${profileCardData.state}`
|
|
: profileCardData.city || profileCardData.state || 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"
|
|
connectionStatus={connectionStatus}
|
|
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="Availability"
|
|
icon={
|
|
<Image
|
|
src="/assets/icons/availability-clock-icon.svg"
|
|
alt="Availability"
|
|
width={28}
|
|
height={31}
|
|
/>
|
|
}
|
|
content={
|
|
<div>
|
|
{availabilityData.type && (
|
|
<p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{availabilityData.type}</p>
|
|
)}
|
|
<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=""
|
|
icon={
|
|
<Image
|
|
src="/assets/icons/work-environment-icon.svg"
|
|
alt="Work environment"
|
|
width={28}
|
|
height={28}
|
|
/>
|
|
}
|
|
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
|
|
/>
|
|
{testimonials.length > 0 && (
|
|
<InfoCard
|
|
title=""
|
|
icon={
|
|
<Image
|
|
src="/assets/icons/testimonial-star-icon.svg"
|
|
alt="Testimonial"
|
|
width={28}
|
|
height={28}
|
|
/>
|
|
}
|
|
content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">“{testimonials[0].text.length > 150 ? testimonials[0].text.substring(0, 150) + '...' : testimonials[0].text}”</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>
|
|
);
|
|
}
|