From 399cdb5cbc98a155cf8204af43add1ee92c2d598 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 13 Oct 2023 14:23:47 +0100 Subject: [PATCH 1/6] Update report total logic to include non-reimbursable --- .../ReportActionItem/MoneyReportView.js | 56 +++++++++++++++++-- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- src/libs/ReportUtils.js | 44 ++++++++++++++- 4 files changed, 97 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index bfdcc59bf89f..a825f7e18b32 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -28,16 +28,24 @@ const propTypes = { }; function MoneyReportView(props) { - const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); - const isSettled = ReportUtils.isSettled(props.report.reportID); const {translate} = useLocalize(); + const isSettled = ReportUtils.isSettled(props.report.reportID); + + const {total, companySpend, outOfPocketSpend} = ReportUtils.getMoneyRequestTotalBreakdown(props.report.reportID); + + const shouldShowNonReimbursableBreakdown = companySpend && outOfPocketSpend; + const formattedTotalAmount = CurrencyUtils.convertToDisplayString(total, props.report.currency); + const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(outOfPocketSpend, props.report.currency); + const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(companySpend, props.report.currency); + + const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(themeColors.textSupporting)]; return ( - + - {formattedAmount} + {formattedTotalAmount} + {shouldShowNonReimbursableBreakdown ? ( + <> + + + + {translate('cardTransactions.outOfPocket')} + + + + + {formattedOutOfPocketAmount} + + + + + + + {translate('cardTransactions.companySpend')} + + + + + {formattedCompanySpendAmount} + + + + + ) : undefined} Date: Fri, 13 Oct 2023 15:56:35 +0100 Subject: [PATCH 2/6] clean up --- src/components/MoneyReportHeader.js | 10 ++-- .../ReportActionItem/MoneyReportView.js | 12 ++--- .../ReportActionItem/ReportPreview.js | 10 ++-- src/libs/OptionsListUtils.js | 2 +- src/libs/ReportUtils.js | 47 +++++++++---------- src/libs/SidebarUtils.js | 4 +- 6 files changed, 41 insertions(+), 44 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 6b2b4e16db65..49681f396181 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -62,7 +62,7 @@ const defaultProps = { function MoneyReportHeader({session, personalDetails, policy, chatReport, report: moneyRequestReport, isSmallScreenWidth}) { const {translate} = useLocalize(); - const reportTotal = ReportUtils.getMoneyRequestTotal(moneyRequestReport); + const reimbursableTotal = ReportUtils.getMoneyRequestReimbursableTotal(moneyRequestReport); const isApproved = ReportUtils.isReportApproved(moneyRequestReport); const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const policyType = lodashGet(policy, 'type'); @@ -71,8 +71,8 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report const isPayer = policyType === CONST.POLICY.TYPE.CORPORATE ? isPolicyAdmin && isApproved : isPolicyAdmin || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && isManager); const isDraft = ReportUtils.isReportDraft(moneyRequestReport); const shouldShowSettlementButton = useMemo( - () => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reportTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport), - [isPayer, isDraft, isSettled, moneyRequestReport, reportTotal, chatReport], + () => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reimbursableTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport), + [isPayer, isDraft, isSettled, moneyRequestReport, reimbursableTotal, chatReport], ); const shouldShowApproveButton = useMemo(() => { if (policyType !== CONST.POLICY.TYPE.CORPORATE) { @@ -80,10 +80,10 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report } return isManager && !isDraft && !isApproved && !isSettled; }, [policyType, isManager, isDraft, isApproved, isSettled]); - const shouldShowSubmitButton = isDraft && reportTotal !== 0; + const shouldShowSubmitButton = isDraft && reimbursableTotal !== 0; const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton; const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); - const formattedAmount = CurrencyUtils.convertToDisplayString(reportTotal, moneyRequestReport.currency); + const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency); return ( diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index a825f7e18b32..f7f8ee8507fb 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -31,12 +31,12 @@ function MoneyReportView(props) { const {translate} = useLocalize(); const isSettled = ReportUtils.isSettled(props.report.reportID); - const {total, companySpend, outOfPocketSpend} = ReportUtils.getMoneyRequestTotalBreakdown(props.report.reportID); + const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.report); - const shouldShowNonReimbursableBreakdown = companySpend && outOfPocketSpend; - const formattedTotalAmount = CurrencyUtils.convertToDisplayString(total, props.report.currency); - const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(outOfPocketSpend, props.report.currency); - const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(companySpend, props.report.currency); + const shouldShowBreakdown = nonReimbursableSpend && reimbursableSpend; + const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, props.report.currency); + const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, props.report.currency); + const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, props.report.currency); const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(themeColors.textSupporting)]; @@ -71,7 +71,7 @@ function MoneyReportView(props) { - {shouldShowNonReimbursableBreakdown ? ( + {shouldShowBreakdown ? ( <> diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index f9001ed51258..6bdd08730382 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -111,7 +111,7 @@ function ReportPreview(props) { const managerID = props.iouReport.managerID || 0; const isCurrentUserManager = managerID === lodashGet(props.session, 'accountID'); - const reportTotal = ReportUtils.getMoneyRequestTotal(props.iouReport); + const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.iouReport); const iouSettled = ReportUtils.isSettled(props.iouReportID); const iouCanceled = ReportUtils.isArchivedRoom(props.chatReport); @@ -136,11 +136,11 @@ function ReportPreview(props) { scanningReceipts: numberOfScanningReceipts, }); - const shouldShowSubmitButton = isReportDraft && reportTotal !== 0; + const shouldShowSubmitButton = isReportDraft && reimbursableSpend !== 0; const getDisplayAmount = () => { - if (reportTotal) { - return CurrencyUtils.convertToDisplayString(reportTotal, props.iouReport.currency); + if (totalDisplaySpend) { + return CurrencyUtils.convertToDisplayString(totalDisplaySpend, props.iouReport.currency); } if (isScanning) { return props.translate('iou.receiptScanning'); @@ -172,7 +172,7 @@ function ReportPreview(props) { const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowSettlementButton = ReportUtils.isControlPolicyExpenseChat(props.chatReport) ? props.policy.role === CONST.POLICY.ROLE.ADMIN && ReportUtils.isReportApproved(props.iouReport) && !iouSettled && !iouCanceled - : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reportTotal !== 0; + : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0; return ( diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 051c19312f09..60631521ba82 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -521,7 +521,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, { } result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result); - result.iouReportAmount = ReportUtils.getMoneyRequestTotal(result); + result.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(result); if (!hasMultipleParticipants) { result.login = personalDetail.login; diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index a0fe847a9e6f..fc1ed4c66a78 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1272,7 +1272,7 @@ function isWaitingForTaskCompleteFromAssignee(report, parentReportAction = {}) { * @param {Object} allReportsDict * @returns {Number} */ -function getMoneyRequestTotal(report, allReportsDict = null) { +function getMoneyRequestReimbursableTotal(report, allReportsDict = null) { const allAvailableReports = allReportsDict || allReports; let moneyRequestReport; if (isMoneyRequestReport(report)) { @@ -1282,11 +1282,7 @@ function getMoneyRequestTotal(report, allReportsDict = null) { moneyRequestReport = allAvailableReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`]; } if (moneyRequestReport) { - const companySpend = lodashGet(moneyRequestReport, 'nonReimbursableTotal', 0); - const outOfPocketSpend = lodashGet(moneyRequestReport, 'total', 0); - - const total = (companySpend && outOfPocketSpend) ? companySpend + outOfPocketSpend : companySpend || outOfPocketSpend; - + const total = lodashGet(moneyRequestReport, 'total', 0); if (total !== 0) { // There is a possibility that if the Expense report has a negative total. // This is because there are instances where you can get a credit back on your card, @@ -1302,7 +1298,7 @@ function getMoneyRequestTotal(report, allReportsDict = null) { * @param {Object} allReportsDict * @returns {Number} */ -function getMoneyRequestTotalBreakdown(report, allReportsDict = null) { +function getMoneyRequestSpendBreakdown(report, allReportsDict = null) { const allAvailableReports = allReportsDict || allReports; let moneyRequestReport; if (isMoneyRequestReport(report)) { @@ -1312,27 +1308,28 @@ function getMoneyRequestTotalBreakdown(report, allReportsDict = null) { moneyRequestReport = allAvailableReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`]; } if (moneyRequestReport) { - const companySpend = lodashGet(moneyRequestReport, 'nonReimbursableTotal', 0); - const outOfPocketSpend = lodashGet(moneyRequestReport, 'total', 0); - - const total = (companySpend && outOfPocketSpend) ? companySpend + outOfPocketSpend : companySpend || outOfPocketSpend; + let nonReimbursableSpend = lodashGet(moneyRequestReport, 'nonReimbursableTotal', 0); + let reimbursableSpend = lodashGet(moneyRequestReport, 'total', 0); - if (total !== 0) { + if (nonReimbursableSpend + reimbursableSpend !== 0) { + nonReimbursableSpend = isExpenseReport(moneyRequestReport) ? nonReimbursableSpend * -1 : Math.abs(nonReimbursableSpend); + reimbursableSpend = isExpenseReport(moneyRequestReport) ? reimbursableSpend * -1 : Math.abs(reimbursableSpend); + const totalDisplaySpend = nonReimbursableSpend + reimbursableSpend; // There is a possibility that if the Expense report has a negative total. // This is because there are instances where you can get a credit back on your card, // or you enter a negative expense to “offset” future expenses return { - total: isExpenseReport(moneyRequestReport) ? total * -1 : Math.abs(total), - companySpend: isExpenseReport(moneyRequestReport) ? total * -1 : Math.abs(companySpend), - outOfPocketSpend: isExpenseReport(moneyRequestReport) ? total * -1 : Math.abs(outOfPocketSpend), - }; + nonReimbursableSpend, + reimbursableSpend, + totalDisplaySpend, + }; } } return { - total: 0, - companySpend: 0, - outOfPocketSpend: 0, - }; + nonReimbursableSpend: 0, + reimbursableSpend: 0, + totalDisplaySpend: 0, + }; } /** @@ -1374,7 +1371,7 @@ function getPolicyExpenseChatName(report, policy = undefined) { * @returns {String} */ function getMoneyRequestReportName(report, policy = undefined) { - const formattedAmount = CurrencyUtils.convertToDisplayString(getMoneyRequestTotal(report), report.currency); + const formattedAmount = CurrencyUtils.convertToDisplayString(getMoneyRequestReimbursableTotal(report), report.currency); const payerName = isExpenseReport(report) ? getPolicyName(report, false, policy) : getDisplayNameForParticipant(report.managerID); const payerPaidAmountMesssage = Localize.translateLocal('iou.payerPaidAmount', { payer: payerName, @@ -1571,7 +1568,7 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip return Localize.translateLocal('iou.didSplitAmount', {formattedAmount, comment}); } - const totalAmount = getMoneyRequestTotal(report); + const totalAmount = getMoneyRequestReimbursableTotal(report); const payerName = isExpenseReport(report) ? getPolicyName(report) : getDisplayNameForParticipant(report.managerID, true); const formattedAmount = CurrencyUtils.convertToDisplayString(totalAmount, report.currency); @@ -2239,7 +2236,7 @@ function buildOptimisticExpenseReport(chatReportID, policyID, payeeAccountID, to function getIOUReportActionMessage(iouReportID, type, total, comment, currency, paymentType = '', isSettlingUp = false) { const amount = type === CONST.IOU.REPORT_ACTION_TYPE.PAY - ? CurrencyUtils.convertToDisplayString(getMoneyRequestTotal(getReport(iouReportID)), currency) + ? CurrencyUtils.convertToDisplayString(getMoneyRequestReimbursableTotal(getReport(iouReportID)), currency) : CurrencyUtils.convertToDisplayString(total, currency); let paymentMethodMessage; @@ -3916,8 +3913,8 @@ export { hasExpensifyGuidesEmails, isWaitingForIOUActionFromCurrentUser, isIOUOwnedByCurrentUser, - getMoneyRequestTotal, - getMoneyRequestTotalBreakdown, + getMoneyRequestReimbursableTotal, + getMoneyRequestSpendBreakdown, canShowReportRecipientLocalTime, formatReportLastMessageText, chatIncludesConcierge, diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js index 7a32db660021..f7d966c890fe 100644 --- a/src/libs/SidebarUtils.js +++ b/src/libs/SidebarUtils.js @@ -158,7 +158,7 @@ function getOrderedReportIDs(currentReportId, allReportsDict, betas, policies, p report.displayName = ReportUtils.getReportName(report); // eslint-disable-next-line no-param-reassign - report.iouReportAmount = ReportUtils.getMoneyRequestTotal(report, allReportsDict); + report.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(report, allReportsDict); }); // The LHN is split into five distinct groups, and each group is sorted a little differently. The groups will ALWAYS be in this order: @@ -384,7 +384,7 @@ function getOptionData(report, reportActions, personalDetails, preferredLocale, } result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result); - result.iouReportAmount = ReportUtils.getMoneyRequestTotal(result); + result.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(result); if (!hasMultipleParticipants) { result.accountID = personalDetail.accountID; From b4e6c77a05e8b47e44ca4b207b648f82825097b8 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 13 Oct 2023 16:16:58 +0100 Subject: [PATCH 3/6] change to 13px font --- src/components/ReportActionItem/MoneyReportView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index f7f8ee8507fb..f452508b4db4 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -48,7 +48,7 @@ function MoneyReportView(props) { {translate('common.total')} @@ -76,7 +76,7 @@ function MoneyReportView(props) { {translate('cardTransactions.outOfPocket')} @@ -94,7 +94,7 @@ function MoneyReportView(props) { {translate('cardTransactions.companySpend')} From 11fb1840153c6b89b13e879776baff0be5d4a33f Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 13 Oct 2023 16:39:44 +0100 Subject: [PATCH 4/6] Watch for report changes, fix lint --- src/components/ReportActionItem/MoneyReportView.js | 12 +++++++++++- src/components/ReportActionItem/ReportPreview.js | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index f452508b4db4..6f69d9a3277f 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -1,5 +1,6 @@ import React from 'react'; import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; @@ -8,7 +9,9 @@ import themeColors from '../../styles/themes/default'; import * as ReportUtils from '../../libs/ReportUtils'; import * as StyleUtils from '../../styles/StyleUtils'; import CONST from '../../CONST'; +import compose from '../../libs/compose'; import Text from '../Text'; +import ONYXKEYS from '../../ONYXKEYS'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; import variables from '../../styles/variables'; @@ -122,4 +125,11 @@ function MoneyReportView(props) { MoneyReportView.propTypes = propTypes; MoneyReportView.displayName = 'MoneyReportView'; -export default withWindowDimensions(MoneyReportView); +export default compose( + withWindowDimensions, + withOnyx({ + report: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, + }, + }), +)(MoneyReportView); diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 6bdd08730382..8afb92a007bc 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -111,7 +111,7 @@ function ReportPreview(props) { const managerID = props.iouReport.managerID || 0; const isCurrentUserManager = managerID === lodashGet(props.session, 'accountID'); - const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.iouReport); + const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.iouReport); const iouSettled = ReportUtils.isSettled(props.iouReportID); const iouCanceled = ReportUtils.isArchivedRoom(props.chatReport); From c27fa7d913e4141494c0d3e01f5c49a4b88c4658 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 13 Oct 2023 21:35:14 +0100 Subject: [PATCH 5/6] memo nonReimbursableTotal and remove unnecessary withOnyx --- src/components/ReportActionItem/MoneyReportView.js | 12 +----------- src/libs/ReportUtils.js | 8 ++++---- src/pages/home/report/ReportActionItem.js | 1 + src/pages/home/report/ReportActionsView.js | 4 ++++ src/pages/home/sidebar/SidebarLinksData.js | 1 + 5 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 6f69d9a3277f..f452508b4db4 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -1,6 +1,5 @@ import React from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import reportPropTypes from '../../pages/reportPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; @@ -9,9 +8,7 @@ import themeColors from '../../styles/themes/default'; import * as ReportUtils from '../../libs/ReportUtils'; import * as StyleUtils from '../../styles/StyleUtils'; import CONST from '../../CONST'; -import compose from '../../libs/compose'; import Text from '../Text'; -import ONYXKEYS from '../../ONYXKEYS'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; import variables from '../../styles/variables'; @@ -125,11 +122,4 @@ function MoneyReportView(props) { MoneyReportView.propTypes = propTypes; MoneyReportView.displayName = 'MoneyReportView'; -export default compose( - withWindowDimensions, - withOnyx({ - report: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, - }, - }), -)(MoneyReportView); +export default withWindowDimensions(MoneyReportView); diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index ec41bdc14f36..8a7e0e69175d 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1307,7 +1307,7 @@ function getMoneyRequestReimbursableTotal(report, allReportsDict = null) { /** * @param {Object} report * @param {Object} allReportsDict - * @returns {Number} + * @returns {Object} */ function getMoneyRequestSpendBreakdown(report, allReportsDict = null) { const allAvailableReports = allReportsDict || allReports; @@ -1323,12 +1323,12 @@ function getMoneyRequestSpendBreakdown(report, allReportsDict = null) { let reimbursableSpend = lodashGet(moneyRequestReport, 'total', 0); if (nonReimbursableSpend + reimbursableSpend !== 0) { - nonReimbursableSpend = isExpenseReport(moneyRequestReport) ? nonReimbursableSpend * -1 : Math.abs(nonReimbursableSpend); - reimbursableSpend = isExpenseReport(moneyRequestReport) ? reimbursableSpend * -1 : Math.abs(reimbursableSpend); - const totalDisplaySpend = nonReimbursableSpend + reimbursableSpend; // There is a possibility that if the Expense report has a negative total. // This is because there are instances where you can get a credit back on your card, // or you enter a negative expense to “offset” future expenses + nonReimbursableSpend = isExpenseReport(moneyRequestReport) ? nonReimbursableSpend * -1 : Math.abs(nonReimbursableSpend); + reimbursableSpend = isExpenseReport(moneyRequestReport) ? reimbursableSpend * -1 : Math.abs(reimbursableSpend); + const totalDisplaySpend = nonReimbursableSpend + reimbursableSpend; return { nonReimbursableSpend, reimbursableSpend, diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index d0e84499a443..f5ca7080249c 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -730,6 +730,7 @@ export default compose( prevProps.report.managerEmail === nextProps.report.managerEmail && prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && lodashGet(prevProps.report, 'total', 0) === lodashGet(nextProps.report, 'total', 0) && + lodashGet(prevProps.report, 'nonReimbursableTotal', 0) === lodashGet(nextProps.report, 'nonReimbursableTotal', 0) && prevProps.linkedReportActionID === nextProps.linkedReportActionID, ), ); diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index f58c6644cd47..a3671faf194c 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -278,6 +278,10 @@ function arePropsEqual(oldProps, newProps) { return false; } + if (lodashGet(newProps, 'report.nonReimbursableTotal') !== lodashGet(oldProps, 'report.nonReimbursableTotal')) { + return false; + } + if (lodashGet(newProps, 'report.writeCapability') !== lodashGet(oldProps, 'report.writeCapability')) { return false; } diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 9dbdde14c50d..394f6c5ddc5a 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -141,6 +141,7 @@ const chatReportSelector = (report) => lastVisibleActionCreated: report.lastVisibleActionCreated, iouReportID: report.iouReportID, total: report.total, + nonReimbursableTotal: report.nonReimbursableTotal, hasOutstandingIOU: report.hasOutstandingIOU, isWaitingOnBankAccount: report.isWaitingOnBankAccount, statusNum: report.statusNum, From b1e046110132d395951659d7784d8210f840ee5c Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 16 Oct 2023 17:17:19 +0100 Subject: [PATCH 6/6] remove redundant style (color) --- src/components/ReportActionItem/MoneyReportView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index f452508b4db4..f4be86cf12bd 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -94,7 +94,7 @@ function MoneyReportView(props) { {translate('cardTransactions.companySpend')}