[HOLD for payment][$250] Categorizing - Distance does not show route and button loads infinitely on confirmation page

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.22-7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• User is logged in with Expensifail account

1. Go to staging.new.expensify.com
2. Go to self DM
3. Go to + > Track expense > Distance
4. Submit a track distance expense
5. Click Categorize it from the actionable whisper
6. Select a workspace and category
7. On confirmation page, click Distance
8. Note that the map does not display the route with infinite loading button
9. Dismiss the confirmation page
10. Click on the expense preview
11. Note that Distance and Rate fields show pending

Expected Result:

In Step 8, the map will show the correct route and the button will not load infinitely
In Step 11, Distance and Rate fields will show the correct data

Actual Result:

In Step 8, the map does not show the correct route (no green route line) and the button loads infinitely
In Step 11, Distance and Rate fields show "Pending"

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6577252_1724172650517.20240821_004508.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015f5f740a4477255d
• Upwork Job ID: 1826736671618731941
• Last Price Increase: 2024-08-22

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@johncschuster FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In Step 8, the map does not show the correct route (no green route line) and the button loads infinitely
In Step 11, Distance and Rate fields show "Pending"

What is the root cause of that problem?

I cannot reproduce the issue because you cannot edit Distance in a track expense:

App/src/components/MoneyRequestConfirmationListFooter.tsx

Line 332 in 685bb4c

interactive={!isReadOnly && !isMovingTransactionFromTrackExpense}

The only problem I faced is that the route does not show in confirmation screen:

That's because we cleared transaction's routes on success here. Later it would be retrieved by GetRoute API, for example in distance editor here.

So apparently we do not call GetRoute in confirmation screen so we couldn't see the route.

What changes do you think we should make in order to solve the problem?

Call GetRoute in confirmation screen if:

• the route is empty; and
• the transaction has loaded; and
• the waypoints are valid

const isEmptyCoordinates = !transaction?.routes?.route0?.geometry?.coordinates?.length;
const isLoadingRoute = transaction?.comment?.isLoading ?? false;
const validatedWaypoints = TransactionUtils.getValidWaypoints(transaction?.comment?.waypoints);
const shouldFetchRoute = isEmptyCoordinates && !isLoadingRoute && Object.keys(validatedWaypoints).length > 1;

useEffect(() => {
    if (isOffline || !shouldFetchRoute) {
        return;
    }
    TransactionAction.getRoute(transactionID, validatedWaypoints, action === CONST.IOU.ACTION.CREATE);
}, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline, action]);

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance map doesn't show the green route when categorizing a track expense and when opening the distance edit page, the button loads infinitely.

What is the root cause of that problem?

When the track expense is completed, the routes object whcih contains the green line route is cleared.

App/src/libs/actions/IOU.ts

Lines 1509 to 1515 in 685bb4c

	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`,
	value: {
	pendingAction: null,
	pendingFields: clearedPendingFields,
	routes: null,
	},

So, when we try to categorize it and it opens the confirmation page, we don't see the green route line. The route will be re-fetched if we open the distance page.

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Lines 162 to 167 in 685bb4c

	useEffect(() => {
	if (isOffline || !shouldFetchRoute) {
	return;
	}
	TransactionAction.getRoute(transactionID, validatedWaypoints, action === CONST.IOU.ACTION.CREATE);
	}, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline, action]);

But in our case, it loads infinitely. It's because, when we call the GetRoute request, it saves the route to transactions_xxx, meanwhile, we use transactionsDraft_xxx when categorizing the expense.

App/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx

Lines 76 to 78 in 685bb4c

	if (userAction === CONST.IOU.ACTION.CREATE || IOUUtils.isMovingTransactionFromTrackExpense(userAction)) {
	return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`;
	}

So, shouldFetchRoute stays true because the route is still empty,

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 98 in 685bb4c

const hasRoute = TransactionUtils.hasRoute(transaction);

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 103 in 685bb4c

const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && Object.keys(validatedWaypoints).length > 1;

and the loading shows indefinitely.

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 513 in 685bb4c

isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)}

Also, there is another issue with STRICT MODE. The code below that saves and restores backup is triggered twice because of the strict mode. The problem is, the restore logic is called late.

create backup
create backup
restore backup to draft

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Lines 187 to 205 in 685bb4c

	useEffect(() => {
	if (isCreatingNewRequest) {
	return () => {};
	}
	// On mount, create the backup transaction.
	TransactionEdit.createBackupTransaction(transaction);
	return () => {
	// If the user cancels out of the modal without without saving changes, then the original transaction
	// needs to be restored from the backup so that all changes are removed.
	if (transactionWasSaved.current) {
	TransactionEdit.removeBackupTransaction(transaction?.transactionID ?? '-1');
	return;
	}
	TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', action === CONST.IOU.ACTION.CREATE);
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

It's because the restore needs to connect to the onyx first which delays the logic,

App/src/libs/actions/TransactionEdit.ts

Lines 29 to 39 in 685bb4c

	function restoreOriginalTransactionFromBackup(transactionID: string, isDraft: boolean) {
	const connectionID = Onyx.connect({
	key: `${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transactionID}`,
	callback: (backupTransaction) => {
	Onyx.disconnect(connectionID);
	// Use set to completely overwrite the original transaction
	Onyx.set(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, backupTransaction ?? null);
	removeBackupTransaction(transactionID);
	},
	});

and the restore logic will remove the restore the backup to the draft and remove the backup. Once we close the page, the restore logic is called again, but this time, the backup is already empty, so we restore an empty data (null) to the transaction draft which clears it.

What changes do you think we should make in order to solve the problem?

To fix the infinite loading, we need to call GetRouteForDraft when categorizing.

TransactionAction.getRoute(transaction.transactionID, validatedWaypoints, action === CONST.IOU.ACTION.CREATE || IOUUtils.isMovingTransactionFromTrackExpense(action));

The last param tells whether to use draft or not. There are many places where we need to update from action === CONST.IOU.ACTION.CREATE to action === CONST.IOU.ACTION.CREATE || IOUUtils.isMovingTransactionFromTrackExpense(action)) like in waypoint page so we can update the waypoint while categorizing too.

App/src/pages/iou/request/step/IOURequestStepWaypoint.tsx

Line 158 in 685bb4c

Transaction.saveWaypoint(transactionID, pageIndex, waypoint, action === CONST.IOU.ACTION.CREATE);

To fix the missing route issue, we need to fetch the route in confirm page too following the similar logic we have in distance page. To keep it clean, we can make it a hook.

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Lines 162 to 167 in 685bb4c

	useEffect(() => {
	if (isOffline || !shouldFetchRoute) {
	return;
	}
	TransactionAction.getRoute(transactionID, validatedWaypoints, action === CONST.IOU.ACTION.CREATE);
	}, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline, action]);

useFetchRoute.ts

export default function (transaction, waypoints, action) {
    const {isOffline} = useNetwork();
    const hasRouteError = !!transaction?.errorFields?.route;
    const hasRoute = TransactionUtils.hasRoute(transaction);
    const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
    const isLoadingRoute = transaction?.comment?.isLoading ?? false;
    const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
    const previousValidatedWaypoints = usePrevious(validatedWaypoints);
    const haveValidatedWaypointsChanged = !isEqual(previousValidatedWaypoints, validatedWaypoints);
    const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && Object.keys(validatedWaypoints).length > 1;

    useEffect(() => {
        if (isOffline || !shouldFetchRoute) {
            return;
        }
        TransactionAction.getRoute(transaction.transactionID, validatedWaypoints, action === CONST.IOU.ACTION.CREATE || IOUUtils.isMovingTransactionFromTrackExpense(action));
    }, [shouldFetchRoute, transaction.transactionID, validatedWaypoints, isOffline, action]);

    return {shouldFetchRoute, validatedWaypoints};
}

Then, use it in distance and confirm page. For example, in confirm page,

useFetchRoute(transaction, transaction.comment.waypoints, action);

To solve the strict mode issue, we can cancel the restore if there is a create backup request.

let connectionID;

function createBackupTransaction(transaction: OnyxEntry<Transaction>) {
    ...;
    Onyx.disconnect(connectionID);
    // Use set so that it will always fully overwrite any backup transaction that could have existed before
    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transaction.transactionID}`, newTransaction);
}

function restoreOriginalTransactionFromBackup(transactionID: string, isDraft: boolean) {
    connectionID = Onyx.connect({...});
}

This will behaves as if we are updating the backup.

create backup
create backup
(the 2nd backup replaces the 1st one, but there will be no restore)

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 202 in 685bb4c

TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', action === CONST.IOU.ACTION.CREATE);

Notice that we need to update the action === CONST.IOU.ACTION.CREATE condition too as explained above.

[johncschuster]

Pinging my pal, @neil-marcellini for a little insight into the best project for this. I feel like it could be #wave-collect, but I'm not certain. Can you point me in the right direction?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015f5f740a4477255d