[$500] Receipt - The border green line on top and bottom is shown in mweb but not displayed in 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!

Version Number: 1.3.90-1

Reproducible in staging?: Yes

Reproducible in production?: Yes

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:

Go to https://staging.new.expensify.com/
Tap fab
Tap request money-----manual
Enter an amount
Tap next
Select any user
Tap 3 dots on top right to select "add receipt"
Note the border green line on top and bottom as border in Receipt page
Launch app
Repeat step 2 to step 7
Note no green border in top and bottom in Receipt page

Expected Result:

In receipt page, the border green line on top and bottom is shown in mweb but not displayed in android. The behavior must not be inconsistent in mweb and android.

Actual Result:

In receipt page, the border green line on top and bottom is shown in mweb but not displayed in android. The behavior is inconsistent in mweb and android

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

Bug6249110_1698167440346.inconsistent.mp4

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/~01181ed80e74e0488e
Upwork Job ID: 1716867465539047424
Last Price Increase: 2023-10-24
Automatic offers:

situchan | Reviewer | 27440828
Krishna2323 | Contributor | 27440830

@isabelastisser

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

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

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

@situchan

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

Proposal

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

The border green line on top and bottom is shown in mweb but not displayed in android.

What is the root cause of that problem?

The receipt border is styled by styles.cameraView
Which is applied to the view in Receipt Selector web, but is missing in index.native file.

In the native file it is passed as a prop to <NavigationAwareCamera. But it does not use that style

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

Solution 1:

Change the style styles.cameraView in Receipt Selector index.native to be applied on a parent View here:

App/src/pages/iou/ReceiptSelector/index.native.js

Lines 193 to 204 in 66ebf0f

    
           {cameraPermissionStatus === RESULTS.GRANTED && device != null && ( 
        
               <NavigationAwareCamera 
        
                   ref={camera} 
        
                   device={device} 
        
                   style={[styles.cameraView]} 
        
                   zoom={device.neutralZoom} 
        
                   photo 
        
                   cameraTabIndex={pageIndex} 
        
                   isInTabNavigator={isInTabNavigator} 
        
                   selectedTab={selectedTab} 
        
               /> 
        
           )}

as we have applied here.

Solution 2:

Modify the NavigationAwareCamera component to take in the style prop and apply it to the parent views here and here

@situchan

Hey @situchan, can you please review the proposal above? Thanks!

@Julesssss

@Julesssss sorry but I think we should open this back to proposals because accepted solution doesn't work on iOS.
The contributor must have iPhone on which newDot dev app is installable because camera doesn't work on simulator.

@allroundexperts

cc: @allroundexperts if you're interested

@situchan

Sure @situchan. I can take a look on my device.

@situchan

@situchan, can you pls give me 1-2 more days. I will fix that otherwise I will ping you to assign someone else.

@Krishna2323

@Krishna2323 sure, we can wait until next Monday

@Krishna2323

Hey @Krishna2323 @situchan, can you please provide an update? Thanks!

This is ready for payment. PR deployed to production on Nov 21 - #31519 (comment)

This was not a regression but design inconsistency.
This was reported by QA team so I don't think we need regression test.

Offers sent in Upwork. All set!

Navigation Menu

Repository navigation

[$500] Receipt - The border green line on top and bottom is shown in mweb but not displayed in android. #30284

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

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?

Solution 1:

Solution 2:

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	{cameraPermissionStatus === RESULTS.GRANTED && device != null && (
	<NavigationAwareCamera
	ref={camera}
	device={device}
	style={[styles.cameraView]}
	zoom={device.neutralZoom}
	photo
	cameraTabIndex={pageIndex}
	isInTabNavigator={isInTabNavigator}
	selectedTab={selectedTab}
	/>
	)}

[$500] Receipt - The border green line on top and bottom is shown in mweb but not displayed in android. #30284

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 24, 2023

melvin-bot commented on Oct 24, 2023

melvin-bot commented on Oct 24, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Oct 24, 2023

neonbhai commented on Oct 24, 2023

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?

Solution 1:

Solution 2:

isabelastisser commented on Oct 27, 2023

14 remaining items

situchan commented on Nov 15, 2023

situchan commented on Nov 15, 2023

allroundexperts commented on Nov 15, 2023

Krishna2323 commented on Nov 15, 2023

situchan commented on Nov 15, 2023

isabelastisser commented on Nov 30, 2023

situchan commented on Nov 30, 2023

situchan commented on Nov 30, 2023

isabelastisser commented on Dec 4, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions