@arkipay/booking-widget 0.1.0

package/dist/index.js

@@ -0,0 +1,1686 @@
+"use client";
+import { BotIdClient } from 'botid/client';
+import { createContext, useMemo, useState, useCallback, useEffect, useContext, useReducer } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Temporal } from '@js-temporal/polyfill';
+
+// src/provider.tsx
+var BookingContext = createContext(null);
+function useBookingContext() {
+  const ctx = useContext(BookingContext);
+  if (!ctx) {
+    throw new Error(`useBookingContext must be used within BookingProvider`);
+  }
+  return ctx;
+}
+
+// src/constants.ts
+var ANY_PROVIDER_ID = `any`;
+
+// src/utils/fields.ts
+var emptyCustomerValues = () => ({
+  firstName: ``,
+  lastName: ``,
+  email: ``,
+  phone: ``,
+  address: ``,
+  city: ``,
+  state: ``,
+  zip: ``,
+  notes: ``,
+  customField1: ``,
+  customField2: ``,
+  customField3: ``,
+  customField4: ``,
+  customField5: ``,
+  timezone: typeof Intl !== `undefined` ? Intl.DateTimeFormat().resolvedOptions().timeZone : `UTC`
+});
+var FIELD_KEY_TO_VALUE = {
+  first_name: `firstName`,
+  last_name: `lastName`,
+  email: `email`,
+  phone: `phone`,
+  address: `address`,
+  city: `city`,
+  state: `state`,
+  zip: `zip`,
+  notes: `notes`,
+  custom_1: `customField1`,
+  custom_2: `customField2`,
+  custom_3: `customField3`,
+  custom_4: `customField4`,
+  custom_5: `customField5`
+};
+var FIELD_KEY_TO_LABEL = {
+  first_name: `fields.first_name`,
+  last_name: `fields.last_name`,
+  email: `fields.email`,
+  phone: `fields.phone`,
+  address: `fields.address`,
+  city: `fields.city`,
+  state: `fields.state`,
+  zip: `fields.zip`,
+  notes: `fields.notes`,
+  custom_1: `fields.custom_1`,
+  custom_2: `fields.custom_2`,
+  custom_3: `fields.custom_3`,
+  custom_4: `fields.custom_4`,
+  custom_5: `fields.custom_5`
+};
+function visibleFormFields(fields) {
+  return [...fields].filter((f) => f.display).sort((a, b) => a.sortOrder - b.sortOrder);
+}
+function customerValueKey(fieldKey) {
+  return FIELD_KEY_TO_VALUE[fieldKey];
+}
+function fieldLabelKey(fieldKey) {
+  return FIELD_KEY_TO_LABEL[fieldKey];
+}
+function validateCustomerFields(fields, values) {
+  const errors = {};
+  for (const field of fields) {
+    if (!field.display || !field.required) {
+      continue;
+    }
+    const key = customerValueKey(field.fieldKey);
+    if (!key) {
+      continue;
+    }
+    const value = values[key];
+    if (typeof value !== `string` || value.trim() === ``) {
+      errors[field.fieldKey] = `required`;
+    }
+  }
+  if (fields.some((f) => f.fieldKey === `email` && f.display) && values.email.trim()) {
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email.trim())) {
+      errors.email = `invalid`;
+    }
+  }
+  return errors;
+}
+function customerValuesToAppointmentBody(values) {
+  return {
+    firstName: values.firstName.trim(),
+    lastName: values.lastName.trim(),
+    email: values.email.trim(),
+    phone: values.phone.trim() || null,
+    address: values.address.trim() || null,
+    city: values.city.trim() || null,
+    state: values.state.trim() || null,
+    zip: values.zip.trim() || null,
+    notes: values.notes.trim() || null,
+    customField1: values.customField1.trim() || null,
+    customField2: values.customField2.trim() || null,
+    customField3: values.customField3.trim() || null,
+    customField4: values.customField4.trim() || null,
+    customField5: values.customField5.trim() || null,
+    customerTimezone: values.timezone || null
+  };
+}
+function needsLegalStep(legal) {
+  return legal.displayCookieNotice || legal.displayTerms || legal.displayPrivacy;
+}
+
+// src/hooks/use-booking.ts
+var DEFAULT_TIME_DISPLAY_MODE = `business`;
+function withStep(timeDisplayMode, step) {
+  return { timeDisplayMode, ...step };
+}
+function retainMode(state, step) {
+  return withStep(state.timeDisplayMode, step);
+}
+function createInitialBookingState(prefill) {
+  if (prefill?.serviceId && prefill.providerId) {
+    return withStep(DEFAULT_TIME_DISPLAY_MODE, {
+      step: `date`,
+      serviceId: prefill.serviceId,
+      providerId: prefill.providerId
+    });
+  }
+  if (prefill?.serviceId) {
+    return withStep(DEFAULT_TIME_DISPLAY_MODE, { step: `provider`, serviceId: prefill.serviceId });
+  }
+  return withStep(DEFAULT_TIME_DISPLAY_MODE, { step: `service` });
+}
+function bookingReducer(state, action, tenantConfig) {
+  switch (action.type) {
+    case `prefill`: {
+      return createInitialBookingState({
+        serviceId: action.serviceId,
+        providerId: action.providerId
+      });
+    }
+    case `set_time_display_mode`:
+      return { ...state, timeDisplayMode: action.mode };
+    case `select_service`:
+      return retainMode(state, { step: `provider`, serviceId: action.serviceId });
+    case `select_provider`:
+      if (state.step !== `provider`) {
+        return state;
+      }
+      return retainMode(state, {
+        step: `date`,
+        serviceId: state.serviceId,
+        providerId: action.providerId
+      });
+    case `select_date`:
+      if (state.step !== `date`) {
+        return state;
+      }
+      return retainMode(state, {
+        step: `time`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: action.date
+      });
+    case `select_slot`:
+      if (state.step !== `time`) {
+        return state;
+      }
+      return retainMode(state, {
+        step: `customer`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: state.date,
+        slot: action.slot
+      });
+    case `set_customer`:
+      if (state.step !== `customer`) {
+        return state;
+      }
+      if (tenantConfig && needsLegalStep(tenantConfig.legal)) {
+        return retainMode(state, {
+          step: `legal`,
+          serviceId: state.serviceId,
+          providerId: state.providerId,
+          date: state.date,
+          slot: state.slot,
+          customer: action.customer
+        });
+      }
+      return retainMode(state, {
+        step: `confirm`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: state.date,
+        slot: state.slot,
+        customer: action.customer,
+        consents: {}
+      });
+    case `set_consents`:
+      if (state.step !== `legal`) {
+        return state;
+      }
+      return retainMode(state, {
+        step: `confirm`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: state.date,
+        slot: state.slot,
+        customer: state.customer,
+        consents: action.consents
+      });
+    case `booked`:
+      return retainMode(state, { step: `booked`, appointment: action.appointment });
+    case `back`:
+      return backStep(state);
+    default:
+      return state;
+  }
+}
+function backStep(state) {
+  switch (state.step) {
+    case `provider`:
+      return retainMode(state, { step: `service` });
+    case `date`:
+      return retainMode(state, { step: `provider`, serviceId: state.serviceId });
+    case `time`:
+      return retainMode(state, {
+        step: `date`,
+        serviceId: state.serviceId,
+        providerId: state.providerId
+      });
+    case `customer`:
+      return retainMode(state, {
+        step: `time`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: state.date
+      });
+    case `legal`:
+      return retainMode(state, {
+        step: `customer`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: state.date,
+        slot: state.slot
+      });
+    case `confirm`:
+      return retainMode(state, {
+        step: `customer`,
+        serviceId: state.serviceId,
+        providerId: state.providerId,
+        date: state.date,
+        slot: state.slot
+      });
+    default:
+      return state;
+  }
+}
+function useBookingReducer(initial, tenantConfig) {
+  const [state, dispatch] = useReducer(
+    (current, action) => bookingReducer(current, action, tenantConfig),
+    void 0,
+    () => createInitialBookingState(initial)
+  );
+  return useMemo(() => ({ state, dispatch }), [state, dispatch]);
+}
+function useBooking() {
+  const { bookingState, dispatch, tenantConfig, onBooked } = useBookingContext();
+  return {
+    state: bookingState,
+    dispatch,
+    tenantConfig,
+    onBooked,
+    timeDisplayMode: bookingState.timeDisplayMode
+  };
+}
+
+// src/i18n/en.ts
+var enCatalog = {
+  steps: {
+    service: `Choose a service`,
+    provider: `Choose a provider`,
+    date: `Choose a date`,
+    time: `Choose a time`,
+    customer: `Your details`,
+    legal: `Legal information`,
+    confirm: `Confirm your booking`,
+    booked: `Booking confirmed`
+  },
+  actions: {
+    back: `Back`,
+    continue: `Continue`,
+    confirm: `Confirm booking`,
+    submitting: `Booking\u2026`
+  },
+  service: {
+    empty: `No services are available right now.`,
+    durationMinutes: `{minutes} min`,
+    price: `{amount}`
+  },
+  provider: {
+    empty: `No providers are available for this service.`,
+    any: `Any available provider`
+  },
+  date: {
+    unavailable: `Unavailable`,
+    minHint: `Earliest booking is tomorrow.`
+  },
+  time: {
+    empty: `No time slots are available on this date.`,
+    timezone: `All times in {timezone}`,
+    timezoneHint: `Times shown in {timezone}`,
+    mismatchBanner: `This business uses {businessTimezone}. You are in {customerTimezone}.`,
+    showMyTime: `Show in my time`,
+    showBusinessTime: `Show business time`,
+    yourTimeLabel: `Your time ({timezone})`,
+    businessTimeLabel: `Business time ({timezone})`
+  },
+  customer: {
+    required: `Required`,
+    invalidEmail: `Enter a valid email address.`
+  },
+  legal: {
+    cookie: `Cookie notice`,
+    terms: `Terms & conditions`,
+    privacy: `Privacy policy`,
+    acceptCookie: `I accept the cookie notice`,
+    acceptTerms: `I accept the terms & conditions`,
+    acceptPrivacy: `I accept the privacy policy`,
+    readMore: `Read`
+  },
+  confirm: {
+    summary: `Review your appointment`,
+    service: `Service`,
+    provider: `Provider`,
+    when: `When`,
+    customer: `Customer`,
+    error: `We could not complete your booking. Please try again.`,
+    conflict: `That time slot is no longer available. Please choose another time.`
+  },
+  booked: {
+    reference: `Reference`,
+    message: `Your appointment has been booked.`
+  },
+  disabled: {
+    title: `Booking unavailable`
+  },
+  fields: {
+    first_name: `First name`,
+    last_name: `Last name`,
+    email: `Email`,
+    phone: `Phone`,
+    address: `Address`,
+    city: `City`,
+    state: `State / province`,
+    zip: `Postal code`,
+    notes: `Notes`,
+    custom_1: `Additional information`,
+    custom_2: `Additional information (2)`,
+    custom_3: `Additional information (3)`,
+    custom_4: `Additional information (4)`,
+    custom_5: `Additional information (5)`
+  }
+};
+
+// src/i18n/create-translator.ts
+function getNestedValue(obj, path) {
+  const parts = path.split(`.`);
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || typeof current !== `object` || !(part in current)) {
+      return void 0;
+    }
+    current = current[part];
+  }
+  return typeof current === `string` ? current : void 0;
+}
+function interpolate(template, params) {
+  if (!params) {
+    return template;
+  }
+  return template.replace(/\{(\w+)\}/g, (_, key) => {
+    const value = params[key];
+    return value === void 0 ? `{${key}}` : String(value);
+  });
+}
+function createTranslator(locale, tenantDefaultLanguage) {
+  return (key, params) => {
+    const template = getNestedValue(enCatalog, key);
+    if (!template) {
+      return key;
+    }
+    return interpolate(template, params);
+  };
+}
+
+// ../api-contracts/src/idempotency.ts
+var MUTATION_METHODS = /* @__PURE__ */ new Set([`POST`, `PUT`, `PATCH`, `DELETE`]);
+function createIdempotencyKey() {
+  return crypto.randomUUID();
+}
+function clientMutationIdempotencyHeaders(method) {
+  const normalizedMethod = method.toUpperCase();
+  if (!MUTATION_METHODS.has(normalizedMethod)) {
+    return {};
+  }
+  return { "Idempotency-Key": createIdempotencyKey() };
+}
+
+// src/lib/fetch-booking-client.ts
+var DEFAULT_API_URL = `https://api.easyappts.com`;
+var BookingApiError = class extends Error {
+  constructor(status, code, message) {
+    super(message);
+    this.status = status;
+    this.code = code;
+    this.name = `BookingApiError`;
+  }
+  status;
+  code;
+};
+var BookingClient = class {
+  baseUrl;
+  publishableKey;
+  origin;
+  constructor(opts) {
+    if (!opts.publishableKey.startsWith(`pk_`)) {
+      throw new Error(`BookingClient requires a publishable key (pk_*).`);
+    }
+    this.publishableKey = opts.publishableKey;
+    this.baseUrl = (opts.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, ``);
+    this.origin = opts.origin;
+  }
+  async getTenantConfig() {
+    return this.getJson(`/v1/public/tenant-config`);
+  }
+  async listServices() {
+    const body = await this.getJson(`/v1/public/services`);
+    return body.data;
+  }
+  async listProviders(params) {
+    const query = params?.serviceId ? `?serviceId=${encodeURIComponent(params.serviceId)}` : ``;
+    const body = await this.getJson(
+      `/v1/public/providers${query}`
+    );
+    return body.data;
+  }
+  async getAvailability(params) {
+    const query = new URLSearchParams({
+      providerId: params.providerId,
+      serviceId: params.serviceId,
+      date: params.date
+    });
+    const body = await this.getJson(
+      `/v1/public/availabilities?${query.toString()}`
+    );
+    return body.data;
+  }
+  async getUnavailableDates(params) {
+    const query = new URLSearchParams({
+      providerId: params.providerId,
+      serviceId: params.serviceId,
+      month: params.month
+    });
+    const body = await this.getJson(
+      `/v1/public/unavailable-dates?${query.toString()}`
+    );
+    return body.data;
+  }
+  async createAppointment(body) {
+    return this.postJson(`/v1/public/appointments`, body);
+  }
+  headers() {
+    const headers = {
+      Authorization: `Bearer ${this.publishableKey}`,
+      Accept: `application/json`
+    };
+    if (this.origin) {
+      headers.Origin = this.origin;
+    }
+    return headers;
+  }
+  async getJson(path) {
+    const res = await fetch(`${this.baseUrl}${path}`, { headers: this.headers() });
+    return this.parseJson(res);
+  }
+  async postJson(path, body) {
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      method: `POST`,
+      headers: {
+        ...this.headers(),
+        "Content-Type": `application/json`,
+        ...clientMutationIdempotencyHeaders(`POST`)
+      },
+      body: JSON.stringify(body)
+    });
+    return this.parseJson(res);
+  }
+  async parseJson(res) {
+    const payload = await res.json().catch(() => null);
+    if (!res.ok) {
+      const err = payload !== null && typeof payload === `object` && `error` in payload && payload.error !== null && typeof payload.error === `object` ? payload.error : null;
+      const code = err !== null && `code` in err && typeof err.code === `string` ? err.code : `unknown`;
+      const message = err !== null && `message` in err && typeof err.message === `string` ? err.message : res.statusText;
+      throw new BookingApiError(res.status, code, message);
+    }
+    return payload;
+  }
+};
+
+// src/lib/create-booking-client.ts
+function createBookingClient(opts) {
+  return new BookingClient(opts);
+}
+
+// src/utils/booking-timezone.ts
+function getCustomerTimezone() {
+  if (typeof Intl === `undefined`) {
+    return `UTC`;
+  }
+  return Intl.DateTimeFormat().resolvedOptions().timeZone || `UTC`;
+}
+function resolveBusinessTimezone(params) {
+  const anyId = params.anyProviderId ?? ANY_PROVIDER_ID;
+  if (params.providerId === anyId) {
+    return params.tenantDefaultTimezone;
+  }
+  const provider = params.providers.find((p) => p.id === params.providerId);
+  return provider?.timezone ?? params.tenantDefaultTimezone;
+}
+function allowsTimeDisplayToggle(bookingTimeDisplay) {
+  return bookingTimeDisplay === `customer`;
+}
+function resolveDisplayTimezone(params) {
+  const setting = params.bookingTimeDisplay ?? `business`;
+  const mode = params.timeDisplayMode ?? `business`;
+  if (setting === `business`) {
+    return params.businessTimezone;
+  }
+  if (setting === `customer_only`) {
+    return params.customerTimezone;
+  }
+  return mode === `customer` ? params.customerTimezone : params.businessTimezone;
+}
+function shouldShowSecondaryTimezone(params) {
+  if (!params.zonesDiffer) {
+    return false;
+  }
+  const setting = params.bookingTimeDisplay ?? `business`;
+  return setting === `customer` || setting === `customer_only`;
+}
+var DEFAULT_API_URL2 = `https://api.easyappts.com`;
+function normalizeColorScheme(value) {
+  if (value === `dark` || value === `light` || value === `system`) {
+    return value;
+  }
+  return void 0;
+}
+function readUrlPrefill() {
+  if (typeof window === `undefined`) {
+    return {};
+  }
+  const params = new URLSearchParams(window.location.search);
+  const result = {};
+  const serviceId = params.get(`service`);
+  const providerId = params.get(`provider`);
+  if (serviceId) {
+    result.serviceId = serviceId;
+  }
+  if (providerId) {
+    result.providerId = providerId;
+  }
+  return result;
+}
+function BookingProvider({
+  publishableKey,
+  apiUrl = DEFAULT_API_URL2,
+  locale,
+  theme = {},
+  onBooked,
+  initialServiceId,
+  initialProviderId,
+  origin,
+  className,
+  style,
+  botProtection = true,
+  children
+}) {
+  const resolvedApiUrl = apiUrl.replace(/\/$/, ``);
+  const client = useMemo(
+    () => createBookingClient({ publishableKey, apiUrl: resolvedApiUrl, origin }),
+    [publishableKey, resolvedApiUrl, origin]
+  );
+  const [tenantConfig, setTenantConfig] = useState(null);
+  const [tenantConfigLoading, setTenantConfigLoading] = useState(true);
+  const [tenantConfigError, setTenantConfigError] = useState(null);
+  const prefill = useMemo(() => {
+    const fromUrl = readUrlPrefill();
+    return {
+      serviceId: initialServiceId ?? fromUrl.serviceId,
+      providerId: initialProviderId ?? fromUrl.providerId
+    };
+  }, [initialProviderId, initialServiceId]);
+  const { state: bookingState, dispatch } = useBookingReducer(prefill, tenantConfig);
+  const customerTimezone = useMemo(() => getCustomerTimezone(), []);
+  const setTimeDisplayMode = useCallback(
+    (mode) => {
+      dispatch({ type: `set_time_display_mode`, mode });
+    },
+    [dispatch]
+  );
+  useEffect(() => {
+    if (prefill.serviceId || prefill.providerId) {
+      dispatch({
+        type: `prefill`,
+        serviceId: prefill.serviceId,
+        providerId: prefill.providerId
+      });
+    }
+  }, [dispatch, prefill.providerId, prefill.serviceId]);
+  useEffect(() => {
+    let cancelled = false;
+    setTenantConfigLoading(true);
+    setTenantConfigError(null);
+    void client.getTenantConfig().then((config) => {
+      if (!cancelled) {
+        setTenantConfig(config);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setTenantConfigError(err instanceof Error ? err.message : `Failed to load settings`);
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setTenantConfigLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+  const resolvedLocale = locale ?? tenantConfig?.localization.defaultLanguage ?? `en`;
+  const t = useMemo(
+    () => createTranslator(resolvedLocale, tenantConfig?.localization.defaultLanguage),
+    [resolvedLocale, tenantConfig?.localization.defaultLanguage]
+  );
+  const cssVars = useMemo(() => {
+    const vars = {};
+    if (tenantConfig?.business.brandColor) {
+      vars[`--ea-brand-fallback`] = tenantConfig.business.brandColor;
+    }
+    if (theme.brandColor) vars[`--ea-brand`] = theme.brandColor;
+    if (theme.onBrandColor) vars[`--ea-on-brand`] = theme.onBrandColor;
+    if (theme.textColor) vars[`--ea-text`] = theme.textColor;
+    if (theme.mutedColor) vars[`--ea-muted`] = theme.mutedColor;
+    if (theme.borderColor) vars[`--ea-border`] = theme.borderColor;
+    if (theme.surfaceColor) vars[`--ea-surface`] = theme.surfaceColor;
+    if (theme.errorColor) vars[`--ea-error`] = theme.errorColor;
+    if (theme.borderRadius) vars[`--ea-radius`] = theme.borderRadius;
+    if (theme.fontFamily) vars[`--ea-font`] = theme.fontFamily;
+    if (theme.maxWidth) vars[`--ea-max-width`] = theme.maxWidth;
+    return vars;
+  }, [
+    tenantConfig?.business.brandColor,
+    theme.brandColor,
+    theme.onBrandColor,
+    theme.textColor,
+    theme.mutedColor,
+    theme.borderColor,
+    theme.surfaceColor,
+    theme.errorColor,
+    theme.borderRadius,
+    theme.fontFamily,
+    theme.maxWidth
+  ]);
+  const colorScheme = theme.colorScheme ?? normalizeColorScheme(tenantConfig?.business.theme);
+  const rootStyle = useMemo(
+    () => ({ ...cssVars, ...style }),
+    [cssVars, style]
+  );
+  const rootClassName = className ? `ea-booking-widget ${className}` : `ea-booking-widget`;
+  const value = useMemo(
+    () => ({
+      client,
+      apiUrl: resolvedApiUrl,
+      tenantConfig,
+      tenantConfigLoading,
+      tenantConfigError,
+      locale: resolvedLocale,
+      theme,
+      t,
+      bookingState,
+      dispatch,
+      customerTimezone,
+      timeDisplayMode: bookingState.timeDisplayMode,
+      setTimeDisplayMode,
+      onBooked
+    }),
+    [
+      bookingState,
+      client,
+      customerTimezone,
+      dispatch,
+      onBooked,
+      setTimeDisplayMode,
+      resolvedApiUrl,
+      resolvedLocale,
+      t,
+      tenantConfig,
+      tenantConfigError,
+      tenantConfigLoading,
+      theme
+    ]
+  );
+  return /* @__PURE__ */ jsxs(BookingContext.Provider, { value, children: [
+    botProtection ? /* @__PURE__ */ jsx(BotIdClient, { protect: [{ path: `/v1/public/appointments`, method: `POST` }] }) : null,
+    /* @__PURE__ */ jsx("div", { className: rootClassName, "data-theme": colorScheme, style: rootStyle, children })
+  ] });
+}
+
+// src/hooks/use-tenant-config.ts
+function useTenantConfig() {
+  const { tenantConfig, tenantConfigLoading, tenantConfigError } = useBookingContext();
+  return { tenantConfig, loading: tenantConfigLoading, error: tenantConfigError };
+}
+function useProviders(serviceId) {
+  const { client } = useBookingContext();
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const reload = useCallback(async () => {
+    if (!serviceId) {
+      setData([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const providers = await client.listProviders({ serviceId });
+      setData(providers);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to load providers`);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, serviceId]);
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+  return { providers: data, loading, error, reload };
+}
+
+// src/hooks/use-booking-timezones.ts
+function useBookingTimezones(providerId, serviceId) {
+  const { customerTimezone, bookingState } = useBookingContext();
+  const { tenantConfig } = useTenantConfig();
+  const { providers } = useProviders(serviceId);
+  const bookingTimeDisplay = tenantConfig?.booking.bookingTimeDisplay;
+  const businessTimezone = useMemo(() => {
+    if (!tenantConfig) {
+      return `UTC`;
+    }
+    if (providerId === void 0) {
+      return tenantConfig.localization.defaultTimezone;
+    }
+    return resolveBusinessTimezone({
+      providerId,
+      providers,
+      tenantDefaultTimezone: tenantConfig.localization.defaultTimezone
+    });
+  }, [providerId, providers, tenantConfig]);
+  const displayTimezone = useMemo(
+    () => resolveDisplayTimezone({
+      businessTimezone,
+      customerTimezone,
+      bookingTimeDisplay,
+      timeDisplayMode: bookingState.timeDisplayMode
+    }),
+    [
+      bookingState.timeDisplayMode,
+      bookingTimeDisplay,
+      businessTimezone,
+      customerTimezone
+    ]
+  );
+  const zonesDiffer = customerTimezone !== businessTimezone;
+  const secondaryTimezone = useMemo(() => {
+    if (!shouldShowSecondaryTimezone({
+      zonesDiffer,
+      bookingTimeDisplay
+    })) {
+      return null;
+    }
+    return displayTimezone === businessTimezone ? customerTimezone : businessTimezone;
+  }, [bookingTimeDisplay, businessTimezone, customerTimezone, displayTimezone, zonesDiffer]);
+  return {
+    businessTimezone,
+    customerTimezone,
+    displayTimezone,
+    secondaryTimezone,
+    zonesDiffer,
+    bookingTimeDisplay,
+    timeDisplayMode: bookingState.timeDisplayMode
+  };
+}
+function todayInZone(timeZone) {
+  return Temporal.Now.zonedDateTimeISO(timeZone).toPlainDate();
+}
+function minBookableFromToday(today) {
+  return today.add({ days: 1 });
+}
+function minBookableDate(timeZone) {
+  return minBookableFromToday(todayInZone(timeZone));
+}
+function maxBookableFromToday(today, futureBookingLimitDays) {
+  return today.add({ days: futureBookingLimitDays });
+}
+function maxBookableDate(futureBookingLimitDays, timeZone) {
+  return maxBookableFromToday(todayInZone(timeZone), futureBookingLimitDays);
+}
+function formatCalendarDate(date) {
+  return date.toString();
+}
+function startOfMonth(date) {
+  return date.with({ day: 1 });
+}
+function formatMonthKey(date) {
+  const y = date.year;
+  const m = String(date.month).padStart(2, `0`);
+  return `${y}-${m}`;
+}
+function buildMonthDays(month, firstWeekday) {
+  const start = startOfMonth(month);
+  const jsDay = start.dayOfWeek % 7;
+  const offset = firstWeekday === `monday` ? (jsDay + 6) % 7 : firstWeekday === `saturday` ? (jsDay + 1) % 7 : jsDay;
+  const cells = Array.from({ length: offset }, () => null);
+  let cursor = start;
+  while (cursor.month === start.month) {
+    cells.push(cursor);
+    cursor = cursor.add({ days: 1 });
+  }
+  while (cells.length % 7 !== 0) {
+    cells.push(null);
+  }
+  return cells;
+}
+function isDateInRange(value, min, max) {
+  return value >= min && value <= max;
+}
+function formatSlotTime(iso, locale, timeZone) {
+  return new Intl.DateTimeFormat(locale, {
+    hour: `numeric`,
+    minute: `2-digit`,
+    timeZone
+  }).format(new Date(iso));
+}
+function formatSlotDate(iso, locale, timeZone) {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: `long`,
+    year: `numeric`,
+    month: `long`,
+    day: `numeric`,
+    timeZone
+  }).format(new Date(iso));
+}
+function formatSlotDateTimeDual(iso, locale, primaryTz, secondaryTz) {
+  const primary = `${formatSlotDate(iso, locale, primaryTz)} ${formatSlotTime(iso, locale, primaryTz)}`;
+  if (!secondaryTz || secondaryTz === primaryTz) {
+    return primary;
+  }
+  return `${primary} (${formatSlotTime(iso, locale, secondaryTz)})`;
+}
+function SlotTimeDisplay({
+  iso,
+  displayTimezone,
+  secondaryTimezone,
+  customerTimezone,
+  variant = `time`
+}) {
+  const { locale, t } = useBookingContext();
+  const primary = variant === `datetime` ? `${formatSlotDate(iso, locale, displayTimezone)} ${formatSlotTime(iso, locale, displayTimezone)}` : formatSlotTime(iso, locale, displayTimezone);
+  if (!secondaryTimezone) {
+    return /* @__PURE__ */ jsx("span", { children: primary });
+  }
+  const secondaryLabel = secondaryTimezone === customerTimezone ? t(`time.yourTimeLabel`, { timezone: secondaryTimezone }) : t(`time.businessTimeLabel`, { timezone: secondaryTimezone });
+  return /* @__PURE__ */ jsxs("span", { className: "ea-slot-time-display", children: [
+    /* @__PURE__ */ jsx("span", { children: primary }),
+    /* @__PURE__ */ jsxs("span", { className: "ea-time-secondary", children: [
+      secondaryLabel,
+      ": ",
+      formatSlotTime(iso, locale, secondaryTimezone)
+    ] })
+  ] });
+}
+function TimezoneMismatchBanner({
+  businessTimezone,
+  customerTimezone,
+  timeDisplayMode,
+  bookingTimeDisplay
+}) {
+  const { t, setTimeDisplayMode } = useBookingContext();
+  if (customerTimezone === businessTimezone) {
+    return null;
+  }
+  const showToggle = allowsTimeDisplayToggle(bookingTimeDisplay);
+  const nextMode = timeDisplayMode === `business` ? `customer` : `business`;
+  return /* @__PURE__ */ jsxs("div", { className: "ea-timezone-banner", role: "note", children: [
+    /* @__PURE__ */ jsx("p", { className: "ea-timezone-banner-text", children: t(`time.mismatchBanner`, { businessTimezone, customerTimezone }) }),
+    showToggle ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ea-time-toggle ea-link",
+        onClick: () => setTimeDisplayMode(nextMode),
+        children: timeDisplayMode === `business` ? t(`time.showMyTime`) : t(`time.showBusinessTime`)
+      }
+    ) : null
+  ] });
+}
+function StepTitle({
+  children,
+  id
+}) {
+  return /* @__PURE__ */ jsx("h2", { id, className: "ea-step-title", children });
+}
+function Button({
+  variant = `primary`,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: variant === `primary` ? `ea-btn ea-btn-primary` : `ea-btn ea-btn-secondary`,
+      ...props
+    }
+  );
+}
+function Field({
+  label,
+  error,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "ea-field", children: [
+    /* @__PURE__ */ jsx("span", { className: "ea-field-label", children: label }),
+    children,
+    error ? /* @__PURE__ */ jsx("span", { className: "ea-field-error", children: error }) : null
+  ] });
+}
+function TextInput(props) {
+  return /* @__PURE__ */ jsx("input", { className: "ea-input", ...props });
+}
+function TextArea(props) {
+  return /* @__PURE__ */ jsx("textarea", { className: "ea-input ea-textarea", ...props });
+}
+function LoadingState({ label }) {
+  return /* @__PURE__ */ jsx("p", { className: "ea-muted", children: label });
+}
+function ErrorState({ message }) {
+  return /* @__PURE__ */ jsx("p", { className: "ea-error", role: "alert", children: message });
+}
+function BookedSummary() {
+  const { t } = useBookingContext();
+  const { state } = useBooking();
+  const appointment = state.step === `booked` ? state.appointment : void 0;
+  const {
+    businessTimezone,
+    customerTimezone,
+    displayTimezone,
+    secondaryTimezone,
+    timeDisplayMode,
+    bookingTimeDisplay
+  } = useBookingTimezones(appointment?.providerId, appointment?.serviceId);
+  if (state.step !== `booked`) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step ea-booked", "aria-labelledby": "ea-step-booked", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-booked", children: t(`steps.booked`) }),
+    /* @__PURE__ */ jsx("p", { children: t(`booked.message`) }),
+    /* @__PURE__ */ jsxs("p", { className: "ea-booked-ref", children: [
+      t(`booked.reference`),
+      ": ",
+      /* @__PURE__ */ jsx("strong", { children: state.appointment.hash })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TimezoneMismatchBanner,
+      {
+        businessTimezone,
+        customerTimezone,
+        timeDisplayMode,
+        bookingTimeDisplay
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "ea-muted", children: /* @__PURE__ */ jsx(
+      SlotTimeDisplay,
+      {
+        iso: state.appointment.startAt,
+        displayTimezone,
+        secondaryTimezone,
+        customerTimezone,
+        variant: `datetime`
+      }
+    ) })
+  ] });
+}
+function useServices() {
+  const { client } = useBookingContext();
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const reload = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const services = await client.listServices();
+      setData(services);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to load services`);
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+  return { services: data, loading, error, reload };
+}
+async function resolveProviderForAny(client, providerIds, serviceId, date, startAt) {
+  for (const providerId of providerIds) {
+    const slots = await client.getAvailability({ providerId, serviceId, date });
+    if (slots.some((slot) => slot.startAt === startAt)) {
+      return providerId;
+    }
+  }
+  return null;
+}
+function ConfirmStep() {
+  const { t, dispatch, client, onBooked } = useBookingContext();
+  const { state } = useBooking();
+  const { tenantConfig } = useTenantConfig();
+  const { services } = useServices();
+  const serviceId = state.step === `confirm` ? state.serviceId : void 0;
+  const { providers } = useProviders(serviceId);
+  const providerId = state.step === `confirm` ? state.providerId : void 0;
+  const {
+    businessTimezone,
+    customerTimezone,
+    displayTimezone,
+    secondaryTimezone,
+    timeDisplayMode,
+    bookingTimeDisplay
+  } = useBookingTimezones(providerId, serviceId);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  if (state.step !== `confirm` || !tenantConfig) {
+    return null;
+  }
+  const confirm = state;
+  const service = services.find((s) => s.id === confirm.serviceId);
+  const provider = confirm.providerId === ANY_PROVIDER_ID ? null : providers.find((p) => p.id === confirm.providerId);
+  async function handleConfirm() {
+    setSubmitting(true);
+    setError(null);
+    try {
+      let providerId2;
+      if (confirm.providerId === ANY_PROVIDER_ID) {
+        const eligible = providers.filter((p) => service?.providerIds.includes(p.id) ?? true).map((p) => p.id);
+        const resolved = await resolveProviderForAny(
+          client,
+          eligible,
+          confirm.serviceId,
+          confirm.date,
+          confirm.slot.startAt
+        );
+        if (!resolved) {
+          setError(t(`confirm.conflict`));
+          return;
+        }
+        providerId2 = resolved;
+      } else {
+        providerId2 = confirm.providerId;
+      }
+      const appointment = await client.createAppointment({
+        providerId: providerId2,
+        serviceId: confirm.serviceId,
+        startAt: confirm.slot.startAt,
+        ...customerValuesToAppointmentBody(confirm.customer),
+        consents: confirm.consents
+      });
+      dispatch({ type: `booked`, appointment });
+      onBooked?.(appointment);
+    } catch (err) {
+      if (err instanceof BookingApiError && err.status === 409) {
+        setError(t(`confirm.conflict`));
+      } else {
+        setError(t(`confirm.error`));
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-confirm", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-confirm", children: t(`steps.confirm`) }),
+    /* @__PURE__ */ jsx("p", { className: "ea-muted", children: t(`confirm.summary`) }),
+    /* @__PURE__ */ jsx(
+      TimezoneMismatchBanner,
+      {
+        businessTimezone,
+        customerTimezone,
+        timeDisplayMode,
+        bookingTimeDisplay
+      }
+    ),
+    /* @__PURE__ */ jsxs("dl", { className: "ea-summary", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: t(`confirm.service`) }),
+        /* @__PURE__ */ jsx("dd", { children: service?.name ?? confirm.serviceId })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: t(`confirm.provider`) }),
+        /* @__PURE__ */ jsx("dd", { children: confirm.providerId === ANY_PROVIDER_ID ? t(`provider.any`) : provider?.displayName ?? confirm.providerId })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: t(`confirm.when`) }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(
+          SlotTimeDisplay,
+          {
+            iso: confirm.slot.startAt,
+            displayTimezone,
+            secondaryTimezone,
+            customerTimezone,
+            variant: `datetime`
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: t(`confirm.customer`) }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          confirm.customer.firstName,
+          " ",
+          confirm.customer.lastName,
+          " \u2014 ",
+          confirm.customer.email
+        ] })
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsx(ErrorState, { message: error }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ea-step-actions", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => dispatch({ type: `back` }), disabled: submitting, children: t(`actions.back`) }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => void handleConfirm(), disabled: submitting, children: submitting ? t(`actions.submitting`) : t(`actions.confirm`) })
+    ] })
+  ] });
+}
+function CustomerForm() {
+  const { t, dispatch } = useBookingContext();
+  const { state } = useBooking();
+  const { tenantConfig } = useTenantConfig();
+  const [values, setValues] = useState(emptyCustomerValues);
+  const [errors, setErrors] = useState({});
+  if (state.step !== `customer` || !tenantConfig) {
+    return null;
+  }
+  const fields = visibleFormFields(tenantConfig.formFields);
+  function setField(fieldKey, value) {
+    const key = customerValueKey(fieldKey);
+    if (!key) {
+      return;
+    }
+    setValues((current) => ({ ...current, [key]: value }));
+  }
+  function handleSubmit() {
+    const nextErrors = validateCustomerFields(tenantConfig.formFields, values);
+    setErrors(nextErrors);
+    if (Object.keys(nextErrors).length > 0) {
+      return;
+    }
+    dispatch({ type: `set_customer`, customer: values });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-customer", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-customer", children: t(`steps.customer`) }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "ea-form",
+        onSubmit: (event) => {
+          event.preventDefault();
+          handleSubmit();
+        },
+        children: [
+          fields.map((field) => {
+            const valueKey = customerValueKey(field.fieldKey);
+            if (!valueKey) {
+              return null;
+            }
+            const label = field.label ?? (fieldLabelKey(field.fieldKey) ? t(fieldLabelKey(field.fieldKey)) : field.fieldKey);
+            const value = values[valueKey];
+            const error = errors[field.fieldKey];
+            const isNotes = field.fieldKey === `notes`;
+            return /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: `${label}${field.required ? ` *` : ``}`,
+                error: error === `required` ? t(`customer.required`) : error === `invalid` ? t(`customer.invalidEmail`) : void 0,
+                children: isNotes ? /* @__PURE__ */ jsx(
+                  TextArea,
+                  {
+                    value,
+                    onChange: (e) => setField(field.fieldKey, e.target.value),
+                    rows: 3
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    type: field.fieldKey === `email` ? `email` : `text`,
+                    value,
+                    onChange: (e) => setField(field.fieldKey, e.target.value),
+                    autoComplete: field.fieldKey === `email` ? `email` : void 0
+                  }
+                )
+              },
+              field.fieldKey
+            );
+          }),
+          /* @__PURE__ */ jsxs("div", { className: "ea-step-actions", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: () => dispatch({ type: `back` }), children: t(`actions.back`) }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", children: t(`actions.continue`) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function useUnavailableDates(params) {
+  const { client } = useBookingContext();
+  const [dates, setDates] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const reload = useCallback(async () => {
+    if (!params.serviceId || !params.month) {
+      setDates([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const providerIds = params.providerId === ANY_PROVIDER_ID ? params.providerIdsForAny ?? [] : params.providerId ? [params.providerId] : [];
+      if (providerIds.length === 0) {
+        setDates([]);
+        return;
+      }
+      const lists = await Promise.all(
+        providerIds.map(
+          (providerId) => client.getUnavailableDates({
+            providerId,
+            serviceId: params.serviceId,
+            month: params.month
+          })
+        )
+      );
+      const merged = /* @__PURE__ */ new Set();
+      for (const list of lists) {
+        for (const date of list) {
+          merged.add(date);
+        }
+      }
+      setDates([...merged]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to load unavailable dates`);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, params.month, params.providerId, params.providerIdsForAny, params.serviceId]);
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+  return { unavailableDates: dates, loading, error, reload };
+}
+function DatePicker() {
+  const { t, dispatch } = useBookingContext();
+  const { state } = useBooking();
+  const { tenantConfig } = useTenantConfig();
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(minBookableDate(`UTC`)));
+  const serviceId = state.step === `date` ? state.serviceId : void 0;
+  const providerId = state.step === `date` ? state.providerId : void 0;
+  const { providers } = useProviders(serviceId);
+  const providerIdsForAny = useMemo(
+    () => providers.map((p) => p.id),
+    [providers]
+  );
+  const { businessTimezone, customerTimezone, timeDisplayMode, bookingTimeDisplay } = useBookingTimezones(providerId, serviceId);
+  const month = formatMonthKey(viewMonth);
+  const { unavailableDates, loading, error } = useUnavailableDates({
+    serviceId,
+    providerId,
+    month,
+    providerIdsForAny
+  });
+  if (state.step !== `date` || !tenantConfig) {
+    return null;
+  }
+  const minDate = formatCalendarDate(minBookableDate(businessTimezone));
+  const maxDate = formatCalendarDate(
+    maxBookableDate(tenantConfig.booking.futureBookingLimitDays, businessTimezone)
+  );
+  const unavailable = new Set(unavailableDates);
+  const days = buildMonthDays(viewMonth, tenantConfig.localization.firstWeekday);
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-date", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-date", children: t(`steps.date`) }),
+    /* @__PURE__ */ jsx(
+      TimezoneMismatchBanner,
+      {
+        businessTimezone,
+        customerTimezone,
+        timeDisplayMode,
+        bookingTimeDisplay
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "ea-muted", children: t(`date.minHint`) }),
+    /* @__PURE__ */ jsxs("div", { className: "ea-calendar-nav", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setViewMonth((m) => startOfMonth(m.subtract({ months: 1 }))),
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ea-calendar-month", children: month }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setViewMonth((m) => startOfMonth(m.add({ months: 1 }))),
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx(LoadingState, { label: "\u2026" }) : null,
+    error ? /* @__PURE__ */ jsx(ErrorState, { message: error }) : null,
+    /* @__PURE__ */ jsx("div", { className: "ea-calendar-grid", role: "grid", children: days.map((day, index) => {
+      if (!day) {
+        return /* @__PURE__ */ jsx("span", { className: "ea-calendar-pad" }, `pad-${index}`);
+      }
+      const value = formatCalendarDate(day);
+      const inRange = isDateInRange(value, minDate, maxDate);
+      const isUnavailable = unavailable.has(value) || !inRange;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: isUnavailable ? `ea-calendar-day ea-calendar-day-disabled` : `ea-calendar-day`,
+          disabled: isUnavailable,
+          onClick: () => dispatch({ type: `select_date`, date: value }),
+          "aria-label": value,
+          children: day.day
+        },
+        value
+      );
+    }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => dispatch({ type: `back` }), children: t(`actions.back`) })
+  ] });
+}
+function DisabledBooking() {
+  const { t } = useBookingContext();
+  const { tenantConfig } = useTenantConfig();
+  if (!tenantConfig?.booking.disableBooking) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step ea-disabled", "aria-labelledby": "ea-disabled-title", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-disabled-title", children: t(`disabled.title`) }),
+    /* @__PURE__ */ jsx("p", { children: tenantConfig.booking.disableBookingMessage ?? t(`disabled.title`) })
+  ] });
+}
+function LegalGate() {
+  const { t, dispatch } = useBookingContext();
+  const { state } = useBooking();
+  const { tenantConfig } = useTenantConfig();
+  const [consents, setConsents] = useState({});
+  const [activeModal, setActiveModal] = useState(null);
+  if (state.step !== `legal` || !tenantConfig) {
+    return null;
+  }
+  const { legal } = tenantConfig;
+  function toggle(key) {
+    setConsents((current) => ({ ...current, [key]: !current[key] }));
+  }
+  function handleContinue() {
+    dispatch({ type: `set_consents`, consents });
+  }
+  const modalContent = activeModal === `cookie` ? legal.cookieNoticeContent : activeModal === `terms` ? legal.termsContent : activeModal === `privacy` ? legal.privacyContent : null;
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-legal", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-legal", children: t(`steps.legal`) }),
+    /* @__PURE__ */ jsxs("div", { className: "ea-legal-list", children: [
+      legal.displayCookieNotice ? /* @__PURE__ */ jsxs(Field, { label: "", children: [
+        /* @__PURE__ */ jsxs("label", { className: "ea-checkbox", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: consents.cookie === true,
+              onChange: () => toggle(`cookie`)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: t(`legal.acceptCookie`) })
+        ] }),
+        legal.cookieNoticeContent ? /* @__PURE__ */ jsx("button", { type: "button", className: "ea-link", onClick: () => setActiveModal(`cookie`), children: t(`legal.readMore`) }) : null
+      ] }) : null,
+      legal.displayTerms ? /* @__PURE__ */ jsxs(Field, { label: "", children: [
+        /* @__PURE__ */ jsxs("label", { className: "ea-checkbox", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: consents.terms === true,
+              onChange: () => toggle(`terms`)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: t(`legal.acceptTerms`) })
+        ] }),
+        legal.termsContent ? /* @__PURE__ */ jsx("button", { type: "button", className: "ea-link", onClick: () => setActiveModal(`terms`), children: t(`legal.readMore`) }) : null
+      ] }) : null,
+      legal.displayPrivacy ? /* @__PURE__ */ jsxs(Field, { label: "", children: [
+        /* @__PURE__ */ jsxs("label", { className: "ea-checkbox", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: consents.privacy === true,
+              onChange: () => toggle(`privacy`)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: t(`legal.acceptPrivacy`) })
+        ] }),
+        legal.privacyContent ? /* @__PURE__ */ jsx("button", { type: "button", className: "ea-link", onClick: () => setActiveModal(`privacy`), children: t(`legal.readMore`) }) : null
+      ] }) : null
+    ] }),
+    activeModal && modalContent ? /* @__PURE__ */ jsxs("dialog", { open: true, className: "ea-modal", children: [
+      /* @__PURE__ */ jsx("div", { className: "ea-modal-body", children: modalContent }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setActiveModal(null), children: t(`actions.back`) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ea-step-actions", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => dispatch({ type: `back` }), children: t(`actions.back`) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleContinue, children: t(`actions.continue`) })
+    ] })
+  ] });
+}
+function ProviderPicker() {
+  const { t, dispatch } = useBookingContext();
+  const { state } = useBooking();
+  const { tenantConfig } = useTenantConfig();
+  const serviceId = state.step === `provider` ? state.serviceId : void 0;
+  const { providers, loading, error } = useProviders(serviceId);
+  if (state.step !== `provider`) {
+    return null;
+  }
+  const showAny = tenantConfig?.booking.displayAnyProvider ?? false;
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-provider", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-provider", children: t(`steps.provider`) }),
+    loading ? /* @__PURE__ */ jsx(LoadingState, { label: "\u2026" }) : null,
+    error ? /* @__PURE__ */ jsx(ErrorState, { message: error }) : null,
+    /* @__PURE__ */ jsxs("ul", { className: "ea-card-list", children: [
+      showAny ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ea-card",
+          onClick: () => dispatch({ type: `select_provider`, providerId: ANY_PROVIDER_ID }),
+          children: /* @__PURE__ */ jsx("span", { className: "ea-card-title", children: t(`provider.any`) })
+        }
+      ) }) : null,
+      providers.map((provider) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ea-card",
+          onClick: () => dispatch({ type: `select_provider`, providerId: provider.id }),
+          children: /* @__PURE__ */ jsx("span", { className: "ea-card-title", children: provider.displayName })
+        }
+      ) }, provider.id))
+    ] }),
+    !loading && providers.length === 0 && !showAny ? /* @__PURE__ */ jsx("p", { className: "ea-muted", children: t(`provider.empty`) }) : null,
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => dispatch({ type: `back` }), children: t(`actions.back`) })
+  ] });
+}
+function ServicePicker() {
+  const { t, dispatch } = useBookingContext();
+  const { state } = useBooking();
+  const { services, loading, error } = useServices();
+  if (state.step !== `service`) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-service", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-service", children: t(`steps.service`) }),
+    loading ? /* @__PURE__ */ jsx(LoadingState, { label: "\u2026" }) : null,
+    error ? /* @__PURE__ */ jsx(ErrorState, { message: error }) : null,
+    !loading && !error && services.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ea-muted", children: t(`service.empty`) }) : null,
+    /* @__PURE__ */ jsx("ul", { className: "ea-card-list", children: services.map((service) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ea-card",
+        onClick: () => dispatch({ type: `select_service`, serviceId: service.id }),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ea-card-title", children: service.name }),
+          service.description ? /* @__PURE__ */ jsx("span", { className: "ea-card-desc", children: service.description }) : null,
+          /* @__PURE__ */ jsx("span", { className: "ea-card-meta", children: t(`service.durationMinutes`, { minutes: service.durationMinutes }) })
+        ]
+      }
+    ) }, service.id)) }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: true, children: t(`actions.back`) })
+  ] });
+}
+function useAvailability(params) {
+  const { client } = useBookingContext();
+  const [slots, setSlots] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const reload = useCallback(async () => {
+    if (!params.serviceId || !params.date) {
+      setSlots([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      if (params.providerId && params.providerId !== ANY_PROVIDER_ID) {
+        const data = await client.getAvailability({
+          providerId: params.providerId,
+          serviceId: params.serviceId,
+          date: params.date
+        });
+        setSlots(data);
+        return;
+      }
+      const ids = params.providerIdsForAny ?? [];
+      if (ids.length === 0) {
+        setSlots([]);
+        return;
+      }
+      const results = await Promise.all(
+        ids.map(
+          (providerId) => client.getAvailability({
+            providerId,
+            serviceId: params.serviceId,
+            date: params.date
+          })
+        )
+      );
+      const merged = /* @__PURE__ */ new Map();
+      for (const list of results) {
+        for (const slot of list) {
+          merged.set(slot.startAt, slot);
+        }
+      }
+      setSlots(
+        [...merged.values()].sort((a, b) => a.startAt.localeCompare(b.startAt))
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to load availability`);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, params.date, params.providerId, params.providerIdsForAny, params.serviceId]);
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+  return { slots, loading, error, reload };
+}
+function TimeSlotPicker() {
+  const { t, dispatch } = useBookingContext();
+  const { state } = useBooking();
+  const serviceId = state.step === `time` ? state.serviceId : void 0;
+  const providerId = state.step === `time` ? state.providerId : void 0;
+  const date = state.step === `time` ? state.date : void 0;
+  const { providers } = useProviders(serviceId);
+  const providerIdsForAny = useMemo(() => providers.map((p) => p.id), [providers]);
+  const {
+    businessTimezone,
+    customerTimezone,
+    displayTimezone,
+    secondaryTimezone,
+    timeDisplayMode,
+    bookingTimeDisplay
+  } = useBookingTimezones(providerId, serviceId);
+  const { slots, loading, error } = useAvailability({
+    serviceId,
+    providerId,
+    date,
+    providerIdsForAny
+  });
+  const [selectedStartAt, setSelectedStartAt] = useState(null);
+  useEffect(() => {
+    if (slots.length > 0) {
+      setSelectedStartAt(slots[0].startAt);
+    } else {
+      setSelectedStartAt(null);
+    }
+  }, [slots]);
+  if (state.step !== `time`) {
+    return null;
+  }
+  const selected = slots.find((s) => s.startAt === selectedStartAt) ?? null;
+  return /* @__PURE__ */ jsxs("section", { className: "ea-step", "aria-labelledby": "ea-step-time", children: [
+    /* @__PURE__ */ jsx(StepTitle, { id: "ea-step-time", children: t(`steps.time`) }),
+    /* @__PURE__ */ jsx(
+      TimezoneMismatchBanner,
+      {
+        businessTimezone,
+        customerTimezone,
+        timeDisplayMode,
+        bookingTimeDisplay
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "ea-muted", children: t(`time.timezoneHint`, { timezone: displayTimezone }) }),
+    loading ? /* @__PURE__ */ jsx(LoadingState, { label: "\u2026" }) : null,
+    error ? /* @__PURE__ */ jsx(ErrorState, { message: error }) : null,
+    !loading && slots.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ea-muted", children: t(`time.empty`) }) : null,
+    /* @__PURE__ */ jsx("ul", { className: "ea-slot-list", children: slots.map((slot) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: slot.startAt === selectedStartAt ? `ea-slot ea-slot-selected` : `ea-slot`,
+        onClick: () => setSelectedStartAt(slot.startAt),
+        children: /* @__PURE__ */ jsx(
+          SlotTimeDisplay,
+          {
+            iso: slot.startAt,
+            displayTimezone,
+            secondaryTimezone,
+            customerTimezone
+          }
+        )
+      }
+    ) }, slot.startAt)) }),
+    /* @__PURE__ */ jsxs("div", { className: "ea-step-actions", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => dispatch({ type: `back` }), children: t(`actions.back`) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: !selected,
+          onClick: () => selected && dispatch({ type: `select_slot`, slot: selected }),
+          children: t(`actions.continue`)
+        }
+      )
+    ] })
+  ] });
+}
+function BookingWidget() {
+  const { tenantConfig, tenantConfigLoading, tenantConfigError } = useBookingContext();
+  if (tenantConfigLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "ea-booking-widget", children: /* @__PURE__ */ jsx(LoadingState, { label: "\u2026" }) });
+  }
+  if (tenantConfigError) {
+    return /* @__PURE__ */ jsx("div", { className: "ea-booking-widget", children: /* @__PURE__ */ jsx(ErrorState, { message: tenantConfigError }) });
+  }
+  if (tenantConfig?.booking.disableBooking) {
+    return /* @__PURE__ */ jsx("div", { className: "ea-booking-widget", children: /* @__PURE__ */ jsx(DisabledBooking, {}) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "ea-booking-widget", children: /* @__PURE__ */ jsxs("div", { className: "ea-booking-flow", children: [
+    /* @__PURE__ */ jsx(ServicePicker, {}),
+    /* @__PURE__ */ jsx(ProviderPicker, {}),
+    /* @__PURE__ */ jsx(DatePicker, {}),
+    /* @__PURE__ */ jsx(TimeSlotPicker, {}),
+    /* @__PURE__ */ jsx(CustomerForm, {}),
+    /* @__PURE__ */ jsx(LegalGate, {}),
+    /* @__PURE__ */ jsx(ConfirmStep, {}),
+    /* @__PURE__ */ jsx(BookedSummary, {})
+  ] }) });
+}
+
+export { ANY_PROVIDER_ID, BookedSummary, BookingApiError, BookingProvider, BookingWidget, ConfirmStep, CustomerForm, DatePicker, DisabledBooking as DisableBookingMessage, DisabledBooking, LegalGate, ProviderPicker, ServicePicker, TimeSlotPicker, allowsTimeDisplayToggle, bookingReducer, createBookingClient, createInitialBookingState, createTranslator, enCatalog, formatCalendarDate, formatSlotDateTimeDual, getCustomerTimezone, maxBookableDate, minBookableDate, resolveBusinessTimezone, resolveDisplayTimezone, shouldShowSecondaryTimezone, useAvailability, useBooking, useProviders, useServices, useTenantConfig, useUnavailableDates };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map