[Due for payment 2026-04-14] Expense - Odometer photo is closed immediately after clicking rotate

[jponikarchuk]

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: v9.3.44-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #85105
Email or phone of affected tester (no customers): applausetester+piyoh@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11 / Chrome
App Component: Money Requests

Action Performed:

Preconditions: Logged in to expensifail account

Steps:

1. Click FAB and choose "Track distance"
2. Navigate to Odometer tab, fill the start reading, end reading, and add a photo to the end reading
3. Click next to the confirmation page
   4.Click "distance" field
4. Click the photo that just uploaded on the end reading
5. Click "rotate"
   7, Open the odometer end photo again
6. Click "rotate"

Expected Result:

in step 6, odometer end photo should stay still after clicking rotate without closed immediately, just like clicking rotate in step 8.

Actual Result:

in step 6, Odometer end photo is closed immediately after clicking rotate for the first time

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @jakubkalinski0

[Julesssss]

Not a blocker, but we'll get this resolved.

[jakubkalinski0]

I believe I already know why is that happening. Current version on main doesn't yet have the backup transaction implemented. That's basically what's blocking us from safely editing values/images in "Distance" from confirmation screen. When we rotate a photo we basically create a completely new image which gets new blob URL. When we change the single photo we call setMoneyRequestOdometerImage in TransactionReceiptModalContent, which not only saves the new image to ONYX but also takes care of cleaning stale blob URLs and immediately calls revokeOdometerImageUri. When that happens this useEffect in IOURequestStepConfirmation re-runs and verifies that the receipt isn't actually properly working (it's checking on the old receipt as the new Odometer Image wasn't yet set as a new receipt). When it detects the corrupted receipt it calls navigateToStartMoneyRequestStep and this way we land on Odometer tab once again.

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

Lines 623 to 681 in f0b9ae0

	// When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, redirect the user to the starting step of the flow.
	// This is because until the request is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then
	// the image ceases to exist. The best way for the user to recover from this is to start over from the start of the request process.
	// skip this in case user is moving the transaction as the receipt path will be valid in that case
	useEffect(() => {
	let newReceiptFiles: Record<string, Receipt> = {};
	let isScanFilesCanBeRead = true;
	Promise.all(
	transactions.map((item) => {
	const itemReceiptFilename = item.receipt?.filename;
	const itemReceiptPath = item.receipt?.source;
	const itemReceiptType = item.receipt?.type;
	const isLocalFile = isLocalFileFileUtils(itemReceiptPath);
	if (!isLocalFile) {
	if (item.receipt) {
	newReceiptFiles = {...newReceiptFiles, [item.transactionID]: item.receipt};
	}
	return Promise.resolve();
	}
	const onSuccess = (file: File) => {
	const receipt: Receipt = file;
	if (item?.receipt?.isTestReceipt) {
	receipt.isTestReceipt = true;
	receipt.state = CONST.IOU.RECEIPT_STATE.SCAN_COMPLETE;
	} else if (item?.receipt?.isTestDriveReceipt) {
	receipt.isTestDriveReceipt = true;
	receipt.state = CONST.IOU.RECEIPT_STATE.SCAN_COMPLETE;
	} else {
	receipt.state = file && requestType === CONST.IOU.REQUEST_TYPE.MANUAL ? CONST.IOU.RECEIPT_STATE.OPEN : CONST.IOU.RECEIPT_STATE.SCAN_READY;
	}
	newReceiptFiles = {...newReceiptFiles, [item.transactionID]: receipt};
	};
	const onFailure = () => {
	isScanFilesCanBeRead = false;
	if (initialTransactionID === item.transactionID) {
	setMoneyRequestReceipt(item.transactionID, '', '', true, '');
	}
	};
	return validateReceiptFile(itemReceiptFilename, itemReceiptPath, itemReceiptType, onSuccess, onFailure) ?? Promise.resolve();
	}),
	).then(() => {
	if (isScanFilesCanBeRead) {
	setReceiptFiles(newReceiptFiles);
	return;
	}
	if (requestType === CONST.IOU.REQUEST_TYPE.MANUAL) {
	Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, initialTransactionID, reportID, Navigation.getActiveRouteWithoutParams()));
	return;
	}
	removeDraftTransactionsByIDs(draftTransactionIDs, true);
	navigateToStartMoneyRequestStep(requestType, iouType, initialTransactionID, reportID);
	});
	}, [requestType, iouType, initialTransactionID, reportID, action, report, transactions, participants]);

[jakubkalinski0]

TLDR this will be resolved here -> [Odometer] Add backup transaction for purpose of editing from confirmation. We can tag this issue under the PR and add it as a test case but besides that I don't think a separate fix is needed here

@Julesssss Should I link it in the PR description and add test steps?

[DylanDylann]

@Julesssss Should I link it in the PR description and add test steps?

Let's do it