Billing Education Discount Application

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing52.tsx instead.

Usage

The file also exports billing52Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing52, billing52Demo } from "@/components/blocks/billing/billing52";

export default function Page() {
  return <Billing52 {...billing52Demo} />;
}

Props

Types

type EducationRole = "student" | "teacher" | "institution";

interface EducationTier {
  role: EducationRole;
  label: string;
  discountPercent: number;
}

Behavior notes

• Selecting a role is a real radiogroup of buttons, not a native select, so it recalculates the savings preview immediately and works with keyboard navigation and screen readers.
• The email field doesn't block submission if it's not a .edu address, it just shows an amber note underneath saying additional verification may be needed. Actual verification happens on your backend.
• The file upload button triggers a hidden native file input via a ref and click(), then shows the selected file's name next to the button. No file is actually uploaded anywhere, wire an onChange handler of your own if you need to send it to storage.
• Submitting sets a loading state for about 900ms, then replaces the entire form with a confirmation message. There's no callback prop for the submitted data, so lift state up or handle the POST inside your own onSubmit if you fork the component.
• Estimated savings are computed as planPrice times the selected tier's discountPercent, with the discounted price and original price both shown so the benefit is visible before submitting.

Frequently asked questions