shadcn.io is not affiliated with official shadcn/ui
Gift Subscription Billing Block for Vue
Redeem a gift and see where it lands: a code checked for shape, the gift (3 months of Pro), a choice to start now or add it after your plan, and a timeline of the paid month and the gift with the new end date and next charge.
Installation
Overview
Tell someone with a gift exactly what it does to their plan, with this gift redemption section for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three bands. The first takes the gift code in an Input inside a Field, checked for shape only, and names the gift: 3 months of Pro. The second draws a timeline of two terms, the paid month and the gift, with the day each ends, and a row of three cells giving the gift's end, the next charge and the credit kept. The third asks when the gift should start: now, which turns your unused days into credit, or after your current plan. The timeline moves with the choice and says "Your payments pause while the gift runs: next charge 12 Feb 2027". The only Shine Button, "Redeem gift", sits in a foot with a status line. Built with Field, Input and Guides. For subscriptions that sell gifts, classes and memberships.
FAQ
How do I set the account and the gift?
ACCOUNT at the top of the file holds the day the current paid term ends and its monthly price in cents, GIFT_MONTHS the length of the gift and AS_OF the fixed date used as today. Both choices are derived from those: starting now begins the gift today and turns the unused days of the paid month into credit, adding it after begins it on the day the paid term ends.
How is the credit worked out?
It is the monthly price times the days left in the paid month, divided by the length of the month (31 here), rounded to the cent. With $18.00 and 25 days left it is $14.52, and it comes off the next charge. If your billing provider prorates differently, replace CREDIT with its figure.
What stays local, and how do I wire it for real?
The code is checked for shape only, and Redeem says "Redeemed. Nothing was saved." in the status line. In your app, send the code and the choice to your server in redeem, show a refused code in the problem slot and draw the timeline from the dates your server returns.
Is the timeline accessible?
The bars are drawn, hidden from assistive technology, and the same facts are in text: each bar's label has its end date, the three cells give the end, the next charge and the credit, and a sentence repeats the next charge. The timeline reads left to right on a right-to-left page, since it is a time scale.