shadcn.io is not affiliated with official shadcn/ui
Startup Discount Application Billing Block for Solid
Four answers about a company (funding, age, team size and independence) checked against a rule table, with a verdict that names the tier and what it is worth, or the first rule that fails.
Installation
Overview
Tell an applicant which discount they qualify for before they apply, with this startup discount application for Solid with Ark UI. It opens with the account of Rootlark, an app-hosting platform, whose team plan is $240.00 a month. A hairline frame with a plus mark on each corner holds the form on one side: a Number Input for the funding raised, a Native Select for the company's age, a Number Input for the team size and a Checkbox for not being backed by a larger company. Under it a table of the four rules marks each one Met or Not met with a glyph and a word, beside your answer. In the next cell the verdict is always drawn: "Seed tier: 50 percent off for 12 months, worth about $1,440", or "Not eligible" with the first rule that fails in a sentence. The Shine Button applies for the named tier, the only colored control. On a phone the verdict follows the rules. It's built from Number Input, Native Select, Checkbox, Field, Shine Button and Guides, with a CSS entrance only. For billing settings, pricing pages and any program with eligibility rules. Example figures only.
FAQ
How do I change the rules and the tiers?
The limits are constants at the top: FUNDING_SEED, FUNDING_MAX, TEAM_MAX, the list price in LIST_CENTS and MONTHS. RULES lists each rule's label and the words that say what it needs, and metOf is the one place that decides if a rule is met. The tier comes from funding (half off up to $1,000,000, a quarter off up to $5,000,000) and the worth from the list price, so the rule table, the verdict and the amount stay in step. The figures are examples; use your own programme's.
How is the verdict chosen?
The rules are checked in order (funding, age, team size, independence) and the first one not met is named in the verdict, as in "Not eligible: funding is over $5,000,000." If all four are met the tier is Seed or Early by funding, and the worth is the list price times the months times the percent, shown to the nearest dollar. The verdict cell always has the same three lines, so the page does not change height when it flips.
What does Apply do, and what stays local?
It records the answers in the page and says "Recorded in this demo. Nobody reviews it." in a polite status message. No application is sent and no discount is created. In your app send the answers to your server, check them there (never trust the page's own verdict) and review them before you grant anything. The button stays focusable while the answers do not qualify and says why.
How do the number fields behave?
The funding field takes digits and accepts a typed amount with separators; the team size also has steppers. Both read what was typed into a whole number, and an empty field counts as zero. The verdict updates as you type.
Is it accessible?
Every field is named, the checkbox is labelled by its text and described by its note, and the rule table has a caption and a row header per rule. Met and Not met are words with a glyph. The verdict and the count of met rules are in the status message, which is polite. Amounts are kept whole in a right-to-left page.