No option to request a physical card

[kavimuru]

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:
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
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: @miljakljajic
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1706188966737069

Action Performed:

1. Assign an Expensify card to an employee on a private domain
2. Log in to that employee’s Expensify account, navigate to Settings > Wallet
3. Click on their Expensify Card under Assigned Cards

Expected Result:

Virtual card should be assigned immediately, with the option to request a physical card

Actual Result:

Virtual and physical card both appear as having been assigned. There is no option to request a physical card, but the physical card shows no actual card number and hasn’t been assigned to the employee in Marqueta

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

[melvin-bot]

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

[allgandalf]

Proposal

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

No option to request a physical card, we see an all masked physical card.

What is the root cause of that problem?

We currently check if the physical card state if equal to CONST.EXPENSIFY_CARD.STATE.OPEN, the BE returns a constant value which matches the value of the mentioned constant, which causes the physical card to show even though it is not yet assigned.

App/src/pages/settings/Wallet/ExpensifyCardPage.js

Lines 268 to 275 in c5ca9a8

	{physicalCard.state === CONST.EXPENSIFY_CARD.STATE.OPEN && (
	<>
	<MenuItemWithTopDescription
	description={translate('cardPage.physicalCardNumber')}
	title={CardUtils.maskCard(physicalCard.lastFourPAN)}
	interactive={false}
	titleStyle={styles.walletCardNumber}
	/>

Now we see the all masked physical card number because we use a maskCard function.

App/src/libs/CardUtils.ts

Lines 106 to 115 in c5ca9a8

	function maskCard(lastFour = ''): string {
	const totalDigits = 16;
	const maskedLength = totalDigits - lastFour.length;
	// Create a string with '•' repeated for the masked portion
	const maskedString = '•'.repeat(maskedLength) + lastFour;
	// Insert space for every four symbols
	return maskedString.replace(/(.{4})/g, '$1 ').trim();
	}

As seen in the screenshot below, the maskCard function will return all masked out physical card number and hence we see the same our frontend.

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

Add a sanity check to see if the string : last 4 numbers of the physical card are empty and if so then skip the whole part altogether.

What alternative solutions did you explore? (Optional)

N/A

[kadiealexander]

@rafecolton this could be related to the issues you've been running into.

[rafecolton]

Hm I'm not sure, I requested mine in OldDot not NewDot

[kadiealexander]

Closing as discussed here!