[Due for payment 2025-03-17] [$400] Cards - In company cards settings page, on refresh entered details are not shown

[IuliiaHerets]

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: V9.0.97-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings - enable company cards
3. Tap company cards
4. Add a American express card selecting American express corporate cards
5. Tap settings
6. Change the card feed name and save
7. Toggle on "allow deleting transactions"
8. Refresh the page
9. Now card feed name is empty
10. Tap on card feed name
11. Note in preview saved feed name is shown
12. Note "allow deleting transactions" is toggle off
13. Navigate back to company cards page
14. Tap settings
15. Now note feed name is displayed and "allow deleting transactions" toggle is on.

Expected Result:

In company cards settings page, on refresh entered details are not shown similarly it must not be displayed in preview and while revisiting the page.

Actual Result:

In company cards settings page, on refresh entered details are not shown but displayed in preview and while revisiting the page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6740346_1739345791710.Screenrecorder-2025-02-12-12-55-05-817.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021890532491432510986
• Upwork Job ID: 1890532491432510986
• Last Price Increase: 2025-02-24
• Automatic offers:
• brunovjk | Reviewer | 106260425
• nkdengineer | Contributor | 106260426

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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.

[twilight2294]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-12 10:12:09 UTC.

Proposal

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

In company cards settings page, on refresh entered details are not shown

What is the root cause of that problem?

We do not have cardFeeds as a dependency while extracting selectedFeed, intially selectedFeed is undefined for sometime and it gets the onyx value after sometime, but the useMemo in selectedFeed only runs once:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx

Line 44 in 5ddef34

const selectedFeed = useMemo(() => getSelectedFeed(lastSelectedFeed, cardFeeds), []);

Which causes the selectedFeed to the undefined and we do not get the values

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

We need to add cardFeeds as a dependency to the useMemo this will make sure that we get the values for the feed whenever the values for SHARED_NVP_PRIVATE_DOMAIN_MEMBER are fetched.

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

This is just a dependency addition and i don't think that we need a test for this, the values are not fetched on the update in onyx, so i think we can skip test for this issue

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @twilight2294 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[bernhardoj]

Proposal

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

Company card settings page shows empty name after refresh.

What is the root cause of that problem?

The card data is intentionally memoized once only.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx

Lines 42 to 44 in 5ddef34

	const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we want to run the hook only once to escape unexpected feed change
	const selectedFeed = useMemo(() => getSelectedFeed(lastSelectedFeed, cardFeeds), []);

However, after refresh, the onyx data is still loading, so the data is undefined.

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

Add loading state to the memo deps.

const [lastSelectedFeed, lastSelectedFeedResult] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
const isLoading = isLoadingOnyxValue(lastSelectedFeedResult);
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we want to run the hook only once to escape unexpected feed change
const selectedFeed = useMemo(() => getSelectedFeed(lastSelectedFeed, cardFeeds), [isLoading]);

We can show loading indicator when it's loading if needed.

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

N/A

[melvin-bot]

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