[Due for payment 2026-09-04] Add confirmation for Expensify Card "Settle balance"

[joekaufmanexpensify]

Coming from this Slack thread, let's add a confirmation step before initiating an off-cycle Expensify Card balance settlement in New Expensify.

Details

• Today, clicking "Settle Balance" immediately initiates settlement of the current balance, with no confirmation step. Users have accidentally clicked this (see examples here and here.)
• To prevent accidental settlements, let's add a confirmation modal when "Settle Balance" is clicked, before the action is initiated. See attached screenshot for an example of our existing center-state modal pattern.
• Modal copy:
  • Title: Settle balance?
  • Body: This will settle your current balance in the next business day. Once successful, the amount will be added back to your remaining limit.
  • Confirm button: Settle balance
  • Cancel button: Cancel
• Button color: recommend danger (red) for the confirm button, consistent with how the codebase already treats other high-consequence/irreversible actions (freezing a card, revoking access, removing a member).
• This is scoped to New Expensify only; no changes needed in Expensify Classic.

Current settle balance button

Example of our confirmation modal pattern

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022081786248397642684
• Upwork Job ID: 2081786248397642684
• Last Price Increase: 2026-07-27

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[joekaufmanexpensify]

@shawnborton I don't think we need any mocks here, so going ahead with soliciting proposals. let me know if you disagree though 👍

[joekaufmanexpensify]

@MelvinBot could you please submit a proposal for this using Expensify's normal proposal guidelines?

[MelvinBot]

Proposal

What is the root cause of that problem?

The "Settle balance" button fires the settlement command immediately on press, with no confirmation step. In WorkspaceCardsListLabel.tsx:124-126 the handler calls queueExpensifyCardForBilling(...) directly:

const handleSettleBalanceButtonClick = () => {
    queueExpensifyCardForBilling(CONST.COUNTRY.US, defaultFundID);
};

That action (Card.ts:1698-1705) writes QUEUE_EXPENSIFY_CARD_FOR_BILLING with no intermediate guard. Because a single click starts an irreversible, high-consequence action, users accidentally trigger off-cycle settlements.

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

Gate the settlement behind a ConfirmModal, mirroring the existing high-consequence pattern used for freezing a card (ExpensifyCardPage/index.tsx:704-715).

In WorkspaceCardsListLabel.tsx:

1. Add an isSettleBalanceModalVisible state (useState(false)).
2. Change handleSettleBalanceButtonClick to only open the modal (setIsSettleBalanceModalVisible(true)) — it no longer calls the action.
3. Render a ConfirmModal whose onConfirm runs queueExpensifyCardForBilling(CONST.COUNTRY.US, defaultFundID) and then closes the modal, and whose onCancel/onBackdropPress just closes it, using props:
   • title → Settle balance?
   • prompt → This will settle your current balance in the next business day. Once successful, the amount will be added back to your remaining limit.
   • confirmText → Settle balance
   • cancelText → common.cancel
   • danger (red confirm button, per the issue and consistent with freeze/revoke/remove)
   • isVisible={isSettleBalanceModalVisible}

Add the new copy keys in the workspace.expensifyCard block next to the existing settleBalance key (en.ts:5990) — e.g. settleBalanceConfirmationTitle and settleBalanceConfirmationPrompt — and mirror them across the other locale files (es, fr, it, ja, nl, pl, pt-BR, zh-hans). The existing settleBalance string is reused for the confirm button text. This is New Expensify only; no Classic changes.

What alternative solutions did you explore? (Optional)

The hook-based useConfirmModal().showConfirmModal({...}) variant (used when removing a member) would also work and avoids adding local state. The inline <ConfirmModal> JSX is recommended here because it's the closer structural match to the freeze-card flow on the same kind of surface.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/96998#issuecomment-5073004221) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[shawnborton]

Sounds good to me 👍

[melvin-bot]

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