[$250] Unassigning company card offline removes it optimistically instead of making it strike through

[nlemma]

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.2.88-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176706/test-cases/41236848
Email or phone of affected tester (no customers): applausetester+ccardfeed@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: macOS 26.1
App Component: Workspace Settings

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create a workspace and assign a company card
3. Go offline
4. Unassign a card

Expected Result:

The unassigned card gets shown as strike through or greyed out signaling a pending action like in the other pages for offline behavior.

Actual Result:

The unassigned card gets removed optimistically.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

2025-12-30.13-12-43.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022008194600337682401
• Upwork Job ID: 2008194600337682401
• Last Price Increase: 2026-01-05

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[nlemma]

@m-natarajan tagging you to assign the issue.

[ryntgh]

Proposal

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

Unassigning company card offline removes it optimistically instead of making it strike through

What is the root cause of that problem?

In unassignWorkspaceCompanyCard, the optimistic data sets the card to null in the workspace cards list, which removes it immediately from the UI

App/src/libs/actions/CompanyCards.ts

Lines 414 to 421 in a1fa8dc

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
	value: {
	[cardID]: null,
	},
	},

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

Keep the card in the workspace cards list with a pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE instead of setting it to null in the optimistic data. Only remove it in the success data

            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
                value: {
                    [cardID]: {
                        ...card,
                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                    },
                },
            },

Or conditionally handle optimistic data based on network state

    const isOffline = NetworkStore.isOffline();

            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
                value: {
                    [cardID]: isOffline
                        ? {
                              ...card,
                              pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                          }
                        : null,
                },
            },

App/src/libs/actions/CompanyCards.ts

Lines 415 to 421 in a1fa8dc

	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
	value: {
	[cardID]: null,
	},
	},

            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
                value: {
                    [cardID]: {
                        ...card,
                        pendingAction: null,
                        errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                    },
                },
            },

App/src/libs/actions/CompanyCards.ts

Lines 451 to 460 in a1fa8dc

	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
	value: {
	[cardID]: {
	pendingAction: null,
	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
	},
	},
	},

We can also add logic to show loading indicator when there are pending unassign requests on WorkspaceCompanyCardsTable to prevent it to disappear briefly

    const hasCardsWithPendingDelete = !isOffline && Object.values(assignedCards ?? {}).some((card) => card?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
    const isLoadingCards = cardFeedType === 'directFeed' ? selectedFeed?.accountList === undefined || hasCardsWithPendingDelete : isLoadingOnyxValue(cardListMetadata) || cardList === undefined || hasCardsWithPendingDelete;

    // Or add the check on `isLoadingPage` 
    const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata) || hasCardsWithPendingDelete);
    const showCards = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed && !isLoadingFeed && !hasCardsWithPendingDelete;

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx

Lines 74 to 75 in a1fa8dc

	const isLoadingCards = cardFeedType === 'directFeed' ? selectedFeed?.accountList === undefined : isLoadingOnyxValue(cardListMetadata) || cardList === undefined;
	const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata));

What alternative solutions did you explore? (Optional)

NA

[daledah]

Proposal

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

The unassigned card gets removed optimistically.

What is the root cause of that problem?

we set cardID as null here that will remove the card in UI

App/src/libs/actions/CompanyCards.ts

Lines 414 to 421 in a1fa8dc

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
	value: {
	[cardID]: null,
	},
	},

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

1. We should set the pendingAction as delete in optimistic data then reset it in failure data and success data

            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
                value: {
                    [cardID]: {
                        ...card,
                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                    },
                },
            },

App/src/libs/actions/CompanyCards.ts

Lines 414 to 421 in a1fa8dc

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${domainOrWorkspaceAccountID}_${bankName}`,
	value: {
	[cardID]: null,
	},
	},

2. Because we don't set cardID value as null so if the user navigate to the card detail page by URL, it still shows the full access and the user can unassign card again. So we need to disable it or we can show the not found page when card is pending delete

bug.mov

    const isCardPendingDelete = card?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
    ...
    <MenuItemWithTopDescription
        description={translate('workspace.moreFeatures.companyCards.cardName')}
        disabled={isCardPendingDelete}
        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_EDIT_CARD_NAME.getRoute(policyID, cardID, feedName))}
    />
    ...
    <MenuItem
        icon={expensifyIcons.RemoveMembers}
        title={translate('workspace.moreFeatures.companyCards.unassignCard')}
        style={styles.mb1}
        disabled={isCardPendingDelete}
        onPress={() => setIsUnassignModalVisible(true)}
    />

Note: We should do the same with other places and other logic that will need to check if card is not pending delete

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.

[m-natarajan]

Discussed about this issue here

[melvin-bot]

@carlosmiceli, @dannymcclain, @zanyrenney, @dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[dylanexpensify]

I think we should follow the same patter -> showing grey + strike through, then actioned when back online