[CFI][FE 3/7] Payment history: billing state badges on the table #101830

Sub-task of [CFI] Add a "View payment history" page with historical billing receipts and monthly user activity.

Goal

Every row in the payment history table carries a billing state badge.

Scope

• Derive the state per row. Paid, Cleared, and Failed come from the bill's own record. Refunded, Disputed, and Balance transfer do not — those are separate purchase records that reference the bill they modify, so the state has to be folded onto the parent row before it can be rendered.
• Build a shared helper (for example src/libs/PaymentHistoryUtils.ts) that returns a normalised row model: state, amount, tax flag, and the linked refund / dispute / transfer record. The table consumes it here and the details page consumes it in FE 4/7. Cover it with fixture-based unit tests.
• Do not let the badge state gate the row's actions. Classic shows only "View activity" on Failed rows and only "View receipt" on Cleared rows. Here, activity must be reachable on every row including Failed months, and Cleared rows show both. The buttons themselves arrive in FE 5/7 and FE 6/7 — this issue just must not build in the Classic restriction.

Acceptance criteria

• One badge per row, in the right colour, for all six states.
• A fully or partially refunded bill shows Refunded.
• A disputed bill shows Disputed.
• A balance transfer in either direction shows Balance transfer.
• Unit tests cover each state, including a bill with both a dispute and a refund attached.

Depends on

FE 2/7 (the table and the extended Onyx type).

Easy to get wrong

• Rendering the badge as a pre-formatted string. The same states carry dynamic dates, amounts, and emails on the details page (FE 4/7), so the model must expose the state plus its parameters, not a finished label.
• Missing the partial-refund case, which is a distinct variant from a full refund.