diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index ac7908677d68..7e1685a4e8c8 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/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 (
{
},
]}
threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton}
- report={props.report}
+ report={moneyRequestReport}
policies={props.policies}
personalDetails={props.personalDetails}
shouldShowCloseButton={false}
@@ -111,6 +129,23 @@ const MoneyRequestHeader = (props) => {
+ {props.isSingleTransactionView && (
+ <>
+
+
+
+ >
+ )}
);
};
@@ -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);
diff --git a/src/libs/DateUtils.js b/src/libs/DateUtils.js
index 74a18a653ad8..7196a8f0a89e 100644
--- a/src/libs/DateUtils.js
+++ b/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;
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 5541f91a2575..680b3d9dd3d3 100644
--- a/src/pages/home/ReportScreen.js
+++ b/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 (
- {ReportUtils.isMoneyRequestReport(this.props.report) ? (
+ {ReportUtils.isMoneyRequestReport(this.props.report) || isSingleTransactionView ? (
) : (