diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js index 820cce252205..2f99b21b6523 100644 --- a/src/components/OfflineWithFeedback.js +++ b/src/components/OfflineWithFeedback.js @@ -94,10 +94,10 @@ function OfflineWithFeedback(props) { const errorMessages = _.omit(props.errors, (e) => e === null); const hasErrorMessages = !_.isEmpty(errorMessages); const isOfflinePendingAction = props.network.isOffline && props.pendingAction; - const isUpdateOrDeleteError = hasErrors && (props.pendingAction === 'delete' || props.pendingAction === 'update'); - const isAddError = hasErrors && props.pendingAction === 'add'; + const isUpdateOrDeleteError = hasErrors && (props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE); + const isAddError = hasErrors && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD; const needsOpacity = (isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError; - const needsStrikeThrough = props.network.isOffline && props.pendingAction === 'delete'; + const needsStrikeThrough = props.network.isOffline && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; const hideChildren = props.shouldHideOnDelete && !props.network.isOffline && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !hasErrors; let children = props.children; diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 0d8a38ede4e2..a1e6abe15b5e 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -23,6 +23,7 @@ import * as CurrencyUtils from '../../libs/CurrencyUtils'; import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png'; import useLocalize from '../../hooks/useLocalize'; import useWindowDimensions from '../../hooks/useWindowDimensions'; +import OfflineWithFeedback from '../OfflineWithFeedback'; const propTypes = { /** The report currently being looked at */ @@ -97,30 +98,36 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic style={[StyleUtils.getReportWelcomeBackgroundImageStyle(true)]} /> - Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} - /> - Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} - /> - Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} - /> + + Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} + /> + + + Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} + /> + + + Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} + /> + {shouldShowHorizontalRule && } ); diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 77507164fe03..2db03c00c525 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1206,7 +1206,10 @@ function getPolicyExpenseChatName(report, policy = undefined) { function getMoneyRequestReportName(report, policy = undefined) { const formattedAmount = CurrencyUtils.convertToDisplayString(getMoneyRequestTotal(report), report.currency); const payerName = isExpenseReport(report) ? getPolicyName(report, false, policy) : getDisplayNameForParticipant(report.managerID); - const payerPaidAmountMesssage = Localize.translateLocal('iou.payerPaidAmount', {payer: payerName, amount: formattedAmount}); + const payerPaidAmountMesssage = Localize.translateLocal('iou.payerPaidAmount', { + payer: payerName, + amount: formattedAmount, + }); if (report.isWaitingOnBankAccount) { return `${payerPaidAmountMesssage} • ${Localize.translateLocal('iou.pending')}`; @@ -1304,6 +1307,29 @@ function getReportPreviewMessage(report, reportAction = {}) { return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount}); } +/** + * Get the proper message schema for modified expense message. + * + * @param {String} newValue + * @param {String} oldValue + * @param {String} valueName + * @param {Boolean} valueInQuotes + * @returns {String} + */ + +function getProperSchemaForModifiedExpenseMessage(newValue, oldValue, valueName, valueInQuotes) { + const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue; + const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue; + + if (!oldValue) { + return `set the ${valueName} to ${newValueToDisplay}`; + } + if (!newValue) { + return `removed the ${valueName} (previously ${oldValueToDisplay})`; + } + return `changed the ${valueName} to ${newValueToDisplay} (previously ${oldValueToDisplay})`; +} + /** * Get the report action message when expense has been modified. * @@ -1328,17 +1354,17 @@ function getModifiedExpenseMessage(reportAction) { const currency = reportActionOriginalMessage.currency; const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount, currency); - return `changed the request to ${amount} (previously ${oldAmount})`; + return getProperSchemaForModifiedExpenseMessage(amount, oldAmount, 'amount', false); } const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment'); if (hasModifiedComment) { - return `changed the request description to "${reportActionOriginalMessage.newComment}" (previously "${reportActionOriginalMessage.oldComment}")`; + return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, 'description', true); } const hasModifiedMerchant = _.has(reportActionOriginalMessage, 'oldMerchant') && _.has(reportActionOriginalMessage, 'merchant'); if (hasModifiedMerchant) { - return `changed the request merchant to "${reportActionOriginalMessage.merchant}" (previously "${reportActionOriginalMessage.oldMerchant}")`; + return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, 'merchant', true); } const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created'); @@ -1346,7 +1372,7 @@ function getModifiedExpenseMessage(reportAction) { // Take only the YYYY-MM-DD value as the original date includes timestamp let formattedOldCreated = new Date(reportActionOriginalMessage.oldCreated); formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING); - return `changed the request date to ${reportActionOriginalMessage.created} (previously ${formattedOldCreated})`; + return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, 'date', false); } } diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js index 90b6ca72bd4a..3e08fd604bf0 100644 --- a/src/libs/TransactionUtils.js +++ b/src/libs/TransactionUtils.js @@ -97,7 +97,12 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep if (_.has(transactionChanges, 'currency')) { updatedTransaction.modifiedCurrency = transactionChanges.currency; } - updatedTransaction.pendingAction = CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE; + updatedTransaction.pendingFields = { + ...(_.has(transactionChanges, 'comment') && {comment: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}), + ...(_.has(transactionChanges, 'created') && {created: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}), + ...(_.has(transactionChanges, 'amount') && {amount: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}), + ...(_.has(transactionChanges, 'currency') && {currency: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}), + }; return updatedTransaction; } diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 13a9af5b42f6..fd96acff03c9 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -982,7 +982,14 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - value: {pendingAction: null}, + value: { + pendingFields: { + comment: null, + amount: null, + created: null, + currency: null, + }, + }, }, ]; diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 8700327a168a..323329590f3d 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -468,12 +468,10 @@ function ReportActionItem(props) { const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); if (ReportActionsUtils.isTransactionThread(parentReportAction)) { return ( - - - + ); } if (ReportUtils.isTaskReport(props.report)) {