Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/workspace/billing.tsx

696 lines30,665 bytesCodeBlame
1import { ArrowUpRight, CreditCard, FileText, Receipt, Rocket } from "lucide-react";
2import { Form, Link, data, redirect, useNavigation } from "react-router";
3
4import {
5 DEPLOYMENTS_ALLOWANCE,
6 MICROS_PER_DOLLAR,
7 type DeployUsage,
8 type Feature,
9 type FeatureState,
10 type Limit,
11 type WorkspaceInvoice,
12} from "@g1t/contracts";
13
14import type { Route } from "./+types/billing";
15import { page } from "../../lib/meta";
16import { StatementView } from "../../components/statement";
17import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
18import { Button, ErrorText } from "../../components/ui";
19import { billing, deployments } from "../../lib/services.server";
20import {
21 assertSameOrigin,
22 getViewer,
23 requireUser,
24 roleIn,
25 unwrap,
26} from "../../lib/session.server";
27
28/** What can be added in one payment, in dollars. */
29const AMOUNTS = [10, 25, 50, 100];
30
31export function meta({ params, ...args }: Route.MetaArgs) {
32 return page(args, { title: `Billing · ${params.owner} · g1t` });
33}
34
35export async function loader({ params, context, request }: Route.LoaderArgs) {
36 const viewer = getViewer(context);
37 const role = roleIn(viewer, params.owner);
38 // Members only; to anyone else the page does not exist.
39 if (!role) throw data(null, { status: 404 });
40 const slug = params.owner.toLowerCase();
41
42 // Back from the payment page: credit it, then drop the id from the address.
43 const url = new URL(request.url);
44 const session = url.searchParams.get("session");
45 if (session) {
46 // The same page returns from both a credit payment and a plan.
47 if (url.searchParams.get("plan")) {
48 await billing.confirmSubscription(slug, viewer, session);
49 throw redirect(`/${slug}/-/billing?subscribed=1`);
50 }
51 await billing.confirm(slug, viewer, session);
52 throw redirect(`/${slug}/-/billing?added=1`);
53 }
54 const group: "day" | "project" = url.searchParams.get("group") === "project" ? "project" : "day";
55 const [account, statement, features, deployUsage, limit, invoices] = await Promise.all([
56 billing.account(slug, viewer),
57 billing.statement(slug, viewer, url.searchParams.get("month"), group),
58 billing.features(slug, viewer),
59 deployments.usage(slug, viewer),
60 billing.limit(slug, viewer),
61 billing.invoices(slug, viewer).catch(() => null),
62 ]);
63 return {
64 slug,
65 role,
66 account: unwrap(account),
67 statement: unwrap(statement),
68 group,
69 features: unwrap(features),
70 deployUsage: deployUsage.ok ? deployUsage.value : null,
71 limit: limit.ok ? limit.value : null,
72 invoices: invoices?.ok ? invoices.value : [],
73 added: url.searchParams.has("added"),
74 subscribed: url.searchParams.has("subscribed"),
75 };
76}
77
78export async function action({ request, params, context }: Route.ActionArgs) {
79 assertSameOrigin(request);
80 const user = requireUser(context, request);
81 const form = await request.formData();
82 const page = `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`;
83 const intent = form.get("intent");
84 if (intent === "portal") {
85 // Card, invoices and billing details live on Stripe's own page.
86 const started = await billing.billingPortal(user, params.owner, page);
87 if (!started.ok) return { error: started.error.message };
88 throw redirect(started.value.url);
89 }
90 if (intent === "spend-limit") {
91 // automatic, fixed (with an amount), or none.
92 const mode = String(form.get("mode") ?? "automatic");
93 const amount = Number(form.get("limit"));
94 if (mode === "fixed" && !(Number.isFinite(amount) && amount >= 1)) {
95 return { error: "A spend limit is a dollar amount, $1 or more." };
96 }
97 const set = await billing.setSpendLimit(
98 user,
99 params.owner,
100 mode === "fixed" ? Math.round(amount * MICROS_PER_DOLLAR) : null,
101 mode === "none",
102 );
103 return set.ok ? null : { error: set.error.message };
104 }
105 if (intent === "subscribe" || intent === "cancel" || intent === "resume") {
106 const feature = String(form.get("feature")) as Feature;
107 if (intent !== "subscribe") {
108 const changed = await billing.cancelSubscription(user, params.owner, feature, intent === "resume");
109 return changed.ok ? null : { error: changed.error.message };
110 }
111 const started = await billing.subscribe(user, params.owner, feature, `${page}?plan=${feature}`);
112 if (!started.ok) return { error: started.error.message };
113 throw redirect(started.value.url);
114 }
115 const dollars = Math.trunc(Number(form.get("amount")));
116 const started = await billing.checkout(
117 user,
118 params.owner,
119 Number.isFinite(dollars) ? dollars * 100 : 0,
120 // Spelled out: a form post arrives at a data address, not the page's.
121 `${new URL(request.url).origin}/${params.owner.toLowerCase()}/-/billing`,
122 );
123 if (!started.ok) return { error: started.error.message };
124 throw redirect(started.value.url);
125}
126
127/** Millionths of a dollar as dollars, to the cent or finer. */
128function dollars(micros: number, digits = 2): string {
129 const sign = micros < 0 ? "−" : "";
130 return `${sign}$${(Math.abs(micros) / MICROS_PER_DOLLAR).toFixed(digits)}`;
131}
132
133export default function WorkspaceBilling({ loaderData, actionData }: Route.ComponentProps) {
134 const { slug, role, account, statement, group, features, deployUsage, limit, invoices, added, subscribed } = loaderData;
135 const { status } = account;
136 const paying = useNavigation().state === "submitting";
137 const empty = account.balanceMicros <= 0;
138 return (
139 <div className="grid gap-10 lg:grid-cols-[1fr_20rem]">
140 <div className="min-w-0">
141 {status.free && (
142 <div className="mb-8 rounded-xl border border-accent/30 bg-accent/5 p-5">
143 <h2 className="font-medium">Free while g1t is being built out</h2>
144 <p className="mt-1.5 max-w-2xl text-sm text-muted">
145 While we build g1t out, using it costs nothing: agents, reviews, checks and workflows. Bring your own
146 model provider under Integrations and its usage is billed by that provider, not by g1t. Runs are still
147 recorded with what they cost, so Usage shows what you are using. This is for now, not forever: pricing
148 will come later, and we will say so well before anything is charged.
149 </p>
150 </div>
151 )}
152 {account.status.enabled && (
153 <section className="mb-8 flex flex-wrap items-center gap-4 rounded-xl border border-line bg-surface p-5">
154 <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent ring-1 ring-accent/30">
155 <Receipt size={18} />
156 </span>
157 <div className="min-w-0 grow">
158 <h2 className="font-medium">Billing on Stripe</h2>
159 <p className="mt-0.5 text-sm text-muted">
160 {account.card
161 ? `${account.card.brand[0].toUpperCase()}${account.card.brand.slice(1)} ending ${account.card.last4}. `
162 : "No card yet. "}
163 Your card, invoices and receipts, and the billing email, address and tax ID.
164 </p>
165 </div>
166 {role === "owner" ? (
167 <Form method="post">
168 <Button variant="accent" type="submit" name="intent" value="portal" disabled={paying}>
169 Open Stripe billing
170 <ArrowUpRight size={14} />
171 </Button>
172 </Form>
173 ) : (
174 <p className="text-xs text-faint">An owner manages billing.</p>
175 )}
176 </section>
177 )}
178
179 {limit && account.status.enabled && (
180 <LimitCard limit={limit} owner={role === "owner"} busy={paying} error={actionData?.error} />
181 )}
182
183 {account.status.enabled && (
184 <section className="mb-10 rounded-xl border border-line bg-surface p-5">
185 <div className="flex flex-wrap items-center justify-between gap-3">
186 <div>
187 <h2 className="font-medium">Card and invoices</h2>
188 {account.card ? (
189 <p className="mt-1 text-sm">
190 <span className="capitalize">{account.card.brand}</span> ending{" "}
191 <span className="font-mono">{account.card.last4}</span>
192 <span className="text-muted">
193 {" "}
194 · expires {String(account.card.expMonth).padStart(2, "0")}/{account.card.expYear}
195 </span>
196 </p>
197 ) : (
198 <p className="mt-1 max-w-xl text-sm text-muted">
199 No card yet. With one on file, g1t charges it as the workspace nears its usage limit and when each
200 month closes, so work never stops for a payment. Saving it charges nothing.
201 </p>
202 )}
203 <p className="mt-2 max-w-xl text-xs text-faint">
204 Cards, invoices, receipts and the billing email and address are managed on Stripe's billing page. g1t
205 never sees card numbers.
206 </p>
207 </div>
208 {role === "owner" && (
209 <Form method="post">
210 <Button variant={account.card ? "quiet" : "accent"} type="submit" name="intent" value="portal" disabled={paying}>
211 <CreditCard size={14} />
212 {account.card ? "Manage billing on Stripe" : "Add a card on Stripe"}
213 </Button>
214 </Form>
215 )}
216 </div>
217 {account.card && (
218 <p className="mt-3 text-xs text-faint">
219 Charged near the usage limit, for what the workspace owes, and when each month closes. A declined card
220 stops work until it is paid.
221 </p>
222 )}
223 {!account.status.live && (
224 <p className="mt-3 text-xs text-faint">
225 Test mode: use card 4242 4242 4242 4242, any future date and code. Test cards are never charged
226 automatically.
227 </p>
228 )}
229 </section>
230 )}
231
232 {invoices.length > 0 && <InvoiceList invoices={invoices} />}
233
234 <h2 className="font-medium">Plans</h2>
235 <p className="mt-1 max-w-2xl text-sm text-muted">
236 Paid features are turned on per workspace with a monthly plan. They are never free, including while the rest of
237 g1t is.
238 </p>
239 {subscribed && <p className="mt-3 text-sm text-accent">Payment received. The plan is on.</p>}
240 <div className="mt-5 space-y-4">
241 {features.map((state) => (
242 <PlanCard
243 key={state.plan.feature}
244 state={state}
245 owner={role === "owner"}
246 enabled={account.status.enabled}
247 live={account.status.live}
248 busy={paying}
249 usage={state.plan.feature === "deployments" ? deployUsage : null}
250 />
251 ))}
252 </div>
253 <div className="mt-2">
254 <ErrorText>{actionData?.error}</ErrorText>
255 </div>
256
257 <h2 className="mt-12 font-medium">Agent credit</h2>
258 <p className="mt-1 max-w-2xl text-sm text-muted">
259 g1t agents that work on this workspace's repositories are paid for from
260 its account: what the model cost, plus {account.marginPercent}%. Every sandbox, for agents, checks, the merge
261 queue and workflows, is metered by the second past 500 free minutes a month. Credit added here pays usage in
262 advance; the usage limit above decides whether work starts.
263 </p>
264
265 <div
266 className={`mt-5 rounded-xl border p-5 ${
267 empty && status.enabled ? "border-warn/40 bg-warn/5" : "border-line bg-surface"
268 }`}
269 >
270 <p className="text-xs text-muted">Balance</p>
271 <p className="mt-1 text-3xl font-semibold tabular-nums tracking-tight">
272 {dollars(account.balanceMicros)}
273 </p>
274 {added && (
275 <p className="mt-2 text-sm text-accent">Payment received. Credit added.</p>
276 )}
277 {status.free && !features.some((state) => state.on && state.subscription) ? (
278 <p className="mt-3 text-sm text-muted">
279 Nothing to add for now: runs are free while g1t is being built out. Credit already here stays for when
280 pricing starts.
281 </p>
282 ) : !status.enabled ? (
283 <p className="mt-3 text-sm text-muted">
284 Payments are not set up on this g1t yet, so nothing is charged and
285 agents are limited to selected accounts.
286 </p>
287 ) : role === "owner" ? (
288 <Form method="post" className="mt-4">
289 <p className="text-sm text-muted">
290 {status.free
291 ? "Agents are free for now; credit pays for plan usage past its allowance. Add credit by card:"
292 : "Add credit by card:"}
293 </p>
294 <div className="mt-2 flex flex-wrap gap-2">
295 {AMOUNTS.map((amount) => (
296 <Button
297 key={amount}
298 variant={amount === 25 ? "accent" : "quiet"}
299 type="submit"
300 name="amount"
301 value={amount}
302 disabled={paying}
303 >
304 <CreditCard size={14} />${amount}
305 </Button>
306 ))}
307 </div>
308 {!status.live && (
309 <p className="mt-3 text-xs text-faint">
310 Payments are in test mode. No real card is charged; use Stripe's
311 test card 4242 4242 4242 4242 with any future date and any code.
312 </p>
313 )}
314 </Form>
315 ) : (
316 <p className="mt-3 text-sm text-muted">An owner can add credit.</p>
317 )}
318 </div>
319
320 <StatementView slug={slug} statement={statement} group={group} />
321 </div>
322
323 <aside className="space-y-5 text-sm">
324 <section className="rounded-xl border border-line bg-surface p-5">
325 <h3 className="font-medium">How it is charged</h3>
326 <ul className="mt-2 list-disc space-y-1.5 pl-4 text-muted">
327 <li>
328 Usage is charged after it runs, to the workspace that owns the repository: agents at what the model cost
329 plus {account.marginPercent}%, and sandbox time, builds and apps at what they cost g1t plus a set markup.
330 </li>
331 <li>
332 Each month closes with an itemised invoice, charged to the card on file. Near your limit, g1t sends one
333 sooner, so work keeps going.
334 </li>
335 <li>
336 With your own model provider, connected under{" "}
337 <Link to={`/${slug}/-/integrations`} className="text-fg hover:underline">
338 Integrations
339 </Link>
340 , the provider bills you for the model and each run here is {dollars(account.orchestrationFeeMicros)}, plus
341 its sandbox time.
342 </li>
343 <li>No seats: add as many people and agents as you like.</li>
344 </ul>
345 <div className="mt-4 space-y-1.5 border-t border-line pt-4 text-sm">
346 <Link to={`/${slug}/-/usage`} className="flex items-center gap-2 text-muted hover:text-fg">
347 <FileText size={14} /> Usage, run by run
348 </Link>
349 <a href="https://g1t.sh/pricing" className="flex items-center gap-2 text-muted hover:text-fg">
350 <CreditCard size={14} /> Today's prices
351 </a>
352 <a
353 href="https://docs.g1t.sh/guides/usage-and-billing/"
354 className="flex items-center gap-2 text-muted hover:text-fg"
355 >
356 <ArrowUpRight size={14} /> How usage and billing work
357 </a>
358 </div>
359 </section>
360 </aside>
361 </div>
362 );
363}
364
365/** A paid feature: what it costs and includes, and its plan. */
366function PlanCard({
367 state,
368 owner,
369 enabled,
370 live,
371 busy,
372 usage,
373}: {
374 state: FeatureState;
375 owner: boolean;
376 enabled: boolean;
377 live: boolean;
378 busy: boolean;
379 usage: DeployUsage | null;
380}) {
381 const { plan, subscription } = state;
382 const ending = subscription?.status === "canceling";
383 const owed = subscription?.status === "past_due";
384 return (
385 <section
386 className={`rounded-xl border p-5 ${
387 state.on && subscription
388 ? "border-accent/40 bg-accent/5"
389 : owed
390 ? "border-warn/40 bg-warn/5"
391 : "border-line bg-surface"
392 }`}
393 >
394 <div className="flex flex-wrap items-start justify-between gap-4">
395 <div className="min-w-0">
396 <h3 className="flex flex-wrap items-center gap-2 font-medium">
397 <Rocket size={15} className="text-accent" />
398 {plan.title}
399 {state.on && subscription && (
400 <span className="rounded-full bg-accent/15 px-2 py-0.5 text-xs text-accent">
401 {ending ? "Ends " : "On"}
402 {subscription.periodEnd && (
403 <>
404 {ending ? "" : " · renews "}
405 {new Date(subscription.periodEnd).toLocaleDateString()}
406 </>
407 )}
408 </span>
409 )}
410 {owed && <span className="rounded-full bg-warn/15 px-2 py-0.5 text-xs text-warn">Payment failed</span>}
411 </h3>
412 <p className="mt-1 text-sm text-muted">
413 Every pull request gets a live preview on g1t.page, and the default branch goes to production on merge.
414 </p>
415 </div>
416 <p className="shrink-0 text-right">
417 <span className="text-2xl font-semibold tabular-nums tracking-tight">
418 ${(plan.monthlyCents / 100).toFixed(0)}
419 </span>
420 <span className="text-sm text-muted"> / month</span>
421 </p>
422 </div>
423 <ul className="mt-4 grid gap-1.5 text-sm text-muted sm:grid-cols-2">
424 {plan.includes.map((line) => (
425 <li key={line} className="flex gap-2">
426 <span className="text-accent">✓</span>
427 {line}
428 </li>
429 ))}
430 </ul>
431 <p className="mt-3 text-xs text-faint">{plan.overage}</p>
432 {state.on && usage && <DeployMeter usage={usage} />}
433 {!enabled ? (
434 <p className="mt-4 text-sm text-muted">Payments are not set up on this g1t, so {plan.title} is already on.</p>
435 ) : !owner ? (
436 !state.on && <p className="mt-4 text-sm text-muted">An owner can turn it on.</p>
437 ) : (
438 <Form method="post" className="mt-4 flex flex-wrap items-center gap-3">
439 <input type="hidden" name="feature" value={plan.feature} />
440 {!state.on || !subscription ? (
441 <Button variant="accent" type="submit" name="intent" value="subscribe" disabled={busy}>
442 <CreditCard size={14} />
443 Turn on {plan.title}
444 </Button>
445 ) : ending ? (
446 <Button variant="quiet" type="submit" name="intent" value="resume" disabled={busy}>
447 Keep {plan.title}
448 </Button>
449 ) : (
450 <Button variant="quiet" type="submit" name="intent" value="cancel" disabled={busy}>
451 Turn off at the end of the period
452 </Button>
453 )}
454 {!live && !state.on && (
455 <span className="text-xs text-faint">Test mode: card 4242 4242 4242 4242, any future date and code.</span>
456 )}
457 </Form>
458 )}
459 </section>
460 );
461}
462
463/** This month's use of the Deployments plan against what it includes. */
464function DeployMeter({ usage }: { usage: DeployUsage }) {
465 const a = DEPLOYMENTS_ALLOWANCE;
466 const rows: [string, number, number, (n: number) => string][] = [
467 ["Apps up at once (most this month)", usage.peakApps, a.apps, (n) => String(n)],
468 ["Requests", usage.requests, a.requests, (n) => n.toLocaleString("en-US")],
469 ["CPU milliseconds", usage.cpuMs, a.cpuMs, (n) => n.toLocaleString("en-US")],
470 ];
471 return (
472 <div className="mt-4 rounded-lg border border-line bg-bg/40 p-4">
473 <p className="text-xs font-medium text-muted">This month ({usage.month})</p>
474 <ul className="mt-2 space-y-2.5">
475 {rows.map(([label, used, included, show]) => (
476 <li key={label} className="text-sm">
477 <div className="flex justify-between gap-4">
478 <span className="text-muted">{label}</span>
479 <span className={`tabular-nums ${used > included ? "text-warn" : ""}`}>
480 {show(used)} <span className="text-faint">of {show(included)}</span>
481 </span>
482 </div>
483 <div className="mt-1 h-1 overflow-hidden rounded-full bg-line">
484 <div
485 className={`h-full rounded-full ${used > included ? "bg-warn" : "bg-accent"}`}
486 style={{ width: `${Math.min(100, (used / included) * 100)}%` }}
487 />
488 </div>
489 </li>
490 ))}
491 </ul>
492 <p className="mt-3 text-xs text-faint">
493 Builds: {Math.ceil(usage.buildSeconds / 60)} min, {dollars(usage.buildMicros, 4)} at cost.
494 {usage.countedAt ? " Requests and CPU time are counted every few minutes." : " Requests are counted once apps get visits."}
495 </p>
496 </div>
497 );
498}
499
500const TRUST: Record<Limit["trust"], { label: string; detail: string }> = {
501 new: { label: "New", detail: "No payment to g1t yet." },
502 paid: { label: "Paid", detail: "Grows with every payment." },
503 established: { label: "Established", detail: "Follows your monthly spend." },
504 reviewed: { label: "Reviewed", detail: "Set by g1t for this workspace." },
505 internal: { label: "Comped", detail: "g1t covers this workspace's usage: nothing is charged, and there is no limit." },
506};
507
508/** One meter: how much of a limit is used. */
509function Meter({ used, of, state }: { used: number; of: number | null; state: "ok" | "warning" | "stopped" }) {
510 const share = of ? Math.min(1, used / Math.max(of, 1)) : 0;
511 const bar = state === "stopped" ? "bg-danger" : state === "warning" ? "bg-warn" : "bg-accent";
512 return (
513 <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-line" role="presentation">
514 <div className={`h-full ${bar}`} style={{ width: `${Math.max(share * 100, share > 0 ? 2 : 0)}%` }} />
515 </div>
516 );
517}
518
519function meterState(used: number, of: number | null): "ok" | "warning" | "stopped" {
520 if (of == null) return "ok";
521 if (used >= of) return "stopped";
522 return used * 5 >= of * 4 ? "warning" : "ok";
523}
524
525/**
526 * The workspace's two limits, side by side: the owners' monthly spend
527 * limit, which protects them from a surprise; and what g1t lets go unpaid,
528 * which grows with what they pay and is charged to the card as it nears.
529 */
530function LimitCard({ limit, owner, busy, error }: { limit: Limit; owner: boolean; busy: boolean; error?: string }) {
531 const tone =
532 limit.state === "stopped" ? "border-danger/40 bg-danger/5" : limit.state === "warning" ? "border-warn/40 bg-warn/5" : "border-line bg-surface";
533 const trust = TRUST[limit.trust];
534 const spent = limit.spentMicros ?? 0;
535 const spendLimit = limit.spendLimitMicros;
536 const available = limit.availableMicros ?? limit.ceilingMicros;
537 const mode = limit.defaultSpendLimit ? "automatic" : spendLimit == null ? "none" : "fixed";
538 if (limit.trust === "internal") {
539 return (
540 <section className="mb-10 rounded-xl border border-line bg-surface p-5">
541 <div className="flex flex-wrap items-baseline justify-between gap-2">
542 <h2 className="font-medium">Limits</h2>
543 <span className="rounded-full border border-accent/40 px-2 py-0.5 text-xs text-accent">Comped</span>
544 </div>
545 <p className="mt-1 text-sm text-muted">{trust.detail}</p>
546 </section>
547 );
548 }
549 return (
550 <section className={`mb-10 rounded-xl border p-5 ${tone}`}>
551 <div className="flex flex-wrap items-baseline justify-between gap-2">
552 <h2 className="font-medium">Limits</h2>
553 <span className="rounded-full border border-line px-2 py-0.5 text-xs text-muted">{trust.label}</span>
554 </div>
555 {limit.account.startsWith("ent_") && (
556 <p className="mt-1 text-sm text-muted">
557 Paid for by the <span className="font-medium text-fg">{limit.accountName}</span> enterprise: these figures are
558 for all of its workspaces together.
559 </p>
560 )}
561
562 <div className="mt-5 grid gap-6 sm:grid-cols-2">
563 <div>
564 <p className="text-xs text-muted">Spent this month</p>
565 <p className="mt-1 text-2xl font-semibold tabular-nums tracking-tight">
566 {dollars(spent)}
567 <span className="text-base font-normal text-muted">
568 {spendLimit == null ? " · no spend limit" : ` of ${dollars(spendLimit)}`}
569 </span>
570 </p>
571 {spendLimit != null && <Meter used={spent} of={spendLimit} state={meterState(spent, spendLimit)} />}
572 <p className="mt-2 text-xs text-faint">
573 {mode === "automatic"
574 ? "Your spend limit is automatic: $200, or twice last month's spend, so it keeps up as you grow."
575 : mode === "fixed"
576 ? "A spend limit you set. At it, work stops until the month turns."
577 : "No spend limit: work never stops for spend, only for what g1t lets go unpaid."}
578 </p>
579 </div>
580 <div>
581 <p className="text-xs text-muted">Not yet paid</p>
582 <p className="mt-1 text-2xl font-semibold tabular-nums tracking-tight">
583 {dollars(limit.exposureMicros)}
584 <span className="text-base font-normal text-muted">
585 {available == null ? "" : ` of ${dollars(available)} available`}
586 </span>
587 </p>
588 {available != null && (
589 <Meter used={limit.exposureMicros} of={available} state={meterState(limit.exposureMicros, available)} />
590 )}
591 <p className="mt-2 text-xs text-faint">
592 With a card on file, g1t charges it as this nears what is available, so work keeps going.
593 {limit.growth ? ` ${limit.growth}` : ""}
594 </p>
595 </div>
596 </div>
597
598 {limit.message && <p className="mt-4 text-sm">{limit.message}</p>}
599
600 {owner && (
601 <Form method="post" className="mt-5 border-t border-line pt-4">
602 <fieldset>
603 <legend className="text-xs text-muted">Your monthly spend limit</legend>
604 <RadioGroup name="mode" defaultValue={mode} className="mt-2 flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
605 <label className="flex cursor-pointer items-center gap-2">
606 <RadioGroupItem value="automatic" />
607 Automatic
608 </label>
609 <label className="flex cursor-pointer items-center gap-2">
610 <RadioGroupItem value="fixed" />
611 Fixed at
612 <span className="flex items-center rounded-md border border-line bg-bg px-2 focus-within:border-accent">
613 <span className="text-muted">$</span>
614 <input
615 name="limit"
616 type="number"
617 min={1}
618 step={1}
619 defaultValue={mode === "fixed" && spendLimit != null ? spendLimit / MICROS_PER_DOLLAR : ""}
620 placeholder="500"
621 className="w-24 bg-transparent px-1 py-1 tabular-nums outline-none"
622 />
623 </span>
624 </label>
625 <label className="flex cursor-pointer items-center gap-2">
626 <RadioGroupItem value="none" />
627 None
628 </label>
629 <Button variant="quiet" type="submit" name="intent" value="spend-limit" disabled={busy}>
630 Save
631 </Button>
632 </RadioGroup>
633 </fieldset>
634 <ErrorText>{error}</ErrorText>
635 <p className="mt-3 text-xs text-faint">
636 Need more than {available != null ? dollars(available) : "this"} available?{" "}
637 <a href="mailto:billing@g1t.sh" className="text-fg hover:underline">
638 Contact us
639 </a>{" "}
640 and we will set terms that fit.
641 </p>
642 </Form>
643 )}
644 </section>
645 );
646}
647
648/** The workspace's invoices from g1t, each kept on Stripe with its PDF. */
649function InvoiceList({ invoices }: { invoices: WorkspaceInvoice[] }) {
650 return (
651 <section className="mb-10">
652 <h2 className="font-medium">Invoices</h2>
653 <p className="mt-1 text-sm text-muted">
654 One when each month closes, and one each time g1t charges the card near your limit. Receipts and PDFs are also
655 on Stripe's billing page.
656 </p>
657 <ul className="mt-4 divide-y divide-line overflow-hidden rounded-xl border border-line">
658 {invoices.map((invoice) => (
659 <li key={invoice.invoiceId} className="px-4 py-3 text-sm">
660 <div className="flex flex-wrap items-center gap-3">
661 <span className="font-medium">
662 {invoice.reason === "month" ? `Usage for ${invoice.period}` : `Charged near the limit, ${invoice.period}`}
663 </span>
664 <span
665 className={`rounded-full border px-2 py-0.5 text-xs ${
666 invoice.status === "paid" ? "border-accent/40 text-accent" : "border-danger/40 text-danger"
667 }`}
668 >
669 {invoice.status === "paid" ? "Paid" : invoice.status === "failed" ? "Payment failed" : invoice.status}
670 </span>
671 <span className="ml-auto font-mono tabular-nums">{dollars(invoice.amountMicros)}</span>
672 {invoice.hostedUrl && (
673 <a href={invoice.hostedUrl} className="text-xs text-muted hover:text-fg">
674 View
675 </a>
676 )}
677 {invoice.pdfUrl && (
678 <a href={invoice.pdfUrl} className="text-xs text-muted hover:text-fg">
679 PDF
680 </a>
681 )}
682 </div>
683 <ul className="mt-1.5 space-y-0.5 text-xs text-faint">
684 {invoice.lines.map((line) => (
685 <li key={line.description} className="flex justify-between gap-4">
686 <span>{line.description}</span>
687 <span className="font-mono tabular-nums">{dollars(line.amountMicros)}</span>
688 </li>
689 ))}
690 </ul>
691 </li>
692 ))}
693 </ul>
694 </section>
695 );
696}