@cosmoops/connect-sdk 0.38.0 → 0.41.0

package/CHANGELOG.md

@@ -3,6 +3,92 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.41.0
+
+### Calling from the browser: `<ConnectCallButton>`
+
+A signed-in member can now ring a number from your app - through the
+**workspace's own number**, so the person called sees the business, never the
+member's phone. Calls are **not recorded**, and every one lands in Connect's
+call log with who placed it, whether it was answered and how long they talked.
+
+```tsx
+import { ConnectCallProvider, ConnectCallButton } from "@cosmoops/connect-sdk/client";
+
+// once, inside <ConnectProvider>, beside your app shell - a call outlives the page
+<ConnectCallProvider onCallEnded={({ callId }) => callId && logCall(callId)}>
+  {children}
+</ConnectCallProvider>
+
+// wherever a person can be rung
+<ConnectCallButton phone="+919812345678" name="Asha Rao" />
+```
+
+`<ConnectCallProvider>` holds the call and draws the in-call bar (mute, hang
+up, a timer), so navigating mid-call does not hang up. `useConnectCall()` is
+there for your own button. Plivo's browser SDK - now this package's one
+runtime dependency - is loaded only when someone presses Call.
+
+**Log the outcome on your server**, not from the browser: `onEnded` /
+`onCallEnded` hand you the call id, and `connect.calls.get(callId)` reads
+`status`, `talkSeconds`, `unansweredReason` and `placedByUserId`. A browser is
+not a witness a call log should trust, and the carrier's report reaches
+Connect a moment after the line drops - read again if `status` is still
+`dialing` or `answered`.
+
+**Two halves of permission, both required.** Your API key needs the new
+`calls:place` scope (and `calls:read` to read outcomes); the member needs
+"Make calls" - from their workspace role, or a role on your application
+carrying `connect:call:place`. Nothing here works server-to-server: a call is
+placed by a person. Re-run your seed with the new scopes.
+
+New on `ConnectCall`: `handler` (`agent` | `member`), `placedByUserId`,
+`talkSeconds` and `unansweredReason`. `CallStatus` gains `dialing` and
+`unanswered`, which outbound calls already passed through - if you switch on
+it exhaustively, add the two cases.
+
+Server-side, `connect.calls` gains `getBrowserCallingToken`,
+`startBrowserCall` and `cancelBrowserCall`; `createConnectHandler` serves
+them as `POST /calls/{browser-token,start,cancel}`. You should not need to
+call either directly.
+
+## 0.40.0
+
+### `workspaces.create()` exists now, and the switcher's "Create workspace" row is inline
+
+0.37.0 added `alwaysShow` and said, deliberately, that there was no
+`workspaces.create()` - creating a workspace was Connect's job, tied to
+KYC/KYB and a billing profile. That reasoning held for a tenant's *first*
+workspace, which still mints a tenant, an Identity Platform account and a
+password reset. It never applied to a tenant's *second* workspace: opening a
+branch office under a tenant the caller already owns needs none of that -
+`CreateWorkspaceUseCase` just checks ownership, the tenant's plan, and the
+business-email-domain rule.
+
+So `alwaysShow`'s "Create workspace" row now opens
+`<ConnectCreateWorkspaceModal>` inline - name, individual-or-business - and
+switches into the result automatically when it is possible
+(`workspace.inAudience`), rather than opening Connect in a new tab and
+leaving the member to find their way back. Needs the new `workspaces:create`
+scope on your API key.
+
+```tsx
+import { ConnectCreateWorkspaceModal, useCreateWorkspace } from "@cosmoops/connect-sdk/client";
+```
+
+Both are usable standalone, not only through the switcher. `useCreateWorkspace()`
+is not optimistic, same as every other scheduling/workspace write here: the
+tenant's plan is what decides whether another workspace is allowed at all,
+and that is a question only the server can answer. There is still no
+capacity read to show ahead of time - submit and show the server's own
+refusal, the same posture Connect's own "Create workspace" button takes.
+
+`ConnectWorkspaceSwitcherProps.alwaysShow`'s doc comment, and
+`WorkspacesResource`'s, are both updated; nothing about the prop's name or
+default changed, so an existing host that set `alwaysShow: true` for the old
+link-out gets the inline flow with no code change on its side beyond the
+version bump and the new scope.
+
 ## 0.37.0
 
 ### The workspace switcher can stay visible at one workspace, and offer a second

package/dist/cjs/client/components/availability-form.js

@@ -23,24 +23,52 @@ function timeInputToMinutes(value) {
     return (hours ?? 0) * 60 + (minutes ?? 0);
 }
 /**
- * Gives a workspace its first working hours, from inside a host application
- * rather than a link-out to Connect.
+ * Creates or edits a workspace's working hours, from inside a host
+ * application rather than a link-out to Connect.
  *
  * Deliberately narrower than Connect's own Calendar settings form: one
- * interval per day (no split shifts), no date overrides, and the timezone
- * defaults to the browser's own rather than asking. This is a first-run
- * setup step, not a second copy of the Console editor - "Manage in Connect"
- * is still where the rest of what a schedule can do lives.
+ * interval per day (no split shifts), no date overrides, and the timezone is
+ * set once at creation (from the browser's own) and shown but not editable
+ * here afterwards. This is a first-party setup-and-edit surface, not a
+ * second copy of the Console editor - "Manage in Connect" is still where the
+ * rest of what a schedule can do lives.
  *
- * **Not optimistic.** `useCreateAvailabilitySchedule` settles the write
- * against the server before this closes, the same posture every write in
- * this package takes - see `ConnectBookingDialog`.
+ * **Not optimistic.** The write settles against the server before this
+ * closes, the same posture every write in this package takes - see
+ * `ConnectBookingDialog`.
+ *
+ * This outer component only decides whether the row to edit has loaded yet;
+ * the form itself is `ScheduleFields` below, mounted with
+ * `key={editing?.id}` - see that component's own doc comment for why.
+ */
+function ConnectAvailabilityFormModal({ isOpen, onOpenChange, scheduleId = null, onSaved, }) {
+    const isEdit = scheduleId !== null;
+    const { schedules, isLoading, error } = (0, use_scheduling_js_1.useAvailabilitySchedules)();
+    const editing = isEdit ? schedules.find((row) => row.id === scheduleId) ?? null : null;
+    return ((0, jsx_runtime_1.jsx)(react_2.Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { className: "sm:max-w-120", children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: isEdit ? "Edit availability" : "Set your availability" }) }), (0, jsx_runtime_1.jsx)(react_2.Modal.Body, { children: isEdit && isLoading ? ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Loading\u2026" })) : isEdit && error ? ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "That could not be loaded just now. Close this and try again." })) : isEdit && !editing ? ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Those working hours no longer exist." })) : ((0, jsx_runtime_1.jsx)(ScheduleFields, { editing: editing, onCancel: () => onOpenChange(false), onSaved: (saved) => {
+                                    onSaved?.(saved);
+                                    onOpenChange(false);
+                                } }, editing?.id ?? "create")) })] }) }) }) }));
+}
+/**
+ * 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 (`useAvailabilitySchedules` 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 ConnectAvailabilityFormModal({ isOpen, onOpenChange, onCreated, }) {
-    const [name, setName] = (0, react_1.useState)("Working hours");
-    const [timezone] = (0, react_1.useState)(() => Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC");
-    const [weeklyHours, setWeeklyHours] = (0, react_1.useState)(defaultWeeklyHours);
-    const { createSchedule, isPending, error, clearError } = (0, use_scheduling_js_1.useCreateAvailabilitySchedule)();
+function ScheduleFields({ editing, onCancel, onSaved, }) {
+    const isEdit = editing !== null;
+    const [name, setName] = (0, react_1.useState)(editing?.name ?? "Working hours");
+    const [timezone] = (0, react_1.useState)(() => editing?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC");
+    const [weeklyHours, setWeeklyHours] = (0, react_1.useState)(editing?.weeklyHours ?? defaultWeeklyHours);
+    const { createSchedule, isPending: isCreating, error: createError, clearError: clearCreateError } = (0, use_scheduling_js_1.useCreateAvailabilitySchedule)();
+    const { updateSchedule, isPending: isUpdating, error: updateError, clearError: clearUpdateError } = (0, use_scheduling_js_1.useUpdateAvailabilitySchedule)();
+    const isPending = isCreating || isUpdating;
+    const error = isEdit ? updateError : createError;
+    const clearError = isEdit ? clearUpdateError : clearCreateError;
     const toggleDay = (day, open) => {
         setWeeklyHours((prev) => ({
             ...prev,
@@ -61,15 +89,15 @@ function ConnectAvailabilityFormModal({ isOpen, onOpenChange, onCreated, }) {
         if (!isFormValid)
             return;
         clearError();
-        const schedule = await createSchedule({ name: name.trim(), timezone, weeklyHours });
-        if (schedule) {
-            onCreated?.(schedule);
-            onOpenChange(false);
-        }
+        const saved = isEdit
+            ? await updateSchedule({ scheduleId: editing.id, name: name.trim(), weeklyHours })
+            : await createSchedule({ name: name.trim(), timezone, weeklyHours });
+        if (saved)
+            onSaved(saved);
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { className: "sm:max-w-120", children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: "Set your availability" }) }), (0, jsx_runtime_1.jsx)(react_2.Modal.Body, { children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.TextField, { isRequired: true, variant: "secondary", children: [(0, jsx_runtime_1.jsx)(react_2.Label, { children: "Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.currentTarget.value), disabled: isPending, autoFocus: true })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-muted", children: ["Timezone: ", timezone] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: WEEKDAY_KEYS.map((day) => {
-                                            const interval = weeklyHours[day][0];
-                                            const isOpenDay = interval !== undefined;
-                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_2.Switch, { isSelected: isOpenDay, onChange: (open) => toggleDay(day, open), isDisabled: isPending, children: (0, jsx_runtime_1.jsxs)(react_2.Switch.Content, { children: [(0, jsx_runtime_1.jsx)(react_2.Switch.Control, { children: (0, jsx_runtime_1.jsx)(react_2.Switch.Thumb, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "w-24 shrink-0 text-sm", children: WEEKDAY_LABELS[day] })] }) }), isOpenDay && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: "time", value: minutesToTimeInput(interval.startMinute), onChange: (e) => setDayTime(day, "startMinute", e.currentTarget.value), disabled: isPending }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-muted", children: "to" }), (0, jsx_runtime_1.jsx)(react_2.Input, { type: "time", value: minutesToTimeInput(interval.endMinute), onChange: (e) => setDayTime(day, "endMinute", e.currentTarget.value), disabled: isPending })] }))] }, day));
-                                        }) }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { type: "button", variant: "secondary", onPress: () => onOpenChange(false), isDisabled: isPending, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", variant: "primary", isDisabled: !isFormValid, children: isPending ? "Saving..." : "Save" })] })] }) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.TextField, { isRequired: true, variant: "secondary", children: [(0, jsx_runtime_1.jsx)(react_2.Label, { children: "Name" }), (0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.currentTarget.value), disabled: isPending, autoFocus: true })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-muted", children: ["Timezone: ", timezone] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: WEEKDAY_KEYS.map((day) => {
+                    const interval = weeklyHours[day][0];
+                    const isOpenDay = interval !== undefined;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_2.Switch, { isSelected: isOpenDay, onChange: (open) => toggleDay(day, open), isDisabled: isPending, children: (0, jsx_runtime_1.jsxs)(react_2.Switch.Content, { children: [(0, jsx_runtime_1.jsx)(react_2.Switch.Control, { children: (0, jsx_runtime_1.jsx)(react_2.Switch.Thumb, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "w-24 shrink-0 text-sm", children: WEEKDAY_LABELS[day] })] }) }), isOpenDay && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: "time", value: minutesToTimeInput(interval.startMinute), onChange: (e) => setDayTime(day, "startMinute", e.currentTarget.value), disabled: isPending }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-muted", children: "to" }), (0, jsx_runtime_1.jsx)(react_2.Input, { type: "time", value: minutesToTimeInput(interval.endMinute), onChange: (e) => setDayTime(day, "endMinute", e.currentTarget.value), disabled: isPending })] }))] }, day));
+                }) }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { type: "button", variant: "secondary", onPress: onCancel, isDisabled: isPending, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", variant: "primary", isDisabled: !isFormValid, children: isPending ? "Saving..." : isEdit ? "Save changes" : "Save" })] })] }));
 }

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

@@ -0,0 +1,398 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectCall = useConnectCall;
+exports.ConnectCallProvider = ConnectCallProvider;
+exports.ConnectCallButton = ConnectCallButton;
+exports.ConnectCallingStatus = ConnectCallingStatus;
+exports.ConnectActiveCallBar = ConnectActiveCallBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const cn_js_1 = require("../../cn.js");
+const provider_js_1 = require("../provider.js");
+const portal_links_js_1 = require("../portal-links.js");
+const ConnectCallContext = (0, react_1.createContext)(null);
+/** Start a call yourself. Must be inside `<ConnectCallProvider>`. */
+function useConnectCall() {
+    const value = (0, react_1.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.
+ */
+function ConnectCallProvider({ children, onCallEnded, onError, className, }) {
+    const { mutateResource } = (0, provider_js_1.useConnect)();
+    const [call, setCall] = (0, react_1.useState)(null);
+    const { data: availability, refetch: refreshAvailability } = (0, provider_js_1.useConnectResource)("/calls/availability");
+    // Read inside `finish`, which is wired to SDK events once.
+    const refreshRef = (0, react_1.useRef)(refreshAvailability);
+    (0, react_1.useEffect)(() => {
+        refreshRef.current = refreshAvailability;
+    }, [refreshAvailability]);
+    const clientRef = (0, react_1.useRef)(null);
+    const placedRef = (0, react_1.useRef)(false);
+    const targetRef = (0, react_1.useRef)(null);
+    const callIdRef = (0, react_1.useRef)(null);
+    const endedRef = (0, react_1.useRef)(false);
+    const dismissTimer = (0, react_1.useRef)(null);
+    // Read inside SDK event handlers wired once, so they always see the latest.
+    const onCallEndedRef = (0, react_1.useRef)(onCallEnded);
+    (0, react_1.useEffect)(() => {
+        onCallEndedRef.current = onCallEnded;
+    }, [onCallEnded]);
+    const cancelOnServer = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(async () => {
+        let client = clientRef.current;
+        if (!client) {
+            const { default: Plivo } = await Promise.resolve().then(() => __importStar(require("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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        const client = clientRef.current;
+        if (placedRef.current && client) {
+            client.hangup();
+            return; // `onCallTerminated` takes it from here.
+        }
+        cancelOnServer();
+        finish(null);
+    }, [cancelOnServer, finish]);
+    const toggleMute = (0, react_1.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.
+    (0, react_1.useEffect)(() => () => {
+        clientRef.current?.logout();
+        if (dismissTimer.current)
+            clearTimeout(dismissTimer.current);
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ isBusy, startCall, availability, refreshAvailability }), [isBusy, startCall, availability, refreshAvailability]);
+    return ((0, jsx_runtime_1.jsxs)(ConnectCallContext.Provider, { value: value, children: [children, call && ((0, jsx_runtime_1.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.
+ */
+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" ? ((0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "ghost", "aria-label": unavailableReason(availability).text, isDisabled: true, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { className: "size-3.5" }) })) : ((0, jsx_runtime_1.jsx)(ConnectCallUnavailable, { availability: availability, className: className }));
+    }
+    if (variant === "compact") {
+        return ((0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "ghost", "aria-label": `Call ${name?.trim() || phone}`, isDisabled: isBusy || isDisabled, onPress: press, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { className: "size-3.5" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "primary", isDisabled: isBusy || isDisabled || availability === null, onPress: press, className: (0, cn_js_1.cn)("shrink-0", className), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.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 = (0, portal_links_js_1.useConnectPortalUrl)(action?.path ?? "/calling");
+    return ((0, jsx_runtime_1.jsxs)("p", { className: (0, cn_js_1.cn)("text-xs text-muted", className), children: [text, " ", action && ((0, jsx_runtime_1.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.
+ */
+function ConnectCallingStatus({ className }) {
+    const { availability } = useConnectCall();
+    const callingHref = (0, portal_links_js_1.useConnectPortalUrl)("/calling");
+    const offerHref = (0, portal_links_js_1.useConnectPortalUrl)(availability?.offer ? `/billing/subscriptions/${availability.offer.subscriptionId}` : "/calling");
+    if (!availability) {
+        return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)("h-24 animate-pulse rounded-lg bg-surface-secondary", className) });
+    }
+    const rate = formatRupees(availability.ratePaisePerMinute);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("space-y-3 rounded-lg border border-separator bg-surface p-4", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Business number" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium tabular-nums", children: availability.number ?? (availability.status === "number_pending" ? "Being set up…" : "None") })] }), availability.number && ((0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Calling minutes" }), (0, jsx_runtime_1.jsxs)("p", { className: (0, cn_js_1.cn)("text-sm font-medium tabular-nums", availability.lowBalance && "text-danger"), children: [formatRupees(availability.available), " \u00B7 about ", availability.availableMinutes, " min"] })] }))] }), availability.status === "no_permission" ? ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "You don't have permission to make calls here." })) : !availability.number ? ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("a", { href: callingHref, className: "font-medium text-accent hover:underline", children: "Check on your number" }))
+                        : availability.canManageNumber && availability.offer
+                            ? ((0, jsx_runtime_1.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."] })) : ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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. */
+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 ((0, jsx_runtime_1.jsx)("div", { role: "status", "aria-live": "polite", className: (0, cn_js_1.cn)("fixed inset-x-0 bottom-4 z-50 flex justify-center px-4", className), children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-accent-soft text-accent", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PhoneOutgoing, { "aria-hidden": true, className: "size-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-medium", children: call.label }), (0, jsx_runtime_1.jsxs)("p", { className: "truncate text-xs text-muted tabular-nums", children: [status, call.notice ? ` · ${call.notice}` : call.label === call.number ? "" : ` · ${call.number}`] })] }), live && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "secondary", "aria-label": call.muted ? "Unmute" : "Mute", isDisabled: call.phase !== "in-call", onPress: onToggleMute, children: call.muted ? (0, jsx_runtime_1.jsx)(lucide_react_1.MicOff, { className: "size-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Mic, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "danger", "aria-label": "Hang up", onPress: onHangUp, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PhoneOff, { className: "size-4" }) })] }))] }) }));
+}
+/** Seconds since `since`, ticking once a second. `0` while there is nothing to time. */
+function useElapsedSeconds(since) {
+    const [now, setNow] = (0, react_1.useState)(() => Date.now());
+    (0, react_1.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));
+}