@blazeo.com/appointment-client 1.0.3 → 1.0.5

package/sample/src/EventTab.jsx

@@ -0,0 +1,372 @@
+import { useMemo, useState } from "react";
+import {
+  cancelAppointmentEventAsync,
+  createAppointmentEventAsync,
+  EventModel,
+  rescheduleAppointmentEventAsync,
+} from "appointment-client";
+import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
+import {
+  configureBlazeoFromEffective,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+
+function getExampleCreatePayload() {
+  const start = new Date();
+  start.setHours(10, 0, 0, 0);
+  const end = new Date(start);
+  end.setHours(10, 30, 0, 0);
+  return {
+    thirdPartyCalendarId: "your-calendar-id",
+    participantId: "00000000-0000-0000-0000-000000000000",
+    title: "Sample appointment",
+    description: "Created via appointment-client sample",
+    startDate: start.toISOString(),
+    endDate: end.toISOString(),
+    email: "visitor@example.com",
+    visitorName: "Visitor",
+    timeZone: "Pakistan Standard Time",
+    rescheduleUrl: "https://example.com/reschedule",
+    cancelUrl: "https://example.com/cancel",
+  };
+}
+
+function getExampleReschedulePayload() {
+  const start = new Date();
+  start.setDate(start.getDate() + 1);
+  start.setHours(14, 0, 0, 0);
+  const end = new Date(start);
+  end.setHours(14, 45, 0, 0);
+  return {
+    thirdPartyAppointmentId: "existing-blazeo-event-id",
+    thirdPartyCalendarId: "your-calendar-id",
+    participantId: "00000000-0000-0000-0000-000000000000",
+    title: "Rescheduled title",
+    notes: "Reschedule body",
+    startDate: start.toISOString(),
+    endDate: end.toISOString(),
+    email: "visitor@example.com",
+    timeZone: "Pakistan Standard Time",
+  };
+}
+
+function resultToJson(result) {
+  if (!result) return "";
+  if (result.ok && result.event && isStateTreeNode(result.event)) {
+    return JSON.stringify(
+      {
+        ok: true,
+        eventSnapshot: getSnapshot(result.event),
+        apiResponse: result.apiResponse ?? null,
+      },
+      null,
+      2
+    );
+  }
+  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());
+  const [createJson, setCreateJson] = useState(() =>
+    JSON.stringify(getExampleCreatePayload(), null, 2)
+  );
+  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("");
+  const [output, setOutput] = useState("");
+
+  const opts = useMemo(() => ({ offsetMinutes: Number(offsetMinutes) || 0 }), [offsetMinutes]);
+
+  function ensureBase() {
+    if (!effective.baseUrl) {
+      setError("Set Base URL in the connection card above.");
+      return false;
+    }
+    return true;
+  }
+
+  async function handleCreate(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    if (!ensureBase()) return;
+    configureBlazeoFromEffective(effective);
+    let payload;
+    try {
+      payload = JSON.parse(createJson);
+    } catch (err) {
+      setError(`Create JSON: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    setBusy(true);
+    try {
+      const result = await createAppointmentEventAsync(payload, opts);
+      setOutput(resultToJson(result));
+      if (!result.ok) setError(result.error);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleReschedule(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    if (!ensureBase()) return;
+    configureBlazeoFromEffective(effective);
+    let payload;
+    try {
+      payload = JSON.parse(rescheduleJson);
+    } catch (err) {
+      setError(`Reschedule JSON: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    setBusy(true);
+    try {
+      const result = await rescheduleAppointmentEventAsync(payload, opts);
+      setOutput(resultToJson(result));
+      if (!result.ok) setError(result.error);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleCancel(e) {
+    e.preventDefault();
+    setError("");
+    setOutput("");
+    const id = cancelEventId.trim();
+    if (!id) return setError("Enter Blazeo event id to cancel.");
+    if (!ensureBase()) return;
+    configureBlazeoFromEffective(effective);
+    setBusy(true);
+    try {
+      const result = await cancelAppointmentEventAsync(id, {});
+      setOutput(JSON.stringify(result, null, 2));
+      if (!result.ok) setError(result.error);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  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">
+        <h2>Appointment events</h2>
+        <p className="muted small">
+          Create/reschedule/cancel Blazeo events via <code>appointment-client</code>.
+        </p>
+        <label className="form__label">
+          <span>Offset minutes</span>
+          <input
+            type="number"
+            className="form__input"
+            value={offsetMinutes}
+            onChange={(e) => setOffsetMinutes(e.target.value)}
+          />
+        </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">
+          <label className="form__label">
+            <span>Payload (JSON)</span>
+            <textarea
+              className="form__textarea"
+              value={createJson}
+              onChange={(e) => setCreateJson(e.target.value)}
+              spellCheck={false}
+              rows={14}
+            />
+          </label>
+          <button type="submit" className="btn btn--primary" disabled={busy}>
+            {busy ? "Working…" : "Create"}
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <h2>Reschedule event</h2>
+        <form onSubmit={handleReschedule} className="form">
+          <label className="form__label">
+            <span>Payload (JSON)</span>
+            <textarea
+              className="form__textarea"
+              value={rescheduleJson}
+              onChange={(e) => setRescheduleJson(e.target.value)}
+              spellCheck={false}
+              rows={14}
+            />
+          </label>
+          <button type="submit" className="btn btn--primary" disabled={busy}>
+            {busy ? "Working…" : "Reschedule"}
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <h2>Cancel event</h2>
+        <form onSubmit={handleCancel} className="form">
+          <label className="form__label">
+            <span>Event id</span>
+            <input
+              className="form__input"
+              value={cancelEventId}
+              onChange={(e) => setCancelEventId(e.target.value)}
+            />
+          </label>
+          <button type="submit" className="btn btn--secondary" disabled={busy}>
+            {busy ? "Working…" : "Cancel"}
+          </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}
+    </>
+  );
+}