[Search v1.2] - Hold and Delete button are present when the expense is paid in Search

lanitochka17 commented 4 days ago

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: 9.0.66-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): applausetester+kh0911001@applause.expensifail.com Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to workspace chat
Submit an expense to the workspace
Click dropdown button on the expense preview
Select Pay elsewhere (do not pay it)
Go to Search
Click Pay button
Select the expense via checkbox
Click dropdown button

Expected Result:

Hold and Delete button should not be present once the expense is paid

Actual Result:

Hold and Delete button are present when the expense is paid. The buttons only disappear after refreshing the page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

[x] Android: Standalone
[x] Android: HybridApp
[x] Android: mWeb Chrome
[x] iOS: Standalone
[x] iOS: HybridApp
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/bf6ff86b-3ffe-470b-9b33-5b5918a9b628

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @luacmartins

Issue Owner

Current Issue Owner: @luacmartins

melvin-bot[bot] commented 4 days ago

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

abzokhattab commented 4 days ago

Proposal

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

Hold and Delete button are present when the expense is paid in Search

What is the root cause of that problem?

The backend of the pay inside the search doesnt update the canHold, canUnhold and CanDelete keys inside the transaction

https://github.com/Expensify/App/blob/a266c4c45a8e7c52b3b5cc280ad5dd514b239597/src/libs/actions/Search.ts#L265-L278

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

we should modify the optimistic props to add the the canHold, canUnhold and CanDelete as false and in case of failure it should be reverted:

    const createActionLoadingData = (isLoading: boolean): OnyxUpdate[] => [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
            value: {
                data: transactionID
                    ? {[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]: {isActionLoading: isLoading, canHold: false, canUnhold: false,canDelete:false}}
                    : (Object.fromEntries(paymentData.map((item) => [`${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`, {isActionLoading: isLoading}])) as Partial<SearchReport>),
            },
        },
    ];

POC

https://github.com/user-attachments/assets/90ed4e1e-3561-4b5f-b66f-b36bd65a9a45

What alternative solutions did you explore? (Optional)

cretadn22 commented 4 days ago

@luacmartins

This is a BE bug. The backend doesn't update an new value for canHold and CanDelete fields

luacmartins commented 2 days ago

Now that we're sending more data to Search, I think we might be able to remove the canHold and canDelete keys and rely on the App to compute these values. I'll investigate this solution next.

Expensify / App