[Due for payment 2025-05-13] Expensify Card feed lists cardholders who are not members of the workspace

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
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: @heyjennahay
Slack conversation (hyperlinked to channel name): #Migrate

Action Performed:

1. Navigate to the workspace settings in NewDot.
2. Open the Expensify Card feed settings.
3. Observe that cardholders

Expected Result:

Only active members of the workspace should appear as cardholders within that workspace's Expensify Card feed

Actual Result:

Cardholders who are not part of the workspace (including employees from other countries) are still shown in the card feed.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

The screenshot for the issue is in OP

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

[puneetlath]

@VickyStash @koko57 can we filter these out when displaying the cards?

[twilight2294]

Proposal

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

Expensify Card feed lists cardholders who are not members of the workspace

What is the root cause of that problem?

Currently we do not have any filter in place which checks if the assigned card member from Expensify Card feed is also the member of the workspace where the list is displayed, this leads to showing of all the members under that feed.

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

To fix it we need to get the accountIDs of the policy members and filter them in sortCardsByCardholderName:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Line 74 in 42632a9

const sortedCards = useMemo(() => sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);

We will pass a new prop allowedAccountIDs which will be a number array to sortCardsByCardholderName:

const policyMemberEmailsToAccountIDs = useMemo(() => getMemberAccountIDsForWorkspace(policy?.employeeList, true), [policy?.employeeList]);

const accountIDs = useMemo(() => Object.values(policyMemberEmailsToAccountIDs ?? {}).map((accountID) => Number(accountID)), [policyMemberEmailsToAccountIDs]);

Then pass it down to the function:

    const sortedCards = useMemo(() => sortCardsByCardholderName(cardsList, personalDetails, accountIDs), [cardsList, personalDetails, accountIDs]);

Then update the sortCardsByCardholderName function:

function sortCardsByCardholderName(
    cardsList: OnyxEntry<WorkspaceCardsList>,
    personalDetails: OnyxEntry<PersonalDetailsList>,
    allowedAccountIDs: number[],
): Card[] {
    const {cardList, ...cards} = cardsList ?? {};

    return Object.values(cards)
        .filter((card: Card) => card.accountID && allowedAccountIDs.includes(card.accountID))
        .sort((cardA: Card, cardB: Card) => {
            const userA = cardA.accountID ? personalDetails?.[cardA.accountID] ?? {} : {};
            const userB = cardB.accountID ? personalDetails?.[cardB.accountID] ?? {} : {};

            const aName = getDisplayNameOrDefault(userA);
            const bName = getDisplayNameOrDefault(userB);

            return localeCompare(aName, bName);
        });
}

This will make sure that we always filter those accounts which are not the members of the workspace. Note that we can update the extraction of accountID's and filter logic during PR stage, this is just a overview of how things will be done

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

We need to write automated test here to render the list and make sure that we only display those expensify card users who are the member of that workspace.

What alternative solutions did you explore? (Optional)

N/A

[twilight2294]

@puneetlath yes we can filter it out based on the workspace accountID's and compare it with the assigned cards accountID's, my proposal above makes sure of that

[DylanDylann]

@puneetlath Currently, when removing the member the BE will remove all their assigned card. About this problem, this issue seems like an edge case with another RCA

[VickyStash]

@VickyStash @koko57 can we filter these out when displaying the cards?

Yeah, as was mentioned above, it should be possible!