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

[m-natarajan]

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.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:

1. Go to staging.new.expensify.com
2. Initiate Add Business Account flow
3. 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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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.

[daledah]

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?

1. 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]}

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

Went ahead and added to wave-collect polish.

[brunovjk]

I didn't find any PR that could have caused this issue/regression. I searched the history of the 2 files mentioned in the proposal, it seems to me that it has always been like this. I tested the proposed changes and it works fine on the web, in PR we test on all platforms and look for possible regressions. We can go with @daledah's proposal

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @daledah You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[daledah]

@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 👎

[brunovjk]

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

[JmillsExpensify]

Payment summary:

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

[JmillsExpensify]

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

[brunovjk]

Great! Thank you!!

[daledah]

@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

[JmillsExpensify]

Sorry for the delay! Offer sent.

[daledah]

@JmillsExpensify I have accepted it

[JmillsExpensify]

Thanks! All paid out.