[Due for payment 2025-05-14] [$125] Bank icons are too small in the "Pay" menu

[m-natarajan]

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.1.30-0
Reproducible in staging?: need reproduction (requires real bank)
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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 (hyperlinked to channel name): #expensify - bugs

Action Performed:

1. Send an invoice to user A
2. Sign in as user B
3. Go to the invoice
4. Click on "Pay" and observe the options menu

Expected Result:

Band icon should be correct size

Actual Result:

Bank icon is too small

Workaround:

unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• Windows: Chrome
• 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/~021914517278232314681
• Upwork Job ID: 1914517278232314681
• Last Price Increase: 2025-04-22
• Automatic offers:
• nkdengineer | Contributor | 107090423

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[samranahm]

Proposal

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

Bank icons are too small in the "Pay" menu

What is the root cause of that problem?

App/src/components/Icon/BankIcons/index.ts

Lines 36 to 38 in 28fd6af

	} else {
	bankIcon.iconHeight = variables.cardIconHeight;
	bankIcon.iconWidth = variables.cardIconWidth;

we are using 26 here

App/src/styles/variables.ts

Lines 252 to 253 in ab26fec

	cardIconWidth: 40,
	cardIconHeight: 26,

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

we need to update this to 40

cardIconHeight: 40,

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nyomanjyotisa]

Proposal

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

Bank icons are too small in the "Pay" menu

What is the root cause of that problem?

We don't set the iconWidth and iconHeight value here, and it will use the default one, which is 20

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

App/src/components/MenuItem.tsx

Lines 727 to 745 in 28fd6af

	<Icon
	contentFit={contentFit}
	hovered={isHovered}
	pressed={pressed}
	src={icon}
	width={iconWidth}
	height={iconHeight}
	fill={
	displayInDefaultIconColor
	? undefined
	: iconFill ??
	StyleUtils.getIconFillColor(
	getButtonState(focused || isHovered, pressed, success, disabled, interactive),
	true,
	isPaneMenu,
	)
	}
	additionalStyles={additionalIconStyles}
	/>

App/src/components/Icon/index.tsx

Lines 58 to 59 in 28fd6af

	width = variables.iconSizeNormal,
	height = variables.iconSizeNormal,

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

set iconWidth and iconHeight value to variables.iconSizeExtraLarge which is 40, or any other value by the design team

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

                formattedPaymentMethods.map((formattedPaymentMethod) => ({
                    ...
                    iconWidth: variables.iconSizeExtraLarge,
                    iconHeight: variables.iconSizeExtraLarge,
                    ...
                }));

Might need to check in other places as well, and do the same

Result:

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

None

[dominictb]

@VictoriaExpensify I can reproduce this following the same steps in OP.

I can take over as C+ as per this thread.

[allgandalf]

Able to reproduce , please assign me as C+

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-25 03:20:18 UTC.

Proposal

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

Bank icon is too small

What is the root cause of that problem?

We don't add the iconSize and the border for icon in here

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

And we pass this style here

App/src/components/PopoverMenu.tsx

Lines 320 to 321 in 28fd6af

	// Spread other props dynamically
	{...menuItemProps}

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

We should add the iconStyles as formattedPaymentMethod.iconStyles

          formattedPaymentMethods.map((formattedPaymentMethod) => ({
                    ...
                    iconStyles: formattedPaymentMethod.iconStyles
                    ...
             })

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 28fd6af

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[VictoriaExpensify]

Agree this is an issue we should fix!

[melvin-bot]

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

[melvin-bot]

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

[dominictb]

@VictoriaExpensify This one was labeled Needs Reproduction. Can you help to recheck this comment #60579 (comment)?

[melvin-bot]

Upwork job price has been updated to $125

[cristipaval]

Making this one $125, it is a minor change

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-22 13:53:24 UTC.

Proposal

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

Bank icons are too small in the "Pay" menu

What is the root cause of that problem?

We are not setting iconWidth and iconHeight here

App/src/components/SettlementButton/index.tsx

Lines 166 to 171 in 8d9d43a

	formattedPaymentMethods.map((formattedPaymentMethod) => ({
	text: formattedPaymentMethod?.title ?? '',
	description: formattedPaymentMethod?.description ?? '',
	icon: formattedPaymentMethod?.icon,
	onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
	}));

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

Add iconHeight: variables.iconSizeLarge and iconWidth: variables.iconSizeLarge

By default we are using iconSizeNormal, we should go 1 or 2 steps ahead

We should use either iconSizeLarge or iconSizeXLarge. I think we should go with iconSizeLarge

App/src/styles/variables.ts

Lines 81 to 82 in 8d9d43a

	iconSizeLarge: 24,
	iconSizeXLarge: 28,

Replace this code block with:

  formattedPaymentMethods.map((formattedPaymentMethod) => ({
                    text: formattedPaymentMethod?.title ?? '',
                    description: formattedPaymentMethod?.description ?? '',
                    icon: formattedPaymentMethod?.icon,
                    onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
                }));

with,

const getPaymentSubitems = (payAsBusiness: boolean) =>
                formattedPaymentMethods.map((formattedPaymentMethod) => ({
                    text: formattedPaymentMethod?.title ?? '',
                    description: formattedPaymentMethod?.description ?? '',
                    icon: formattedPaymentMethod?.icon,
                    iconHeight: variables.iconSizeLarge,
                    iconWidth: variables.iconSizeLarge,

                    onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.EXPENSIFY, payAsBusiness, formattedPaymentMethod.methodID, formattedPaymentMethod.accountType),
                }));

We might also want to add the same in Add Bank Account and Pay else where in order to be consistent:

{
    text: translate('workspace.invoices.paymentMethods.addBankAccount'),
    icon: Expensicons.Bank,
    iconHeight: variables.iconSizeLarge,
    iconWidth: variables.iconSizeLarge,
    onSelected: () => Navigation.navigate(addBankAccountRoute),
    
    
},
{
    text: translate('iou.payElsewhere', {formattedAmount: ''}),
    icon: Expensicons.Cash,
    iconHeight: variables.iconSizeLarge,
    iconWidth: variables.iconSizeLarge,
    value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
    onSelected: () => onPress(CONST.IOU.PAYMENT_TYPE.ELSEWHERE),
},

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[github-actions]

⚠️ @PiyushChandra17 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[hoangzinh]

Thank you for posting proposals, everyone. I will try to review them today

[hoangzinh]

According to the screenshot of the design doc, @nkdengineer's proposal is the most correct. @nkdengineer, do you mind attaching a screenshot of your solution in your proposal? It will help internal engineer review more easily.

[nkdengineer]

@hoangzinh, here is result

[nkdengineer]

@hoangzinh i updated the proposal as expected

[dominictb]

@VictoriaExpensify @cristipaval As per this thread:

Bank icons are too small in the "Pay" menu needs reproduction. The first C+ to post on the GH issue with reliable reproduction steps and video or screenshots confirming reproduction will be assigned as C+.

This issue was marked "needs productions" label and per our guideline, the first C+ who can reproduce should take this issue as a reviewer. I spent my effort to reproduce and posted a comment first here. I think I should be eligible for the C+ role here.

[hoangzinh]

@dominictb, but at that time, you hadn't confirmed about "reliable reproduction steps". Therefore, your comment here is not eligible, in my opinion. I believe current steps are not enough to reproduce this bug. In my opinion, it should be:

Prerequisites:
- [User B]: Go to Setting -> Wallet -> Set up bank accounts

1. Sign in as [User A]
2. Send an invoice to [User B]
3. Sign in as [User B]
4. Go to the invoice
6. Click on "Pay" and select an option
7. Observe bank account icon

[hoangzinh]

@nkdengineer can you update your RCA and problem statement, please? It's not only icon size but also border style.

[nkdengineer]

@hoangzinh i updated

[hoangzinh]

Thank you, everyone. @nkdengineer's proposal looks good to me

Link to proposal #60579 (comment)

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @cristipaval is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

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

[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 9.1.40-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: bank icons are too small in the Pay menu #61014

If no regressions arise, payment will be issued on 2025-05-14. 🎊

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

• @hoangzinh requires payment through NewDot Manual Requests
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

@hoangzinh @VictoriaExpensify @hoangzinh The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[VictoriaExpensify]

@hoangzinh can you please complete the checklist and I'll process payment?

@nkdengineer it looks like you still need to accept the offer so I can process payment.

Thank you!

[hoangzinh]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: https://github.com/Expensify/App/pull/50640/files#r2089128956

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

  It's just a UI issue, we don't need a regression test for it.

[hoangzinh]

Requested payment in ND