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

src/components/DistanceRequest/index.js

@@ -82,7 +82,7 @@ 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);

src/components/MoneyRequestConfirmationList.js

@@ -11,6 +11,7 @@ import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import Log from '@libs/Log';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
@@ -249,6 +250,7 @@ function MoneyRequestConfirmationList(props) {
     const shouldShowBillable = canUseTags && !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')
@@ -264,12 +266,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) {
@@ -280,9 +286,14 @@ function MoneyRequestConfirmationList(props) {
             setFormError('iou.error.genericSmartscanFailureMessage');
             return;
         }
+
+        if (shouldDisplayFieldError && hasRouteError) {
+            setFormError(_.values(ErrorUtils.getLatestErrorField(transaction, 'route'))[0]);
+            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) {
@@ -540,13 +551,25 @@ function MoneyRequestConfirmationList(props) {
                     <FormHelpMessage
                         style={[styles.ph1, styles.mb2]}
                         isError
-                        message={translate(formError)}
+                        message={props.isDistanceRequest ? formError : translate(formError)}
                     />
                 )}
                 {button}
             </>
         );
-    }, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions, translate, formError]);
+    }, [
+        confirm,
+        props.bankAccountRoute,
+        props.iouCurrencyCode,
+        props.iouType,
+        props.isReadOnly,
+        props.policyID,
+        selectedParticipants,
+        splitOrRequestOptions,
+        translate,
+        formError,
+        props.isDistanceRequest,
+    ]);
 
     const {image: receiptImage, thumbnail: receiptThumbnail} =
         props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, props.receiptPath, props.receiptFilename) : {};
@@ -672,6 +695,7 @@ function MoneyRequestConfirmationList(props) {
                             titleStyle={styles.flex1}
                             onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DISTANCE.getRoute(props.iouType, props.reportID))}
                             disabled={didConfirm || !isTypeRequest}
+                            brickRoadIndicator={shouldDisplayFieldError && hasRouteError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                             interactive={!props.isReadOnly}
                         />
                     )}

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -162,8 +162,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

@@ -19,6 +19,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Permissions from '@libs/Permissions';
@@ -151,11 +152,17 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
     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;
 
@@ -211,6 +218,8 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                             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 ? lodashValues(ErrorUtils.getLatestErrorField(transaction, 'route'))[0] : ''}
                         />
                     </OfflineWithFeedback>
                 ) : (

src/components/ReportActionItem/ReportPreview.js

@@ -125,7 +125,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

@@ -353,10 +353,18 @@ function getAllReportErrors(report, reportActions) {
         if (TransactionUtils.hasMissingSmartscanFields(transaction)) {
             _.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)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
+
+        if (ReportUtils.hasRouteError(report.reportID)) {
+            _.extend(reportActionErrors, {waypoint: ErrorUtils.getMicroSecondOnyxError('bankAccount.error.address')});
+        }
     }
 
     // All error objects related to the report. Each object in the sources contains error messages keyed by microtime

src/libs/ReportUtils.js

@@ -1704,7 +1704,7 @@ function canEditReportAction(reportAction) {
 /**
  * Gets all transactions on an IOU report with a receipt
  *
- * @param {string|null} iouReportID
+ * @param {String} iouReportID
  * @returns {[Object]}
  */
 function getTransactionsWithReceipts(iouReportID) {
@@ -1732,15 +1732,26 @@ function areAllRequestsBeingSmartScanned(iouReportID, reportPreviewAction) {
     return _.all(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction));
 }
 
+/**
+ * Check if any of the distance transactions in the report has invalid route
+ *
+ * @param {String|undefined} iouReportID
+ * @returns {Boolean}
+ */
+function hasRouteError(iouReportID) {
+    const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
+    return _.some(allTransactions, (transaction) => TransactionUtils.hasRouteError(transaction));
+}
+
 /**
  * Check if any of the transactions in the report has required missing fields
  *
- * @param {Object|null} iouReportID
+ * @param {String} iouReportID
  * @returns {Boolean}
  */
 function hasMissingSmartscanFields(iouReportID) {
-    const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
-    return _.some(transactionsWithReceipts, (transaction) => TransactionUtils.hasMissingSmartscanFields(transaction));
+    const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
+    return _.some(allTransactions, (transaction) => TransactionUtils.hasMissingSmartscanFields(transaction));
 }
 
 /**
@@ -4307,6 +4318,7 @@ export {
     hasOnlyDistanceRequestTransactions,
     hasNonReimbursableTransactions,
     hasMissingSmartscanFields,
+    hasRouteError,
     getIOUReportActionDisplayMessage,
     isWaitingForAssigneeToCompleteTask,
     isGroupChat,

src/libs/TransactionUtils.ts

@@ -361,6 +361,13 @@ function hasMissingSmartscanFields(transaction: Transaction): boolean {
     return 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
  */
@@ -484,4 +491,5 @@ export {
     getWaypointIndex,
     waypointHasValidAddress,
     getRecentTransactions,
+    hasRouteError,
 };