Billing Partner Discount

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, 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/billing84.tsx instead.

Usage

The file also exports billing84Demo, 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 { Billing84, billing84Demo } from "@/components/blocks/billing/billing84";

export default function Page() {
  return <Billing84 {...billing84Demo} />;
}

Props

Types

type DiscountKind = "percentage" | "credit";

interface PartnerDiscount {
  id: string;
  partnerName: string;
  partnerInitial: string;
  kind: DiscountKind;
  value: string;
  remaining?: string;
  validUntil?: string;
  infoHref?: string;
}

Behavior notes

• partnerInitial is a plain string you set per discount (e.g. "YC", "AW"), rendered inside a colored circle instead of a real logo image, so there's no image loading or fallback state to manage.
• kind only controls the badge text through an internal lookup (percentage -> "Percentage off", credit -> "Fixed credit"); value itself is a free-form string so it can read as "25% off for 12 months" or "$5,000 in credits" as appropriate.
• remaining and validUntil are both optional per discount and simply omitted from the row when not set, there's no placeholder text shown in their place.
• The redeem form is a plain HTML form with no client-side state or validation; it submits as a normal GET to "#" by default; wire a real action and onSubmit handler for it to actually validate and apply a code.
• showRedeemForm lets you drop the code-entry UI entirely for read-only contexts like an admin view of a customer's account.

Frequently asked questions