+
+ );
+ }
+
+ return (
+ {initials}
+
+ 
+
+ );
+ }
+
+ public renderName() {
+ const { contact } = this.props;
+
+ return {getName(contact)}
;
+ }
+
+ public renderContactShorthand() {
+ const { contact } = this.props;
+ const { number, email } = contact;
+ const firstNumber = number && number[0] && number[0].value;
+ const firstEmail = email && email[0] && email[0].value;
+
+ return {firstNumber || firstEmail}
;
+ }
+
+ public renderSendMessage() {
+ const { hasSignalAccount, i18n, onSendMessage } = this.props;
+
+ if (!hasSignalAccount) {
+ return null;
+ }
+
+ // We don't want the overall click handler for this element to fire, so we stop
+ // propagation before handing control to the caller's callback.
+ const onClick = (e: React.MouseEvent<{}>): void => {
+ e.stopPropagation();
+ onSendMessage();
+ };
+
+ return (
+
+
+
+ );
+ }
+
+ public renderAdditionalContact(
+ items: Array
+
+ );
+ });
+ }
+
+ public renderAddressLineIfTruthy(value: string | undefined) {
+ if (!value) {
+ return;
+ }
+
+ return {getLabelForContactMethod(item, i18n)}
+ {item.value}
+ {value}
;
+ }
+
+ public renderPOBox(poBox: string | undefined, i18n: Localizer) {
+ if (!poBox) {
+ return null;
+ }
+
+ return (
+
+ {i18n('poBox')} {poBox}
+
+ );
+ }
+
+ public renderAddressLineTwo(address: PostalAddress) {
+ if (address.city || address.region || address.postcode) {
+ return (
+
+ {address.city} {address.region} {address.postcode}
+
+ );
+ }
+
+ return null;
+ }
+
+ public renderAddresses(
+ addresses: Array
+
+ );
+ });
+ }
+
+ public render() {
+ const { contact, i18n } = this.props;
+
+ return (
+ {getLabelForAddress(address, i18n)}
+ {this.renderAddressLineIfTruthy(address.street)}
+ {this.renderPOBox(address.pobox, i18n)}
+ {this.renderAddressLineIfTruthy(address.neighborhood)}
+ {this.renderAddressLineTwo(address)}
+ {this.renderAddressLineIfTruthy(address.country)}
+
+ {this.renderAvatar()}
+ {this.renderName()}
+ {this.renderContactShorthand()}
+ {this.renderSendMessage()}
+ {this.renderAdditionalContact(contact.number, i18n)}
+ {this.renderAdditionalContact(contact.email, i18n)}
+ {this.renderAddresses(contact.address, i18n)}
+
+ );
+ }
+}
diff --git a/ts/components/conversation/EmbeddedContact.md b/ts/components/conversation/EmbeddedContact.md
new file mode 100644
index 000000000..0b790e3fa
--- /dev/null
+++ b/ts/components/conversation/EmbeddedContact.md
@@ -0,0 +1,244 @@
+### With a contact
+
+#### Including all data types
+
+```jsx
+const outgoing = new Whisper.Message({
+ type: 'outgoing',
+ sent_at: Date.now() - 18000000,
+ contact: [
+ {
+ name: {
+ displayName: 'Someone Somewhere',
+ },
+ number: [
+ {
+ value: util.CONTACTS[0].id,
+ type: 1,
+ },
+ ],
+ avatar: {
+ avatar: {
+ path: util.gifObjectUrl,
+ },
+ },
+ },
+ ],
+});
+const incoming = new Whisper.Message(
+ Object.assign({}, outgoing.attributes, {
+ source: '+12025550011',
+ type: 'incoming',
+ })
+);
+const View = Whisper.MessageView;
+
+
+ );
+ }
+
+ return (
+ {initials}
+
+
+
+ );
+ }
+
+ public renderName() {
+ const { contact } = this.props;
+
+ return {getName(contact)}
;
+ }
+
+ public renderContactShorthand() {
+ const { contact } = this.props;
+ const { number, email } = contact;
+ const firstNumber = number && number[0] && number[0].value;
+ const firstEmail = email && email[0] && email[0].value;
+
+ return {firstNumber || firstEmail}
;
+ }
+
+ public renderSendMessage() {
+ const { hasSignalAccount, i18n, onSendMessage } = this.props;
+
+ if (!hasSignalAccount) {
+ return null;
+ }
+
+ // We don't want the overall click handler for this element to fire, so we stop
+ // propagation before handing control to the caller's callback.
+ const onClick = (e: React.MouseEvent<{}>): void => {
+ e.stopPropagation();
+ onSendMessage();
+ };
+
+ return (
+
+
+
+ );
+ }
+
+ public render() {
+ const { onOpenContact } = this.props;
+
+ return (
+
+
+ );
+ }
+}
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts
index 1b8167c69..0e5b191e5 100644
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/ts/styleguide/StyleGuideUtil.ts
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { padStart, sample } from 'lodash';
+import libphonenumber from 'google-libphonenumber';
import _ from 'lodash';
import moment from 'moment';
@@ -17,6 +18,7 @@ export { BackboneWrapper } from '../components/utility/BackboneWrapper';
// Here we can make things inside Webpack available to Backbone views like preload.js.
import { Quote } from '../components/conversation/Quote';
+import { EmbeddedContact } from '../components/conversation/EmbeddedContact';
import * as HTML from '../html';
import * as Attachment from '../../ts/types/Attachment';
@@ -130,6 +132,7 @@ parent.Signal.Types.MIME = MIME;
parent.Signal.Types.Attachment = Attachment;
parent.Signal.Components = {
Quote,
+ EmbeddedContact,
};
parent.Signal.Util = Util;
parent.SignalService = SignalService;
@@ -194,6 +197,20 @@ group.contactCollection.add(CONTACTS[2]);
export { COLORS, CONTACTS, me, group };
parent.textsecure.storage.user.getNumber = () => ourNumber;
+parent.textsecure.messaging = {
+ getProfile: async (number: string): Promise
+ {this.renderAvatar()}
+
+ {this.renderSendMessage()}
+
+ {this.renderName()}
+ {this.renderContactShorthand()}
+
+