[Due for payment 2025-02-28] [$250] Company cards-Assign card page is briefly displayed before Reviewing your request page

[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.91-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/3605908
Issue reported by: Applause Internal Team
Device used: iPhone 15 iOS 18.1.1 Safari, MacBook Air Sonoma 14.1 Chrome
App Component: Other

Action Performed:

Preconditions: user has a workspace with company cards enabled

1. Navigate to staging.new.expensify.com and sign in
2. Navigate to the workspace and select Company cards
3. Click/tap on Add cards button
4. Select American Express option in the banks list, then AmEx Corporate Cards and complete the submitting flow
5. On the Company Cards page tap Settings - Remove card feed
6. Repeat steps 3-4

Expected Result:

"We're reviewing the request" page is displayed after submitting the American Express card feed second time

Actual Result:

Assign card page is displayed briefly before Reviewing the request page after removing the American Express card feed and adding it again.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/0eb69dde-49cf-444d-afa8-b29226d997df
https://github.com/user-attachments/assets/e6ad23ba-3ea6-4a27-acbb-1dcf864a8028

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021889071972242545272
• Upwork Job ID: 1889071972242545272
• Last Price Increase: 2025-03-05
• Automatic offers:
• NJ-2020 | Contributor | 106133517

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[NJ-2020]

Proposal

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

Company cards-Assign card page is briefly displayed before Reviewing your request page

What is the root cause of that problem?

When we enabled the Company cards feature then we add new card this loading indicator check will be true

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

Line 42 in 7ef3254

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

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

Line 65 in 7ef3254

const isLoading = !isOffline && (!cardFeeds || (!!cardFeeds.isLoading && !cardsList));

Because after we add new feed card we're setting the isLoading property to true and while we do not have any data inside the cardsList(null) so the loading indicator will show up

App/src/libs/actions/CompanyCards.ts

Lines 66 to 76 in 7ef3254

	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`,
	value: feedType,
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
	value: {
	isLoading: true,

But when we remove the card feed, the BE returns cardsList value as an empty object instead of null value

So when we add new card feed and set the loading property to true, the loading indicator will not show up because if we check !{} it will return false which make this check loading indicator also false

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

Line 65 in 7ef3254

const isLoading = !isOffline && (!cardFeeds || (!!cardFeeds.isLoading && !cardsList));

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

Line 42 in 7ef3254

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

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

Instead of using !cardsList we can use the isEmptyObject method, so it will be !isEmptyObject(cardsList)

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

Line 65 in 7ef3254

const isLoading = !isOffline && (!cardFeeds || (!!cardFeeds.isLoading && !cardsList));

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)

[melvin-bot]

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

[strepanier03]

Will get to this in the morning.

[thelullabyy]

Proposal

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

Company cards-Assign card page is briefly displayed before Reviewing your request page

What is the root cause of that problem?

When the Company Cards feature is enabled, the loading indicator check will evaluate to true during the process of adding a new card

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

Line 44 in 33a03bf

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

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

Line 68 in 33a03bf

const isLoading = !isOffline && (!cardFeeds || (!!cardFeeds.isLoading && !cardsList));

When a new feed card is added, the isLoading property is set to true. Since there's no data in the cardsList yet (it's null), the loading indicator is displayed.

App/src/libs/actions/CompanyCards.ts

Lines 72 to 81 in 33a03bf

	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
	value: {
	isLoading: true,
	settings: {
	companyCards: {
	[feedType]: {
	errors: null,
	},

However, removing the card feed causes the backend to return an empty object for the cardsList instead of a null value

https://github.com/user-attachments/assets/59396e27-7e0f-4793-a100-cc20847f4678

When a new card feed is added, the loading indicator fails to appear. This is because the condition checking for the loading indicator evaluates !{} return false

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

Line 68 in 33a03bf

const isLoading = !isOffline && (!cardFeeds || (!!cardFeeds.isLoading && !cardsList));

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

Use method isEmptyObject isEmptyObject(cardsList) instead of !cardList

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)

[melvin-bot]

@strepanier03 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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