[HOLD for payment 2024-10-16] [$250] Expense - Add receipt modal disappears and then reappears after the receipt is deleted

[lanitochka17]

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.0.44-0
Reproducible in staging?: Y
Reproducible in production?: N
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): applausetester+kh0110001@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Submit an expense with receipt to any user
3. Go to transaction thread
4. Click on the receipt
5. Click 3-dot menu > Delete receipt
6. Delete the receipt

Expected Result:

Add receipt modal will not disappear and reappear after the receipt is deleted

Actual Result:

Add receipt modal disappears and then reappears after the receipt is deleted

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6623235_1727962475397.receipt.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021841875580285563023
• Upwork Job ID: 1841875580285563023
• Last Price Increase: 2024-10-03

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

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

[jasperhuangg]

This is a super minor display bug where some UI disappears for a split second when some state fields change on the page, definitely doesn't need to be a blocker.

[melvin-bot]

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

[melvin-bot]

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

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

[jasperhuangg]

I'm applying the necessary labels but leaving it you to decide whether this is something worth fixing @thienlnam

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-10-03 16:38:52 UTC.

Offending PR #49633

Proposal


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

Expense - Add receipt modal disappears and then reappears after the receipt is deleted

What is the root cause of that problem?

• When receipt is deleted, the delete pending action is applied to the empty view and the empty receipt view is not rendered.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 534 to 552 in 0c2900c

	{shouldShowReceiptEmptyState && (
	<OfflineWithFeedback pendingAction={getPendingFieldAction('receipt')}>
	<ReceiptEmptyState
	hasError={hasErrors}
	disabled={!canEditReceipt}
	onPress={() =>
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
	CONST.IOU.ACTION.EDIT,
	iouType,
	transaction?.transactionID ?? '-1',
	report?.reportID ?? '-1',
	Navigation.getReportRHPActiveRoute(),
	),
	)
	}
	/>
	</OfflineWithFeedback>
	)}

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


• We should only add the pending action if it is add.

<OfflineWithFeedback pendingAction={getPendingFieldAction('receipt') === 'add' ? getPendingFieldAction('receipt') : undefined}>

• With add, we can also use update.

<OfflineWithFeedback pendingAction={getPendingFieldAction('receipt') !== 'delete' ? getPendingFieldAction('receipt') : undefined}>

• I also think we need update ReceiptAudit pending action similarly. Or we can use transaction?.pendingAction for this.
  

  App/src/components/ReportActionItem/MoneyRequestView.tsx

  Lines 479 to 486 in 0c2900c

  	{shouldShowReceiptAudit && (
  	<OfflineWithFeedback pendingAction={getPendingFieldAction('receipt')}>
  	<ReceiptAudit
  	notes={receiptViolations}
  	shouldShowAuditResult={!!shouldShowAuditMessage}
  	/>
  	</OfflineWithFeedback>
  	)}

What alternative solutions did you explore? (Optional)

• We can only apply the pending action when isOffline is true.

<OfflineWithFeedback pendingAction={isOffline ? getPendingFieldAction('receipt') : undefined}>

Result

[Nodebrute]

offending pr #49633

[shubham1206agra]

@nkdengineer @dukenv0307 Please fix this regression.

[Krishna2323]

@shubham1206agra, this was marked external before I posted my proposal so I think my proposal is still valid.

[shubham1206agra]

@Krishna2323 You will be paid partially if they uses your fix.

[nkdengineer]

Will raise the PR soon.

[nkdengineer]

@dukenv0307 this PR is ready for review

[allgandalf]

I will unassign myself since this was a regression from previous PR

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.46-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: modal disappears and then reappears after the receipt is deleted #50207

If no regressions arise, payment will be issued on 2024-10-16. 🎊

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@thienlnam] The PR that introduced the bug has been identified. Link to the PR:
• [@thienlnam] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@thienlnam] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@thienlnam] Determine if we should create a regression test for this bug.
• [@thienlnam] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[kadiealexander]

Closing as no one is due payment here.