Match Report Header and LHN Avatars

src/components/AvatarWithDisplayName.js

@@ -11,7 +11,7 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import SubscriptAvatar from './SubscriptAvatar';
 import * as ReportUtils from '../libs/ReportUtils';
-import Avatar from './Avatar';
+import MultipleAvatars from './MultipleAvatars';
 import DisplayNames from './DisplayNames';
 import compose from '../libs/compose';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
@@ -53,42 +53,42 @@ const defaultProps = {
 };
 
 function AvatarWithDisplayName(props) {
-    const title = props.isAnonymous ? ReportUtils.getReportName(props.report) : ReportUtils.getDisplayNameForParticipant(props.report.ownerAccountID, true);
+    const title = ReportUtils.getReportName(props.report);
     const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
     const parentNavigationSubtitle = ReportUtils.getParentNavigationSubtitle(props.report);
-    const isExpenseReport = ReportUtils.isExpenseReport(props.report);
-    const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies);
+    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(props.report) || ReportUtils.isMoneyRequest(props.report);
+    const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies, true);
     const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.ownerAccountID], props.personalDetails);
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
-    const avatarContainerStyle = StyleUtils.getEmptyAvatarStyle(props.size) || styles.emptyAvatar;
+    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
+    const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
+    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
     return (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
             {Boolean(props.report && title) && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                    {isExpenseReport ? (
+                    {shouldShowSubscriptAvatar ? (
                         <SubscriptAvatar
                             backgroundColor={themeColors.highlightBG}
                             mainAvatar={icons[0]}
                             secondaryAvatar={icons[1]}
-                            size={props.size}
+                            size={defaultSubscriptSize}
                         />
                     ) : (
-                        <Avatar
+                        <MultipleAvatars
+                            icons={icons}
                             size={props.size}
-                            source={icons[0].source}
-                            type={icons[0].type}
-                            name={icons[0].name}
-                            containerStyles={avatarContainerStyle}
+                            secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG)]}
                         />
                     )}
-                    <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
+                    <View style={[styles.flex1, styles.flexColumn, shouldShowSubscriptAvatar && !isExpenseRequest ? styles.ml4 : {}]}>
                         <DisplayNames
                             fullTitle={title}
                             displayNamesWithTooltips={displayNamesWithTooltips}
                             tooltipEnabled
                             numberOfLines={1}
                             textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
-                            shouldUseFullTitle={isExpenseReport || props.isAnonymous}
+                            shouldUseFullTitle={isMoneyRequestOrReport || props.isAnonymous}
                         />
                         {!_.isEmpty(parentNavigationSubtitle) && (
                             <PressableWithoutFeedback

src/components/SubscriptAvatar.js

@@ -55,6 +55,7 @@ function SubscriptAvatar(props) {
             >
                 <View>
                     <Avatar
+                        containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(props.size || CONST.AVATAR_SIZE.DEFAULT))}
                         source={props.mainAvatar.source}
                         size={props.size || CONST.AVATAR_SIZE.DEFAULT}
                         name={props.mainAvatar.name}
@@ -68,7 +69,7 @@ function SubscriptAvatar(props) {
             >
                 <View style={props.size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.flex1 : {}}>
                     <Avatar
-                        containerStyles={[props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : subscriptSyle]}
+                        containerStyles={[isSmall ? styles.secondAvatarSubscriptCompact : subscriptSyle]}
                         iconAdditionalStyles={[
                             StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT),
                             StyleUtils.getBorderColorStyle(props.backgroundColor),

src/libs/ReportUtils.js

@@ -182,17 +182,6 @@ function isTaskAssignee(report) {
     return lodashGet(report, 'managerID') === currentUserAccountID;
 }
 
-/**
- * Checks if a report is an IOU or expense report.
- *
- * @param {Object|String} reportOrID
- * @returns {Boolean}
- */
-function isMoneyRequestReport(reportOrID) {
-    const report = _.isObject(reportOrID) ? reportOrID : allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`];
-    return isIOUReport(report) || isExpenseReport(report);
-}
-
 /**
  * Given a collection of reports returns them sorted by last read
  *
@@ -682,6 +671,44 @@ function isExpenseRequest(report) {
     return false;
 }
 
+/**
+ * An IOU Request is a thread where the parent report is an IOU Report and
+ * the parentReportAction is a transaction.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isIOURequest(report) {
+    if (isThread(report)) {
+        const parentReportAction = ReportActionsUtils.getParentReportAction(report);
+        const parentReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`];
+        return isIOUReport(parentReport) && ReportActionsUtils.isTransactionThread(parentReportAction);
+    }
+    return false;
+}
+
+/**
+ * Checks if a report is an IOU or expense request.
+ *
+ * @param {Object|String} reportOrID
+ * @returns {Boolean}
+ */
+function isMoneyRequest(reportOrID) {
+    const report = _.isObject(reportOrID) ? reportOrID : allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`];
+    return isIOURequest(report) || isExpenseRequest(report);
+}
+
+/**
+ * Checks if a report is an IOU or expense report.
+ *
+ * @param {Object|String} reportOrID
+ * @returns {Boolean}
+ */
+function isMoneyRequestReport(reportOrID) {
+    const report = _.isObject(reportOrID) ? reportOrID : allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`];
+    return isIOUReport(report) || isExpenseReport(report);
+}
+
 /**
  * Get welcome message based on room type
  * @param {Object} report
@@ -1301,12 +1328,12 @@ function getRootReportAndWorkspaceName(report) {
         return getRootReportAndWorkspaceName(parentReport);
     }
 
-    if (isIOUReport(report)) {
+    if (isIOURequest(report)) {
         return {
             rootReportName: lodashGet(report, 'displayName', ''),
         };
     }
-    if (isMoneyRequestReport(report)) {
+    if (isExpenseRequest(report)) {
         return {
             rootReportName: lodashGet(report, 'displayName', ''),
             workspaceName: isIOUReport(report) ? CONST.POLICY.OWNER_EMAIL_FAKE : getPolicyName(report, true),
@@ -2819,6 +2846,7 @@ export {
     isCompletedTaskReport,
     isTaskAssignee,
     isMoneyRequestReport,
+    isMoneyRequest,
     chatIncludesChronos,
     getNewMarkerReportActionID,
     canSeeDefaultRoom,

src/pages/home/ReportScreen.js

@@ -267,7 +267,7 @@ class ReportScreen extends React.Component {
 
         const parentReportAction = ReportActionsUtils.getParentReportAction(this.props.report);
         const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(parentReportAction);
-        const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction);
+        const isSingleTransactionView = ReportUtils.isMoneyRequest(this.props.report);
 
         const policy = this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.props.report.policyID}`];