shadcn.io is not affiliated with official shadcn/ui
Referral Code Onboarding Block for Svelte
A setup panel that loads with a friend's code applied, shows what it takes off the first invoice, and lets a different code be tried, with copyable sample codes.
Installation
Overview
Let a new customer use a friend's code and see what it is worth, with this referral step for Svelte with Ark UI. It is a setup panel of Nudgewold, a meal-planning app, ruled by Guides in bands. It loads referred: the code MEAL20 has arrived from Torquil's invite link, shown as a chip with what it gives, and a "Use a different code" link. Under it, three sample codes with a Copy button each, because a demo cannot be tried by guessing; two figures show the first invoice now and the full price struck; one sentence says what the code saves ("20% off for three months saves $7.60 a month, $22.80 in all."). A different code is typed in an Input and sent with Apply: MEAL20 is 20% off three months, FRIEND is the first month free, OLDCODE ended on 30 September, and anything else is not a code we know, each said in words under the field. Continue is the one Shine Button.
FAQ
How do I add or change codes?
Edit CODES. Each has a name, what it gives (as the chip says it), the percent it takes off, how many invoices it applies to and an ended day (ISO) for a code that no longer works. PLAN is the plan's price in cents; every amount is worked out from it in whole cents, so the figures always add up.
How does the demo know OLDCODE has ended?
Its ended day is compared with a typed AS_OF date, never with the clock, so it reads the same for everyone. The answer says the day ("That code ended on 30 Sep.") and the field keeps what was typed and keeps focus.
What does Copy do?
It puts the code on the real clipboard and says so ("Copied MEAL20. Paste it in the field."). If the browser refuses, it says "Copy blocked. Select the code by hand." instead. The sample codes are fiction for trying the demo; in your app drop that band.
What are the panel's states, and do they move anything?
Referred (the invite's code applied), typed (a code you applied), and none (the field and Apply). The field and the applied chip share one cell, so changing between them changes nothing else. Removing a code, with the chip's X or "Use a different code", puts focus in the field.
What if a code is typed but not applied?
Continue does not guess: it says "Press Apply to use MEAL20, or clear the field." and puts focus on Apply. With a code applied, or with the field empty and no code, it simply saves.
What stays local in the demo, and how do I wire it?
Everything: codes are checked against the typed list in the tab, nothing is sent, and no invite link is read. In your app check the code on your server where apply says so, take a referral from the invite link's address, and keep the code on the new account when Continue is pressed.