@odla-ai/chapter 0.0.2 → 0.4.0

package/dist/ui/index.js

@@ -211,7 +211,509 @@ function ChapterAdmin(props) {
     /* @__PURE__ */ jsx2(SignedIn, { children: /* @__PURE__ */ jsx2(Authed, { sections, basePath, brand, crmBasePath, apiBase }) })
   ] });
 }
+
+// src/ui/slot-picker.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/ui/datetime.ts
+function tzShort(tz) {
+  try {
+    const parts = new Intl.DateTimeFormat(void 0, { timeZone: tz, timeZoneName: "short" }).formatToParts(
+      /* @__PURE__ */ new Date()
+    );
+    return parts.find((p) => p.type === "timeZoneName")?.value ?? tz;
+  } catch {
+    return tz;
+  }
+}
+function dayKey(ms, tz) {
+  return new Date(ms).toLocaleDateString("en-CA", { timeZone: tz });
+}
+function dayLabel(ms, tz) {
+  return new Date(ms).toLocaleDateString(void 0, { timeZone: tz, weekday: "short", month: "short", day: "numeric" });
+}
+function timeLabel(ms, tz) {
+  return new Date(ms).toLocaleTimeString(void 0, { timeZone: tz, hour: "numeric", minute: "2-digit" });
+}
+function fullLabel(ms, tz) {
+  return new Date(ms).toLocaleString(void 0, {
+    timeZone: tz,
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short"
+  });
+}
+function fmtMoney(cents) {
+  return "$" + Math.round(cents / 100).toLocaleString();
+}
+function fmtDate(ms) {
+  return new Date(ms).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+}
+function groupSlotsByDay(slots, tz) {
+  const byDay = /* @__PURE__ */ new Map();
+  for (const s of slots) {
+    const k = dayKey(s.startAt, tz);
+    const bucket = byDay.get(k);
+    if (bucket) bucket.push(s);
+    else byDay.set(k, [s]);
+  }
+  return byDay;
+}
+
+// src/ui/slot-picker.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_CLASSES = {
+  days: "slot-days",
+  day: "slot-day",
+  times: "slot-grid",
+  time: "slot-time"
+};
+function SlotPicker(props) {
+  const { slots, timezone, selectedStartAt, onPick, onDayChange, classes = DEFAULT_CLASSES } = props;
+  const byDay = useMemo2(() => groupSlotsByDay(slots, timezone), [slots, timezone]);
+  const dayKeys = [...byDay.keys()];
+  const [activeDay, setActiveDay] = useState3(dayKeys[0]);
+  const day = activeDay !== void 0 && byDay.has(activeDay) ? activeDay : dayKeys[0];
+  const times = (day !== void 0 ? byDay.get(day) : void 0) ?? [];
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("div", { className: classes.days, children: dayKeys.map((key) => {
+      const first = byDay.get(key)?.[0];
+      return /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: classes.day,
+          "aria-pressed": key === day,
+          onClick: () => {
+            setActiveDay(key);
+            onDayChange?.();
+          },
+          children: first ? dayLabel(first.startAt, timezone) : key
+        },
+        key
+      );
+    }) }),
+    /* @__PURE__ */ jsx3("div", { className: classes.times, children: times.map((s) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: classes.time,
+        "aria-pressed": selectedStartAt === s.startAt,
+        onClick: () => onPick(s),
+        children: timeLabel(s.startAt, timezone)
+      },
+      s.startAt
+    )) })
+  ] });
+}
+
+// src/ui/members.tsx
+import { useEffect as useEffect3, useState as useState5 } from "react";
+
+// src/ui/reschedule.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Rescheduler(props) {
+  const { api, applicationId, timezone, onRescheduled, label = "Change your time" } = props;
+  const [open, setOpen] = useState4(false);
+  const [slots, setSlots] = useState4(null);
+  const [tz, setTz] = useState4(timezone);
+  const [busy, setBusy] = useState4(false);
+  const [msg, setMsg] = useState4(null);
+  const start = async () => {
+    setOpen(true);
+    setSlots(null);
+    setMsg(null);
+    try {
+      const r = await api("/api/schedule/slots");
+      if (r.schedulingReady === false) {
+        setSlots([]);
+        setMsg("Scheduling is briefly unavailable. We'll reach out by email to arrange your call.");
+        return;
+      }
+      setSlots(r.slots ?? []);
+      if (r.timezone) setTz(r.timezone);
+    } catch {
+      setSlots([]);
+      setMsg("Times are briefly unavailable. Please try again.");
+    }
+  };
+  const pick = async (slot) => {
+    setBusy(true);
+    setMsg(null);
+    try {
+      await api("/api/schedule/book", { method: "POST", body: JSON.stringify({ applicationId, startAt: slot.startAt }) });
+      setOpen(false);
+      await onRescheduled();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : "That time is no longer available. Please pick another.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (!open) {
+    return /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          void start();
+        },
+        children: label
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "msched", children: [
+    slots === null ? /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: "Loading available times\u2026" }) : slots.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: msg ?? "No open times right now. Please check back soon." }) : /* @__PURE__ */ jsx4(
+      SlotPicker,
+      {
+        slots,
+        timezone: tz,
+        classes: { days: "msched-days", day: "msched-day", times: "msched-times", time: "msched-time" },
+        onPick: (s) => void pick(s)
+      }
+    ),
+    busy ? /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: "Rescheduling\u2026" }) : null,
+    msg && slots && slots.length > 0 ? /* @__PURE__ */ jsx4("p", { className: "meeting-note error", children: msg }) : null,
+    /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          setOpen(false);
+        },
+        children: "Keep my current time"
+      }
+    ) })
+  ] });
+}
+
+// src/ui/members.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function card(kicker, body) {
+  return /* @__PURE__ */ jsxs5("div", { className: "card", children: [
+    /* @__PURE__ */ jsx5("div", { className: "card-label", children: "Your Application" }),
+    /* @__PURE__ */ jsxs5("div", { className: "meeting-block", children: [
+      /* @__PURE__ */ jsx5("div", { className: "meeting-kicker", children: kicker }),
+      body
+    ] })
+  ] });
+}
+function ProvisionalCard(props) {
+  const { api, application, applyHref, onReschedule } = props;
+  if (!application) {
+    return card(
+      "One step remains",
+      /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "Your account is ready, and the application that completes it takes a few minutes." }),
+        /* @__PURE__ */ jsx5("a", { className: "apply-link", href: applyHref, children: "Apply for membership" })
+      ] })
+    );
+  }
+  if (application.status === "refunded") {
+    return card("Membership refunded", /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "Your fee has been refunded in full and your membership is canceled." }));
+  }
+  const membership = application.paid ? /* @__PURE__ */ jsxs5("div", { className: "meeting-note", children: [
+    "Your membership is active",
+    application.renewalAt ? ` and renews ${fmtDate(application.renewalAt)}` : "",
+    "."
+  ] }) : null;
+  if (application.meetingAt) {
+    return card(
+      "Your introduction call",
+      /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx5("div", { className: "meeting-date", children: fullLabel(application.meetingAt, application.timezone) }),
+        /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "A calendar invitation with the video call link is in your email." }),
+        application.meetUrl ? /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: /* @__PURE__ */ jsx5("a", { href: application.meetUrl, target: "_blank", rel: "noopener", children: "Join the video call" }) }) : null,
+        /* @__PURE__ */ jsx5(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule }),
+        membership
+      ] })
+    );
+  }
+  return card(
+    "Book your introduction call",
+    /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "Your application is in. Choose a time below, and a calendar invitation will reach your email." }),
+      /* @__PURE__ */ jsx5(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule, label: "Choose a time" }),
+      membership
+    ] })
+  );
+}
+function MembersArea(props) {
+  const { api, signOut, adminHref = "/admin/", applyHref = "/join.html", memberContent } = props;
+  const [me, setMe] = useState5(null);
+  const [error, setError] = useState5(false);
+  const reload = async () => {
+    try {
+      setMe(await api("/api/me"));
+    } catch {
+      setError(true);
+    }
+  };
+  useEffect3(() => {
+    void reload();
+  }, []);
+  if (error) return /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "Sign in is briefly unavailable. Please refresh." });
+  if (!me) return /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "Loading\u2026" });
+  const role = me.role || "provisional";
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "card", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "member-row", children: [
+        /* @__PURE__ */ jsx5("span", { className: "member-email", children: me.email }),
+        /* @__PURE__ */ jsx5("span", { className: "role-badge " + role, children: role })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "account-actions", children: [
+        /* @__PURE__ */ jsx5("button", { className: "btn secondary mini", onClick: signOut, children: "Sign out" }),
+        role === "admin" ? /* @__PURE__ */ jsx5("a", { className: "admin-console-link", href: adminHref, children: "Admin console" }) : null
+      ] })
+    ] }),
+    role === "provisional" ? /* @__PURE__ */ jsx5(ProvisionalCard, { api, application: me.application, applyHref, onReschedule: reload }) : memberContent ?? /* @__PURE__ */ jsx5("div", { className: "card", children: /* @__PURE__ */ jsx5("div", { className: "card-label", children: "Welcome back." }) })
+  ] });
+}
+
+// src/ui/join.tsx
+import { useEffect as useEffect4, useState as useState7 } from "react";
+
+// src/ui/payment-step.tsx
+import { useRef, useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var loader = null;
+function loadStripe() {
+  const existing = globalThis.Stripe;
+  if (existing) return Promise.resolve(existing);
+  if (!loader) {
+    loader = new Promise((resolve, reject) => {
+      const s = document.createElement("script");
+      s.src = "https://js.stripe.com/v3/";
+      s.onload = () => {
+        const fn = globalThis.Stripe;
+        if (fn) resolve(fn);
+        else reject(new Error("stripe.js unavailable"));
+      };
+      s.onerror = () => reject(new Error("stripe.js failed to load"));
+      document.head.appendChild(s);
+    });
+  }
+  return loader;
+}
+function PaymentStep(props) {
+  const { applicationId, refundPolicyText, onPaid } = props;
+  const [status, setStatus] = useState6("idle");
+  const [error, setError] = useState6(null);
+  const mountRef = useRef(null);
+  const stripeRef = useRef(null);
+  const elementsRef = useRef(null);
+  const begin = async () => {
+    setStatus("loading");
+    setError(null);
+    try {
+      const res = await fetch("/api/payments/subscription", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ applicationId, refundPolicyAck: true })
+      });
+      const data = await res.json();
+      if (!res.ok || !data.clientSecret || !data.publishableKey) throw new Error("Payment could not be set up. Please try again.");
+      const stripe = (await loadStripe())(data.publishableKey);
+      const elements = stripe.elements({ clientSecret: data.clientSecret });
+      const element = elements.create("payment");
+      if (mountRef.current) element.mount(mountRef.current);
+      stripeRef.current = stripe;
+      elementsRef.current = elements;
+      setStatus("ready");
+    } catch (e) {
+      setStatus("idle");
+      setError(e instanceof Error ? e.message : "Payment could not be set up. Please try again.");
+    }
+  };
+  const pay = async () => {
+    const stripe = stripeRef.current;
+    const elements = elementsRef.current;
+    if (!stripe || !elements) return;
+    setStatus("confirming");
+    setError(null);
+    const returnUrl = typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}?redirect_status=succeeded` : void 0;
+    const result = await stripe.confirmPayment({ elements, confirmParams: { return_url: returnUrl }, redirect: "if_required" });
+    if (result.error) {
+      setError(result.error.message ?? "The payment could not be completed.");
+      setStatus("ready");
+      return;
+    }
+    const paid = result.paymentIntent?.status;
+    if (paid === "succeeded" || paid === "processing") onPaid();
+    else {
+      setError("The payment did not complete. Please try again.");
+      setStatus("ready");
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "join-pay", children: [
+    /* @__PURE__ */ jsxs6("label", { className: "compliance-box", children: [
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "checkbox",
+          disabled: status !== "idle",
+          onChange: (e) => {
+            if (e.currentTarget.checked) void begin();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx6("span", { children: refundPolicyText })
+    ] }),
+    status === "loading" ? /* @__PURE__ */ jsx6("p", { className: "pay-status", children: "Preparing secure payment\u2026" }) : null,
+    /* @__PURE__ */ jsx6("div", { ref: mountRef, hidden: status === "idle" || status === "loading" }),
+    status === "ready" || status === "confirming" ? /* @__PURE__ */ jsx6("button", { className: "submit-btn", disabled: status === "confirming", onClick: () => void pay(), children: status === "confirming" ? "Processing\u2026" : "Pay and continue" }) : null,
+    error ? /* @__PURE__ */ jsx6("p", { className: "pay-error", children: error }) : null
+  ] });
+}
+
+// src/ui/join.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function JoinBooking(props) {
+  const { applicationId, onBooked } = props;
+  const [state, setState] = useState7(null);
+  const [msg, setMsg] = useState7(null);
+  const [busy, setBusy] = useState7(false);
+  const [selected, setSelected] = useState7(null);
+  const load = async () => {
+    setMsg(null);
+    try {
+      const res = await fetch("/api/schedule/slots");
+      const data = await res.json();
+      if (data.schedulingReady === false || !data.slots?.length) {
+        setState(null);
+        setMsg("Scheduling is briefly unavailable \u2014 we'll reach out by email to arrange your call.");
+        return;
+      }
+      setState({ slots: data.slots, timezone: data.timezone ?? "UTC" });
+    } catch {
+      setMsg("Times are briefly unavailable. Please try again.");
+    }
+  };
+  useEffect4(() => {
+    void load();
+  }, []);
+  const book = async () => {
+    if (!selected) return;
+    setBusy(true);
+    setMsg(null);
+    try {
+      const res = await fetch("/api/schedule/book", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ applicationId, startAt: selected.startAt })
+      });
+      const data = await res.json();
+      if (res.status === 409 && data.code === "calendar_slot_unavailable") {
+        setSelected(null);
+        setMsg("That time was just taken. Here are the current openings.");
+        await load();
+        return;
+      }
+      if (!res.ok) throw new Error(data.error ?? "The booking could not be completed.");
+      onBooked({ startAt: data.startAt ?? selected.startAt, timezone: state?.timezone ?? "UTC" });
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : "The booking could not be completed.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (!state) return /* @__PURE__ */ jsx7("p", { className: "slots-status", children: msg ?? "Loading available times\u2026" });
+  return /* @__PURE__ */ jsxs7("div", { className: "join-book", children: [
+    /* @__PURE__ */ jsx7(
+      SlotPicker,
+      {
+        slots: state.slots,
+        timezone: state.timezone,
+        selectedStartAt: selected?.startAt,
+        onPick: setSelected,
+        onDayChange: () => setSelected(null)
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "slot-confirm", hidden: !selected, children: [
+      /* @__PURE__ */ jsx7("button", { className: "submit-btn", disabled: busy, onClick: () => void book(), children: busy ? "Booking\u2026" : "Book this time" }),
+      msg ? /* @__PURE__ */ jsx7("p", { className: "step2-note", children: msg }) : null
+    ] })
+  ] });
+}
+function JoinIsland(props) {
+  const { config, children, membersHref = "/members/" } = props;
+  const [step, setStep] = useState7("form");
+  const [applicationId, setApplicationId] = useState7(null);
+  const [error, setError] = useState7(null);
+  const [submitting, setSubmitting] = useState7(false);
+  const [booked, setBooked] = useState7(null);
+  const submit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      const fields = {};
+      for (const [k, v] of new FormData(e.currentTarget).entries()) fields[k] = v;
+      fields.submissionId = crypto.randomUUID();
+      const res = await fetch("/api/applications", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(fields)
+      });
+      const data = await res.json();
+      if (!res.ok || !data.id) throw new Error(data.error ?? "Your application could not be submitted.");
+      setApplicationId(data.id);
+      setStep(config.paymentsReady ? "pay" : "book");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  if (step === "done" && booked) {
+    return /* @__PURE__ */ jsxs7("div", { className: "join-done card", children: [
+      /* @__PURE__ */ jsx7("div", { className: "card-label", children: "You're booked" }),
+      /* @__PURE__ */ jsx7("p", { className: "meeting-date", children: fullLabel(booked.startAt, booked.timezone) }),
+      /* @__PURE__ */ jsx7("p", { className: "meeting-note", children: "A calendar invitation with the video call link is on its way to your email." }),
+      /* @__PURE__ */ jsx7("a", { className: "apply-link", href: membersHref, children: "Go to your member area" })
+    ] });
+  }
+  if (step === "book" && applicationId) {
+    return /* @__PURE__ */ jsx7(
+      JoinBooking,
+      {
+        applicationId,
+        onBooked: (b) => {
+          setBooked(b);
+          setStep("done");
+        }
+      }
+    );
+  }
+  if (step === "pay" && applicationId) {
+    return /* @__PURE__ */ jsx7(PaymentStep, { applicationId, refundPolicyText: config.refundPolicyText ?? "", onPaid: () => setStep("book") });
+  }
+  return /* @__PURE__ */ jsxs7("form", { className: "join-form", onSubmit: (e) => void submit(e), children: [
+    children,
+    error ? /* @__PURE__ */ jsx7("p", { className: "join-error", children: error }) : null,
+    /* @__PURE__ */ jsx7("button", { className: "submit-btn", type: "submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit application" })
+  ] });
+}
 export {
-  ChapterAdmin
+  ChapterAdmin,
+  JoinIsland,
+  MembersArea,
+  PaymentStep,
+  Rescheduler,
+  SlotPicker,
+  dayKey,
+  dayLabel,
+  fmtDate,
+  fmtMoney,
+  fullLabel,
+  groupSlotsByDay,
+  timeLabel,
+  tzShort
 };
 //# sourceMappingURL=index.js.map