refactor(contact): Implement phone number formatting for contact details in PDF

Author: jirhiker

src/components/pdf/FieldCompilationNotesPdf.tsx

@@ -14,10 +14,10 @@ import {
   buildPdfFilename,
   formatAddress,
   formatAppDate,
-  formatPhone,
   sanitizeContacts,
 } from '@/utils'
 import { usePrimaryAndSecondaryContact } from '@/hooks'
+import { formatContactPhones } from './fieldCompilationPhoneFormatter'
 
 const styles = StyleSheet.create({
   page: {
@@ -409,11 +409,6 @@ const locationNotesText = (well: IWell) =>
 
 const contactEmail = (contact?: IContact) => contact?.emails?.[0]?.email ?? '-'
 
-const contactPhone = (contact?: IContact) => {
-  const phone = contact?.phones?.[0]?.phone_number ?? null
-  return phone ? formatPhone(phone) : '-'
-}
-
 const contactAddress = (contact?: IContact) => {
   const address = contact?.addresses?.[0]
   return address ? formatAddress(address) : '-'
@@ -698,16 +693,31 @@ const FieldCompilationNotesPage = ({
                   </Text>
                 </View>
               </View>
-              <View style={styles.contactDetails}>
-                <Text style={styles.line}>{contactAddress(primaryContact)}</Text>
-                <Text style={styles.line}>
-                  <Text style={styles.label}>Phone: </Text>
-                  {contactPhone(primaryContact)}
-                </Text>
-                <Text style={styles.line}>
-                  <Text style={styles.label}>Email: </Text>
-                  {contactEmail(primaryContact)}
-                </Text>
+              <View style={styles.contactsRow}>
+                <View style={[styles.contactColumn, styles.contactDetails]}>
+                  <Text style={styles.line}>{contactAddress(primaryContact)}</Text>
+                  <Text style={styles.line}>
+                    <Text style={styles.label}>Phone: </Text>
+                    {formatContactPhones(primaryContact)}
+                  </Text>
+                  <Text style={styles.line}>
+                    <Text style={styles.label}>Email: </Text>
+                    {contactEmail(primaryContact)}
+                  </Text>
+                </View>
+                <View style={[styles.contactColumn, styles.contactDetails]}>
+                  <Text style={styles.line}>
+                    {contactAddress(secondaryContact)}
+                  </Text>
+                  <Text style={styles.line}>
+                    <Text style={styles.label}>Phone: </Text>
+                    {formatContactPhones(secondaryContact)}
+                  </Text>
+                  <Text style={styles.line}>
+                    <Text style={styles.label}>Email: </Text>
+                    {contactEmail(secondaryContact)}
+                  </Text>
+                </View>
               </View>
             </View>
 

src/components/pdf/fieldCompilationPhoneFormatter.ts

@@ -0,0 +1,19 @@
+import type { IContact } from '@/interfaces/ocotillo'
+import { formatPhone } from '@/utils/FormatPhone'
+
+export const formatContactPhones = (contact?: IContact) => {
+  const values =
+    contact?.phones
+      ?.map((phone) => {
+        const rawPhone = phone?.phone_number?.trim()
+        if (!rawPhone) return null
+
+        const formattedPhone = formatPhone(rawPhone)
+        return phone.phone_type
+          ? `${phone.phone_type}: ${formattedPhone}`
+          : formattedPhone
+      })
+      .filter((value): value is string => Boolean(value)) ?? []
+
+  return values.length > 0 ? values.join('\n') : '-'
+}

src/test/components/FieldCompilationNotesPdf.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import type { IContact } from '@/interfaces/ocotillo'
+import { formatContactPhones } from '@/components/pdf/fieldCompilationPhoneFormatter'
+
+const makeContact = (
+  phones: NonNullable<IContact['phones']>
+): IContact =>
+  ({
+    id: 1,
+    name: 'Test Contact',
+    created_at: new Date('2026-01-01T00:00:00Z'),
+    release_status: 'public',
+    phones,
+  }) as IContact
+
+describe('formatContactPhones', () => {
+  it('formats a single phone number with its type', () => {
+    const contact = makeContact([
+      {
+        id: 1,
+        created_at: new Date('2026-01-01T00:00:00Z'),
+        release_status: 'public',
+        contact_id: 1,
+        phone_number: '5053300761',
+        phone_type: 'Primary',
+      },
+    ])
+
+    expect(formatContactPhones(contact)).toBe('Primary: (505) 330-0761')
+  })
+
+  it('includes all phone numbers in stored order on separate lines', () => {
+    const contact = makeContact([
+      {
+        id: 1,
+        created_at: new Date('2026-01-01T00:00:00Z'),
+        release_status: 'public',
+        contact_id: 1,
+        phone_number: '5053300761',
+        phone_type: 'Work',
+      },
+      {
+        id: 2,
+        created_at: new Date('2026-01-01T00:00:00Z'),
+        release_status: 'public',
+        contact_id: 1,
+        phone_number: '15755551212',
+        phone_type: 'Mobile',
+      },
+    ])
+
+    expect(formatContactPhones(contact)).toBe(
+      'Work: (505) 330-0761\nMobile: +1 (575) 555-1212'
+    )
+  })
+
+  it('renders unlabeled numbers without a type prefix', () => {
+    const contact = makeContact([
+      {
+        id: 1,
+        created_at: new Date('2026-01-01T00:00:00Z'),
+        release_status: 'public',
+        contact_id: 1,
+        phone_number: '5053300761',
+        phone_type: '',
+      },
+    ])
+
+    expect(formatContactPhones(contact)).toBe('(505) 330-0761')
+  })
+
+  it('ignores empty numbers and falls back to dash when none remain', () => {
+    const contact = makeContact([
+      {
+        id: 1,
+        created_at: new Date('2026-01-01T00:00:00Z'),
+        release_status: 'public',
+        contact_id: 1,
+        phone_number: '   ',
+        phone_type: 'Primary',
+      },
+    ])
+
+    expect(formatContactPhones(contact)).toBe('-')
+    expect(formatContactPhones(undefined)).toBe('-')
+  })
+})