@blazeo.com/appointment-client 1.0.4 → 1.0.6

package/sample/src/EventTab.jsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import {
   cancelAppointmentEventAsync,
   createAppointmentEventAsync,
+  EventModel,
   rescheduleAppointmentEventAsync,
 } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
@@ -65,6 +66,14 @@ function resultToJson(result) {
   return JSON.stringify(result, null, 2);
 }
 
+function safeJsonParse(text, fallback) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return fallback;
+  }
+}
+
 export function EventTab() {
   const { effective } = useBlazeoConnection();
   const [offsetMinutes, setOffsetMinutes] = useState(-new Date().getTimezoneOffset());
@@ -74,6 +83,35 @@ export function EventTab() {
   const [rescheduleJson, setRescheduleJson] = useState(() =>
     JSON.stringify(getExampleReschedulePayload(), null, 2)
   );
+  const [searchCompanyKey, setSearchCompanyKey] = useState("");
+  const [searchFrom, setSearchFrom] = useState(() => new Date().toISOString().slice(0, 10));
+  const [searchTo, setSearchTo] = useState(() => {
+    const d = new Date();
+    d.setDate(d.getDate() + 7);
+    return d.toISOString().slice(0, 10);
+  });
+  const [searchFiltersJson, setSearchFiltersJson] = useState(() =>
+    JSON.stringify(
+      {
+        calendarId: "",
+        participantId: "",
+        leadId: "",
+        visitorName: "",
+        visitorEmail: "",
+        visitorPhone: "",
+        title: "",
+        search: "",
+        attendeeStatus: "",
+        eventSource: "",
+        sort: "",
+        sortOrder: "desc",
+        page: 1,
+        page_size: 25,
+      },
+      null,
+      2
+    )
+  );
   const [cancelEventId, setCancelEventId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -153,6 +191,42 @@ export function EventTab() {
     }
   }
 
+  async function handleSearchByDateRange(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    const companyKey = searchCompanyKey.trim();
+    if (!companyKey) return setError("Enter company key.");
+    if (!searchFrom) return setError("Pick start date.");
+    if (!searchTo) return setError("Pick end date.");
+    if (!ensureBase()) return;
+    configureBlazeoFromEffective(effective);
+
+    const optsFromJson = safeJsonParse(searchFiltersJson, {});
+    const startDateFrom = new Date(`${searchFrom}T00:00:00.000Z`).toISOString();
+    const startDateTo = new Date(`${searchTo}T23:59:59.999Z`).toISOString();
+
+    setBusy(true);
+    try {
+      const res = await EventModel.getByDateRangeWithFilters(
+        companyKey,
+        startDateFrom,
+        startDateTo,
+        optsFromJson
+      );
+
+      const events = (res?.events ?? []).map((e) =>
+        isStateTreeNode(e) ? getSnapshot(e) : (e?.toJSON?.() ?? e)
+      );
+      const totalCount = res?.totalCount ?? events.length;
+      setOutput(JSON.stringify({ totalCount, events }, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <>
       <div className="card">
@@ -171,6 +245,60 @@ export function EventTab() {
         </label>
       </div>
 
+      <div className="card">
+        <h2>Search events (date range + filters)</h2>
+        <p className="muted small">
+          Calls <code>EventModel.getByDateRangeWithFilters</code> →
+          <code> GET /event/search/daterange/get</code> (company scope). Offset header comes from the{" "}
+          <code>offset</code> field above.
+        </p>
+        <form onSubmit={handleSearchByDateRange} className="form">
+          <label className="form__label">
+            <span>Company key</span>
+            <input
+              className="form__input"
+              value={searchCompanyKey}
+              onChange={(e) => setSearchCompanyKey(e.target.value)}
+              placeholder="company_key"
+              autoComplete="off"
+            />
+          </label>
+          <div className="connection-card__row">
+            <label className="form__label">
+              <span>Start date (from)</span>
+              <input
+                type="date"
+                className="form__input"
+                value={searchFrom}
+                onChange={(e) => setSearchFrom(e.target.value)}
+              />
+            </label>
+            <label className="form__label">
+              <span>Start date (to)</span>
+              <input
+                type="date"
+                className="form__input"
+                value={searchTo}
+                onChange={(e) => setSearchTo(e.target.value)}
+              />
+            </label>
+          </div>
+          <label className="form__label">
+            <span>Filters (JSON)</span>
+            <textarea
+              className="form__textarea"
+              value={searchFiltersJson}
+              onChange={(e) => setSearchFiltersJson(e.target.value)}
+              spellCheck={false}
+              rows={10}
+            />
+          </label>
+          <button type="submit" className="btn btn--secondary" disabled={busy}>
+            {busy ? "Loading…" : "Search"}
+          </button>
+        </form>
+      </div>
+
       <div className="card">
         <h2>Create event</h2>
         <form onSubmit={handleCreate} className="form">

package/sample/src/FetchCalendarTab.jsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import {
   CalendarModel,
   deleteCalendarAsync,
-  fetchCalendarWithOpeningHours,
+  fetchCalendarDetails,
   updateCalendarAsync,
 } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
@@ -52,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;
@@ -80,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>
     );
   }
@@ -217,48 +219,48 @@ export function FetchCalendarTab() {
 
     setBusy(true);
     try {
-      const bundle = await fetchCalendarWithOpeningHours(id);
+      const details = await fetchCalendarDetails(id);
 
-      if (bundle.cal == null) {
+      if (details.cal == null) {
         const raw = await CalendarModel.getRaw(id);
-        setNote(
-          "CalendarModel.get returned null. Showing CalendarModel.getRaw only (opening hours merge skipped)."
-        );
+        setNote("CalendarModel.get returned null. Showing CalendarModel.getRaw only.");
         setOutput(toDisplayJson(raw));
         return;
       }
 
-      const snap = getSnapshot(bundle.cal);
+      const snap = getSnapshot(details.cal);
       setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
 
-      const [participants, participantsInfo] = await Promise.all([
-        bundle.cal.getParticipants(),
-        bundle.cal.getParticipantsInfo(),
-      ]);
-
       const payload = {
-        calendar: bundle.calendar,
-        openingHours: bundle.openingHours,
-        ...(bundle.participantOpeningHoursResponse != null
-          ? { participantOpeningHoursApiResponse: bundle.participantOpeningHoursResponse }
-          : {}),
-        participants,
-        participantsInfo,
+        calendarView: details.calendarView,
+        calendar: details.calendar,
+        openingHours: details.openingHours,
+        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: bundle.fromCalendarGet,
-          fromParticipantApi: bundle.fromParticipantApi,
-          embeddedCount: bundle.embeddedFromGet?.length ?? 0,
-          resolvedCount: bundle.openingHours?.length ?? 0,
+          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(
-        bundle.fromCalendarGet
-          ? "Opening hours: embedded on GET /Calendar/Get (`appointment-client` fetchCalendarWithOpeningHours)."
-          : bundle.fromParticipantApi
-            ? "Opening hours: from GET /Calendar/Participant/OpeningHours/Get (calendar GET had none)."
-            : "Opening hours: none returned."
+        (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));
@@ -283,38 +285,46 @@ 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) => {
             const id = c.calendarId ?? String(c.id ?? "");
             if (!id) return { calendar: getSnapshot(c), openingHours: [], meta: { error: "no id" } };
             try {
-              const b = await fetchCalendarWithOpeningHours(id);
+              const b = await fetchCalendarDetails(id);
               return {
+                calendarView: b.calendarView,
                 calendar: b.calendar ?? getSnapshot(c),
                 openingHours: b.openingHours,
+                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) {
               return {
                 calendar: getSnapshot(c),
                 openingHours: [],
-                __openingHoursMeta: {
+                meta: {
                   error: err instanceof Error ? err.message : String(err),
                 },
               };
             }
           })
         );
+        const total = byCompany?.totalCount ?? list.length;
         setNote(
-          `Loaded ${list.length} calendar(s); opening hours merged per calendar (GET embed → participant API fallback).`
+          `Loaded ${list.length} calendar(s) (totalCount=${total}); opening hours (embed → participant API) + participants per calendar.`
         );
         setOutput(toDisplayJson(enriched));
       }
@@ -431,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);
+}