[IOUDetailsModal] deprecate component and cleanup code

src/ROUTES.js

@@ -9,7 +9,6 @@ const REPORT = 'r';
 const IOU_REQUEST = 'request/new';
 const IOU_BILL = 'split/new';
 const IOU_SEND = 'send/new';
-const IOU_DETAILS = 'iou/details';
 const IOU_REQUEST_CURRENCY = `${IOU_REQUEST}/currency`;
 const IOU_BILL_CURRENCY = `${IOU_BILL}/currency`;
 const IOU_SEND_CURRENCY = `${IOU_SEND}/currency`;
@@ -94,12 +93,6 @@ export default {
     getIouRequestCurrencyRoute: (reportID, currency, backTo) => `${IOU_REQUEST_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
     getIouBillCurrencyRoute: (reportID, currency, backTo) => `${IOU_BILL_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
     getIouSendCurrencyRoute: (reportID, currency, backTo) => `${IOU_SEND_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
-    IOU_DETAILS,
-    IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`,
-    IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`,
-    IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`,
-    IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`,
-    getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`,
     getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`,
     NEW_TASK_WITH_REPORT_ID: `${NEW_TASK}/:reportID?`,
     TASK_TITLE: 'r/:reportID/title',

src/components/MoneyRequestConfirmationList.js

@@ -43,6 +43,9 @@ const propTypes = {
     /** Can the participants be modified or not */
     canModifyParticipants: PropTypes.bool,
 
+    /** Depending on expense report or personal IOU report, respective bank account route */
+    bankAccountRoute: PropTypes.string.isRequired,
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -289,7 +292,7 @@ class MoneyRequestConfirmationList extends Component {
                             onPress={this.confirm}
                             shouldShowPaypal={Boolean(recipient.payPalMeAddress)}
                             enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
-                            addBankAccountRoute={ROUTES.IOU_SEND_ADD_BANK_ACCOUNT}
+                            addBankAccountRoute={this.props.bankAccountRoute}
                             addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD}
                             currency={this.props.iou.selectedCurrencyCode}
                             policyID={this.props.policyID}

src/components/MoneyRequestHeader.js

@@ -86,6 +86,7 @@ const MoneyRequestHeader = (props) => {
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
     const isPayer = Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(props.report) && lodashGet(props.session, 'email', null) === props.report.managerEmail);
     const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
+    const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             <HeaderWithCloseButton
@@ -153,7 +154,7 @@ const MoneyRequestHeader = (props) => {
                                     iouReport={props.report}
                                     onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
                                     enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
-                                    addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
+                                    addBankAccountRoute={bankAccountRoute}
                                     shouldShowPaymentOptions
                                 />
                             </View>
@@ -169,7 +170,7 @@ const MoneyRequestHeader = (props) => {
                         iouReport={props.report}
                         onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
                         enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
-                        addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
+                        addBankAccountRoute={bankAccountRoute}
                         shouldShowPaymentOptions
                     />
                 )}

src/components/ReportActionItem/IOUPreview.js

@@ -76,9 +76,6 @@ const propTypes = {
     /** True if this is this IOU is a split instead of a 1:1 request */
     isBillSplit: PropTypes.bool.isRequired,
 
-    /** True if the IOU Preview is rendered within a single IOUAction */
-    isIOUAction: PropTypes.bool,
-
     /** True if the IOU Preview card is hovered */
     isHovered: PropTypes.bool,
 
@@ -119,7 +116,6 @@ const defaultProps = {
     containerStyles: [],
     walletTerms: {},
     pendingAction: null,
-    isIOUAction: true,
     isHovered: false,
     personalDetails: {},
     session: {
@@ -135,9 +131,6 @@ const IOUPreview = (props) => {
     const sessionEmail = lodashGet(props.session, 'email', null);
     const managerEmail = props.iouReport.managerEmail || '';
     const ownerEmail = props.iouReport.ownerEmail || '';
-
-    // When displaying within a IOUDetailsModal we cannot guarantee that participants are included in the originalMessage data
-    // Because an IOUPreview of type split can never be rendered within the IOUDetailsModal, manually building the email array is only needed for non-billSplit ious
     const participantEmails = props.isBillSplit ? lodashGet(props.action, 'originalMessage.participants', []) : [managerEmail, ownerEmail];
     const participantAvatars = OptionsListUtils.getAvatarsForLogins(participantEmails, props.personalDetails);
 
@@ -146,9 +139,8 @@ const IOUPreview = (props) => {
 
     const moneyRequestAction = ReportUtils.getMoneyRequestAction(props.action);
 
-    // If props.action is undefined then we are displaying within IOUDetailsModal and should use the full report amount
-    const requestAmount = props.isIOUAction ? moneyRequestAction.amount : ReportUtils.getMoneyRequestTotal(props.iouReport);
-    const requestCurrency = props.isIOUAction ? moneyRequestAction.currency : props.iouReport.currency;
+    const requestAmount = moneyRequestAction.amount;
+    const requestCurrency = moneyRequestAction.currency;
     const requestComment = Str.htmlDecode(moneyRequestAction.comment).trim();
 
     const getSettledMessage = () => {
@@ -165,12 +157,6 @@ const IOUPreview = (props) => {
     };
 
     const showContextMenu = (event) => {
-        // Use action prop to check if we are in IOUDetailsModal,
-        // if it's true, do nothing when user long press, otherwise show context menu.
-        if (!props.action) {
-            return;
-        }
-
         showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive);
     };
 

src/components/ReportActionItem/ReportPreview.js

@@ -99,6 +99,7 @@ const ReportPreview = (props) => {
     const managerEmail = props.iouReport.managerEmail || '';
     const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
+    const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     return (
         <View style={[styles.chatItemMessage]}>
             {_.map(props.action.message, (message, index) => (
@@ -147,7 +148,7 @@ const ReportPreview = (props) => {
                     iouReport={props.iouReport}
                     onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
                     enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
-                    addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
+                    addBankAccountRoute={bankAccountRoute}
                     style={[styles.requestPreviewBox]}
                 />
             )}

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -334,12 +334,6 @@ class AuthScreens extends React.Component {
                     component={ModalStackNavigators.EnablePaymentsStackNavigator}
                     listeners={modalScreenListeners}
                 />
-                <RootStack.Screen
-                    name="IOU_Details"
-                    options={modalScreenOptions}
-                    component={ModalStackNavigators.IOUDetailsModalStackNavigator}
-                    listeners={modalScreenListeners}
-                />
                 <RootStack.Screen
                     name="AddPersonalBankAccount"
                     options={modalScreenOptions}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -111,37 +111,6 @@ const IOUSendModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
-const IOUDetailsModalStackNavigator = createModalStackNavigator([
-    {
-        getComponent: () => {
-            const IOUDetailsModal = require('../../../pages/iou/IOUDetailsModal').default;
-            return IOUDetailsModal;
-        },
-        name: 'IOU_Details_Root',
-    },
-    {
-        getComponent: () => {
-            const AddPersonalBankAccountPage = require('../../../pages/AddPersonalBankAccountPage').default;
-            return AddPersonalBankAccountPage;
-        },
-        name: 'IOU_Details_Add_Bank_Account',
-    },
-    {
-        getComponent: () => {
-            const AddDebitCardPage = require('../../../pages/settings/Payments/AddDebitCardPage').default;
-            return AddDebitCardPage;
-        },
-        name: 'IOU_Details_Add_Debit_Card',
-    },
-    {
-        getComponent: () => {
-            const EnablePaymentsPage = require('../../../pages/EnablePayments/EnablePaymentsPage').default;
-            return EnablePaymentsPage;
-        },
-        name: 'IOU_Details_Enable_Payments',
-    },
-]);
-
 const DetailsModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
@@ -710,7 +679,6 @@ export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
     IOUSendModalStackNavigator,
-    IOUDetailsModalStackNavigator,
     DetailsModalStackNavigator,
     ReportDetailsModalStackNavigator,
     TaskModalStackNavigator,

src/libs/Navigation/linkingConfig.js

@@ -287,14 +287,6 @@ export default {
                     IOU_Send_Add_Debit_Card: ROUTES.IOU_SEND_ADD_DEBIT_CARD,
                 },
             },
-            IOU_Details: {
-                screens: {
-                    IOU_Details_Root: ROUTES.IOU_DETAILS_WITH_IOU_REPORT_ID,
-                    IOU_Details_Enable_Payments: ROUTES.IOU_DETAILS_ENABLE_PAYMENTS,
-                    IOU_Details_Add_Bank_Account: ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT,
-                    IOU_Details_Add_Debit_Card: ROUTES.IOU_DETAILS_ADD_DEBIT_CARD,
-                },
-            },
             Task_Details: {
                 screens: {
                     Task_Title: ROUTES.TASK_TITLE,

src/libs/ReportUtils.js

@@ -331,6 +331,16 @@ function getPolicyType(report, policies) {
     return lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'type'], '');
 }
 
+/**
+ * If the report is a policy expense, the route should be for adding bank account for that policy
+ * else since the report is a personal IOU, the route should be for personal bank account.
+ * @param {Object} report
+ * @returns {String}
+ */
+function getBankAccountRoute(report) {
+    return isPolicyExpenseChat(report) ? ROUTES.getBankAccountRoute('', report.policyID) : ROUTES.SETTINGS_ADD_BANK_ACCOUNT;
+}
+
 /**
  * Returns true if there are any guides accounts (team.expensify.com) in emails
  * @param {Array} emails
@@ -2325,4 +2335,5 @@ export {
     isSettled,
     isAllowedToComment,
     getMoneyRequestAction,
+    getBankAccountRoute,
 };