[HOLD for payment 2024-04-09] [$500] [Mobile] Don't immidiately prompt for Camera permission in Scan Receipt flow

[Julesssss]

Do not automatically prompt users for the camera permission until the user selects the 'Continue' button -- to prevent permission denials

iOS	Android

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

• Have camera permission disabled
• Request Money
• Switch to Scan Receipt

Expected Result:

• Nothing should happen

Actual Result:

• User is prompted for the camera permission before they have even seen the Explainer UI

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bc79d21437eb7104
• Upwork Job ID: 1764987970290671616
• Last Price Increase: 2024-03-05

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

Proposal

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

User is prompted for the camera permission before they have even seen the Explainer UI

What is the root cause of that problem?

We always ask permission when the scan step is mounted in this useEffect

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Line 123 in 9411a08

useEffect(() => {

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

In this PR #35640, we added this logic to allow the user to ask for camera permission when it's denied.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Line 129 in 9411a08

setCameraPermissionStatus(res);

and it also has the logic to ask permission when we press on continue button here. So we can remove the logic to ask permission in refreshCameraPermissionStatus function that is added in this PR to avoid asking the permission when we open the scan page and use the old logic below. I tested and it doesn't cause the issue #34750 which is fixed by #35640.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Line 227 in 9411a08

if (!camera.current && (cameraPermissionStatus === RESULTS.DENIED || cameraPermissionStatus === RESULTS.BLOCKED)) {

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Line 297 in 9411a08

onPress={capturePhoto}

• As this comment here, it's just the special behavior in Android. I tested it with my proposal and it's the same behavior when we click on the continue button and ask permission.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Line 127 in 9411a08

// In android device app data, the status is not set to blocked until denied twice,

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Proposal

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

Don't immediately prompt for Camera permission in Scan Receipt.

What is the root cause of that problem?

refreshCameraPermissionStatus is called in below code directly.

useEffect(() => {
        const refreshCameraPermissionStatus = (shouldAskForPermission = false) => {
            CameraPermission.getCameraPermissionStatus()
                .then((res) => {
                    // In android device app data, the status is not set to blocked until denied twice,
                    // due to that the app will ask for permission twice whenever users opens uses the scan tab
                    setCameraPermissionStatus(res);
                    if (shouldAskForPermission && !askedForPermission.current) {
                        askedForPermission.current = true;
                        askForPermissions(false);
                    }
                })
                .catch(() => setCameraPermissionStatus(RESULTS.UNAVAILABLE));
        };

        // Check initial camera permission status
        refreshCameraPermissionStatus(true);

        // Refresh permission status when app gain focus
        const subscription = AppState.addEventListener('change', (appState) => {
            if (appState !== 'active') {
                return;
            }

            refreshCameraPermissionStatus();
        });

        return () => {
            subscription.remove();
        };
    }, []);

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

refreshCameraPermissionStatus should be called when continue button is clicked.

[ahmedGaber93]

Proposal

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

Don't immidiately prompt for Camera permission in Scan Receipt flow

What is the root cause of that problem?

when scan tab amount in useEffect we call refreshCameraPermissionStatus with parameter shouldAskForPermission = true

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Lines 138 to 139 in 9411a08

	// Check initial camera permission status
	refreshCameraPermissionStatus(true);

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

in useEffect don't pass shouldAskForPermission with true to prevent prompt for Camera permission when scan tab amount

 //refreshCameraPermissionStatus(true); 
 refreshCameraPermissionStatus(); 

What alternative solutions did you explore? (Optional)

[Julesssss]

We should remove the logic to ask permission in refreshCameraPermissionStatus function and use the old logic below or we only apply it for Android device

@dukenv0307 perhaps I missunderstand, but if we only apply it for Android, wouldn't the issue still exist for Android?