shadcn.io is not affiliated with official shadcn/ui
Abandoned Checkout Alert Billing Block for Ark UI
An unfinished checkout against today's price: the held quote and how many of its 30 days remain beside the current list price, and a toggle for resuming by the quote's last day or after it that works out the price at Payment and how long seats are held.
Installation
Overview
Bring someone back to a checkout without a countdown, with this saved-cart section for React with Ark UI. A compact header says the cart was saved at the quoted price. Inside a hairline frame with a plus mark on each corner, two cells share a hairline: the quote, with its last valid day, the plan, seats and billing interval, a large price and a Progress line for the days left, and today's list price for the same cart with the difference. A Toggle Group switches between resuming by the quote's last day and after it, and a Data List works out the price at Payment, how long the seats stay held and what is kept. The only Shine Button resumes at Payment. For checkout flows with saved quotes and seat reservations.
FAQ
How do I fill it from my billing system?
The constants at the top hold the date the demo treats as today, when the quote was made and when it runs out, the number of grace days the seats are held after it, and the CART with the plan, seats, quote and per-seat list price. The days left, the list total, the difference and the hold date are derived from them in whole cents, with UTC dates so every time zone agrees.
Why is there no countdown?
Because pressure is not information. The page states fixed dates and the days left once, and the toggle shows what each choice costs. Nothing ticks, so nothing needs a pause control, and the layout never moves.
What does the toggle change?
Resuming by 30 Oct keeps the quoted price and holds the seats through that day. Resuming after it uses the list price and holds the seats for seven more days, then releases them. The plan, seat count and billing details are kept in both cases.
What stays local?
Resuming writes the price you would pay at Payment in the status region; nothing is charged and no checkout is opened. In production, open your checkout session with the saved cart and re-quote it on the server, because the held price must be enforced there.