[$500] Request Money - The previous button is missing and the Next button is not functioning properly for pictures added in IOU when requesting money in scan mode

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Click on FAB and select Request Money.
2. Choose scan mode and add recipient bill photo.
3. Add email or workspace and request money.
4. Double-click twice to go to IOU and add a picture.
5. Observe that there are two unexpected behaviors: the first one is the absence of the previous button, and the Next button is not working for the picture added in IOU.

Expected Result:

If two photos appear in IOU, the first image should have a Next button, and the second image should have a Previous button. If this is by design, the Next button in the second image should perform some action.

Actual Result:

There is no previous button, and the Next button is not functioning correctly for pictures added in IOU.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.75-8
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-10-01.at.10.55.56.PM.mov

Recorder_02102023_090408.mp4

Screen.Recording.2023-10-01.at.11.07.58.PM.mov

Screen.Recording.2023-10-01.at.10.48.56.PM.1.mov

Screen.Recording.2023-10-01.at.11.01.06.PM.mov

Screen.Recording.2023-10-02.at.10.33.32.PM.mov

Recording.4817.mp4

Expensify/Expensify Issue URL:
Issue reported by: @tewodrosGirmaA
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696225666195509

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016e647a00541e7e5d
• Upwork Job ID: 1709193472808792064
• Last Price Increase: 2023-11-15

[ahmedGaber93]

Proposal

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

When add attachment in receipt and open it:

• The opened attachment is always the receipt image.
• The AttachmentCarousel previous button is missing.
• The AttachmentCarousel next button is appeared not functioning while it is the last image.

What is the root cause of that problem?

When we fix issue #26828 in PR #27426 we use a new method to get the index of the preview image, and it works fine for the case that it was designed for it.

App/src/components/Attachments/AttachmentCarousel/index.js

Lines 41 to 51 in 09e3d0d

	const compareImage = useCallback(
	(attachment) => {
	if (attachment.isReceipt) {
	const action = ReportActionsUtils.getParentReportAction(report);
	const transactionID = _.get(action, ['originalMessage', 'IOUTransactionID']);
	return attachment.transactionID === transactionID;
	}
	return attachment.source === source;
	},
	[source, report],
	);

App/src/components/Attachments/AttachmentCarousel/index.js

Lines 56 to 59 in 09e3d0d

	const initialPage = _.findIndex(attachmentsFromReport, compareImage);
	// Dismiss the modal when deleting an attachment during its display in preview.
	if (initialPage === -1 && _.find(attachments, compareImage)) {

But when we add attachment in the receipt report as a normal message.
The compareImage always return the receipt attachment, because the first item in attachments array will return true in if (attachment.isReceipt) and initialPage will always be 0 which make the AttachmentCarousel next and previous buttons not work correctly

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

1. revert this PR fix: 26828 Receipt modal closes when API response updates image url #27426 will fix the current issue.
2. and for [SMARTSCAN] [HOLD for payment 2023-09-27] [$500] HIGH: Receipt modal closes when API response updates image url #26828 we can use this to prevent dismiss the modal when file is locally

const isLocalFile = source.startsWith('blob:') || source.startsWith('file:');
// Dismiss the modal when deleting an attachment during its display in preview.
if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) {
    if (!isLocalFile) Navigation.dismissModal();
} else {
   ...
}

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[dukenv0307]

Dupe of #27824.

[tewodrosGirmaA]

I don't think so , it have different root couses

[laurenreidexpensify]

@robertKozik do you think this one is a dupe of #27824?

[robertKozik]

@laurenreidexpensify, I'm not entirely certain if this is a duplicate or not. However, I've checked the PR for #27824 and it appears to address this issue as well. Since that PR is already in the review process, my suggestion would be to put our issue on hold until it gets merged. Afterward, we can retest to see if the problem persists, and then take appropriate action based on the outcome.

[laurenreidexpensify]

Holding on #27824

[laurenreidexpensify]

Holding on #27824

[laurenreidexpensify]

Holding on #27824

[laurenreidexpensify]

Holding on #27824

[laurenreidexpensify]

@kbecciv @robertKozik can we test to see if this is still reproducible now that #27824 has been deployed to prod? Thanks

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[kbecciv]

Unable to reproduce it

Recording.5458.mp4