fix: sort attendees with the app's preferred locale

Author: TaduJR

src/libs/AttendeeUtils.ts

@@ -136,14 +136,19 @@ function syncMissingAttendeesViolation<T extends {name: string}>(
 }
 
 /**
- * Enrich each attendee with the live displayName/avatar from `personalDetails` and return them sorted alphabetically.
- * Centralised so every attendee renderer (pills, copy value, accessibility label, violation check) shares one canonical order.
+ * Enrich each attendee with live `personalDetails` and return them sorted alphabetically by displayName.
  */
+function enrichAndSortAttendees(attendees: Attendee[], personalDetailsList: OnyxEntry<PersonalDetailsList>, localeCompare: LocaleContextProps['localeCompare']): Attendee[];
 function enrichAndSortAttendees(
-    attendees: Attendee[] | undefined,
+    attendees: Attendee[] | string | undefined,
+    personalDetailsList: OnyxEntry<PersonalDetailsList>,
+    localeCompare: LocaleContextProps['localeCompare'],
+): Attendee[] | string | undefined;
+function enrichAndSortAttendees(
+    attendees: Attendee[] | string | undefined,
     personalDetailsList: OnyxEntry<PersonalDetailsList>,
     localeCompare: LocaleContextProps['localeCompare'],
-): Attendee[] | undefined {
+): Attendee[] | string | undefined {
     if (!Array.isArray(attendees)) {
         return attendees;
     }

src/libs/TransactionUtils/index.ts

@@ -1201,15 +1201,27 @@ function getAttendees(transaction: OnyxInputOrEntry<Transaction>, currentUserPer
     return attendees;
 }
 
-// Mirrors LocaleContextProvider so output here matches the user-facing pill order.
-const ATTENDEES_DISPLAY_COLLATOR = new Intl.Collator(undefined, {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
+// Mirrors LocaleContextProvider (same options + same IntlStore source) so non-React callers sort by the user's preferred locale.
+const ATTENDEES_DISPLAY_COLLATOR_OPTIONS: Intl.CollatorOptions = {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'};
+const attendeesDisplayCollatorCache = new Map<string, Intl.Collator>();
+
+function getAttendeesDisplayCollator(): Intl.Collator {
+    const locale = IntlStore.getCurrentLocale() ?? '';
+    let collator = attendeesDisplayCollatorCache.get(locale);
+    if (!collator) {
+        collator = new Intl.Collator(locale || undefined, ATTENDEES_DISPLAY_COLLATOR_OPTIONS);
+        attendeesDisplayCollatorCache.set(locale, collator);
+    }
+    return collator;
+}
 
 /**
- * Return the attendees list as an alphabetically sorted display string. Sorting here keeps every consumer in sync.
+ * Returns attendees joined as an alphabetically sorted display string. Sort is part of the contract — every consumer relies on it.
  */
 function getAttendeesListDisplayString(attendees: Attendee[]): string {
+    const collator = getAttendeesDisplayCollator();
     return [...attendees]
-        .sort((a, b) => ATTENDEES_DISPLAY_COLLATOR.compare(a.displayName ?? a.login ?? '', b.displayName ?? b.login ?? ''))
+        .sort((a, b) => collator.compare(a.displayName ?? a.login ?? '', b.displayName ?? b.login ?? ''))
         .map((item) => item.displayName ?? item.login)
         .join(', ');
 }

tests/unit/AttendeeUtilsTest.ts

@@ -86,38 +86,47 @@ describe('AttendeeUtils', () => {
                 {email: 'a@x.com', displayName: 'apple', avatarUrl: '', login: 'a@x.com'},
             ];
 
-            expect(enrichAndSortAttendees(attendees, undefined, localeCompare)?.map((a) => a.displayName)).toEqual(['apple', 'banana']);
+            expect(enrichAndSortAttendees(attendees, undefined, localeCompare).map((a) => a.displayName)).toEqual(['apple', 'banana']);
         });
 
         it('enriches displayName and avatar from personalDetails when accountID matches', () => {
-            const attendees: Attendee[] = [{accountID: 1, displayName: 'Old', avatarUrl: 'old.png'} as Attendee];
-            const personalDetailsList = {1: {accountID: 1, displayName: 'New', avatar: 'new.png'}} as unknown as PersonalDetailsList;
+            const accountID = 1;
+            const attendees: Attendee[] = [{accountID, displayName: 'Old', avatarUrl: 'old.png'}];
+            const personalDetailsList: PersonalDetailsList = {[accountID]: {accountID, displayName: 'New', avatar: 'new.png'}};
 
             const result = enrichAndSortAttendees(attendees, personalDetailsList, localeCompare);
 
-            expect(result?.[0].displayName).toBe('New');
-            expect(result?.[0].avatarUrl).toBe('new.png');
+            expect(result.at(0)?.displayName).toBe('New');
+            expect(result.at(0)?.avatarUrl).toBe('new.png');
         });
 
         it('falls back to stored value when personalDetails has empty strings', () => {
-            const attendees: Attendee[] = [{accountID: 1, displayName: 'Stored', avatarUrl: 'stored.png'} as Attendee];
-            const personalDetailsList = {1: {accountID: 1, displayName: '', avatar: ''}} as unknown as PersonalDetailsList;
+            const accountID = 1;
+            const attendees: Attendee[] = [{accountID, displayName: 'Stored', avatarUrl: 'stored.png'}];
+            const personalDetailsList: PersonalDetailsList = {[accountID]: {accountID, displayName: '', avatar: ''}};
 
             const result = enrichAndSortAttendees(attendees, personalDetailsList, localeCompare);
 
-            expect(result?.[0].displayName).toBe('Stored');
-            expect(result?.[0].avatarUrl).toBe('stored.png');
+            expect(result.at(0)?.displayName).toBe('Stored');
+            expect(result.at(0)?.avatarUrl).toBe('stored.png');
         });
 
         it('sorts using enriched displayName so a profile rename moves the pill', () => {
-            const attendees: Attendee[] = [{accountID: 1, displayName: 'alice', avatarUrl: ''} as Attendee, {accountID: 2, displayName: 'bob', avatarUrl: ''} as Attendee];
-            const personalDetailsList = {1: {accountID: 1, displayName: 'zoe'}} as unknown as PersonalDetailsList;
+            const renamedAccountID = 1;
+            const attendees: Attendee[] = [
+                {accountID: renamedAccountID, displayName: 'alice', avatarUrl: ''},
+                {accountID: 2, displayName: 'bob', avatarUrl: ''},
+            ];
+            const personalDetailsList: PersonalDetailsList = {[renamedAccountID]: {accountID: renamedAccountID, displayName: 'zoe'}};
 
-            expect(enrichAndSortAttendees(attendees, personalDetailsList, localeCompare)?.map((a) => a.displayName)).toEqual(['bob', 'zoe']);
+            expect(enrichAndSortAttendees(attendees, personalDetailsList, localeCompare).map((a) => a.displayName)).toEqual(['bob', 'zoe']);
         });
 
         it('does not mutate the input array', () => {
-            const attendees: Attendee[] = [{displayName: 'banana', avatarUrl: ''} as Attendee, {displayName: 'apple', avatarUrl: ''} as Attendee];
+            const attendees: Attendee[] = [
+                {displayName: 'banana', avatarUrl: ''},
+                {displayName: 'apple', avatarUrl: ''},
+            ];
             const snapshot = [...attendees];
 
             enrichAndSortAttendees(attendees, undefined, localeCompare);