# Booking Bar (Moonarc)

The dates and the guests of a stay, handed to the place's own booking engine: a form that sends them to the engine's address as the parameters it reads (check-in, check-out, adults, children, and any fixed ones, such as the property's id), so a guest lands on the engine's page with the search filled in. Nothing is kept on the site: the engine holds the rooms, the prices and the payment. Without JavaScript it is a plain form that sends ISO dates. With it, the dates cannot start in the past, the check-out follows the check-in by the shortest stay, the nights are said as the dates change, and a date is rewritten for an engine that reads day first or month first.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/booking-bar` (license key required)
- Tier B · category section · trigger click
- Readout: `<BookingBar engine="https://book.example.com/stay" fields={{ from: 'checkin', to: 'checkout' }} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 934 B raw JS · 575 B gzip · + runtime (with dependencies 2.6 kB raw; CSS 5.6 kB raw)
- Page: https://moonarc.dev/components/booking-bar/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `engine` | `string` | none | The booking engine's https address; the build stops on anything else. |
| `fields` | `{ from?; to?; adults?; children? }` | `checkin, checkout, adults, children` | The names the engine reads each value under. |
| `fixed` | `Record<string, string>` | none | Parameters sent as they are with every search. |
| `format` | `'iso' | 'dmy' | 'mdy'` | `'iso'` | How the engine reads a date; dmy and mdy are written by the script, so without it the engine gets ISO. |
| `minNights` | `number` | `1` | The shortest stay, in nights. |
| `max` | `{ adults?; children? }` | `8 adults, 6 children` | The most one search takes; 0 children removes the field. |
| `newTab` | `boolean` | `false` | Open the engine in a new tab; the tab gets no handle back to this page (noopener). |
| `words` | `{ from?; to?; adults?; children?; submit?; nights?; night?; note? }` | none | The labels, the button, the nights line ({n}) and a note under it. |
| `label` | `string` | `'Check availability'` | The form's accessible name; a named form is a landmark, so two bars on one page take two names. |

## Usage

```astro
---
import BookingBar from '@/components/moonarc/pro/BookingBar.astro';
---
<BookingBar
  engine="https://book.example.com/sitename"
  fields={{ from: 'arrival', to: 'departure', adults: 'adults', children: 'kids' }}
  fixed={{ property: '1042', lang: 'en' }}
  minNights={2}
/>
```

## Reduced motion

Nothing in it moves; the button's hover fade is dropped.

## With ClientRouter

Bound per form through the runtime; a fresh page binds again.

## Craft

- A GET form on purpose: what it sends is two dates and two numbers, no one's name, and a GET is what an engine's search page is built to read.
- The script writes the minimum dates and the nights line; the form itself, its fields and its names are server-rendered, so a search works before the script loads.
- An engine that reads 14/03/2030 gets it: the submit is taken over and the search sent as the engine's address with the two dates rewritten, every other field as it is.

## Replaces

- Hotel booking widgets embedded as an iframe

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/booking-bar` with a key in components.json (https://moonarc.dev/account/).