@blazeo.com/appointment-client 1.0.3 → 1.0.5

package/sample/src/FetchCalendarTab.jsx

@@ -0,0 +1,545 @@
+import { useMemo, useState } from "react";
+import {
+  CalendarModel,
+  deleteCalendarAsync,
+  fetchCalendarDetails,
+  fetchCalendarWithOpeningHours,
+  updateCalendarAsync,
+} from "appointment-client";
+import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
+import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { getExampleCalendarBOInput } from "./CreateCalendarTab.jsx";
+
+function pick(row, ...keys) {
+  if (row == null || typeof row !== "object") return undefined;
+  for (const k of keys) {
+    if (row[k] !== undefined && row[k] !== null) return row[k];
+  }
+  return undefined;
+}
+
+function pad2(n) {
+  const v = Number(n);
+  if (Number.isNaN(v)) return "—";
+  return String(v).padStart(2, "0");
+}
+
+/**
+ * Browser `fetch` often surfaces blocked requests as TypeError "Failed to fetch" (e.g. CORS).
+ */
+function explainFetchFailure(err, configuredBaseUrl) {
+  const msg = err instanceof Error ? err.message : String(err);
+  const isNetwork =
+    msg === "Failed to fetch" ||
+    msg === "Load failed" ||
+    (err instanceof TypeError && (/fetch/i.test(msg) || /network/i.test(msg)));
+  if (!isNetwork) return msg;
+
+  const isRemote =
+    configuredBaseUrl &&
+    /^https?:\/\//i.test(configuredBaseUrl) &&
+    !/localhost|127\.0\.0\.1/i.test(configuredBaseUrl);
+
+  const proxyHint =
+    "Dev workaround (Vite proxy): create sample/.env.development with\n" +
+    "  VITE_DEV_PROXY_TARGET=https://YOUR_API_ORIGIN\n" +
+    "restart npm run dev, then set Base URL to:\n" +
+    "  http://localhost:5173/blazeo-api\n" +
+    "Consumer header stays the same.";
+
+  if (isRemote) {
+    return `${msg}\n\nLikely CORS / blocked browser cross-origin request.\nFix API CORS for http://localhost:5173, OR:\n${proxyHint}`;
+  }
+  return `${msg}\n\n${proxyHint}`;
+}
+
+/** Opening hours list from participant API wrapper or embedded `calendar.openingHours`. */
+function pickOpeningHoursListFromBundle(parsed) {
+  const fromCal = parsed?.calendar?.openingHours;
+  if (Array.isArray(fromCal) && fromCal.length > 0) return fromCal;
+  const oh = parsed?.openingHours;
+  if (oh == null) return null;
+  if (Array.isArray(oh)) return oh.length ? oh : null;
+  const d = oh.data ?? oh.Data ?? oh;
+  if (Array.isArray(d)) return d.length ? d : null;
+  if (d && typeof d === "object") {
+    if (Array.isArray(d.openingHours)) return d.openingHours;
+    if (Array.isArray(d.items)) return d.items;
+  }
+  return null;
+}
+
+function OpeningHoursSummary({ outputJson }) {
+  let list = null;
+  try {
+    const parsed = JSON.parse(outputJson);
+    list = pickOpeningHoursListFromBundle(parsed);
+  } catch {
+    return null;
+  }
+  if (!Array.isArray(list) || list.length === 0) {
+    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.
+      </p>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <h3 style={{ margin: "0 0 0.5rem", fontSize: "0.95rem", color: "#334155" }}>
+        Opening hours (quick view)
+      </h3>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Day(s)</th>
+            <th>Start</th>
+            <th>End</th>
+            <th>Off</th>
+            <th>Participant</th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((row, idx) => {
+            const days = pick(row, "days", "Days");
+            const day = pick(row, "day", "Day");
+            const dayLabel = Array.isArray(days)
+              ? days.join(", ")
+              : day != null
+                ? String(day)
+                : "—";
+            const sh = pick(row, "startHour", "StartHour", "start_hour");
+            const sm = pick(row, "startMinute", "StartMinute", "start_minute");
+            const eh = pick(row, "endHour", "EndHour", "end_hour");
+            const em = pick(row, "endMinute", "EndMinute", "end_minute");
+            const off = pick(row, "off", "Off");
+            const pid = pick(row, "participantId", "ParticipantId", "participant_id");
+            const member = pick(row, "member", "Member");
+            const participantDisplay =
+              pid != null ? String(pid) : member != null ? String(member) : "—";
+            return (
+              <tr key={idx}>
+                <td className="table__code">{dayLabel}</td>
+                <td className="table__code">
+                  {pad2(sh)}:{pad2(sm)}
+                </td>
+                <td className="table__code">
+                  {pad2(eh)}:{pad2(em)}
+                </td>
+                <td className="table__code">{off === true || off === "true" ? "yes" : "no"}</td>
+                <td className="table__code">{participantDisplay}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <p className="muted small" style={{ marginTop: "0.5rem" }}>
+        Source:{" "}
+        {(() => {
+          try {
+            const p = JSON.parse(outputJson);
+            if (p?.__openingHoursMeta?.fromCalendarGet) return "embedded on GET /Calendar/Get";
+            if (p?.__openingHoursMeta?.fromParticipantApi)
+              return "GET /Calendar/Participant/OpeningHours/Get";
+            return "see JSON";
+          } catch {
+            return "—";
+          }
+        })()}
+      </p>
+    </div>
+  );
+}
+
+function toDisplayJson(value) {
+  if (value == null) return JSON.stringify(value, null, 2);
+  if (Array.isArray(value) && value.every(isStateTreeNode)) {
+    return JSON.stringify(value.map((n) => getSnapshot(n)), null, 2);
+  }
+  if (isStateTreeNode(value)) return JSON.stringify(getSnapshot(value), null, 2);
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+/** MST `Calendar` snapshot uses `id` (server id). `CalendarInput` / update mapper expect `serverId`. */
+function calendarSnapshotToUpdatePayload(snap) {
+  const copy = { ...snap };
+  const serverId = copy.id;
+  delete copy.id;
+  if (serverId != null) copy.serverId = serverId;
+  return copy;
+}
+
+export function FetchCalendarTab() {
+  const { effective } = useBlazeoConnection();
+  const [calendarId, setCalendarId] = useState("");
+  const [companyKey, setCompanyKey] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [note, setNote] = useState("");
+  const [output, setOutput] = useState("");
+  const [error, setError] = useState("");
+
+  const initialUpdateJson = useMemo(() => {
+    const ex = getExampleCalendarBOInput();
+    ex.calendarId = "paste-or-use-button-below";
+    return JSON.stringify(ex, null, 2);
+  }, []);
+  const [updateJson, setUpdateJson] = useState(initialUpdateJson);
+  const [mutateNote, setMutateNote] = useState("");
+  const [mutateOutput, setMutateOutput] = useState("");
+  const [lastFetchUpdatePayload, setLastFetchUpdatePayload] = useState(null);
+
+  function ensureBaseConfigured() {
+    if (!effective.baseUrl) {
+      setError("Set Base URL in the connection card above or in `blazeoClientDefaults.ts`.");
+      return false;
+    }
+    return true;
+  }
+
+  async function handleFetchCalendar(e) {
+    e.preventDefault();
+    setError("");
+    setNote("");
+    setOutput("");
+    setLastFetchUpdatePayload(null);
+    const id = calendarId.trim();
+    if (!id) {
+      setError("Enter a calendar id.");
+      return;
+    }
+    if (!ensureBaseConfigured()) return;
+    configureBlazeoFromEffective(effective);
+
+    setBusy(true);
+    try {
+      const details = await fetchCalendarDetails(id, { includeParticipantsInfo: true });
+
+      if (details.cal == null) {
+        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,
+      };
+
+      setOutput(toDisplayJson(payload));
+      setNote("Loaded calendar + opening hours + participants (3 calls) → single response object.");
+    } catch (err) {
+      setError(explainFetchFailure(err, effective.baseUrl));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleFetchByCompany(e) {
+    e.preventDefault();
+    setError("");
+    setNote("");
+    setOutput("");
+    setLastFetchUpdatePayload(null);
+    const key = companyKey.trim();
+    if (!key) {
+      setError("Enter a company key.");
+      return;
+    }
+    if (!ensureBaseConfigured()) return;
+    configureBlazeoFromEffective(effective);
+
+    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));
+      } 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);
+              return {
+                calendar: b.calendar ?? getSnapshot(c),
+                openingHours: b.openingHours,
+                participants: b.participants,
+                meta: b.meta,
+              };
+            } catch (err) {
+              return {
+                calendar: getSnapshot(c),
+                openingHours: [],
+                meta: {
+                  error: err instanceof Error ? err.message : String(err),
+                },
+              };
+            }
+          })
+        );
+        setNote(
+          `Loaded ${list.length} calendar(s); opening hours + participants loaded per calendar (single details bundle).`
+        );
+        setOutput(toDisplayJson(enriched));
+      }
+    } catch (err) {
+      setError(explainFetchFailure(err, effective.baseUrl));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function handleFillUpdateFromLastFetch() {
+    if (lastFetchUpdatePayload == null) {
+      setError("Fetch one calendar first (successful CalendarModel.get), then use this button.");
+      return;
+    }
+    setUpdateJson(lastFetchUpdatePayload);
+    setError("");
+    setMutateNote("");
+    setMutateOutput("");
+  }
+
+  function handleInjectCalendarIdIntoUpdateJson() {
+    const id = calendarId.trim();
+    if (!id) {
+      setError("Enter a calendar id above first, or edit the JSON manually.");
+      return;
+    }
+    try {
+      const obj = JSON.parse(updateJson);
+      obj.calendarId = id;
+      setUpdateJson(JSON.stringify(obj, null, 2));
+      setError("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Update JSON is not valid JSON.");
+    }
+  }
+
+  async function handleUpdateCalendar(e) {
+    e.preventDefault();
+    setError("");
+    setMutateNote("");
+    setMutateOutput("");
+    if (!ensureBaseConfigured()) return;
+    configureBlazeoFromEffective(effective);
+    let payload;
+    try {
+      payload = JSON.parse(updateJson);
+    } catch (err) {
+      setError(`Invalid JSON: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    setBusy(true);
+    try {
+      const result = await updateCalendarAsync(payload, {});
+      if (result.ok) {
+        setMutateNote("updateCalendarAsync → POST /Calendar/Event/Update");
+        setMutateOutput(
+          JSON.stringify(
+            {
+              snapshot: getSnapshot(result.calendar),
+              apiResponse: result.apiResponse ?? null,
+            },
+            null,
+            2
+          )
+        );
+      } else {
+        setError(result.error);
+        if (result.apiResponse != null) {
+          setMutateOutput(JSON.stringify(result.apiResponse, null, 2));
+        }
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleDeleteCalendar(e) {
+    e.preventDefault();
+    setError("");
+    setMutateNote("");
+    setMutateOutput("");
+    const id = calendarId.trim();
+    if (!id) {
+      setError("Enter a calendar id to delete.");
+      return;
+    }
+    if (!ensureBaseConfigured()) return;
+    configureBlazeoFromEffective(effective);
+    if (
+      !window.confirm(
+        `Delete calendar "${id}"?\n\nThis calls GET /Calendar/Remove (cannot be undone on the server).`
+      )
+    ) {
+      return;
+    }
+    setBusy(true);
+    try {
+      const result = await deleteCalendarAsync(id, {});
+      if (result.ok) {
+        setMutateNote("deleteCalendarAsync → GET /Calendar/Remove");
+        setMutateOutput(JSON.stringify({ calendarId: id, apiResponse: result.apiResponse ?? null }, null, 2));
+      } else {
+        setError(result.error);
+        if (result.apiResponse != null) {
+          setMutateOutput(JSON.stringify(result.apiResponse, null, 2));
+        }
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Fetch calendar</h2>
+        <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>.
+        </p>
+        <p className="muted small">
+          Effective: <code>{effective.baseUrl || "(set connection or blazeoClientDefaults.ts)"}</code>
+          {effective.consumer ? (
+            <>
+              {" "}
+              · Consumer: <code>{effective.consumer}</code>
+            </>
+          ) : null}
+        </p>
+
+        <form onSubmit={handleFetchCalendar} className="form">
+          <label className="form__label">
+            <span>Calendar id</span>
+            <input
+              type="text"
+              className="form__input"
+              placeholder="Calendar / third-party id"
+              value={calendarId}
+              onChange={(e) => setCalendarId(e.target.value)}
+              autoComplete="off"
+            />
+          </label>
+          <button type="submit" className="btn btn--primary" disabled={busy}>
+            {busy ? "Loading…" : "Fetch calendar + opening hours"}
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <h2>Update calendar</h2>
+        <div className="form-actions form-actions--top">
+          <button
+            type="button"
+            className="btn btn--secondary"
+            disabled={busy || lastFetchUpdatePayload == null}
+            onClick={handleFillUpdateFromLastFetch}
+          >
+            Fill update form from last fetch
+          </button>
+          <button type="button" className="btn btn--secondary" disabled={busy} onClick={handleInjectCalendarIdIntoUpdateJson}>
+            Set calendarId from field above
+          </button>
+        </div>
+        <form onSubmit={handleUpdateCalendar} className="form">
+          <label className="form__label">
+            <span>Payload (JSON)</span>
+            <textarea
+              className="form__textarea"
+              value={updateJson}
+              onChange={(e) => setUpdateJson(e.target.value)}
+              spellCheck={false}
+              rows={14}
+              aria-label="Calendar update JSON"
+            />
+          </label>
+          <button type="submit" className="btn btn--primary" disabled={busy}>
+            {busy ? "Working…" : "Update calendar"}
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <h2>Delete calendar</h2>
+        <form onSubmit={handleDeleteCalendar} className="form">
+          <button type="submit" className="btn btn--secondary" disabled={busy}>
+            {busy ? "Working…" : "Delete calendar"}
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <h2>Fetch calendars by company</h2>
+        <p className="muted small">
+          Calls <code>CalendarModel.getByCompany</code> → <code>GET /Calendar/All</code>. If the UI shows{" "}
+          <strong>Failed to fetch</strong> while Base URL points at Azure/production, that is usually{" "}
+          <strong>CORS</strong>: enable proxy via <code>VITE_DEV_PROXY_TARGET</code> in{" "}
+          <code>sample/.env.development</code> and Base URL <code>http://localhost:5173/blazeo-api</code>{" "}
+          (restart dev server).
+        </p>
+        <form onSubmit={handleFetchByCompany} className="form">
+          <label className="form__label">
+            <span>Company key</span>
+            <input
+              type="text"
+              className="form__input"
+              placeholder="company_key"
+              value={companyKey}
+              onChange={(e) => setCompanyKey(e.target.value)}
+              autoComplete="off"
+            />
+          </label>
+          <button type="submit" className="btn btn--secondary" disabled={busy}>
+            {busy ? "Loading…" : "Fetch calendars"}
+          </button>
+        </form>
+      </div>
+
+      {error ? (
+        <div className="card card--error" role="alert">
+          <h2>Error</h2>
+          <pre className="pre-block">{error}</pre>
+        </div>
+      ) : null}
+
+      {note ? <p className="muted small">{note}</p> : null}
+
+      {output ? (
+        <div className="card card--success">
+          <h2>Calendar + opening hours &amp; participants</h2>
+          <OpeningHoursSummary outputJson={output} />
+          <pre className="pre-block">{output}</pre>
+        </div>
+      ) : null}
+
+      {mutateNote ? <p className="muted small">{mutateNote}</p> : null}
+
+      {mutateOutput ? (
+        <div className="card card--success">
+          <h2>Update / delete result</h2>
+          <pre className="pre-block">{mutateOutput}</pre>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/sample/src/ParticipantTab.jsx

@@ -0,0 +1,102 @@
+import { useMemo, useState } from "react";
+import { getExampleParticipants, ParticipantModel } from "appointment-client";
+import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
+import {
+  configureBlazeoFromEffective,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+
+function toDisplayJson(value) {
+  if (value == null) return JSON.stringify(value, null, 2);
+  if (Array.isArray(value) && value.every(isStateTreeNode)) {
+    return JSON.stringify(value.map((n) => getSnapshot(n)), null, 2);
+  }
+  if (isStateTreeNode(value)) return JSON.stringify(getSnapshot(value), null, 2);
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function ParticipantTab() {
+  const { effective } = useBlazeoConnection();
+  const example = useMemo(() => getExampleParticipants(), []);
+  const [calendarId, setCalendarId] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [output, setOutput] = useState("");
+
+  async function handleFetchParticipants(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 ParticipantModel.getAllByCalendar(id);
+      setOutput(toDisplayJson(res));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Participants</h2>
+        <p className="muted small">
+          Example participants from <code>getExampleParticipants()</code> plus a fetch helper.
+        </p>
+        <pre className="pre-block">{JSON.stringify(example, null, 2)}</pre>
+      </div>
+
+      <div className="card">
+        <h2>Fetch participants by calendar</h2>
+        <p className="muted small">
+          Calls <code>ParticipantModel.getAllByCalendar(calendarId)</code>.
+        </p>
+        <form onSubmit={handleFetchParticipants} 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--secondary" disabled={busy}>
+            {busy ? "Loading…" : "Fetch participants"}
+          </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/main.jsx

@@ -0,0 +1,19 @@
+import { applyBlazeoClientConfig } from "appointment-client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App2.jsx";
+import "./style.css";
+
+/** Apply file defaults (`blazeoClientDefaults.ts`) before React mounts. */
+applyBlazeoClientConfig();
+
+const rootEl = document.getElementById("app");
+if (!rootEl) {
+  throw new Error("Missing #app element");
+}
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);