shadcn.io is not affiliated with official shadcn/ui
Coupon Code Billing Block for Vue
A discount code that changes future invoices: type a code, see its kind (repeating, once or every invoice), and read the next six invoices with the list price, the discount and the total, plus what the code saves.
Installation
Overview
Show what a code does to the bill before it is applied, with this coupon section for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a code field and a grid of invoices. The Input, inside a Field, recognises three typed codes and names the kind of each in words: 30% off repeating for 3 invoices, $10 off the next invoice once, or 15% off every invoice. An unknown code gets a clear problem under the field that lists the ones to try. Below, the next six invoices are hairline cells, two across on a phone and three from sm, each with its date, the total, the list price and either "Code takes off $14.70" or "Full price", and a count in the band's heading sums the savings. The only Shine Button follows the code ("Apply WELCOME30"). Built with Field, Input and Guides. For webinar, email and other subscription tools that hand out codes.
FAQ
Which codes does it know, and how do I add yours?
CODES at the top of the file holds the three sample codes: WELCOME30, ONCE10 and LOYAL15. Each has a kind sentence, a percent or a flat cents amount and invoices, how many it covers (0 means every one). The grid, the savings and the button's label are derived from the chosen code, so adding a code is adding an entry.
How are the six invoices worked out?
PLAN holds the list price in cents and DATES the six invoice days. For each invoice the code gives an amount off: a percent of the list price rounded to the cent, or a flat amount, and nothing once the code's invoices have run out. The savings are the sum of those amounts. Dates are fixed ISO strings, so the page reads the same on every day.
What stays local, and how do I wire it for real?
Apply only records the code in local state and says "Applied. Nothing was charged." in the status line. In your app, send the code to your billing provider in apply, show its answer for an unknown, expired or used code in the same problem slot, and take the invoice preview from the provider's upcoming-invoice call instead of the typed list.