Add DeleteMoneyRequest

src/components/MoneyReportHeader.js

@@ -6,7 +6,6 @@ import lodashGet from 'lodash/get';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import iouReportPropTypes from '../pages/iouReportPropTypes';
 import * as ReportUtils from '../libs/ReportUtils';
-import * as Expensicons from './Icon/Expensicons';
 import participantPropTypes from './participantPropTypes';
 import styles from '../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
@@ -19,7 +18,6 @@ import ONYXKEYS from '../ONYXKEYS';
 import * as IOU from '../libs/actions/IOU';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
 import reportPropTypes from '../pages/reportPropTypes';
-import useLocalize from '../hooks/useLocalize';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -63,22 +61,13 @@ function MoneyReportHeader(props) {
     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 {translate} = useLocalize();
 
     return (
         <View style={[styles.pt0]}>
             <HeaderWithBackButton
                 shouldShowAvatarWithDisplay
                 shouldShowPinButton={false}
                 shouldShowThreeDotsButton={false}
-                threeDotsMenuItems={[
-                    {
-                        icon: Expensicons.Trashcan,
-                        text: translate('common.delete'),
-                        onSelected: () => {},
-                    },
-                ]}
-                threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
                 report={props.report}
                 policies={props.policies}
                 personalDetails={props.personalDetails}

src/components/MoneyRequestHeader.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -16,6 +16,8 @@ import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import * as Policy from '../libs/actions/Policy';
 import ONYXKEYS from '../ONYXKEYS';
+import * as IOU from '../libs/actions/IOU';
+import * as ReportActionsUtils from '../libs/ReportActionsUtils';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -58,6 +60,12 @@ function MoneyRequestHeader(props) {
     const report = props.report;
     report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null);
     report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], '');
+    const parentReportAction = ReportActionsUtils.getParentReportAction(props.report);
+
+    const deleteTransaction = useCallback(() => {
+        IOU.deleteMoneyRequest(parentReportAction.originalMessage.IOUTransactionID, parentReportAction, true);
+    }, [parentReportAction]);
+
     return (
         <View style={[styles.pl0]}>
             <HeaderWithBackButton
@@ -67,8 +75,8 @@ function MoneyRequestHeader(props) {
                 threeDotsMenuItems={[
                     {
                         icon: Expensicons.Trashcan,
-                        text: props.translate('common.delete'),
-                        onSelected: () => {},
+                        text: props.translate('reportActionContextMenu.deleteAction', {action: parentReportAction}),
+                        onSelected: deleteTransaction,
                     },
                 ]}
                 threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}

src/components/ReportActionItem/MoneyRequestAction.js

@@ -20,6 +20,7 @@ import * as Report from '../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import refPropTypes from '../refPropTypes';
+import RenderHTML from '../RenderHTML';
 import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
 import reportPropTypes from '../../pages/reportPropTypes';
 
@@ -124,6 +125,7 @@ function MoneyRequestAction(props) {
     };
 
     let shouldShowPendingConversionMessage = false;
+    const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(props.action);
     if (
         !_.isEmpty(props.iouReport) &&
         !_.isEmpty(props.reportActions) &&
@@ -135,7 +137,9 @@ function MoneyRequestAction(props) {
         shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(props.reportActions, props.iouReport);
     }
 
-    return (
+    return isDeletedParentAction ? (
+        <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedRequest')}</comment>`} />
+    ) : (
         <IOUPreview
             iouReportID={props.requestReportID}
             chatReportID={props.chatReportID}

src/languages/en.js

@@ -1502,6 +1502,7 @@ export default {
     },
     parentReportAction: {
         deletedMessage: '[Deleted message]',
+        deletedRequest: '[Deleted request]',
         hiddenMessage: '[Hidden message]',
     },
     threads: {

src/languages/es.js

@@ -1973,6 +1973,7 @@ export default {
     },
     parentReportAction: {
         deletedMessage: '[Mensaje eliminado]',
+        deletedRequest: '[Pedido eliminado]',
         hiddenMessage: '[Mensaje oculto]',
     },
     threads: {

src/libs/IOUUtils.js

@@ -32,10 +32,10 @@ function calculateAmount(numberOfParticipants, total, isDefaultUser = false) {
  * @param {Number} actorAccountID
  * @param {Number} amount
  * @param {String} currency
- * @param {String} type
+ * @param {String} isDeleting - whether the user is deleting the request
  * @returns {Object}
  */
-function updateIOUOwnerAndTotal(iouReport, actorAccountID, amount, currency, type = CONST.IOU.REPORT_ACTION_TYPE.CREATE) {
+function updateIOUOwnerAndTotal(iouReport, actorAccountID, amount, currency, isDeleting = false) {
     if (currency !== iouReport.currency) {
         return iouReport;
     }
@@ -44,9 +44,9 @@ function updateIOUOwnerAndTotal(iouReport, actorAccountID, amount, currency, typ
     const iouReportUpdate = {...iouReport};
 
     if (actorAccountID === iouReport.ownerAccountID) {
-        iouReportUpdate.total += type === CONST.IOU.REPORT_ACTION_TYPE.DELETE ? -amount : amount;
+        iouReportUpdate.total += isDeleting ? -amount : amount;
     } else {
-        iouReportUpdate.total += type === CONST.IOU.REPORT_ACTION_TYPE.DELETE ? amount : -amount;
+        iouReportUpdate.total += isDeleting ? amount : -amount;
     }
 
     if (iouReportUpdate.total < 0) {

src/libs/OptionsListUtils.js

@@ -352,7 +352,7 @@ function getAllReportErrors(report, reportActions) {
     const reportsActions = reportActions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] || {};
     const reportActionErrors = _.reduce(
         reportsActions,
-        (prevReportActionErrors, action) => (_.isEmpty(action.errors) ? prevReportActionErrors : _.extend(prevReportActionErrors, action.errors)),
+        (prevReportActionErrors, action) => (!action || _.isEmpty(action.errors) ? prevReportActionErrors : _.extend(prevReportActionErrors, action.errors)),
         {},
     );
 

src/libs/ReportActionsUtils.js

@@ -61,6 +61,14 @@ function isDeletedAction(reportAction) {
     return message.length === 0 || lodashGet(message, [0, 'html']) === '';
 }
 
+/**
+ * @param {Object} reportAction
+ * @returns {Boolean}
+ */
+function isDeletedParentAction(reportAction) {
+    return lodashGet(reportAction, ['message', 0, 'isDeletedParentAction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0;
+}
+
 /**
  * @param {Object} reportAction
  * @returns {Boolean}
@@ -334,8 +342,7 @@ function shouldReportActionBeVisible(reportAction, key) {
     // All other actions are displayed except thread parents, deleted, or non-pending actions
     const isDeleted = isDeletedAction(reportAction);
     const isPending = !_.isEmpty(reportAction.pendingAction);
-    const isDeletedParentAction = lodashGet(reportAction, ['message', 0, 'isDeletedParentAction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0;
-    return !isDeleted || isPending || isDeletedParentAction;
+    return !isDeleted || isPending || isDeletedParentAction(reportAction);
 }
 
 /**
@@ -346,6 +353,10 @@ function shouldReportActionBeVisible(reportAction, key) {
  * @returns {Boolean}
  */
 function shouldReportActionBeVisibleAsLastAction(reportAction) {
+    if (!reportAction) {
+        return false;
+    }
+
     return shouldReportActionBeVisible(reportAction, reportAction.reportActionID) && !isWhisperAction(reportAction) && !isDeletedAction(reportAction);
 }
 
@@ -522,7 +533,7 @@ function getMostRecentReportActionLastModified() {
 function getReportPreviewAction(chatReportID, iouReportID) {
     return _.find(
         allReportActions[chatReportID],
-        (reportAction) => reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lodashGet(reportAction, 'originalMessage.linkedReportID') === iouReportID,
+        (reportAction) => reportAction && reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lodashGet(reportAction, 'originalMessage.linkedReportID') === iouReportID,
     );
 }
 
@@ -574,6 +585,7 @@ export {
     isTransactionThread,
     getFormattedAmount,
     isSentMoneyReportAction,
+    isDeletedParentAction,
     isReportPreviewAction,
     getIOUReportIDFromReportActionPreview,
     isMessageDeleted,

src/libs/ReportUtils.js

@@ -259,6 +259,10 @@ function isCurrentUserSubmitter(reportID) {
  * @returns {Boolean}
  */
 function canDeleteReportAction(reportAction, reportID) {
+    const isActionOwner = reportAction.actorAccountID === currentUserAccountID;
+    if (isActionOwner && ReportActionsUtils.isMoneyRequestAction(reportAction) && !isSettled(reportAction.originalMessage.IOUReportID)) {
+        return true;
+    }
     if (
         reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT ||
         reportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ||
@@ -268,7 +272,7 @@ function canDeleteReportAction(reportAction, reportID) {
     ) {
         return false;
     }
-    if (reportAction.actorAccountID === currentUserAccountID) {
+    if (isActionOwner) {
         return true;
     }
     const report = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {});
@@ -1178,6 +1182,10 @@ function getMoneyRequestReportName(report, policy = undefined) {
  * @returns {String}
  */
 function getTransactionReportName(reportAction) {
+    if (ReportActionsUtils.isDeletedParentAction(reportAction)) {
+        return Localize.translateLocal('parentReportAction.deletedRequest');
+    }
+
     return Localize.translateLocal(ReportActionsUtils.isSentMoneyReportAction(reportAction) ? 'iou.threadSentMoneyReportName' : 'iou.threadRequestReportName', {
         formattedAmount: ReportActionsUtils.getFormattedAmount(reportAction),
         comment: lodashGet(reportAction, 'originalMessage.comment'),