feat: show connection status and last sync time for bank accounts and cards

[marufsharifi]

Explanation of Change

This PR adds connection health visibility for bank accounts and cards in the wallet/payment connection surfaces.

For bank accounts, it updates the displayed statuses and related RBR/action copy so users can see whether an account is Active, Incomplete, Pending, Verifying, or Locked, and take the appropriate existing action when needed.

For cards, it adds Active/Inactive connection status, last sync information for direct-feed and personal cards, and the issue-specific RBR/action behavior for broken personal card and company card connections.

Fixed Issues

$ #91300
PROPOSAL:

Tests

Precondition:

• Logged in to a walletConnectionStatus beta account.
• For Workflow Bank Account flows, use a Submit workspace.

Card Flows

1. Active personal card with sync date
   • Go to Settings > Wallet > Cards.
   • Verify the personal card shows Active and Synced [relative date].
2. Personal card never synced
   • Go to Settings > Wallet > Cards.
   • Verify the personal card shows Active and Never synced.
3. Inactive personal card
   • Go to Settings > Wallet > Cards.
   • Verify the personal card shows Inactive, Please fix this connection, and the Fix button.
4. Inactive company card as admin
   • Log in as a workspace admin.
   • Go to Settings > Wallet > Cards.
   • Verify the company card shows Inactive, Please fix this connection in company cards, and no Fix button.
5. Inactive company card as employee
   • Log in as a non-admin employee.
   • Go to Settings > Wallet > Cards.
   • Verify the company card shows Inactive, Please ask an admin to fix this connection, and no Fix button or company cards link.

Bank Account Flows

1. Active bank account
   • Go to Settings > Wallet > Bank accounts.
   • Verify the payment account shows Active with no RBR/action.
2. Incomplete bank account
   • Go to Settings > Wallet > Bank accounts.
   • Verify the payment account shows Incomplete, Finish adding bank account, and the Finish button.
3. Pending bank account
   • Go to Settings > Wallet > Bank accounts.
   • Verify the payment account shows Pending, Please confirm test transactions, and the Confirm button.
4. Verifying bank account
   • Go to Settings > Wallet > Bank accounts.
   • Verify the payment account shows Verifying with the tooltip We're reviewing your documentation and no RBR/action.
5. Locked bank account
   • Go to Settings > Wallet > Bank accounts.
   • Verify the payment account shows Locked, This account requires attention, and the Unlock button.

Workflow Bank Account Flows

1. Workspace payment account statuses
   • Go to Settings > Workspaces > [Workspace] > Workflows.
   • Verify the payment account section matches the expected state below:

State	Expected result
Active	Shows Active with no RBR/action.
Incomplete	Shows Incomplete, Finish adding bank account, and Finish.
Pending	Shows Pending, Please confirm test transactions, and Confirm.
Verifying	Shows Verifying with the tooltip We're reviewing your documentation and no RBR/action.
Locked	Shows Locked, This account requires attention, and Unlock.

• Verify that no errors appear in the JS console

Offline tests

Same as tests

QA Steps

Same as tests

// TODO: These must be filled out, or the issue title must include "[No QA]."

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• If new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Card Flows

One

Two

Three

Four

Five

Bank Account Flows

One

Two

Three

Four

Five

Workflow Bank Account Flows

One

Android: mWeb Chrome

Card Flows

One

Two

Three

Four

Five

Bank Account Flows

One

Two

Three

Four

Five

Workflow Bank Account Flows

One

iOS: Native

Card Flows

One

Two

Three

Four

Five

Bank Account Flows

One

Two

Three

Four

Five

Workflow Bank Account Flows

One

iOS: mWeb Safari

Card Flows

One

Two

Three

Four

Five

Bank Account Flows

One

Two

Three

Four

Five

Workflow Bank Account Flows

One

MacOS: Chrome / Safari

Card Flows

One

Two

Three

Four

Five

Bank Account Flows

One

Two

Three

Four

Screen.Recording.2026-06-20.at.12.06.17.AM.mov

Five

Workflow Bank Account Flows

One

[melvin-bot]

Hey, I noticed you changed src/languages/en.ts in a PR from a fork. For security reasons, translations are not generated automatically for PRs from forks.

If you want to automatically generate translations for other locales, an Expensify employee will have to:

1. Look at the code and make sure there are no malicious changes.
2. Run the Generate static translations GitHub workflow. If you have write access and the K2 extension, you can simply click: [this button]

Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running:

npx ts-node ./scripts/generateTranslations.ts --help

Typically, you'd want to translate only what you changed by running npx ts-node ./scripts/generateTranslations.ts --compare-ref main

[melvin-bot]

@mkhutornyi Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[mkhutornyi]

Are you able to test this domain flow? I am not sure we should remove this entire domain card grouping logic.

[mkhutornyi]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 987214eef9

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[MelvinBot]

Review

Thanks for the PR! The feature looks well-organized, but CI is currently red across 4 checks (typecheck, ESLint, test, checklist) and every failure traces back to this diff. These are all blocking and need to be addressed before review can proceed.

🔴 Must fix (blocking CI)

1. Translation keys only added to en.ts — all 9 other locales now fail typecheck + the translation unit test.
The new walletPage.cardLastSynced, cardNeverSynced, cardStatus, and bankAccountStatus keys were added to src/languages/en.ts but not to the other locale files. Because each locale is typed as TranslationDeepObject<typeof en>, de/es/fr/it/ja/nl/pl/pt-BR/zh-hans.ts all fail with TS2739: ... is missing the following properties, and TranslateTest › Does es locale have all the keys fails. You at minimum need to add the keys to es.ts; the rest are auto-translated, but the keys must exist.

2. paymentMethod.accountData?.state is not typed (typecheck + ESLint failure).
PaymentMethodList.tsx:491 — Property 'state' does not exist on type 'AccountData | AccountData' (TS2339), which also produces the no-unsafe-argument ESLint error at 491:109. PaymentMethod['accountData'] doesn't expose state the way the workspace bankAccountConnectedToWorkspace?.accountData did. You'll need to read state from the correct field/type.

3. onActionPress / onLinkPress signatures don't match TextLink/MenuItem props (typecheck).
PaymentMethodListItem.tsx:244 and :250 — (e: GestureResponderEvent | KeyboardEvent | undefined) => void and (e: GestureResponderEvent | KeyboardEvent) => void aren't assignable to the expected ((event: GestureResponderEvent | KeyboardEvent) => void) & ((event: GestureResponderEvent) => void). Align the handler param types in ConnectionStatusDetails with what the consuming components expect.

4. Nested ternaries (ESLint no-nested-ternary).

• PaymentMethodList.tsx:293 and :296 — the statusTone and message chained ternaries.
• WorkspaceWorkflowsPage.tsx:363 — the bankConnectionBrickRoadIndicator chain.

Extract these into helper functions or if/else blocks.

🟡 Worth a look (logic/design — please verify)

Details

• Last-sync / connection status now applied to Expensify cards. The new cardConnectionStatus and appendCardLastSync(...) are set in the Expensify-card branch at PaymentMethodList.tsx:388-389. Expensify cards typically have no lastScrape, so they'll render "Never synced" and an Active/Inactive pill. The PR description scopes last-sync to "direct-feed and personal cards" — is showing this on Expensify cards intended?

• Domain grouping for assigned cards was removed. The block that grouped admin-issued virtual cards by domainName (and aggregated errors/brickRoad onto the group) is gone, along with isGroupedCardDomain. This is a meaningful UX change for workspaces with many cards in one domain. The comment at PaymentMethodList.tsx:379 explains the intent — just confirming this de-grouping was approved in the proposal, since it affects every wallet with grouped domain cards, not only broken connections.

• InlineRBRMessage action fires regardless of write permission. In WorkspaceWorkflowsPage, the inline message's onActionPress={handleBankAccountPress} is rendered/usable even though the MenuItem onPress is gated behind canWritePayments. Consider gating the inline action the same way.

• getBankAccountConnectionStatus(undefined) returns "Incomplete / Finish adding bank account". Worth confirming an existing-but-stateless achAccount can't briefly hit the case undefined branch and show a misleading "finish adding" RBR.

Note on pushing a fix

I'm not the PR author or an assignee, so I can't push these fixes to the branch myself. The author can knock out items 1–4 to get CI green; if you'd like me to take a pass at them, add me as an assignee and reply with @MelvinBot fix the failing checks.

[mkhutornyi]

The layout is quite different from design. I think the PR is quite not ready yet.

[marufsharifi]

@mkhutornyi, I am checking all feedback in order. thanks.

[mkhutornyi]

I know it's hard to test all cases of bank account and card flow so in Tests steps, please add hardcoded mock Onyx data which has all cases shown in design. It should have 9 bank/card connections below:

• Bank account: Verified, Setup, Pending, Verifying, Locked
• Card: Active, Inactive (direct feed - employee), Inactive (direct feed - admin), Inactive (personal card)

[mkhutornyi]

How about adding beta until this feature is fully QA'ed by internal team and QA? So non-beta users still see old UI.
This way, we can avoid revert and fix follow-up issues they'll report.

[github-actions]

🚧 Gonals has triggered a test Expensify/App build. You can view the workflow run here.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #93852.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-c0f3cc85c6c-fd75b89-cb96e92faf2a3fd6f60fe712b027c7a6665e6feb/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-c0f3cc8-fd75b89-cae76280d03bbede296ef6cb99a8df1eaf3c35d6/index.html

Web 🕸️
https://93852.pr-testing.expensify.com

---

👀 View the workflow run that generated this build 👀

[OSBotify]

🚀 Deployed to staging by https://github.com/Gonals in version: 9.4.46-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

[MelvinBot]

Help site review — changes required ✅

I reviewed the changes in this PR against the help articles under docs/articles. This PR surfaces connection status + last sync for bank accounts and cards in the Wallet/payment surfaces, and the closest customer-facing article — Manage Personal Cards — didn't yet describe the new Active/Inactive status or Synced/Never synced indicators. So a docs update is warranted.

Draft help-site PR: #97389 (HelpDot, assigned to you, staged as a draft)

What it documents in the Manage Personal Cards article:

• Personal cards in Wallet > Cards now show Active/Inactive and last sync (Synced [date] / Never synced).
• Inactive personal cards show Please fix this connection with a Fix button.
• FAQ entry for company cards showing Inactive in the Wallet (Please fix this connection in company cards for admins / Please ask an admin to fix this connection for non-admins).

Scope notes & why it's a draft

• Beta-gated: The feature is behind isBetaEnabled(CONST.BETAS.WALLET_CONNECTION_STATUS), so it isn't visible to all users yet. The docs PR is intentionally a draft — it should merge when the feature reaches GA so the help site doesn't describe UI most users can't see.
• Bank-account statuses not included: The feature also adds Active/Incomplete/Pending/Verifying/Locked labels (with messages like Finish adding bank account, Please confirm test transactions, We're reviewing your documentation, This account requires attention) to Wallet > Bank accounts and Workspaces > [Workspace] > Workflows. These map to the existing Connect / Validate / Unlock a Business Bank Account articles and were left out to keep scope tight and avoid documenting still-evolving beta copy across multiple files. I can expand into those on request.
• All copy in the docs PR was taken verbatim from this PR's src/languages/en.ts additions.

---

@marufsharifi, please review the linked help site PR and confirm it reflects the current behavior. Then mark the linked help site PR Ready for review

[izarutskaya]

@marufsharifi I am not sure we can check all flows from this PR, especially Card Flows. Could you please check this internally? Let me know if I missed anything. Thank you in advance
Tested some flow

[flaviadefaria]

@izarutskaya were you able to check the bank account flows?

[marcaaron]

Should we ship this to production? It looks like it wasn't tested on staging at all. 🤔

[OSBotify]

🚀 Deployed to production by https://github.com/marcaaron in version: 9.4.46-10 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

• Android

[joekaufmanexpensify]

BUG: broken company card hyperlink in wallet doesn't link to specific broken card feed

Prerequisite

Have a workspace with multiple card feeds. One of them is broken.

Steps

1. Go to the wallet page of an admin account with an assigned card on the broken feed.
2. Tap the company cards hyperlink.

Expected behavior

We should bring you to the company cards page in the workspace with the broken feed and land you specifically on the broken feed.

Actual behavior

You're directed to the Company Cards page on the Workspace with a broken feed, but land on whatever card feed you accessed most recently, which may not be the broken one.

Wallet page

Where I landed

Where I should have landed

[joekaufmanexpensify]

BUG: non-U.S. business bank account shows Pending for partially set up account

Steps

1. Begin setting up a non-US business bank account (GBP, etc).
2. Leave it in a partially set up state, ie do not finish filling out the entire form.
3. Go to the Wallet page.

Expected behavior

We say the account is incomplete, with the option to complete setup.

Actual behavior

We say the account is pending with an option to confirm test transactions. However, there is no test transaction step for non-U.S. business bank accounts that only applies to U.S. Business Bank accounts.

I think the issue here is that non-U.S. business bank accounts are put in the PENDING state on the backend when they're being set up (which differs from U.S. accounts). This has come up before, cc @madmax330

2026-08-03_12-11-22.mp4

[madmax330]

I think the issue here is that non-U.S. business bank accounts are put in the PENDING state on the backend when they're being set up (which differs from U.S. accounts).

Yeah, most likely

[joekaufmanexpensify]

BUG: we aren't showing new bank account statuses on workspace > workflows.

Steps:

1. Begin setting up a U.S. business bank account. Leave it in the partially set-up state.
2. Go to Workspaces > open a workspace > Workflows.
3. Tap add bank account.
4. Select the partially set up account.

Expected behavior

The account is shown in the new style with an incomplete badge.

Actual behavior

The count is shown in the previous style, with the action-required badge. Note: basing this on the tests in the OP of the PR, where we list that these badges should be shown on the Workflows page.

Wallet page

Workflows page

[marufsharifi]

@joekaufmanexpensify, just wanted to confirm—would you like me to open a follow-up PRs to address the bug you found? Thanks!

cc @trjExpensify @Gonals

[mkhutornyi]

@joekaufmanexpensify do you mind creating (or asking Melvin to create) issues per each bug you found and assign @marufsharifi and me for tracking?

[joekaufmanexpensify]

@joekaufmanexpensify, just wanted to confirm—would you like me to open a follow-up PRs to address the bug you found? Thanks!

Yep. I don't think we should consider this issue done until these other bugs are fixed. These are all things I expect QA would have found had they tested before this went to production.

@joekaufmanexpensify do you mind creating (or asking Melvin to create) issues per each bug you found and assign @marufsharifi and me for tracking?

Thoughts on just using a bulleted checklist on the original issue in a comment, with each item linking back to one of the bug reports? That way, each PR links back to the original issue, making it clear that it's associated with it.

Not super passionate though. If it's easier for you guys to have separate issues, I'm fine with that and can have Melvin create them.

[marufsharifi]

I'm happy to open the PR and link it to the relevant issue comment in this PR. @mkhutornyi agree?

[mkhutornyi]

I'm happy to open the PR and link it to the relevant issue comment in this PR. @mkhutornyi agree?

yes

[joekaufmanexpensify]

Great, thanks, appreciate both of your help. I aggregated the bugs I found here.