[$500] Android - It is impossible to scan the receipt with the camera, an error is displayed #34750

lanitochka17 · 2024-01-18T17:43:14Z

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: 1.4.27-1
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Open the App
Login with any account
Tap on FAB -> Request money -> Scan
Tap on shot camera button

Expected Result:

You can take a photo and continue the process

Actual Result:

Camera error displayed

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6346784_1705598526136.video_2024-01-18_19-21-35.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01dcae17afc7313b12
Upwork Job ID: 1748038364144406528
Last Price Increase: 2024-01-18
Automatic offers:

ikevin127 | Contributor | 28120363

melvin-bot · 2024-01-18T17:43:19Z

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

melvin-bot · 2024-01-18T17:43:19Z

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

lanitochka17 · 2024-01-18T17:43:24Z

#wave5-free-submitters

melvin-bot · 2024-01-18T17:43:25Z

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

aswin-s · 2024-01-18T22:23:48Z

Proposal

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

Error displayed while trying to scan a receipt on Android

What is the root cause of that problem?

Error is displayed while trying to capture image with camera before requesting for permissions. Even though a message requesting CameraPermission is shown above the shutter button, tap on the shutter button itself is not prevented.

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

Line 296 in 31b19ea

onPress={capturePhoto}

This causes camera.takePicture to get invoked even before camera ref is set, resulting in the error

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

Lines 256 to 268 in 31b19ea

    
           {cameraPermissionStatus === RESULTS.GRANTED && device != null && ( 
        
               <View style={[styles.cameraView]}> 
        
                   <View style={styles.flex1}> 
        
                       <NavigationAwareCamera 
        
                           ref={camera} 
        
                           device={device} 
        
                           style={[styles.flex1]} 
        
                           zoom={device.neutralZoom} 
        
                           photo 
        
                           cameraTabIndex={1} 
        
                       /> 
        
                   </View> 
        
               </View>

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

Though is it quite evident from the message that camera permission is required, the shutter button is not disabled.
The issue could be resolved by invoking the askForPermissions method instead of capturePhoto if permission is not available. This feels more natural as the intension of user tapping the shutter button is to capture an image anyway.

<PressableWithFeedback
    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
    accessibilityLabel={translate('receipt.shutter')}
    style={[styles.alignItemsCenter]}
    onPress={cameraPermissionStatus !== RESULTS.GRANTED? askForPermissions:  capturePhoto}
>
    <ImageSVG
        contentFit="contain"
        src={Shutter}
        width={CONST.RECEIPT.SHUTTER_SIZE}
        height={CONST.RECEIPT.SHUTTER_SIZE}
    />
</PressableWithFeedback>

Result

Before	After
before_out.mp4	after_out.mp4

What alternative solutions did you explore? (Optional)

Other option is to disable the shutter button. To give visual feedback to user that it is disabled, we'll need a disabled shutter button SVG image (probably a grey version) to denote that the button is not active until permission is granted.

ikevin127 · 2024-01-19T02:08:22Z

Proposal

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

Camera error displayed when tapping the shutter button of the camera on scan request.

What is the root cause of that problem?

When cameraPermissionStatus is not granted, we see the screen that says Camera access is required to take pictures of receipts. with a Continue button that if pressed calls the askForPermissions function.

While the permission is not granted, if the user will press the shutter button, the capturePhoto function is called which attempts to take a photo but because the camera is not available we get the error.

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

In order to make things as convenient as possible for the user, without extra click / press I suggest to have a useEffect that runs once which if the permission is not granted already, calls the askForPermissions function - this will prompt the camera permission everytime the user navigates to the scan request screen, unless granted.

    useEffect(() => {
        if (cameraPermissionStatus === RESULTS.GRANTED) {
            return;
        }
        
        askForPermissions();
    }, []);

This way every button has 1 function and the permission prompt will show up as long as the permission is not granted everytime the user opens the scan request screen - this will clear things up as there won't be any confusion as to why the error shows when the user is pressing the shutter button right after they denied / dismissed the camera permission prompt.

Videos

Android: Native

Screen.Recording.2024-01-19.at.03.57.55.mov

Krishna2323 · 2024-01-19T05:44:57Z

Proposal

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

Camera error displayed when tapping the shutter button of the camera on scan request.

What is the root cause of that problem?

We intentionally show error message alert when camera ref is not there.

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

Lines 179 to 186 in 31b19ea

    
           const showCameraAlert = () => { 
        
               Alert.alert(translate('receipt.cameraErrorTitle'), translate('receipt.cameraErrorMessage')); 
        
           }; 
        
           if (!camera.current) { 
        
               showCameraAlert(); 
        
               return; 
        
           }

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

When we show the error alert, we can check for the permission status, if it is denied or blocked we can ask for permission, and if permission status is something else we can show the error alert.

We will add this inside capturePhoto function.

        if (!camera.current && (cameraPermissionStatus === RESULTS.DENIED || cameraPermissionStatus === RESULTS.BLOCKED)) {
            askForPermissions();
            return;
        }

We can't apply directly onPress={cameraPermissionStatus !== RESULTS.GRANTED ? askForPermissions : capturePhoto} because it will always ask for permission even if there is some other issue setting the camera ref.

Result

Optional

We can add a ref like hasAskedForCameraPermission and use it to call askForPermission when user visits scan tab for the first time. We did ssomething simila inisde

App/src/components/MapView/MapView.tsx

Lines 35 to 62 in 56fb814

    
           useFocusEffect( 
        
               useCallback(() => { 
        
                   if (isOffline) { 
        
                       return; 
        
                   } 
        
                   if (hasAskedForLocationPermission.current) { 
        
                       return; 
        
                   } 
        
                   hasAskedForLocationPermission.current = true; 
        
                   getCurrentPosition( 
        
                       (params) => { 
        
                           const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude}; 
        
                           setCurrentPosition(currentCoords); 
        
                           setUserLocation(currentCoords); 
        
                       }, 
        
                       () => { 
        
                           // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing 
        
                           if (cachedUserLocation || !initialState) { 
        
                               return; 
        
                           } 
        
                           setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]}); 
        
                       }, 
        
                   ); 
        
               }, [cachedUserLocation, initialState, isOffline]), 
        
           );

We can modify the error check condition to use similar check like we did in mWeb/Web.

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

Lines 166 to 168 in e6b0761

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

We also need to modify the check above because if the cameraRef.current in this(!cameraRef.current.getScreenshot) case it will throw error.

Condition to add in native capturePhoto function:

        if (!camera.current || !camera.current.takePhoto) {
            showCameraAlert();
            return;
        }

Krishna2323 · 2024-01-19T17:49:29Z

Proposal Updated

Added more options in optional section that can be implemented to improve UX, that might look similar to @ikevin127 proposal but its completely different because I use ref and use similar code that is already implemented in distance page.

Added this for clarity.

alexpensify · 2024-01-19T19:51:11Z

@thesahindia - Can you please review the proposals here? Thanks!

alexpensify · 2024-01-22T19:08:31Z

@thesahindia - any update here?

alexpensify · 2024-01-24T17:51:51Z

@thesahindia - keep us posted if you can review this one or let me know if you can't, so we can find a replacement. Thanks!

thesahindia · 2024-01-24T19:39:51Z

@ikevin127's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

melvin-bot · 2024-01-24T19:39:58Z

Triggered auto assignment to @aldo-expensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

thesahindia · 2024-01-24T19:40:23Z

@thesahindia - keep us posted if you can review this one or let me know if you can't, so we can find a replacement. Thanks!

Sorry for the delay. Not in a good shape right now!

aldo-expensify · 2024-01-24T21:32:40Z

As a summary, I understand that we have the following proposals:

@aswin-s 's proposal: Make the shutter button ask for permissions to use the camera if permissions have not been granted
@ikevin127 's proposal: On mounting, ask for permissions to use the camera. The user could deny permissions and still click the shutter causing the error, but the user should be more aware why that happened.
@Krishna2323 's proposal: I think it implements the same behaviour compared to @aswin-s 's proposal, but it is just different way to code it.

I wanted to confirm that @ikevin127 's proposal behaviour is really what we want and not @aswin-s 's proposed behaviour, so I'll ask in slack

aldo-expensify · 2024-01-24T21:50:08Z

I was pointed out that in web mobile we ask immediately for permissions, so I think we should just be consistent with that.

melvin-bot · 2024-01-24T21:50:48Z

📣 @ikevin127 🎉 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 📖

Krishna2323 · 2024-01-24T22:00:59Z

@aldo-expensify, the selected proposal is incorrect, it will ask for permission every time we visit scan tab. I mentioned the correct way to implement it in optional section.

aldo-expensify · 2024-01-26T00:05:55Z

@ikevin127 can you modify your PR to include the changes from @Krishna2323 's proposal? 🙏

ikevin127 · 2024-01-26T00:09:37Z

Therefore I just closed the PR and ended the accepted upwork contract.

I think you guys might've missed this line from earlier, the PR is gone (deleted, incl. branch) as I thought @Krishna2323 is going to handle this one himself.

I took on other issues in the meantime and have a few other opened PR's - therefore no capacity to take on this one really, sorry guys!

Krishna2323 · 2024-01-26T00:13:04Z

No problem, I will handle this, will create a PR in 2-3 days.

alexpensify · 2024-01-26T18:45:01Z

Awesome, thanks!

Krishna2323 · 2024-01-31T13:45:33Z

Probably raising a PR today, there is another bug in android created after applying the required solution which I'm trying to solve.

alexpensify · 2024-01-31T20:32:22Z

Thanks for the update!

alexpensify · 2024-02-07T23:52:59Z

PR is in the works

Krishna2323 · 2024-02-08T06:54:53Z

@aldo-expensify @thesahindia, need your suggestions on the PR

alexpensify · 2024-02-13T22:42:22Z

Weekly Update: PR is merged and making progress forward!

melvin-bot · 2024-02-14T23:50:00Z

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

ikevin127 · 2024-02-20T00:37:59Z

Looks like the automation failed to set the 7-day hold for payment here since the PR #35640 (comment) was deployed to production 5 days ago (02/15/2024, 07:24 EET)🧐

Hold for payment date should be:
2024-02-22

cc @alexpensify

Also the possible regression reported above was not caused by this PR, according to #36551 (comment).

alexpensify · 2024-02-20T15:28:32Z

@ikevin127 - thanks for flagging, I agree and have a reminder to continue the payment process in two days.

alexpensify · 2024-02-22T16:13:31Z

Here is the payment summary:

External issue reporter - N/A
Contributor that fixed the issue - @Krishna2323 , @ikevin127 and @aswin-s $250 each
Contributor+ that helped on the issue and/or PR - @thesahindia $500
Upwork Job: https://www.upwork.com/jobs/~01dcae17afc7313b12

Extra Notes regarding payment: #34750 (comment) that's the discussion where we decided to include feedback from multiple proposals and split up the payment.

alexpensify · 2024-02-22T16:20:08Z

@Krishna2323 and @aswin-s - please accept the job in Upworks and I can complete the process. Thanks!

ikevin127 · 2024-02-22T16:24:09Z

@alexpensify I also need an offer for $250 as I ended the initial contract, mentioned here #34750 (comment) because somebody else handled the PR, then only later it was decided on a 3 way split of $250.

Accepted, thank you! 🙌

Krishna2323 · 2024-02-22T16:32:44Z

Accepted.

aswin-s · 2024-02-22T16:36:00Z

@alexpensify Accepted the offer

alexpensify · 2024-02-22T16:50:34Z

@ikevin127 - #34750 (comment)

This has been addressed, we are back on track now.

alexpensify · 2024-02-23T00:01:38Z

The contributors have been paid via Upwork. I'm still working with @aldo-expensify to confirm the payment for the C+ since there is one GH stating this PR created regression and then another GH states it did not. For now, those paid via Upwork have been paid there.

alexpensify · 2024-02-28T00:50:04Z

I updated the summary here: #34750 (comment)

After reviewing more, there is no clear evidence that regression was caused by this GH. @thesahindia please input a request in chat for the payment. Closing for now.

Thanks to everyone here for figuring out a good plan.

JmillsExpensify · 2024-04-08T03:24:28Z

$500 approved for @thesahindia

lanitochka17 added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 18, 2024

melvin-bot bot assigned alexpensify Jan 18, 2024

melvin-bot bot changed the title ~~Android - It is impossible to scan the receipt with the camera, an error is displayed~~ [$500] Android - It is impossible to scan the receipt with the camera, an error is displayed Jan 18, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 18, 2024

melvin-bot bot assigned thesahindia Jan 18, 2024

melvin-bot bot added the Overdue label Jan 22, 2024

melvin-bot bot removed the Overdue label Jan 22, 2024

melvin-bot bot assigned aldo-expensify Jan 24, 2024

aldo-expensify assigned ikevin127 Jan 24, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 24, 2024

Krishna2323 mentioned this issue Feb 2, 2024

fix: Android - It is impossible to scan the receipt with the camera, an error is displayed. #35640

Merged

50 tasks

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Feb 2, 2024

Krishna2323 mentioned this issue Feb 9, 2024

[$500] Task - Hand cursor is displayed when hovering over the task description placeholder #35207

Closed

6 tasks

aswin-s mentioned this issue Feb 19, 2024

[HOLD for payment 2024-04-03] [PAY MARCH 27][$500] mweb - Distance - App opens Scan tab when dragging map to the right #36508

Closed

6 tasks

aswin-s mentioned this issue Feb 27, 2024

[HOLD for payment 2024-03-29] [$500] Android - IOU - The "Take a photo" background animation is stuck #36551

Closed

6 tasks

alexpensify closed this as completed Feb 28, 2024

This was referenced Mar 6, 2024

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

Closed

Fix immediately prompt for Camera permission in scan request flow #37817

Merged

[$500] Android - It is impossible to scan the receipt with the camera, an error is displayed #34750

[$500] Android - It is impossible to scan the receipt with the camera, an error is displayed #34750

Comments

lanitochka17 commented Jan 18, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jan 18, 2024

melvin-bot bot commented Jan 18, 2024

lanitochka17 commented Jan 18, 2024

melvin-bot bot commented Jan 18, 2024

aswin-s commented Jan 18, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

ikevin127 commented Jan 19, 2024

Proposal

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

What is the root cause of that problem?

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

Videos

Krishna2323 commented Jan 19, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

Result

Optional

Krishna2323 commented Jan 19, 2024 • edited Loading

Proposal Updated

alexpensify commented Jan 19, 2024

alexpensify commented Jan 22, 2024

alexpensify commented Jan 24, 2024

thesahindia commented Jan 24, 2024

melvin-bot bot commented Jan 24, 2024

thesahindia commented Jan 24, 2024

aldo-expensify commented Jan 24, 2024 • edited Loading

aldo-expensify commented Jan 24, 2024

melvin-bot bot commented Jan 24, 2024

Krishna2323 commented Jan 24, 2024

aldo-expensify commented Jan 26, 2024

ikevin127 commented Jan 26, 2024

Krishna2323 commented Jan 26, 2024

alexpensify commented Jan 26, 2024

Krishna2323 commented Jan 31, 2024

alexpensify commented Jan 31, 2024

alexpensify commented Feb 7, 2024

Krishna2323 commented Feb 8, 2024

alexpensify commented Feb 13, 2024

melvin-bot bot commented Feb 14, 2024

ikevin127 commented Feb 20, 2024 • edited Loading

alexpensify commented Feb 20, 2024

alexpensify commented Feb 22, 2024 • edited Loading

alexpensify commented Feb 22, 2024

ikevin127 commented Feb 22, 2024 • edited Loading

Krishna2323 commented Feb 22, 2024

aswin-s commented Feb 22, 2024

alexpensify commented Feb 22, 2024

alexpensify commented Feb 23, 2024

alexpensify commented Feb 28, 2024

JmillsExpensify commented Apr 8, 2024

lanitochka17 commented Jan 18, 2024 •

edited by melvin-bot bot

Loading

aswin-s commented Jan 18, 2024 •

edited

Loading

Krishna2323 commented Jan 19, 2024 •

edited

Loading

Krishna2323 commented Jan 19, 2024 •

edited

Loading

aldo-expensify commented Jan 24, 2024 •

edited

Loading

ikevin127 commented Feb 20, 2024 •

edited

Loading

alexpensify commented Feb 22, 2024 •

edited

Loading

ikevin127 commented Feb 22, 2024 •

edited

Loading