shadcn.io is not affiliated with official shadcn/ui
Exchange Request Storefront Block for Vue
A size exchange form for a denim shop: pick why it did not fit, see the sizes the reason recommends in a waist and length grid, and read the price difference worked out in cents before requesting.
Installation
Overview
Let a shopper swap a size without writing to support, with this exchange request for Vue with Ark UI. A header names the shop and the task. In a hairline frame with a plus mark on each corner, the start cell shows the jean you bought as a drawn tile with its size, price and the days left to exchange, counted from a typed date, and four reasons as native radios: too small, too large, too long, not what you expected. The side cell is a grid of twelve waist and length sizes: the reason you pick recommends the next ones by a typed fit rule, a sold-out size is disabled and named, and the price difference is derived in whole cents and said as a refund, an amount to pay or nothing to pay. Request exchange is the one Shine Button and stays inert until a size is chosen. It's built from Button, Shine Button and Guides, with a CSS entrance only. For a returns portal, an order page or a help center.
FAQ
How do I use my own sizes and prices?
Edit SIZES (waist, leg, stock, a back-in-stock date and pairs left), priceOf for the price rules and suggestsOf for the fit rule of each reason. The jean you bought is OWN_WAIST, OWN_LEG and OWN_ID. All money is in whole cents and the day count comes from the typed AS_OF and DELIVERED dates, never the clock.
How does a reason recommend a size?
Too small suggests every in-stock size with a larger waist and the same leg, too large the smaller waists, too long the shorter legs at your waist, and Not what I expected suggests nothing so any size in stock can be chosen. Changing the reason clears your pick so a stale size never stays selected.
How is the price difference worked out?
The price of the chosen size minus what was paid, in cents. A negative result reads Refund, a positive one Pay more, and zero Nothing to pay. Nothing is charged or refunded here.
What stays local, and how do I wire it?
All of it. The sizes are a typed array and Request exchange only sets the status line to Exchange noted in this demo. To wire it, post the order, the reason and the size id to your returns API, and show its reply in the same status line.