Fall back on givenName/familyName if no displayName/organization

ts/components/conversation/EmbeddedContact.md

@@ -150,6 +150,44 @@ const View = Whisper.MessageView;
 </util.ConversationContext>;
 ```
 
+#### No displayName or organization
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  sent_at: Date.now() - 18000000,
+  contact: [
+    {
+      name: {
+        givenName: 'Someone',
+      },
+      number: [
+        {
+          value: '+12025551000',
+          type: 1,
+        },
+      ],
+      avatar: {
+        avatar: {
+          path: util.gifObjectUrl,
+        },
+      },
+    },
+  ],
+});
+const incoming = new Whisper.Message(
+  Object.assign({}, outgoing.attributes, {
+    source: '+12025550011',
+    type: 'incoming',
+  })
+);
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper View={View} options={{ model: incoming }} />
+  <util.BackboneWrapper View={View} options={{ model: outgoing }} />
+</util.ConversationContext>;
+```
+
 #### Default avatar
 
 ```jsx

ts/test/types/Contact_test.ts

@@ -0,0 +1,65 @@
+import 'mocha';
+import { assert } from 'chai';
+
+import { getName } from '../../types/Contact';
+
+describe('Contact', () => {
+  describe('getName', () => {
+    it('returns displayName if provided', () => {
+      const contact = {
+        name: {
+          displayName: 'displayName',
+          givenName: 'givenName',
+          familyName: 'familyName',
+        },
+        organization: 'Somewhere, Inc.',
+      };
+      const expected = 'displayName';
+      const actual = getName(contact);
+      assert.strictEqual(actual, expected);
+    });
+    it('returns organization if no displayName', () => {
+      const contact = {
+        name: {
+          givenName: 'givenName',
+          familyName: 'familyName',
+        },
+        organization: 'Somewhere, Inc.',
+      };
+      const expected = 'Somewhere, Inc.';
+      const actual = getName(contact);
+      assert.strictEqual(actual, expected);
+    });
+    it('returns givenName + familyName if no displayName or organization', () => {
+      const contact = {
+        name: {
+          givenName: 'givenName',
+          familyName: 'familyName',
+        },
+      };
+      const expected = 'givenName familyName';
+      const actual = getName(contact);
+      assert.strictEqual(actual, expected);
+    });
+    it('returns just givenName', () => {
+      const contact = {
+        name: {
+          givenName: 'givenName',
+        },
+      };
+      const expected = 'givenName';
+      const actual = getName(contact);
+      assert.strictEqual(actual, expected);
+    });
+    it('returns just familyName', () => {
+      const contact = {
+        name: {
+          familyName: 'familyName',
+        },
+      };
+      const expected = 'familyName';
+      const actual = getName(contact);
+      assert.strictEqual(actual, expected);
+    });
+  });
+});

ts/types/Contact.ts

@@ -17,7 +17,7 @@ interface Name {
   prefix?: string;
   suffix?: string;
   middleName?: string;
-  displayName: string;
+  displayName?: string;
 }
 
 export enum ContactType {
@@ -101,5 +101,11 @@ export function contactSelector(
 
 export function getName(contact: Contact): string | null {
   const { name, organization } = contact;
-  return (name && name.displayName) || organization || null;
+  const displayName = (name && name.displayName) || null;
+  const givenName = (name && name.givenName) || null;
+  const familyName = (name && name.familyName) || null;
+  const backupName =
+    (givenName && familyName && `${givenName} ${familyName}`) || null;
+
+  return displayName || organization || backupName || givenName || familyName;
 }