@blazeo.com/appointment-client 1.0.5 → 1.0.6

package/sample/src/App2.jsx

@@ -6,16 +6,25 @@ import {
 import { CalendarTab } from "./CalendarTab.jsx";
 import { EventTab } from "./EventTab.jsx";
 import { ParticipantTab } from "./ParticipantTab.jsx";
+import { ParticipantInfoTab } from "./ParticipantInfoTab.jsx";
+import { ParticipantOpeningHoursTab } from "./ParticipantOpeningHoursTab.jsx";
+import { AllParticipantOpeningHoursTab } from "./AllParticipantOpeningHoursTab.jsx";
 import { AvailabilityTab } from "./AvailabilityTab.jsx";
 import { CreateCalendarTab } from "./CreateCalendarTab.jsx";
 import { FetchCalendarTab } from "./FetchCalendarTab.jsx";
+import { OpeningHoursTab } from "./OpeningHoursTab.jsx";
 
 const TABS = [
   { id: "calendar", label: "Calendar" },
-  { id: "fetch", label: "Fetch calendar" },
+  /** `FetchCalendarTab` → `fetchCalendarDetails` + `calendarView` (unified object). */
+  { id: "fetch", label: "Fetch · calendarView" },
   { id: "create", label: "Create calendar" },
   { id: "event", label: "Event" },
   { id: "participant", label: "Participant" },
+  { id: "participant-info", label: "Participant info" },
+  { id: "opening-hours", label: "Opening Hours" },
+  { id: "participant-opening-hours", label: "Participant opening hours" },
+  { id: "all-participant-opening-hours", label: "All participant opening hours" },
   { id: "availability", label: "Availability / booking" },
 ];
 
@@ -80,7 +89,7 @@ function AppShell() {
     <main className="page">
       <header className="header">
         <h1>appointment-client</h1>
-        <p className="muted">Browser sample — tabbed explorer for the npm package</p>
+        <p className="muted">Browser sample — use tab <strong>Fetch · calendarView</strong> for the unified <code>calendarView</code> object.</p>
       </header>
 
       <ConnectionSettingsCard />
@@ -128,6 +137,34 @@ function AppShell() {
             <ParticipantTab />
           </section>
         )}
+        {activeId === "participant-info" && (
+          <section role="tabpanel" id="panel-participant-info" aria-labelledby="tab-participant-info">
+            <ParticipantInfoTab />
+          </section>
+        )}
+        {activeId === "opening-hours" && (
+          <section role="tabpanel" id="panel-opening-hours" aria-labelledby="tab-opening-hours">
+            <OpeningHoursTab />
+          </section>
+        )}
+        {activeId === "participant-opening-hours" && (
+          <section
+            role="tabpanel"
+            id="panel-participant-opening-hours"
+            aria-labelledby="tab-participant-opening-hours"
+          >
+            <ParticipantOpeningHoursTab />
+          </section>
+        )}
+        {activeId === "all-participant-opening-hours" && (
+          <section
+            role="tabpanel"
+            id="panel-all-participant-opening-hours"
+            aria-labelledby="tab-all-participant-opening-hours"
+          >
+            <AllParticipantOpeningHoursTab />
+          </section>
+        )}
         {activeId === "availability" && (
           <section role="tabpanel" id="panel-availability" aria-labelledby="tab-availability">
             <AvailabilityTab />

package/sample/src/BlazeoConnectionSettings.jsx

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

package/sample/src/FetchCalendarTab.jsx

@@ -3,7 +3,6 @@ import {
   CalendarModel,
   deleteCalendarAsync,
   fetchCalendarDetails,
-  fetchCalendarWithOpeningHours,
   updateCalendarAsync,
 } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
@@ -53,8 +52,10 @@ 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) {
+  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 +82,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>
     );
   }
@@ -218,7 +219,7 @@ export function FetchCalendarTab() {
 
     setBusy(true);
     try {
-      const details = await fetchCalendarDetails(id, { includeParticipantsInfo: true });
+      const details = await fetchCalendarDetails(id);
 
       if (details.cal == null) {
         const raw = await CalendarModel.getRaw(id);
@@ -231,16 +232,36 @@ export function FetchCalendarTab() {
       setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
 
       const payload = {
+        calendarView: details.calendarView,
         calendar: details.calendar,
         openingHours: details.openingHours,
-        openingHoursApiResponse: details.openingHoursApiResponse ?? null,
-        participants: details.participants,
-        participantsInfo: details.participantsInfo ?? null,
+        allParticipantOpeningHours: details.allParticipantOpeningHours,
+        openingHoursApiResponse: details.participantOpeningHoursResponse ?? null,
+        participants: (details.participants ?? []).map((p) => (isStateTreeNode(p) ? getSnapshot(p) : p)),
+        participantsInfo: Array.isArray(details.participantsInfo)
+          ? details.participantsInfo.map((p) => (isStateTreeNode(p) ? getSnapshot(p) : p))
+          : details.participantsInfo ?? null,
+        __openingHoursMeta: {
+          fromCalendarGet: details.fromCalendarGet,
+          fromParticipantApi: details.fromParticipantApi,
+          calendarViewUsedAllParticipantOpeningHours: details.meta?.calendarViewUsedAllParticipantOpeningHours,
+          embeddedCount: details.embeddedFromGet?.length ?? 0,
+          resolvedCount: details.openingHours?.length ?? 0,
+        },
         meta: details.meta,
       };
 
       setOutput(toDisplayJson(payload));
-      setNote("Loaded calendar + opening hours + participants (3 calls) → single response object.");
+      setNote(
+        (details.calendarView
+          ? "Use `calendarView`: one object (calendar + nested participants with openingHours). "
+          : "") +
+          (details.fromCalendarGet
+          ? "Opening hours: embedded on GET /Calendar/Get; participants from GET /Calendar/Participant/All. Single bundle in output."
+          : details.fromParticipantApi
+            ? "Opening hours: GET /Calendar/Participant/OpeningHours/Get; participants from GET /Calendar/Participant/All. Single bundle in output."
+            : "Calendar loaded; opening hours empty from both embed + participant API; participants from GET /Calendar/Participant/All.")
+      );
     } catch (err) {
       setError(explainFetchFailure(err, effective.baseUrl));
     } finally {
@@ -264,10 +285,13 @@ export function FetchCalendarTab() {
 
     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) => {
@@ -276,9 +300,15 @@ export function FetchCalendarTab() {
             try {
               const b = await fetchCalendarDetails(id);
               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 +322,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));
       }
@@ -410,13 +441,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,78 @@
+import { useState } from "react";
+import { fetchCalendarWithOpeningHours } from "appointment-client";
+import {
+  configureBlazeoFromEffective,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+
+export function OpeningHoursTab() {
+  const { effective } = 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);
+    setBusy(true);
+    try {
+      const res = await fetchCalendarWithOpeningHours(id);
+      setOutput(JSON.stringify(res, null, 2));
+    } catch (err) {
+      setError(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}
+    </>
+  );
+}

package/sample/src/ParticipantInfoTab.jsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { CalendarParticipantModel } from "appointment-client";
+import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+
+export function ParticipantInfoTab() {
+  const { effective } = 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) return setError("Enter a calendar id.");
+    if (!effective.baseUrl) return setError("Set Base URL in the connection card above.");
+
+    configureBlazeoFromEffective(effective);
+    setBusy(true);
+    try {
+      const info = await CalendarParticipantModel.getInfoByCalendar(id);
+      setOutput(JSON.stringify({ calendarId: id, count: Array.isArray(info) ? info.length : 0, info }, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Participant Info by Calendar</h2>
+        <p className="muted small">
+          Calls <code>CalendarParticipantModel.getInfoByCalendar(calendarId)</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)}
+              autoComplete="off"
+            />
+          </label>
+          <button type="submit" className="btn btn--secondary" disabled={busy}>
+            {busy ? "Loading…" : "Fetch participant info"}
+          </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}
+    </>
+  );
+}
+

package/sample/src/ParticipantOpeningHoursTab.jsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { getParticipantOpeningHours } from "appointment-client";
+import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+
+export function ParticipantOpeningHoursTab() {
+  const { effective } = 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) return setError("Enter a calendar id.");
+    if (!effective.baseUrl) return setError("Set Base URL in the connection card above.");
+
+    configureBlazeoFromEffective(effective);
+    setBusy(true);
+    try {
+      debugger;
+      const result = await getParticipantOpeningHours(id);
+      
+      if (!result.meta.ok) {
+        setError(result.meta.error || `Failed to fetch: ${result.meta.reason}`);
+        if (result.raw) setOutput(JSON.stringify(result.raw, null, 2));
+        return;
+      }
+
+      setOutput(JSON.stringify({ 
+        calendarId: id, 
+        count: result.openingHours.length, 
+        openingHours: result.openingHours, 
+        raw: result.raw,
+        meta: result.meta 
+      }, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Participant Opening Hours (Direct)</h2>
+        <p className="muted small">
+          Calls <code>CalendarModel.get(calendarId)</code> then{" "}
+          <code>calendar.getParticipantOpeningHours(&#123;&#125;)</code> (API:{" "}
+          <code>GET /Calendar/Participant/OpeningHours/Get</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)}
+              autoComplete="off"
+            />
+          </label>
+          <button type="submit" className="btn btn--secondary" disabled={busy}>
+            {busy ? "Loading…" : "Fetch participant 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}
+    </>
+  );
+}
+

package/sample/src/ParticipantTab.jsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { getExampleParticipants, ParticipantModel } from "appointment-client";
+import { getExampleParticipants, getParticipants } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
 import {
   configureBlazeoFromEffective,
@@ -43,7 +43,7 @@ export function ParticipantTab() {
     configureBlazeoFromEffective(effective);
     setBusy(true);
     try {
-      const res = await ParticipantModel.getAllByCalendar(id);
+      const res = await getParticipants(id);
       setOutput(toDisplayJson(res));
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));

package/src/calendar/blazeoCalendarRelationMethods.ts

@@ -0,0 +1,19 @@
+/** `GET /Calendar/Participant/Add` — attach `participantId` to this calendar. */
+export function addParticipantToCalendar(calendar: any, participantId: string) {
+  return calendar.addParticipant(participantId);
+}
+
+/** `GET /Calendar/Participant/Remove` */
+export function removeParticipantFromCalendar(calendar: any, participantId: string) {
+  return calendar.removeParticipant(participantId);
+}
+
+/** `POST /Calendar/Participant/Availability/OpeningHour/Save` — one day/slot. */
+export function saveCalendarOpeningHour(calendar: any, payload: any) {
+  return calendar.saveOpeningHour(payload);
+}
+
+/** `POST /Calendar/Participant/Availability/OpeningHours/Save` — batch body (API-specific shape). */
+export function saveCalendarOpeningHoursBatch(calendar: any, payload: any) {
+  return calendar.saveOpeningHours(payload);
+}