@blazeo.com/appointment-client 1.0.6 → 1.0.7

package/sample/src/FetchCalendarTab.jsx

@@ -2,11 +2,16 @@ import { useMemo, useState } from "react";
 import {
   CalendarModel,
   deleteCalendarAsync,
+  ensureBlazeoHttpReady,
   fetchCalendarDetails,
   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) {
@@ -32,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 &&
@@ -54,6 +59,7 @@ function explainFetchFailure(err, configuredBaseUrl) {
 
 /** 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;
@@ -177,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);
@@ -216,52 +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);
+      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 = {
-        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: 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(
-        (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.")
-      );
+      const snap = details._cal ? getSnapshot(details._cal) : null;
+      if (snap) {
+        setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
+      }
+
+      // 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 {
@@ -282,6 +284,10 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     setBusy(true);
     try {
@@ -298,7 +304,11 @@ export function FetchCalendarTab() {
             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),
@@ -369,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);
@@ -378,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(
@@ -392,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));
         }
@@ -414,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).`
@@ -423,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));
         }

package/sample/src/OpeningHoursTab.jsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
-import { fetchCalendarWithOpeningHours } from "appointment-client";
+import { ensureBlazeoHttpReady, fetchCalendarWithOpeningHours } from "appointment-client";
 import {
   configureBlazeoFromEffective,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function OpeningHoursTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -26,12 +27,20 @@ export function OpeningHoursTab() {
       return;
     }
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const res = await fetchCalendarWithOpeningHours(id);
+      const res = await fetchCalendarWithOpeningHours(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/ParticipantInfoTab.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { CalendarParticipantModel } from "appointment-client";
+import { CalendarParticipantModel, ensureBlazeoHttpReady } from "appointment-client";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function ParticipantInfoTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -18,12 +19,16 @@ export function ParticipantInfoTab() {
     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 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));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/ParticipantOpeningHoursTab.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { getParticipantOpeningHours } from "appointment-client";
+import { ensureBlazeoHttpReady, getParticipantOpeningHours } from "appointment-client";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function ParticipantOpeningHoursTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -18,13 +19,22 @@ export function ParticipantOpeningHoursTab() {
     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 {
-      debugger;
-      const result = await getParticipantOpeningHours(id);
-      
+      const result = await getParticipantOpeningHours(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+
       if (!result.meta.ok) {
-        setError(result.meta.error || `Failed to fetch: ${result.meta.reason}`);
+        setError(
+          mapBlazeoDemoError(result.meta.error || `Failed to fetch: ${result.meta.reason}`)
+        );
         if (result.raw) setOutput(JSON.stringify(result.raw, null, 2));
         return;
       }
@@ -37,7 +47,7 @@ export function ParticipantOpeningHoursTab() {
         meta: result.meta 
       }, 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/ParticipantTab.jsx

@@ -1,10 +1,11 @@
 import { useMemo, useState } from "react";
-import { getExampleParticipants, getParticipants } from "appointment-client";
+import { ensureBlazeoHttpReady, getExampleParticipants, getParticipants } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
 import {
   configureBlazeoFromEffective,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 function toDisplayJson(value) {
   if (value == null) return JSON.stringify(value, null, 2);
@@ -20,7 +21,7 @@ function toDisplayJson(value) {
 }
 
 export function ParticipantTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const example = useMemo(() => getExampleParticipants(), []);
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
@@ -41,12 +42,20 @@ export function ParticipantTab() {
       return;
     }
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const res = await getParticipants(id);
+      const res = await getParticipants(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       setOutput(toDisplayJson(res));
     } 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/blazeoBootstrap.js

@@ -0,0 +1,30 @@
+/**
+ * Runs once before React mounts. Order:
+ * 1. `blazeoClientDefaults.ts` (via applyBlazeoClientConfig) — optional file defaults
+ * 2. `VITE_BLAZEO_BASE_URL` / `VITE_BLAZEO_CONSUMER` — overrides when set
+ *
+ * Uses {@link pushBlazeoConnection} so calendar-client is configured the same way as the UI card.
+ */
+import { applyBlazeoClientConfig } from "appointment-client";
+import { pushBlazeoConnection } from "./blazeoPushConnection.js";
+
+function normalizeBase(u) {
+  const t = (u ?? "").trim();
+  if (!t) return "";
+  return t.replace(/\/+$/, "");
+}
+
+export function bootstrapBlazeoClient() {
+  debugger;
+  applyBlazeoClientConfig();
+
+  const envBase = normalizeBase(import.meta.env.VITE_BLAZEO_BASE_URL ?? "");
+  const envConsumer = (import.meta.env.VITE_BLAZEO_CONSUMER ?? "").trim();
+
+  if (!envBase) return;
+
+  pushBlazeoConnection({
+    baseUrl: envBase,
+    ...(envConsumer ? { consumer: envConsumer } : {}),
+  });
+}

package/sample/src/blazeoDemoError.js

@@ -0,0 +1,14 @@
+/**
+ * Maps low-level Blazeo / calendar-client errors to actionable copy for this sample.
+ */
+export function mapBlazeoDemoError(message) {
+  const m = String(message ?? "");
+  if (
+    /Model env requires baseUrl|requires baseUrl\. Call configure|baseUrl is missing|Blazeo base URL is not set/i.test(
+      m
+    )
+  ) {
+    return "Blazeo Base URL is not set for API calls. Enter **Base URL** (and optional Consumer) in the **Blazeo connection** card at the top of this page, or set `blazeoClientConfig` / `VITE_BLAZEO_BASE_URL`.";
+  }
+  return m;
+}

package/sample/src/blazeoPushConnection.js

@@ -0,0 +1,23 @@
+import { ensureBlazeoHttpReady, initializeAppointmentClient } from "appointment-client";
+import { configure } from "@blazeo.com/calendar-client";
+
+function normalizeBase(u) {
+  const t = (u ?? "").trim();
+  if (!t) return "";
+  return t.replace(/\/+$/, "");
+}
+
+/**
+ * Applies Base URL from the connection card. With Vite `resolve.alias` pointing
+ * `@blazeo.com/calendar-client` at one file, `configure` here matches `CalendarModel`'s store.
+ * `initializeAppointmentClient` + `ensureBlazeoHttpReady` keep `appointment-client` helpers aligned.
+ */
+export function pushBlazeoConnection(effective) {
+  const baseUrl = normalizeBase(effective?.baseUrl ?? "");
+  if (!baseUrl) return;
+  const consumer = (effective?.consumer ?? "").trim() || undefined;
+  const cfg = { baseUrl, ...(consumer ? { consumer } : {}) };
+  initializeAppointmentClient(cfg);
+  configure(cfg);
+  ensureBlazeoHttpReady(cfg);
+}

package/sample/src/main.jsx

@@ -1,11 +1,11 @@
-import { applyBlazeoClientConfig } from "appointment-client";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App2.jsx";
+import { bootstrapBlazeoClient } from "./blazeoBootstrap.js";
 import "./style.css";
 
-/** Apply file defaults (`blazeoClientDefaults.ts`) before React mounts. */
-applyBlazeoClientConfig();
+/** Blazeo: `blazeoClientDefaults.ts` + optional `VITE_BLAZEO_*` (.env) → `configure()` for calendar-client. */
+bootstrapBlazeoClient();
 
 const rootEl = document.getElementById("app");
 if (!rootEl) {

package/sample/vite.config.js

@@ -1,10 +1,23 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig, loadEnv } from "vite";
 import path from "path";
+import fs from "fs";
 import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/** Single physical entry for `@blazeo.com/calendar-client` (hoisted or nested under `file:..` parent). */
+function calendarClientEntry() {
+  const candidates = [
+    path.resolve(__dirname, "node_modules/@blazeo.com/calendar-client/dist/index.mjs"),
+    path.resolve(__dirname, "../node_modules/@blazeo.com/calendar-client/dist/index.mjs"),
+  ];
+  for (const p of candidates) {
+    if (fs.existsSync(p)) return p;
+  }
+  return candidates[0];
+}
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, path.resolve(__dirname, "."), "");
   const proxyTarget = (env.VITE_DEV_PROXY_TARGET ?? "").trim().replace(/\/+$/, "");
@@ -26,13 +39,14 @@ export default defineConfig(({ mode }) => {
     plugins: [react()],
     /** Ensure one instance so `configure()` and models share the same store. */
     resolve: {
-      preserveSymlinks: true,
+      // `file:..` appointment-client is symlinked; `true` can resolve the same dep twice → two `getConfig()` stores.
+      preserveSymlinks: false,
       dedupe: ["@blazeo.com/calendar-client", "mobx", "mobx-state-tree"],
       alias: {
-        "@blazeo.com/calendar-client": path.resolve(
-          __dirname,
-          "../node_modules/@blazeo.com/calendar-client/dist/index.mjs"
-        ),
+        // Ensure Vite/Rollup can always resolve the local workspace package.
+        // (Avoids `Failed to resolve import "appointment-client"` during dev/build.)
+        "appointment-client": path.resolve(__dirname, "../dist/index.js"),
+        "@blazeo.com/calendar-client": calendarClientEntry(),
       },
     },
     optimizeDeps: {

package/src/calendar/buildUnifiedCalendarView.ts

@@ -56,6 +56,7 @@ export interface UnifiedCalendarMember {
   status: number | null;
   /** Full row from Participants/GetInfo (plain object). */
   participantInfo?: Record<string, unknown> | null;
+  __typename?: string;
 }
 
 export interface UnifiedParticipantWithHours extends UnifiedCalendarMember {
@@ -63,13 +64,20 @@ export interface UnifiedParticipantWithHours extends UnifiedCalendarMember {
 }
 
 export interface UnifiedOpeningHourRow {
+  id?: number | string;
+  createdOn?: string;
+  modifiedOn?: string;
   member: number | string;
+  openingHourId?: string;
+  calendarId?: string;
+  participantId?: string;
   days: string[];
   startHour: number;
   startMinute: number;
   endHour: number;
   endMinute: number;
   off: boolean;
+  __typename?: string;
 }
 
 function dayOrderIndex(d: string): number {
@@ -253,6 +261,7 @@ export function buildUnifiedCalendarView(
         email: email ?? null,
         status: deriveMemberStatus({}, inf),
         participantInfo: participantInfoPlain,
+        __typename: "Member",
       });
     }
   }
@@ -277,13 +286,20 @@ export function buildUnifiedCalendarView(
     const off = Boolean(pick(row, "off", "Off"));
 
     openingHours.push({
+      id: pick(row, "id", "Id") ?? 0,
+      createdOn: pick(row, "createdOn", "CreatedOn", "created_on") ?? "0001-01-01T00:00:00.000Z",
+      modifiedOn: pick(row, "modifiedOn", "ModifiedOn", "modified_on") ?? "0001-01-01T00:00:00.000Z",
       member: memberId,
+      openingHourId: pick(row, "openingHourId", "OpeningHourId", "opening_hour_id") ?? "",
+      calendarId: pick(row, "calendarId", "CalendarId", "calendar_id") ?? "",
+      participantId: pick(row, "participantId", "ParticipantId", "participant_id") ?? "",
       days,
       startHour,
       startMinute,
       endHour,
       endMinute,
       off,
+      __typename: "OpeningHour",
     });
   }
 
@@ -294,6 +310,7 @@ export function buildUnifiedCalendarView(
     members,
     openingHours,
     participants: buildNestedParticipants(members, openingHours),
+    __typename: "Calendar",
   } as UnifiedCalendarView;
 
   return view;
@@ -306,17 +323,23 @@ function buildNestedParticipants(
   members: UnifiedCalendarMember[],
   openingHours: UnifiedOpeningHourRow[]
 ): UnifiedParticipantWithHours[] {
-  return members.map((m) => {
-    const hours = openingHours.filter((oh) => {
+  const nested: UnifiedParticipantWithHours[] = [];
+  members.forEach((m) => {
+    const hoursForThisMember = openingHours.filter((oh) => {
       const mid = String(oh.member).trim().toLowerCase();
       const pid = String(m.id).trim().toLowerCase();
       return mid === pid;
     });
     // Remove the 'member' field from the nested opening hours as it's redundant.
-    const nestedHours = hours.map(({ member, ...rest }) => rest as any);
-    return {
+    const nestedHours = hoursForThisMember.map(({ member, ...rest }) => ({
+      ...rest,
+      __typename: "OpeningHour"
+    }));
+    nested.push({
       ...m,
       openingHours: nestedHours,
-    };
+      __typename: "Member",
+    } as UnifiedParticipantWithHours);
   });
+  return nested;
 }