[Due for payment 2025-07-14] [$250] Expense - Entering merchant removed red box around receipt placeholder.

[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.67-0
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): slottwo1gcd1@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. Open self dm
3. Create a track manual expense
4. Create a new workspace - open workpace chat
5. Create a new report
6. From dropdown - add Unreported expense - select the expense & create the expense
7. Note receipt shows red box
8. Enter merchant

Expected Result:

Entering merchant must not remov red box around receipt placeholder.

Actual Result:

Entering merchant removed red box around receipt placeholder.

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/~021934609636800305295
• Upwork Job ID: 1934609636800305295
• Last Price Increase: 2025-06-16
• Automatic offers:
• linhvovan29546 | Contributor | 107807525

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

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

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-17 16:40:13 UTC.

Proposal

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

Entering merchant removed red box around receipt placeholder.

What is the root cause of that problem?

We display red border if there's scan errors

App/src/components/ReceiptEmptyState.tsx

Line 46 in e586c19

hasError && styles.borderColorDanger,

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 310 in e586c19

const hasErrors = hasMissingSmartscanFields(transaction);

And there's errors because merchant field is empty so areRequiredFieldsEmpty(transaction)) is true

App/src/libs/TransactionUtils/index.ts

Lines 853 to 855 in e586c19

	function hasMissingSmartscanFields(transaction: OnyxInputOrEntry<Transaction>): boolean {
	return !!(transaction && !isDistanceRequest(transaction) && !isReceiptBeingScanned(transaction) && areRequiredFieldsEmpty(transaction));
	}

In this case, because it's not actually a scan request, there should be no scan-related errors.

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

We should only show red border if there's actually a receipt, and since shouldShowReceiptEmptyState already filter out no receipts, there's actually no use of hasErrors here

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 568 in 2fa04d3

hasError={hasErrors}

So we can remove that prop.

This way there should be no red borders when adding transactions without receipt.

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

We can add unit test for hasMissingSmartscanFields, although this function is very specifically used so I don't think it's necessary.

What alternative solutions did you explore? (Optional)

N/A

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

@daledah After adding the hasReceipt check, we're no longer seeing the error message Enter a merchant name when the merchant field is empty.

[linhvovan29546]

Proposal

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

Expense - Entering merchant removed red box around receipt placeholder.

What is the root cause of that problem?

The Empty receipt is currently outlined in red if the transaction has an error (for example, if the merchant field is missing, as shown in the OP).

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 568 in 2fa04d3

hasError={hasErrors}

Once the merchant is added and there are no more errors, the red border disappears.

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

I think we should not display a red border for an empty receipt, as this is redundant since the transaction has no receipt.
Reviewing the history, previously hasErrors was set to true only if the transaction had a receipt (reference). Given the long history of changes, I’m not sure of the exact reasoning for the current implementation, so it might be worth confirming this behavior with the design team.
If this red border is indeed unnecessary, we should remove the hasError prop from ReceiptEmptyState here.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 567 to 568 in 2fa04d3

	<ReceiptEmptyState
	hasError={hasErrors}

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

N/A, based on the expected behavior.

What alternative solutions did you explore? (Optional)

Instead of using hasErrors to check for errors on an empty receipt, we can replace it with shouldShowReceiptAudit.

                            <ReceiptEmptyState
                            hasError={shouldShowReceiptAudit&&receiptViolations.length > 0}

This might also apply to cases where there is a receipt as well.

                            <View style={[styles.moneyRequestViewImage, receiptStyle,  shouldShowReceiptAudit && receiptViolations.length > 0 && styles.borderColorDanger]}>

Alternatively, we could check if receiptRequiredViolation is true and, if so, display a red box similar to the above.

                            hasError={shouldShowReceiptAudit && receiptRequiredViolation}

[daledah]

@jayeshmangwani Thanks for pointing that out! I updated proposal.

[jayeshmangwani]

Before we move forward, let's confirm with the @Expensify/design team where the red outline should be displayed for the receipt placeholder.

I believe we need to show the red outline when we get the error message: Receipt required over ${amount}.

• Design team, could you please confirm whether a red border should be displayed in this case?