@cosmoops/connect-sdk 0.38.0 → 0.41.0

package/dist/esm/client/components/call-button.js

@@ -0,0 +1,358 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { Button } from "@heroui/react";
+import { Mic, MicOff, Phone, PhoneOff, PhoneOutgoing } from "lucide-react";
+import { cn } from "../../cn.js";
+import { useConnect, useConnectResource } from "../provider.js";
+import { useConnectPortalUrl } from "../portal-links.js";
+const ConnectCallContext = createContext(null);
+/** Start a call yourself. Must be inside `<ConnectCallProvider>`. */
+export function useConnectCall() {
+    const value = useContext(ConnectCallContext);
+    if (!value) {
+        throw new Error("useConnectCall() needs a <ConnectCallProvider> above it.");
+    }
+    return value;
+}
+/** How long the SDK may take to sign in before the attempt is abandoned. */
+const LOGIN_TIMEOUT_MS = 15_000;
+/** How long the "Call ended" card stays before the bar goes away. */
+const ENDED_CARD_MS = 4_000;
+/** How long after a call to re-read the balance - the carrier's report settles it. */
+const AVAILABILITY_SETTLE_MS = 3_000;
+function messageFromCause(cause) {
+    if (typeof cause === "string" && cause.trim())
+        return cause.trim();
+    return "The call couldn't be connected.";
+}
+function errorMessage(cause) {
+    return cause instanceof Error && cause.message ? cause.message : "Something went wrong.";
+}
+/**
+ * Holds the call in progress and draws the in-call bar. See the module comment.
+ */
+export function ConnectCallProvider({ children, onCallEnded, onError, className, }) {
+    const { mutateResource } = useConnect();
+    const [call, setCall] = useState(null);
+    const { data: availability, refetch: refreshAvailability } = useConnectResource("/calls/availability");
+    // Read inside `finish`, which is wired to SDK events once.
+    const refreshRef = useRef(refreshAvailability);
+    useEffect(() => {
+        refreshRef.current = refreshAvailability;
+    }, [refreshAvailability]);
+    const clientRef = useRef(null);
+    const placedRef = useRef(false);
+    const targetRef = useRef(null);
+    const callIdRef = useRef(null);
+    const endedRef = useRef(false);
+    const dismissTimer = useRef(null);
+    // Read inside SDK event handlers wired once, so they always see the latest.
+    const onCallEndedRef = useRef(onCallEnded);
+    useEffect(() => {
+        onCallEndedRef.current = onCallEnded;
+    }, [onCallEnded]);
+    const cancelOnServer = useCallback(() => {
+        const callId = callIdRef.current;
+        if (!callId)
+            return;
+        // Best effort: Connect closes an unclaimed call on its own within minutes.
+        void mutateResource("/calls/cancel", { callId }).catch(() => undefined);
+    }, [mutateResource]);
+    const finish = useCallback((notice) => {
+        if (endedRef.current)
+            return;
+        endedRef.current = true;
+        const callId = callIdRef.current;
+        const target = targetRef.current;
+        placedRef.current = false;
+        setCall((current) => current
+            ? {
+                ...current,
+                phase: "ended",
+                notice,
+                endedAfterSeconds: current.connectedAt
+                    ? Math.round((Date.now() - current.connectedAt) / 1000)
+                    : null,
+            }
+            : current);
+        if (dismissTimer.current)
+            clearTimeout(dismissTimer.current);
+        dismissTimer.current = setTimeout(() => setCall(null), ENDED_CARD_MS);
+        // The charge lands a moment after the line drops, so the minutes shown
+        // are re-read once it has had time to.
+        setTimeout(() => refreshRef.current(), AVAILABILITY_SETTLE_MS);
+        if (target) {
+            target.onEnded?.({ callId });
+            onCallEndedRef.current?.({ callId, phone: target.phone });
+        }
+    }, []);
+    const wire = useCallback((client) => {
+        const ringing = () => setCall((current) => (current ? { ...current, phase: "ringing" } : current));
+        client.on("onCalling", ringing);
+        client.on("onCallRemoteRinging", ringing);
+        client.on("onCallAnswered", () => setCall((current) => current ? { ...current, phase: "in-call", connectedAt: Date.now() } : current));
+        client.on("onCallTerminated", () => finish(null));
+        client.on("onCallFailed", (cause) => {
+            if (!placedRef.current)
+                cancelOnServer();
+            finish(messageFromCause(cause));
+        });
+        client.on("onMediaPermission", (event) => {
+            if (event?.status === "failure") {
+                cancelOnServer();
+                finish("Allow microphone access in your browser to make calls.");
+            }
+        });
+    }, [cancelOnServer, finish]);
+    const signIn = useCallback(async () => {
+        let client = clientRef.current;
+        if (!client) {
+            const { default: Plivo } = await import("plivo-browser-sdk");
+            client = new Plivo({
+                debug: "ERROR",
+                // Ask for the microphone when a call starts, not on page load.
+                permOnClick: true,
+                // Warn before a tab mid-call is closed.
+                closeProtection: true,
+                enableTracking: false,
+            }).client;
+            clientRef.current = client;
+            wire(client);
+        }
+        if (client.isLoggedIn)
+            return client;
+        const { token } = await mutateResource("/calls/browser-token", {});
+        const signedIn = client;
+        await new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                cleanup();
+                reject(new Error("Signing in to the phone service timed out."));
+            }, LOGIN_TIMEOUT_MS);
+            const onLogin = () => {
+                cleanup();
+                resolve();
+            };
+            const onLoginFailed = (cause) => {
+                cleanup();
+                reject(new Error(`Couldn't sign in to the phone service: ${messageFromCause(cause)}`));
+            };
+            function cleanup() {
+                clearTimeout(timer);
+                signedIn.off("onLogin", onLogin);
+                signedIn.off("onLoginFailed", onLoginFailed);
+            }
+            signedIn.on("onLogin", onLogin);
+            signedIn.on("onLoginFailed", onLoginFailed);
+            if (!signedIn.loginWithAccessToken(token)) {
+                cleanup();
+                reject(new Error("Couldn't sign in to the phone service."));
+            }
+        });
+        return signedIn;
+    }, [mutateResource, wire]);
+    const isBusy = call !== null && call.phase !== "ended";
+    const startCall = useCallback(async (target) => {
+        if (isBusy) {
+            onError?.("You're already on a call.");
+            return;
+        }
+        if (dismissTimer.current)
+            clearTimeout(dismissTimer.current);
+        targetRef.current = target;
+        callIdRef.current = null;
+        placedRef.current = false;
+        endedRef.current = false;
+        setCall({
+            phase: "connecting",
+            label: target.name?.trim() || target.phone,
+            number: target.phone,
+            callId: null,
+            connectedAt: null,
+            endedAfterSeconds: null,
+            muted: false,
+            notice: null,
+        });
+        try {
+            const client = await signIn();
+            const started = await mutateResource("/calls/start", {
+                phone: target.phone,
+            });
+            callIdRef.current = started.callId;
+            setCall((current) => current ? { ...current, callId: started.callId, number: started.toNumber } : current);
+            // Connect dials the number on the record, not this one - it is passed
+            // because the SDK requires a destination.
+            if (!client.call(started.toNumber.replace(/^\+/, ""), started.headers)) {
+                throw new Error("The phone service didn't accept the call.");
+            }
+            placedRef.current = true;
+        }
+        catch (cause) {
+            cancelOnServer();
+            // A refusal is usually news about the workspace - an empty balance, a
+            // number that has gone - so the buttons should learn it too.
+            refreshRef.current();
+            const message = errorMessage(cause);
+            if (onError) {
+                onError(message);
+                endedRef.current = true;
+                setCall(null);
+                target.onEnded?.({ callId: callIdRef.current });
+                onCallEndedRef.current?.({ callId: callIdRef.current, phone: target.phone });
+            }
+            else {
+                finish(message);
+            }
+        }
+    }, [cancelOnServer, finish, isBusy, mutateResource, onError, signIn]);
+    const hangUp = useCallback(() => {
+        const client = clientRef.current;
+        if (placedRef.current && client) {
+            client.hangup();
+            return; // `onCallTerminated` takes it from here.
+        }
+        cancelOnServer();
+        finish(null);
+    }, [cancelOnServer, finish]);
+    const toggleMute = useCallback(() => {
+        const client = clientRef.current;
+        if (!client)
+            return;
+        setCall((current) => {
+            if (!current)
+                return current;
+            if (current.muted)
+                client.unmute();
+            else
+                client.mute();
+            return { ...current, muted: !current.muted };
+        });
+    }, []);
+    // Sign out of the carrier when the provider unmounts.
+    useEffect(() => () => {
+        clientRef.current?.logout();
+        if (dismissTimer.current)
+            clearTimeout(dismissTimer.current);
+    }, []);
+    const value = useMemo(() => ({ isBusy, startCall, availability, refreshAvailability }), [isBusy, startCall, availability, refreshAvailability]);
+    return (_jsxs(ConnectCallContext.Provider, { value: value, children: [children, call && (_jsx(ConnectActiveCallBar, { call: call, onHangUp: hangUp, onToggleMute: toggleMute, className: className }))] }));
+}
+/**
+ * Rings `phone` from the workspace's number. Needs `<ConnectCallProvider>`
+ * above it, and a member with "Make calls" - render it only for them, since a
+ * button the server refuses for everyone else helps nobody.
+ */
+export function ConnectCallButton({ phone, name, onEnded, variant = "default", children, isDisabled, className, }) {
+    const { isBusy, startCall, availability } = useConnectCall();
+    const press = () => void startCall({ phone, name, onEnded });
+    // Not offered at all to someone who may not call - a button that always
+    // refuses helps nobody.
+    if (availability?.status === "no_permission")
+        return null;
+    // Anything else short of `available` says why, where the button would be,
+    // with the next step for whoever can take it.
+    if (availability && availability.status !== "available") {
+        return variant === "compact" ? (_jsx(Button, { isIconOnly: true, size: "sm", variant: "ghost", "aria-label": unavailableReason(availability).text, isDisabled: true, className: className, children: _jsx(Phone, { className: "size-3.5" }) })) : (_jsx(ConnectCallUnavailable, { availability: availability, className: className }));
+    }
+    if (variant === "compact") {
+        return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "ghost", "aria-label": `Call ${name?.trim() || phone}`, isDisabled: isBusy || isDisabled, onPress: press, className: className, children: _jsx(Phone, { className: "size-3.5" }) }));
+    }
+    return (_jsxs(Button, { size: "sm", variant: "primary", isDisabled: isBusy || isDisabled || availability === null, onPress: press, className: cn("shrink-0", className), children: [_jsx(Phone, { className: "size-4" }), children ?? "Call"] }));
+}
+/**
+ * What to say when a member cannot call, and the one link that fixes it -
+ * offered only to someone with the permission to follow it.
+ */
+function unavailableReason(availability) {
+    switch (availability.status) {
+        case "no_number":
+            return availability.canManageNumber && availability.offer
+                ? {
+                    text: "Calling needs a business number.",
+                    action: {
+                        label: `Add ${availability.offer.addonName}`,
+                        path: `/billing/subscriptions/${availability.offer.subscriptionId}`,
+                    },
+                }
+                : { text: "Calling needs a business number - ask a workspace admin.", action: null };
+        case "number_pending":
+            return availability.canManageNumber
+                ? {
+                    text: "Your business number is still being set up.",
+                    action: { label: "Check calling", path: "/calling" },
+                }
+                : { text: "Your business number is still being set up.", action: null };
+        case "no_balance":
+            return availability.canTopUp
+                ? { text: "Out of calling minutes.", action: { label: "Top up", path: "/calling" } }
+                : { text: "Out of calling minutes - ask a workspace admin to top up.", action: null };
+        default:
+            return { text: "Calling isn't available.", action: null };
+    }
+}
+/** The inline "why not" a Call button becomes when the member cannot call. */
+function ConnectCallUnavailable({ availability, className, }) {
+    const { text, action } = unavailableReason(availability);
+    const href = useConnectPortalUrl(action?.path ?? "/calling");
+    return (_jsxs("p", { className: cn("text-xs text-muted", className), children: [text, " ", action && (_jsx("a", { href: href, className: "font-medium text-accent hover:underline", children: action.label }))] }));
+}
+function formatRupees(paise) {
+    return `₹${(paise / 100).toLocaleString("en-IN", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    })}`;
+}
+/**
+ * The workspace's calling at a glance - its business number, the minutes
+ * left, and the next step - for a settings page. Reads the same availability
+ * the Call buttons do, so the two never disagree. Buying minutes and adding a
+ * number happen in Connect, and come back here when done.
+ */
+export function ConnectCallingStatus({ className }) {
+    const { availability } = useConnectCall();
+    const callingHref = useConnectPortalUrl("/calling");
+    const offerHref = useConnectPortalUrl(availability?.offer ? `/billing/subscriptions/${availability.offer.subscriptionId}` : "/calling");
+    if (!availability) {
+        return _jsx("div", { className: cn("h-24 animate-pulse rounded-lg bg-surface-secondary", className) });
+    }
+    const rate = formatRupees(availability.ratePaisePerMinute);
+    return (_jsxs("div", { className: cn("space-y-3 rounded-lg border border-separator bg-surface p-4", className), children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs text-muted", children: "Business number" }), _jsx("p", { className: "text-sm font-medium tabular-nums", children: availability.number ?? (availability.status === "number_pending" ? "Being set up…" : "None") })] }), availability.number && (_jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-xs text-muted", children: "Calling minutes" }), _jsxs("p", { className: cn("text-sm font-medium tabular-nums", availability.lowBalance && "text-danger"), children: [formatRupees(availability.available), " \u00B7 about ", availability.availableMinutes, " min"] })] }))] }), availability.status === "no_permission" ? (_jsx("p", { className: "text-xs text-muted", children: "You don't have permission to make calls here." })) : !availability.number ? (_jsxs("p", { className: "text-xs text-muted", children: ["Call customers from their record, from your own business number. Calls are not recorded, and minutes are prepaid at ", rate, " + GST a minute.", " ", availability.status === "number_pending"
+                        ? availability.canManageNumber && (_jsx("a", { href: callingHref, className: "font-medium text-accent hover:underline", children: "Check on your number" }))
+                        : availability.canManageNumber && availability.offer
+                            ? (_jsxs("a", { href: offerHref, className: "font-medium text-accent hover:underline", children: ["Add ", availability.offer.addonName, " (", formatRupees(availability.offer.price), " + GST)"] }))
+                            : "Ask a workspace admin to add a business number."] })) : (_jsxs("p", { className: "text-xs text-muted", children: [availability.lowBalance
+                        ? "Calling minutes are running low. "
+                        : `Calls cost ${rate} + GST a minute, from prepaid minutes. `, availability.canTopUp ? (_jsx("a", { href: callingHref, className: "font-medium text-accent hover:underline", children: "Top up minutes" })) : ("A workspace admin can top up.")] }))] }));
+}
+const PHASE_LABEL = {
+    connecting: "Connecting…",
+    ringing: "Calling…",
+    ended: "Call ended",
+};
+function formatSeconds(seconds) {
+    const whole = Math.max(0, Math.round(seconds));
+    const minutes = Math.floor(whole / 60);
+    return `${minutes}:${String(whole % 60).padStart(2, "0")}`;
+}
+/** The floating in-call card. Exported for Storybook only - the provider draws it. */
+export function ConnectActiveCallBar({ call, onHangUp, onToggleMute, className, }) {
+    const elapsed = useElapsedSeconds(call.phase === "in-call" ? call.connectedAt : null);
+    const live = call.phase !== "ended";
+    const status = call.phase === "in-call"
+        ? formatSeconds(elapsed)
+        : call.phase === "ended" && call.endedAfterSeconds !== null
+            ? `Call ended · ${formatSeconds(call.endedAfterSeconds)}`
+            : PHASE_LABEL[call.phase];
+    return (_jsx("div", { role: "status", "aria-live": "polite", className: cn("fixed inset-x-0 bottom-4 z-50 flex justify-center px-4", className), children: _jsxs("div", { className: "flex w-full max-w-sm items-center gap-3 rounded-2xl border border-separator bg-surface p-3 shadow-lg", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-accent-soft text-accent", children: _jsx(PhoneOutgoing, { "aria-hidden": true, className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: call.label }), _jsxs("p", { className: "truncate text-xs text-muted tabular-nums", children: [status, call.notice ? ` · ${call.notice}` : call.label === call.number ? "" : ` · ${call.number}`] })] }), live && (_jsxs(_Fragment, { children: [_jsx(Button, { isIconOnly: true, size: "sm", variant: "secondary", "aria-label": call.muted ? "Unmute" : "Mute", isDisabled: call.phase !== "in-call", onPress: onToggleMute, children: call.muted ? _jsx(MicOff, { className: "size-4" }) : _jsx(Mic, { className: "size-4" }) }), _jsx(Button, { isIconOnly: true, size: "sm", variant: "danger", "aria-label": "Hang up", onPress: onHangUp, children: _jsx(PhoneOff, { className: "size-4" }) })] }))] }) }));
+}
+/** Seconds since `since`, ticking once a second. `0` while there is nothing to time. */
+function useElapsedSeconds(since) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (since === null)
+            return;
+        const timer = setInterval(() => setNow(Date.now()), 1_000);
+        return () => clearInterval(timer);
+    }, [since]);
+    return since === null ? 0 : Math.max(0, Math.round((now - since) / 1000));
+}

package/dist/esm/client/components/create-workspace-form.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Input, Label, Modal, Radio, RadioGroup, TextField } from "@heroui/react";
+import { useCreateWorkspace } from "../use-workspaces.js";
+const WORKSPACE_TYPES = [
+    {
+        id: "business",
+        label: "Business",
+        hint: "A company. Verified with company KYB, and can subscribe to anything sold to businesses.",
+    },
+    {
+        id: "individual",
+        label: "Individual",
+        hint: "A person. Verified against your own identity rather than a company.",
+    },
+];
+/**
+ * Opens another workspace under the signed-in user's own tenant - a branch
+ * office, a second business unit - from inside a host application rather
+ * than a link-out to Connect.
+ *
+ * **Only the tenant's owner can use this successfully.** `CreateWorkspaceUseCase`
+ * refuses anyone who merely belongs to a colleague's tenant, with a message
+ * naming that - someone who wants a workspace of their own uses a personal
+ * account instead.
+ *
+ * **The tenant's plan decides how many workspaces it may hold, and this does
+ * not pre-check it.** There is no capacity read to show ahead of time - the
+ * same posture Connect's own "Create workspace" button takes - so a refusal
+ * surfaces here exactly as the server wrote it ("Your current plan covers a
+ * single workspace - subscribe to a plan that includes additional workspaces
+ * to open another.", or "You've used all 3 of the workspaces your plans
+ * include. Upgrade a plan or delete a workspace to open another.").
+ *
+ * **Does not switch the session to the new workspace.** Creating one never
+ * does, on Connect's own screen either - see `useCreateWorkspace`'s doc
+ * comment for how to chain a switch once you have the result, and guard that
+ * chain on `inAudience` the same way `<ConnectWorkspaceSwitcher>` already
+ * does for every other row.
+ */
+export function ConnectCreateWorkspaceModal({ isOpen, onOpenChange, onCreated, }) {
+    return (_jsx(Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-110", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Create workspace" }) }), _jsx(Modal.Body, { children: _jsx(CreateWorkspaceFields, { onCancel: () => onOpenChange(false), onCreated: (workspace) => {
+                                    onCreated?.(workspace);
+                                    onOpenChange(false);
+                                } }) })] }) }) }) }));
+}
+function CreateWorkspaceFields({ onCancel, onCreated, }) {
+    const [name, setName] = useState("");
+    const [type, setType] = useState("business");
+    const { createWorkspace, isPending, error, clearError } = useCreateWorkspace();
+    const isFormValid = name.trim().length > 0 && !isPending;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!isFormValid)
+            return;
+        clearError();
+        const created = await createWorkspace({ name: name.trim(), type });
+        if (created)
+            onCreated(created);
+    };
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { isRequired: true, variant: "secondary", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { placeholder: "Acme Logistics", value: name, onChange: (e) => setName(e.currentTarget.value), disabled: isPending, autoFocus: true })] }), _jsxs(RadioGroup, { variant: "secondary", value: type, onChange: (value) => setType(value), isDisabled: isPending, children: [_jsx(Label, { children: "Type" }), _jsx("div", { className: "mt-1.5 flex flex-col gap-2", children: WORKSPACE_TYPES.map((option) => (_jsx(Radio, { value: option.id, children: _jsxs(Radio.Content, { children: [_jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: option.label }), _jsx("p", { className: "text-xs text-muted", children: option.hint })] })] }) }, option.id))) })] }), error && _jsx("p", { className: "text-sm text-danger", children: error }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onPress: onCancel, isDisabled: isPending, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", isDisabled: !isFormValid, children: isPending ? "Creating…" : "Create" })] })] }));
+}

package/dist/esm/client/components/event-type-form.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Button, Input, Label, ListBox, Modal, Select, TextArea, TextField } from "@heroui/react";
 import { useConnect, useConnectWorkspaceMembers } from "../provider.js";
-import { useAvailabilitySchedules, useCreateEventType } from "../use-scheduling.js";
+import { useAvailabilitySchedules, useCreateEventType, useManageableEventTypes, useUpdateEventType, } from "../use-scheduling.js";
 const LOCATION_LABELS = {
     phone: "Phone call",
     address: "In person",
@@ -11,40 +11,113 @@ const LOCATION_LABELS = {
 };
 const LOCATION_KINDS = ["phone", "address", "link"];
 /**
- * Creates the first thing a workspace can be booked for, from inside a host
- * application rather than a link-out to Connect.
+ * Creates or edits an appointment type, from inside a host application
+ * rather than a link-out to Connect.
  *
  * **Needs a schedule to exist first** - the picker reads `useAvailabilitySchedules`
  * and renders "Set up availability first" with nothing to submit if none
  * exists yet. Pair this with `ConnectAvailabilityFormModal` in a setup flow
  * rather than assuming one.
  *
+ * **That gate waits for the read, and the order matters.** Both bridge reads
+ * answer `[]` while they are in flight, so testing `schedules.length === 0`
+ * first showed "Set up availability first" to everybody who opened this -
+ * including, for a second or two, somebody pressing Edit on an appointment
+ * type that provably *has* a schedule. A load state wearing an empty state's
+ * words is worse than a spinner: it reads as a verdict, and on a slow
+ * connection it is the only thing the modal ever says. A failed read is named
+ * as a failure for the same reason - it is not the same fact as "none exist".
+ *
  * **Host is a specific member, never a team.** There is no groups read in
  * this bridge, so a round-robin team host stays a Console-only capability -
- * defaults to whoever is signed in, with an optional picker from the
- * workspace's own roster.
+ * defaults to whoever is signed in on create, with an optional picker from
+ * the workspace's own roster. **Editing a group-hosted row is refused
+ * inline** - the modal shows a notice instead of a form, because this
+ * surface cannot represent (and so cannot safely resend) a team host.
+ *
+ * This outer component only decides *which* message or form to show; the
+ * form itself is `EventTypeFields` below, mounted with `key={editing?.id}` -
+ * see that component's own doc comment for why.
  */
-export function ConnectEventTypeFormModal({ isOpen, onOpenChange, onCreated, }) {
-    const { session } = useConnect();
+export function ConnectEventTypeFormModal({ isOpen, onOpenChange, eventTypeId = null, onSaved, }) {
+    const isEdit = eventTypeId !== null;
     const { data: membersData } = useConnectWorkspaceMembers();
-    const { schedules } = useAvailabilitySchedules();
-    const members = useMemo(() => membersData?.members ?? [], [membersData]);
+    const { schedules, isLoading: isLoadingSchedules, error: schedulesError, } = useAvailabilitySchedules();
+    const { eventTypes: manageableEventTypes, isLoading: isLoadingEventTypes, error: eventTypesError, } = useManageableEventTypes();
+    const members = membersData?.members ?? [];
+    const editing = isEdit ? manageableEventTypes.find((row) => row.id === eventTypeId) ?? null : null;
+    /** A group host cannot be represented (or safely resent) by this form. */
+    const isUnrepresentableHost = isEdit && editing?.host.kind === "group";
+    /*
+     * Everything this modal decides from depends on a read, so the two
+     * not-yet-answered states come first - see this component's doc comment.
+     * An edit also waits for the row itself: `editing` is `null` both while the
+     * list is loading and when it has arrived without this id, and only the
+     * second of those is a real answer.
+     */
+    const isLoading = isLoadingSchedules || (isEdit && (isLoadingEventTypes || (!editing && !eventTypesError)));
+    const readError = schedulesError ?? (isEdit ? eventTypesError : null);
+    let body;
+    if (isLoading) {
+        body = _jsx("p", { className: "text-sm text-muted", children: "Loading\u2026" });
+    }
+    else if (readError) {
+        body = (_jsx("p", { className: "text-sm text-muted", children: "That could not be loaded just now. Close this and try again." }));
+    }
+    else if (isUnrepresentableHost) {
+        body = (_jsx("p", { className: "text-sm text-muted", children: "This appointment type is hosted by a team, which this screen cannot show or change. Edit it in Connect." }));
+    }
+    else if (schedules.length === 0) {
+        body = (_jsx("p", { className: "text-sm text-muted", children: "Set up availability first - an appointment type needs working hours to book against." }));
+    }
+    else if (isEdit && !editing) {
+        /*
+         * The list arrived and does not hold this id - deleted, or never visible
+         * to this caller. Distinct from the load above, which is why that one
+         * cannot be allowed to borrow these words either.
+         */
+        body = _jsx("p", { className: "text-sm text-muted", children: "That appointment type no longer exists." });
+    }
+    else {
+        body = (_jsx(EventTypeFields, { editing: editing, schedules: schedules, members: members, onCancel: () => onOpenChange(false), onSaved: (saved) => {
+                onSaved?.(saved);
+                onOpenChange(false);
+            } }, editing?.id ?? "create"));
+    }
+    return (_jsx(Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-140", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: isEdit ? "Edit appointment type" : "New appointment type" }) }), _jsx(Modal.Body, { children: body })] }) }) }) }));
+}
+/**
+ * The form itself, mounted fresh (via the parent's `key`) for each distinct
+ * record it edits - or once for create. That remount is what initializes
+ * every field straight from `editing` with a plain `useState(initial)`
+ * rather than a `useEffect` copying it in after the fact: `editing` arrives
+ * asynchronously (`useManageableEventTypes` is a bridge read), and the
+ * parent already withholds this component until it has landed, so there is
+ * no later moment for a field to overwrite a half-typed edit.
+ */
+function EventTypeFields({ editing, schedules, members, onCancel, onSaved, }) {
+    const isEdit = editing !== null;
+    const { session } = useConnect();
     const defaultHostId = useMemo(() => {
         const self = members.find((member) => member.userId === session?.user?.userId);
         return self?.memberId ?? members[0]?.memberId ?? "";
     }, [members, session?.user?.userId]);
-    const [name, setName] = useState("");
-    const [description, setDescription] = useState("");
-    const [durationMinutes, setDurationMinutes] = useState(30);
-    const [bufferBefore, setBufferBefore] = useState(5);
-    const [bufferAfter, setBufferAfter] = useState(5);
-    const [scheduleId, setScheduleId] = useState("");
-    const [hostMemberId, setHostMemberId] = useState("");
-    const [locationKind, setLocationKind] = useState("phone");
-    const [locationValue, setLocationValue] = useState("");
+    const [name, setName] = useState(editing?.name ?? "");
+    const [description, setDescription] = useState(editing?.description ?? "");
+    const [durationMinutes, setDurationMinutes] = useState(editing?.durationMinutes ?? 30);
+    const [bufferBefore, setBufferBefore] = useState(editing?.bufferBeforeMinutes ?? 5);
+    const [bufferAfter, setBufferAfter] = useState(editing?.bufferAfterMinutes ?? 5);
+    const [scheduleId, setScheduleId] = useState(editing?.scheduleId ?? "");
+    const [hostMemberId, setHostMemberId] = useState(editing?.host.kind === "member" ? editing.host.memberId : "");
+    const [locationKind, setLocationKind] = useState(editing?.location.kind ?? "phone");
+    const [locationValue, setLocationValue] = useState(editing?.location.value ?? "");
     const effectiveScheduleId = scheduleId || schedules[0]?.id || "";
     const effectiveHostMemberId = hostMemberId || defaultHostId;
-    const { createEventType, isPending, error, clearError } = useCreateEventType();
+    const { createEventType, isPending: isCreating, error: createError, clearError: clearCreateError } = useCreateEventType();
+    const { updateEventType, isPending: isUpdating, error: updateError, clearError: clearUpdateError } = useUpdateEventType();
+    const isPending = isCreating || isUpdating;
+    const error = isEdit ? updateError : createError;
+    const clearError = isEdit ? clearUpdateError : clearCreateError;
     const isFormValid = name.trim().length > 0 &&
         durationMinutes >= 5 &&
         durationMinutes <= 480 &&
@@ -57,7 +130,7 @@ export function ConnectEventTypeFormModal({ isOpen, onOpenChange, onCreated, })
             return;
         clearError();
         const trimmedDescription = description.trim();
-        const created = await createEventType({
+        const shared = {
             name: name.trim(),
             description: trimmedDescription.length > 0 ? trimmedDescription : null,
             durationMinutes,
@@ -69,11 +142,12 @@ export function ConnectEventTypeFormModal({ isOpen, onOpenChange, onCreated, })
                 kind: locationKind,
                 value: locationValue.trim().length > 0 ? locationValue.trim() : null,
             },
-        });
-        if (created) {
-            onCreated?.(created);
-            onOpenChange(false);
-        }
+        };
+        const saved = isEdit
+            ? await updateEventType({ eventTypeId: editing.id, ...shared })
+            : await createEventType(shared);
+        if (saved)
+            onSaved(saved);
     };
-    return (_jsx(Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-140", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "New appointment type" }) }), _jsx(Modal.Body, { children: schedules.length === 0 ? (_jsx("p", { className: "text-sm text-muted", children: "Set up availability first - an appointment type needs working hours to book against." })) : (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { isRequired: true, variant: "secondary", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { placeholder: "Consultation", value: name, onChange: (e) => setName(e.currentTarget.value), disabled: isPending, autoFocus: true })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Description" }), _jsx(TextArea, { placeholder: "What this appointment is for", value: description, onChange: (e) => setDescription(e.currentTarget.value), disabled: isPending, rows: 2 })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs(TextField, { isRequired: true, variant: "secondary", children: [_jsx(Label, { children: "Length (min)" }), _jsx(Input, { type: "number", value: String(durationMinutes), onChange: (e) => setDurationMinutes(Number(e.currentTarget.value)), disabled: isPending })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Gap before" }), _jsx(Input, { type: "number", value: String(bufferBefore), onChange: (e) => setBufferBefore(Number(e.currentTarget.value)), disabled: isPending })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Gap after" }), _jsx(Input, { type: "number", value: String(bufferAfter), onChange: (e) => setBufferAfter(Number(e.currentTarget.value)), disabled: isPending })] })] }), schedules.length > 1 && (_jsxs(Select, { variant: "secondary", value: effectiveScheduleId, onChange: (value) => setScheduleId(String(value)), isDisabled: isPending, children: [_jsx(Label, { children: "Availability" }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: schedules.map((schedule) => (_jsxs(ListBox.Item, { id: schedule.id, textValue: schedule.name, children: [schedule.name, _jsx(ListBox.ItemIndicator, {})] }, schedule.id))) }) })] })), members.length > 1 && (_jsxs(Select, { variant: "secondary", value: effectiveHostMemberId, onChange: (value) => setHostMemberId(String(value)), isDisabled: isPending, children: [_jsx(Label, { children: "Who hosts it" }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: members.map((member) => (_jsxs(ListBox.Item, { id: member.memberId, textValue: member.displayName ?? member.email, children: [member.displayName ?? member.email, _jsx(ListBox.ItemIndicator, {})] }, member.memberId))) }) })] })), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs(Select, { variant: "secondary", value: locationKind, onChange: (value) => setLocationKind(value), isDisabled: isPending, children: [_jsx(Label, { children: "Where" }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: LOCATION_KINDS.map((kind) => (_jsxs(ListBox.Item, { id: kind, textValue: LOCATION_LABELS[kind], children: [LOCATION_LABELS[kind], _jsx(ListBox.ItemIndicator, {})] }, kind))) }) })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Details" }), _jsx(TextArea, { placeholder: locationKind === "address" ? "Where to come" : "Left blank is fine", value: locationValue, onChange: (e) => setLocationValue(e.currentTarget.value), disabled: isPending, rows: 2 })] })] }), error && _jsx("p", { className: "text-sm text-danger", children: error }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onPress: () => onOpenChange(false), isDisabled: isPending, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", isDisabled: !isFormValid, children: isPending ? "Saving..." : "Create" })] })] })) })] }) }) }) }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { isRequired: true, variant: "secondary", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { placeholder: "Consultation", value: name, onChange: (e) => setName(e.currentTarget.value), disabled: isPending, autoFocus: true })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Description" }), _jsx(TextArea, { placeholder: "What this appointment is for", value: description, onChange: (e) => setDescription(e.currentTarget.value), disabled: isPending, rows: 2 })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs(TextField, { isRequired: true, variant: "secondary", children: [_jsx(Label, { children: "Length (min)" }), _jsx(Input, { type: "number", value: String(durationMinutes), onChange: (e) => setDurationMinutes(Number(e.currentTarget.value)), disabled: isPending })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Gap before" }), _jsx(Input, { type: "number", value: String(bufferBefore), onChange: (e) => setBufferBefore(Number(e.currentTarget.value)), disabled: isPending })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Gap after" }), _jsx(Input, { type: "number", value: String(bufferAfter), onChange: (e) => setBufferAfter(Number(e.currentTarget.value)), disabled: isPending })] })] }), schedules.length > 1 && (_jsxs(Select, { variant: "secondary", value: effectiveScheduleId, onChange: (value) => setScheduleId(String(value)), isDisabled: isPending, children: [_jsx(Label, { children: "Availability" }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: schedules.map((schedule) => (_jsxs(ListBox.Item, { id: schedule.id, textValue: schedule.name, children: [schedule.name, _jsx(ListBox.ItemIndicator, {})] }, schedule.id))) }) })] })), members.length > 1 && (_jsxs(Select, { variant: "secondary", value: effectiveHostMemberId, onChange: (value) => setHostMemberId(String(value)), isDisabled: isPending, children: [_jsx(Label, { children: "Who hosts it" }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: members.map((member) => (_jsxs(ListBox.Item, { id: member.memberId, textValue: member.displayName ?? member.email, children: [member.displayName ?? member.email, _jsx(ListBox.ItemIndicator, {})] }, member.memberId))) }) })] })), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs(Select, { variant: "secondary", value: locationKind, onChange: (value) => setLocationKind(value), isDisabled: isPending, children: [_jsx(Label, { children: "Where" }), _jsxs(Select.Trigger, { children: [_jsx(Select.Value, {}), _jsx(Select.Indicator, {})] }), _jsx(Select.Popover, { children: _jsx(ListBox, { children: LOCATION_KINDS.map((kind) => (_jsxs(ListBox.Item, { id: kind, textValue: LOCATION_LABELS[kind], children: [LOCATION_LABELS[kind], _jsx(ListBox.ItemIndicator, {})] }, kind))) }) })] }), _jsxs(TextField, { variant: "secondary", children: [_jsx(Label, { children: "Details" }), _jsx(TextArea, { placeholder: locationKind === "address" ? "Where to come" : "Left blank is fine", value: locationValue, onChange: (e) => setLocationValue(e.currentTarget.value), disabled: isPending, rows: 2 })] })] }), error && _jsx("p", { className: "text-sm text-danger", children: error }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onPress: onCancel, isDisabled: isPending, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", isDisabled: !isFormValid, children: isPending ? "Saving..." : isEdit ? "Save changes" : "Create" })] })] }));
 }