Add edit request button to the report action context menu

src/components/ReportActionItem/MoneyRequestAction.js

@@ -17,12 +17,12 @@ import styles from '../../styles/styles';
 import * as IOUUtils from '../../libs/IOUUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 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';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     /** All the data of the action */
@@ -58,17 +58,9 @@ const propTypes = {
 
     network: networkPropTypes.isRequired,
 
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user email */
-        email: PropTypes.string,
-    }),
-
     /** Styles to be assigned to Container */
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.arrayOf(PropTypes.object),
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -78,77 +70,73 @@ const defaultProps = {
     iouReport: {},
     reportActions: {},
     isHovered: false,
-    session: {
-        email: null,
-    },
     style: [],
 };
 
-function MoneyRequestAction(props) {
-    const isSplitBillAction = lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
+function MoneyRequestAction({
+    action,
+    chatReportID,
+    requestReportID,
+    isMostRecentIOUReportAction,
+    contextMenuAnchor,
+    checkIfContextMenuActive,
+    chatReport,
+    iouReport,
+    reportActions,
+    isHovered,
+    network,
+    style,
+}) {
+    const {translate} = useLocalize();
+    const isSplitBillAction = lodashGet(action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
 
     const onIOUPreviewPressed = () => {
         if (isSplitBillAction) {
-            const reportActionID = lodashGet(props.action, 'reportActionID', '0');
-            Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.chatReportID, reportActionID));
+            const reportActionID = lodashGet(action, 'reportActionID', '0');
+            Navigation.navigate(ROUTES.getSplitBillDetailsRoute(chatReportID, reportActionID));
             return;
         }
 
         // If the childReportID is not present, we need to create a new thread
-        const childReportID = lodashGet(props.action, 'childReportID', '0');
-        if (childReportID === '0') {
-            const participantAccountIDs = _.uniq([props.session.accountID, Number(props.action.actorAccountID)]);
-            const thread = ReportUtils.buildOptimisticChatReport(
-                participantAccountIDs,
-                ReportUtils.getTransactionReportName(props.action),
-                '',
-                lodashGet(props.iouReport, 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE),
-                CONST.POLICY.OWNER_ACCOUNT_ID_FAKE,
-                false,
-                '',
-                undefined,
-                undefined,
-                CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS,
-                props.action.reportActionID,
-                props.requestReportID,
-            );
-
+        const childReportID = lodashGet(action, 'childReportID', 0);
+        if (!childReportID) {
+            const thread = ReportUtils.buildTransactionThread(action);
             const userLogins = PersonalDetailsUtils.getLoginsByAccountIDs(thread.participantAccountIDs);
-            Report.openReport(thread.reportID, userLogins, thread, props.action.reportActionID);
+            Report.openReport(thread.reportID, userLogins, thread, action.reportActionID);
             Navigation.navigate(ROUTES.getReportRoute(thread.reportID));
-        } else {
-            Report.openReport(childReportID);
-            Navigation.navigate(ROUTES.getReportRoute(childReportID));
+            return;
         }
+        Report.openReport(childReportID);
+        Navigation.navigate(ROUTES.getReportRoute(childReportID));
     };
 
     let shouldShowPendingConversionMessage = false;
-    const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(props.action);
+    const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action);
     if (
-        !_.isEmpty(props.iouReport) &&
-        !_.isEmpty(props.reportActions) &&
-        props.chatReport.hasOutstandingIOU &&
-        props.isMostRecentIOUReportAction &&
-        props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD &&
-        props.network.isOffline
+        !_.isEmpty(iouReport) &&
+        !_.isEmpty(reportActions) &&
+        chatReport.hasOutstandingIOU &&
+        isMostRecentIOUReportAction &&
+        action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD &&
+        network.isOffline
     ) {
-        shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(props.reportActions, props.iouReport);
+        shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(reportActions, iouReport);
     }
 
     return isDeletedParentAction ? (
-        <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedRequest')}</comment>`} />
+        <RenderHTML html={`<comment>${translate('parentReportAction.deletedRequest')}</comment>`} />
     ) : (
         <IOUPreview
-            iouReportID={props.requestReportID}
-            chatReportID={props.chatReportID}
+            iouReportID={requestReportID}
+            chatReportID={chatReportID}
             isBillSplit={isSplitBillAction}
-            action={props.action}
-            contextMenuAnchor={props.contextMenuAnchor}
-            checkIfContextMenuActive={props.checkIfContextMenuActive}
+            action={action}
+            contextMenuAnchor={contextMenuAnchor}
+            checkIfContextMenuActive={checkIfContextMenuActive}
             shouldShowPendingConversionMessage={shouldShowPendingConversionMessage}
             onPreviewPressed={onIOUPreviewPressed}
-            containerStyles={[styles.cursorPointer, props.isHovered ? styles.iouPreviewBoxHover : undefined, ...props.style]}
-            isHovered={props.isHovered}
+            containerStyles={[styles.cursorPointer, isHovered ? styles.iouPreviewBoxHover : undefined, ...style]}
+            isHovered={isHovered}
         />
     );
 }
@@ -158,7 +146,6 @@ MoneyRequestAction.defaultProps = defaultProps;
 MoneyRequestAction.displayName = 'MoneyRequestAction';
 
 export default compose(
-    withLocalize,
     withOnyx({
         chatReport: {
             key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
@@ -170,9 +157,6 @@ export default compose(
             key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`,
             canEvict: false,
         },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
     }),
     withNetwork(),
 )(MoneyRequestAction);

src/components/ReportActionItem/MoneyRequestView.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import {View, Image} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
 import ONYXKEYS from '../../ONYXKEYS';
 import ROUTES from '../../ROUTES';
-import * as Policy from '../../libs/actions/Policy';
 import Navigation from '../../libs/Navigation/Navigation';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import compose from '../../libs/compose';
@@ -40,12 +38,6 @@ const propTypes = {
         avatar: PropTypes.string,
     }),
 
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user email */
-        email: PropTypes.string,
-    }),
-
     /** Whether we should display the horizontal rule below the component */
     shouldShowHorizontalRule: PropTypes.bool.isRequired,
 
@@ -55,12 +47,9 @@ const propTypes = {
 const defaultProps = {
     parentReport: {},
     policy: null,
-    session: {
-        email: null,
-    },
 };
 
-function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, policy, session}) {
+function MoneyRequestView({report, parentReport, shouldShowHorizontalRule}) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
 
@@ -71,9 +60,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
     const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
 
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
-    const isAdmin = Policy.isAdminOfFreePolicy([policy]) && ReportUtils.isExpenseReport(moneyRequestReport);
-    const isRequestor = ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(session, 'accountID', null) === parentReportAction.actorAccountID;
-    const canEdit = !isSettled && (isAdmin || isRequestor);
+    const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
 
     let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
     if (isSettled) {
@@ -139,8 +126,5 @@ export default compose(
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,
         },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
     }),
 )(MoneyRequestView);

src/languages/en.js

@@ -273,7 +273,7 @@ export default {
         copyEmailToClipboard: 'Copy email to clipboard',
         markAsUnread: 'Mark as unread',
         markAsRead: 'Mark as read',
-        editComment: 'Edit comment',
+        editAction: ({action}) => `Edit ${ReportActionsUtils.isMoneyRequestAction(action) ? 'request' : 'comment'}`,
         deleteAction: ({action}) => `Delete ${ReportActionsUtils.isMoneyRequestAction(action) ? 'request' : 'comment'}`,
         deleteConfirmation: ({action}) => `Are you sure you want to delete this ${ReportActionsUtils.isMoneyRequestAction(action) ? 'request' : 'comment'}?`,
         onlyVisible: 'Only visible to',

src/languages/es.js

@@ -272,7 +272,7 @@ export default {
         copyEmailToClipboard: 'Copiar email al portapapeles',
         markAsUnread: 'Marcar como no leído',
         markAsRead: 'Marcar como leído',
-        editComment: 'Editar comentario',
+        editAction: ({action}) => `Edit ${ReportActionsUtils.isMoneyRequestAction(action) ? 'pedido' : 'comentario'}`,
         deleteAction: ({action}) => `Eliminar ${ReportActionsUtils.isMoneyRequestAction(action) ? 'pedido' : 'comentario'}`,
         deleteConfirmation: ({action}) => `¿Estás seguro de que quieres eliminar este ${ReportActionsUtils.isMoneyRequestAction(action) ? 'pedido' : 'comentario'}`,
         onlyVisible: 'Visible sólo para',