[$250] Show connection status and last sync time for bank accounts and cards

[flaviadefaria]

Context

Currently, users visiting the bank/card connections section of the app can't quickly answer two key questions:

1. Is my connection working? (and if not, how do I fix it?)
2. How up to date is the data? (when was it last synced?)

This information is buried in detail screens, causing confusion — especially since banking connections are a major source of user support requests.

Proposed Changes

Bank Accounts:

Update the existing bank account statuses and RBRs in 1) NewDot Wallet, 2) NewDot Workflows, and 3) OldDot:

• Verified becomes Active - No tooltip or error message
• Setup becomes Incomplete - "Finish adding bank account", button = Finish
• Pending (remains the same) - "Please confirm test transactions", button = Confirm
• Verifying (remains the same) - Tooltip: "We're reviewing your documentation", (no button). Also, remove the existing RBR for this state, but keep the ability to access the RHP, as it is today.
• Locked (remains the same) - "This account requires attention", button = Unlock. Triggers the existing Concierge message that is sent when a user clicks on a locked account.

Mockup for Bank Account updates:

Status and description example in OD (for reference of what needs to be updated in Classic):

Credit Cards

• Add card status (Active, Inactive) and RBRs to the wallet, allowing fixing issues directly from the wallet page via the fix button when available.
     - Active
     - Inactive (direct feed - employee) - RBR = "Please ask an admin to fix this connection"; (no fix button).
     - Inactive (direct feed - admin) - RBR = "Please fix this connection in Company Cards ; (no fix button)
     - Inactive (personal card) - RBR = "Please fix this connection"; Clicking the existing fix button prompts the user to reconnect their cards

• Add the cards' last sync info (if a direct feed or personal card)

Mockup for credit card updates:

Slack thread: https://expensify.slack.com/archives/C02QSAC6BJ8/p1776067903986949

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022057449294182746030
• Upwork Job ID: 2057449294182746030
• Last Price Increase: 2026-05-21

[melvin-bot]

Current assignee @dubielzyk-expensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

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

[KJ21-ENG]

Proposal

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

Users need to see bank account and assigned card connection health directly on the Wallet page, including a clear status, relevant red-brick-road guidance/action, and last sync time for imported card feeds.

What is the root cause of that problem?

The data already exists, but the list rows do not surface it inline.

For bank accounts, Wallet renders PaymentMethodList and PaymentMethodListItem, but the row only treats SETUP, VERIFYING, and PENDING as a generic review state via isBankAccountPartiallySetup(), while OPEN has no visible "Active" status and LOCKED only gets a generic locked badge. Workspace Workflows has its own narrower getBadgeText() that only handles SETUP and LOCKED. So the same backend states are not mapped to the requested user-facing statuses/descriptions/actions.

For cards, Wallet already builds assigned card rows from ONYXKEYS.CARD_LIST and already detects broken feed state with useCardFeedErrors(), isCardConnectionBroken(), and isCardInactive(). Card detail pages already format card.lastScrape as "Last updated". However, PaymentMethodListItem only shows the card description plus an inactive/frozen badge, and does not include the inline "Active/Inactive", "Last synced", or per-role RBR copy/action requested for the Wallet list.

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

Add small status-mapping helpers and pass their output through the existing row model.

1. Add bank-account display helpers, likely near BankAccountUtils, that map accountData.state to:

   • OPEN -> status "Active", no RBR.
   • SETUP -> status "Incomplete", RBR "Finish adding bank account", action "Finish".
   • PENDING -> status "Pending", RBR "Please confirm test transactions", action "Confirm".
   • VERIFYING -> status "Verifying", tooltip "We're reviewing your documentation", no RBR/action.
   • LOCKED -> status "Locked", RBR "This account requires attention", action "Unlock".

2. Update PaymentMethodList.computeFilteredPaymentMethods() and PaymentMethodListItem so bank rows can render a status line/badge, optional helper/RBR copy, and optional inline action. Reuse the existing row press behavior:

   • "Finish" and "Confirm" navigate through the existing onBankAccountRowPressed flow.
   • "Unlock" preserves the existing pressLockedBankAccount(...) + Concierge navigation behavior.
   • VERIFYING should not set brickRoadIndicator, but the row remains pressable so users can still access the RHP as they can today.

3. Apply the same bank-account status helper in WorkspaceWorkflowsPage where the reimbursement bank account row currently has local getBadgeText() logic, so NewDot Wallet and Workflows stay consistent. OldDot should use the same state-to-copy mapping in its bank-account status rendering so "Verified" becomes "Active" there as well.

4. For assigned cards, add card display helpers, likely near CardUtils, that derive:

   • status: isCardInactive(card) or broken connection -> "Inactive"; otherwise "Active".
   • last sync: for direct feed or personal card, format card.lastScrape with the same date formatting already used by card detail screens; fallback to the existing "Never updated" copy.
   • RBR copy/action:
     • personal card + broken connection -> "Please fix this connection" with a "Fix" action that navigates to the existing personal card reconnect flow.
     • direct-feed company card + admin -> "Please fix this connection in Company Cards" linking to ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID).
     • direct-feed company card + employee -> "Please ask an admin to fix this connection", no action.

5. Extend PaymentMethodItem/ PaymentMethodListItem with optional status, last-sync, RBR text, and action props. Populate these in both company-card and personal-card branches of PaymentMethodList, using the existing policiesForAssignedCards, card.domainName, card.fundID, isPersonalCard(), isDirectFeed(), and current admin policy data to decide which card RBR variant applies.

6. Add translation keys for the new copy instead of hardcoding strings, and update focused tests/snapshots for bank-account state mapping and card row rendering.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• Wallet bank rows render "Active", "Incomplete", "Pending", "Verifying", and "Locked" from the existing CONST.BANK_ACCOUNT.STATE values.
• VERIFYING no longer produces a Wallet/Workflows RBR, while SETUP, PENDING, and LOCKED do.
• Workflows reimbursement bank account row uses the same state labels as Wallet.
• Assigned personal card with a broken connection shows "Inactive", last sync, RBR text, and a Fix action.
• Assigned direct-feed company card with a broken connection shows the admin vs employee RBR variants.
• Active direct-feed/personal cards show "Active" and last sync without RBR.

What alternative solutions did you explore? (Optional)

I would not duplicate a separate Wallet-only bank/card row component. The current issue is mostly missing display mapping in the existing PaymentMethodList pipeline, and reusing it keeps Wallet, Workflows, and card detail navigation behavior aligned.

[melvin-bot]

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