[HOLD for payment 2024-08-05] [Workspace Feeds] "Expensify Card" toggle crashes the app

[lanitochka17]

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.12-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Access New Expensify app
2. Sign into a valid account (Beta enabled)
3. Go to Profile > Create a new WS > More Features > Enable "Expensify Card" toggle

Expected Result:

Expensify Card page is open

Actual Result:

App Crashes

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6552259_1721882442900.App_Crashes_when_toggling_Expensify_Card_in_WS.mp4

Log (1).txt

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[lanitochka17]

@CortneyOfstad FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[tienifr]

Proposal

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

"Expensify Card" toggle crashes the app

What is the root cause of that problem?

The workspaceAccountID is initially empty string:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 95 in 098b5b5

const workspaceAccountID = (policy?.workspaceAccountID as string) ?? '';

causing the key here to be card__Expensify Card (with double _), that means the collection name is card_:

App/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

Line 96 in 098b5b5

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

Later when workspaceAccountID is returned by the BE, the key turned to be card_accountID_Expensify Card, that means the collection name is card_accountID.

The collections are different but still the same useOnyx causing Onyx to throw error.

useOnyx allows dynamic keys but only in case the collection is the same (i.e. key_id1 to key_id2 is ok but not key_id1_a to key_id2_a).

This happens with newly created workspace only when workspaceAccountID is unknown.

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

Remove the underscore after workspaceAccountID, to make sure the changes to workspaceAccountID does not lead to 2 different collections being subscribed (i.e. card in this case).

From id_Expensify Card to idExpensify Card

Alternative solutions

Change the key format to card_Expensify Card_id.

[CortneyOfstad]

Working on enabling the beta for my test account!

[CortneyOfstad]

Just added it, so it may take a bit!

[CortneyOfstad]

Was able to recreate! Attached is a screenshot of JS console and video:

[CortneyOfstad]

Reached out about #wave-collect here

[trjExpensify]

@allgandalf is going to look into this as part of the WF project. 👍

[allgandalf]

I will take a look at this 👍