[HOLD issue #34615] Display waypoint error in confirm page and detail page

src/components/DistanceRequest/index.js

@@ -87,14 +87,21 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
 
     const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
     const isLoading = lodashGet(transaction, 'isLoading', false);
-    const hasRouteError = !!lodashGet(transaction, 'errorFields.route');
+    const hasRouteError = TransactionUtils.hasRouteError(transaction);
     const hasRoute = TransactionUtils.hasRoute(transaction);
     const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
     const previousValidatedWaypoints = usePrevious(validatedWaypoints);
     const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints);
     const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
-    const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
+    const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1 && !isLoading;
     const transactionWasSaved = useRef(false);
+    const isTransactionLoading = useRef(false);
+
+    useEffect(() => {
+        isTransactionLoading.current = lodashGet(transaction, 'isLoading', false);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     useEffect(() => {
         MapboxToken.init();
@@ -114,9 +121,9 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
         TransactionEdit.createBackupTransaction(transaction);
 
         return () => {
-            // If the user cancels out of the modal without without saving changes, then the original transaction
+            // If the user cancels out of the modal without without saving changes and transaction isn't loading, then the original transaction
             // needs to be restored from the backup so that all changes are removed.
-            if (transactionWasSaved.current) {
+            if (transactionWasSaved.current && !isTransactionLoading.current) {
                 return;
             }
             TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);

src/components/MoneyRequestConfirmationList.js

@@ -245,6 +245,7 @@ function MoneyRequestConfirmationList(props) {
     const shouldShowBillable = !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
 
     const hasRoute = TransactionUtils.hasRoute(transaction);
+    const hasRouteError = TransactionUtils.hasRouteError(transaction);
     const isDistanceRequestWithoutRoute = props.isDistanceRequest && !hasRoute;
     const formattedAmount = isDistanceRequestWithoutRoute
         ? translate('common.tbd')
@@ -260,12 +261,16 @@ function MoneyRequestConfirmationList(props) {
     const [didConfirmSplit, setDidConfirmSplit] = useState(false);
 
     const shouldDisplayFieldError = useMemo(() => {
-        if (!props.isEditingSplitBill) {
+        if (!props.isEditingSplitBill && !props.isDistanceRequest) {
             return false;
         }
 
-        return (props.hasSmartScanFailed && TransactionUtils.hasMissingSmartscanFields(transaction)) || (didConfirmSplit && TransactionUtils.areRequiredFieldsEmpty(transaction));
-    }, [props.isEditingSplitBill, props.hasSmartScanFailed, transaction, didConfirmSplit]);
+        return (
+            (props.hasSmartScanFailed && TransactionUtils.hasMissingSmartscanFields(transaction)) ||
+            (didConfirmSplit && TransactionUtils.areRequiredFieldsEmpty(transaction)) ||
+            (props.isDistanceRequest && hasRouteError)
+        );
+    }, [props.isEditingSplitBill, props.hasSmartScanFailed, transaction, didConfirmSplit, hasRouteError, props.isDistanceRequest]);
 
     useEffect(() => {
         if (shouldDisplayFieldError && props.hasSmartScanFailed) {
@@ -276,9 +281,14 @@ function MoneyRequestConfirmationList(props) {
             setFormError('iou.error.genericSmartscanFailureMessage');
             return;
         }
+
+        if (shouldDisplayFieldError && hasRouteError) {
+            setFormError('bankAccount.error.address');
+            return;
+        }
         // reset the form error whenever the screen gains or loses focus
         setFormError('');
-    }, [isFocused, transaction, shouldDisplayFieldError, props.hasSmartScanFailed, didConfirmSplit]);
+    }, [isFocused, transaction, shouldDisplayFieldError, props.hasSmartScanFailed, didConfirmSplit, hasRouteError]);
 
     useEffect(() => {
         if (!shouldCalculateDistanceAmount) {
@@ -534,7 +544,7 @@ function MoneyRequestConfirmationList(props) {
                     <FormHelpMessage
                         style={[styles.ph1, styles.mb2]}
                         isError
-                        message={translate(formError)}
+                        message={formError}
                     />
                 )}
                 {button}
@@ -552,7 +562,6 @@ function MoneyRequestConfirmationList(props) {
         formError,
         styles.ph1,
         styles.mb2,
-        translate,
     ]);
 
     const {image: receiptImage, thumbnail: receiptThumbnail} =
@@ -670,6 +679,7 @@ function MoneyRequestConfirmationList(props) {
                             titleStyle={styles.flex1}
                             onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DISTANCE.getRoute(props.iouType, props.reportID))}
                             disabled={didConfirm || !isTypeRequest}
+                            brickRoadIndicator={hasRouteError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                             interactive={!props.isReadOnly}
                         />
                     )}

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -165,8 +165,8 @@ function MoneyRequestPreview(props) {
     const description = requestComment;
     const hasReceipt = TransactionUtils.hasReceipt(props.transaction);
     const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(props.transaction);
-    const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(props.transaction);
     const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);
+    const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(props.transaction) || (isDistanceRequest && TransactionUtils.hasRouteError(props.transaction));
     const isExpensifyCardTransaction = TransactionUtils.isExpensifyCardTransaction(props.transaction);
     const isSettled = ReportUtils.isSettled(props.iouReport.reportID);
     const isDeleted = lodashGet(props.action, 'pendingAction', null) === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

src/components/ReportActionItem/MoneyRequestView.js

@@ -165,11 +165,17 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
     const hasReceipt = TransactionUtils.hasReceipt(transaction);
     let receiptURIs;
     let hasErrors = false;
+    const hasRouteError = TransactionUtils.hasRouteError(transaction);
+
     if (hasReceipt) {
         receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction);
         hasErrors = canEdit && TransactionUtils.hasMissingSmartscanFields(transaction);
     }
 
+    if (isDistanceRequest) {
+        hasErrors = canEdit && hasRouteError;
+    }
+
     const pendingAction = lodashGet(transaction, 'pendingAction');
     const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;
 
@@ -232,6 +238,8 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
                             shouldShowRightIcon={canEdit && !isSettled}
                             titleStyle={styles.flex1}
                             onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
+                            brickRoadIndicator={hasErrors && hasRouteError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                            error={hasErrors && hasRouteError ? translate('bankAccount.error.address') : ''}
                         />
                     </OfflineWithFeedback>
                 ) : (

src/components/ReportActionItem/ReportPreview.js

@@ -127,7 +127,7 @@ function ReportPreview(props) {
     const hasReceipts = transactionsWithReceipts.length > 0;
     const hasOnlyDistanceRequests = ReportUtils.hasOnlyDistanceRequestTransactions(props.iouReportID);
     const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReportID, props.action);
-    const hasErrors = hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID);
+    const hasErrors = (hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID)) || ReportUtils.hasRouteError(props.iouReportID);
     const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3);
     const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, (transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction));
     const hasNonReimbursableTransactions = ReportUtils.hasNonReimbursableTransactions(props.iouReportID);

src/libs/OptionsListUtils.js

@@ -354,10 +354,18 @@ function getAllReportErrors(report, reportActions) {
         if (TransactionUtils.hasMissingSmartscanFields(transaction) && !ReportUtils.isSettled(transaction.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
+
+        if (TransactionUtils.isDistanceRequest(transaction) && TransactionUtils.hasRouteError(transaction)) {
+            _.extend(reportActionErrors, {waypoint: ErrorUtils.getLatestErrorField(transaction, 'route')});
+        }
     } else if ((ReportUtils.isIOUReport(report) || ReportUtils.isExpenseReport(report)) && report.ownerAccountID === currentUserAccountID) {
         if (ReportUtils.hasMissingSmartscanFields(report.reportID) && !ReportUtils.isSettled(report.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
+
+        if (ReportUtils.hasRouteError(report.reportID)) {
+            _.extend(reportActionErrors, {waypoint: ErrorUtils.getMicroSecondOnyxError('bankAccount.error.address')});
+        }
     } else if (ReportUtils.hasSmartscanError(_.values(reportActions))) {
         _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
     }

src/libs/ReportUtils.ts

@@ -1875,6 +1875,15 @@ function areAllRequestsBeingSmartScanned(iouReportID: string, reportPreviewActio
     return transactionsWithReceipts.every((transaction) => TransactionUtils.isReceiptBeingScanned(transaction));
 }
 
+/**
+ * Check if any of the distance transactions in the report has invalid route
+ *
+ */
+function hasRouteError(iouReportID: string | undefined) {
+    const transactions = TransactionUtils.getAllReportTransactions(iouReportID);
+    return transactions.some((transaction) => TransactionUtils.hasRouteError(transaction));
+}
+
 /**
  * Check if any of the transactions in the report has required missing fields
  *
@@ -4470,6 +4479,7 @@ export {
     hasOnlyDistanceRequestTransactions,
     hasNonReimbursableTransactions,
     hasMissingSmartscanFields,
+    hasRouteError,
     getIOUReportActionDisplayMessage,
     isWaitingForAssigneeToCompleteTask,
     isGroupChat,

src/libs/TransactionUtils.ts

@@ -424,6 +424,13 @@ function hasMissingSmartscanFields(transaction: OnyxEntry<Transaction>): boolean
     return Boolean(transaction && hasReceipt(transaction) && !isDistanceRequest(transaction) && !isReceiptBeingScanned(transaction) && areRequiredFieldsEmpty(transaction));
 }
 
+/**
+ * Check if the transaction has route error
+ */
+function hasRouteError(transaction: Transaction): boolean {
+    return !!transaction?.errorFields?.route;
+}
+
 /**
  * Check if the transaction has a defined route
  */
@@ -555,4 +562,5 @@ export {
     getWaypointIndex,
     waypointHasValidAddress,
     getRecentTransactions,
+    hasRouteError,
 };

src/libs/actions/IOU.js

@@ -282,7 +282,10 @@ function buildOnyxDataForMoneyRequest(
         {
             onyxMethod: Onyx.METHOD.SET,
             key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`,
-            value: transaction,
+            value: {
+                ...transaction,
+                isLoading: true,
+            },
         },
         {
             onyxMethod: isNewChatReport ? Onyx.METHOD.SET : Onyx.METHOD.MERGE,
@@ -363,6 +366,7 @@ function buildOnyxDataForMoneyRequest(
             key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`,
             value: {
                 pendingAction: null,
+                isLoading: false,
                 pendingFields: null,
             },
         },
@@ -441,6 +445,7 @@ function buildOnyxDataForMoneyRequest(
             key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`,
             value: {
                 errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
+                isLoading: false,
                 pendingAction: null,
                 pendingFields: null,
             },