Billing Credit Refund Request

Installation

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

Usage

The file also exports billing41Demo, 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 { Billing41, billing41Demo } from "@/components/blocks/billing/billing41";

export default function Page() {
  return <Billing41 {...billing41Demo} />;
}

Props

Types

interface RefundableTransaction {
  id: string;
  label: string;
  amount: string;
  date: string;
}

Behavior notes

• Submit stays disabled until a transaction and a reason are both selected; the optional note field doesn't gate submission.
• Selecting a transaction, refund method, and reason are three separate radiogroups built from plain buttons, not a native select, so they're fully keyboard and screen-reader navigable.
• Submitting sets a brief "submitting" state with a spinner before swapping the whole form for a confirmation panel; there's no real network request, the delay and ticket id are simulated client-side.
• The generated ticket id is derived from the current timestamp at submit time, so it's only computed after a user interaction and never during server rendering.
• There's no prop to hook into submission, wire your own submit handler in place of the built-in setTimeout if you need to call a real API.

Frequently asked questions