Show transaction amount & description in report header for "transaction thread"

src/components/MoneyRequestHeader.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
 import iouReportPropTypes from '../pages/iouReportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -19,11 +20,17 @@ import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import Icon from './Icon';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import DateUtils from '../libs/DateUtils';
+import ONYXKEYS from '../ONYXKEYS';
 
 const propTypes = {
     /** The report currently being looked at */
     report: iouReportPropTypes.isRequired,
 
+    /** The expense report or iou report (only will have a value if this is a transaction thread) */
+    parentReport: iouReportPropTypes,
+
     /** The policies which the user has access to and which the report could be tied to */
     policies: PropTypes.shape({
         /** Name of the policy */
@@ -41,16 +48,27 @@ const propTypes = {
 
 const defaultProps = {
     isSingleTransactionView: false,
+    parentReport: {},
 };
 
 const MoneyRequestHeader = (props) => {
+    // These are only used for the single transaction view and not "money requests"
+    const transactionAmount = lodashGet(props.parentReportAction, ['originalMessage', 'amount']);
+    const transactionCurrency = lodashGet(props.parentReportAction, ['originalMessage', 'currency']);
+    const transactionDescription = lodashGet(props.parentReportAction, ['originalMessage', 'comment']);
+    const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
+    const transactionDate = lodashGet(props.parentReportAction, ['created']);
+    const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate);
+
     const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
-    const isSettled = ReportUtils.isSettled(props.report.reportID);
-    const isExpenseReport = ReportUtils.isExpenseReport(props.report);
-    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail);
+
+    const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
+    const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport);
+    const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail);
     const payeeAvatar = isExpenseReport
-        ? ReportUtils.getWorkspaceAvatar(props.report)
-        : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.report.managerEmail);
+        ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
+        : ReportUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail);
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             <HeaderWithCloseButton
@@ -64,7 +82,7 @@ const MoneyRequestHeader = (props) => {
                     },
                 ]}
                 threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton}
-                report={props.report}
+                report={moneyRequestReport}
                 policies={props.policies}
                 personalDetails={props.personalDetails}
                 shouldShowCloseButton={false}
@@ -111,6 +129,23 @@ const MoneyRequestHeader = (props) => {
                     </View>
                 </View>
             </View>
+            {props.isSingleTransactionView && (
+                <>
+                    <MenuItemWithTopDescription
+                        title={formattedTransactionAmount}
+                        description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}`}
+                        titleStyle={styles.newKansasLarge}
+                    />
+                    <MenuItemWithTopDescription
+                        description={props.translate('common.description')}
+                        title={transactionDescription}
+                    />
+                    <MenuItemWithTopDescription
+                        description={props.translate('common.date')}
+                        title={formattedTransactionDate}
+                    />
+                </>
+            )}
         </View>
     );
 };
@@ -119,4 +154,12 @@ MoneyRequestHeader.displayName = 'MoneyRequestHeader';
 MoneyRequestHeader.propTypes = propTypes;
 MoneyRequestHeader.defaultProps = defaultProps;
 
-export default compose(withWindowDimensions, withLocalize)(MoneyRequestHeader);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withOnyx({
+        parentReport: {
+            key: (props) => `${ONYXKEYS.COLLECTION.REPORT}${props.report.parentReportID}`,
+        },
+    }),
+)(MoneyRequestHeader);

src/libs/DateUtils.js

@@ -192,6 +192,19 @@ function subtractMillisecondsFromDateTime(dateTime, milliseconds) {
     return getDBTime(newTimestamp);
 }
 
+/**
+ * @param {string} isoTimestamp example: 2023-05-16 05:34:14.388
+ * @returns {string} example: 2023-05-16
+ */
+function getDateStringFromISOTimestamp(isoTimestamp) {
+    if (!isoTimestamp) {
+        return '';
+    }
+
+    const [dateString] = isoTimestamp.split(' ');
+    return dateString;
+}
+
 /**
  * @namespace DateUtils
  */
@@ -206,6 +219,7 @@ const DateUtils = {
     getMicroseconds,
     getDBTime,
     subtractMillisecondsFromDateTime,
+    getDateStringFromISOTimestamp,
 };
 
 export default DateUtils;

src/pages/home/ReportScreen.js

@@ -244,7 +244,8 @@ class ReportScreen extends React.Component {
         // the moment the ReportScreen becomes unfrozen we want to start the animation of the placeholder skeleton content
         // (which is shown, until all the actual views of the ReportScreen have been rendered)
         const shouldAnimate = !shouldFreeze;
-
+        const parentReportAction = ReportActionsUtils.getParentReportAction(this.props.report);
+        const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction);
         return (
             <ScreenWrapper style={screenWrapperStyle}>
                 <Freeze
@@ -281,11 +282,13 @@ class ReportScreen extends React.Component {
                                     errors={addWorkspaceRoomOrChatErrors}
                                     shouldShowErrorMessages={false}
                                 >
-                                    {ReportUtils.isMoneyRequestReport(this.props.report) ? (
+                                    {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? (
                                         <MoneyRequestHeader
                                             report={this.props.report}
                                             policies={this.props.policies}
                                             personalDetails={this.props.personalDetails}
+                                            isSingleTransactionView={isSingleTransactionView}
+                                            parentReportAction={parentReportAction}
                                         />
                                     ) : (
                                         <HeaderView