Spa Day Package Builder

Installation

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

Usage

The file also exports booking22Demo, 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 { Booking22, booking22Demo } from "@/components/blocks/booking/booking22";

export default function Page() {
  return <Booking22 {...booking22Demo} />;
}

Props

Types

interface CatalogItem {
  id: string;
  name: string;
  duration: number;
  price: number;
}

interface PackageLine extends CatalogItem {
  uid: number;
}

Behavior notes

• Clicking 'Add' next to any service pushes a real copy of that item into the package array (a useState array of PackageLine, each tagged with a unique incrementing uid so duplicates and removal both work correctly).
• Each line in the 'Your package' summary has a real X remove button that filters that line out of the array by its uid.
• Total duration and total price are computed live from the current package array on every render.
• The bundle-discount progress bar's fill width is computed live as `Math.min(100, (totalPrice / threshold) * 100)`, a deterministic function of state, not `Math.random()`; once the total crosses the fixed $150 threshold a real 10% discount is applied to the displayed total due.
• The 'Relax & Restore' and 'Full Glow-Up' quick-start buttons replace the entire package array with a fixed, hardcoded preset list of items, no randomness involved.
• The 'Book package' button is decorative only, no submission handler is wired since that would require a real backend.