feat: add agency information section and dynamic field labels to profile experience data

2026-04-14 07:54:25 +05:30
parent 369c7a0ac8
commit 66b233159a
4 changed files with 76 additions and 14 deletions
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -31,10 +31,19 @@ const mockData = {
 // 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 profile card data when no field values are available
--- a/src/app/(user)/user/profile/[id]/page.tsx
+++ b/src/app/(user)/user/profile/[id]/page.tsx
@@ -31,10 +31,19 @@ const mockData = {
 // 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
--- a/src/components/profile/ExperienceSection.tsx
+++ b/src/components/profile/ExperienceSection.tsx
@@ -2,14 +2,7 @@

 import { useState } from 'react';
 import { Tag } from './Tag';
-
-interface ExperienceData {
-  years: string;
-  contracts: string;
-  licensingAreas: string[];
-  expertiseYears: { area: string; years: string }[];
-  certifications: { name: string; org: string }[];
-}
+import type { ExperienceData } from '@/utils/profileDataMapper';

 interface ExperienceSectionProps {
  experience: ExperienceData;
@@ -24,6 +17,13 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
  const [showAllExpertise, setShowAllExpertise] = useState(false);
  const [showAllCertifications, setShowAllCertifications] = useState(false);

+  // Build agency display — append designation if flag is set
+  const agencyDisplay = experience.agencyName
+    ? (experience.agencyShowDesignation && experience.agencyDesignation
+        ? `${experience.agencyName} - ${experience.agencyDesignation}`
+        : experience.agencyName)
+    : '';
+
  // Calculate how many more items are hidden
  const licensingRemaining = experience.licensingAreas.length - INITIAL_DISPLAY_COUNT;
  const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT;
@@ -46,8 +46,22 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
      <div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
        {/* Left Column */}
        <div className="flex-1 space-y-4">
+          {agencyDisplay && (
+            <>
+              <div>
+                <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.agencySectionLabel}</p>
+                <ul className="list-disc list-inside">
+                  <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
+                    {agencyDisplay}
+                  </li>
+                </ul>
+              </div>
+              {/* Horizontal divider */}
+              <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
+            </>
+          )}
          <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Years in Experience</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.yearsLabel}</p>
            <ul className="list-disc list-inside">
              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                {experience.years !== '-' ? experience.years : <span className="text-[#00293D]/40">Not specified</span>}
@@ -57,7 +71,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
          {/* Horizontal divider */}
          <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
          <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contracts closed</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">{experience.contractsLabel}</p>
            <ul className="list-disc list-inside">
              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">
                {experience.contracts !== '-' ? experience.contracts : <span className="text-[#00293D]/40">Not specified</span>}
@@ -65,7 +79,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
            </ul>
          </div>
          <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Licensing &amp; Areas</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.licensingAreasLabel}</p>
            <div className="flex flex-wrap gap-2">
              {experience.licensingAreas.length > 0 ? (
                <>
@@ -105,7 +119,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
        {/* Right Column */}
        <div className="flex-1 space-y-4">
          <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.expertiseYearsLabel}</p>
            <div className="flex flex-wrap gap-2">
              {experience.expertiseYears.length > 0 ? (
                <>
@@ -137,7 +151,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
            </div>
          </div>
          <div>
-            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Certifications</p>
+            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">{experience.certificationsLabel}</p>
            {experience.certifications.length > 0 ? (
              <div>
                <ul className="space-y-3">
--- a/src/utils/profileDataMapper.ts
+++ b/src/utils/profileDataMapper.ts
@@ -3,10 +3,19 @@ import { FieldValueResponse } from '@/services/agents.service';
 // Experience data structure expected by ExperienceSection component
 export interface ExperienceData {
  years: string;
+  yearsLabel: string;
  contracts: string;
+  contractsLabel: string;
  licensingAreas: string[];
+  licensingAreasLabel: string;
  expertiseYears: { area: string; years: string }[];
+  expertiseYearsLabel: string;
  certifications: { name: string; org: string }[];
+  certificationsLabel: string;
+  agencyName: string;
+  agencyDesignation: string;
+  agencyShowDesignation: boolean;
+  agencySectionLabel: string;
 }

 // Certification entry from repeater field
@@ -23,6 +32,12 @@ function getFieldValue(fieldValues: FieldValueResponse[], slug: string): unknown
  return field?.value;
 }

+// Helper to get field label by slug
+function getFieldLabel(fieldValues: FieldValueResponse[], slug: string): string | undefined {
+  const field = fieldValues.find(f => f.fieldSlug === slug);
+  return field?.fieldName;
+}
+
 // Helper to get label from value for select/radio fields
 function mapYearsValueToLabel(value: string | undefined): string {
  if (!value) return '-';
@@ -115,12 +130,26 @@ export function mapFieldValuesToExperience(fieldValues: FieldValueResponse[]): E
  // Get certification entries from repeater
  const certificationEntries = getFieldValue(fieldValues, 'certification_entries');

+  // Agency & Designation fields
+  const agencyName = getFieldValue(fieldValues, 'agency_name') as string | undefined;
+  const agencyDesignation = getFieldValue(fieldValues, 'agency_designation') as string | undefined;
+  const agencyShowDesignation = getFieldValue(fieldValues, 'agency_show_designation');
+
  return {
    years: mapYearsValueToLabel(yearsInBusiness),
+    yearsLabel: getFieldLabel(fieldValues, 'years_in_business') || 'Years in Experience',
    contracts: formatContractsCount(contractsCompleted),
+    contractsLabel: getFieldLabel(fieldValues, 'contracts_completed') || 'Number of contracts closed',
    licensingAreas: licensedAreas || [],
+    licensingAreasLabel: getFieldLabel(fieldValues, 'licensed_areas') || 'Licensing & Areas',
    expertiseYears: parseExpertiseAreas(expertiseAreas),
+    expertiseYearsLabel: getFieldLabel(fieldValues, 'expertise_areas') || 'Areas in expertise & Years',
    certifications: parseCertifications(certificationEntries),
+    certificationsLabel: getFieldLabel(fieldValues, 'certification_entries') || 'Certifications',
+    agencyName: agencyName?.trim() || '',
+    agencyDesignation: agencyDesignation?.trim() || '',
+    agencyShowDesignation: agencyShowDesignation === true || agencyShowDesignation === 'true',
+    agencySectionLabel: getFieldLabel(fieldValues, 'agency_name') || 'Real Estate Agency & Designation',
  };
 }

@@ -133,7 +162,8 @@ export function hasExperienceData(experience: ExperienceData): boolean {
    experience.contracts !== '-' ||
    experience.licensingAreas.length > 0 ||
    experience.expertiseYears.length > 0 ||
-    experience.certifications.length > 0
+    experience.certifications.length > 0 ||
+    experience.agencyName.length > 0
  );
 }