[Due for payment 2025-04-28] Expense - Report page is blank when submitting expense to workspace with no report

[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: 9.1.28-1
Reproducible in staging?: Yes
Reproducible in production?: Unable to check, new feature
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+sdsoidsj@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat that has no expense report.
3. Click + > Create expense > Manual.
4. Enter amountn > Next.
5. Click Show more.
6. Note that Report field has a report title.
7. Click Report.

Expected Result:

Report page should display the report title in Step 6.

Actual Result:

Report page is blank.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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]

Triggered auto assignment to @techievivek (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[daledah]

Proposal

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

• The Report page appears blank.

What is the root cause of that problem?

• We always allow users to click on the "Report" row to open the report selector screen:
  

  App/src/components/MoneyRequestConfirmationListFooter.tsx

  Line 655 in 4ee6daa

  <MenuItemWithTopDescription

• However, this behavior occurs regardless of whether we have valid report data to display, which can lead to a blank screen.

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

• We should correctly populate the values for these props:

  • App/src/components/MoneyRequestConfirmationListFooter.tsx

    Line 657 in 4ee6daa

    shouldShowRightIcon

  • App/src/components/MoneyRequestConfirmationListFooter.tsx

    Line 668 in 4ee6daa

    interactive

!!getOutstandingReports(policyID, allReports ?? {}).at(0)

with:

const policyID = Object.values(allReports ?? {}).find(
    (report) =>
        report?.reportID === transaction?.reportID ||
        report?.reportID === transaction?.participants?.at(0)?.reportID,
)?.policyID;

• Then, we should ensure the report selector screen handles the empty state gracefully. In:
  

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

  Line 94 in 4ee6daa

  <StepScreenWrapper

  we can display a "not found" or empty state view when no report options are available by setting:

shouldShowNotFoundPage={expenseReports.length === 0}

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

• None

What alternative solutions did you explore? (Optional)

Option 1:

• In this screen, we can pass the current selected reportName via its url.

• Then in here:

        if (expenseReports.length === 0) {
            return [{text: route.params.reportName, value: '', keyForList: route.params.reportName, isSelected: true, isInteractive: false, isDisabled: false}];
        }

Option 2:

• We can display the empty state view when expenseReports.length === 0

[rayane-d]

Discussing in https://expensify.slack.com/archives/C01GTK53T8Q/p1744712146580769