shadcn.io is not affiliated with official shadcn/ui
Pending Verification Billing Block for React
A review-in-progress page that counts business days: a strip from the submission to the due date with the weekend hatched and skipped, day 3 of 5 marked, and what the account can still do while it waits.
Installation
Overview
Tell a customer exactly how long a billing review will take, with this pending verification page for React with Base UI. It's the screen Bargewell, a freight booking platform, shows while it checks a company's billing details: the page's side rails and one band frame it, a clock mark and a headline say the review is under way, and one sentence gives the due date. A strip of eight cells on shared hairlines holds the days from the submission to the day the review is due; the weekend cells are hatched and don't count, today is filled and every cell says which review day it is, all worked out from two typed ISO dates with UTC arithmetic. Under it, "What you can still do" lists invoices and plan changes as allowed and payouts as held, each with an outline Badge, from one typed rule table. The Shine Button is a link, "Back to billing", the only colored control. For marketplaces, payout platforms and any service that reviews an account before it pays out.
FAQ
What stays in the page, and how do I wire it for real?
Everything is typed and nothing is being reviewed. The submission date, the "today" date, the number of review days and the rules are constants at the top of the file, and the page reads no clock. To wire it, pass in the submission date from your server, set AS_OF to the current date there, and fill RULES from the account's real restrictions. Point the link at your billing route.
How are the business days counted?
The strip starts on the submission day and adds one calendar day at a time, counting Monday to Friday until it has the five review days, so a review submitted on a Monday is due the next Monday. Weekend cells are drawn but not numbered. "Day 3 of 5" is the number of the cell that matches AS_OF, and the due date is the last cell. Public holidays are not skipped; add them to the weekend check if your review does.
Where does the allowed and held list come from?
From RULES, one entry per thing the account can do, with a flag for whether it is open during the review. The count in the heading, "2 of 3 allowed", and each row's word and icon are derived from the flags, so editing one entry updates all three. The state is always a word, never only a color.
Is the strip accessible?
It is an ordered list. Each cell has the date as a real time, and a hidden sentence says what the day is, for example "Thu 15 Oct, review day 3 of 5, today" or "Sat 17 Oct, weekend, not counted". The visible words under the dates are decoration for sighted readers, and the hatching is backed by the word "Off".