shadcn.io is not affiliated with official shadcn/ui
Referral Payout Status Billing Block for Ark UI
Referral earnings on the way to a payout: a ring for the balance against the $50.00 threshold, a number field for friends referred a week that works out the day you reach it, a four-week strip of payout days and a payout button that is unavailable until the threshold.
Installation
Overview
Tell customers when their referral money arrives, with this payout status section for React with Ark UI. Two cells share hairlines. The first has a Circular Progress ring for the balance ($31.50 of $50.00) and a Number Input, "Friends you refer a week", that sets a pace at $6.00 a friend; the second draws four weeks as a strip of days, marks the payout days (the 1st and the 15th), rings the day the balance reaches the threshold and fills the payout that day leads to, with a sentence: "You reach $50.00 on Oct 29. Paid Nov 1, arriving 3 to 5 business days later." A band under the cells shows the read-only destination ("Bank account ending 1290") with an Edit link, and the Shine Button, "Request payout", which stays unavailable under the threshold and says why when pressed. Guides draw the frame. For affiliate networks, marketplaces and any product that pays out in batches.
FAQ
How do I change the threshold, the balance and the payout days?
Edit THRESHOLD, BALANCE, PER_FRIEND and AS_OF at the top of the file, and isPayoutDay for the schedule (the 1st and the 15th). The reach date is AS_OF plus the days the remaining amount takes at the typed pace, and the payout is the first payout day after it. The strip shows four weeks from STRIP_START.
What does the number field change?
It changes the pace: friends a week times $6.00. At 2 a week, $18.50 takes 11 days, so the threshold is reached on Oct 29 and the payout is on Nov 1. At 0 the sentence asks for a pace instead of inventing a date. The field takes digits only and works with the arrow keys and the step buttons;
Why is Request payout unavailable?
The balance ($31.50) is under the $50.00 threshold, so the button is marked unavailable and stays focusable. Pressing it explains the gap ($18.50 to go) in the status line instead of doing nothing. With a balance at or above the threshold, remove aria-disabled and call your payout endpoint from the handler.
What stays local?
No payout is requested and nothing is saved; the numbers and dates are typed examples. The destination is shown as its last four digits only and the Edit link goes to #: point it at your payout account page.
How is the strip read by a screen reader?
The strip of days is drawn for the eye and hidden from assistive technology. The same information is in the sentence under it, which is always present, and in the legend line that names what underline, ring and fill mean. The ring has a text name ("$31.50 of $50.00").