g1t/apps/sudo/app/components/billing.tsx
| 1 | /** |
| 2 | * The billing sections shared by a workspace's page and an enterprise's: |
| 3 | * confirmations, terms, credit, the Stripe billing link, the ledger and the |
| 4 | * audit log. Plain forms; sudo ships no JavaScript. |
| 5 | */ |
| 6 | import { CreditCard, Gift, ScrollText, UserRound } from "lucide-react"; |
| 7 | import type { ReactNode } from "react"; |
| 8 | import { Link } from "react-router"; |
| 9 | |
| 10 | import type { AdminAction, AdminOwner, BillingLink, LedgerEntry, Terms } from "@g1t/contracts"; |
| 11 | |
| 12 | import { Avatar, Badge, Button, EmptyState, Field, Input, Notice, Section, Select, Textarea, When } from "~/components/ui"; |
| 13 | import { actionLabel } from "~/lib/ledgers"; |
| 14 | import { dollarsField, usd } from "~/lib/money"; |
| 15 | import type { Review, SectionError } from "~/lib/review"; |
| 16 | |
| 17 | export function Hidden({ values }: { values: Record<string, string> }) { |
| 18 | return ( |
| 19 | <> |
| 20 | {Object.entries(values).map(([name, value]) => ( |
| 21 | <input key={name} type="hidden" name={name} value={value} /> |
| 22 | ))} |
| 23 | </> |
| 24 | ); |
| 25 | } |
| 26 | |
| 27 | export function Figure({ label, value, hint }: { label: string; value: string; hint?: ReactNode }) { |
| 28 | return ( |
| 29 | <div className="rounded-lg border border-line bg-surface px-4 py-3"> |
| 30 | <p className="text-xs text-muted">{label}</p> |
| 31 | <p className="tabular mt-1 text-lg font-semibold tracking-tight">{value}</p> |
| 32 | {hint && <p className="mt-0.5 text-xs text-faint">{hint}</p>} |
| 33 | </div> |
| 34 | ); |
| 35 | } |
| 36 | |
| 37 | /** Owners' usernames, each with their email beneath (and on hover). */ |
| 38 | export function Owners({ owners, compact = false }: { owners: AdminOwner[]; compact?: boolean }) { |
| 39 | if (owners.length === 0) return <span className="text-faint">No owner</span>; |
| 40 | if (compact) { |
| 41 | return ( |
| 42 | <span className="flex flex-col gap-0.5"> |
| 43 | {owners.map((owner) => ( |
| 44 | <span key={owner.username} title={owner.email ?? "No email"} className="min-w-0 truncate"> |
| 45 | <span className="font-mono text-fg-soft">{owner.username}</span> |
| 46 | {owner.email && <span className="block truncate text-xs text-faint">{owner.email}</span>} |
| 47 | </span> |
| 48 | ))} |
| 49 | </span> |
| 50 | ); |
| 51 | } |
| 52 | return ( |
| 53 | <ul className="flex flex-wrap gap-2"> |
| 54 | {owners.map((owner) => ( |
| 55 | <li key={owner.username} title={owner.email ?? "No email"} className="inline-flex items-center gap-1.5 rounded-md border border-line bg-bg px-2 py-1 text-xs"> |
| 56 | <Avatar name={owner.username} size={14} square={false} /> |
| 57 | <span className="font-mono">{owner.username}</span> |
| 58 | {owner.email && <span className="text-faint">{owner.email}</span>} |
| 59 | </li> |
| 60 | ))} |
| 61 | </ul> |
| 62 | ); |
| 63 | } |
| 64 | |
| 65 | // --- Confirmation ------------------------------------------------------------ |
| 66 | |
| 67 | function describeTerms(terms: Terms): [string, string][] { |
| 68 | return [ |
| 69 | ["Terms", terms.kind === "custom" ? "Custom" : terms.kind === "comped" ? "Comped" : "Standard"], |
| 70 | ["Discount", terms.kind === "custom" ? `${terms.discountPercent}%` : "—"], |
| 71 | ["Limit", terms.ceilingMicros == null ? "By trust" : usd(terms.ceilingMicros)], |
| 72 | ["Until", terms.until ? terms.until.slice(0, 10) : "No end"], |
| 73 | ["Note", terms.note || "—"], |
| 74 | ]; |
| 75 | } |
| 76 | |
| 77 | /** Where a confirmed change lands, when its result is shown in place. */ |
| 78 | const RESULT_ANCHOR: Partial<Record<Review["intent"], string>> = { "billing-link": "billing-link", invoice: "invoices" }; |
| 79 | |
| 80 | export function ReviewPanel({ review, pathname }: { review: Review; pathname: string }) { |
| 81 | let title: string; |
| 82 | let body: ReactNode; |
| 83 | let danger = false; |
| 84 | let confirm = "Confirm"; |
| 85 | if (review.intent === "terms") { |
| 86 | const before = describeTerms(review.before); |
| 87 | const after = describeTerms(review.after); |
| 88 | title = "Confirm the new terms"; |
| 89 | danger = review.after.kind === "comped"; |
| 90 | body = ( |
| 91 | <> |
| 92 | <div className="overflow-x-auto"> |
| 93 | <table className="w-full text-sm"> |
| 94 | <thead> |
| 95 | <tr className="text-left text-xs text-muted"> |
| 96 | <th className="py-1.5 pr-4 font-medium" /> |
| 97 | <th className="py-1.5 pr-4 font-medium">Now</th> |
| 98 | <th className="py-1.5 font-medium">After</th> |
| 99 | </tr> |
| 100 | </thead> |
| 101 | <tbody> |
| 102 | {after.map(([label, value], index) => ( |
| 103 | <tr key={label} className="border-t border-line align-top"> |
| 104 | <td className="py-1.5 pr-4 text-muted">{label}</td> |
| 105 | <td className="py-1.5 pr-4 break-words text-faint">{before[index][1]}</td> |
| 106 | <td className={`py-1.5 break-words ${value !== before[index][1] ? "font-medium text-fg" : "text-muted"}`}>{value}</td> |
| 107 | </tr> |
| 108 | ))} |
| 109 | </tbody> |
| 110 | </table> |
| 111 | </div> |
| 112 | {review.after.kind === "comped" && ( |
| 113 | <p className="mt-3 text-sm text-warn"> |
| 114 | Comped: nothing will be charged{review.after.until ? ` until ${review.after.until.slice(0, 10)}` : ""}. Usage is still recorded |
| 115 | at cost. |
| 116 | </p> |
| 117 | )} |
| 118 | </> |
| 119 | ); |
| 120 | } else if (review.intent === "attach") { |
| 121 | title = `Bill ${review.workspace} to ${review.targetName}?`; |
| 122 | body = ( |
| 123 | <p className="text-sm text-muted"> |
| 124 | From now on <span className="font-mono text-fg">{review.workspace}</span>'s usage is billed to{" "} |
| 125 | <span className="text-fg">{review.targetName}</span> and counts against its limit and terms, not its own. |
| 126 | </p> |
| 127 | ); |
| 128 | } else if (review.intent === "detach") { |
| 129 | title = `Move ${review.workspace} off ${review.from}?`; |
| 130 | danger = true; |
| 131 | body = ( |
| 132 | <p className="text-sm text-muted"> |
| 133 | <span className="font-mono text-fg">{review.workspace}</span> goes back to paying for itself, on its own terms and the limit |
| 134 | its trust gives it. It may stop at once if its own limit is lower than what it owes. |
| 135 | </p> |
| 136 | ); |
| 137 | } else if (review.intent === "billing-email") { |
| 138 | title = `Send ${review.name}'s invoices to ${review.after}?`; |
| 139 | body = ( |
| 140 | <p className="text-sm text-muted"> |
| 141 | Stripe emails its invoices to <span className="font-mono text-fg">{review.after}</span> |
| 142 | {review.before ? ( |
| 143 | <> |
| 144 | {" "} |
| 145 | instead of <span className="font-mono">{review.before}</span> |
| 146 | </> |
| 147 | ) : null} |
| 148 | , from the next invoice on.{!review.before && " This also sets the enterprise up as a customer on Stripe."} |
| 149 | </p> |
| 150 | ); |
| 151 | } else if (review.intent === "invoice") { |
| 152 | title = `Invoice ${review.name} now?`; |
| 153 | confirm = "Send the invoice"; |
| 154 | body = ( |
| 155 | <ul className="list-disc space-y-1 pl-5 text-sm text-muted"> |
| 156 | <li>Makes one Stripe invoice, with a line for each of its {review.workspaces} workspace{review.workspaces === 1 ? "" : "s"} for what it owes now.</li> |
| 157 | <li>Net 30: due in 30 days.</li> |
| 158 | <li> |
| 159 | Stripe emails it to <span className="font-mono text-fg">{review.email ?? "the invoice email (none set yet)"}</span>, with a link to |
| 160 | pay on Stripe's page. |
| 161 | </li> |
| 162 | </ul> |
| 163 | ); |
| 164 | } else { |
| 165 | title = `Make a Stripe billing link for ${review.workspace}?`; |
| 166 | confirm = "Make the link"; |
| 167 | body = ( |
| 168 | <p className="text-sm text-muted"> |
| 169 | Opens a one-time session on Stripe's billing page for <span className="font-mono text-fg">{review.workspace}</span>'s |
| 170 | customer, where they update their card and see their invoices. Anyone with the link can use it until it expires, so send it |
| 171 | only to the workspace's owner. Making it is recorded with your email. |
| 172 | </p> |
| 173 | ); |
| 174 | } |
| 175 | return ( |
| 176 | <section id="review" className={`scroll-mt-20 rounded-lg border p-4 sm:p-5 ${danger ? "border-warn/40 bg-warn/5" : "border-merged/40 bg-merged/5"}`}> |
| 177 | <h2 className="font-semibold tracking-tight">{title}</h2> |
| 178 | <div className="mt-3">{body}</div> |
| 179 | <form method="post" action={`${pathname}#${RESULT_ANCHOR[review.intent] ?? "top"}`} className="mt-4 flex flex-wrap items-center gap-2"> |
| 180 | <Hidden values={review.fields} /> |
| 181 | <input type="hidden" name="intent" value={review.intent} /> |
| 182 | <input type="hidden" name="confirm" value="yes" /> |
| 183 | <Button type="submit" variant={danger ? "danger" : "lavender"}> |
| 184 | {confirm} |
| 185 | </Button> |
| 186 | <Link to={pathname} className="px-2 text-sm text-muted hover:text-fg"> |
| 187 | Cancel |
| 188 | </Link> |
| 189 | </form> |
| 190 | </section> |
| 191 | ); |
| 192 | } |
| 193 | |
| 194 | // --- Terms ------------------------------------------------------------------- |
| 195 | |
| 196 | const KINDS: { value: Terms["kind"]; title: string; text: string }[] = [ |
| 197 | { value: "standard", title: "Standard", text: "Published prices; the limit comes from trust." }, |
| 198 | { value: "comped", title: "Comped", text: "Nothing charged. Usage still recorded at cost." }, |
| 199 | { value: "custom", title: "Custom", text: "A discount, a custom limit, or both." }, |
| 200 | ]; |
| 201 | |
| 202 | export function TermsForm({ terms, pathname, error }: { terms: Terms; pathname: string; error: SectionError }) { |
| 203 | const values = error?.values; |
| 204 | const kind = values?.kind ?? terms.kind; |
| 205 | return ( |
| 206 | <Section |
| 207 | id="terms" |
| 208 | title="Terms" |
| 209 | description={ |
| 210 | terms.setBy ? ( |
| 211 | <> |
| 212 | Set by <span className="font-mono">{terms.setBy}</span> on <When at={terms.setAt} /> |
| 213 | {terms.note && <> · “{terms.note}”</>} |
| 214 | </> |
| 215 | ) : ( |
| 216 | "Standard, as everyone starts." |
| 217 | ) |
| 218 | } |
| 219 | > |
| 220 | <form method="post" action={`${pathname}#review`} className="space-y-4"> |
| 221 | <input type="hidden" name="intent" value="terms" /> |
| 222 | {error && <Notice tone="error">{error.error}</Notice>} |
| 223 | <fieldset> |
| 224 | <legend className="mb-1.5 text-sm font-medium text-muted">Kind</legend> |
| 225 | <div className="grid gap-2 sm:grid-cols-3"> |
| 226 | {KINDS.map((option) => ( |
| 227 | <label |
| 228 | key={option.value} |
| 229 | className="flex cursor-pointer gap-2.5 rounded-md border border-line bg-bg p-3 transition-colors hover:border-line-strong has-checked:border-merged/60 has-checked:bg-merged/8" |
| 230 | > |
| 231 | <input type="radio" name="kind" value={option.value} defaultChecked={kind === option.value} className="mt-0.5" required /> |
| 232 | <span> |
| 233 | <span className="block text-sm font-medium">{option.title}</span> |
| 234 | <span className="mt-0.5 block text-xs text-muted">{option.text}</span> |
| 235 | </span> |
| 236 | </label> |
| 237 | ))} |
| 238 | </div> |
| 239 | </fieldset> |
| 240 | <div className="grid gap-4 sm:grid-cols-3"> |
| 241 | <Field label="Discount %" hint="Custom only."> |
| 242 | <Input name="discount" inputMode="numeric" pattern="\d{1,3}" placeholder="0" defaultValue={values?.discount ?? (terms.discountPercent ? String(terms.discountPercent) : "")} /> |
| 243 | </Field> |
| 244 | <Field label="Limit $" hint="Unpaid usage allowed. Blank: trust decides."> |
| 245 | <Input name="ceiling" inputMode="decimal" placeholder="By trust" defaultValue={values?.ceiling ?? dollarsField(terms.ceilingMicros)} /> |
| 246 | </Field> |
| 247 | <Field label="Until" hint="Blank: no end. UTC."> |
| 248 | <Input type="date" name="until" defaultValue={values?.until ?? (terms.until ? terms.until.slice(0, 10) : "")} /> |
| 249 | </Field> |
| 250 | </div> |
| 251 | <Field label="Note" hint="Required. Why, for whoever looks next."> |
| 252 | <Textarea name="note" rows={2} required maxLength={500} defaultValue={values?.note ?? ""} placeholder="e.g. Design partner through launch" /> |
| 253 | </Field> |
| 254 | <div className="flex justify-end"> |
| 255 | <Button type="submit">Review terms</Button> |
| 256 | </div> |
| 257 | </form> |
| 258 | </Section> |
| 259 | ); |
| 260 | } |
| 261 | |
| 262 | // --- Credit ------------------------------------------------------------------- |
| 263 | |
| 264 | export function CreditForm({ workspaces, pathname, error }: { workspaces: string[]; pathname: string; error: SectionError }) { |
| 265 | const values = error?.values; |
| 266 | const single = workspaces.length === 1 ? workspaces[0] : null; |
| 267 | return ( |
| 268 | <Section id="credit" title="Issue credit" description="A refund or goodwill. Added to the workspace's balance at once."> |
| 269 | {workspaces.length === 0 ? ( |
| 270 | <p className="text-sm text-muted">Add a workspace first: credit goes to a workspace.</p> |
| 271 | ) : ( |
| 272 | <form method="post" action={`${pathname}#credit`} className="space-y-4"> |
| 273 | <input type="hidden" name="intent" value="credit" /> |
| 274 | {error && <Notice tone="error">{error.error}</Notice>} |
| 275 | {single ? ( |
| 276 | <input type="hidden" name="workspace" value={single} /> |
| 277 | ) : ( |
| 278 | <Field label="Workspace"> |
| 279 | <Select name="workspace" required defaultValue={values?.workspace ?? ""}> |
| 280 | <option value="" disabled> |
| 281 | Choose a workspace |
| 282 | </option> |
| 283 | {workspaces.map((slug) => ( |
| 284 | <option key={slug} value={slug}> |
| 285 | {slug} |
| 286 | </option> |
| 287 | ))} |
| 288 | </Select> |
| 289 | </Field> |
| 290 | )} |
| 291 | <Field label="Amount $" hint="Up to $10,000 at a time."> |
| 292 | <Input name="amount" inputMode="decimal" required placeholder="25.00" defaultValue={values?.amount ?? ""} /> |
| 293 | </Field> |
| 294 | <Field label="Note" hint="Required. Shown on the workspace's statement."> |
| 295 | <Textarea name="note" rows={2} required maxLength={500} placeholder="e.g. Refund for the failed runs on Oct 2" defaultValue={values?.note ?? ""} /> |
| 296 | </Field> |
| 297 | <Field |
| 298 | label="Confirm" |
| 299 | hint={ |
| 300 | <> |
| 301 | Type the workspace's slug{single && <> (<span className="font-mono text-muted">{single}</span>)</>} to issue it. |
| 302 | </> |
| 303 | } |
| 304 | > |
| 305 | <Input name="confirmation" required placeholder={single ?? "workspace-slug"} className="font-mono" /> |
| 306 | </Field> |
| 307 | <div className="flex justify-end"> |
| 308 | <Button type="submit" variant="lavender"> |
| 309 | <Gift size={14} /> |
| 310 | Issue credit |
| 311 | </Button> |
| 312 | </div> |
| 313 | </form> |
| 314 | )} |
| 315 | </Section> |
| 316 | ); |
| 317 | } |
| 318 | |
| 319 | // --- Stripe billing link ----------------------------------------------------- |
| 320 | |
| 321 | /** |
| 322 | * Card details, invoices and receipts live on Stripe's own billing page. |
| 323 | * sudo never shows a card field: staff send the customer a link instead. |
| 324 | */ |
| 325 | export function BillingLinkSection({ |
| 326 | link, |
| 327 | pathname, |
| 328 | error, |
| 329 | }: { |
| 330 | link: BillingLink | null; |
| 331 | pathname: string; |
| 332 | error: SectionError; |
| 333 | }) { |
| 334 | return ( |
| 335 | <Section |
| 336 | id="billing-link" |
| 337 | title="Stripe billing page" |
| 338 | description="Where the customer updates their card and sees invoices. g1t never takes card numbers." |
| 339 | > |
| 340 | {error && ( |
| 341 | <div className="mb-4"> |
| 342 | <Notice tone="error">{error.error}</Notice> |
| 343 | </div> |
| 344 | )} |
| 345 | {link ? ( |
| 346 | <div className="space-y-4"> |
| 347 | <Notice tone="info">Send this to the customer. g1t never takes card numbers; they enter them on Stripe.</Notice> |
| 348 | <Field label="One-time link" hint={link.expiresNote}> |
| 349 | <Input readOnly value={link.portalUrl} className="font-mono text-xs" aria-label="One-time Stripe billing link" /> |
| 350 | </Field> |
| 351 | {link.loginUrl && ( |
| 352 | <Field label="Permanent sign-in page" hint={`The customer signs in with ${link.customerEmail ?? "the email Stripe has for them"}.`}> |
| 353 | <Input readOnly value={link.loginUrl} className="font-mono text-xs" aria-label="Stripe billing sign-in page" /> |
| 354 | </Field> |
| 355 | )} |
| 356 | {!link.loginUrl && link.customerEmail && <p className="text-xs text-faint">Stripe has {link.customerEmail} for this customer.</p>} |
| 357 | </div> |
| 358 | ) : ( |
| 359 | <form method="post" action={`${pathname}#review`} className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> |
| 360 | <input type="hidden" name="intent" value="billing-link" /> |
| 361 | <p className="text-sm text-muted"> |
| 362 | Never take card details over the phone or by email. Make a link to Stripe's billing page and send it to the owner. |
| 363 | </p> |
| 364 | <Button type="submit" variant="quiet" className="shrink-0"> |
| 365 | <CreditCard size={14} /> |
| 366 | Make a link |
| 367 | </Button> |
| 368 | </form> |
| 369 | )} |
| 370 | </Section> |
| 371 | ); |
| 372 | } |
| 373 | |
| 374 | // --- Ledger and audit --------------------------------------------------------- |
| 375 | |
| 376 | const ENTRY_KIND: Record<string, string> = { top_up: "Top-up", usage: "Usage", credit: "Credit" }; |
| 377 | |
| 378 | export function LedgerSection({ |
| 379 | ledger, |
| 380 | showWorkspace = false, |
| 381 | description = "Recent lines of the statement, newest first.", |
| 382 | }: { |
| 383 | ledger: LedgerEntry[]; |
| 384 | showWorkspace?: boolean; |
| 385 | description?: ReactNode; |
| 386 | }) { |
| 387 | return ( |
| 388 | <Section title="Ledger" description={description}> |
| 389 | {ledger.length === 0 ? ( |
| 390 | <EmptyState title="Nothing yet" /> |
| 391 | ) : ( |
| 392 | <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5"> |
| 393 | <table className="w-full min-w-[36rem] text-sm"> |
| 394 | <thead> |
| 395 | <tr className="border-b border-line text-left text-xs text-muted"> |
| 396 | <th className="px-4 py-2 font-medium sm:pl-5">When</th> |
| 397 | <th className="px-4 py-2 font-medium">What</th> |
| 398 | <th className="px-4 py-2 text-right font-medium sm:pr-5">Amount</th> |
| 399 | </tr> |
| 400 | </thead> |
| 401 | <tbody> |
| 402 | {ledger.map((entry) => ( |
| 403 | <tr key={entry.id} className="border-b border-line align-top last:border-0"> |
| 404 | <td className="px-4 py-2.5 text-xs whitespace-nowrap text-muted sm:pl-5"> |
| 405 | <When at={entry.createdAt} time /> |
| 406 | </td> |
| 407 | <td className="px-4 py-2.5"> |
| 408 | <div className="flex flex-wrap items-center gap-1.5"> |
| 409 | <Badge tone={entry.amountMicros > 0 ? "mint" : "plain"}>{ENTRY_KIND[entry.kind] ?? entry.kind}</Badge> |
| 410 | {showWorkspace && entry.workspace && ( |
| 411 | <Link to={`/workspaces/${encodeURIComponent(entry.workspace)}`} className="font-mono text-xs text-merged hover:underline"> |
| 412 | {entry.workspace} |
| 413 | </Link> |
| 414 | )} |
| 415 | <span className="break-words">{entry.description}</span> |
| 416 | </div> |
| 417 | <p className="mt-0.5 font-mono text-xs text-faint"> |
| 418 | {[ |
| 419 | entry.repo && (entry.number != null ? `${entry.repo}#${entry.number}` : entry.repo), |
| 420 | entry.task, |
| 421 | entry.model, |
| 422 | entry.billedTo === "workspace" ? "own provider" : null, |
| 423 | entry.createdBy && `by ${entry.createdBy}`, |
| 424 | ] |
| 425 | .filter(Boolean) |
| 426 | .join(" · ")} |
| 427 | </p> |
| 428 | </td> |
| 429 | <td className={`tabular px-4 py-2.5 text-right whitespace-nowrap sm:pr-5 ${entry.amountMicros > 0 ? "text-accent" : "text-fg-soft"}`}> |
| 430 | {usd(entry.amountMicros, { signed: true })} |
| 431 | </td> |
| 432 | </tr> |
| 433 | ))} |
| 434 | </tbody> |
| 435 | </table> |
| 436 | </div> |
| 437 | )} |
| 438 | </Section> |
| 439 | ); |
| 440 | } |
| 441 | |
| 442 | |
| 443 | |
| 444 | export function AuditSection({ audit, description = "Every change made in sudo, and by whom." }: { audit: AdminAction[]; description?: ReactNode }) { |
| 445 | return ( |
| 446 | <Section title="Audit log" description={description}> |
| 447 | {audit.length === 0 ? ( |
| 448 | <p className="flex items-center gap-2 text-sm text-muted"> |
| 449 | <ScrollText size={14} /> |
| 450 | No changes yet. |
| 451 | </p> |
| 452 | ) : ( |
| 453 | <ol className="space-y-3"> |
| 454 | {audit.map((entry) => ( |
| 455 | <li key={entry.id} className="border-l-2 border-merged/40 pl-3"> |
| 456 | <p className="flex flex-wrap items-center gap-x-2 text-sm"> |
| 457 | <span className="font-medium text-merged">{actionLabel(entry.action)}</span> |
| 458 | <span className="text-xs text-faint"> |
| 459 | <When at={entry.createdAt} time /> |
| 460 | </span> |
| 461 | </p> |
| 462 | {entry.detail && <p className="mt-0.5 text-sm break-words text-fg-soft">{entry.detail}</p>} |
| 463 | <p className="mt-0.5 flex items-center gap-1 font-mono text-xs text-faint"> |
| 464 | <UserRound size={11} /> |
| 465 | {entry.by} |
| 466 | </p> |
| 467 | </li> |
| 468 | ))} |
| 469 | </ol> |
| 470 | )} |
| 471 | </Section> |
| 472 | ); |
| 473 | } |