[Due for payment 2025-03-10] [$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-20
• Automatic offers:
• DylanDylann | Contributor | 106252950

Issue Owner

Current Issue Owner: @dylanexpensify

[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]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-17 15:44:47 UTC.

Proposal

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

Currently we display only the View action button for pending Expensify card transactions. We want to add an indication that the transaction is pending by displaying a Pending version of the card icon in the Type column.

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 order to display a pending card icon in the Type column, we need to update this:

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

Line 185 in 81a3a8f

const typeIcon = getTypeIcon(transactionItem.transactionType);

So that if there's a pending card transaction, we just output Expensicons.CreditCardHourglass instead.

const isPendingExpensifyCardTransaction = isExpensifyCardTransaction(transactionItem) && isPending(transactionItem);
const typeIcon = isPendingExpensifyCardTransaction ? Expensicons.CreditCardHourglass : getTypeIcon(transactionItem.transactionType);

(We could also pass isPendingExpensifyCardTransaction to getTypeIcon and move the logic there, but it seems a bit cleaner this way).

Optionally, we can display a tooltip for the icon by wrapping it with a Tooltip, something like this:

const tooltipText = isPendingExpensifyCardTransaction ? translate('iou.pending') : '';

    return (
        <Tooltip text={tooltipText}>
            <View>
                <Icon
                    src={typeIcon}
                    fill={theme.icon}
                    height={isLargeScreenWidth ? 20 : 12}
                    width={isLargeScreenWidth ? 20 : 12}
                />
            </View>
        </Tooltip>
    );

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.

What alternative solutions did you explore? (Optional)

[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 ?

[amyevans]

Let's do it! @jjcoffee let us know when to expect a PR 😄

[jjcoffee]

PR ready for review 🙏

[jjcoffee]

Deployed to production 2025-02-27, so payment should be due 2025-03-06. cc @dylanexpensify

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[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:

• feat: add pending icon for pending card transactions #57397

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

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

• @jjcoffee requires payment through NewDot Manual Requests
• @DylanDylann requires payment automatic offer (Contributor)

[melvin-bot]

@jjcoffee / @DylanDylann @dylanexpensify @jjcoffee / @DylanDylann 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]

[dylanexpensify]

Nice! Coming up!

[dylanexpensify]

Paying today!

[DylanDylann]

This is not a bug, seem like a new feature

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:

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

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

Test:

1. Submit or simulate some pending card transactions
2. Go to Reports -> Outstanding
3. Verify that there is a pending icon (hourglass) next to the pending card transaction expenses
4. [Desktop/Web] Verify that hovering over the icon shows a Pending tooltip

Do we agree 👍 or 👎

[dylanexpensify]

Payment summary:

Contributor: @jjcoffee $250 via NewDot
Contributor+: @DylanDylann $250 via Upwork

Please apply/request!

[dylanexpensify]

done!

[garrettmknight]

$250 approved for @jjcoffee