Expense - Merchant field is not above Description on expense details page

[mitarachim]

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

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Click + > Create expense > Manual.
4. Enter amount > Next.
5. On confirm page, Merchant is above Description.
6. Enter merchant and create the expense.
7. Open the expense.

Expected Result:

Merchant field should be above Description on expense details page, similar to confirm page.

Actual Result:

Merchant field is not above Description on expense details page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7153435_1778707714269.3.mp4

View all open jobs on GitHub

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #87920

[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.

[MelvinBot]

Proposal

What is the root cause of that problem?

PR #87920 refactored the confirmation page (MoneyRequestConfirmationList) to render Merchant above Description, but the expense details view page (MoneyRequestView.tsx) was not updated to match. In MoneyRequestView.tsx, Description is rendered at lines 962-990 and Merchant at lines 991-1020 — so Merchant appears below Description.

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

In MoneyRequestView.tsx, swap the Merchant/distance block (lines 991-1020) above the Description block (lines 962-990) so the field order on the expense details page matches the confirmation page: Amount → Merchant → Description → Date.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #87920 - "Feat: Manual expense flow UI refactor - r3" by @ChavdaSachin (High confidence)
Related Issues: #82586 (the issue that PR #87920 was fixing)

Recommendation: REVERT

PR #87920 changed the Merchant/Description field ordering on the confirm page but did not apply the same ordering change to the expense details page, creating an inconsistency between the two surfaces.

Assigned: @ChavdaSachin (PR author), @ShridharGoel (approving reviewer), @puneetlath (approving reviewer)
Labels: DeployBlockerCash kept (Frontend bug in App). No label changes made.

Detailed Analysis

Evidence

• melvin-bot already flagged PR Feat: Manual expense flow UI refactor - r3 #87920 as the causing PR immediately after the issue was filed.
• PR Feat: Manual expense flow UI refactor - r3 #87920 is listed in the current StagingDeployCash checklist and was merged on 2026-05-13, the same day this issue was reported as staging-only.
• The issue is not reproducible on production, consistent with this being a staging-only regression introduced by Feat: Manual expense flow UI refactor - r3 #87920.

Verification

Affected file: src/components/ReportActionItem/MoneyRequestView.tsx — this is the expense details page (opened after creating and then tapping an expense).

What PR #87920 changed: In src/components/MoneyRequestConfirmationListFooter/fieldGroups/TransactionDetailsFields.tsx, the PR relocated the MerchantField block to be rendered immediately after AmountField and before DescriptionField. This corrected the ordering on the confirm page so Merchant appears above Description.

What was NOT changed: MoneyRequestView.tsx (the expense details page) was not touched by PR #87920. In this file, the render order is:

1. Amount (line ~960)
2. Description (lines 962-989)
3. Merchant (lines 994-1019)

This means after PR #87920 landed, the confirm page shows: Amount → Merchant → Description, but the expense details page still shows: Amount → Description → Merchant. The user observes the mismatch when they complete the expense creation flow and open the created expense.

Root Cause

PR #87920 was a UI refactor for the new manual expense flow. As part of this refactor, the Merchant field was moved above Description in TransactionDetailsFields.tsx (used on the confirm page). However, MoneyRequestView.tsx — the separate component used to render the expense details page after an expense is opened — was not updated to match this new ordering. This left the two surfaces out of sync, producing the reported inconsistency.

Reverting PR #87920 will restore the original ordering on the confirm page to match the expense details page and eliminate the inconsistency.