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 ? ( ) : (