diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 52f12f17b..0e7649514 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -476,6 +476,18 @@ "message": "mobile", "description": "Shown on contact detail screen as a label for aa phone or email" }, + "email": { + "message": "email", + "description": "Generic label shown if contact email has custom type but no label" + }, + "phone": { + "message": "phone", + "description": "Generic label shown if contact phone has custom type but no label" + }, + "address": { + "message": "address", + "description": "Generic label shown if contact address has custom type but no label" + }, "poBox": { "message": "PO Box", "description": "When rendering an address, used to provide context to a post office box" diff --git a/ts/components/conversation/ContactDetail.md b/ts/components/conversation/ContactDetail.md index c5dde0473..9f87df8bf 100644 --- a/ts/components/conversation/ContactDetail.md +++ b/ts/components/conversation/ContactDetail.md @@ -62,6 +62,45 @@ const contact = { />; ``` +### With missing custom labels + +```jsx +const contact = { + avatar: { + avatar: { + path: util.gifObjectUrl, + }, + }, + name: { + displayName: 'Someone Somewhere', + }, + number: [ + { + value: '(202) 555-0000', + type: 4, + }, + ], + email: [ + { + value: 'someone2@somewhere.com', + type: 4, + }, + ], + address: [ + { + street: '10 Pike Place, Seattle WA', + type: 3, + }, + ], +}; + console.log('onSendMessage')} +/>; +``` + ### With default avatar ```jsx diff --git a/ts/components/conversation/ContactDetail.tsx b/ts/components/conversation/ContactDetail.tsx index 4c9812592..3343d6948 100644 --- a/ts/components/conversation/ContactDetail.tsx +++ b/ts/components/conversation/ContactDetail.tsx @@ -26,10 +26,10 @@ interface Props { onSendMessage: () => void; } -function getLabelForContactMethod(method: Phone | Email, i18n: Localizer) { +function getLabelForEmail(method: Email, i18n: Localizer): string { switch (method.type) { case ContactType.CUSTOM: - return method.label; + return method.label || i18n('email'); case ContactType.HOME: return i18n('home'); case ContactType.MOBILE: @@ -37,36 +37,63 @@ function getLabelForContactMethod(method: Phone | Email, i18n: Localizer) { case ContactType.WORK: return i18n('work'); default: - return missingCaseError(method.type); + throw missingCaseError(method.type); } } -function getLabelForAddress(address: PostalAddress, i18n: Localizer) { +function getLabelForPhone(method: Email, i18n: Localizer): string { + switch (method.type) { + case ContactType.CUSTOM: + return method.label || i18n('phone'); + case ContactType.HOME: + return i18n('home'); + case ContactType.MOBILE: + return i18n('mobile'); + case ContactType.WORK: + return i18n('work'); + default: + throw missingCaseError(method.type); + } +} + +function getLabelForAddress(address: PostalAddress, i18n: Localizer): string { switch (address.type) { case AddressType.CUSTOM: - return address.label; + return address.label || i18n('address'); case AddressType.HOME: return i18n('home'); case AddressType.WORK: return i18n('work'); default: - return missingCaseError(address.type); + throw missingCaseError(address.type); } } export class ContactDetail extends React.Component { - public renderAdditionalContact( - items: Array | undefined, - i18n: Localizer - ) { + public renderEmail(items: Array | undefined, i18n: Localizer) { + if (!items || items.length === 0) { + return; + } + + return items.map((item: Email) => { + return ( +
+
{getLabelForEmail(item, i18n)}
+ {item.value} +
+ ); + }); + } + + public renderPhone(items: Array | undefined, i18n: Localizer) { if (!items || items.length === 0) { return; } - return items.map((item: Phone | Email) => { + return items.map((item: Phone) => { return (
-
{getLabelForContactMethod(item, i18n)}
+
{getLabelForPhone(item, i18n)}
{item.value}
); @@ -136,8 +163,8 @@ export class ContactDetail extends React.Component { {renderName(contact)} {renderContactShorthand(contact)} {renderSendMessage({ hasSignalAccount, i18n, onSendMessage })} - {this.renderAdditionalContact(contact.number, i18n)} - {this.renderAdditionalContact(contact.email, i18n)} + {this.renderPhone(contact.number, i18n)} + {this.renderEmail(contact.email, i18n)} {this.renderAddresses(contact.address, i18n)} );