@blazeo.com/appointment-client 1.0.3 → 1.0.4

package/sample/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "appointment-client-sample",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "appointment-client": "file:..",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.4.0",
+    "vite": "^6.0.0"
+  }
+}

package/sample/src/App2.jsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import {
+  BlazeoConnectionProvider,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+import { CalendarTab } from "./CalendarTab.jsx";
+import { EventTab } from "./EventTab.jsx";
+import { ParticipantTab } from "./ParticipantTab.jsx";
+import { AvailabilityTab } from "./AvailabilityTab.jsx";
+import { CreateCalendarTab } from "./CreateCalendarTab.jsx";
+import { FetchCalendarTab } from "./FetchCalendarTab.jsx";
+
+const TABS = [
+  { id: "calendar", label: "Calendar" },
+  { id: "fetch", label: "Fetch calendar" },
+  { id: "create", label: "Create calendar" },
+  { id: "event", label: "Event" },
+  { id: "participant", label: "Participant" },
+  { id: "availability", label: "Availability / booking" },
+];
+
+function ConnectionSettingsCard() {
+  const {
+    baseUrlInput,
+    consumerInput,
+    setBaseUrlInput,
+    setConsumerInput,
+    effective,
+  } = useBlazeoConnection();
+
+  return (
+    <div className="card connection-card">
+      <h2>Blazeo connection</h2>
+      <p className="muted small">
+        Values are saved in <code>localStorage</code>. Empty fields fall back to{" "}
+        <code>appointment-client/src/config/blazeoClientDefaults.ts</code>.
+      </p>
+      <p className="muted small">
+        Effective:{" "}
+        <code>{effective.baseUrl || "(set below or in blazeoClientDefaults.ts)"}</code>
+        {effective.consumer ? (
+          <>
+            {" "}
+            · Consumer: <code>{effective.consumer}</code>
+          </>
+        ) : null}
+      </p>
+      <div className="connection-card__row">
+        <label className="form__label">
+          <span>Base URL</span>
+          <input
+            type="url"
+            className="form__input"
+            placeholder="https://api.example.com"
+            value={baseUrlInput}
+            onChange={(e) => setBaseUrlInput(e.target.value)}
+            autoComplete="off"
+          />
+        </label>
+        <label className="form__label">
+          <span>Consumer</span>
+          <input
+            type="text"
+            className="form__input"
+            placeholder="Optional — same as backend header"
+            value={consumerInput}
+            onChange={(e) => setConsumerInput(e.target.value)}
+            autoComplete="off"
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+function AppShell() {
+  const [activeId, setActiveId] = useState("calendar");
+
+  return (
+    <main className="page">
+      <header className="header">
+        <h1>appointment-client</h1>
+        <p className="muted">Browser sample — tabbed explorer for the npm package</p>
+      </header>
+
+      <ConnectionSettingsCard />
+
+      <div className="tabs" role="tablist" aria-label="Sample areas">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            id={`tab-${tab.id}`}
+            aria-selected={activeId === tab.id}
+            aria-controls={`panel-${tab.id}`}
+            className={`tabs__btn ${activeId === tab.id ? "tabs__btn--active" : ""}`}
+            onClick={() => setActiveId(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="tab-panel">
+        {activeId === "calendar" && (
+          <section role="tabpanel" id="panel-calendar" aria-labelledby="tab-calendar">
+            <CalendarTab />
+          </section>
+        )}
+        {activeId === "fetch" && (
+          <section role="tabpanel" id="panel-fetch" aria-labelledby="tab-fetch">
+            <FetchCalendarTab />
+          </section>
+        )}
+        {activeId === "create" && (
+          <section role="tabpanel" id="panel-create" aria-labelledby="tab-create">
+            <CreateCalendarTab />
+          </section>
+        )}
+        {activeId === "event" && (
+          <section role="tabpanel" id="panel-event" aria-labelledby="tab-event">
+            <EventTab />
+          </section>
+        )}
+        {activeId === "participant" && (
+          <section role="tabpanel" id="panel-participant" aria-labelledby="tab-participant">
+            <ParticipantTab />
+          </section>
+        )}
+        {activeId === "availability" && (
+          <section role="tabpanel" id="panel-availability" aria-labelledby="tab-availability">
+            <AvailabilityTab />
+          </section>
+        )}
+      </div>
+    </main>
+  );
+}
+
+export function App() {
+  return (
+    <BlazeoConnectionProvider>
+      <AppShell />
+    </BlazeoConnectionProvider>
+  );
+}
+

package/sample/src/AvailabilityTab.jsx

@@ -0,0 +1,83 @@
+import { useMemo, useState } from "react";
+import { EventModel } from "appointment-client";
+import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+
+function parseYmd(ymd) {
+  const t = (ymd ?? "").trim();
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(t)) return null;
+  const [y, m, d] = t.split("-").map((x) => Number(x));
+  return { y, m, d };
+}
+
+export function AvailabilityTab() {
+  const { effective } = useBlazeoConnection();
+  const [calendarId, setCalendarId] = useState("");
+  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10));
+  const [offsetMinutes, setOffsetMinutes] = useState(-new Date().getTimezoneOffset());
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [output, setOutput] = useState("");
+
+  const opts = useMemo(() => ({ offset: Number(offsetMinutes) || 0 }), [offsetMinutes]);
+
+  async function handleSlots(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    const id = calendarId.trim();
+    const parts = parseYmd(date);
+    if (!id) return setError("Enter calendar id.");
+    if (!parts) return setError("Pick a valid date.");
+    if (!effective.baseUrl) return setError("Set Base URL above.");
+    configureBlazeoFromEffective(effective);
+
+    setBusy(true);
+    try {
+      const list = await EventModel.getAvailability(id, parts.y, parts.m, parts.d, opts);
+      setOutput(JSON.stringify(list.map((n) => n.toJSON?.() ?? n), null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Availability</h2>
+        <form onSubmit={handleSlots} className="form">
+          <label className="form__label">
+            <span>Calendar id</span>
+            <input className="form__input" value={calendarId} onChange={(e) => setCalendarId(e.target.value)} />
+          </label>
+          <label className="form__label">
+            <span>Date</span>
+            <input type="date" className="form__input" value={date} onChange={(e) => setDate(e.target.value)} />
+          </label>
+          <label className="form__label">
+            <span>Offset minutes</span>
+            <input type="number" className="form__input" value={offsetMinutes} onChange={(e) => setOffsetMinutes(e.target.value)} />
+          </label>
+          <button className="btn btn--secondary" disabled={busy}>
+            {busy ? "Loading…" : "Load slots"}
+          </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/BlazeoConnectionSettings.jsx

@@ -0,0 +1,118 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import { blazeoClientConfig, initializeAppointmentClient } from "appointment-client";
+import { configure as configureCalendarClient } from "@blazeo.com/calendar-client";
+
+const STORAGE_BASE = "appointment-client-sample:blazeoBaseUrl";
+const STORAGE_CONSUMER = "appointment-client-sample:blazeoConsumer";
+
+function readStored(key) {
+  try {
+    return localStorage.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function writeStored(key, value) {
+  try {
+    if (value) localStorage.setItem(key, value);
+    else localStorage.removeItem(key);
+  } catch {
+    /* ignore */
+  }
+}
+
+function normalizeBase(u) {
+  const t = (u ?? "").trim();
+  if (!t) return "";
+  return t.replace(/\/+$/, "");
+}
+
+/** Merge UI fields with packaged defaults (`blazeoClientDefaults`) when inputs are empty. */
+export function mergeBlazeoUiWithFile(uiBaseUrl, uiConsumer) {
+  const fileBase = normalizeBase(blazeoClientConfig.baseUrl ?? "");
+  const fileConsumer = (blazeoClientConfig.consumer ?? "").trim();
+  const baseUrl = normalizeBase(uiBaseUrl) || fileBase || undefined;
+  const consumer = (uiConsumer ?? "").trim() || fileConsumer || undefined;
+  return { baseUrl, consumer };
+}
+
+/**
+ * Re-apply global Blazeo `configure` from the merged connection card state.
+ * Call at the start of any handler that uses `CalendarModel` / `EventModel` HTTP so
+ * `getParticipantOpeningHours` (instance env) and static helpers always see the same
+ * `baseUrl`.
+ */
+export function configureBlazeoFromEffective(effective) {
+  const baseUrl = normalizeBase(effective?.baseUrl ?? "");
+  if (!baseUrl) return;
+  const consumer = (effective?.consumer ?? "").trim() || undefined;
+  // Configure appointment-client (which configures its internal calendar-client instance)
+  initializeAppointmentClient({ baseUrl, ...(consumer ? { consumer } : {}) });
+  // Also configure the calendar-client instance that the sample (and Vite alias) may resolve.
+  configureCalendarClient({ baseUrl, ...(consumer ? { consumer } : {}) });
+}
+
+const BlazeoConnectionContext = createContext(null);
+
+export function BlazeoConnectionProvider({ children }) {
+  const [baseUrlInput, setBaseUrlInput] = useState(() => readStored(STORAGE_BASE));
+  const [consumerInput, setConsumerInput] = useState(() => readStored(STORAGE_CONSUMER));
+
+  const effective = useMemo(
+    () => mergeBlazeoUiWithFile(baseUrlInput, consumerInput),
+    [baseUrlInput, consumerInput]
+  );
+
+  useEffect(() => {
+    writeStored(STORAGE_BASE, baseUrlInput.trim());
+  }, [baseUrlInput]);
+
+  useEffect(() => {
+    writeStored(STORAGE_CONSUMER, consumerInput.trim());
+  }, [consumerInput]);
+
+  /**
+   * Sync global Blazeo `configure` before paint so `CalendarModel.get` /
+   * `EventModel.*` static calls never see an empty `getConfig()` after the user
+   * has set Base URL (including values restored from localStorage on first paint).
+   */
+  useLayoutEffect(() => {
+    const { baseUrl, consumer } = mergeBlazeoUiWithFile(baseUrlInput, consumerInput);
+    if (!baseUrl) return;
+    initializeAppointmentClient({ baseUrl, ...(consumer ? { consumer } : {}) });
+    configureCalendarClient({ baseUrl, ...(consumer ? { consumer } : {}) });
+  }, [baseUrlInput, consumerInput]);
+
+  const value = useMemo(
+    () => ({
+      baseUrlInput,
+      consumerInput,
+      setBaseUrlInput,
+      setConsumerInput,
+      effective,
+    }),
+    [baseUrlInput, consumerInput, effective]
+  );
+
+  return (
+    <BlazeoConnectionContext.Provider value={value}>
+      {children}
+    </BlazeoConnectionContext.Provider>
+  );
+}
+
+export function useBlazeoConnection() {
+  const ctx = useContext(BlazeoConnectionContext);
+  if (ctx == null) {
+    throw new Error("useBlazeoConnection must be used within BlazeoConnectionProvider");
+  }
+  return ctx;
+}

package/sample/src/CalendarTab.jsx

@@ -0,0 +1,37 @@
+import { CalendarClient, getExampleSlots, packageName } from "appointment-client";
+
+const client = new CalendarClient();
+
+export function CalendarTab() {
+  const slots = getExampleSlots();
+  const fromClient = client.getExampleSlots();
+
+  return (
+    <>
+      <div className="card">
+        <h2>Package</h2>
+        <p>
+          <code>packageName</code> → <strong>{packageName}</strong>
+        </p>
+        <p>
+          <code>CalendarClient#name</code> → <strong>{client.name}</strong>
+        </p>
+      </div>
+
+      <div className="card">
+        <h2>
+          <code>getExampleSlots()</code>
+        </h2>
+        <pre className="pre-block">{JSON.stringify(slots, null, 2)}</pre>
+      </div>
+
+      <div className="card">
+        <h2>
+          <code>CalendarClient</code> instance
+        </h2>
+        <pre className="pre-block">{JSON.stringify(fromClient, null, 2)}</pre>
+      </div>
+    </>
+  );
+}
+

package/sample/src/CreateCalendarTab.jsx

@@ -0,0 +1,147 @@
+import { useMemo, useState } from "react";
+import { createCalendarAsync, createCalendarWithRelationsAsync } from "appointment-client";
+import { getSnapshot } from "mobx-state-tree";
+import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+
+/** Demo payload aligned with `CalendarBOInput` / server `CalendarBO`. */
+export function getExampleCalendarBOInput() {
+  return {
+    companyKey: "company_key",
+    name: "Demo calendar",
+    timeZoneId: "Pakistan Standard Time",
+    assignmentMethod: 1,
+    duration: 20,
+    durationUnit: 1,
+    minimumBookingNotice: 1,
+    minimumBookingNoticeUnit: 2,
+    minimumCancelationNotice: 1,
+    minimumCancelationNoticeUnit: 2,
+    futureLimit: 1,
+    futureLimitUnit: 6,
+    bufferTime: 10,
+    bufferTimeUnit: 1,
+    bookingLimit: -1,
+    members: [{ id: "00000000-0000-0000-0000-000000000000" }],
+    openingHours: [
+      {
+        id: 1,
+        days: [1, 2, 3, 4, 5],
+        startHour: 9,
+        startMinute: 0,
+        endHour: 17,
+        endMinute: 0,
+        off: false,
+        participantId: "00000000-0000-0000-0000-000000000000",
+      },
+    ],
+  };
+}
+
+export function CreateCalendarTab() {
+  const { effective } = useBlazeoConnection();
+  const [localOnly, setLocalOnly] = useState(false);
+  const [saveRelations, setSaveRelations] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [output, setOutput] = useState("");
+
+  const [jsonText, setJsonText] = useState(() =>
+    JSON.stringify(getExampleCalendarBOInput(), null, 2)
+  );
+
+  const hint = useMemo(() => {
+    if (localOnly) return "Local only: no HTTP.";
+    if (!effective.baseUrl) return "Set Base URL above first.";
+    return saveRelations ? "Will save calendar + participants + opening hours." : "Will save calendar body only.";
+  }, [localOnly, effective.baseUrl, saveRelations]);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    let payload;
+    try {
+      payload = JSON.parse(jsonText);
+    } catch (err) {
+      setError(`Invalid JSON: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    if (!localOnly && !effective.baseUrl) {
+      setError("Set Base URL in the connection card above.");
+      return;
+    }
+    if (!localOnly) configureBlazeoFromEffective(effective);
+
+    const hasRelations = (payload.members?.length ?? 0) > 0 || (payload.openingHours?.length ?? 0) > 0;
+    const useRelations = saveRelations && hasRelations && !localOnly;
+
+    setBusy(true);
+    try {
+      const result = useRelations
+        ? await createCalendarWithRelationsAsync(payload, { localOnly })
+        : await createCalendarAsync(payload, { localOnly });
+      setOutput(JSON.stringify(result.ok ? getSnapshot(result.calendar) : result, null, 2));
+      if (!result.ok) setError(result.error);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <div className="card">
+        <h2>Create calendar</h2>
+        <p className="muted small">{hint}</p>
+        <label className="form__label">
+          <span>
+            <input type="checkbox" checked={localOnly} onChange={(e) => setLocalOnly(e.target.checked)} /> Local only
+          </span>
+        </label>
+        <label className="form__label">
+          <span>
+            <input
+              type="checkbox"
+              checked={saveRelations}
+              disabled={localOnly}
+              onChange={(e) => setSaveRelations(e.target.checked)}
+            />{" "}
+            Save members &amp; opening hours
+          </span>
+        </label>
+      </div>
+
+      <div className="card">
+        <h2>Payload</h2>
+        <form className="form" onSubmit={handleSubmit}>
+          <label className="form__label">
+            <span>JSON</span>
+            <textarea
+              className="form__textarea"
+              value={jsonText}
+              onChange={(e) => setJsonText(e.target.value)}
+              spellCheck={false}
+              rows={16}
+            />
+          </label>
+          <button className="btn btn--primary" disabled={busy}>
+            {busy ? "Working…" : "Create"}
+          </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}
+    </>
+  );
+}