Payout Status
Where a payout is and when the money lands. "Expected Thursday" is the thing people open this to find out; the status word alone never answers it.
src/components/ui/payout-status.tsxAbout
From the component's own source, where it was written.
A payout from initiation to arrival.
"Paid" and "arrived" are different events and the gap between them is days, not seconds. A payout marked complete the moment it leaves is the reason support queues fill with "where is my money" — so the estimated arrival is part of the component, not an optional extra.
A returned payout is distinct from a failed one: the money left, bounced, and came back. The remedy differs (fix the bank details, not the balance), and collapsing the two sends people to the wrong place.
Install
npx astralyx-ui add payout-status
Usage
import { PayoutStatus } from '@/components/ui/payout-status'
<PayoutStatus amount={128_400} state="in_transit" expectedAt={date} />Composer
Change the props and the source below follows.
- Initiated
- In progressIn transit
- 3Arrived
Expected ·
<PayoutStatus
amount={128400}
state="in_transit"
destination="Monzo ••0091"
expectedAt={expected}
/>Examples
Every state
<PayoutStatus amount={128_40} state="paid" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
PayoutStatus
A payout from initiation to arrival.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| amount | number | required | Minor units, matching LedgerTable, MoneyInput and Cart. |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| state | PayoutState | required | 'pending' | 'in_transit' | 'paid' | 'failed' | 'returned' | 'cancelled'. |
| destination | ReactNode | — | — |
| initiatedAt | Date | — | — |
| expectedAt | Date | — | The arrival date. Shown prominently for anything not yet paid, because it is the only question being asked. |
| arrivedAt | Date | — | — |
| now | Date | — | — |
| reference | ReactNode | — | — |
| failureReason | ReactNode | — | Shown for failed and returned payouts. A failure with no stated reason generates a support ticket every time. |
Types
| Type | Definition | Description |
|---|---|---|
PayoutState | | 'pending' | 'in_transit' | 'paid' | 'failed' | 'returned' | 'cancelled' | — |