@hanzo/booker 0.1.0

package/dist/esm/useBooker.mjs

@@ -0,0 +1,126 @@
+import { useEffect, useMemo, useState } from "react";
+import { DEFAULT_API_URL } from "./client.mjs";
+import { useAvailableSlots, useCreateBooking, useEventType } from "./hooks.mjs";
+import { addMonths, monthRange, startOfMonth, visitorTimeZone } from "./time.mjs";
+function useBooker(opts) {
+  const api = opts.apiUrl ?? DEFAULT_API_URL;
+  const timeZone = opts.timeZone ?? visitorTimeZone();
+  const weekStartsOn = opts.weekStartsOn ?? 0;
+  const event = useEventType(api, opts.eventSlug, opts.host);
+  const [viewDate, setViewDate] = useState(() => startOfMonth(/* @__PURE__ */new Date()));
+  const {
+    startTime,
+    endTime
+  } = useMemo(() => monthRange(viewDate), [viewDate]);
+  const slots = useAvailableSlots(api, {
+    eventTypeSlug: opts.eventSlug,
+    username: opts.host,
+    startTime,
+    endTime,
+    timeZone,
+    enabled: !!event.data
+  });
+  const [selectedDay, setSelectedDay] = useState(null);
+  const [selectedSlot, setSelectedSlot] = useState(null);
+  const [phase, setPhase] = useState("pick");
+  const [booking, setBooking] = useState(null);
+  const create = useCreateBooking(api);
+  const availableKeys = useMemo(() => {
+    const map = slots.data ?? {};
+    return new Set(Object.keys(map).filter(k => (map[k]?.length ?? 0) > 0));
+  }, [slots.data]);
+  const daySlots = useMemo(() => {
+    if (!selectedDay) return [];
+    return slots.data?.[selectedDay] ?? [];
+  }, [slots.data, selectedDay]);
+  useEffect(() => {
+    if (!opts.autoSelectFirst) return;
+    if (selectedDay && availableKeys.has(selectedDay)) return;
+    const first = [...availableKeys].sort()[0];
+    if (first) {
+      setSelectedDay(first);
+      setSelectedSlot(null);
+    }
+  }, [opts.autoSelectFirst, availableKeys, selectedDay]);
+  const now = startOfMonth(/* @__PURE__ */new Date());
+  const atFirstMonth = viewDate.getFullYear() === now.getFullYear() && viewDate.getMonth() === now.getMonth();
+  const goPrevMonth = () => {
+    if (atFirstMonth) return;
+    setViewDate(d => addMonths(d, -1));
+    setSelectedDay(null);
+    setSelectedSlot(null);
+  };
+  const goNextMonth = () => {
+    setViewDate(d => addMonths(d, 1));
+    setSelectedDay(null);
+    setSelectedSlot(null);
+  };
+  const selectDay = key => {
+    setSelectedDay(key);
+    setSelectedSlot(null);
+  };
+  const selectSlot = iso => {
+    setSelectedSlot(iso);
+    setPhase("form");
+    create.reset();
+  };
+  const back = () => {
+    setPhase("pick");
+    setSelectedSlot(null);
+    create.reset();
+  };
+  const reset = () => {
+    setBooking(null);
+    setSelectedSlot(null);
+    setSelectedDay(null);
+    setPhase("pick");
+    create.reset();
+    slots.refetch();
+  };
+  const submit = async responses => {
+    if (!selectedSlot) return;
+    const result = await create.submit({
+      eventTypeSlug: opts.eventSlug,
+      username: opts.host,
+      start: selectedSlot,
+      timeZone,
+      responses
+    });
+    if (result.ok) {
+      setBooking(result.booking);
+      setPhase("done");
+      opts.onBooked?.(result.booking);
+    } else if (result.conflict) {
+      slots.refetch();
+      setSelectedSlot(null);
+      setPhase("pick");
+    }
+  };
+  return {
+    api,
+    timeZone,
+    weekStartsOn,
+    event,
+    slots,
+    viewDate,
+    availableKeys,
+    selectedDay,
+    daySlots,
+    selectedSlot,
+    phase,
+    booking,
+    submitting: create.submitting,
+    error: create.error,
+    conflict: create.conflict,
+    goPrevMonth,
+    goNextMonth,
+    atFirstMonth,
+    selectDay,
+    selectSlot,
+    submit,
+    back,
+    reset
+  };
+}
+export { useBooker };
+//# sourceMappingURL=useBooker.mjs.map

package/dist/esm/useBooker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","DEFAULT_API_URL","useAvailableSlots","useCreateBooking","useEventType","addMonths","monthRange","startOfMonth","visitorTimeZone","useBooker","opts","api","apiUrl","timeZone","weekStartsOn","event","eventSlug","host","viewDate","setViewDate","Date","startTime","endTime","slots","eventTypeSlug","username","enabled","data","selectedDay","setSelectedDay","selectedSlot","setSelectedSlot","phase","setPhase","booking","setBooking","create","availableKeys","map","Set","Object","keys","filter","k","length","daySlots","autoSelectFirst","has","first","sort","now","atFirstMonth","getFullYear","getMonth","goPrevMonth","d","goNextMonth","selectDay","key","selectSlot","iso","reset","back","refetch","submit","responses","result","start","ok","onBooked","conflict","submitting","error"],"sources":["../../src/useBooker.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/useBooker.native.js

@@ -0,0 +1,145 @@
+import { useEffect, useMemo, useState } from "react";
+import { DEFAULT_API_URL } from "./client.native.js";
+import { useAvailableSlots, useCreateBooking, useEventType } from "./hooks.native.js";
+import { addMonths, monthRange, startOfMonth, visitorTimeZone } from "./time.native.js";
+function useBooker(opts) {
+  var _opts_apiUrl;
+  var api = (_opts_apiUrl = opts.apiUrl) !== null && _opts_apiUrl !== void 0 ? _opts_apiUrl : DEFAULT_API_URL;
+  var _opts_timeZone;
+  var timeZone = (_opts_timeZone = opts.timeZone) !== null && _opts_timeZone !== void 0 ? _opts_timeZone : visitorTimeZone();
+  var _opts_weekStartsOn;
+  var weekStartsOn = (_opts_weekStartsOn = opts.weekStartsOn) !== null && _opts_weekStartsOn !== void 0 ? _opts_weekStartsOn : 0;
+  var event = useEventType(api, opts.eventSlug, opts.host);
+  var [viewDate, setViewDate] = useState(function () {
+    return startOfMonth(/* @__PURE__ */new Date());
+  });
+  var {
+    startTime,
+    endTime
+  } = useMemo(function () {
+    return monthRange(viewDate);
+  }, [viewDate]);
+  var slots = useAvailableSlots(api, {
+    eventTypeSlug: opts.eventSlug,
+    username: opts.host,
+    startTime,
+    endTime,
+    timeZone,
+    enabled: !!event.data
+  });
+  var [selectedDay, setSelectedDay] = useState(null);
+  var [selectedSlot, setSelectedSlot] = useState(null);
+  var [phase, setPhase] = useState("pick");
+  var [booking, setBooking] = useState(null);
+  var create = useCreateBooking(api);
+  var availableKeys = useMemo(function () {
+    var _slots_data;
+    var map = (_slots_data = slots.data) !== null && _slots_data !== void 0 ? _slots_data : {};
+    return new Set(Object.keys(map).filter(function (k) {
+      var _map_k;
+      var _map_k_length;
+      return ((_map_k_length = (_map_k = map[k]) === null || _map_k === void 0 ? void 0 : _map_k.length) !== null && _map_k_length !== void 0 ? _map_k_length : 0) > 0;
+    }));
+  }, [slots.data]);
+  var daySlots = useMemo(function () {
+    var _slots_data;
+    if (!selectedDay) return [];
+    var _slots_data_selectedDay;
+    return (_slots_data_selectedDay = (_slots_data = slots.data) === null || _slots_data === void 0 ? void 0 : _slots_data[selectedDay]) !== null && _slots_data_selectedDay !== void 0 ? _slots_data_selectedDay : [];
+  }, [slots.data, selectedDay]);
+  useEffect(function () {
+    if (!opts.autoSelectFirst) return;
+    if (selectedDay && availableKeys.has(selectedDay)) return;
+    var first = [...availableKeys].sort()[0];
+    if (first) {
+      setSelectedDay(first);
+      setSelectedSlot(null);
+    }
+  }, [opts.autoSelectFirst, availableKeys, selectedDay]);
+  var now = startOfMonth(/* @__PURE__ */new Date());
+  var atFirstMonth = viewDate.getFullYear() === now.getFullYear() && viewDate.getMonth() === now.getMonth();
+  var goPrevMonth = function () {
+    if (atFirstMonth) return;
+    setViewDate(function (d) {
+      return addMonths(d, -1);
+    });
+    setSelectedDay(null);
+    setSelectedSlot(null);
+  };
+  var goNextMonth = function () {
+    setViewDate(function (d) {
+      return addMonths(d, 1);
+    });
+    setSelectedDay(null);
+    setSelectedSlot(null);
+  };
+  var selectDay = function (key) {
+    setSelectedDay(key);
+    setSelectedSlot(null);
+  };
+  var selectSlot = function (iso) {
+    setSelectedSlot(iso);
+    setPhase("form");
+    create.reset();
+  };
+  var back = function () {
+    setPhase("pick");
+    setSelectedSlot(null);
+    create.reset();
+  };
+  var reset = function () {
+    setBooking(null);
+    setSelectedSlot(null);
+    setSelectedDay(null);
+    setPhase("pick");
+    create.reset();
+    slots.refetch();
+  };
+  var submit = async function (responses) {
+    if (!selectedSlot) return;
+    var result = await create.submit({
+      eventTypeSlug: opts.eventSlug,
+      username: opts.host,
+      start: selectedSlot,
+      timeZone,
+      responses
+    });
+    if (result.ok) {
+      var _opts_onBooked;
+      setBooking(result.booking);
+      setPhase("done");
+      (_opts_onBooked = opts.onBooked) === null || _opts_onBooked === void 0 ? void 0 : _opts_onBooked.call(opts, result.booking);
+    } else if (result.conflict) {
+      slots.refetch();
+      setSelectedSlot(null);
+      setPhase("pick");
+    }
+  };
+  return {
+    api,
+    timeZone,
+    weekStartsOn,
+    event,
+    slots,
+    viewDate,
+    availableKeys,
+    selectedDay,
+    daySlots,
+    selectedSlot,
+    phase,
+    booking,
+    submitting: create.submitting,
+    error: create.error,
+    conflict: create.conflict,
+    goPrevMonth,
+    goNextMonth,
+    atFirstMonth,
+    selectDay,
+    selectSlot,
+    submit,
+    back,
+    reset
+  };
+}
+export { useBooker };
+//# sourceMappingURL=useBooker.native.js.map

package/dist/esm/useBooker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","DEFAULT_API_URL","useAvailableSlots","useCreateBooking","useEventType","addMonths","monthRange","startOfMonth","visitorTimeZone","useBooker","opts","_opts_apiUrl","api","apiUrl","_opts_timeZone","timeZone","_opts_weekStartsOn","weekStartsOn","event","eventSlug","host","viewDate","setViewDate","Date","startTime","endTime","slots","eventTypeSlug","username","enabled","data","selectedDay","setSelectedDay","selectedSlot","setSelectedSlot","phase","setPhase","booking","setBooking","create","availableKeys","_slots_data","map","Set","Object","keys","filter","k","_map_k","_map_k_length","length","daySlots","_slots_data_selectedDay","autoSelectFirst","has","first","sort","now","atFirstMonth","getFullYear","getMonth","goPrevMonth","d","goNextMonth","selectDay","key","selectSlot","iso","reset","back","refetch","submit","responses","result","start","ok","_opts_onBooked","onBooked","call","conflict"],"sources":["../../src/useBooker.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@hanzo/booker",
+  "version": "0.1.0",
+  "description": "Universal (web + native) scheduling UI for the Hanzo Calendar — a Booker, Confirmation, and compact CalendarEmbed built with hanzogui primitives.",
+  "license": "BSD-3-Clause",
+  "author": "Hanzo AI <dev@hanzo.ai>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hanzoai/gui.git",
+    "directory": "pkgs/calendar"
+  },
+  "source": "src/index.ts",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "gui-build",
+    "watch": "gui-build --watch",
+    "clean": "gui-build clean",
+    "clean:build": "gui-build clean:build"
+  },
+  "peerDependencies": {
+    "hanzogui": ">=7.0.0",
+    "react": ">=18",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "hanzogui": "workspace:*",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Booker.tsx

@@ -0,0 +1,152 @@
+import type { ReactNode } from 'react'
+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 { MonthCalendar } from './MonthCalendar'
+import { TimeSlots } from './TimeSlots'
+import { useBooker } from './useBooker'
+
+export interface BookerProps {
+  /** Host username (the calendar owner), e.g. "hanzo". */
+  host: string
+  /** Event-type slug, e.g. "intro". */
+  eventSlug: string
+  /** API base, defaults to https://api.hanzo.ai/v1/calendar */
+  apiUrl?: string
+  /** Visitor IANA time zone; defaults to the browser/device zone. */
+  timeZone?: string
+  weekStartsOn?: 0 | 1
+  onBooked?: (booking: Booking) => void
+}
+
+/** Universal scheduling flow: event → month → times → details → confirmation. */
+export function Booker(props: BookerProps) {
+  const m = useBooker(props)
+
+  return (
+    <YStack
+      backgroundColor="$background"
+      borderColor="$borderColor"
+      borderWidth={1}
+      borderRadius="$6"
+      padding="$4"
+      gap="$4"
+      width="100%"
+      maxWidth={860}
+      alignSelf="center"
+    >
+      {m.event.loading ? (
+        <StatePanel>
+          <Spinner size="large" color="$color9" />
+          <SizableText size="$3" color="$color10">
+            Loading…
+          </SizableText>
+        </StatePanel>
+      ) : m.event.error || !m.event.data ? (
+        <StatePanel>
+          <SizableText size="$5" fontWeight="600" color="$color12">
+            Couldn't load this event
+          </SizableText>
+          <SizableText size="$3" color="$color10" textAlign="center">
+            {m.event.error ?? 'The event type was not found.'}
+          </SizableText>
+        </StatePanel>
+      ) : m.phase === 'done' && m.booking ? (
+        <Confirmation booking={m.booking} timeZone={m.timeZone} onDone={m.reset} />
+      ) : (
+        <YStack gap="$4">
+          <EventHeader
+            event={m.event.data}
+            host={props.host}
+            timeZone={m.timeZone}
+            compact={m.phase === 'form'}
+          />
+
+          {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}
+            />
+          ) : (
+            <>
+              {m.conflict ? <JustTakenBanner /> : null}
+              {m.slots.error ? (
+                <SizableText size="$2" color="$red10">
+                  Couldn't load availability: {m.slots.error}
+                </SizableText>
+              ) : null}
+              <XStack
+                gap="$5"
+                flexDirection="column"
+                $sm={{ flexDirection: 'row' }}
+                alignItems="flex-start"
+              >
+                <MonthCalendar
+                  viewDate={m.viewDate}
+                  availableKeys={m.availableKeys}
+                  selectedDay={m.selectedDay}
+                  onSelectDay={m.selectDay}
+                  onPrev={m.goPrevMonth}
+                  onNext={m.goNextMonth}
+                  atFirstMonth={m.atFirstMonth}
+                  weekStartsOn={m.weekStartsOn}
+                  loading={m.slots.loading}
+                />
+                <TimeSlots
+                  dayKey={m.selectedDay}
+                  slots={m.daySlots}
+                  timeZone={m.timeZone}
+                  onPick={m.selectSlot}
+                  selectedIso={m.selectedSlot}
+                  loading={m.slots.loading && !m.selectedDay}
+                />
+              </XStack>
+              {m.availableKeys.size === 0 && !m.slots.loading && !m.slots.error ? (
+                <SizableText size="$3" color="$color10" textAlign="center">
+                  No availability this month — try the next month.
+                </SizableText>
+              ) : null}
+            </>
+          )}
+        </YStack>
+      )}
+    </YStack>
+  )
+}
+
+function StatePanel({ children }: { children: ReactNode }) {
+  return (
+    <YStack
+      alignItems="center"
+      justifyContent="center"
+      gap="$3"
+      padding="$8"
+      minHeight={220}
+    >
+      {children}
+    </YStack>
+  )
+}
+
+function JustTakenBanner() {
+  return (
+    <YStack
+      backgroundColor="$yellow3"
+      borderColor="$yellow6"
+      borderWidth={1}
+      borderRadius="$4"
+      padding="$2.5"
+    >
+      <SizableText size="$2" color="$yellow11">
+        That time was just taken. We refreshed the calendar — please pick another.
+      </SizableText>
+    </YStack>
+  )
+}

package/src/BookingForm.tsx

@@ -0,0 +1,180 @@
+import { useState, type ReactNode } from 'react'
+import { Button, Input, SizableText, TextArea, XStack, YStack } from 'hanzogui'
+import type { BookingResponses } from './client'
+import { formatBookingWhen } from './time'
+
+export interface BookingFormProps {
+  slotIso: string
+  timeZone: string
+  eventLength: number
+  submitting?: boolean
+  error?: string | null
+  onSubmit: (responses: BookingResponses) => void
+  onBack: () => void
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+/** Attendee details form for the chosen slot. */
+export function BookingForm({
+  slotIso,
+  timeZone,
+  eventLength,
+  submitting,
+  error,
+  onSubmit,
+  onBack,
+}: BookingFormProps) {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [notes, setNotes] = useState('')
+  const [touched, setTouched] = useState(false)
+
+  const nameValid = name.trim().length > 0
+  const emailValid = EMAIL_RE.test(email.trim())
+  const valid = nameValid && emailValid
+
+  const submit = () => {
+    setTouched(true)
+    if (!valid || submitting) return
+    onSubmit({ name: name.trim(), email: email.trim(), notes: notes.trim() || undefined })
+  }
+
+  return (
+    <YStack gap="$3" flex={1} minWidth={240}>
+      <YStack gap="$1">
+        <XStack alignItems="center" gap="$2">
+          <BackLink onPress={onBack} />
+          <SizableText size="$5" fontWeight="700" color="$color12">
+            Enter details
+          </SizableText>
+        </XStack>
+        <SizableText size="$3" color="$color11">
+          {formatBookingWhen(slotIso, timeZone)} · {eventLength} min
+        </SizableText>
+      </YStack>
+
+      <Field
+        label="Name"
+        required
+        invalid={touched && !nameValid}
+        hint="Please enter your name"
+      >
+        <Input
+          value={name}
+          onChangeText={setName}
+          placeholder="Ada Lovelace"
+          autoComplete="name"
+          size="$4"
+        />
+      </Field>
+
+      <Field
+        label="Email"
+        required
+        invalid={touched && !emailValid}
+        hint="Please enter a valid email"
+      >
+        <Input
+          value={email}
+          onChangeText={setEmail}
+          placeholder="ada@example.com"
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoComplete="email"
+          size="$4"
+        />
+      </Field>
+
+      <Field label="Notes" hint="Optional">
+        <TextArea
+          value={notes}
+          onChangeText={setNotes}
+          placeholder="Anything that would help prepare?"
+          numberOfLines={3}
+          size="$4"
+        />
+      </Field>
+
+      {error ? (
+        <YStack
+          backgroundColor="$red3"
+          borderColor="$red6"
+          borderWidth={1}
+          borderRadius="$4"
+          padding="$2.5"
+        >
+          <SizableText size="$2" color="$red11">
+            {error}
+          </SizableText>
+        </YStack>
+      ) : null}
+
+      <XStack gap="$2" justifyContent="flex-end" marginTop="$1">
+        <Button size="$4" chromeless onPress={onBack} disabled={submitting}>
+          Back
+        </Button>
+        <Button
+          size="$4"
+          theme="blue"
+          onPress={submit}
+          disabled={submitting || (touched && !valid)}
+          opacity={submitting ? 0.7 : 1}
+        >
+          {submitting ? 'Booking…' : 'Confirm booking'}
+        </Button>
+      </XStack>
+    </YStack>
+  )
+}
+
+function Field({
+  label,
+  required,
+  invalid,
+  hint,
+  children,
+}: {
+  label: string
+  required?: boolean
+  invalid?: boolean
+  hint?: string
+  children: ReactNode
+}) {
+  return (
+    <YStack gap="$1.5">
+      <SizableText size="$2" color="$color11" fontWeight="600">
+        {label}
+        {required ? <SizableText color="$red10"> *</SizableText> : null}
+      </SizableText>
+      {children}
+      {invalid && hint ? (
+        <SizableText size="$1" color="$red10">
+          {hint}
+        </SizableText>
+      ) : null}
+    </YStack>
+  )
+}
+
+function BackLink({ onPress }: { onPress: () => void }) {
+  return (
+    <YStack
+      width={30}
+      height={30}
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="$4"
+      cursor="pointer"
+      hoverStyle={{ backgroundColor: '$color4' }}
+      pressStyle={{ backgroundColor: '$color6' }}
+      onPress={onPress}
+      aria-label="Back"
+      role="button"
+    >
+      <SizableText size="$6" color="$color11">
+        {'‹'}
+      </SizableText>
+    </YStack>
+  )
+}