[$250] Company Cards - Unable to remove card feed that's under review

[lanitochka17]

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: 9.0.56-2 Reproducible in staging?: Y Reproducible in production?: No, unable to check If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Issue found when executing PR https://github.com/Expensify/App/pull/51569

Action Performed:

1. Open the app
2. Log in with a new expensifail account
3. Create a workspace
4. Navigate to Workspace settings - More features
5. Enable "Company cards"
6. Navigate to Workspace settings - Company cards
7. Navigate to Add company cards - American Express - American Express Corporate Cards - Next
8. Input any name and tap on the "Next" button
9. Tap on the "Submit" button
10. Tap on the "Settings" button
11. Tap on the "Remove card feed" button
12. Tap on the "Delete" button

Expected Result:

I should be able to delete the feed

Actual Result:

Unable to remove card feed that's under review. "Import company cards" page can be seen briefly but the "review" page loads again

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/35c3a695-b946-40a1-9565-b7be9e43a166

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021852426699884185074
• Upwork Job ID: 1852426699884185074
• Last Price Increase: 2024-11-01

Issue Owner

Current Issue Owner: @getusha

[melvin-bot[bot]]

Triggered auto assignment to @marcochavezf (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot[bot]]

💬 A slack conversation has been started in #expensify-open-source

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[marcochavezf]

This is happening in production, so not a blocker

https://github.com/user-attachments/assets/b4df5312-ce91-40a2-99d3-2c3f5694ae7a

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[daledah]

Proposal

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

• Unable to remove card feed that's under review. "Import company cards" page can be seen briefly but the "review" page loads again

What is the root cause of that problem?

• When calling RemoveFeed API, we always assume that it is removed successfully by setting the optimistic data: https://github.com/Expensify/App/blob/bef062b4caa7f665159dc107911e708031e648c4/src/libs/actions/CompanyCards.ts#L136-L143 and we always navigate back right after call that API: https://github.com/Expensify/App/blob/bef062b4caa7f665159dc107911e708031e648c4/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx#L51-L55

• As a result, if the API is not called successfully, the "Import company cards" page can be seen briefly but the "review" page loads again as mentioned in the actual result in OP.

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

• We need to make sure the RHP (company card setting page) is only closed when the API is called successfully. Otherwise, it needs display the error message. It is the same as what we did when issue a new card.

Step 1: Update the onyxData:

const onyxData: OnyxData = {
        optimisticData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
                value: {
                    settings: {
                        companyCards: {
                            [bankName]: {
                                isLoading: true,
                            },
                        },
                    },
                },
            },
        ],
        successData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
                value: {
                    settings: {
                        companyCards: {
                            [bankName]: {
                                isLoading: false,
                            },
                        },
                    },
                },
            },
        ],
        failureData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
                value: {
                    settings: {
                        companyCards: {
                            [bankName]: {
                                isLoading: false,
                                errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                            },
                        },
                    },
                },
            },
        ],
    };

Step 2: Add a logic to this position so that it only closes the RHN once the API is called successfully:

    const {isOffline} = useNetwork();
    const isRemovedSuccessfully = cardFeeds?.settings?.companyCards?.[selectedFeed]?.isLoading === false && cardFeeds?.settings?.companyCards?.[selectedFeed].errors === undefined;
    const isRemoving = cardFeeds?.settings?.companyCards?.[selectedFeed]?.isLoading === true;
    const errorMessage = ErrorUtils.getLatestErrorMessage(cardFeeds?.settings?.companyCards?.[selectedFeed]);
    const preIsRemovedSuccessfully = usePrevious(isRemovedSuccessfully);
    useEffect(() => {
        if (!preIsRemovedSuccessfully && isRemovedSuccessfully) {
            Navigation.setNavigationActionToMicrotaskQueue(Navigation.goBack);
        }
    }, [isRemovedSuccessfully, preIsRemovedSuccessfully]);

Step 3: Update button so that it will display the error message if has:

                        <MenuItem
                            icon={Expensicons.Trashcan}
                            title={translate('workspace.moreFeatures.companyCards.removeCardFeed')}
                            onPress={() => setDeleteCompanyCardConfirmModalVisible(true)}
                            disabled={isOffline || isRemoving}
                            errorText={errorMessage}
                        />

What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

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

[mountiny]

@marcochavezf happy to take this one over as I have been working on the workspace feeds feature

[allgandalf]

@mountiny should i review the existing proposal or is CS gonna implement this ?

[mountiny]

I think we can go with the contributors here

[allgandalf]

@daledah what does the API return in the current state ? can you attach an screenshot of it ? We fallback to the previous state when the request fails

[daledah]

@allgandalf Here is the BE's response.

[allgandalf]

@daledah in your RCA can. you please include why this response is 404

As a result, if the API is not called successfully,

But in the networks tabs we see the API called 🤔

[daledah]

But in the networks tabs we see the API called 🤔

Ah, I mean the API is called with an error

[daledah]

@mountiny Could you help check when BE returns this error?

[mountiny]

Working on this one in a similar issue. https://github.com/Expensify/App/issues/52252

[allgandalf]

@mountiny should we hold this for https://github.com/Expensify/App/issues/52252 (BE) one ?

[mountiny]

Yep, working on that one today

[mountiny]

PR is up https://github.com/Expensify/Auth/pull/13111

[mountiny]

There is a follow up merged so we can test again shortly

[melvin-bot[bot]]

@lschurr, @mountiny, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mountiny]

I believe @joekaufmanexpensify tested removing the pending card so this worked well