[$250] Expensify Card - Card row in member profile is not updated after updating card details

[vincdargento]

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.88-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
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+100106kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Workspace has enabled Expensify Card feature.
• At least one member is assigned with Expensify Card.

1. Go to staging.new.expensify.com
2. Go to Workspace settings > Members.
3. Click on the member with Expensify Card.
4. Click on the card.
5. Click Card limit.
6. Edit amount and save it.
7. Click RHP back button.
8. Note that the amount in the card row is not updated.
9. Repeat Step 4 to 7 with card name.

Expected Result:

Card row in member profile should reflect the latest changes after card details are updated.

Actual Result:

Card row in member profile still shows the previous data after card details are updated.
It only shows the latest changes after reopening member profile.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021883972245510666908
• Upwork Job ID: 1883972245510666908
• Last Price Increase: 2025-01-27
• Automatic offers:
• Tony-MK | Contributor | 105996108

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[Tony-MK]

Proposal

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

Expensify Card - Card row in member profile is not updated after updating card details

What is the root cause of that problem?

The WorkspaceMemberDetailsPage does not re-render because we do not use the useOnyx hook to trigger the re-render event for the updated values.

App/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

Line 85 in 85c646c

const workspaceCards = CardUtils.getAllCardsForWorkspace(workspaceAccountID);

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

Use the useOnyx hook to get the WORKSPACE_CARDS_LIST instead of the CardUtils.getAllCardsForWorkspace function.

App/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

Line 85 in 85c646c

const workspaceCards = CardUtils.getAllCardsForWorkspace(workspaceAccountID);

const [allWorkspaceCards] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}`);

Then, filter out the membersCards list from allWorkspaceCards instead of workspaceCards.

App/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

Lines 92 to 97 in 85c646c

	const memberCards = useMemo(() => {
	if (!workspaceCards) {
	return [];
	}
	return Object.values(workspaceCards ?? {}).filter((card) => card.accountID === accountID);
	}, [accountID, workspaceCards]);

Finally, handle the value of hasWorkspaceCardsAssigned properly since it depends workspaceCards.

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

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Instead of getting the whole cards, we can get the Expensify cards and other types directly.

const [workspaceCards] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_{cardType}`);

An example for Expensify cards:

const [workspaceCards] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_Expensify Card`);

[drminh2807]

Proposal

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

Expensify Card - Card row in member profile is not updated after updating card details

What is the root cause of that problem?

The WorkspaceMemberDetailsPage does not re-render because we do not use the useOnyx hook to trigger the re-render event for the updated values.

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

Use the useOnyx hook to get the WORKSPACE_CARDS_LIST, all calculate it by CardUtils

App/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

Line 85 in 0190b0a

const workspaceCards = CardUtils.getAllCardsForWorkspace(workspaceAccountID);

    const [allWorkspaceCardList] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
    const workspaceCards = useMemo(() => CardUtils.getAllCardsForWorkspace(workspaceAccountID, allWorkspaceCardList), [allWorkspaceCardList, workspaceAccountID]);

function getAllCardsForWorkspace(workspaceAccountID: number, allWorkspaceCards: OnyxCollection<WorkspaceCardsList>): CardList {
    const cards = {};
    for (const [key, values] of Object.entries(allWorkspaceCards ?? {})) {
        if (key.includes(workspaceAccountID.toString()) && values) {
            const {cardList, ...rest} = values;
            Object.assign(cards, rest);
        }
    }
    return cards;
}

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

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.
N/A

[twilight2294]

Proposal

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

Card row in member profile is not updated after updating card details

What is the root cause of that problem?

We get the latest cards use the getAllCardsForWorkspace, this function gets called only one time when we open the page from the members page, when we navigate back from the card details page, the page doesn't get re-rendered, hence we get the same values which were present previosuly:

App/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

Line 85 in 0190b0a

const workspaceCards = CardUtils.getAllCardsForWorkspace(workspaceAccountID);

This causes the values to not get updated

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

We need to make use of useFocusEffect here which will fetch the latest card details for every time we visit the page, it will call the getAllCardsForWorkspace function, this makes sure that we fetch the latest values:

    const [workspaceCards, setWorkspaceCards] = useState<CardList>();

    const fetchWorkspaceCards = useCallback(() => {
        const cards = CardUtils.getAllCardsForWorkspace(workspaceAccountID);
        setWorkspaceCards(cards);
    }, [workspaceAccountID]);

    useFocusEffect(
        useCallback(() => {
            fetchWorkspaceCards();
        }, [fetchWorkspaceCards])
    );

There might me some changes in the hooks we use that can be figured out during PR phase, but this is the core idea to solve the bug

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

N/A this is a visual bug, we can try writing UI test though which can tell if the screen has the updated content present, by first updating the values using onyx and then checking it against the values present on member details page

What alternative solutions did you explore? (Optional)

N/A

Result video:

Screen.Recording.2025-01-22.at.11.20.05.AM.mov

[twilight2294]

@OfstadC can you make this one external please

[melvin-bot]

@OfstadC Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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