[$250] 'Approve' Button Incorrectly Displayed for Pending Expensify Card Transactions

[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?: Needs Reproduction
Reproducible in production?: Needs 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): ts_external_expensify_expense

Action Performed:

1. Navigate to the Search page.
2. Search for an expense associated with an Expensify Card transaction that is still in a pending state.
3. Observe the expense row in the search results.

Expected Result:

The "Approve" button should not be displayed on the expense row for transactions in a pending state, The button should only appear when the transaction is actionable

Actual Result:

An "Approve" button is displayed for the pending transaction, even though no approval action can be taken at this stage and clicking the "Approve" button results in no action or feedback, as expected for a pending transaction.

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: 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.2024-11-25.at.17.43.29.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863621928114678264
• Upwork Job ID: 1863621928114678264
• Last Price Increase: 2024-12-09
• Automatic offers:
• paultsimura | Reviewer | 105276803
• cretadn22 | Contributor | 105276806

Issue Owner

Current Issue Owner: @paultsimura

[melvin-bot]

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

[Shahidullah-Muffakir]

Edited by proposal-police: This proposal was edited at 2024-11-26 01:04:55 UTC.

Proposal

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

When navigating to the Search page and searching for an expense associated with an Expensify Card transaction in a pending state, the "Approve" button is incorrectly displayed for pending transaction.

What is the root cause of that problem?

It seems we did not consider the pending status of transaction while showing approve button.

App/src/libs/SearchUIUtils.ts

Line 298 in 2ce0764

if (IOU.canApproveIOU(report, policy) && ReportUtils.isAllowedToApproveExpenseReport(report, undefined, policy)) {

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

we can add this check here: isTransaction && transaction?.status !== CONST.TRANSACTION.STATUS.PENDING as:

if (
    (isTransaction && 
        transaction?.status !== CONST.TRANSACTION.STATUS.PENDING && 
        IOU.canApproveIOU(report, policy) && 
        ReportUtils.isAllowedToApproveExpenseReport(report, undefined, policy)
    ) || 
    (!isTransaction && 
        IOU.canApproveIOU(report, policy) && 
        ReportUtils.isAllowedToApproveExpenseReport(report, undefined, policy)
    )
) {
    return CONST.SEARCH.ACTION_TYPES.APPROVE;
}

can be simplified to early return view if the transaction is pending

What alternative solutions did you explore? (Optional)

or use !isTransactionPending
const isTransactionPending = TransactionUtils.isPending(transaction)

in :

App/src/libs/actions/IOU.ts

Line 6850 in 2ce0764

return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled && !isArchivedReport && !isTransactionBeingScanned && !hasViolations;

[cretadn22]

Proposal

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

When navigating to the Search page and searching for an expense associated with a pending Expensify Card transaction, the "Approve" button is incorrectly displayed for the pending transaction

What is the root cause of that problem?

In the condition for displaying the Approve button on the Search page, we have not included checks for pending card transactions.

App/src/libs/SearchUIUtils.ts

Line 298 in 2ce0764

if (IOU.canApproveIOU(report, policy) && ReportUtils.isAllowedToApproveExpenseReport(report, undefined, policy)) {

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

In here, We need to include conditions to check if all transactions are pending, similar to what we implemented here

    const transactions = TransactionUtils.getAllReportTransactions(report?.reportID);
    const hasOnlyPendingTransactions = transactions.length > 0 && transactions.every((t) => TransactionUtils.isExpensifyCardTransaction(t) && TransactionUtils.isPending(t));
    if (IOU.canApproveIOU(report, policy) && ReportUtils.isAllowedToApproveExpenseReport(report, undefined, policy) && !hasOnlyPendingTransactions) { 

What alternative solutions did you explore? (Optional)

[melvin-bot]

@sakluger Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@sakluger, @fedirjh Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@sakluger @fedirjh this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

Hey @paultsimura - we have a few proposals pending review. Could you please take a look when you have a chance? Thanks!

[paultsimura]

Hey @shawnborton, is there a way to create a Pending Expensify Card Transaction by a Contributor / C+?

[paultsimura]

@Shahidullah-Muffakir / @cretadn22 did you manage to reproduce this issue? If yes – please share the steps to create such a transaction 🙏

[shawnborton]

is there a way to create a Pending Expensify Card Transaction by a Contributor / C+?

@paultsimura I'm not entirely sure, @grgia or @luacmartins any idea?

[luacmartins]

I'm not sure if we have any way of doing that in staging. Maybe we can mock the data by manually merging it into Onyx, e.g.

Onyx.merge('cardList',
{
  4: {
    "bank": "Expensify Card",
    "lastFourPAN": 3458,
  }
}
);

Onyx.merge('transactions_<TRANSACTIONID>', {amount: 1000, currency: 'USD', cardID: 4,  modifiedMerchant: null, merchant: "Test ECard Transaction", mccGroup: "Airlines", status:"Pending", hasEReceipt: true, receipt: {}, reimbursable: false });

I'm not sure if that'd help

[jjcoffee]

I can take this over, since I can replicate with dummy transaction data similar to what @luacmartins suggests above, but we also need to add data for the search under the relevant snapshot key.

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"}}})

53101repro-2024-12-10_14.18.36.mp4

[jjcoffee]

Let's go with @cretadn22's proposal, as they handle the additional case of multiple pending transactions.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[paultsimura]

@mountiny please assign @jjcoffee here following this thread.

[melvin-bot]

📣 @paultsimura 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

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

[paultsimura]

Thx @mountiny, please also assign @jjcoffee instead of me.

[sakluger]

Hey @paultsimura and @jjcoffee - for C+ payment, should we split this between you both or should it go fully to @jjcoffee?

[paultsimura]

Fully to @jjcoffee