@copilotz/billing 0.0.0-stage → 1.0.0-rc.35

package/credits/views/web/org.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The org's billing (kind `billing.org`, a section of the org's page, the web
+ * shell's `orgSettings`, at `/org?tab=billing`). People meet this when they're
+ * running out, stopped mid-work, or paying, so it opens with what matters most:
+ * what the org has left, what that's made of and the order it'll be spent in,
+ * and if it can't go on, why, what stopped, and the way forward right there.
+ * Then adding credits and redeeming a gift code, the plan, the month's budget,
+ * and everything that came in. Coming back from paying, it says the payment is
+ * being confirmed and reads again until it shows: it never claims what the
+ * state doesn't show yet. An org that isn't charged says so, without numbers.
+ * Anyone who doesn't run it sees only whether work can go on and who can help.
+ * Platform staff also get their panel (staff.tsx), in the staff colour.
+ */
+import { type ReactNode } from "react";
+import type { ViewContext } from "copilotz";
+import { type BillingState } from "./numbers.js";
+import { type Org } from "./types.js";
+export declare const orgBillingView: (_: unknown, ctx: ViewContext<ReactNode>) => ReactNode;
+/** Someone who doesn't run the org: whether work can go on, and who can help. */
+export declare function ForMembers({ state, org }: {
+    state: BillingState;
+    org?: Org;
+}): ReactNode;
+/** The balance first: the number, then what it's made of, in the order it'll be spent. */
+export declare function Balance({ state, personal, team, quiet }: {
+    state: BillingState;
+    personal: boolean;
+    team: string;
+    /** A payment is being confirmed: not the moment to say they're out. */
+    quiet: boolean;
+}): ReactNode;

package/credits/views/web/org.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The org's billing (kind `billing.org`, a section of the org's page, the web
+ * shell's `orgSettings`, at `/org?tab=billing`). People meet this when they're
+ * running out, stopped mid-work, or paying, so it opens with what matters most:
+ * what the org has left, what that's made of and the order it'll be spent in,
+ * and if it can't go on, why, what stopped, and the way forward right there.
+ * Then adding credits and redeeming a gift code, the plan, the month's budget,
+ * and everything that came in. Coming back from paying, it says the payment is
+ * being confirmed and reads again until it shows: it never claims what the
+ * state doesn't show yet. An org that isn't charged says so, without numbers.
+ * Anyone who doesn't run it sees only whether work can go on and who can help.
+ * Platform staff also get their panel (staff.tsx), in the staff colour.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Card, Icon, IconButton, message, Notice, Skeleton, Spinner } from "copilotz/web";
+import { AddCredits, Redeem } from "./add.js";
+import { BudgetCard } from "./budget.js";
+import { History } from "./history.js";
+import { dayShown, kindSaid, landed, lapseSaid, lowOn, money, paidIn, pilesOf, teamOf, withoutPaid, } from "./numbers.js";
+import { PlanCard, PlanOffers } from "./plan.js";
+import { StaffPanel } from "./staff.js";
+import { STYLE } from "./style.js";
+import { LEFT } from "./types.js";
+/** How long apart it reads again, confirming a payment: about half a minute in all. */
+const TRIES = [1000, 1500, 2000, 3000, 4000, 5000, 6000, 8000];
+export const orgBillingView = (_, ctx) => (_jsxs(_Fragment, { children: [_jsx("style", { href: "billing-web", precedence: "copilotz", children: STYLE }), _jsx(Billing, { org: ctx.hints.org, call: ctx.call })] }));
+function Billing({ org, call }) {
+    const [state, setState] = useState();
+    const [error, setError] = useState();
+    const live = useRef(true);
+    const read = useCallback(async () => {
+        try {
+            const answer = await call("billing.state", {});
+            if (!live.current)
+                return;
+            setState(answer);
+            setError(undefined);
+        }
+        catch (e) {
+            if (live.current)
+                setError(message(e));
+        }
+    }, []);
+    useEffect(() => {
+        live.current = true;
+        void read();
+        // Coming back to the page, it's read again: credits go down as agents work.
+        const again = () => document.visibilityState === "visible" && void read();
+        document.addEventListener("visibilitychange", again);
+        return () => {
+            live.current = false;
+            document.removeEventListener("visibilitychange", again);
+        };
+    }, []);
+    const payment = usePayment(state, read);
+    if (error && !state) {
+        return (_jsxs(Notice, { tone: "destructive", role: "alert", action: _jsx(Button, { size: "sm", onClick: () => void read(), children: "Try again" }), children: ["We couldn't read this org's billing just now. ", error] }));
+    }
+    if (!state) {
+        return (_jsxs("div", { className: "billing", "aria-busy": "true", children: [_jsx(Skeleton, { height: 196, radius: "xl" }), _jsxs("div", { className: "billing-pair", children: [_jsx(Skeleton, { height: 228, radius: "xl" }), _jsx(Skeleton, { height: 228, radius: "xl" })] }), _jsx(Skeleton, { height: 180, radius: "xl" })] }));
+    }
+    if (!state.on && !state.staff) {
+        return (_jsx("div", { className: "billing", children: _jsxs(Card, { className: "billing-calm", children: [_jsx("span", { className: "billing-calm-icon", children: _jsx(Icon, { name: "check-circle", size: 20 }) }), _jsxs("div", { children: [_jsx("h3", { children: "Nothing's charged for this org yet" }), _jsx("p", { children: "Everyone here can keep working as usual." })] })] }) }));
+    }
+    if (!state.runs)
+        return _jsx(ForMembers, { state: state, org: org });
+    const personal = org?.kind === "personal";
+    const team = teamOf(document.title);
+    const quiet = payment.phase === "waiting" || payment.phase === "late";
+    // What stopped them, or soon will, comes straight after the balance.
+    const budgetFirst = state.why === "budget" || lowOn(state) === "budget" ||
+        state.plan?.status === "past_due";
+    const staffPanel = state.staff
+        ? _jsx(StaffPanel, { state: state, org: org, call: call, onChanged: read })
+        : null;
+    const planAndBudget = (_jsxs("div", { className: "billing-pair billing-pair-even", "data-budget-first": (budgetFirst && state.plan?.status !== "past_due") || undefined, children: [_jsx(PlanCard, { state: state, team: team, personal: personal, call: call }), _jsx(BudgetCard, { state: state, call: call, onChanged: read })] }));
+    return (_jsxs("div", { className: "billing", children: [!state.on
+                ? (_jsx(Notice, { tone: "warning", icon: "shield", title: "Limits are off for the whole app", children: "Nobody is charged or stopped, in any org, and nothing starts by itself: no plans, trials or balances. What you set below is kept for when they're turned on." }))
+                : null, _jsx(PaymentNotice, { payment: payment }), state.on
+                ? (_jsxs(_Fragment, { children: [_jsx(Balance, { state: state, personal: personal, team: team, quiet: quiet }), staffPanel, budgetFirst ? planAndBudget : null, _jsxs("div", { className: "billing-pair", "data-single": state.waived || undefined, children: [state.waived ? null : _jsx(AddCredits, { state: state, team: team, call: call }), _jsx(Redeem, { call: call, onRedeemed: read })] }), budgetFirst ? null : planAndBudget, _jsx(PlanOffers, { state: state, personal: personal, call: call }), _jsx(History, { state: state })] }))
+                : staffPanel, error
+                ? (_jsx(Notice, { tone: "neutral", action: _jsx(Button, { size: "sm", onClick: () => void read(), children: "Try again" }), children: "This may be a moment out of date: we couldn't read it again just now." }))
+                : null] }));
+}
+/** Someone who doesn't run the org: whether work can go on, and who can help. */
+export function ForMembers({ state, org }) {
+    const name = org?.name ?? "This org";
+    if (state.ok === false) {
+        return (_jsx("div", { className: "billing", children: _jsxs(Notice, { tone: "warning", title: state.why === "budget"
+                    ? `${name} has reached its budget for the month`
+                    : `${name} is out of credits`, children: ["Agents can't run until there's more. Nothing is deleted. Its owners and admins can", " ", state.why === "budget" ? "raise it" : "add more", "."] }) }));
+    }
+    return (_jsx("div", { className: "billing", children: _jsxs(Card, { className: "billing-calm", children: [_jsx("span", { className: "billing-calm-icon", children: _jsx(Icon, { name: "check-circle", size: 20 }) }), _jsxs("div", { children: [_jsx("h3", { children: "All good" }), _jsxs("p", { children: [name, "'s owners and admins look after its billing."] })] })] }) }));
+}
+/** What's scrolled to, and given focus, for the way forward named at the top. */
+const toSection = (id, focus) => {
+    const section = document.getElementById(id);
+    section?.scrollIntoView({ behavior: "smooth", block: "center" });
+    section?.querySelector(focus)?.focus({ preventScroll: true });
+};
+const addCredits = () => toSection("billing-add", "input:checked, input, button");
+const changeBudget = () => toSection("billing-budget", "button");
+/** The balance first: the number, then what it's made of, in the order it'll be spent. */
+export function Balance({ state, personal, team, quiet }) {
+    const balance = state.balance ?? 0;
+    const debt = state.debt ?? 0;
+    const buckets = state.buckets ?? [];
+    if (state.waived) {
+        const until = state.plan?.waived?.usage?.until;
+        return (_jsxs(Card, { as: "section", className: "billing-calm billing-waived", "aria-label": "Balance", children: [_jsx("span", { className: "billing-calm-icon", children: _jsx(Icon, { name: "check-circle", size: 20 }) }), _jsxs("div", { children: [_jsx("h3", { children: "Usage isn't charged" }), _jsxs("p", { children: ["Agents and computers run without using any credits", until ? `, until ${dayShown(until)}` : "", "."] })] })] }));
+    }
+    return (_jsxs(Card, { as: "section", className: "billing-balance", "aria-labelledby": "billing-balance", "data-stopped": state.ok === false || undefined, children: [quiet ? null : _jsx(Standing, { state: state, personal: personal, team: team }), _jsxs("div", { className: "billing-balance-grid", children: [_jsxs("div", { className: "billing-balance-main", children: [_jsx("h3", { id: "billing-balance", className: "billing-label", children: "Balance" }), _jsx("p", { className: "billing-amount", "data-negative": balance < 0 || undefined, children: money(balance) }), debt > 0
+                                ? (_jsxs("p", { className: "billing-debt", children: ["The last work went ", money(debt), " ", "past what was left. The next credits cover that first."] }))
+                                : null, _jsx("p", { className: "billing-worth", children: "$1 of credits pays for $1 of usage, at the listed prices." })] }), buckets.length ? _jsx(Buckets, { buckets: buckets }) : null] })] }));
+}
+/** Why the org can't go on, or soon won't: what stopped, and what to do, in its place. */
+function Standing({ state, personal, team }) {
+    const month = state.month;
+    const pay = state.pay;
+    const resets = month ? dayShown(month.end) : "";
+    if (state.ok === false && state.why === "budget") {
+        return (_jsxs(Notice, { tone: "warning", role: "status", className: "billing-standing billing-wrap", title: `${personal ? "You've" : "This org has"} reached this month's ${month?.limit !== undefined ? `${money(month.limit)} ` : ""}budget`, action: _jsx(Button, { size: "sm", variant: "primary", onClick: changeBudget, children: "Change budget" }), children: ["Agents have stopped and computers are asleep. Nothing is deleted. It resets", " ", resets, ", or raise it to carry on now."] }));
+    }
+    if (state.ok === false) {
+        return (_jsxs(Notice, { tone: "warning", role: "status", className: "billing-standing billing-wrap", title: `${personal ? "You're" : "This org is"} out of credits`, action: pay
+                ? _jsx(Button, { size: "sm", variant: "primary", onClick: addCredits, children: "Add credits" })
+                : undefined, children: ["Agents have stopped and computers are asleep. Nothing is deleted. ", pay
+                    ? "Add credits and you can carry on right away."
+                    : `Credits come from ${team}: once they add more, you can carry on.`] }));
+    }
+    const low = lowOn(state);
+    if (low === "budget" && month?.limit !== undefined) {
+        return (_jsxs(Notice, { tone: "neutral", icon: "info", role: "status", className: "billing-standing billing-wrap", title: `${money(Math.max(month.limit - month.spent, 0))} left of this month's budget`, action: _jsx(Button, { size: "sm", onClick: changeBudget, children: "Change budget" }), children: ["At the limit, agents stop and computers sleep until ", resets, "."] }));
+    }
+    if (low === "credits") {
+        return (_jsx(Notice, { tone: "neutral", icon: "info", role: "status", className: "billing-standing billing-wrap", title: "Running low on credits", action: pay ? _jsx(Button, { size: "sm", onClick: addCredits, children: "Add credits" }) : undefined, children: pay
+                ? "Add some now and nobody gets stopped mid-work."
+                : `Credits come from ${team}: ask them for more before they run out.` }));
+    }
+    return null;
+}
+/** Each kind of credit in one colour of the theme's, wherever it shows. */
+const COLOURS = {
+    plan: 1,
+    trial: 5,
+    gift: 3,
+    referral: 3,
+    purchase: 2,
+    waived: 4,
+    adjustment: 4,
+};
+/** The credits there are, as one bar and a list, in the order they'll be spent. */
+function Buckets({ buckets: given }) {
+    const piles = pilesOf(given);
+    const whole = piles.reduce((sum, pile) => sum + pile.left, 0);
+    return (_jsxs("div", { className: "billing-buckets", children: [_jsx("h4", { className: "billing-label", children: piles.length > 1 ? "Spent in this order" : "Made up of" }), piles.length > 1
+                ? (_jsx("div", { className: "billing-stack", "aria-hidden": "true", children: piles.map((bucket) => (_jsx("span", { "data-colour": COLOURS[bucket.kind] ?? 4, style: { flexGrow: bucket.left / whole } }, bucket.id))) }))
+                : null, _jsx("ol", { className: "billing-bucket-list", children: piles.map((bucket) => (_jsxs("li", { children: [_jsx("i", { "data-colour": COLOURS[bucket.kind] ?? 4, "aria-hidden": "true" }), _jsxs("span", { className: "billing-bucket-name", children: [kindSaid(bucket.kind), _jsx("small", { children: lapseSaid(bucket.expires) })] }), _jsxs("span", { className: "billing-bucket-left", children: [money(bucket.left), Math.abs(bucket.left - bucket.amount) > 0.005
+                                    ? _jsxs("small", { children: ["of ", money(bucket.amount)] })
+                                    : null] })] }, bucket.id))) })] }));
+}
+const keptBefore = () => {
+    try {
+        const kept = sessionStorage.getItem(LEFT);
+        return kept ? JSON.parse(kept) : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const forgetBefore = () => {
+    try {
+        sessionStorage.removeItem(LEFT);
+    }
+    catch { /* Nothing was kept. */ }
+};
+/**
+ * Coming back with `?paid=`: what was bought lands by the payment provider's
+ * word, which may come a moment later, so it reads again until the state shows
+ * it, a few times, and then says plainly it isn't showing yet.
+ */
+function usePayment(state, read) {
+    const [paid] = useState(() => paidIn(globalThis.location?.search ?? ""));
+    const [before] = useState(keptBefore);
+    const [phase, setPhase] = useState(paid ? "waiting" : "none");
+    const [thanks, setThanks] = useState();
+    useEffect(() => {
+        if (!paid || !state || phase === "done" || phase === "none")
+            return;
+        const said = landed(state, paid, before);
+        if (!said)
+            return;
+        setThanks(said);
+        setPhase("done");
+        forgetBefore();
+        // Read again later, this page doesn't confirm it twice.
+        history.replaceState(history.state, "", location.pathname + withoutPaid(location.search));
+    }, [state, phase]);
+    useEffect(() => {
+        if (phase !== "waiting")
+            return;
+        let timer;
+        let current = true;
+        const next = (at) => {
+            if (at >= TRIES.length)
+                return setPhase("late");
+            timer = setTimeout(async () => {
+                await read();
+                if (current)
+                    next(at + 1);
+            }, TRIES[at]);
+        };
+        next(0);
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+    }, [phase]);
+    return {
+        phase,
+        thanks,
+        again: () => setPhase("waiting"),
+        dismiss: () => setPhase("none"),
+    };
+}
+function PaymentNotice({ payment }) {
+    if (payment.phase === "waiting") {
+        return (_jsx(Notice, { tone: "info", icon: false, role: "status", className: "billing-paying", children: _jsxs("span", { className: "billing-paying-line", children: [_jsx(Spinner, { size: 15 }), _jsxs("span", { children: [_jsx("b", { children: "Confirming your payment\u2026" }), " ", "This usually takes a few seconds. You can stay here or get back to work."] })] }) }));
+    }
+    if (payment.phase === "late") {
+        return (_jsx(Notice, { tone: "neutral", role: "status", className: "billing-wrap", title: "Your payment isn't showing yet", action: _jsx(Button, { size: "sm", onClick: payment.again, children: "Check again" }), children: "If you paid, it'll land here soon: there's no need to pay again. Sometimes a bank takes a little longer." }));
+    }
+    if (payment.phase === "done") {
+        return (_jsx(Notice, { tone: "success", role: "status", title: "Thank you", action: _jsx(IconButton, { icon: "close", size: "sm", label: "Dismiss", onClick: payment.dismiss }), children: payment.thanks }));
+    }
+    return null;
+}

package/credits/views/web/plan.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The org's plan: its name, what's left of this period's plan credits and the
+ * day they end (what's left then doesn't carry over), what it includes, its
+ * seats and this period's dates. If the last payment failed, it says so and how
+ * to fix it: what they have still works, and new plan credits wait until it's
+ * sorted. Beside it (a card of its own, `PlanOffers`): the plans they can move
+ * to, those for their kind of org first, each with its price a seat and the
+ * total for their seats shown before they go, then a payment page where they
+ * confirm; in a personal org, that a team's plan is for team orgs. Already
+ * subscribed, those changes happen in "Manage billing", the payment provider's
+ * own page (card, invoices, cancelling).
+ */
+import type { ReactNode } from "react";
+import { type BillingState } from "./numbers.js";
+import { type Call } from "./types.js";
+export declare function PlanCard({ state, team, personal, call }: {
+    state: BillingState;
+    team: string;
+    /** A personal org: one person, so no seats to speak of. */
+    personal?: boolean;
+    call: Call;
+}): ReactNode;
+/** The plans they can move to; none while a subscription runs (that's Manage billing's). */
+export declare function PlanOffers({ state, personal, call }: {
+    state: BillingState;
+    personal?: boolean;
+    call: Call;
+}): ReactNode;

package/credits/views/web/plan.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, Icon, Notice } from "copilotz/web";
+import { leavingFor, useBackFromLeaving } from "./add.js";
+import { dayShown, includes, inCurrency, periodShown, planCredits, planCreditsSaid, priceFor, seatsSaid, } from "./numbers.js";
+import { useAct } from "./types.js";
+export function PlanCard({ state, team, personal = false, call }) {
+    const plan = state.plan;
+    const pay = state.pay;
+    const manage = useAct();
+    useBackFromLeaving(manage.release);
+    if (!plan)
+        return null;
+    const pastDue = plan.status === "past_due";
+    const ended = plan.status === "canceled";
+    const subscribed = !!plan.subscription && !ended;
+    const perSeat = plan.fixedSeats !== undefined ||
+        (!personal && (!!plan.terms.seat || !!plan.terms.credits?.perSeat));
+    const open = () => void manage.run(async () => {
+        const { url } = await call("billing.portal", {});
+        leavingFor(url, state);
+    }, true);
+    const said = includes(plan.terms, state.seats, personal);
+    const credits = planCredits(state);
+    return (_jsxs(Card, { as: "section", className: "billing-card", "aria-labelledby": "billing-plan", children: [_jsxs("header", { className: "billing-card-head", children: [_jsx("h3", { id: "billing-plan", children: "Plan" }), pastDue
+                        ? _jsx(Badge, { tone: "warning", children: "Payment failed" })
+                        : ended
+                            ? _jsx(Badge, { children: "Ended" })
+                            : null] }), _jsx("p", { className: "billing-plan-name", children: plan.terms.title }), credits ? _jsx(PlanCredits, { credits: credits, renews: !pastDue && !ended }) : null, pastDue
+                ? (_jsxs(Notice, { tone: "warning", role: "status", className: "billing-wrap", title: "The last payment didn't go through", action: pay?.manage
+                        ? (_jsx(Button, { size: "sm", variant: "primary", loading: manage.busy, onClick: open, children: "Fix payment" }))
+                        : undefined, children: ["What you have still works. New plan credits wait until it's sorted.", pay?.manage ? "" : ` Ask ${team} for help.`] }))
+                : null, _jsxs("dl", { className: "billing-facts", children: [said.length
+                        ? (_jsxs("div", { children: [_jsx("dt", { children: "Includes" }), _jsx("dd", { children: said.join(" · ") })] }))
+                        : null, perSeat && state.seats !== undefined
+                        ? (_jsxs("div", { children: [_jsx("dt", { children: "Seats" }), _jsxs("dd", { children: [seatsSaid(plan.fixedSeats ?? Math.max(state.seats, 1)), _jsx("small", { children: plan.fixedSeats !== undefined
+                                                ? " · set by your contract"
+                                                : " · guests don't count" })] })] }))
+                        : null, state.period
+                        ? (_jsxs("div", { children: [_jsx("dt", { children: "This period" }), _jsxs("dd", { children: [periodShown(state.period), pastDue || ended ? null : _jsxs("small", { children: ["\u00B7 renews ", dayShown(state.period.end)] })] })] }))
+                        : null] }), subscribed && pay?.manage
+                ? _jsx("p", { className: "billing-small", children: "To change or cancel your plan, use Manage billing." })
+                : null, pay?.manage && !pastDue
+                ? (_jsxs("div", { className: "billing-card-end", children: [_jsx(Button, { icon: "external", loading: manage.busy, onClick: open, children: "Manage billing" }), _jsx("span", { className: "billing-small", children: "Card, invoices and cancelling." })] }))
+                : null, manage.error ? _jsx(Notice, { tone: "destructive", role: "alert", children: manage.error }) : null] }));
+}
+/** This period's plan credits: what's left, until when, as a meter that empties. */
+function PlanCredits({ credits, renews }) {
+    const said = planCreditsSaid(credits, renews);
+    const share = credits.amount > 0 ? credits.left / credits.amount : 0;
+    return (_jsxs("div", { className: "billing-plan-credits", children: [_jsx("p", { className: "billing-plan-left", children: said.title }), _jsx("div", { className: "billing-meter", role: "meter", "aria-label": "This month's plan credits left", "aria-valuemin": 0, "aria-valuemax": credits.amount, "aria-valuenow": Math.round(credits.left * 100) / 100, children: _jsx("span", { style: { width: `${Math.round(share * 1000) / 10}%` } }) }), _jsx("p", { className: "billing-small", children: said.more })] }));
+}
+/** The plans they can move to; none while a subscription runs (that's Manage billing's). */
+export function PlanOffers({ state, personal = false, call }) {
+    const plan = state.plan;
+    const offers = (state.pay?.plans ?? []).filter((offer) => offer.name !== plan?.name);
+    // A personal org isn't offered a team's plan: it's told where that is instead.
+    const forTeams = (state.pay?.elsewhere ?? []).filter((offer) => offer.for === "team");
+    const subscribed = !!plan?.subscription && plan.status !== "canceled";
+    // On a contract, moving is a conversation, and what a checkout charges isn't its seats.
+    if ((!offers.length && !forTeams.length) || subscribed || plan?.fixedSeats !== undefined) {
+        return null;
+    }
+    return (_jsxs(Card, { as: "section", className: "billing-card", "aria-labelledby": "billing-offers", children: [_jsxs("header", { className: "billing-card-head", children: [_jsx("h3", { id: "billing-offers", children: offers.length ? "Move to a plan" : "Plans" }), offers.length
+                        ? _jsx("p", { className: "billing-small", children: "You'll confirm on a secure payment page before you pay." })
+                        : null] }), offers.length
+                ? (_jsx("ul", { className: "billing-offers", children: offers.map((offer) => (_jsx(OfferRow, { offer: offer, state: state, personal: personal, call: call }, offer.name))) }))
+                : null, forTeams.length ? _jsx(ForTeams, { offers: forTeams }) : null] }));
+}
+/** A team's plans, said to a personal org: what they are, and that a team org takes them. */
+function ForTeams({ offers }) {
+    const names = offers.map((offer) => `${offer.title} (${inCurrency(offer.seat.price, offer.seat.currency)} a seat a month)`);
+    return (_jsxs("p", { className: "billing-small billing-for-teams", children: [_jsx(Icon, { name: "users", size: 14 }), _jsxs("span", { children: ["Working with others? ", names.join(" and "), " ", offers.length === 1 ? "is" : "are", " ", "for team orgs: make one from the org switcher, and choose it in that org's Billing."] })] }));
+}
+/** A plan they can move to: what it costs them, before they go. */
+function OfferRow({ offer, state, personal, call }) {
+    const { busy, error, run, release } = useAct();
+    useBackFromLeaving(release);
+    const price = priceFor(offer.seat, state.billedSeats ?? state.seats, personal);
+    const gets = includes(offer, state.seats, personal);
+    return (_jsxs("li", { className: "billing-offer", children: [_jsxs("div", { className: "billing-offer-text", children: [_jsx("b", { children: offer.title }), _jsx("span", { className: "billing-offer-total", children: price.total }), price.each ? _jsx("span", { children: price.each }) : null, gets.length ? _jsx("span", { children: gets.join(" · ") }) : null] }), _jsxs(Button, { className: "billing-go", loading: busy, onClick: () => void run(async () => {
+                    const { url } = await call("billing.checkout", { plan: offer.name });
+                    leavingFor(url, state);
+                }, true), children: ["Move to ", offer.title] }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }));
+}

package/credits/views/web/staff.d.ts

@@ -0,0 +1,20 @@
+/**
+ * What platform staff do with an org's billing, in the staff colour and marked
+ * as theirs: where it stands now (its plan, how it pays, any waiver, who waived
+ * it and why), and doing something about it: setting its plan or a contract of
+ * its own, giving or taking credits, waiving its usage or seats (and lifting
+ * that), recording a payment that came in by hand. Each in a dialog that says
+ * exactly what will happen, on a button naming it: all of it is on the org's
+ * record, and most of it can only be corrected afterwards, not undone.
+ */
+import { type ReactNode } from "react";
+import { type BillingState } from "./numbers.js";
+import { type Call, type Org } from "./types.js";
+type Props = {
+    state: BillingState;
+    org?: Org;
+    call: Call;
+    onChanged(): Promise<void>;
+};
+export declare function StaffPanel({ state, org, call, onChanged }: Props): ReactNode;
+export {};