@blazeo.com/appointment-client 1.0.3 → 1.0.4

package/sample/src/EventTab.jsx

@@ -0,0 +1,244 @@
+import { useMemo, useState } from "react";
+import {
+  cancelAppointmentEventAsync,
+  createAppointmentEventAsync,
+  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);
+}
+
+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 [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);
+    }
+  }
+
+  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>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}
+    </>
+  );
+}