[HOLD for payment 2023-11-09] [$500] Bank account - BA icon broken, it is square instead of round

[lanitochka17]

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.3.89-6

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:

1. Go to https://staging.new.expensify.com/
2. Login with any account
3. Go to Settings -> Workspaces -> Open any WS -> Bank account -> Connect online with Plaid
4. Complete the process adding BA (use any bank)

Expected Result:

BA icon has a round form

Actual Result:

BA icon is broken, it is in square form

Workaround:

Unknown

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6247980_1698093400662.Recording__588.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ceaebf5fa7a3b700
• Upwork Job ID: 1716575098200141824
• Last Price Increase: 2023-10-23

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[neonbhai]

The attached video seems to be of a different issue @lanitochka17

[trjExpensify]

Yeah, @lanitochka17 this doesn't seem to match the bug report. Can you clarify please? :)

[bernhardoj]

@trjExpensify This is how the new BA icon looks

It's updated in this PR #29834, so not a bug.

[trjExpensify]

Perf, thanks! @grgia was this intentional to make them squares or something?

[neonbhai]

Looks like this could be a bug, we didn't destructure the iconStyles here

App/src/components/AddPlaidBankAccount.js

Line 169 in cc3c51c

const {icon, iconSize} = getBankIcon();

[neonbhai]

Proposal

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

Bank account - BA icon broken, it is square instead of round

What is the root cause of that problem?

Bank Account has icon styles set here:

App/src/components/Icon/BankIcons.ts

Lines 153 to 162 in cc3c51c

	if (!isCard) {
	bankIcon.iconSize = variables.iconSizeExtraLarge;
	bankIcon.iconStyles = [styles.bankIconContainer];
	} else {
	bankIcon.iconHeight = variables.bankCardHeight;
	bankIcon.iconWidth = variables.bankCardWidth;
	bankIcon.iconStyles = [styles.assignedCardsIconContainer];
	}
	return bankIcon;

but these styles not destructured here:

App/src/components/AddPlaidBankAccount.js

Line 169 in cc3c51c

const {icon, iconSize} = getBankIcon();

and in turn not passed to the Icon component.

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

We should change this line:

App/src/components/AddPlaidBankAccount.js

Line 169 in cc3c51c

const {icon, iconSize} = getBankIcon();

to

const {icon, iconSize, iconStyles} = getBankIcon();

and pass these styles to Icon using the additionalStyles prop:

<Icon
  ...
  additionalStyles={iconStyles}
/>

Result:

This makes sure the bank icon styles are consistent in the app.

[lanitochka17]

@trjExpensify Sorry for the confusion, I have attached the correct screenshot

[trjExpensify]

Thanks for that! Let's figure out if this was intentional: #30215 (comment)

[grgia]

No, this was not intentional. I can fix this, but it looks like the proposal covers the root cause @trjExpensify. Although I think @burczu should assess

[burczu]

I've just checked the proposal from @neonbhai and I think it identifies the root cause correctly. Also the proposed solution does fix the issue so I think we can proceed with it.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[trjExpensify]

@neonbhai how are you getting on with the PR?

[neonbhai]

Raising final PR shortly

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.94-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• BA icon style fix #30589

If no regressions arise, payment will be issued on 2023-11-09. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @burczu does not require payment (Contractor)
• @neonbhai requires payment

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@burczu] The PR that introduced the bug has been identified. Link to the PR:
• [@burczu] 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:
• [@burczu] 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:
• [@burczu] Determine if we should create a regression test for this bug.
• [@burczu] 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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[trjExpensify]

👋 @burczu checklist, please. Thanks!

[trjExpensify]

Samesies. Awaiting the checklist before proceeding to payments.

[burczu]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@burczu] The PR that introduced the bug has been identified. Link to the PR:

I don't think it is regression made by any PR - it looks like this icon was just added without rounding and no one has changed this afterwards.

• [@burczu] 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:

n/a

• [@burczu] 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:

n/a

• [@burczu] Determine if we should create a regression test for this bug.

I don't think the regression test is necessary here - it was just simple style adjustment.

• [@burczu] 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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[trjExpensify]

I don't think it is regression made by any PR - it looks like this icon was just added without rounding and no one has changed this afterwards.

I think we identified it here, but that's cool as the PR author has been involved on this issue.

I don't think the regression test is necessary here - it was just simple style adjustment.

This was caught by the applause team within an existing regression test, so I'm cool with that being sufficient.

[trjExpensify]

Confirming payments as follows:

$500 to @neonbhai for the bug fix. Sent an offer to you!

[trjExpensify]

Paid!