shadcn.io is not affiliated with official shadcn/ui
Trade-In Storefront Block for Radix UI
A phone trade-in graded by a checklist: four yes or no switches derive the grade and the credit from a typed base value, shown against the new phone's price.
Installation
Overview
Value an old device before the customer buys a new one, with this trade-in panel for React with Radix UI. A header introduces Relay Phones, a refurbished phone shop. In a hairline frame with a plus mark on each corner, four questions about the old phone sit at the start, each a Switch answered Yes or No: no cracks in the screen, battery health over 80 percent, the original box, a factory reset. The value cell at the end shows a drawn phone that gains a crack when the screen answer is No, the grade as a Badge, the credit in large figures, the new phone's price and what you pay after the credit. The grade is derived, not chosen: each No scores points (a cracked screen two, the others one) and the points set Excellent, Good, Fair or Poor. The credit starts from a typed base value and each No keeps a typed percent of what remains, in whole cents. The one Shine Button says "Noted in this demo". It's built from Switch, Badge, Shine Button and Guides, with a CSS entrance only. For refurbished electronics, buy-back pages and upgrade programmes.
FAQ
How do I set the values?
Edit BASE and NEW_PRICE in cents and QUESTIONS: each has a label, a hint, how many points a No adds to the grade and what percent of the credit it keeps. gradeOf turns the points into a grade (0 Excellent, 1 Good, 2 or 3 Fair, more Poor) and valueOf applies the percents one after another, rounding down to the cent each time.
Why can I not choose the grade?
Because the grade is a result of the answers, and the same answers should give the same grade for everyone. Change an answer and the grade, the credit and the price after credit change with it on the same press.
What does Apply the credit do?
In the page: the status line says "Noted in this demo" and the button reads Credit noted until you change an answer. Nothing is collected. In a real shop the credit is an estimate until the phone is inspected: say so, and create the trade-in request on your server.
Why are the questions switches?
Each is a plain yes or no, and a switch says which it is by position as well as by the word Yes or No beside it. The label is always phrased so that Yes is the good answer.