[Awaiting Payment 22nd June] [$250] [Pending/Scanning] Card transactions show Cash in the expense preview instead of Card

[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: 1.4.77-4
Reproducible in staging?: y
Reproducible in production?: y
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: @kevinksullivan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1717026809436129

Action Performed:

1. Incur a card transaction on an expensify card
2. Add a manual request to that same report

Expected Result:

The expense preview should say Card for card transactions.

Actual Result:

The card transactions show as Cash

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fc32ffbea0b1bdc5
• Upwork Job ID: 1796170573012758528
• Last Price Increase: 2024-05-30
• Automatic offers:
• Nodebrute | Contributor | 102573646

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

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

[Nodebrute]

Propsal

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

card transactions show Cash in the expense preview

What is the root cause of that problem?

This is a feature request. We don't have any logic to show Card instead of cash

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

We should add another check in getPreviewHeaderText in MoneyRequestPreviewContent.tsx

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 139 to 143 in f26c9f5

	const getPreviewHeaderText = (): string => {
	let message = translate('iou.cash');
	if (isDistanceRequest) {
	message = translate('common.distance');

We can do something like this

if(isCardTransaction){
message = translate('iou.card')
}

We should also check for other places where we want to show card instead of cash

If we only want to use Card for expensify card transactions then we can use check isExpensifyCardTransaction

What alternative solutions did you explore?

We can also do it like this here

let message = isCardTransaction ? translate('iou.card') : translate('iou.cash')

[melvin-bot]

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

[melvin-bot]

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

[ShridharGoel]

Proposal

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

Card transactions show Cash in the expense preview instead of Card.

What is the root cause of that problem?

We are missing card text implementation at below places:

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 140 in 0e369b9

let message = translate('iou.cash');

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 371 in 0e369b9

accessibilityLabel={isBillSplit ? translate('iou.split') : translate('iou.cash')}

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 211 to 218 in 0e369b9

	if (isCardTransaction) {
	if (formattedOriginalAmount) {
	amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.original')} ${formattedOriginalAmount}`;
	}
	if (isCancelled) {
	amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`;
	}
	} else {

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

Update this to below:

let message = isCardTransaction ? translate('iou.card') : translate('iou.cash');

Check if we want to update this accessibility label to below:

accessibilityLabel={isBillSplit ? translate('iou.split') : (isCardTransaction ? translate('iou.card') : translate('iou.cash'))}

If we want to update this, then we can use something like the below:

if (isCardTransaction) {
    if (formattedOriginalAmount) {
        amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.card')} ${translate('iou.original')} ${formattedOriginalAmount}`;
    }
    if (isCancelled) {
        amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.card')} ${translate('iou.canceled')}`;
    }
}

[parasharrajat]

This looks like a new change. I believe we need to groom those issue first and add more details in OP. cc: @trjExpensify

[trjExpensify]

Oh hm, according to @kevinksullivan we'd implemented this one already with the original implementation, so this was a regression. Is that not the case?

We show Expensify Card transactions in NewDot now, but the expense preview component reads Cash not Card.

If we only want to use Card for expensify card transactions then we can use check isExpensifyCardTransaction

If we did this, it wouldn't be future proof for when we show third-party card transactions, so I think a isCardTransaction check is better than isExpensifyCardTransaction check personally.

[parasharrajat]

Ok. Thanks. @Nodebrute's proposal looks good to me. let's make sure we modify the related places as well.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

[parasharrajat]

PR was deployed 5 days back on PROD. Not sure why the status was not updated here.

[Nodebrute]

@grgia The PR went into production on June 15th. The payment was due on June 22nd. Unfortunately, this issue missed the automatic payment date. Kindly issue the payment.

[trjExpensify]

Payment summary as follows:

• @parasharrajat $250 for the C+ review (feel free to request!)
• @Nodebrute $250 for the fix (paid!)

Regression tests for the project will be added centrally. Closing!

[parasharrajat]

Payment requested as per #42832 (comment)

[JmillsExpensify]

$250 approved for @parasharrajat