[$250] mWeb - AMEX Cards - Refreshing the card details page results in "hmm not here" 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.1.10-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): slottwo1+zzh@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings -company cards
3. Create a commercial and direct feed card via American express
4. Assign a card selecting first card from the list
5. Open the card
6. Refresh the page

Expected Result:

Refreshing the card details page must not direct to hmm not here page.

Actual Result:

Refreshing the card details page directed to hmm not here 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

Bug6763769_1741338641376.Screenrecorder-2025-03-07-14-34-49-367.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021898851383209732131
• Upwork Job ID: 1898851383209732131
• Last Price Increase: 2025-03-09

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)

[jliexpensify]

@jayeshmangwani I'm not sure if we have dummy AMEX credentials (asking internally), but popped the External label to see if a C+ could repro. It seems like an issue though.

[jliexpensify]

@mountiny - I was asking Robert about AMEX testing credentials and he mentioned you've worked with external agencies to test these flows. Are you about to help determine if this is an issue and who it should be assigned to? Thanks!

[mountiny]

@VickyStash @koko57 would you be able to take this one on?

[koko57]

@mountiny I can take this one 🙋🏻‍♀️

[koko57]

looks like after the refresh this condition is true, so the not found page is rendered

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

Lines 79 to 81 in b61e969

	if (!card && !isLoadingOnyxValue(allBankCardsMetadata)) {
	return <NotFoundPage />;
	}

when we go back and enter the page again it's displayed correctly (all details visible)

[koko57]

Om, so I've got the route cause - when we navigate to the page the param is from the argument passed to Navigation.navigate so it looks like this: oauth.americanexpressfdx.com 1001. After we refresh the page the param is taken from the URL and looks like this: oauth.americanexpressfdx.com%201001 -> space is replaced with %20 just like it's done in URLs. Because of this change when we're querying for workspace cardList we have cards_19204624_oauth.americanexpressfdx.com%201001 instead of cards_19204624_oauth.americanexpressfdx.com 1001 -> cardList (here as allBankCards) is undefined so the card is undefined and we get to the condition I mentioned earlier.

Solution:
Let's get the bank param just like we do in XeroMapTrackingCategoryConfigurationPage

App/src/pages/workspace/accounting/xero/XeroMapTrackingCategoryConfigurationPage.tsx

Line 31 in b428efa

const categoryName = decodeURIComponent(params?.categoryName ?? '');

• the %20 will be replaced by space for every bank name with spaces, it will fix the value from URL after refresh and it won't affect the correct value with space when we navigate to the page.