Cancellation Flow

Installation

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

Usage

The file also exports booking23Demo, 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 { Booking23, booking23Demo } from "@/components/blocks/booking/booking23";

export default function Page() {
  return <Booking23 {...booking23Demo} />;
}

Props

Types

interface BookingSummary {
  service: string;
  date: string;
  time: string;
  price: number;
}

type CancellationReasonId =
  | "change-of-plans"
  | "better-price"
  | "emergency"
  | "provider-unavailable"
  | "day-of"
  | "other";

interface CancellationReason {
  id: CancellationReasonId;
  label: string;
}

Behavior notes

• The reason picker is a real native radio group with client state; choosing "Other" conditionally reveals a real Textarea for notes.
• The refund breakdown is a real derived calculation: each reason id maps to a fixed refund percentage (100% for emergency/provider-unavailable, 50% for change-of-plans/better-price/other, 0% for a day-of cancellation), and the shown refund amount recomputes from the booking price whenever the selected reason changes.
• The confirmation checkbox is real client state, and the destructive Cancel booking button stays disabled until it's checked.
• The original booking summary panel is static display only, and clicking Cancel booking does not actually cancel anything or navigate anywhere.