[$500] Assigned cards have the bank name only without last 4 digits of card number

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Found when validating PR : #35885

Version Number: 1.4.43-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation:

Action Performed:

1. Assign a third party card feed to a test account in OldDot following these steps:
2. Navigate to Settings > Domains > Import Card to add the test card feed
3. Search ‘Discover’
4. Enter the login ‘expensifydemo’ and the password ‘#USD’
5. Assign the single available card to your test account
6. Navigate to NewDot and go to your Wallet > Assigned cards
7. Verify "bankName - lastFourDigits" shown for each card in Assigned cards menu

Expected Result:

"bankName - lastFourDigits" shown for each card in Assigned cards menu

Actual Result:

Assigned cards have the bank name only without last 4 digits of card number

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

Bug6385376_1708410390197.35885_Desktop.mp4

Bug6385376_1708410390210.35885_mWeb.mp4

Bug6385376_1708410390215.35885_Android.mp4

Bug6385376_1708410390217.35885_Web.mp4

Bug6385376_1708410390217.35885_iOS.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016608e25454a96698
• Upwork Job ID: 1759902287781416960
• Last Price Increase: 2024-02-27

[melvin-bot]

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

[izarutskaya]

I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

We think that this bug might be related to #wave8-collect-admins
CC @zanyrenney

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @youssef-lr (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[youssef-lr]

@izarutskaya is this reproducible in production? If yes then we can remove the blocker.

[aeioual]

Proposal

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

Assigned cards have the bank name only without last 4 digits of card number

What is the root cause of that problem?

We are printing bank instead of cardName on the FE:

App/src/pages/settings/Wallet/PaymentMethodList.tsx

Line 212 in 8bfb264

const cartTitle = card.lastFourPAN ? `${card.bank} - ${card.lastFourPAN}` : card.bank;

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

We should directly print out card.cardName instead:

const cartTitle = card.cardName ? `${card.cardName}` : card.bank;

What alternative solutions did you explore? (Optional)

N/A

[allgandalf]

regression from: #35885 #35685

[youssef-lr]

Thanks @GandalfGwaihir! I've let the contributor know.

[chiragsalian]

I'm unsure why deploy blocker label was removed here. i don't see a comment explaining why it was removed and the issue description says its not reproducible on production so i am re-adding the label. If i am mistaken feel free to correct me.

Also adding back external label since it looks like it can be tackled by contributors.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Current assignee @ntdiary is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Current assignee @youssef-lr is eligible for the Engineering assigner, not assigning anyone new.

[ghost]

Proposal

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

Assigned cards have the bank name only without last 4 digits of card number

What is the root cause of that problem?

The root cause here is that firstly it is coming from the regression of this PR - #35885, we are passing card.bank.

App/src/pages/settings/Wallet/PaymentMethodList.tsx

Line 212 in 3da8aa3

const cartTitle = card.lastFourPAN ? `${card.bank} - ${card.lastFourPAN}` : card.bank;

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

To resolve this issue, we must pass card.cardName instead, this will resolve the issue completely.

Result

What alternative solutions did you explore? (Optional)

Since, my this comment, I tried to figure out a way to display "bankName - lastFourDigits" is firstly , we need to extract the lastFourDigits of the PAN using

                const panNumber = card.cardName.split('- ');
                const lastFourPan = panNumber[panNumber.length - 1];

from the card.cardName and after that we need to add it here :

App/src/pages/settings/Wallet/PaymentMethodList.tsx

Line 212 in 3da8aa3

const cartTitle = card.lastFourPAN ? `${card.bank} - ${card.lastFourPAN}` : card.bank;

like this : const cartTitle = card.bank ? `${card.bank} - ${lastFourPan}` : card.bank;.

Result

[ghost]

One more thing that I have discovered from the API calls is that, lastFourPAN is always empty. That's why I believe it is not possible to display bankName along with lastFourPAN

cc - @MitchExpensify @ntdiary @youssef-lr

Without PAN, this is the thing that can be achieved

[ghost]

updated Proposal

[rushatgabhane]

discussion here https://expensify.slack.com/archives/C01GTK53T8Q/p1708558924151619

[marcochavezf]

Created a PR to always send the lastFourPAN from the backend

[rushatgabhane]

Thanks a lot @marcochavezf 🙇

[ntdiary]

Oops, I didn't notice this blocker, but maybe @rushatgabhane can take over it? (I still have many other issues to review) 😂

[rushatgabhane]

it's backend only mostly @ntdiary

[marcochavezf]

This has been addressed in a backend fix. Removing the deploy blocker since. @izarutskaya we can check it off since it's not testable now

[MitchExpensify]

This looks like an improvement but I'm not sure this fits into a wave or VIP

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ghost]

Hey @MitchExpensify is this issue still open? Can you please review my proposal?

[youssef-lr]

@marcochavezf we can close this right?

[marcochavezf]

I think the backend fix was deployed to production already, so yup we can close it out.

[youssef-lr]

Nice thanks.

[youssef-lr]

Assigning you for points :D