Use system nickname or first name for incoming group calls

ts/components/CallingLobby.tsx

@@ -39,11 +39,18 @@ export type PropsType = {
     | 'phoneNumber'
     | 'profileName'
     | 'sharedGroupNames'
+    | 'systemGivenName'
+    | 'systemNickname'
     | 'title'
     | 'type'
     | 'unblurredAvatarPath'
   >;
-  groupMembers?: Array<Pick<ConversationType, 'id' | 'firstName' | 'title'>>;
+  groupMembers?: Array<
+    Pick<
+      ConversationType,
+      'id' | 'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+    >
+  >;
   hasLocalAudio: boolean;
   hasLocalVideo: boolean;
   i18n: LocalizerType;

ts/components/CallingPreCallInfo.tsx

@@ -25,6 +25,8 @@ export type PropsType = {
     | 'phoneNumber'
     | 'profileName'
     | 'sharedGroupNames'
+    | 'systemGivenName'
+    | 'systemNickname'
     | 'title'
     | 'type'
     | 'unblurredAvatarPath'
@@ -34,10 +36,18 @@ export type PropsType = {
   ringMode: RingMode;
 
   // The following should only be set for group conversations.
-  groupMembers?: Array<Pick<ConversationType, 'id' | 'firstName' | 'title'>>;
+  groupMembers?: Array<
+    Pick<
+      ConversationType,
+      'id' | 'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+    >
+  >;
   isCallFull?: boolean;
   peekedParticipants?: Array<
-    Pick<ConversationType, 'firstName' | 'title' | 'serviceId'>
+    Pick<
+      ConversationType,
+      'firstName' | 'systemGivenName' | 'systemNickname' | 'title' | 'serviceId'
+    >
   >;
 };
 

ts/components/IncomingCallBar.tsx

@@ -53,8 +53,16 @@ export type PropsType = {
     }
   | {
       callMode: CallMode.Group;
-      otherMembersRung: Array<Pick<ConversationType, 'firstName' | 'title'>>;
-      ringer: Pick<ConversationType, 'firstName' | 'title'>;
+      otherMembersRung: Array<
+        Pick<
+          ConversationType,
+          'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+        >
+      >;
+      ringer: Pick<
+        ConversationType,
+        'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+      >;
     }
 );
 
@@ -96,8 +104,16 @@ function GroupCallMessage({
   ringer,
 }: Readonly<{
   i18n: LocalizerType;
-  otherMembersRung: Array<Pick<ConversationType, 'firstName' | 'title'>>;
-  ringer: Pick<ConversationType, 'firstName' | 'title'>;
+  otherMembersRung: Array<
+    Pick<
+      ConversationType,
+      'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+    >
+  >;
+  ringer: Pick<
+    ConversationType,
+    'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+  >;
 }>): JSX.Element {
   // As an optimization, we only process the first two names.
   const [first, second] = otherMembersRung

ts/test-both/util/callingGetParticipantName_test.ts

@@ -20,4 +20,25 @@ describe('getParticipantName', () => {
 
     assert.strictEqual(getParticipantName(participant), 'Foo Bar');
   });
+
+  it('returns system given name if available', () => {
+    const participant = {
+      firstName: 'Foo',
+      systemGivenName: 'Foo from that party',
+      title: 'Foo Bar',
+    };
+
+    assert.strictEqual(getParticipantName(participant), 'Foo from that party');
+  });
+
+  it('returns system nickname if available', () => {
+    const participant = {
+      firstName: 'Foo',
+      systemGivenName: 'Foo from that party',
+      systemNickname: 'Foo-chan',
+      title: 'Foo Bar',
+    };
+
+    assert.strictEqual(getParticipantName(participant), 'Foo-chan');
+  });
 });

ts/util/callingGetParticipantName.ts

@@ -4,7 +4,17 @@
 import type { ConversationType } from '../state/ducks/conversations';
 
 export function getParticipantName(
-  participant: Readonly<Pick<ConversationType, 'firstName' | 'title'>>
+  participant: Readonly<
+    Pick<
+      ConversationType,
+      'firstName' | 'systemGivenName' | 'systemNickname' | 'title'
+    >
+  >
 ): string {
-  return participant.firstName || participant.title;
+  return (
+    participant.systemNickname ||
+    participant.systemGivenName ||
+    participant.firstName ||
+    participant.title
+  );
 }