[$250] Approver - As non-admin approver open the report, next step is not displayed

[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.2.39-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: #72913
Email or phone of affected tester (no customers): ndk.2303+new264@gmail.com
Issue reported by: Applause Internal Team
Device used: Android 16 / Pixel 7A/ Chrome
App Component: Money Requests

Action Performed:

Preconditions:

• Admin Invite: Member 1, 2, 3
• Add approval workflow: Member 1 submit to Member 2, Member 3 is second approver
• Member 1 submit an expense to Workspace

1. Open https://staging.new.expensify.com/
2. Log in as Member 2, Navigate to Member 1 Workspace chat
3. Open the expense report
4. Approve the report
5. Log out Member 2
6. Log in as Member 3
7. Navigate to Member 1 Workspace chat
8. Open the expense report

Expected Result:

When approver open the submitter's expense report, next step is displayed correctly

Actual Result:

Next step is not displayed when approver firstly open the report after login. Navigate away and back, approver can view the next step.
Issue happens with admin also.

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/~021983402864696541675
• Upwork Job ID: 1983402864696541675
• Last Price Increase: 2025-12-10

Issue Owner

Current Issue Owner: @Krishna2323

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[valdiks]

Proposal

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

When a non-admin approver opens an expense report immediately after login, the "next step" information is not displayed. The next step only appears after the user navigates away from the report and returns to it. This creates a confusing experience where users don't know what action to take on the report until they trigger a re-render by navigating away and back.

What is the root cause of that problem?

The openReport() function in src/libs/actions/Report.ts does not calculate or set an optimistic nextStep value when opening a report.

What happens on first load after login:

1. User opens an expense report
2. openReport() calls the backend API
3. Backend doesn't reliably return nextStep data on first load after fresh login
4. Component receives nextStep = undefined from Onyx
5. Next step bar doesn't render

What happens after navigation:

1. User navigates away and returns
2. New openReport() call is made
3. Backend now includes nextStep in response (cache is warm)
4. Component displays it correctly

The component (MoneyReportHeader.tsx) correctly uses useOnyx and will reactively update when data changes. The problem is that openReport() relies entirely on the backend to provide nextStep, while other money request actions (approveMoneyRequest, submitReport, payMoneyRequest) all calculate optimistic nextStep values immediately using buildNextStepNew().

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

Add optimistic nextStep calculation to openReport() function to match the pattern used in other money request actions.

File to modify: src/libs/actions/Report.ts

Step 1: Add imports

import {buildNextStepNew} from '@libs/NextStepUtils';
import {isExpenseReport} from '@libs/ReportUtils';
import type {ReportNextStep} from '@src/types/onyx';

Step 2: In openReport() function (around line 950), calculate optimistic nextStep

// Get report and policy (using data already available in Report.ts)
const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
const policy = report?.policyID ? getPolicy(report.policyID) : undefined;

// Calculate optimistic nextStep for expense reports
let optimisticNextStep: ReportNextStep | null = null;
if (report && isExpenseReport(report)) {
    optimisticNextStep = buildNextStepNew({
        report,
        policy,
        currentUserAccountIDParam: currentUserAccountID,
        currentUserEmailParam: currentUserEmail,
        predictedNextStatus: report.statusNum ?? CONST.REPORT.STATUS_NUM.OPEN,
    });
}

// Add to existing optimisticData array
if (optimisticNextStep) {
    optimisticData.push({
        onyxMethod: Onyx.METHOD.MERGE,
        key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${reportID}`,
        value: optimisticNextStep,
    });
}

Why this works:

• Report.ts already has all required data via existing Onyx connections (currentUserAccountID, currentUserEmail, allReports)
• getPolicy() is already imported
• No new Onyx connections needed
• Backend response will override the optimistic value if different (standard Onyx.METHOD.MERGE behavior)
• Uses the same proven buildNextStepNew() function already in production

Testing approach:

1. Log out completely
2. Log in as non-admin approver
3. Navigate to expense report requiring approval
4. Verify next step displays immediately without delay
5. Test on all 5 platforms (Web, Desktop, iOS, Android, Mobile Web)
6. Verify offline functionality works
7. Ensure existing workflows (approve, submit, pay) still work correctly

What alternative solutions did you explore?

Alternative 1: Fix on the backend

• Could make backend always return nextStep on first load
• Rejected because frontend should not rely on backend for data it can calculate locally
• Would not improve offline experience

Alternative 2: Add new Onyx subscription in MoneyReportHeader component

• Could subscribe to additional data to calculate nextStep in component
• Rejected because this violates the pattern where actions (not components) manage optimistic updates
• Would duplicate logic already in buildNextStepNew()

Alternative 3: Call buildNextStepNew() directly in component

• Could calculate nextStep in the component's render cycle
• Rejected because optimistic updates should be set during the action, not during render
• Would break the established Onyx data flow pattern

The proposed solution follows Expensify's established patterns and requires minimal changes.