[HOLD] Handle errors on manual requests

src/components/ReportActionItem/ReportPreview.js

@@ -32,6 +32,8 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import * as ReportActionUtils from '../../libs/ReportActionsUtils';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import ReportActionItemImages from './ReportActionItemImages';
+import OfflineWithFeedback from '../OfflineWithFeedback';
+import * as OptionListUtils from '../../libs/OptionsListUtils';
 
 const propTypes = {
     /** All the data of the action */
@@ -124,7 +126,7 @@ function ReportPreview(props) {
     const numberOfScanningReceipts = _.filter(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length;
     const hasReceipts = transactionsWithReceipts.length > 0;
     const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReportID, props.action);
-    const hasErrors = hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID);
+    const hasErrors = !_.isEmpty(OptionListUtils.getAllReportErrors(props.iouReport, {[props.action.reportActionID]: props.action}));
     const lastThreeTransactionsWithReceipts = ReportUtils.getReportPreviewDisplayTransactions(props.action);
     const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || ''));
 
@@ -175,88 +177,95 @@ function ReportPreview(props) {
         : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reportTotal !== 0;
 
     return (
-        <View style={[styles.chatItemMessage, ...props.containerStyles]}>
-            <PressableWithoutFeedback
-                onPress={() => {
-                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.iouReportID));
-                }}
-                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                onPressOut={() => ControlSelection.unblock()}
-                onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}
-                style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox]}
-                accessibilityRole="button"
-                accessibilityLabel={props.translate('iou.viewDetails')}
-            >
-                <View style={[styles.reportPreviewBox, props.isHovered || isScanning || props.isWhisper ? styles.reportPreviewBoxHoverBorder : undefined]}>
-                    {hasReceipts && (
-                        <ReportActionItemImages
-                            images={lastThreeReceipts}
-                            size={3}
-                            total={transactionsWithReceipts.length}
-                            isHovered={props.isHovered || isScanning}
-                        />
-                    )}
-                    <View style={styles.reportPreviewBoxBody}>
-                        <View style={styles.flexRow}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewMessage()}</Text>
-                            </View>
-                            {hasErrors && (
-                                <Icon
-                                    src={Expensicons.DotIndicator}
-                                    fill={themeColors.danger}
-                                />
-                            )}
-                        </View>
-                        <View style={styles.flexRow}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.textHeadline}>{getDisplayAmount()}</Text>
-                                {ReportUtils.isSettled(props.iouReportID) && (
-                                    <View style={styles.defaultCheckmarkWrapper}>
-                                        <Icon
-                                            src={Expensicons.Checkmark}
-                                            fill={themeColors.iconSuccessFill}
-                                        />
-                                    </View>
+        <OfflineWithFeedback
+            onClose={() => IOU.cleanUpFailedMoneyRequest(props.iouReport.reportID, props.action)}
+            pendingAction={props.action.pendingAction}
+            errors={lodashGet(props.iouReport, 'errorFields.createChat')}
+            shouldDisableStrikeThrough
+        >
+            <View style={[styles.chatItemMessage, ...props.containerStyles]}>
+                <PressableWithoutFeedback
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.iouReportID));
+                    }}
+                    onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPressOut={() => ControlSelection.unblock()}
+                    onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox]}
+                    accessibilityRole="button"
+                    accessibilityLabel={props.translate('iou.viewDetails')}
+                >
+                    <View style={[styles.reportPreviewBox, props.isHovered || isScanning || props.isWhisper ? styles.reportPreviewBoxHoverBorder : undefined]}>
+                        {hasReceipts && (
+                            <ReportActionItemImages
+                                images={lastThreeReceipts}
+                                size={3}
+                                total={transactionsWithReceipts.length}
+                                isHovered={props.isHovered || isScanning}
+                            />
+                        )}
+                        <View style={styles.reportPreviewBoxBody}>
+                            <View style={styles.flexRow}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewMessage()}</Text>
+                                </View>
+                                {hasErrors && (
+                                    <Icon
+                                        src={Expensicons.DotIndicator}
+                                        fill={themeColors.danger}
+                                    />
                                 )}
                             </View>
-                        </View>
-                        {!isScanning && (numberOfRequests > 1 || hasReceipts) && (
                             <View style={styles.flexRow}>
                                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
+                                    <Text style={styles.textHeadline}>{getDisplayAmount()}</Text>
+                                    {ReportUtils.isSettled(props.iouReportID) && (
+                                        <View style={styles.defaultCheckmarkWrapper}>
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={themeColors.iconSuccessFill}
+                                            />
+                                        </View>
+                                    )}
                                 </View>
                             </View>
-                        )}
-                        {shouldShowSettlementButton && (
-                            <SettlementButton
-                                currency={props.iouReport.currency}
-                                policyID={props.policyID}
-                                chatReportID={props.chatReportID}
-                                iouReport={props.iouReport}
-                                onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
-                                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                                addBankAccountRoute={bankAccountRoute}
-                                style={[styles.requestPreviewBox]}
-                                anchorAlignment={{
-                                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                                }}
-                            />
-                        )}
-                        {shouldShowSubmitButton && (
-                            <Button
-                                medium
-                                success={props.chatReport.isOwnPolicyExpenseChat}
-                                text={translate('common.submit')}
-                                style={styles.requestPreviewBox}
-                                onPress={() => IOU.submitReport(props.iouReport)}
-                            />
-                        )}
+                            {!isScanning && (numberOfRequests > 1 || hasReceipts) && (
+                                <View style={styles.flexRow}>
+                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{previewSubtitle || moneyRequestComment}</Text>
+                                    </View>
+                                </View>
+                            )}
+                            {shouldShowSettlementButton && (
+                                <SettlementButton
+                                    currency={props.iouReport.currency}
+                                    policyID={props.policyID}
+                                    chatReportID={props.chatReportID}
+                                    iouReport={props.iouReport}
+                                    onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
+                                    enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                                    addBankAccountRoute={bankAccountRoute}
+                                    style={[styles.requestPreviewBox]}
+                                    anchorAlignment={{
+                                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                    }}
+                                />
+                            )}
+                            {shouldShowSubmitButton && (
+                                <Button
+                                    medium
+                                    success={props.chatReport.isOwnPolicyExpenseChat}
+                                    text={translate('common.submit')}
+                                    style={styles.requestPreviewBox}
+                                    onPress={() => IOU.submitReport(props.iouReport)}
+                                />
+                            )}
+                        </View>
                     </View>
-                </View>
-            </PressableWithoutFeedback>
-        </View>
+                </PressableWithoutFeedback>
+            </View>
+        </OfflineWithFeedback>
     );
 }
 

src/libs/actions/IOU.js

@@ -22,6 +22,7 @@ import * as Report from './Report';
 import * as NumberUtils from '../NumberUtils';
 import ReceiptGeneric from '../../../assets/images/receipt-generic.png';
 import * as LocalePhoneNumber from '../LocalePhoneNumber';
+import * as ReportActions from './ReportActions';
 import * as Policy from './Policy';
 
 let allPersonalDetails;
@@ -364,6 +365,17 @@ function buildOnyxDataForMoneyRequest(
     return [optimisticData, successData, failureData];
 }
 
+/**
+ * @param {String} iouReportID
+ * @param {Object} iouAction
+ */
+function cleanUpFailedMoneyRequest(iouReportID, iouAction) {
+    const iouReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`];
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`, null);
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`, null);
+    ReportActions.clearReportActionErrors(iouReportID, iouAction);
+}
+
 /**
  * Gathers all the data needed to make a money request. It attempts to find existing reports, iouReports, and receipts. If it doesn't find them, then
  * it creates optimistic versions of them and uses those instead
@@ -2658,6 +2670,7 @@ export {
     resetMoneyRequestTag,
     setMoneyRequestBillable,
     setMoneyRequestParticipants,
+    cleanUpFailedMoneyRequest,
     setMoneyRequestReceipt,
     createEmptyTransaction,
     navigateToNextPage,

src/libs/actions/Report.js

@@ -516,6 +516,28 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p
         },
     ];
 
+    // If an expense report is being opened that has a failed money request, remove the report preview action in the failure data
+    // We need to do this because if the failed request was the first one on the workspace then the expense report will have also failed to create. Opening the report is going to fail and
+    // delete the report, so to complete the clean up we also need to get rid of the report preview action
+    const currentReport = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {});
+    const reportCreationErrors = _.compact(lodashGet(currentReport, 'errorFields.createChat'));
+    if (ReportUtils.isExpenseReport(currentReport) && currentReport.parentReportID && currentReport.parentReportActionID && !_.isEmpty(reportCreationErrors)) {
+        reportFailureData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${currentReport.parentReportID}`,
+            value: {
+                [currentReport.parentReportActionID]: null,
+            },
+        });
+        reportFailureData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${currentReport.parentReportID}`,
+            value: {
+                iouReportID: null,
+            },
+        });
+    }
+
     const onyxData = {
         optimisticData: optimisticReportData,
         successData: reportSuccessData,

src/libs/actions/ReportActions.ts

@@ -13,17 +13,26 @@ function clearReportActionErrors(reportID: string, reportAction: ReportAction) {
     }
 
     if (reportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
-        // Delete the optimistic action
         Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, {
             [reportAction.reportActionID]: null,
         });
 
+        // If the reportAction is linked to a different report, delete it from that report too
+        if (reportAction?.reportID && reportAction?.reportID !== originalReportID) {
+            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportAction.reportID}`, {
+                [reportAction.reportActionID]: null,
+            });
+        }
+
+        Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {
+            errorFields: null,
+        });
+
         // If there's a linked transaction, delete that too
         const linkedTransactionID = ReportActionUtils.getLinkedTransactionID(originalReportID, reportAction.reportActionID);
         if (linkedTransactionID) {
             Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${linkedTransactionID}`, null);
         }
-
         return;
     }
 

src/pages/home/report/ReportActionItemSingle.js

@@ -88,7 +88,7 @@ const showWorkspaceDetails = (reportID) => {
 };
 
 function ReportActionItemSingle(props) {
-    const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
+    const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID || 0 : props.action.actorAccountID;
     let {displayName} = props.personalDetailsList[actorAccountID] || {};
     const {avatar, login, pendingFields, status, fallbackIcon} = props.personalDetailsList[actorAccountID] || {};
     let actorHint = (login || displayName || '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');

src/types/onyx/Report.ts

@@ -71,7 +71,9 @@ type Report = {
     participantAccountIDs?: number[];
     total?: number;
     currency?: string;
+    errorFields?: string[];
     preexistingReportID?: string;
+
     /** If the report contains nonreimbursable expenses, send the nonreimbursable total */
     nonReimbursableTotal?: number;
 };

src/types/onyx/ReportAction.ts

@@ -52,6 +52,9 @@ type ReportActionBase = {
     /** The ID of the previous reportAction on the report. It is a string represenation of a 64-bit integer (or null for CREATED actions). */
     previousReportActionID?: string;
 
+    /** The ID of the report which the action belongs to */
+    reportID?: string;
+
     actorAccountID?: number;
 
     /** Person who created the action */