@blazeo.com/appointment-client 1.0.6 → 1.0.7

package/dist/calendar/mapToDesiredResponse.js

@@ -0,0 +1,99 @@
+/**
+ * Maps a raw Blazeo API calendar payload (often PascalCase) to the specific camelCase
+ * shape requested by the user, including typenames and normalized fields.
+ */
+export function mapToDesiredCalendarResponse(payload, openingHours = [], members = []) {
+    if (!payload)
+        return null;
+    const pick = (obj, ...keys) => {
+        for (const k of keys) {
+            if (obj[k] !== undefined && obj[k] !== null)
+                return obj[k];
+        }
+        return undefined;
+    };
+    const n = (v) => (v != null && v !== "" ? Number(v) : null);
+    // Map members with typename
+    const mappedMembers = members.map(m => ({
+        id: m.id ?? pick(m, "id", "Id"),
+        name: m.name ?? pick(m, "name", "Name", "alias", "Alias"),
+        email: m.email ?? pick(m, "email", "Email") ?? null,
+        status: m.status ?? pick(m, "status", "Status") ?? 0,
+        __typename: "Member"
+    }));
+    // Map opening hours with typename and raw fields
+    const mappedOpeningHours = openingHours.map(oh => ({
+        id: pick(oh, "id", "Id") ?? 0,
+        createdOn: pick(oh, "createdOn", "CreatedOn", "created_on") ?? "0001-01-01T00:00:00.000Z",
+        modifiedOn: pick(oh, "modifiedOn", "ModifiedOn", "modified_on") ?? "0001-01-01T00:00:00.000Z",
+        member: pick(oh, "member", "Member"),
+        openingHourId: pick(oh, "openingHourId", "OpeningHourId", "opening_hour_id") ?? "",
+        calendarId: pick(oh, "calendarId", "CalendarId", "calendar_id") ?? "",
+        participantId: pick(oh, "participantId", "ParticipantId", "participant_id") ?? "",
+        days: oh.days ?? [],
+        startHour: oh.startHour ?? pick(oh, "startHour", "StartHour") ?? 0,
+        startMinute: oh.startMinute ?? pick(oh, "startMinute", "StartMinute") ?? 0,
+        endHour: oh.endHour ?? pick(oh, "endHour", "EndHour") ?? 0,
+        endMinute: oh.endMinute ?? pick(oh, "endMinute", "EndMinute") ?? 0,
+        off: !!(oh.off ?? pick(oh, "off", "Off")),
+        __typename: "OpeningHour"
+    }));
+    // Map theme
+    const rawTheme = pick(payload, "theme", "Theme");
+    const theme = rawTheme ? {
+        id: pick(rawTheme, "id", "Id"),
+        color: pick(rawTheme, "color", "Color"),
+        logoUrl: pick(rawTheme, "logoUrl", "LogoUrl") ?? null,
+        __typename: "Theme"
+    } : null;
+    // Map reminders
+    const rawReminders = pick(payload, "reminderChannelStatuses", "ReminderChannelStatuses") ?? [];
+    const reminderChannelStatuses = Array.isArray(rawReminders) ? rawReminders.map((r) => ({
+        id: pick(r, "id", "Id"),
+        calendarId: pick(r, "calendarId", "CalendarId"),
+        channelId: pick(r, "channelId", "ChannelId"),
+        status: !!pick(r, "status", "Status"),
+        appointmentReminders: (pick(r, "appointmentReminders", "AppointmentReminders") ?? []).map((ar) => ({
+            id: pick(ar, "id", "Id"),
+            reminderChannelStatusId: pick(ar, "reminderChannelStatusId", "ReminderChannelStatusId"),
+            recipientType: pick(ar, "recipientType", "RecipientType"),
+            beforeEventTime: pick(ar, "beforeEventTime", "BeforeEventTime"),
+            unit: pick(ar, "unit", "Unit"),
+            __typename: "AppointmentReminder"
+        })),
+        __typename: "ReminderChannelStatus"
+    })) : [];
+    return {
+        id: n(pick(payload, "id", "Id")),
+        durationUnit: n(pick(payload, "durationUnit", "DurationUnit")),
+        minimumBookingNotice: n(pick(payload, "minimumBookingNotice", "MinimumBookingNotice")),
+        minimumBookingNoticeUnit: n(pick(payload, "minimumBookingNoticeUnit", "MinimumBookingNoticeUnit")),
+        minimumCancelationNotice: n(pick(payload, "minimumCancelationNotice", "MinimumCancelationNotice")),
+        minimumCancelationNoticeUnit: n(pick(payload, "minimumCancelationNoticeUnit", "MinimumCancelationNoticeUnit")),
+        futureLimit: n(pick(payload, "futureLimit", "FutureLimit")),
+        futureLimitUnit: n(pick(payload, "futureLimitUnit", "FutureLimitUnit")),
+        bufferTime: n(pick(payload, "bufferTime", "BufferTime")),
+        bufferTimeUnit: n(pick(payload, "bufferTimeUnit", "BufferTimeUnit")),
+        calendarLink: pick(payload, "calendarLink", "CalendarLink"),
+        uuid: pick(payload, "uuid", "Uuid", "calendarId", "CalendarId"),
+        location: pick(payload, "location", "Location") ?? "",
+        bookingPageTitle: pick(payload, "bookingPageTitle", "BookingPageTitle") ?? null,
+        reminderChannelStatuses,
+        members: mappedMembers,
+        createdOn: pick(payload, "createdOn", "CreatedOn") ?? "0001-01-01T00:00:00.000Z",
+        modifiedOn: pick(payload, "modifiedOn", "ModifiedOn") ?? "0001-01-01T00:00:00.000Z",
+        name: pick(payload, "name", "Name"),
+        timeZoneId: pick(payload, "timeZoneId", "TimeZoneId"),
+        description: pick(payload, "description", "Description") ?? "",
+        assignmentType: n(pick(payload, "assignmentType", "AssignmentType", "assignmentMethod", "AssignmentMethod")),
+        duration: n(pick(payload, "duration", "Duration")),
+        bookingLimit: n(pick(payload, "bookingLimit", "BookingLimit")),
+        calendarJson: pick(payload, "calendarJson", "CalendarJson") ?? null,
+        isThirdPartySaved: !!pick(payload, "isThirdPartySaved", "IsThirdPartySaved"),
+        themeId: n(pick(payload, "themeId", "ThemeId")),
+        theme,
+        openingHours: mappedOpeningHours,
+        appointmentUserDefinedFields: pick(payload, "appointmentUserDefinedFields", "AppointmentUserDefinedFields") ?? [],
+        __typename: "Calendar"
+    };
+}

package/dist/config/applyBlazeoDefaults.js

@@ -1,12 +1,13 @@
-import { configure } from "@blazeo.com/calendar-client";
 import { blazeoClientConfig } from "./blazeoClientDefaults.js";
+import { syncBlazeoConnection } from "./syncBlazeoConnection.js";
 /** Push {@link blazeoClientConfig} into `@blazeo.com/calendar-client` (global store). Call explicitly if you use file defaults; otherwise use {@link initializeAppointmentClient}. */
 export function applyBlazeoClientConfig() {
+    debugger;
     const baseUrl = blazeoClientConfig.baseUrl?.trim().replace(/\/+$/, "");
     if (!baseUrl)
         return;
     const consumer = blazeoClientConfig.consumer?.trim();
-    configure({
+    syncBlazeoConnection({
         baseUrl,
         ...(consumer ? { consumer } : {}),
     });

package/dist/config/blazeoClientDefaults.js

@@ -6,6 +6,6 @@
  * @example baseUrl: "https://apptscheduling.azurewebsites.net"
  */
 export const blazeoClientConfig = {
-    baseUrl: "",
-    consumer: "",
+    baseUrl: "https://apptscheduling.azurewebsites.net",
+    consumer: "smarthub",
 };

package/dist/config/ensureBlazeoHttpReady.d.ts

@@ -0,0 +1,17 @@
+export type EnsureBlazeoHttpOptions = {
+    baseUrl?: string;
+    consumer?: string;
+};
+/**
+ * Ensures global Blazeo `configure({ baseUrl })` runs before any `CalendarModel` / `EventModel` HTTP.
+ * Uses the same resolution as {@link resolveBlazeoConnection}: explicit args, existing `getConfig()`,
+ * then `blazeoClientDefaults` — so file defaults apply even if the host never called `configure`.
+ */
+export declare function ensureBlazeoHttpReady(options?: EnsureBlazeoHttpOptions): {
+    ok: true;
+    baseUrl: string;
+    consumer?: string;
+} | {
+    ok: false;
+    error: string;
+};

package/dist/config/ensureBlazeoHttpReady.js

@@ -0,0 +1,31 @@
+import { configure } from "@blazeo.com/calendar-client";
+import { resolveBlazeoConnection } from "../calendar/createCalendar.js";
+/**
+ * Ensures global Blazeo `configure({ baseUrl })` runs before any `CalendarModel` / `EventModel` HTTP.
+ * Uses the same resolution as {@link resolveBlazeoConnection}: explicit args, existing `getConfig()`,
+ * then `blazeoClientDefaults` — so file defaults apply even if the host never called `configure`.
+ */
+export function ensureBlazeoHttpReady(options = {}) {
+    // Hard-prefer explicit args (call-site can bypass any module-resolution mismatch).
+    const explicitBase = options.baseUrl?.trim().replace(/\/+$/, "");
+    const explicitConsumer = options.consumer?.trim() || undefined;
+    if (explicitBase) {
+        configure({
+            baseUrl: explicitBase,
+            ...(explicitConsumer ? { consumer: explicitConsumer } : {}),
+        });
+        return { ok: true, baseUrl: explicitBase, ...(explicitConsumer ? { consumer: explicitConsumer } : {}) };
+    }
+    const { baseUrl, consumer } = resolveBlazeoConnection(options);
+    if (!baseUrl) {
+        return {
+            ok: false,
+            error: "Blazeo base URL is not set. Call initializeAppointmentClient({ baseUrl }) or configure({ baseUrl }) at app startup, set blazeoClientConfig.baseUrl, or pass baseUrl when calling fetch APIs.",
+        };
+    }
+    configure({
+        baseUrl,
+        ...(consumer ? { consumer } : {}),
+    });
+    return { ok: true, baseUrl, ...(consumer ? { consumer } : {}) };
+}

package/dist/config/initializeAppointmentClient.d.ts

@@ -3,5 +3,9 @@ export interface AppointmentClientConfig {
     consumer?: string;
     fetch?: typeof fetch;
 }
+/**
+ * Applies Blazeo connection (same as {@link syncBlazeoConnection}) and marks the client as configured
+ * when a non-empty `baseUrl` was written to `@blazeo.com/calendar-client`.
+ */
 export declare function initializeAppointmentClient(config: AppointmentClientConfig): void;
 export declare function isAppointmentClientConfigured(): boolean;

package/dist/config/initializeAppointmentClient.js

@@ -1,8 +1,14 @@
-import { configure, getConfig } from "@blazeo.com/calendar-client";
+import { getConfig } from "@blazeo.com/calendar-client";
+import { syncBlazeoConnection } from "./syncBlazeoConnection.js";
 let isConfigured = false;
+/**
+ * Applies Blazeo connection (same as {@link syncBlazeoConnection}) and marks the client as configured
+ * when a non-empty `baseUrl` was written to `@blazeo.com/calendar-client`.
+ */
 export function initializeAppointmentClient(config) {
-    configure(config);
-    isConfigured = true;
+    if (syncBlazeoConnection(config)) {
+        isConfigured = true;
+    }
 }
 export function isAppointmentClientConfigured() {
     return isConfigured || getConfig() !== null;

package/dist/config/syncBlazeoConnection.d.ts

@@ -0,0 +1,6 @@
+import type { AppointmentClientConfig } from "./initializeAppointmentClient.js";
+/**
+ * Writes `baseUrl` / `consumer` into the global `@blazeo.com/calendar-client` `configure()` store.
+ * Returns whether anything was applied (skipped when `baseUrl` is empty after trim).
+ */
+export declare function syncBlazeoConnection(config: AppointmentClientConfig): boolean;

package/dist/config/syncBlazeoConnection.js

@@ -0,0 +1,18 @@
+import { configure } from "@blazeo.com/calendar-client";
+/**
+ * Writes `baseUrl` / `consumer` into the global `@blazeo.com/calendar-client` `configure()` store.
+ * Returns whether anything was applied (skipped when `baseUrl` is empty after trim).
+ */
+export function syncBlazeoConnection(config) {
+    const baseUrl = config.baseUrl?.trim().replace(/\/+$/, "");
+    if (!baseUrl)
+        return false;
+    configure({
+        baseUrl,
+        ...(config.consumer != null && String(config.consumer).trim() !== ""
+            ? { consumer: String(config.consumer).trim() }
+            : {}),
+        ...(config.fetch ? { fetch: config.fetch } : {}),
+    });
+    return true;
+}

package/dist/index.d.ts

@@ -1,4 +1,7 @@
-export { initializeAppointmentClient, isAppointmentClientConfigured } from "./config/initializeAppointmentClient.js";
+export { initializeAppointmentClient, isAppointmentClientConfigured, } from "./config/initializeAppointmentClient.js";
+export { syncBlazeoConnection } from "./config/syncBlazeoConnection.js";
+export { ensureBlazeoHttpReady } from "./config/ensureBlazeoHttpReady.js";
+export type { EnsureBlazeoHttpOptions } from "./config/ensureBlazeoHttpReady.js";
 export { blazeoClientConfig } from "./config/blazeoClientDefaults.js";
 export { applyBlazeoClientConfig } from "./config/applyBlazeoDefaults.js";
 export { createCalendarRoot, CalendarRootModel, CalendarSlotModel, EventModel, ParticipantModel } from "./models/CalendarRootModel.js";

package/dist/index.js

@@ -1,5 +1,7 @@
 import { getExampleSlots } from "./exampleData.js";
-export { initializeAppointmentClient, isAppointmentClientConfigured } from "./config/initializeAppointmentClient.js";
+export { initializeAppointmentClient, isAppointmentClientConfigured, } from "./config/initializeAppointmentClient.js";
+export { syncBlazeoConnection } from "./config/syncBlazeoConnection.js";
+export { ensureBlazeoHttpReady } from "./config/ensureBlazeoHttpReady.js";
 export { blazeoClientConfig } from "./config/blazeoClientDefaults.js";
 export { applyBlazeoClientConfig } from "./config/applyBlazeoDefaults.js";
 export { createCalendarRoot, CalendarRootModel, CalendarSlotModel, EventModel, ParticipantModel } from "./models/CalendarRootModel.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blazeo.com/appointment-client",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "publishConfig": {
     "access": "public"
   },

package/sample/.env.example

@@ -0,0 +1,5 @@
+# Copy to `.env` or `.env.local` in this folder and set your API host (no trailing slash).
+# Vite exposes only vars prefixed with VITE_ to the browser.
+VITE_BLAZEO_BASE_URL=https://your-blazeo-api.example.com
+# Optional, if your tenant uses it:
+# VITE_BLAZEO_CONSUMER=

package/sample/package-lock.json

@@ -17,7 +17,7 @@
     },
     "..": {
       "name": "@blazeo.com/appointment-client",
-      "version": "1.0.5",
+      "version": "1.0.6",
       "dependencies": {
         "@blazeo.com/calendar-client": "^1.0.18",
         "mobx": "^6.13.7",

package/sample/src/AllParticipantOpeningHoursTab.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { getAllParticipantOpeningHours } from "appointment-client";
+import { ensureBlazeoHttpReady, getAllParticipantOpeningHours } from "appointment-client";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function AllParticipantOpeningHoursTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -18,12 +19,20 @@ export function AllParticipantOpeningHoursTab() {
     if (!effective.baseUrl) return setError("Set Base URL in the connection card above.");
 
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const res = await getAllParticipantOpeningHours(id);
+      const res = await getAllParticipantOpeningHours(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       setOutput(JSON.stringify(res, null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/App2.jsx

@@ -3,6 +3,7 @@ import {
   BlazeoConnectionProvider,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { ensureBlazeoHttpReady, getConfig } from "appointment-client";
 import { CalendarTab } from "./CalendarTab.jsx";
 import { EventTab } from "./EventTab.jsx";
 import { ParticipantTab } from "./ParticipantTab.jsx";
@@ -35,14 +36,23 @@ function ConnectionSettingsCard() {
     setBaseUrlInput,
     setConsumerInput,
     effective,
+    connectionOpts,
   } = useBlazeoConnection();
 
+  const ready = ensureBlazeoHttpReady({
+    baseUrl: effective.baseUrl,
+    ...(effective.consumer ? { consumer: effective.consumer } : {}),
+  });
+  const cfg = getConfig?.() ?? null;
+
   return (
     <div className="card connection-card">
       <h2>Blazeo connection</h2>
       <p className="muted small">
         Values are saved in <code>localStorage</code>. Empty fields fall back to{" "}
-        <code>appointment-client/src/config/blazeoClientDefaults.ts</code>.
+        <code>appointment-client/src/config/blazeoClientDefaults.ts</code>. All tabs use the <strong>effective</strong> URL
+        here and run <code>pushBlazeoConnection</code> + <code>ensureBlazeoHttpReady</code> so calendar APIs receive{" "}
+        <code>baseUrl</code> from this card.
       </p>
       <p className="muted small">
         Effective:{" "}
@@ -54,6 +64,12 @@ function ConnectionSettingsCard() {
           </>
         ) : null}
       </p>
+      <p className="muted small">
+        Debug: <code>connectionOpts</code> → <code>{JSON.stringify(connectionOpts)}</code> ·{" "}
+        <code>ensureBlazeoHttpReady</code> →{" "}
+        <code>{ready.ok ? "ok" : "missing_base_url"}</code> · <code>getConfig().baseUrl</code> →{" "}
+        <code>{cfg?.baseUrl ?? "(null)"}</code>
+      </p>
       <div className="connection-card__row">
         <label className="form__label">
           <span>Base URL</span>
@@ -89,7 +105,11 @@ function AppShell() {
     <main className="page">
       <header className="header">
         <h1>appointment-client</h1>
-        <p className="muted">Browser sample — use tab <strong>Fetch · calendarView</strong> for the unified <code>calendarView</code> object.</p>
+        <p className="muted">
+          Browser sample — set <strong>Base URL</strong> in <strong>Blazeo connection</strong> below first; every tab uses
+          those values for <code>configure</code> + API calls. Tab <strong>Fetch · calendarView</strong> shows the unified{" "}
+          <code>calendarView</code> object.
+        </p>
       </header>
 
       <ConnectionSettingsCard />

package/sample/src/AvailabilityTab.jsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
-import { EventModel } from "appointment-client";
+import { ensureBlazeoHttpReady, EventModel } from "appointment-client";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 function parseYmd(ymd) {
   const t = (ymd ?? "").trim();
@@ -10,7 +11,7 @@ function parseYmd(ymd) {
 }
 
 export function AvailabilityTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10));
   const [offsetMinutes, setOffsetMinutes] = useState(-new Date().getTimezoneOffset());
@@ -30,13 +31,17 @@ export function AvailabilityTab() {
     if (!parts) return setError("Pick a valid date.");
     if (!effective.baseUrl) return setError("Set Base URL above.");
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     setBusy(true);
     try {
       const list = await EventModel.getAvailability(id, parts.y, parts.m, parts.d, opts);
       setOutput(JSON.stringify(list.map((n) => n.toJSON?.() ?? n), null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/BlazeoConnectionSettings.jsx

@@ -6,8 +6,8 @@ import {
   useMemo,
   useState,
 } from "react";
-import { blazeoClientConfig, initializeAppointmentClient } from "appointment-client";
-import { configure as configureCalendarClient } from "@blazeo.com/calendar-client";
+import { blazeoClientConfig } from "appointment-client";
+import { pushBlazeoConnection } from "./blazeoPushConnection.js";
 
 const STORAGE_BASE = "appointment-client-sample:blazeoBaseUrl";
 const STORAGE_CONSUMER = "appointment-client-sample:blazeoConsumer";
@@ -46,18 +46,10 @@ export function mergeBlazeoUiWithFile(uiBaseUrl, uiConsumer) {
 
 /**
  * Re-apply global Blazeo `configure` from the effective connection card state.
- * Call at the start of any handler that uses `CalendarModel` / `EventModel` HTTP so
- * `getParticipantOpeningHours` (instance env) and static helpers always see the same
- * `baseUrl`.
+ * Pushes into both calendar-client entrypoints ({@link pushBlazeoConnection}).
  */
 export function configureBlazeoFromEffective(effective) {
-  const baseUrl = normalizeBase(effective?.baseUrl ?? "");
-  if (!baseUrl) return;
-  const consumer = (effective?.consumer ?? "").trim() || undefined;
-  // Configure appointment-client (which configures its internal calendar-client instance)
-  initializeAppointmentClient({ baseUrl, ...(consumer ? { consumer } : {}) });
-  // Also configure the calendar-client instance that the sample (and Vite alias) may resolve.
-  configureCalendarClient({ baseUrl, ...(consumer ? { consumer } : {}) });
+  pushBlazeoConnection(effective);
 }
 
 const BlazeoConnectionContext = createContext(null);
@@ -71,6 +63,15 @@ export function BlazeoConnectionProvider({ children }) {
     [baseUrlInput, consumerInput]
   );
 
+  /** Pass into `fetchCalendarDetails`, `createCalendarAsync`, etc. (explicit `baseUrl` for `ensureBlazeoHttpReady`). */
+  const connectionOpts = useMemo(
+    () => ({
+      ...(effective.baseUrl ? { baseUrl: effective.baseUrl } : {}),
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    }),
+    [effective.baseUrl, effective.consumer]
+  );
+
   useEffect(() => {
     writeStored(STORAGE_BASE, baseUrlInput.trim());
   }, [baseUrlInput]);
@@ -87,8 +88,7 @@ export function BlazeoConnectionProvider({ children }) {
   useLayoutEffect(() => {
     const { baseUrl, consumer } = mergeBlazeoUiWithFile(baseUrlInput, consumerInput);
     if (!baseUrl) return;
-    initializeAppointmentClient({ baseUrl, ...(consumer ? { consumer } : {}) });
-    configureCalendarClient({ baseUrl, ...(consumer ? { consumer } : {}) });
+    pushBlazeoConnection({ baseUrl, consumer });
   }, [baseUrlInput, consumerInput]);
 
   const value = useMemo(
@@ -98,8 +98,9 @@ export function BlazeoConnectionProvider({ children }) {
       setBaseUrlInput,
       setConsumerInput,
       effective,
+      connectionOpts,
     }),
-    [baseUrlInput, consumerInput, effective]
+    [baseUrlInput, consumerInput, effective, connectionOpts]
   );
 
   return (

package/sample/src/CreateCalendarTab.jsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from "react";
-import { createCalendarAsync, createCalendarWithRelationsAsync } from "appointment-client";
+import { createCalendarAsync, createCalendarWithRelationsAsync, ensureBlazeoHttpReady } from "appointment-client";
 import { getSnapshot } from "mobx-state-tree";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 /** Demo payload aligned with `CalendarBOInput` / server `CalendarBO`. */
 export function getExampleCalendarBOInput() {
@@ -38,7 +39,7 @@ export function getExampleCalendarBOInput() {
 }
 
 export function CreateCalendarTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [localOnly, setLocalOnly] = useState(false);
   const [saveRelations, setSaveRelations] = useState(true);
   const [busy, setBusy] = useState(false);
@@ -70,7 +71,13 @@ export function CreateCalendarTab() {
       setError("Set Base URL in the connection card above.");
       return;
     }
-    if (!localOnly) configureBlazeoFromEffective(effective);
+    if (!localOnly) {
+      configureBlazeoFromEffective(effective);
+      ensureBlazeoHttpReady({
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+    }
 
     const hasRelations = (payload.members?.length ?? 0) > 0 || (payload.openingHours?.length ?? 0) > 0;
     const useRelations = saveRelations && hasRelations && !localOnly;
@@ -78,10 +85,20 @@ export function CreateCalendarTab() {
     setBusy(true);
     try {
       const result = useRelations
-        ? await createCalendarWithRelationsAsync(payload, { localOnly })
-        : await createCalendarAsync(payload, { localOnly });
+        ? await createCalendarWithRelationsAsync(payload, {
+            localOnly,
+            ...connectionOpts,
+            baseUrl: effective.baseUrl,
+            ...(effective.consumer ? { consumer: effective.consumer } : {}),
+          })
+        : await createCalendarAsync(payload, {
+            localOnly,
+            ...connectionOpts,
+            baseUrl: effective.baseUrl,
+            ...(effective.consumer ? { consumer: effective.consumer } : {}),
+          });
       setOutput(JSON.stringify(result.ok ? getSnapshot(result.calendar) : result, null, 2));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }

package/sample/src/EventTab.jsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import {
   cancelAppointmentEventAsync,
   createAppointmentEventAsync,
+  ensureBlazeoHttpReady,
   EventModel,
   rescheduleAppointmentEventAsync,
 } from "appointment-client";
@@ -10,6 +11,7 @@ import {
   configureBlazeoFromEffective,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 function getExampleCreatePayload() {
   const start = new Date();
@@ -75,7 +77,7 @@ function safeJsonParse(text, fallback) {
 }
 
 export function EventTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [offsetMinutes, setOffsetMinutes] = useState(-new Date().getTimezoneOffset());
   const [createJson, setCreateJson] = useState(() =>
     JSON.stringify(getExampleCreatePayload(), null, 2)
@@ -118,6 +120,7 @@ export function EventTab() {
   const [output, setOutput] = useState("");
 
   const opts = useMemo(() => ({ offsetMinutes: Number(offsetMinutes) || 0 }), [offsetMinutes]);
+  const eventOpts = useMemo(() => ({ ...opts, ...connectionOpts }), [opts, connectionOpts]);
 
   function ensureBase() {
     if (!effective.baseUrl) {
@@ -133,6 +136,10 @@ export function EventTab() {
     setOutput("");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     let payload;
     try {
       payload = JSON.parse(createJson);
@@ -142,9 +149,9 @@ export function EventTab() {
     }
     setBusy(true);
     try {
-      const result = await createAppointmentEventAsync(payload, opts);
+      const result = await createAppointmentEventAsync(payload, eventOpts);
       setOutput(resultToJson(result));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }
@@ -156,6 +163,10 @@ export function EventTab() {
     setOutput("");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     let payload;
     try {
       payload = JSON.parse(rescheduleJson);
@@ -165,9 +176,9 @@ export function EventTab() {
     }
     setBusy(true);
     try {
-      const result = await rescheduleAppointmentEventAsync(payload, opts);
+      const result = await rescheduleAppointmentEventAsync(payload, eventOpts);
       setOutput(resultToJson(result));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }
@@ -181,11 +192,19 @@ export function EventTab() {
     if (!id) return setError("Enter Blazeo event id to cancel.");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const result = await cancelAppointmentEventAsync(id, {});
+      const result = await cancelAppointmentEventAsync(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       setOutput(JSON.stringify(result, null, 2));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }
@@ -201,6 +220,10 @@ export function EventTab() {
     if (!searchTo) return setError("Pick end date.");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     const optsFromJson = safeJsonParse(searchFiltersJson, {});
     const startDateFrom = new Date(`${searchFrom}T00:00:00.000Z`).toISOString();
@@ -221,7 +244,7 @@ export function EventTab() {
       const totalCount = res?.totalCount ?? events.length;
       setOutput(JSON.stringify({ totalCount, events }, null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }