Booking Confirmation Receipt

Booking15: Booking Confirmation Receipt

Post-checkout confirmation screen: an animated success check, a confirmation number, a list of booking details keyed to a fixed icon set, a provider row, a purely decorative but visually authentic QR code generated from the confirmation number, action buttons, and an email and cancellation-policy footer.

Installation

Radix flavor

npx shadcn add "https://ui.beste.co/r/booking15"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/booking15"

This installs the block to components/beste/block/booking15.tsx, plus the badge and button shadcn/ui primitives it uses for the status badge and the action buttons.

Quick start

The installed file exports booking15Demo alongside the block: the exact props behind the preview above. Spread it to get a working confirmation receipt in one line.

import { Booking15, booking15Demo } from "@/components/beste/block/booking15";

export default function BookingConfirmedPage() {
  return <Booking15 {...booking15Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { CalendarPlus, Navigation } from "lucide-react";
import { Booking15 } from "@/components/beste/block/booking15";

export default function BookingConfirmedPage() {
  return (
    <Booking15
      badge={{ label: "Confirmed", variant: "secondary" }}
      heading="You're all <strong>set</strong>"
      description="Your booking is confirmed."
      confirmationNumber="BK-2026-0482"
      details={[
        { key: "service", label: "Service", value: "Deep Tissue Massage", subValue: "60 min session" },
        { key: "date", label: "Date", value: "Thursday, March 5, 2026" },
        { key: "time", label: "Time", value: "14:00 — 15:00" },
        { key: "price", label: "Total paid", value: "$120.40", subValue: "Visa •••• 4242" },
      ]}
      actions={[
        { icon: CalendarPlus, label: "Add to calendar", href: "https://beste.co" },
        { icon: Navigation, label: "Get directions", href: "https://beste.co" },
      ]}
      email="alex@beste.co"
      policyNote="Free cancellation up to 24 hours before your appointment."
      labels={{
        confirmationPrefix: "Confirmation",
        scanLabel: "Scan at check-in",
        emailSentTemplate: "Confirmation emailed to {email}",
        policyLabel: "Cancellation policy",
      }}
    />
  );
}

Props

type BookingDetail = {
  key: "service" | "date" | "time" | "location" | "guest" | "price";
  label: string;
  value: string;
  subValue?: string;
};

type Booking15Action = {
  icon: LucideIcon;
  label: string;
  href?: string;
};

type Booking15Labels = {
  confirmationPrefix?: string;
  scanLabel?: string;
  emailSentTemplate?: string;
  policyLabel?: string;
};

Behavior notes

• The QR code is not a real scannable code: generateQRPattern seeds a small hash-based pseudo-random generator from confirmationNumber (falling back to "BK-DEMO" when unset) to fill a 21x21 grid, then overlays three genuine QR-style finder squares (7x7 rings with 3x3 cores, with cleared quiet zones around them) purely so it reads as a QR code in a static preview.
• details[].key must be one of six fixed values (service, date, time, location, guest, price); each maps to a fixed Lucide icon through the internal detailIcons map, so there is no way to attach a custom icon to a detail row.
• The packaged demo's date detail is generated by formatFutureDate(4) (today plus four days) inside a factory function, createBooking15Demo(), that runs once when the module is first evaluated, not on every render, so the shipped booking15Demo date is fixed to whenever that module first loaded rather than "four days from the current visitor."
• Action buttons render as a real <a href> (via asChild) when action.href is set, or a plain non-interactive button when it's omitted; there is no calendar or maps integration built in, only whatever URL the caller supplies.
• The success icon uses an animate-ping overlay on an emerald-tinted circle for the pulse effect, and the whole card is a single scrollable stack of bordered sections (header, details, provider, QR, actions, footer notes) that each render conditionally based on whether their prop is provided.