[$250] End of Add Business Bank Account flow has incorrect styles for the bank account row and bank avatar corner not rounded

@shawnborton

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: 9.0.24-2
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: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1724678100608369

Action Performed:

Go to staging.new.expensify.com
Initiate Add Business Account flow
Proceed with valid details till the end

Expected Result:

On the final confirmation screen, the bank account row should not have extra padding around it, and that the bank avatar use rounded corners

Actual Result:

On the final confirmation screen, the bank account row has extra padding around it, and that the bank avatar doesn't use rounded corners

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021831332449434680092
Upwork Job ID: 1831332449434680092
Last Price Increase: 2024-09-04
Automatic offers:

brunovjk | Reviewer | 103819219

Issue Owner

Current Issue Owner: @brunovjk

@JmillsExpensify

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

Proposal

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

The bank account row has extra padding around it

What is the root cause of that problem?

Currently, we are missing iconStyles in this MenuItem

App/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx

Lines 75 to 84 in 0fd1de0

    
           <MenuItem 
        
               title={bankAccountOwnerName} 
        
               description={formattedBankAccountNumber} 
        
               icon={icon} 
        
               iconWidth={iconSize} 
        
               iconHeight={iconSize} 
        
               interactive={false} 
        
               displayInDefaultIconColor 
        
               wrapperStyle={[styles.cardMenuItem, styles.mv3]} 
        
           />

And we are also having an extra paddingLeft: 8px style in this case here

App/src/styles/index.ts

Lines 3750 to 3756 in 0fd1de0

    
           cardMenuItem: { 
        
               paddingLeft: 8, 
        
               paddingRight: 0, 
        
               borderRadius: variables.buttonBorderRadius, 
        
               height: variables.componentSizeLarge, 
        
               alignItems: 'center', 
        
           },

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

We should get iconStyles from getBankIcon function and add this styles to MenuItem here

                <MenuItem
                    ...
                    iconWidth={iconSize}
                    iconHeight={iconSize}
                    iconStyles={iconStyles}
                    wrapperStyle={[styles.cardMenuItem, styles.mv3]}

Remove left padding in cardMenuItem by adding another style similar to cardMenuItem and set paddingLeft = 0px

What alternative solutions did you explore? (Optional)

@JmillsExpensify

@JmillsExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

@JmillsExpensify

@JmillsExpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

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

@brunovjk

@brunovjk PR is ready.

@brunovjk

[@brunovjk] The PR that introduced the bug has been identified. Link to the PR: I searched the history of the files changed, it seems to me that it has always been like this.
[@brunovjk] 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: I didn't find any PR that could have caused this issue/regression. it seems to me that it has always been like this
[@brunovjk] A discussion in #expensify-bugs 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:
[@brunovjk] Determine if we should create a regression test for this bug. Yes
[@brunovjk] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

Initiate Add Business Account flow and process through the end.
In the last step, verify that: The icon is rounded, there's no redundant padding.
Do we agree 👍 or 👎

@JmillsExpensify

@JmillsExpensify The PR went to production 2 week ago, can we process this issue? Thank you :D

@daledah

Payment summary:

Contributor: $250 @daledah
Reviewer: $250 @brunovjk

@daledah

@daledah are you able to apply for the Upwork job? @brunovjk your contract is paid out!

Great! Thank you!!

@JmillsExpensify

@JmillsExpensify Sorry I don't have Connects on Upwork so I can't apply, could you send the offer to my profile here https://www.upwork.com/freelancers/~0138d999529f34d33f

Sorry for the delay! Offer sent.

@JmillsExpensify

@JmillsExpensify I have accepted it

Thanks! All paid out.

Navigation Menu

Repository navigation

[$250] End of Add Business Bank Account flow has incorrect styles for the bank account row and bank avatar corner not rounded #48029

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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)

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<MenuItem
	title={bankAccountOwnerName}
	description={formattedBankAccountNumber}
	icon={icon}
	iconWidth={iconSize}
	iconHeight={iconSize}
	interactive={false}
	displayInDefaultIconColor
	wrapperStyle={[styles.cardMenuItem, styles.mv3]}
	/>

	cardMenuItem: {
	paddingLeft: 8,
	paddingRight: 0,
	borderRadius: variables.buttonBorderRadius,
	height: variables.componentSizeLarge,
	alignItems: 'center',
	},

[$250] End of Add Business Bank Account flow has incorrect styles for the bank account row and bank avatar corner not rounded #48029

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Aug 26, 2024

daledah commented on Aug 26, 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?

What alternative solutions did you explore? (Optional)

melvin-bot commented on Aug 30, 2024

melvin-bot commented on Sep 3, 2024

melvin-bot commented on Sep 4, 2024

10 remaining items

daledah commented on Sep 5, 2024

brunovjk commented on Sep 24, 2024

brunovjk commented on Sep 24, 2024

JmillsExpensify commented on Sep 26, 2024

JmillsExpensify commented on Sep 26, 2024

brunovjk commented on Sep 26, 2024

daledah commented on Sep 27, 2024

JmillsExpensify commented on Oct 8, 2024

daledah commented on Oct 8, 2024

JmillsExpensify commented on Oct 18, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions