[HOLD for payment 2024-12-11] [HOLD for payment 2024-12-07] [$250] mWeb/Chrome - IOU- Continue and green button not working in scan page

[lanitochka17]

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

---

Version Number: 9.0.46
Reproducible in staging?: Y
Reproducible in production?: Y
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): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to any chat or workspace
2. Click ln + button and select submit expense or split bill
3. In the scan page try clicking continue button or the big green button
4. Observe that both buttons dont work

Expected Result:

Both buttons should open phones camera

Actual Result:

Non functional buttons

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

Bug6623960_1728015893845.Screen_Recording_20241004_071757.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021847268462588592344
• Upwork Job ID: 1847268462588592344
• Last Price Increase: 2024-10-18
• Automatic offers:
• dominictb | Contributor | 104509149
• layacat | Contributor | 104696564

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[lanitochka17]

@dylanexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[layacat]

Edited by proposal-police: This proposal was edited at 2024-10-09 04:04:45 UTC.

Proposal

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

mWeb/Chrome - IOU- Continue and green button not working in scan page

What is the root cause of that problem?

This issue often happens when user accidentally dismissed the request permission dialog (or blocked the camera permission). On the mWeb Chrome, once you blocked, you can't show the request permission dialog again.

Now, when you don't have the permission, when you clicked the capture or Continue button, nothing happened because we early returned here:

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Lines 482 to 485 in 6556e9a

	if (!cameraRef.current) {
	requestCameraPermission();
	return;
	}

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

1. We should let user know if they denied the permission and let them know how to resolve it, by changing the description text to explain when they press the button to capture photo here, ie:

Camera access still hasn't been granted, please follow these instructions

And navigate user to our help site when user clicks on these instructions text link.

2. Add a new infor section under our help site here to help user when they don't know why the Continue doesn't work:
   

   App/docs/articles/new-expensify/expenses-&-payments/Create-an-expense.md

   Line 41 in bfce277

   {% include end-info.html %}

{% include info.html %}
If the Continue button doesn't open the camera on your mobile web browser, 
it might be because you denied camera permission. Learn how to enable camera permission in your browser [here](https://support.google.com/chrome/answer/2693767).
{% include end-info.html %}

What alternative solutions did you explore? (Optional)

Update the description of the text in here when user denied the camera permission (And disabled the continue/capture button) to let user know why they can't perform the action.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 582 in 6556e9a

<Text style={[styles.subTextFileUpload]}>{translate('receipt.cameraAccess')}</Text>

For an example:

 <Text style={[styles.subTextFileUpload]}>{isPermissionDenied ? translate('receipt.userDeniedPermission') : translate('receipt.cameraAccess')}</Text> 

With receipt.cameraAccess is Camera access still hasn't been granted, please follow these instructions..

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.

[dylanexpensify]

Reviewing shortly!

[melvin-bot]

@dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@dylanexpensify Still overdue 6 days?! Let's take care of this!

[dylanexpensify]

apologies, reviewing!

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[dylanexpensify]

Hey @RachCHopkins! I'm heading out on parental leave so reassigning this! TY! 🙇‍♂️

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[RachCHopkins]

Sorry @dominictb, I don't think Dylan meant to unassign you as the C+ here.

[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.68-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: 50485 mWeb/Chrome - IOU- Continue and green button not working in scan page #52087

If no regressions arise, payment will be issued on 2024-12-07. 🎊

For reference, here are some details about the assignees on this issue:

• @dominictb requires payment automatic offer (Contributor)
• @layacat requires payment automatic offer (Contributor)

[melvin-bot]

@dominictb @RachCHopkins @dominictb The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[dominictb]

@layacat The section highlight does not work on production because you used the wrong highlight link 🫠

App/src/CONST.ts

Lines 914 to 915 in 3cc88f5

	DENIED_CAMERA_ACCESS_INSTRUCTIONS_URL:
	'https://help.expensify.com/articles/new-expensify/expenses-&-payments/Create-an-expense#:~:text=How%20can%20I%20enable%20camera%20permission%20on%20mobile%20browser%3F',

Please raise a PR ASAP to update the link to:

https://help.expensify.com/articles/new-expensify/expenses-&-payments/Create-an-expense#:~:text=How%20can%20I%20enable%20camera%20permission%20for%20a%20website%20on%20mobile%20browsers%3F

[layacat]

@layacat The section highlight does not work on production because you used the wrong highlight link 🫠

App/src/CONST.ts

Lines 914 to 915 in 3cc88f5

	DENIED_CAMERA_ACCESS_INSTRUCTIONS_URL:
	'https://help.expensify.com/articles/new-expensify/expenses-&-payments/Create-an-expense#:~:text=How%20can%20I%20enable%20camera%20permission%20on%20mobile%20browser%3F',

Please raise a PR ASAP to update the link to:

https://help.expensify.com/articles/new-expensify/expenses-&-payments/Create-an-expense#:~:text=How%20can%20I%20enable%20camera%20permission%20for%20a%20website%20on%20mobile%20browsers%3F

Oh shoot! Let me update it

[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.70-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update Link to helpdot site #53368

If no regressions arise, payment will be issued on 2024-12-11. 🎊

For reference, here are some details about the assignees on this issue:

• @dominictb requires payment automatic offer (Contributor)
• @layacat requires payment automatic offer (Contributor)

[melvin-bot]

@dominictb @RachCHopkins @dominictb The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[dominictb]

Tested on production today and it's working good:

video_2024-12-04_14-13-09.mp4

[dominictb]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: https://github.com/Expensify/App/pull/37817/files#r1865223092

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: NA

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• mWeb only.
• App has never asked for camera permission before. Might need to clear the browser cache to reset permission settings.

Test:

1. Tap FAB > Create expense > Scan > Continue
2. Deny camera access
3. Verify Camera access still hasn't been granted, please follow these instructions. message and Continue button appears
4. Tap these instructions
5. Verify Expensify help site opens
6. Follow the instructions under FAQ > How can I enable camera permission for a website on mobile browsers? section to manually grant camera access
7. Back to App and refresh
8. Verify camera is enabled in IOU Scan page

Do we agree 👍 or 👎

[Julesssss]

It would be great if QA re able to merge the above test into our existing location permission tests.

[RachCHopkins]

Payment Summary:

• Contributor: @layacat to be paid $250 via Upwork
• Contributor+: @dominictb paid $250 via Upwork

Upwork job here

[RachCHopkins]

@layacat your original offer had expired, so I have just sent a new one!

[layacat]

@layacat your original offer had expired, so I have just sent a new one!

Thank you. I accepted the offer!

[RachCHopkins]

Contributors have been paid, the contracts have been completed, and the Upwork post has been closed.