@hanzo/booker 0.1.0

package/src/CalendarEmbed.tsx

@@ -0,0 +1,111 @@
+import { SizableText, Spinner, XStack, YStack } from 'hanzogui'
+import type { Booking } from './client'
+import { BookingForm } from './BookingForm'
+import { Confirmation } from './Confirmation'
+import { EventHeader } from './EventHeader'
+import { TimeSlots } from './TimeSlots'
+import { formatMonthLabel } from './time'
+import { useBooker } from './useBooker'
+
+export interface CalendarEmbedProps {
+  host: string
+  eventSlug: string
+  apiUrl?: string
+  timeZone?: string
+  weekStartsOn?: 0 | 1
+  onBooked?: (booking: Booking) => void
+}
+
+/**
+ * Compact booking card for a marketing hero — soonest availability inline,
+ * no month grid. Same state machine as <Booker>.
+ */
+export function CalendarEmbed(props: CalendarEmbedProps) {
+  const m = useBooker({ ...props, autoSelectFirst: true })
+
+  return (
+    <YStack
+      backgroundColor="$background"
+      borderColor="$borderColor"
+      borderWidth={1}
+      borderRadius="$6"
+      padding="$4"
+      gap="$3"
+      width="100%"
+      maxWidth={420}
+    >
+      {m.event.loading ? (
+        <YStack
+          alignItems="center"
+          justifyContent="center"
+          gap="$2"
+          padding="$6"
+          minHeight={160}
+        >
+          <Spinner size="large" color="$color9" />
+        </YStack>
+      ) : m.event.error || !m.event.data ? (
+        <YStack
+          alignItems="center"
+          justifyContent="center"
+          padding="$5"
+          minHeight={140}
+          gap="$1"
+        >
+          <SizableText size="$4" fontWeight="600" color="$color12">
+            Unavailable
+          </SizableText>
+          <SizableText size="$2" color="$color10" textAlign="center">
+            {m.event.error ?? 'Event not found.'}
+          </SizableText>
+        </YStack>
+      ) : m.phase === 'done' && m.booking ? (
+        <Confirmation booking={m.booking} timeZone={m.timeZone} onDone={m.reset} />
+      ) : m.phase === 'form' && m.selectedSlot ? (
+        <BookingForm
+          slotIso={m.selectedSlot}
+          timeZone={m.timeZone}
+          eventLength={m.event.data.length}
+          submitting={m.submitting}
+          error={m.error}
+          onSubmit={m.submit}
+          onBack={m.back}
+        />
+      ) : (
+        <>
+          <EventHeader
+            event={m.event.data}
+            host={props.host}
+            timeZone={m.timeZone}
+            compact
+          />
+          {m.conflict ? (
+            <SizableText size="$1" color="$yellow11">
+              That time was just taken — pick another.
+            </SizableText>
+          ) : null}
+          {m.slots.loading && m.availableKeys.size === 0 ? (
+            <YStack alignItems="center" padding="$4">
+              <Spinner color="$color9" />
+            </YStack>
+          ) : m.availableKeys.size === 0 ? (
+            <SizableText size="$2" color="$color10">
+              No availability in {formatMonthLabel(m.viewDate)}.
+            </SizableText>
+          ) : (
+            <TimeSlots
+              dayKey={m.selectedDay}
+              slots={m.daySlots}
+              timeZone={m.timeZone}
+              onPick={m.selectSlot}
+              selectedIso={m.selectedSlot}
+              loading={m.slots.loading}
+              compact
+              maxHeight={220}
+            />
+          )}
+        </>
+      )}
+    </YStack>
+  )
+}

package/src/Confirmation.tsx

@@ -0,0 +1,145 @@
+import {
+  Button,
+  Paragraph,
+  Separator,
+  SizableText,
+  Spinner,
+  XStack,
+  YStack,
+} from 'hanzogui'
+import { DEFAULT_API_URL, type Booking } from './client'
+import { useBooking } from './hooks'
+import { visitorTimeZone } from './time'
+import { formatBookingWhen } from './time'
+
+export interface ConfirmationProps {
+  /** Provide a booking directly, or a uid to fetch one. */
+  booking?: Booking
+  uid?: string
+  apiUrl?: string
+  timeZone?: string
+  onDone?: () => void
+}
+
+/** Booking confirmation card. Accepts a booking object or fetches by uid. */
+export function Confirmation({
+  booking,
+  uid,
+  apiUrl,
+  timeZone,
+  onDone,
+}: ConfirmationProps) {
+  const api = apiUrl ?? DEFAULT_API_URL
+  const tz = timeZone ?? visitorTimeZone()
+  const fetched = useBooking(api, booking ? undefined : uid)
+  const data = booking ?? fetched.data
+
+  if (!data && fetched.loading) {
+    return (
+      <YStack
+        alignItems="center"
+        justifyContent="center"
+        padding="$6"
+        gap="$3"
+        minHeight={200}
+      >
+        <Spinner size="large" color="$color9" />
+        <SizableText size="$3" color="$color10">
+          Loading your booking…
+        </SizableText>
+      </YStack>
+    )
+  }
+
+  if (!data) {
+    return (
+      <YStack
+        alignItems="center"
+        justifyContent="center"
+        padding="$6"
+        gap="$2"
+        minHeight={200}
+      >
+        <SizableText size="$4" fontWeight="600" color="$color12">
+          Booking not found
+        </SizableText>
+        <SizableText size="$3" color="$color10" textAlign="center">
+          {fetched.error ?? 'We could not load this booking.'}
+        </SizableText>
+      </YStack>
+    )
+  }
+
+  const attendee = data.attendees?.[0]
+  const location = data.location
+
+  return (
+    <YStack gap="$3" padding="$1" alignItems="center">
+      <YStack
+        width={52}
+        height={52}
+        borderRadius={9999}
+        backgroundColor="$green4"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <SizableText size="$8" color="$green11">
+          {'✓'}
+        </SizableText>
+      </YStack>
+
+      <YStack gap="$1" alignItems="center">
+        <SizableText size="$7" fontWeight="700" color="$color12" textAlign="center">
+          You're booked
+        </SizableText>
+        <SizableText size="$4" color="$color11" textAlign="center">
+          {data.title}
+        </SizableText>
+      </YStack>
+
+      <Separator width="100%" />
+
+      <YStack gap="$2.5" width="100%" maxWidth={420}>
+        <Row label="When" value={formatBookingWhen(data.start, tz)} />
+        {location ? <Row label="Where" value={location} /> : null}
+        {attendee?.email ? <Row label="Guest" value={attendee.email} /> : null}
+        <Row label="Status" value={titleCase(data.status)} />
+        <Row label="Reference" value={data.uid} />
+      </YStack>
+
+      <Paragraph size="$2" color="$color10" textAlign="center" marginTop="$1">
+        A calendar invite is on its way to {attendee?.email ?? 'your inbox'}.
+      </Paragraph>
+
+      {onDone ? (
+        <Button size="$3" chromeless onPress={onDone} marginTop="$1">
+          Book another time
+        </Button>
+      ) : null}
+    </YStack>
+  )
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <XStack justifyContent="space-between" gap="$3" alignItems="flex-start">
+      <SizableText size="$3" color="$color10">
+        {label}
+      </SizableText>
+      <SizableText
+        size="$3"
+        color="$color12"
+        fontWeight="500"
+        textAlign="right"
+        flexShrink={1}
+      >
+        {value}
+      </SizableText>
+    </XStack>
+  )
+}
+
+function titleCase(s: string): string {
+  if (!s) return ''
+  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase()
+}

package/src/EventHeader.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react'
+import { Paragraph, SizableText, XStack, YStack } from 'hanzogui'
+import type { EventType } from './client'
+
+export interface EventHeaderProps {
+  event: EventType
+  host: string
+  timeZone: string
+  compact?: boolean
+}
+
+/** Event identity: host, title, duration, timezone, description. */
+export function EventHeader({ event, host, timeZone, compact }: EventHeaderProps) {
+  const name = event.profile?.name || host
+  const initial = (name?.[0] || 'H').toUpperCase()
+  return (
+    <YStack gap="$2">
+      <XStack alignItems="center" gap="$2.5">
+        <YStack
+          width={28}
+          height={28}
+          borderRadius={9999}
+          backgroundColor="$color5"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <SizableText size="$2" color="$color11" fontWeight="600">
+            {initial}
+          </SizableText>
+        </YStack>
+        <SizableText size="$3" color="$color10">
+          {name}
+        </SizableText>
+      </XStack>
+
+      <SizableText size={compact ? '$6' : '$8'} fontWeight="700" color="$color12">
+        {event.title}
+      </SizableText>
+
+      <XStack gap="$2" alignItems="center" flexWrap="wrap">
+        <Pill>{event.length} min</Pill>
+        <Pill>{shortZone(timeZone)}</Pill>
+        {event.locations?.[0]?.type ? (
+          <Pill>{prettyLocation(event.locations[0].type)}</Pill>
+        ) : null}
+      </XStack>
+
+      {!compact && event.description ? (
+        <Paragraph size="$3" color="$color11" marginTop="$1">
+          {event.description}
+        </Paragraph>
+      ) : null}
+    </YStack>
+  )
+}
+
+function Pill({ children }: { children: ReactNode }) {
+  return (
+    <XStack
+      backgroundColor="$color3"
+      paddingHorizontal="$2.5"
+      paddingVertical="$1"
+      borderRadius="$10"
+      alignItems="center"
+    >
+      <SizableText size="$1" color="$color11">
+        {children}
+      </SizableText>
+    </XStack>
+  )
+}
+
+function shortZone(tz: string): string {
+  const city = tz.split('/').pop() || tz
+  return city.replace(/_/g, ' ')
+}
+
+function prettyLocation(type: string): string {
+  const t = type.toLowerCase()
+  if (t.includes('google')) return 'Google Meet'
+  if (t.includes('zoom')) return 'Zoom'
+  if (t.includes('phone')) return 'Phone'
+  if (t.includes('person')) return 'In person'
+  return 'Video call'
+}

package/src/MonthCalendar.tsx

@@ -0,0 +1,179 @@
+import { SizableText, Spinner, XStack, YStack } from 'hanzogui'
+import {
+  formatMonthLabel,
+  isBeforeToday,
+  monthMatrix,
+  weekdayLabels,
+  type MonthCell,
+} from './time'
+
+export interface MonthCalendarProps {
+  viewDate: Date
+  availableKeys: Set<string>
+  selectedDay: string | null
+  onSelectDay: (key: string) => void
+  onPrev: () => void
+  onNext: () => void
+  atFirstMonth: boolean
+  weekStartsOn?: 0 | 1
+  loading?: boolean
+}
+
+/** Navigable month grid; days with availability are selectable. */
+export function MonthCalendar({
+  viewDate,
+  availableKeys,
+  selectedDay,
+  onSelectDay,
+  onPrev,
+  onNext,
+  atFirstMonth,
+  weekStartsOn = 0,
+  loading,
+}: MonthCalendarProps) {
+  const cells = monthMatrix(viewDate, weekStartsOn)
+  const rows: MonthCell[][] = []
+  for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7))
+  const labels = weekdayLabels(weekStartsOn)
+
+  return (
+    <YStack gap="$2" flex={1} minWidth={260}>
+      <XStack alignItems="center" justifyContent="space-between" paddingVertical="$1">
+        <NavArrow label="Previous month" disabled={atFirstMonth} onPress={onPrev}>
+          {'‹'}
+        </NavArrow>
+        <XStack alignItems="center" gap="$2">
+          <SizableText size="$5" fontWeight="700" color="$color12">
+            {formatMonthLabel(viewDate)}
+          </SizableText>
+          {loading ? <Spinner size="small" color="$color9" /> : null}
+        </XStack>
+        <NavArrow label="Next month" onPress={onNext}>
+          {'›'}
+        </NavArrow>
+      </XStack>
+
+      <XStack>
+        {labels.map((l) => (
+          <YStack
+            key={l}
+            flexBasis={0}
+            flexGrow={1}
+            alignItems="center"
+            paddingVertical="$1"
+          >
+            <SizableText size="$1" color="$color10">
+              {l}
+            </SizableText>
+          </YStack>
+        ))}
+      </XStack>
+
+      <YStack gap="$1.5">
+        {rows.map((row, r) => (
+          <XStack key={r} gap="$1.5">
+            {row.map((cell) => (
+              <DayCell
+                key={cell.key}
+                cell={cell}
+                available={availableKeys.has(cell.key)}
+                past={isBeforeToday(cell.key)}
+                selected={selectedDay === cell.key}
+                onSelectDay={onSelectDay}
+              />
+            ))}
+          </XStack>
+        ))}
+      </YStack>
+    </YStack>
+  )
+}
+
+function DayCell({
+  cell,
+  available,
+  past,
+  selected,
+  onSelectDay,
+}: {
+  cell: MonthCell
+  available: boolean
+  past: boolean
+  selected: boolean
+  onSelectDay: (key: string) => void
+}) {
+  const selectable = cell.inMonth && available && !past
+  const dayNum = cell.date.getDate()
+
+  return (
+    <YStack
+      flexBasis={0}
+      flexGrow={1}
+      aspectRatio={1}
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="$4"
+      borderWidth={1}
+      borderColor={selected ? '$color12' : selectable ? '$color5' : 'transparent'}
+      backgroundColor={selected ? '$color12' : selectable ? '$color2' : 'transparent'}
+      opacity={cell.inMonth ? 1 : 0}
+      cursor={selectable ? 'pointer' : 'default'}
+      hoverStyle={selectable && !selected ? { backgroundColor: '$color4' } : undefined}
+      pressStyle={selectable ? { backgroundColor: '$color6' } : undefined}
+      onPress={selectable ? () => onSelectDay(cell.key) : undefined}
+      aria-label={selectable ? `Select ${cell.key}` : undefined}
+      role={selectable ? 'button' : undefined}
+    >
+      <SizableText
+        size="$3"
+        fontWeight={selectable ? '600' : '400'}
+        color={selected ? '$color1' : selectable ? '$color12' : '$color8'}
+      >
+        {dayNum}
+      </SizableText>
+      {selectable && !selected ? (
+        <YStack
+          position="absolute"
+          bottom={4}
+          width={4}
+          height={4}
+          borderRadius={9999}
+          backgroundColor="$color10"
+        />
+      ) : null}
+    </YStack>
+  )
+}
+
+function NavArrow({
+  children,
+  onPress,
+  disabled,
+  label,
+}: {
+  children: string
+  onPress: () => void
+  disabled?: boolean
+  label: string
+}) {
+  return (
+    <YStack
+      width={34}
+      height={34}
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="$4"
+      opacity={disabled ? 0.35 : 1}
+      cursor={disabled ? 'default' : 'pointer'}
+      hoverStyle={disabled ? undefined : { backgroundColor: '$color4' }}
+      pressStyle={disabled ? undefined : { backgroundColor: '$color6' }}
+      onPress={disabled ? undefined : onPress}
+      aria-label={label}
+      role="button"
+    >
+      <SizableText size="$6" color="$color11">
+        {children}
+      </SizableText>
+    </YStack>
+  )
+}

package/src/TimeSlots.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react'
+import { Button, ScrollView, SizableText, XStack, YStack } from 'hanzogui'
+import type { Slot } from './client'
+import { dateFromKey, formatDayLong, formatSlotTime } from './time'
+
+export interface TimeSlotsProps {
+  dayKey: string | null
+  slots: Slot[]
+  timeZone: string
+  onPick: (iso: string) => void
+  selectedIso?: string | null
+  loading?: boolean
+  /** compact = wrap into a flowing grid instead of a tall column */
+  compact?: boolean
+  maxHeight?: number
+}
+
+/** Time-slot pills for the selected day, shown in the visitor's time zone. */
+export function TimeSlots({
+  dayKey,
+  slots,
+  timeZone,
+  onPick,
+  selectedIso,
+  loading,
+  compact,
+  maxHeight = 360,
+}: TimeSlotsProps) {
+  if (!dayKey) {
+    return (
+      <Centered>
+        <SizableText size="$3" color="$color10" textAlign="center">
+          Select a day to see available times.
+        </SizableText>
+      </Centered>
+    )
+  }
+
+  const heading = formatDayLong(dateFromKey(dayKey))
+
+  return (
+    <YStack gap="$2" flex={1} minWidth={200}>
+      <SizableText size="$4" fontWeight="600" color="$color12">
+        {heading}
+      </SizableText>
+
+      {loading ? (
+        <Centered>
+          <SizableText size="$2" color="$color10">
+            Loading times…
+          </SizableText>
+        </Centered>
+      ) : slots.length === 0 ? (
+        <Centered>
+          <SizableText size="$3" color="$color10" textAlign="center">
+            No times left on this day. Try another.
+          </SizableText>
+        </Centered>
+      ) : (
+        <ScrollView maxHeight={maxHeight} showsVerticalScrollIndicator={false}>
+          <XStack flexWrap="wrap" gap="$2" flexDirection={compact ? 'row' : 'column'}>
+            {slots.map((slot) => {
+              const active = selectedIso === slot.time
+              return (
+                <Button
+                  key={slot.time}
+                  size="$3"
+                  theme={active ? 'blue' : undefined}
+                  chromeless={!active}
+                  borderWidth={1}
+                  borderColor={active ? '$color8' : '$color6'}
+                  backgroundColor={active ? undefined : '$color1'}
+                  hoverStyle={{ borderColor: '$color10' }}
+                  pressStyle={{ backgroundColor: '$color4' }}
+                  onPress={() => onPick(slot.time)}
+                  aria-label={`Book ${formatSlotTime(slot.time, timeZone)}`}
+                  {...(compact ? {} : { alignSelf: 'stretch' })}
+                >
+                  {formatSlotTime(slot.time, timeZone)}
+                </Button>
+              )
+            })}
+          </XStack>
+        </ScrollView>
+      )}
+    </YStack>
+  )
+}
+
+function Centered({ children }: { children: ReactNode }) {
+  return (
+    <YStack
+      flex={1}
+      minHeight={120}
+      alignItems="center"
+      justifyContent="center"
+      padding="$4"
+    >
+      {children}
+    </YStack>
+  )
+}