feat: Implement dynamic city and state retrieval and display for profiles, utilizing new data mapping and updated UI logic.

src/utils/profileDataMapper.ts

@@ -130,6 +130,8 @@ export interface ProfileCardData {
   bio: string;
   expertise: string[];
   serviceAreas: string[];
+  city: string | null;
+  state: string | null;
 }
 
 // Dynamic field data structure for SpecializationSection component
@@ -206,7 +208,31 @@ export function mapFieldValuesToAvailability(fieldValues: FieldValueResponse[]):
 }
 
 /**
- * Maps field values to profile card data (bio, expertise, service areas)
+ * Helper to format snake_case values to Title Case
+ */
+function formatSnakeCaseToTitleCase(value: string): string {
+  return value
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+}
+
+/**
+ * Extract all values from a field that may be an array (multiselect) or string
+ * Returns formatted values joined by comma, or null if empty
+ */
+function extractAllValues(value: unknown): string | null {
+  if (Array.isArray(value) && value.length > 0) {
+    return value.map(v => formatSnakeCaseToTitleCase(String(v))).join(', ');
+  }
+  if (typeof value === 'string' && value.trim()) {
+    return formatSnakeCaseToTitleCase(value);
+  }
+  return null;
+}
+
+/**
+ * Maps field values to profile card data (bio, expertise, service areas, location)
  */
 export function mapFieldValuesToProfileCard(fieldValues: FieldValueResponse[]): ProfileCardData {
   // Get bio/description from various possible fields
@@ -226,10 +252,16 @@ export function mapFieldValuesToProfileCard(fieldValues: FieldValueResponse[]):
   const licensedAreas = getFieldValue(fieldValues, 'licensed_areas') as string[] | undefined;
   const coverageAreas = getFieldValue(fieldValues, 'coverage_areas') as string[] | undefined;
 
+  // Get city and state from dynamic fields (multiselect fields)
+  const cityValue = getFieldValue(fieldValues, 'city');
+  const stateValue = getFieldValue(fieldValues, 'state');
+
   return {
     bio: description || descrption || biography || bio || '',
     expertise: aboutMeExpertise || expertiseAreas || specializations || areasOfExpertise || [],
     serviceAreas: serviceAreas || licensedAreas || coverageAreas || [],
+    city: extractAllValues(cityValue),
+    state: extractAllValues(stateValue),
   };
 }