Reservation Summary

Booking2: Reservation Summary

A centered booking confirmation card that stacks a service name and description, a muted panel of date/time/duration/location rows, a provider block with avatar and star rating, a promo-code input that validates against a known code, a price breakdown with subtotal/tax/discount/total lines that recomputes the total when a valid promo is applied, a full-width confirm button, and a cancellation-policy footer.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/booking2?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/booking2?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/booking2.tsx, plus the avatar, badge, and button shadcn/ui primitives it uses for the provider photo, the section eyebrow, and the apply/confirm actions.

Quick start

The installed file exports booking2Demo alongside the block: the exact props behind the preview above. Spread it to get a working reservation summary in one line.

import { Booking2, booking2Demo } from "@/components/beste/block/booking2";

export default function BookingReviewPage() {
  return <Booking2 {...booking2Demo} />;
}

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

import { Booking2 } from "@/components/beste/block/booking2";

export default function BookingReviewPage() {
  return (
    <Booking2
      badge={{ label: "Almost done", variant: "secondary" }}
      heading="Review your <strong>reservation</strong>"
      serviceName="Deep Tissue Massage"
      date="Saturday, April 18, 2026"
      time="14:00"
      duration="60 min"
      location="Serenity Spa, 42 Wellness Ave"
      provider={{ name: "Dr. Emily Carter", role: "Massage Therapist", rating: 4.9, reviews: 127 }}
      pricing={[
        { label: "Deep Tissue Massage (60 min)", amount: "$120.00" },
        { label: "Tax", amount: "$10.40", type: "tax" },
        { label: "Total", amount: "$130.40", type: "total" },
      ]}
      validPromoCode="123456"
      promoDiscount={{ label: "Promo code ({code})", amount: "-$20.00" }}
      labels={{ applyButton: "Apply", confirmButton: "Confirm Booking" }}
    />
  );
}

Props

type Provider = {
  name: string;
  role: string;
  avatar?: string;
  rating?: number;
  reviews?: number;
};

type PriceItem = {
  label: string;
  amount: string;
  type?: "regular" | "discount" | "tax" | "total";
};

type PromoDiscount = {
  label: string;
  amount: string;
};

type Booking2Labels = {
  promoPlaceholder?: string;
  applyButton?: string;
  appliedButton?: string;
  confirmButton?: string;
  reviewsSuffix?: string;
  promoSuccessMessage?: string;
  promoInvalidMessage?: string;
};

Behavior notes

• The promo code is validated purely client-side by string-comparing the trimmed input against validPromoCode; there is no async call and no callback, so a real coupon check must be wired in by the integrator.
• Applying a valid promo recomputes the breakdown in a useMemo: it pulls the type: "total" row out, appends the promoDiscount line, then re-adds a total whose amount is re-derived by parseAmount/formatAmount (a naive regex that reads the first number and reuses the currency symbol from the original total string).
• If pricing has no type: "total" item, the promo line is simply appended and nothing is recalculated.
• Promo status lives in internal useState ("idle" \| "valid" \| "invalid") that is never lifted out; the Apply button is disabled while the input is empty or the code is already valid, and typing resets the status back to "idle".
• Both promoInvalidMessage and promoDiscount.label substitute {code} with validPromoCode at render time, so the invalid message can leak the working code (the demo does this on purpose).
• heading is rendered through dangerouslySetInnerHTML, and its inline <strong> is auto-styled bold and text-primary.
• The "Confirm Booking" button has no onClick handler at all: it is a decorative CTA, so submitting the reservation is left entirely to the integrator.
• Every content block is conditionally rendered, so omitting serviceName, provider, pricing, cancellationPolicy, or the whole badge/heading/description header collapses that region without leaving empty spacing.