shadcn.io is not affiliated with official shadcn/ui
Coupon Wallet Storefront Block for React Aria
A coupon wallet for a delicatessen: four coupons with their rules in words, an Add a code field, and a sample basket in the side cell where each applied coupon takes its discount off in whole cents and a second of one type is refused.
Installation
Overview
Let a shopper test a coupon before they check out, with this wallet for React with React Aria. A header names the page and says what Larder & Lane is. A hairline frame with a plus mark on each corner has two cells: a list of four coupons, each with its rule in words (a minimum spend, a category) and a live line that says the rule is met or how much more the basket needs, an Apply or Remove Button, and an Add a code field; and a sample basket of three lines with delivery, a slot for each type of discount (percentage, order, delivery) and the total. Pressing Apply tests the rule, and a second coupon of a type already applied is refused with the one to remove. An unknown code marks the field. Every amount is in whole cents. It's built from Button, Field, Input and Guides, with a CSS entrance only. For a coupon page, a cart's savings panel or an offers screen.
FAQ
What rules does a coupon have?
A minimum spend, either on the whole basket or on one category, and a type: a percentage off a category, a flat amount off the order, or free delivery. Only one coupon of each type can be applied at a time.
How do I add coupons and codes?
Add an entry to WALLET (shown in the list) or BY_CODE (only reachable by typing its code) and list the code in CODES. A coupon needs a kind, a min in cents and either percent or cents.
What does a refused coupon say?
A coupon whose minimum is not met says "Needs $5.50 more in the basket" (or in the category); one blocked by a coupon of the same type says to remove that one first. The reason shows in the status line, or under the code field for a code.
What stays local, and how do I wire it to a real cart?
The basket, the coupons and the codes are typed, and applying only changes this page. To wire it, validate codes and rules on your server against the real cart and use the response to fill the slots and total.