@blazeo.com/appointment-client 1.0.5 → 1.0.7

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";
@@ -45,19 +45,11 @@ export function mergeBlazeoUiWithFile(uiBaseUrl, uiConsumer) {
 }
 
 /**
- * Re-apply global Blazeo `configure` from the merged 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`.
+ * Re-apply global Blazeo `configure` from the effective connection card state.
+ * 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);
     }

package/sample/src/FetchCalendarTab.jsx

@@ -2,12 +2,16 @@ import { useMemo, useState } from "react";
 import {
   CalendarModel,
   deleteCalendarAsync,
+  ensureBlazeoHttpReady,
   fetchCalendarDetails,
-  fetchCalendarWithOpeningHours,
   updateCalendarAsync,
 } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
-import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import {
+  configureBlazeoFromEffective,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 import { getExampleCalendarBOInput } from "./CreateCalendarTab.jsx";
 
 function pick(row, ...keys) {
@@ -33,7 +37,7 @@ function explainFetchFailure(err, configuredBaseUrl) {
     msg === "Failed to fetch" ||
     msg === "Load failed" ||
     (err instanceof TypeError && (/fetch/i.test(msg) || /network/i.test(msg)));
-  if (!isNetwork) return msg;
+  if (!isNetwork) return mapBlazeoDemoError(msg);
 
   const isRemote =
     configuredBaseUrl &&
@@ -53,8 +57,11 @@ function explainFetchFailure(err, configuredBaseUrl) {
   return `${msg}\n\n${proxyHint}`;
 }
 
-/** Opening hours list from participant API wrapper or embedded `calendar.openingHours`. */
+/** Opening hours list from `calendarView`, embedded `calendar.openingHours`, or legacy `openingHours`. */
 function pickOpeningHoursListFromBundle(parsed) {
+  if (Array.isArray(parsed?.openingHours)) return parsed.openingHours;
+  const fromView = parsed?.calendarView?.openingHours;
+  if (Array.isArray(fromView) && fromView.length > 0) return fromView;
   const fromCal = parsed?.calendar?.openingHours;
   if (Array.isArray(fromCal) && fromCal.length > 0) return fromCal;
   const oh = parsed?.openingHours;
@@ -81,7 +88,7 @@ function OpeningHoursSummary({ outputJson }) {
     return (
       <p className="muted small" style={{ marginBottom: "0.75rem" }}>
         No opening-hours rows parsed for the table. Check{" "}
-        <code>calendar.openingHours</code> or <code>openingHours</code> in the JSON below.
+        <code>calendar.openingHours</code>, <code>calendarView.openingHours</code>, or <code>openingHours</code> in the JSON below.
       </p>
     );
   }
@@ -176,7 +183,7 @@ function calendarSnapshotToUpdatePayload(snap) {
 }
 
 export function FetchCalendarTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [companyKey, setCompanyKey] = useState("");
   const [busy, setBusy] = useState(false);
@@ -215,32 +222,48 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     setBusy(true);
     try {
-      const details = await fetchCalendarDetails(id, { includeParticipantsInfo: true });
+      const details = await fetchCalendarDetails(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+
+      const meta = details?._meta ?? details?.meta;
+      if (meta && !meta.ok && meta.reason === "missing_base_url") {
+        setError(mapBlazeoDemoError(meta.detail ?? ""));
+        return;
+      }
 
-      if (details.cal == null) {
+      if (!details) {
+        ensureBlazeoHttpReady({
+          baseUrl: effective.baseUrl,
+          ...(effective.consumer ? { consumer: effective.consumer } : {}),
+        });
         const raw = await CalendarModel.getRaw(id);
         setNote("CalendarModel.get returned null. Showing CalendarModel.getRaw only.");
         setOutput(toDisplayJson(raw));
         return;
       }
 
-      const snap = getSnapshot(details.cal);
-      setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
-
-      const payload = {
-        calendar: details.calendar,
-        openingHours: details.openingHours,
-        openingHoursApiResponse: details.openingHoursApiResponse ?? null,
-        participants: details.participants,
-        participantsInfo: details.participantsInfo ?? null,
-        meta: details.meta,
-      };
+      const snap = details._cal ? getSnapshot(details._cal) : null;
+      if (snap) {
+        setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
+      }
 
-      setOutput(toDisplayJson(payload));
-      setNote("Loaded calendar + opening hours + participants (3 calls) → single response object.");
+      // If it's the new flat response, just use it directly for output.
+      setOutput(toDisplayJson(details));
+      
+      // We can still try to extract meta for the UI if needed
+      if (meta) {
+        setNote(`Source: ${meta.calendarViewUsedAllParticipantOpeningHours ? "AllParticipantOpeningHours" : "Embedded/ParticipantApi"}`);
+      }
     } catch (err) {
       setError(explainFetchFailure(err, effective.baseUrl));
     } finally {
@@ -261,24 +284,41 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     setBusy(true);
     try {
-      const list = await CalendarModel.getByCompany(key);
-      if (list == null || list.length === 0) {
-        setNote("getByCompany returned null or an empty list.");
-        setOutput(toDisplayJson(list));
+      const byCompany = await CalendarModel.getByCompany(key);
+      const list = byCompany?.calendars ?? byCompany;
+      if (list == null || !Array.isArray(list) || list.length === 0) {
+        setNote(
+          "getByCompany returned null or an empty list. (calendar-client ≥1.0.17 returns { calendars, totalCount }.)"
+        );
+        setOutput(toDisplayJson(byCompany));
       } else {
         const enriched = await Promise.all(
           list.map(async (c) => {
             const id = c.calendarId ?? String(c.id ?? "");
             if (!id) return { calendar: getSnapshot(c), openingHours: [], meta: { error: "no id" } };
             try {
-              const b = await fetchCalendarDetails(id);
+              const b = await fetchCalendarDetails(id, {
+                ...connectionOpts,
+                baseUrl: effective.baseUrl,
+                ...(effective.consumer ? { consumer: effective.consumer } : {}),
+              });
               return {
+                calendarView: b.calendarView,
                 calendar: b.calendar ?? getSnapshot(c),
                 openingHours: b.openingHours,
-                participants: b.participants,
+                participants: (b.participants ?? []).map((p) => (isStateTreeNode(p) ? getSnapshot(p) : p)),
+                __openingHoursMeta: {
+                  fromCalendarGet: b.fromCalendarGet,
+                  fromParticipantApi: b.fromParticipantApi,
+                  calendarViewUsedAllParticipantOpeningHours: b.meta?.calendarViewUsedAllParticipantOpeningHours,
+                },
                 meta: b.meta,
               };
             } catch (err) {
@@ -292,8 +332,9 @@ export function FetchCalendarTab() {
             }
           })
         );
+        const total = byCompany?.totalCount ?? list.length;
         setNote(
-          `Loaded ${list.length} calendar(s); opening hours + participants loaded per calendar (single details bundle).`
+          `Loaded ${list.length} calendar(s) (totalCount=${total}); opening hours (embed → participant API) + participants per calendar.`
         );
         setOutput(toDisplayJson(enriched));
       }
@@ -338,6 +379,10 @@ export function FetchCalendarTab() {
     setMutateOutput("");
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     let payload;
     try {
       payload = JSON.parse(updateJson);
@@ -347,7 +392,11 @@ export function FetchCalendarTab() {
     }
     setBusy(true);
     try {
-      const result = await updateCalendarAsync(payload, {});
+      const result = await updateCalendarAsync(payload, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       if (result.ok) {
         setMutateNote("updateCalendarAsync → POST /Calendar/Event/Update");
         setMutateOutput(
@@ -361,7 +410,7 @@ export function FetchCalendarTab() {
           )
         );
       } else {
-        setError(result.error);
+        setError(mapBlazeoDemoError(result.error));
         if (result.apiResponse != null) {
           setMutateOutput(JSON.stringify(result.apiResponse, null, 2));
         }
@@ -383,6 +432,10 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     if (
       !window.confirm(
         `Delete calendar "${id}"?\n\nThis calls GET /Calendar/Remove (cannot be undone on the server).`
@@ -392,12 +445,16 @@ export function FetchCalendarTab() {
     }
     setBusy(true);
     try {
-      const result = await deleteCalendarAsync(id, {});
+      const result = await deleteCalendarAsync(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       if (result.ok) {
         setMutateNote("deleteCalendarAsync → GET /Calendar/Remove");
         setMutateOutput(JSON.stringify({ calendarId: id, apiResponse: result.apiResponse ?? null }, null, 2));
       } else {
-        setError(result.error);
+        setError(mapBlazeoDemoError(result.error));
         if (result.apiResponse != null) {
           setMutateOutput(JSON.stringify(result.apiResponse, null, 2));
         }
@@ -410,13 +467,32 @@ export function FetchCalendarTab() {
   return (
     <>
       <div className="card">
-        <h2>Fetch calendar</h2>
+        <h2>Fetch calendar · calendarView</h2>
+        <p className="muted small">
+          Runs <code>fetchCalendarDetails(calendarId)</code>. JSON field <code>calendarView</code> is first: one object with
+          calendar snapshot fields + <code>members</code> + <code>openingHours</code>, and a **new** <code>participants</code> array
+          where each participant has their own <code>openingHours</code> nested inside.
+        </p>
+        <p className="muted small">
+          Uses <code>fetchCalendarDetails</code>: legacy <code>openingHours</code> prefers embed on{" "}
+          <code>CalendarModel.getRaw</code>, else <code>getParticipantOpeningHours</code>.{" "}
+          <code>calendarView.openingHours</code> prefers <code>getAllParticipantOpeningHours</code> (
+          <code>GET /Calendar/Participant/OpeningHours/All/Get</code>) when the API returns rows. Members combine{" "}
+          <code>CalendarModel.getParticipants</code> + <code>CalendarModel.getParticipantsInfo</code> (each member may
+          include <code>participantInfo</code>).
+        </p>
+        <p className="muted small">
+          <strong>Single object in code:</strong> <code>fetchCalendarBundle(calendarId)</code> after{" "}
+          <code>initializeAppointmentClient(&#123; baseUrl, consumer &#125;)</code> — same unified shape as{" "}
+          <code>calendarView</code> below. This tab runs <code>fetchCalendarDetails</code> so extra arrays stay visible.
+        </p>
         <p className="muted small">
-          Uses <code>fetchCalendarWithOpeningHours</code> from <code>appointment-client</code>: merges
-          embedded <code>openingHours</code> from <code>GET /Calendar/Get</code> when present (MST omits
-          them); otherwise calls <code>calendar.getParticipantOpeningHours()</code> (
-          <code>GET /Calendar/Participant/OpeningHours/Get</code>), matching{" "}
-          <code>@blazeo.com/calendar-client</code>.
+          <strong>DevTools Network:</strong> Each fetch fires <code>/Calendar/Get</code> <strong>twice</strong> (
+          <code>CalendarModel.get</code> + <code>getRaw</code>). Other calls use different URLs — filter by{" "}
+          <code>Participant</code>, <code>OpeningHours</code>, or <code>GetInfo</code>. Those power{" "}
+          <code>calendarView</code>. If you only see <code>Calendar/Get</code> yet the UI JSON has members/hours,
+          widen the Network filter (&quot;All&quot;) or disable search; if <code>calendarView</code> is empty/missing fields,
+          check the <strong>Console</strong> for errors on the participant/opening-hours requests.
         </p>
         <p className="muted small">
           Effective: <code>{effective.baseUrl || "(set connection or blazeoClientDefaults.ts)"}</code>

package/sample/src/OpeningHoursTab.jsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { ensureBlazeoHttpReady, fetchCalendarWithOpeningHours } from "appointment-client";
+import {
+  configureBlazeoFromEffective,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
+
+export function OpeningHoursTab() {
+  const { effective, connectionOpts } = useBlazeoConnection();
+  const [calendarId, setCalendarId] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [output, setOutput] = useState("");
+
+  async function handleFetch(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    const id = calendarId.trim();
+    if (!id) {
+      setError("Enter a calendar id.");
+      return;
+    }
+    if (!effective.baseUrl) {
+      setError("Set Base URL in the connection card above.");
+      return;
+    }
+    configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
+    setBusy(true);
+    try {
+      const res = await fetchCalendarWithOpeningHours(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+      setOutput(JSON.stringify(res, null, 2));
+    } catch (err) {
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Opening Hours (Detailed)</h2>
+        <p className="muted small">
+          Fetches business hours using <code>fetchCalendarWithOpeningHours</code>.
+        </p>
+        <form onSubmit={handleFetch} className="form">
+          <label className="form__label">
+            <span>Calendar id</span>
+            <input
+              type="text"
+              className="form__input"
+              value={calendarId}
+              onChange={(e) => setCalendarId(e.target.value)}
+            />
+          </label>
+          <button type="submit" className="btn btn--primary" disabled={busy}>
+            {busy ? "Loading…" : "Fetch Opening Hours"}
+          </button>
+        </form>
+      </div>
+
+      {error ? (
+        <div className="card card--error" role="alert">
+          <h2>Error</h2>
+          <pre className="pre-block">{error}</pre>
+        </div>
+      ) : null}
+
+      {output ? (
+        <div className="card card--success">
+          <h2>Result</h2>
+          <pre className="pre-block">{output}</pre>
+        </div>
+      ) : null}
+    </>
+  );
+}