Merge pull request #24590 from dukenv0307/fix/24578

Hide transaction detail and dismiss the edit modal when the request is deleted
Expensify · Aug 16, 2023 · 3538ba8 · 3538ba8
2 parents ff3ac8d + d7821f5
commit 3538ba8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
@@ -83,6 +83,12 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
         description += ` • ${translate('iou.pending')}`;
     }
 
+    // A temporary solution to hide the transaction detail
+    // This will be removed after we properly add the transaction as a prop
+    if (ReportActionsUtils.isDeletedAction(parentReportAction)) {
+        return null;
+    }
+
     return (
         <View>
             <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
@@ -140,7 +140,7 @@ function getCurrency(transaction) {
     if (currency) {
         return currency;
     }
-    return lodashGet(transaction, 'currency', '');
+    return lodashGet(transaction, 'currency', CONST.CURRENCY.USD);
 }
 
 /**
@@ -150,11 +150,11 @@ function getCurrency(transaction) {
  * @returns {String}
  */
 function getCreated(transaction) {
-    const created = lodashGet(transaction, 'modifiedCreated', '');
+    const created = lodashGet(transaction, 'modifiedCreated', '') || lodashGet(transaction, 'created', '');
     if (created) {
         return format(new Date(created), CONST.DATE.FNS_FORMAT_STRING);
     }
-    return format(new Date(lodashGet(transaction, 'created', '')), CONST.DATE.FNS_FORMAT_STRING);
+    return '';
 }
 
 export {buildOptimisticTransaction, getUpdatedTransaction, getTransaction, getDescription, getAmount, getCurrency, getCreated};
diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import {format} from 'date-fns';
+import compose from '../libs/compose';
 import CONST from '../CONST';
 import Navigation from '../libs/Navigation/Navigation';
 import ONYXKEYS from '../ONYXKEYS';
@@ -31,24 +31,39 @@ const propTypes = {
 
     /** The report object for the thread report */
     report: reportPropTypes,
+
+    /** The parent report object for the thread report */
+    parentReport: reportPropTypes,
 };
 
 const defaultProps = {
     report: {},
+    parentReport: {},
 };
 
-function EditRequestPage({report, route}) {
-    const transactionID = lodashGet(ReportActionsUtils.getParentReportAction(report), 'originalMessage.IOUTransactionID', '');
+function EditRequestPage({report, route, parentReport}) {
+    const parentReportAction = ReportActionsUtils.getParentReportAction(report);
+    const transactionID = lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', '');
     const transaction = TransactionUtils.getTransaction(transactionID);
     const transactionDescription = TransactionUtils.getDescription(transaction);
-    const transactionAmount = TransactionUtils.getAmount(transaction, ReportUtils.isExpenseReport(ReportUtils.getParentReport(report)));
+    const transactionAmount = TransactionUtils.getAmount(transaction, ReportUtils.isExpenseReport(parentReport));
     const transactionCurrency = TransactionUtils.getCurrency(transaction);
 
     // Take only the YYYY-MM-DD value
-    const transactionCreatedDate = new Date(TransactionUtils.getCreated(transaction));
-    const transactionCreated = format(transactionCreatedDate, CONST.DATE.FNS_FORMAT_STRING);
+    const transactionCreated = TransactionUtils.getCreated(transaction);
     const fieldToEdit = lodashGet(route, ['params', 'field'], '');
 
+    const isDeleted = ReportActionsUtils.isDeletedAction(parentReportAction);
+    const isSetted = ReportUtils.isSettled(parentReport.reportID);
+
+    // Dismiss the modal when the request is paid or deleted
+    useEffect(() => {
+        if (!isDeleted && !isSetted) {
+            return;
+        }
+        Navigation.dismissModal();
+    }, [isDeleted, isSetted]);
+
     // Update the transaction object and close the modal
     function editMoneyRequest(transactionChanges) {
         IOU.editMoneyRequest(transactionID, report.reportID, transactionChanges);
@@ -116,8 +131,15 @@ function EditRequestPage({report, route}) {
 EditRequestPage.displayName = 'EditRequestPage';
 EditRequestPage.propTypes = propTypes;
 EditRequestPage.defaultProps = defaultProps;
-export default withOnyx({
-    report: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`,
-    },
-})(EditRequestPage);
+export default compose(
+    withOnyx({
+        report: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`,
+        },
+    }),
+    withOnyx({
+        parentReport: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`,
+        },
+    }),
+)(EditRequestPage);