Skip to content

[Due for payment 2025-03-10] [HOLD][$250] AmEx icon is smaller than other card icons in the Filters #56567

New issue
New issue
Closed
Closed
[Due for payment 2025-03-10] [HOLD][$250] AmEx icon is smaller than other card icons in the Filters#56567
Assignees
shawnbortonNicMendoncasobitneupanemountinyikevin127
Labels
Awaiting PaymentAuto-added when associated PR is deployed to productionBugSomething is broken. Auto assigns a BugZero manager.DailyKSv2DesignExternalAdded to denote the issue can be worked on by a contributor

Description

@m-natarajan
m-natarajan
opened on Feb 8, 2025

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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
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:

Prerequisite: Amex cards added as company cards

  1. Navigate to Report Search
  2. Click on filter and choose Card view

Expected Result:

All the cards displayed to select without any issues

Actual Result:

AmEx icon is smaller than other card icons in the Filters

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: Standalone
  • Android: HybridApp
  • Android: mWeb Chrome
  • iOS: Standalone
  • iOS: HybridApp
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Image

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021888023998366911450
  • Upwork Job ID: 1888023998366911450
  • Last Price Increase: 2025-02-08
  • Automatic offers:
    • ikevin127 | Contributor | 106169130
Issue OwnerCurrent Issue Owner: @NicMendonca

Activity

  1. m-natarajan
    added
    BugSomething is broken. Auto assigns a BugZero manager.
    DailyKSv2
    on Feb 8, 2025

  2. melvin-bot commented on Feb 8, 2025

    @melvin-bot
    melvin-botBot
    on Feb 8, 2025 – with Melvin Bot

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

  3. melvin-bot
    assigned
    NicMendonca
    on Feb 8, 2025
  4. NicMendonca
    added
    ExternalAdded to denote the issue can be worked on by a contributor
    Design
    on Feb 8, 2025
  5. melvin-bot
    changed the title [-]AmEx icon is smaller than other card icons in the Filters[/-] [+][$250] AmEx icon is smaller than other card icons in the Filters[/+] on Feb 8, 2025

  6. melvin-bot commented on Feb 8, 2025

    @melvin-bot
    melvin-botBot
    on Feb 8, 2025 – with Melvin Bot

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

  7. melvin-bot
    added
    Help WantedApply this label when an issue is open to proposals by contributors
    on Feb 8, 2025
  8. melvin-bot
    assigned
    shawnborton
    on Feb 8, 2025

  9. melvin-bot commented on Feb 8, 2025

    @melvin-bot
    melvin-botBot
    on Feb 8, 2025 – with Melvin Bot

    Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

  10. melvin-bot
    assigned
    sobitneupane
    on Feb 8, 2025

  11. melvin-bot commented on Feb 8, 2025

    @melvin-bot
    melvin-botBot
    on Feb 8, 2025 – with Melvin Bot

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

  12. shawnborton commented on Feb 8, 2025

    @shawnborton
    shawnborton
    on Feb 8, 2025
    Contributor

    I believe we already have the correct icon in the repo we should be using:

    Image

  13. Shahidullah-Muffakir commented on Feb 8, 2025

    @Shahidullah-Muffakir
    Shahidullah-Muffakir
    on Feb 8, 2025
    Contributor

    Proposal

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

    amex icon is smaller than other card icons in the Filters

    What is the root cause of that problem?

    1. All the cards images used here are large:

      App/src/libs/CardUtils.ts

      Lines 262 to 274 in b0b7709

      const feedIcons = {
      [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: Illustrations.VisaCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: Illustrations.AmexCardCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: Illustrations.MasterCardCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: Illustrations.AmexCardCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: Illustrations.BankOfAmericaCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: Illustrations.CapitalOneCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: Illustrations.ChaseCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: Illustrations.CitibankCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: Illustrations.WellsFargoCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: Illustrations.BrexCompanyCardDetailLarge,
      [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: Illustrations.StripeCompanyCardDetailLarge,
      [CONST.EXPENSIFY_CARD.BANK]: ExpensifyCardImage,
    2. but if the exact bank name is not found there, then we are returning small amex card image here:

      App/src/libs/CardUtils.ts

      Line 292 in b0b7709

      return Illustrations.AmexCompanyCards;

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

    we can return amex large card image here:

    App/src/libs/CardUtils.ts

    Line 292 in b0b7709

    return Illustrations.AmexCompanyCards;

    as:

        return Illustrations.AmexCardCompanyCardDetailLarge;

    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)

  14. 58 remaining items

  15. melvin-bot commented on Mar 3, 2025

    @melvin-bot
    melvin-botBot
    on Mar 3, 2025 – with Melvin Bot

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

    If no regressions arise, payment will be issued on 2025-03-10. 🎊

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

  16. melvin-bot commented on Mar 3, 2025

    @melvin-bot
    melvin-botBot
    on Mar 3, 2025 – with Melvin Bot

    @sobitneupane / @ikevin127 @NicMendonca @sobitneupane / @ikevin127 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]

  17. ikevin127 commented on Mar 9, 2025

    @ikevin127
    ikevin127
    on Mar 9, 2025
    Contributor

    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/50972/files#r1986387232.

    • [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.

    • [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

      Link to issue:

    Regression Test Proposal

    Context from Slack comment on real data the bug report author had in order to reproduce the edge cases:

    • cards_2267989_ccupload17 (and similar numbers) @joekaufman we will support the csv upload in future but should we add some special icon for it?
    • cards_2267989_capitalonecards - not sure how this was added but its from oldDot I think
    • cards_2267989_citibusiness
    • cards_2267989_csvstripe
    • cards_2267989_discover.com - we support that in OldDot
    • cards_2267989_vcfhsbc (and other vcf something without number)

    Overall just seems like there is bunch of testing feeds and feeds from OldDot with a bit different naming convention.

    Prerequisite: Ensure your account has cards added from different sources like OD / imports including CSV imported.

    1. On NewDot navigate to Reports -> open Search Filters > Card.
    2. Verify that for CSV imported cards (feeds including _ccupload in their name), the label reads:
    • 🇺🇸 All CSV Imported Cards
    • 🇪🇸 Todas las Tarjetas Importadas desde CSV
    1. Verify that for all other card feeds not matching any predefined types, the label reads All like before.
    2. Verify that the 2 edge case illustrations are matching the themed design (light / dark theme), see below:
    • for CSV imported cards (feeds including _ccupload in their name) we display the themed CSV icon card illustration
    • for all other card feeds not matching any predefined types, we display the themed generic bank icon card illustration

    Dark theme example:

    Design coming from #56567 (comment) (source):

    Screenshot 2025-02-20 at 12 49 58

    .
    Do we agree 👍 or 👎.

  18. mountiny commented on Mar 9, 2025

    @mountiny
    mountiny
    on Mar 9, 2025
    Contributor

    @joekaufmanexpensify what do you think of the test here? Do we have some already in place that would cover this partially at least?

  19. melvin-bot
    added
    DailyKSv2
    and removed
    WeeklyKSv2
    on Mar 10, 2025

  20. joekaufmanexpensify commented on Mar 10, 2025

    @joekaufmanexpensify
    joekaufmanexpensify
    on Mar 10, 2025
    Contributor

    Hmm, not really. We don't really support card feeds that aren't direct/commercial feeds yet in NewDot. I'm not sure we need a test like this now until we start supporting cross-compatible company cards or CSV cards in NewDot. But if we want to add it now for anyone who wanders between OldDot and NewDot with CSV cards, that's fine too.

  21. ikevin127 commented on Mar 10, 2025

    @ikevin127
    ikevin127
    on Mar 10, 2025
    Contributor

    cc @NicMendonca for payments

  22. NicMendonca commented on Mar 10, 2025

    @NicMendonca
    NicMendonca
    on Mar 10, 2025
    Contributor

    Payment summary

    C+: @sobitneupane - $250 via New Expensify
    Contributor: @ikevin127 -- $250 via UpWork (✅ paid)

  23. melvin-bot
    added
    Overdue
    on Mar 13, 2025

  24. NicMendonca commented on Mar 13, 2025

    @NicMendonca
    NicMendonca
    on Mar 13, 2025
    Contributor

    I think we're all set here!

  25. NicMendonca
    closed this as completedon Mar 13, 2025
  26. melvin-bot
    removed
    Overdue
    on Mar 13, 2025
  27. github-project-automation
    moved this from Bugs and Follow Up Issues to Done in #expensify-bugson Mar 13, 2025

  28. garrettmknight commented on May 20, 2025

    @garrettmknight
    garrettmknight
    on May 20, 2025
    Contributor

    $250 approved for @sobitneupane

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionBugSomething is broken. Auto assigns a BugZero manager.DailyKSv2DesignExternalAdded to denote the issue can be worked on by a contributor

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions