Set up Avatars for Workspace Chats

src/components/MultipleAvatars.js

@@ -5,6 +5,7 @@ import styles from '../styles/styles';
 import Avatar from './Avatar';
 import Tooltip from './Tooltip';
 import Text from './Text';
+import SubscriptAvatar from './SubscriptAvatar';
 
 const propTypes = {
     /** Array of avatar URL */
@@ -25,6 +26,9 @@ const propTypes = {
 
     /** Tooltip for the Avatar */
     avatarTooltips: PropTypes.arrayOf(PropTypes.string),
+
+    /** Flag to show SubscriptAvatar component */
+    showSubscript: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -34,6 +38,7 @@ const defaultProps = {
     isChatRoom: false,
     isArchivedRoom: false,
     avatarTooltips: [],
+    showSubscript: false,
 };
 
 const MultipleAvatars = (props) => {
@@ -63,6 +68,15 @@ const MultipleAvatars = (props) => {
         );
     }
 
+    if (props.showSubscript) {
+        return (
+            <SubscriptAvatar
+                avatarImageURLs={props.avatarImageURLs}
+                avatarTooltips={props.avatarTooltips}
+            />
+        );
+    }
+
     return (
         <View style={avatarContainerStyles}>
             <View

src/components/SubscriptAvatar.js

@@ -0,0 +1,40 @@
+import React, {memo} from 'react';
+import PropTypes from 'prop-types';
+import {Image, View} from 'react-native';
+import styles from '../styles/styles';
+import Tooltip from './Tooltip';
+
+const propTypes = {
+    /** Array of avatar URL */
+    avatarImageURLs: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    /** Tooltip for the Avatar */
+    avatarTooltips: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const SubscriptAvatar = props => (
+    <View style={styles.emptyAvatar}>
+        <Tooltip text={props.avatarTooltips[0]} absolute>
+            <Image
+                source={{uri: props.avatarImageURLs[0]}}
+                style={styles.avatarNormal}
+            />
+        </Tooltip>
+        <View
+            style={[
+                styles.secondAvatarSubscript,
+                styles.secondAvatarHovered,
+            ]}
+        >
+            <Tooltip text={props.avatarTooltips[1]} absolute>
+                <Image
+                    source={{uri: props.avatarImageURLs[1]}}
+                    style={styles.singleSubscript}
+                />
+            </Tooltip>
+        </View>
+    </View>
+);
+
+SubscriptAvatar.propTypes = propTypes;
+export default memo(SubscriptAvatar);

src/libs/OptionsListUtils.js

@@ -164,13 +164,13 @@ function getParticipantNames(personalDetailList) {
  *
  * @param {Object} report
  * @param {Array} personalDetailList
- * @param {Boolean} isChatRoom
+ * @param {Boolean} isChatRoomOrPolicyExpenseChat
  * @return {String}
  */
-function getSearchText(report, personalDetailList, isChatRoom) {
+function getSearchText(report, personalDetailList, isChatRoomOrPolicyExpenseChat) {
     const searchTerms = [];
 
-    if (!isChatRoom) {
+    if (!isChatRoomOrPolicyExpenseChat) {
         _.each(personalDetailList, (personalDetail) => {
             searchTerms.push(personalDetail.displayName);
             searchTerms.push(personalDetail.login);
@@ -180,7 +180,7 @@ function getSearchText(report, personalDetailList, isChatRoom) {
         searchTerms.push(...report.reportName);
         searchTerms.push(..._.map(report.reportName.split(','), name => name.trim()));
 
-        if (isChatRoom) {
+        if (isChatRoomOrPolicyExpenseChat) {
             const chatRoomSubtitle = ReportUtils.getChatRoomSubtitle(report, policies);
             searchTerms.push(...chatRoomSubtitle);
             searchTerms.push(..._.map(chatRoomSubtitle.split(','), name => name.trim()));
@@ -208,16 +208,18 @@ function hasReportDraftComment(report) {
  * Creates a report list option
  *
  * @param {Array<Object>} personalDetailList
- * @param {Object} [report]
- * @param {Boolean} showChatPreviewLine
- * @param {Boolean} forcePolicyNamePreview
+ * @param {Object} report
+ * @param {Object} options
+ * @param {Boolean} options.showChatPreviewLine
+ * @param {Boolean} options.forcePolicyNamePreview
  * @returns {Object}
  */
 function createOption(personalDetailList, report, {
     showChatPreviewLine = false, forcePolicyNamePreview = false,
 }) {
     const isChatRoom = ReportUtils.isChatRoom(report);
-    const hasMultipleParticipants = personalDetailList.length > 1 || isChatRoom;
+    const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+    const hasMultipleParticipants = personalDetailList.length > 1 || isChatRoom || isPolicyExpenseChat;
     const personalDetail = personalDetailList[0];
     const hasDraftComment = hasReportDraftComment(report);
     const hasOutstandingIOU = lodashGet(report, 'hasOutstandingIOU', false);
@@ -239,7 +241,7 @@ function createOption(personalDetailList, report, {
     let text;
     let alternateText;
     let icons;
-    if (isChatRoom) {
+    if (isChatRoom || isPolicyExpenseChat) {
         text = lodashGet(report, ['reportName'], '');
         alternateText = (showChatPreviewLine && !forcePolicyNamePreview && lastMessageText)
             ? lastMessageText
@@ -274,13 +276,15 @@ function createOption(personalDetailList, report, {
         isUnread: report ? report.unreadActionCount > 0 : null,
         hasDraftComment,
         keyForList: report ? String(report.reportID) : personalDetail.login,
-        searchText: getSearchText(report, personalDetailList, isChatRoom),
+        searchText: getSearchText(report, personalDetailList, isChatRoom || isPolicyExpenseChat),
         isPinned: lodashGet(report, 'isPinned', false),
         hasOutstandingIOU,
         iouReportID: lodashGet(report, 'iouReportID'),
         isIOUReportOwner: lodashGet(iouReport, 'ownerEmail', '') === currentUserLogin,
         iouReportAmount: lodashGet(iouReport, 'total', 0),
         isChatRoom,
+        isPolicyExpenseChat,
+        showSubscript: isPolicyExpenseChat && !report.isOwnPolicyExpenseChat,
         isArchivedRoom: ReportUtils.isArchivedRoom(report),
     };
 }
@@ -396,7 +400,7 @@ function getOptions(reports, personalDetails, activeReportID, {
         const logins = lodashGet(report, ['participants'], []);
 
         // Report data can sometimes be incomplete. If we have no logins or reportID then we will skip this entry.
-        const shouldFilterNoParticipants = _.isEmpty(logins) && !ReportUtils.isChatRoom(report) && !ReportUtils.isDefaultRoom(report);
+        const shouldFilterNoParticipants = _.isEmpty(logins) && !ReportUtils.isChatRoom(report) && !ReportUtils.isDefaultRoom(report) && !ReportUtils.isPolicyExpenseChat(report);
         if (!report || !report.reportID || shouldFilterNoParticipants) {
             return;
         }
@@ -433,9 +437,10 @@ function getOptions(reports, personalDetails, activeReportID, {
         if (logins.length <= 1) {
             reportMapForLogins[logins[0]] = report;
         }
+        const isSearchingSomeonesPolicyExpenseChat = !report.isOwnPolicyExpenseChat && searchValue !== '';
         allReportOptions.push(createOption(reportPersonalDetails, report, {
             showChatPreviewLine,
-            forcePolicyNamePreview,
+            forcePolicyNamePreview: ReportUtils.isPolicyExpenseChat(report) ? isSearchingSomeonesPolicyExpenseChat : forcePolicyNamePreview,
         }));
     });
 
@@ -775,13 +780,29 @@ function getCurrencyListForSections(currencyOptions, searchValue) {
  *
  * @param {Object} report
  * @param {Object} personalDetails
- * @returns {String}
+ * @returns {String[]}
  */
 function getReportIcons(report, personalDetails) {
     // Default rooms have a specific avatar so we can return any non-empty array
     if (ReportUtils.isChatRoom(report)) {
         return [''];
     }
+
+    if (ReportUtils.isPolicyExpenseChat(report)) {
+        const policyExpenseChatAvatarURL = lodashGet(policies, [
+            `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatarURL',
+        ]);
+
+        // If the user is not an admin for this workspace chat, return avatar of the workspace
+        if (report.isOwnPolicyExpenseChat) {
+            return [policyExpenseChatAvatarURL];
+        }
+
+        // If the user is an admin, return avatar url of the other participant of the report
+        // (their workspace chat) and the avatar url of the workspace
+        return [lodashGet(personalDetails, [report.ownerEmail, 'avatarThumbnail']), policyExpenseChatAvatarURL];
+    }
+
     const sortedParticipants = _.map(report.participants, dmParticipant => ({
         firstName: lodashGet(personalDetails, [dmParticipant, 'firstName'], ''),
         avatar: lodashGet(personalDetails, [dmParticipant, 'avatarThumbnail'], '')

src/libs/actions/PersonalDetails.js

@@ -185,12 +185,12 @@ function getFromReportParticipants(reports) {
             // skip over default rooms which aren't named by participants.
             const reportsToUpdate = {};
             _.each(reports, (report) => {
-                if (report.participants.length <= 0 && !ReportUtils.isChatRoom(report)) {
+                if (report.participants.length <= 0 && !ReportUtils.isChatRoom(report) && !ReportUtils.isPolicyExpenseChat(report)) {
                     return;
                 }
 
                 const avatars = OptionsListUtils.getReportIcons(report, details);
-                const reportName = ReportUtils.isChatRoom(report)
+                const reportName = (ReportUtils.isChatRoom(report) || ReportUtils.isPolicyExpenseChat(report))
                     ? report.reportName
                     : _.chain(report.participants)
                         .filter(participant => participant !== currentUserEmail)

src/pages/home/sidebar/OptionRow.js

@@ -178,6 +178,7 @@ const OptionRow = (props) => {
                                         isChatRoom={props.option.isChatRoom}
                                         isArchivedRoom={props.option.isArchivedRoom}
                                         avatarTooltips={avatarTooltips}
+                                        showSubscript={props.option.showSubscript}
                                     />
                                 )
                             }
@@ -188,7 +189,7 @@ const OptionRow = (props) => {
                                     tooltipEnabled={props.showTitleTooltip}
                                     numberOfLines={1}
                                     textStyles={displayNameStyle}
-                                    shouldUseFullTitle={props.option.isChatRoom}
+                                    shouldUseFullTitle={props.option.isChatRoom || props.option.isPolicyExpenseChat}
                                 />
                                 {props.option.alternateText ? (
                                     <Text

src/styles/styles.js

@@ -1486,6 +1486,13 @@ const styles = {
         borderRadius: 24,
     },
 
+    singleSubscript: {
+        height: 20,
+        width: 20,
+        backgroundColor: themeColors.icon,
+        borderRadius: 20,
+    },
+
     singleAvatarSmall: {
         height: 18,
         width: 18,
@@ -1524,6 +1531,15 @@ const styles = {
         borderColor: 'transparent',
     },
 
+    secondAvatarSubscript: {
+        position: 'absolute',
+        right: -3,
+        bottom: -3,
+        borderWidth: 3,
+        borderRadius: 18,
+        borderColor: 'transparent',
+    },
+
     secondAvatarInline: {
         bottom: -3,
         right: -25,