Billing Referral Payout Status
A payout status card for referral or affiliate partners, showing a status badge, the pending payout amount, an estimated payout date, and the payout destination. Switches to a failed-payout alert with an update-payment-method link when the status is failed.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-referral-payout-status.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing112.tsx instead.
Usage
The file also exports billing112Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing112, billing112Demo } from "@/components/blocks/billing/billing112"; export default function Page() { return <Billing112 {...billing112Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Payout status" | Card heading. |
| description | string | none | Optional one-line note under the heading. |
| status | "pending" | "processing" | "paid" | "failed" | "pending" | Drives the badge color and label, and whether the failed-payout alert renders. |
| pendingAmount | string | none | Pending payout total, already formatted as currency. |
| estimatedPayoutDate | string | none | Optional estimated payout date; the row is omitted when not passed. |
| payoutDestination | string | none | Where the payout will land, e.g. "Bank account ****4821". |
| minimumThreshold | string | none | Optional minimum payout note shown under the pending amount. |
| updatePaymentHref | string | "#" | Destination for the update-payment-method link shown when status is failed. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- status is a fixed 4-value union (pending, processing, paid, failed) mapped to badge colors in STATUS_STYLES; add a new status by extending both the type and that map.
- The failed-payout alert with its update-payment-method link only renders when status is "failed"; every other status shows just the badge and details.
- This is a non-client component. The status is passed in as a prop rather than tracked as local state, so a real status change requires the caller to re-fetch and re-render with a new status value.
- estimatedPayoutDate only renders its row when passed, so an in-progress payout with no known date can omit it cleanly.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.