[Payment 2025-10-20] [$250] Expense - After refresh saving description directs to create expense page

[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.1.71-8
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): Slottwo1 249553g44@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Log in with new gmail account
3. Tap fab - create expense - scan
4. Tap try it out from banner
5. Tap description
6. Refresh the page
7. Enter description as - d.com
8. Tap save

Expected Result:

After refresh saving description must direct to confirm details page.

Actual Result:

After refresh saving description shows confirm details briefly but directs to create expense page instead confirm details page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021940253290300744698
• Upwork Job ID: 1940253290300744698
• Last Price Increase: 2025-07-23
• Automatic offers:
• FitseTLT | Contributor | 108227492

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[FitseTLT]

Proposal

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

Expense - After refresh saving description directs to create expense page

What is the root cause of that problem?

When a page is refreshed for a receipt expense the receipt local file is removed from memory and cannot be accessed and in these cases we redirect the user in confirmation page to start over the creation flow

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

Lines 419 to 473 in 6b934d1

	// 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 = {};
	let isScanFilesCanBeRead = true;
	Promise.all(
	transactions.map((item) => {
	const itemReceiptFilename = item.filename;
	const itemReceiptPath = item.receipt?.source;
	const itemReceiptType = item.receipt?.type;
	const isLocalFile = isLocalFileFileUtils(itemReceiptPath);
	if (!isLocalFile) {
	newReceiptFiles = {...newReceiptFiles, [item.transactionID]: item.receipt};
	return;
	}
	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 checkIfScanFileCanBeRead(itemReceiptFilename, itemReceiptPath, itemReceiptType, onSuccess, onFailure);
	}),
	).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;
	}
	removeDraftTransactions(true).then(() => navigateToStartMoneyRequestStep(requestType, iouType, initialTransactionID, reportID));
	});

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

The redirection in confirmation page is correct but we need to add that effect in all other expense creation flows so that, for example in this case the user should be redirected immediately when they refresh on the description page. We need to convert this logic into a hook useRestartOnReceiptFailure and use it in all other expense creation flow pages
IOURequestStepDescription and all other pages.
The code will be similar to the above and the hook will take the necessary params as the transaction( of which the receipt is going to be read) reportID, initialTransactionID etc then just like the current logic we will use checkIfScanFileCanBeRead by passing the onFailure and onSuccess callbacks.

const useRestartOnReceiptFailure = (
    transactions: Array<OnyxEntry<Transaction>>,
    requestType: IOURequestType,
    initialTransactionID: string,
    reportID: string,
    iouType: IOUType,
    action: IOUAction,
    onSuccess: (file: File) => void = () => {},
) => {
    // 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 isScanFilesCanBeRead = true;

        Promise.all(
            transactions.map((item) => {
                if (!item) {
                    return;
                }
                const itemReceiptFilename = item.filename;
                const itemReceiptPath = item.receipt?.source;
                const itemReceiptType = item.receipt?.type;
                const isLocalFile = isLocalFileUtils(itemReceiptPath);

                if (!isLocalFile) {
                    return;
                }

                const onFailure = () => {
                    isScanFilesCanBeRead = false;
                    if (initialTransactionID === item.transactionID) {
                        setMoneyRequestReceipt(item.transactionID, '', '', true);
                    }
                };

                return checkIfScanFileCanBeRead(itemReceiptFilename, itemReceiptPath, itemReceiptType, onSuccess, onFailure);
            }),
        ).then(() => {
            if (isScanFilesCanBeRead) {
                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;
            }
            removeDraftTransactions(true).then(() => navigateToStartMoneyRequestStep(requestType, iouType, initialTransactionID, reportID));
        });
    }, [requestType, iouType, initialTransactionID, reportID, action, transactions, onSuccess]);
};

export default useRestartOnReceiptFailure;

Then we will use the hook in description and other pages in the flow.

    useRestartOnReceiptFailure([transaction], getRequestType(transaction), transactionID, reportID, iouType, action);

In most cases we will redirect user on failure but in some cases like IOUStepScan the user is already in that page so we can make the redirection optional. Then in both IOURequestStepConfirmation and IOUStepScan we are using this effect so we can replace it with the new hook to make things DRY; we just need to tweak the hook to keep track of receipts objects list just like the hook currently does in IOURequestStepConfirmation.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

If needed we can add a test for the hook to assert it re-navigates when the receipt is not readable.

What alternative solutions did you explore? (Optional)

[melvin-bot]

@strepanier03 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@strepanier03 Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @getusha (External)