[$250] "Approve" button showing for pending card transactions in search

[m-natarajan]

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?: need reproduction
Reproducible in production?: need 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): Expense

Action Performed:

1. Submit card transactions
2. Sign in as a approver
3. Go to reports > outstanding
4. Observe the pending card transaction expenses

Expected Result:

There should not be a approve button
Let's use a Pending badge like so:

Actual Result:

Approve button is displayed

Workaround:

unknown

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

CleanShot.2025-02-12.at.15.48.29.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021890041032822918106
• Upwork Job ID: 1890041032822918106
• Last Price Increase: 2025-02-13

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[DylanDylann]

Reproduction Step:

1. Submit an expense
2. As the approver, go to the search page
3. Simulate the above transaction to the pending Expensify Card Transaction by command

Onyx.merge('transactions_375241700797868691', {bank: "Expensify Card", cardId: 4, status: "Pending"})

Screen.Recording.2025-02-13.at.10.54.32.mov

@miljakljajic As this Slack message, the first C+ to post on the GH issue with reliable reproduction steps and video or screenshots confirming reproduction will be assigned as C+.

[DylanDylann]

In my opinion, the problem here is that the snapshot hasn't been updated correctly

Screen.Recording.2025-02-13.at.10.56.02.mov

[shawnborton]

Rather than show an "Approve" button for these pending transactions, we want to use our badge component to make a "Pending" badge, like so:

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[anigab994]

@m-natarajan @shawnborton Hi I am a new contributor and I am not clear how to send card transaction . Could someone please share the steps to send card transaction. Thank you

[shawnborton]

Hmm good question. @mountiny any good advice there for getting pending transactions for our contributors?

[jjcoffee]

@shawnborton Are these reports you've approved within the same session? The Approve button showing should've been fixed in #53101, but it relies on the snapshot data being correct as @DylanDylann says. It might be that pusher isn't updating them correctly within the same session (but I'd expect it to be correct on signing out/back in).

A simulation of a pending card transaction in the correct state would be:

Onyx.merge('transactions_<TRANSACTIONID>', {bank: "Expensify Card", cardId: 4, status: "Pending"})
Onyx.merge('snapshot_<SNAPSHOT_ID>', {data: {transactions_<TRANSACTIONID>: {bank: "Expensify Card", cardId: 4, status: "Pending"}}})

[shawnborton]

Ah actually maybe this is indeed fixed. That being said, I still think that maybe the "Pending" badge is more helpful than a View button in this case? So I think we should still move forward and change the View button to a Pending badge.

[jjcoffee]

@shawnborton If it happened for you recently, there's probably still a problem since the fix I mentioned was merged quite a while ago and heavily depended on simulated data 😄 If you're able to see if it still happens on login, that'd help see if there's still a (potentially BE) issue.

[shawnborton]

I'll keep my eye out the next time I have pending transactions sent to me. Regardless, let's move forward with the badge idea.

[jjcoffee]

Proposal

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

Currently we display View for pending Expensify card transactions. We want to change this to display a Pending badge.

What is the root cause of that problem?

We don't currently handle the Pending case except to skip showing the Approve action here:

App/src/libs/SearchUIUtils.ts

Lines 361 to 370 in 44cf172

	const hasOnlyPendingCardOrScanningTransactions =
	allReportTransactions.length > 0 &&
	allReportTransactions.every(
	(t) => (isExpensifyCardTransaction(t) && isPending(t)) || (isPartialMerchant(getMerchant(t)) && isAmountMissing(t)) || (isScanRequest(t) && isReceiptBeingScanned(t)),
	);
	const isAllowedToApproveExpenseReport = isAllowedToApproveExpenseReportUtils(report, undefined, policy);
	if (canApproveIOU(report, policy) && isAllowedToApproveExpenseReport && !hasOnlyPendingCardOrScanningTransactions) {
	return CONST.SEARCH.ACTION_TYPES.APPROVE;
	}

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

Assuming we only want to do this for pending card transactions, we can add the following here:

const hasOnlyPendingCardTransactions = allReportTransactions.length > 0 && allReportTransactions.every((t) => isExpensifyCardTransaction(t) && isPending(t));

if (hasOnlyPendingCardTransactions) {
	return CONST.SEARCH.ACTION_TYPES.PENDING;
}

We need to do this before the following section as otherwise we return early with a View action button:

App/src/libs/SearchUIUtils.ts

Lines 333 to 335 in 358f423

	if (isTransaction && !data[key].isFromOneTransactionReport) {
	return CONST.SEARCH.ACTION_TYPES.VIEW;
	}

We also need to add PENDING to the ACTION_TYPES const here.

In order to actually display the badge icon and text, we need to update the ActionCell component. Firstly in order to handle transaction groups (if they're supported for card transactions, I'm not sure about this!), we tweak this:

App/src/components/SelectionList/Search/ActionCell.tsx

Line 52 in 01dfa6d

const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID);

To this:

const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || (parentAction === CONST.SEARCH.ACTION_TYPES.PENDING && action === CONST.SEARCH.ACTION_TYPES.PENDING);

To keep the code DRY, we can reuse the same output for PAID and DONE:

App/src/components/SelectionList/Search/ActionCell.tsx

Lines 56 to 73 in 01dfa6d

	<View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
	<Badge
	text={text}
	icon={Expensicons.Checkmark}
	badgeStyles={[
	styles.ml0,
	styles.ph2,
	styles.gap1,
	isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
	StyleUtils.getHeight(variables.h20),
	StyleUtils.getMinimumHeight(variables.h20),
	isSelected ? StyleUtils.getBorderColorStyle(theme.buttonHoveredBG) : StyleUtils.getBorderColorStyle(theme.border),
	]}
	textStyles={StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall)}
	iconStyles={styles.mr0}
	success
	/>
	</View>

Update the condition to this:

if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE || (parentAction !== CONST.SEARCH.ACTION_TYPES.PENDING && action === CONST.SEARCH.ACTION_TYPES.PENDING)) {

Then we just need to adjust (1) the success prop to render the badge with the right colour style, and (2) switch the icon to an hourglass for the PENDING action.

For (1) we can do this:

const isSuccessStatus = (parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE;

For (2) we switch out the icon like this:

const icon = isSuccessStatus ? Expensicons.Checkmark : Expensicons.Hourglass;

And then use those in the component:

<Badge
	...
	icon={icon}
	...
	success={isSuccessStatus}
/>

Result:

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

N/A as this would be a UI tweak.

[jjcoffee]

I'm unsure if card transactions ever come in groups like we have for other transactions, but just to note that it would look like this if only one is pending:

Then like this if all are pending:

[shawnborton]

I'm unsure if card transactions ever come in groups like we have for other transactions, but just to note that it would look like this if only one is pending:

Hmmm good call out, though I think I would just use a "Pending" badge there too instead of making it say View.

But actually, this makes me wonder if we should just change the card icon to something like this:

And then just keeping the View button as it is, since the column is indeed called the "Action column"? Thoughts @Expensify/design @trjExpensify @JmillsExpensify ?

[shawnborton]

Or maybe we even consider putting the pending badge right by the merchant?

[dannymcclain]

Love the icon update. Big fan of that improvement.

And I definitely see the line of thinking regarding the action column/view button. I think if we want to also add the pending badge, I might put it next to the amount rather than the merchant (though classic shows the pending badge to the right of the merchant...)

[shawnborton]

I was thinking the beginning of the Merchant column so it always has the same left-alignment if you had multiple pending expenses... but I don't feel too strongly. I think even just starting with an icon update is helpful. Let's see what others think too.

[nkdengineer]

Proposal

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

Add pending bage for pending card transaction

What is the root cause of that problem?

This is a new feature

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

In the TotalCell, we can add the Pending badge before the amount if the transaction is pending card transaction

const isPending = isExpensifyCardTransaction(transactionItem) && isPendingUtil(transactionItem);
const pendingBadge = (
    <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
        <Badge
            text={translate('iou.pending')}
            icon={Expensicons.Hourglass}
            badgeStyles={[
                styles.ml0,
                styles.ph2,
                styles.gap1,
                isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
                StyleUtils.getHeight(variables.h20),
                StyleUtils.getMinimumHeight(variables.h20),
            ]}
            textStyles={StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall)}
            iconStyles={styles.mr0}
        />
    </View>
);
return (
    <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
        {isPending && pendingBadge}
        <TextWithTooltip
            shouldShowTooltip={showTooltip}
            text={amount}
            style={[styles.optionDisplayName, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
        />
    </View>
);

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 164 in d5d5472

function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: TotalCellProps) {

Optional: We can also hide the badge if the transactionItem.action is paid or done but not sure if it's a real case or not

If we want to do it in the merchant cell we can move this logic to the MerchantCell

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.

[dannymcclain]

so it always has the same left-alignment if you had multiple pending expenses...

Good shout—I didn't think about that. I don't feel super strongly!