@forgebuild/hotal-ui 0.2.0 → 0.3.0

package/README.md

@@ -77,6 +77,99 @@ reservation-bar {
 }
 ```
 
+### `<booking-flow>`
+
+Search results, a Stripe payment form, booking submission, and confirmation — plus an empty-state calendar when a date has no availability. Decoupled from `<reservation-bar>`: the page mirrors `date`/`guests`/`time` into `<booking-flow>` itself, typically from a `reservation-bar`'s `reservationchange` event or from the page's own URL.
+
+```html
+<script type="module">
+	import '@forgebuild/hotal-ui';
+
+	const flow = document.querySelector('booking-flow');
+
+	flow.closedWeekdays = [0];
+	flow.fetchAvailableDates = async (partySize) => {
+		const res = await fetch(`/api/available-dates?party_size=${partySize}`);
+		const { dates } = await res.json();
+		return dates;
+	};
+	flow.searchSlots = async (date, guests) => {
+		const res = await fetch(`/api/search?date=${date}&party_size=${guests}`);
+		const { slots } = await res.json();
+		return slots;
+	};
+	flow.stripePublishableKey = 'pk_test_...';
+	flow.stripeAppearance = { theme: 'stripe' };
+	flow.createPaymentIntent = async (date, guests) => {
+		const res = await fetch('/api/create-payment-intent', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ date, party_size: guests }),
+		});
+		return res.json();
+	};
+	flow.book = async (details) => {
+		const res = await fetch('/api/book', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(details),
+		});
+		return res.status === 201 ? { ok: true } : { ok: false, status: res.status, message: 'Something went wrong.' };
+	};
+
+	flow.date = '2026-08-20';
+	flow.guests = 2;
+
+	flow.addEventListener('booking-confirmed', (e) => console.log(e.detail));
+</script>
+
+<booking-flow></booking-flow>
+```
+
+#### Properties (all JS-only — no HTML attributes, since every property here is either dynamic state or a callback)
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `date` | `string` | Current search date (ISO) |
+| `guests` | `number` | Current party size |
+| `preferredTime` | `string` | Used to pre-select the closest available slot |
+| `closedWeekdays` | `number[]` | Same convention as `reservation-bar`: `0`=Sun–`6`=Sat, for the empty-state calendar |
+| `fetchAvailableDates` | `(partySize: number) => Promise<string[]>` | Drives the empty-state calendar's selectable dates |
+| `searchSlots` | `(date: string, guests: number) => Promise<BookingSlot[]>` | Returns available time slots |
+| `stripePublishableKey` | `string` | Stripe publishable key |
+| `stripeAppearance` | `object` | Passed straight through to Stripe's `elements({ appearance })` |
+| `createPaymentIntent` | `(date: string, guests: number) => Promise<PaymentIntentResult>` | Creates the Stripe PaymentIntent to hold |
+| `book` | `(details: BookingDetails) => Promise<BookResult>` | Submits the reservation |
+
+```ts
+interface BookingSlot { time: string; availableTables: number; }
+interface PaymentIntentResult { clientSecret: string; paymentIntentId: string; amountCents: number; }
+interface BookingDetails {
+	date: string; startTime: string; timeDisplay: string; partySize: number;
+	contactName: string; contactEmail?: string; contactPhone?: string; notes?: string;
+	stripePaymentIntentId: string; clerkUserId?: string;
+}
+type BookResult = { ok: true } | { ok: false; status: number; message: string };
+```
+
+#### Events
+
+`booking-confirmed` — `CustomEvent<{ date: string; time: string; guests: number }>`, fires once a booking succeeds.
+
+#### Theming
+
+```css
+booking-flow {
+	--bf-text-color: #1a1a1a;
+	--bf-muted-text: rgba(0, 0, 0, 0.6);
+	--bf-border-color: rgba(0, 0, 0, 0.15);
+	--bf-accent-bg: #1a1a1a;
+	--bf-accent-text: #fff;
+	--bf-spinner-track: rgba(0, 0, 0, 0.15);
+	--bf-spinner-active: #1a1a1a;
+}
+```
+
 ## Development
 
 ```