Merge pull request Expensify#23828 from Expensify/cmartins-fixSettlem…

…entButton Only show settlement button if total is not 0
MaciejSWM · Aug 2, 2023 · 6292e5b · 6292e5b
2 parents 4691d06 + 2f8c3ed
commit 6292e5b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
@@ -57,10 +57,11 @@ function MoneyReportHeader(props) {
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
     const isPayer =
         Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
-    const shouldShowSettlementButton = !isSettled && isPayer && !moneyRequestReport.isWaitingOnBankAccount;
+    const reportTotal = ReportUtils.getMoneyRequestTotal(props.report);
+    const shouldShowSettlementButton = !isSettled && isPayer && !moneyRequestReport.isWaitingOnBankAccount && reportTotal !== 0;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));
-    const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
+    const formattedAmount = CurrencyUtils.convertToDisplayString(reportTotal, props.report.currency);
 
     return (
         <View style={[styles.pt0]}>

diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js
@@ -79,7 +79,8 @@ function MoneyRequestDetails(props) {
     const transactionDate = lodashGet(props.parentReportAction, ['created']);
     const formattedTransactionDate = DateUtils.getDateStringFromISOTimestamp(transactionDate);
 
-    const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency);
+    const reportTotal = ReportUtils.getMoneyRequestTotal(props.report);
+    const formattedAmount = CurrencyUtils.convertToDisplayString(reportTotal, props.report.currency);
     const moneyRequestReport = props.isSingleTransactionView ? props.parentReport : props.report;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport);
@@ -89,7 +90,8 @@ function MoneyRequestDetails(props) {
         : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'avatar']), moneyRequestReport.managerID);
     const isPayer =
         Policy.isAdminOfFreePolicy([props.policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
-    const shouldShowSettlementButton = moneyRequestReport.reportID && !isSettled && !props.isSingleTransactionView && isPayer && !moneyRequestReport.isWaitingOnBankAccount;
+    const shouldShowSettlementButton =
+        moneyRequestReport.reportID && !isSettled && !props.isSingleTransactionView && isPayer && !moneyRequestReport.isWaitingOnBankAccount && reportTotal !== 0;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.ownerAccountID, 'payPalMeAddress']));
     let description = `${props.translate('iou.amount')} • ${props.translate('iou.cash')}`;

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
@@ -95,25 +95,27 @@ const defaultProps = {
 function ReportPreview(props) {
     const managerID = props.iouReport.managerID || props.action.actorAccountID || 0;
     const isCurrentUserManager = managerID === lodashGet(props.session, 'accountID');
-    let reportAmount = ReportUtils.getMoneyRequestTotal(props.iouReport);
-    if (reportAmount) {
-        reportAmount = CurrencyUtils.convertToDisplayString(reportAmount, props.iouReport.currency);
+    const reportTotal = ReportUtils.getMoneyRequestTotal(props.iouReport);
+    let displayAmount;
+    if (reportTotal) {
+        displayAmount = CurrencyUtils.convertToDisplayString(reportTotal, props.iouReport.currency);
     } else {
         // If iouReport is not available, get amount from the action message (Ex: "Domain20821's Workspace owes $33.00" or "paid ₫60" or "paid -₫60 elsewhere")
-        reportAmount = '';
+        displayAmount = '';
         const actionMessage = lodashGet(props.action, ['message', 0, 'text'], '');
         const splits = actionMessage.split(' ');
         for (let i = 0; i < splits.length; i++) {
             if (/\d/.test(splits[i])) {
-                reportAmount = splits[i];
+                displayAmount = splits[i];
             }
         }
     }
 
     const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const previewMessage = props.translate(ReportUtils.isSettled(props.iouReportID) || props.iouReport.isWaitingOnBankAccount ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName});
-
+    const shouldShowSettlementButton =
+        !_.isEmpty(props.iouReport) && isCurrentUserManager && !ReportUtils.isSettled(props.iouReportID) && !props.iouReport.isWaitingOnBankAccount && reportTotal !== 0;
     return (
         <View style={[styles.chatItemMessage, ...props.containerStyles]}>
             <PressableWithoutFeedback
@@ -135,7 +137,7 @@ function ReportPreview(props) {
                     </View>
                     <View style={styles.flexRow}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                            <Text style={styles.textHeadline}>{reportAmount}</Text>
+                            <Text style={styles.textHeadline}>{displayAmount}</Text>
                             {ReportUtils.isSettled(props.iouReportID) && (
                                 <View style={styles.defaultCheckmarkWrapper}>
                                     <Icon
@@ -146,7 +148,7 @@ function ReportPreview(props) {
                             )}
                         </View>
                     </View>
-                    {!_.isEmpty(props.iouReport) && isCurrentUserManager && !ReportUtils.isSettled(props.iouReportID) && !props.iouReport.isWaitingOnBankAccount && (
+                    {shouldShowSettlementButton && (
                         <SettlementButton
                             currency={props.iouReport.currency}
                             policyID={props.iouReport.policyID}