Home Cleaning Service Booking

Booking16: Home Cleaning Service Booking

A single-column residential cleaning booking card that lets a visitor pick a service tier via Tabs, choose bedroom and bathroom counts from Select dropdowns, toggle a recurring-frequency pill grid, check optional add-ons, and select a date from a Popover calendar, while a sticky summary footer recomputes estimated duration, base price, recurring discount, and total live from those inputs.

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/booking16?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/booking16.tsx, plus the badge, button, calendar, checkbox, popover, select, and tabs shadcn/ui primitives it uses for the eyebrow badge, book button, date picker, add-on toggles, calendar popover, room selectors, and service-tier tabs.

Quick start

The installed file exports booking16Demo alongside the block: the exact props behind the preview above. Spread it to get a working cleaning-booking card in one line.

import { Booking16, booking16Demo } from "@/components/beste/block/booking16";

export default function Page() {
  return <Booking16 {...booking16Demo} />;
}

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

import { Booking16 } from "@/components/beste/block/booking16";

export default function Page() {
  return (
    <Booking16
      badge={{ label: "Home services", variant: "secondary" }}
      heading="Book a <strong>cleaning</strong>"
      currency="$"
      serviceTiers={[
        { value: "standard", label: "Standard", hourlyRate: 35, baseHours: 2 },
        { value: "deep", label: "Deep", hourlyRate: 45, baseHours: 3.5 },
      ]}
      frequencies={[
        { value: "onetime", label: "One-time", discountPercent: 0 },
        { value: "weekly", label: "Weekly", discountPercent: 20 },
      ]}
      addOns={[{ value: "oven", label: "Inside the oven", price: 25 }]}
      labels={{ serviceLabel: "Service type", bookButton: "Book cleaning" }}
    />
  );
}

Props

type ServiceTier = {
  value: string;
  label: string;
  hourlyRate: number;
  baseHours: number;
};

type FrequencyOption = {
  value: string;
  label: string;
  discountPercent: number;
};

type AddOnOption = {
  value: string;
  label: string;
  price: number;
};

type Booking16Labels = {
  serviceLabel?: string;
  roomsLabel?: string;
  bedroomsLabel?: string;
  bathroomsLabel?: string;
  frequencyLabel?: string;
  addOnsLabel?: string;
  dateLabel?: string;
  datePlaceholder?: string;
  durationLabel?: string;
  baseLabel?: string;
  frequencyDiscountLabel?: string;
  totalLabel?: string;
  bookButton?: string;
  bedroomSuffix?: string;
  bathroomSuffix?: string;
};

Behavior notes

• Pricing is derived, not passed in: roomHours = baseHours + bedrooms * 0.5 + bathrooms * 0.25, basePrice = roomHours * hourlyRate, then add-on prices are summed, a frequency.discountPercent is applied, and everything is Math.round-ed for display, so all money moves the moment any control changes.
• Every input is internal useState (tier, bedrooms, bathrooms, frequency, selectedAddOns, date) with no onChange props exposed; the initial tier and frequency default to serviceTiers[0]?.value and frequencies[0]?.value, and bedrooms/bathrooms start at 2/1.
• The block has no submit callback prop: handleBook returns early unless both a date and an active tier exist, and otherwise only calls console.log(...), so wiring a real booking request is left to the integrator.
• The book Button is disabled whenever date is unset or no activeTier is found, and the calendar itself disables any day before today via disabled={(d) => d < todayStart} (midnight-normalized).
• Selected add-ons are tracked in a Set<string> keyed by addon.value, and the whole add-ons block is conditionally rendered only when addOns.length > 0.
• Bedroom and bathroom options are generated as 1..maxBedrooms and 1..maxBathrooms, and frequency pills only show the green discount badge when discountPercent > 0; the recurring-discount summary row only appears when the computed discountAmount > 0.
• heading is rendered through dangerouslySetInnerHTML, so inline <strong> is bolded and tinted text-primary; the summary footer stays visible below the fields and duration is shown rounded to one decimal as ~{durationHours}h.