feat: implement dynamic contact info and availability mapping from field values, and enhance phone number masking.

This commit is contained in:
pradeepkumar
2026-02-02 10:19:55 +05:30
parent b5106945dc
commit 1faed9140c
4 changed files with 77 additions and 34 deletions

View File

@@ -19,14 +19,10 @@ 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 { mapFieldValuesToExperience, mapFieldValuesToSpecializationFields, mapFieldValuesToProfileCard, ExperienceData, SpecializationFieldsData, ProfileCardData } from '@/utils/profileDataMapper';
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 = {
availability: {
type: 'Full-time',
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
},
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',
testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
testimonials: [
@@ -77,6 +73,18 @@ const defaultProfileCardData: ProfileCardData = {
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;
@@ -87,6 +95,8 @@ export default function AgentProfileView() {
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);
@@ -136,6 +146,14 @@ export default function AgentProfileView() {
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);
// If avatar is an S3 key, fetch presigned URL
if (profile.avatar && isS3Key(profile.avatar)) {
try {
@@ -304,8 +322,8 @@ export default function AgentProfileView() {
{/* Contact Info */}
<ContactInfo
email={agentProfile.email || agentProfile.user?.email || ''}
phone={agentProfile.phone || ''}
email={agentProfile.email || agentProfile.user?.email || contactInfoData.email || ''}
phone={agentProfile.phone || contactInfoData.phone || ''}
/>
</div>
@@ -347,11 +365,17 @@ export default function AgentProfileView() {
}
content={
<div>
<p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{mockData.availability.type}</p>
{availabilityData.type && (
<p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{availabilityData.type}</p>
)}
<div className="space-y-1">
{mockData.availability.days.map((day) => (
<p key={day} className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]">{day}</p>
))}
{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>
}